CheatGUI

CheatGUI is a lightweight JavaScript library that provides a simple way to create draggable, collapsible, and customizable windows with various UI elements. Here are some of its advantages:

1. Easy to use: The library provides a straightforward API for creating windows and UI elements.
2. Lightweight: The library is small in size, making it suitable for projects where performance is a concern.
3. Customizable: You can easily customize the appearance of the windows and UI elements using CSS.
4. Mobile support: interacting with UI elements works on mobile devices as well.
5. Supports various UI elements: The library includes support for text, buttons, toggles, sliders and more.

Live demo: https://cat-125.github.io/cheatgui/demo

Usage

To get started with CheatGUI, you need to include it in your project. Here's a step-by-step guide on how to do it:

1. Download the library: Download the CheatGUI library from the Releases page or use the beta builds available in the GitHub Actions.

2. Include the Library: First, include CheatGUI in your HTML file by using the following script and link tags. Make sure you replace path_to_cheatgui with the actual path where the CheatGUI library is located.

   <link rel="stylesheet" href="path_to_cheatgui/cheatgui.min.css" />
   <script src="path_to_cheatgui/cheatgui.min.js"></script>
   Copy

3. Use CheatGUI: Once the library is included, you can create a new window.

   const win = new cheatgui.Window({
   	x: 50,
   	y: 300,
   	width: 300,
   	height: 200,
   	title: 'Window'
   });
   
   win.append(new cheatgui.Text('Hello, world!'));
   Copy

4. Customize: You can customize CheatGUI by adding custom CSS styles or by modifying the configuration.

   // Customizing CheatGUI
   cheatgui.utils.loadTheme('path_to_theme.css');
   cheatgui.utils.updateConfig({
   	symbols: {
   		expanded: '▼',
   		collapsed: '◀',
   		resize: '◢'
   	},
   	minWindowWidth: 150,
   	minWindowHeight: 100,
   	language: {
   		close: 'Close'
   	}
   });
   Copy

For more detailed examples and advanced usage, please refer to the Documentation.

File differences

CheatGUI has several files that can be imported. Here are the differences between them:

• cheatgui.min.js, cheatgui.min.css - compressed versions of the files. Most often they are needed.
• cheatgui.inj.js - this file automatically embeds CSS code, and can be used for injection into third-party sites.

Examples

const win = new cheatgui.Window({
	x: 50,
	y: 300,
	width: 300,
	height: 200,
	title: 'Window'
});

win.append(new cheatgui.Text('Hello, world!'));

const btn = new cheatgui.Button('Button');
btn.onClick(() => alert('Button clicked'));
win.append(btn);

const tree = new cheatgui.Tree('Tree');
win.append(tree);

tree.append(
	new cheatgui.Slider({
		label: 'Float',
		max: 1,
		step: 0.01,
		value: 0.5
	})
);
Copy

See also index.html.

Documentation

Documentation for CheatGUI is available at https://cat-125.github.io/cheatgui.

Features

Widgets

const widget = new cheatgui.WidgetName(...);
Copy

• Text
• Button
• Input
• Slider
• Switch
• Tree
• Dropdown
• And more

Themes

cheatgui.utils.loadTheme(url);
Copy

You can download and use themes from the themes folder or create your own.

Other

• Popup menus (cheatgui.openPopupMenu({title, items[], closable}))
• Some utils (cheatgui.utils)
• Widget class for creating custom widgets
• Mobile device detection (cheatgui.isMobile)

Future plans

• [x] Ability to save & load configurations
• [x] Shorter way to add widgets
• [ ] Color input
• [ ] Tabs
• [ ] Vertical tabs
• [ ] Input with button
• [ ] Window builder

Screenshots

Contributing

See CONTRIBUTING.md for details.

License

CheatGUI is open-sourced software licensed under the MIT license.

Stats