guify
Version:
A simple GUI for inspecting and changing JS variables
317 lines (273 loc) • 9.38 kB
HTML
<html>
<head>
<title>Guify Example</title>
<link rel="icon" href="data:,">
<style>
body {
background-color: #3e3e3e;
}
#fake-container {
max-width: 512px;
max-height: 512px;
width: 80vw;
height: 80vw;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5em;
margin-bottom: 1.5em;
position: relative;
}
#fake-container-content {
width: 100%;
height: 100%;
position: relative;
background-color: rgb(255, 255, 230);
display: flex;
justify-content: center;
/* align horizontal */
align-items: center;
/* align vertical */
}
</style>
<!-- Ruin everything with Bootstrap to simulate invasive page styling -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' integrity='sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u' crossorigin='anonymous'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css' integrity='sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp' crossorigin='anonymous'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' integrity='sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa' crossorigin='anonymous'></script> -->
<!-- Inserts `guify` into the global namespace -->
<script src='../lib/guify.js'></script>
</head>
<body>
<div id="fake-container">
<div id="fake-container-content">
<div style="font-family: monospace;">
[content]
</div>
</div>
</div>
<script>
var container = document.getElementById("fake-container");
console.log(this);
// Create the GUI
var gui = new guify({
title: 'Test App',
theme: 'dark', // dark, light, yorha, or theme object
align: 'right', // left, right
width: 300,
barMode: 'offset', // none, overlay, above, offset
panelMode: 'inner',
opacity: 0.95,
root: container,
open: true
});
// Populate the GUI
var someNumber = 0;
gui.Register({
type: 'range',
label: 'Range',
min: 0, max: 10,
precision: 10,
object: this, property: "someNumber",
onChange: (data) => {
console.log(someNumber);
}
});
var steppedNumber = 8;
gui.Register({
type: 'range',
label: 'Stepped Range',
min: 8, max: 64, step: 8,
object: this, property: "steppedNumber",
onChange: (data) => {
console.log(steppedNumber);
}
});
var logNumber = 20;
gui.Register({
type: 'range',
label: 'Log Range',
object: this,
property: 'logNumber',
min: 0.1, max: 100, scale: 'log',
onChange: (data) => {
console.log(logNumber);
}
})
var intervalNumber = [15, 30];
gui.Register({
type: 'interval',
label: 'Interval',
min: 5, max: 75,
object: this, property: "intervalNumber",
onChange: (data) => {
console.log(intervalNumber);
}
});
var steppedIntervalNumber = [10, 25];
gui.Register({
type: 'interval',
label: 'Stepped Interval',
min: 5, max: 75, step: 5,
object: this, property: "steppedIntervalNumber",
onChange: (data) => {
console.log(steppedIntervalNumber);
}
});
var logIntervalNumber = [15, 30];
gui.Register({
type: 'interval',
label: 'Log Interval',
scale: 'log',
min: 5, max: 750,
object: this, property: "logIntervalNumber",
onChange: (data) => {
console.log(logIntervalNumber);
}
});
gui.Register({
type: 'title',
label: 'Title'
});
gui.Register({
type: 'button',
label: 'Button',
action: () => {
console.log('Clicked');
}
})
var checkboxTest = false;
gui.Register({
type: 'checkbox',
label: 'Checkbox',
object: this,
property: 'checkboxTest',
onChange: (data) => {
console.log(checkboxTest);
}
})
var testSelection = 'Option 1';
gui.Register({
type: 'select',
label: 'Select',
object: this,
property: 'testSelection',
options: ['Option 1', 'Option 2'],
onChange: (data) => {
console.log(testSelection);
}
})
var testText = 'Some text here';
gui.Register({
type: 'text',
label: 'Text',
object: this, property: 'testText',
listenMode: 'input', // Can be 'input' or 'change'
onChange: (data) => {
console.log(testText);
}
})
var rgbColor = 'rgb(255, 0, 0)';
gui.Register({
type: 'color',
label: 'RGB Color',
format: 'rgb',
object: this,
property: 'rgbColor'
})
var hexColor = '#00FF00';
gui.Register({
type: 'color',
label: 'Hex Color',
format: 'hex',
object: this,
property: 'hexColor'
})
var file = null;
gui.Register({
type: 'file',
label: 'File',
object: this,
property: 'file',
onChange: (data) => {
console.log(data);
}
})
var displayValue = "Displays the toString representation of a variable.";
gui.Register({
type: 'display',
label: 'Display',
object: this,
property: 'displayValue'
})
// Folder example
gui.Register({
type: 'folder',
label: 'Folder',
open: false
});
// Add to the folder example
gui.Register([
{ type: 'range', label: 'Range', min: 0, max: 20, step: 1 },
{ type: 'title', label: 'Title' },
{ type: 'button', label: 'Button' },
{ type: 'checkbox', label: 'Checkbox' },
{ type: 'select', label: 'Select', options: ["Option A", "Option B"] },
{ type: 'text', label: 'Text', initial: 'Some text' },
{ type: 'color', label: 'Color' },
], {
folder: 'Folder'
});
gui.Register({
type: 'text',
label: 'long long long long long long long long label',
folder: 'Folder',
})
// Add a nested folder
gui.Register({ type: 'folder', label: 'Nested Folder', folder: 'Folder', open: false });
gui.Register({ type: 'text', label: 'Folder Text', folder: 'Nested Folder', initial: 'Nested text' });
// Debug folder
gui.Register({
type: 'folder',
label: 'Debug',
open: false
})
gui.Register({
type: 'button',
label: 'Toast Test',
folder: 'Debug',
action: () => {
// Send a toast
gui.Toast('Test Toast');
},
})
gui.Register({
type: 'button',
label: 'Randomize Components',
folder: 'Debug',
action: () => {
// Randomize all the values bound to components in this example.
// Good test for whether component binding is actually working.
someNumber = Math.random() * 10;
steppedNumber = ~~((Math.random() + 0.1) * 8) * 8;
logNumber = Math.random() * 99 + 0.1;
checkboxTest = !checkboxTest;
testText = (Math.random() + 1).toString(36).substring(7); // Random string
rgbColor = 'rgb(' + Math.random() * 255 + ', 0, 0)';
hexColor = "#";
for (var i = 0; i < 6; i++) hexColor += Math.floor(Math.random() * 9).toString()
testSelection = "Option " + (Math.random() < 0.5 ? "1" : "2");
}
})
// This button gets automatically removed by our API
var removedButton = gui.Register({
type: 'button',
label: 'Button',
action: () => {
console.log('Clicked');
}
})
removedButton.container.disabled = true;
gui.Remove(removedButton);
</script>
</body>