An IMGUI inspired GUI Framework for javascript thats designed to be as simple to use as IMGUI.
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/535798/1594266/ImmediateGUI.js
An IMGUI inspired GUI Framework for javascript thats designed to be as simple to use as IMGUI. Its actively developed, which means stuff might change and bugs (most definitely) will occur when using this
Supports most of the default controls one could need, can drag the gui around with the mouse, toggle between light/dark mode etc.
For how to use it, check the example code down below (and look at the code of the library)
Example Images (and pseudo code how they were made)
const $$ = new ImmediateGUI({
theme: 'dark',
position: 'left',
width: 400,
draggable: true,
title: 'Example GUI',
titleLeftAligned: true,
});
$$.BeginTabs(['Tab 1', 'Tab 2', 'Tab 3'], 0);
// $$.SetActiveTab(0) is implicitly called when the first tab is created
$$.Button("Tab 1 Button 1", () => { console.log('Tab 1 Button 1 clicked'); });
$$.SetActiveTab('Tab 2'); /* Same as calling .SetActiveTab('1') as the second tab is the tab with the text 'Tab 2' */
$$.Button("Tab 2 Button 1", () => { console.log('Tab 1 Button 1 clicked'); });
$$.Textbox("Tab 2 Textbox 1", "Tab 2 Textbox 1");
$$.ToggleSwitch("Tab 2 Toggle", true);
$$.SetActiveTab(2);
$$.TextArea("Tab 3 TextArea 1");
const pb = $$.ProgressBar(0, 0, 100, true);
setInterval(() => {
const value = pb.getValue(); /* pb.value */
if (value >= pb.max) {
pb.setValue(pb.min);
//pb.value = pb.min;
} else {
pb.setValue(value + 1);
//pb.value = value + 1;
}
}, 500);
$$.EndTabs();
$$.Header("Example Header", 5);
$$.ToggleSwitch("Dark Mode", true, '', (value) => { $$.SetTheme(value ? 'dark' : 'light'); });
$$.BeginRow(0);
$$.Textbox("Row Textbox 1");
$$.Button("Row Button 1");
$$.Button("Row Button 2");
$$.EndRow();
$$.Image("https://duckduckgo.com/assets/logo_header.v109.svg", "Example Image", 100, 100);
$$.Button("Example Button", null);
$$.Textbox("Example Textbox");
$$.TextArea("Example TextArea");
$$.Label("Example Label");
$$.ProgressBar(64, 0, 100, true);
$$.ColorPicker('#000000');
$$.DatePicker();
$$.Dropdown(["Option 1", "Option 2", "Option 3"], "Option 1");
$$.NumberInput("Example Number Input", 0, 0, 100);
$$.Slider(0, 100, 25);
$$.Checkbox("Example Checkbox", true);
$$.BeginSection("Example Section (Non collapsable)", false);
$$.Button("Control inside section");
$$.Textbox("Textbox inside section");
$$.EndSection();
$$.BeginSection("Example Section (Collapsable)", true);
$$.Button("Control inside section");
$$.EndSection();
$$.BeginIndentation(1);
$$.Button("Indented Control (Level 1)");
$$.EndIndentation();
$$.BeginIndentation(2);
$$.Button("Indented Control (Level 2)");
$$.EndIndentation();
$$.BeginIndentation(3);
$$.Button("Indented Control (Level 3)");
$$.EndIndentation();
$$.BeginIndentation(4);
$$.Button("Indented Control (Level 4)");
$$.EndIndentation();
$$.BeginIndentation(2);
$$.Button("Indented Control (Level 2 again)");
$$.EndIndentation();
$$.Label("Example Separator");
$$.Separator();
$$.BeginSection("Example Radio Button Group", true);
$$.RadioButtons(['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'], 'Option 1');
$$.EndSection();
$$.Button("Spawn Modal", () => {
$$.ShowModal("Example Modal", "Example Modal Header", {
type: 'success',
buttons: [
{ text: 'OK', callback: () => { console.log('OK clicked'); }, primary: true },
{ text: 'Cancel', callback: () => { console.log('Cancel clicked'); } },
],
});
});
$$.Button("Switch Theme", () => { $$.SetTheme($$.options.theme === 'dark' ? 'light' : 'dark'); });
$$.Show();
QingJ © 2025
镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址