guify
Version:
A simple GUI for inspecting and changing JS variables
148 lines (122 loc) • 4.11 kB
HTML
<html>
<head>
<style>
body {
background-color: #3e3e3e;
}
#fake-container {
width: 512px;
height: 512px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 3em;
position: relative;
background-color: white;
}
#fake-container-content {
width: 512px;
height: 512px;
position: relative;
background-color: white;
}
</style>
<!-- Inserts `guify` into the global namespace -->
<script src='../lib/guify.js'></script>
</head>
<body>
<div id="fake-container">
<div id="fake-container-content"></div>
</div>
<script>
var addBootstrap = false;
// Ruin everything with Bootstrap to simulate invasive page styling
if(addBootstrap) {
document.head.innerHTML += `<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>`;
}
var container = document.getElementById("fake-container");
var someNumber = 0;
// Create the GUI
var gui = new guify.GUI({
title: 'Test App',
//theme: 'dark', // dark, light
align: 'left', // left, right
width: 300,
barMode: 'offset', // overlay, above, offset
opacity: 0.95,
root: container,
useMenuBar: true,
}, [
// You can optionally create components here
{type: 'range', label: 'Test', object: this, property: "someNumber", onChange: (data) => { console.log(someNumber); }}
]);
// Populate the GUI
gui.Register({
type: 'title',
label: 'Test Title 2'
});
var testNumber = 0;
gui.Register({
type: 'range',
label: 'Range Test',
object: this,
property: 'testNumber',
min: 0, max: 10, step: 1,
onChange: (data) => {
console.log(testNumber);
}
})
gui.Register({
type: 'button',
label: 'Test Button',
action: () => {
console.log('Clicked');
}
})
var checkboxTest = false;
gui.Register({
type: 'checkbox',
label: 'Test Checkbox',
object: this,
property: 'checkboxTest',
onChange: (data) => {
console.log(checkboxTest);
}
})
gui.Register({
type: 'select',
label: 'Test Select',
options: ['Option 1', 'Option 2'],
onChange: (data) => {
console.log(data);
}
})
var testText = 'Some text here';
gui.Register({
type: 'text',
label: '',
object: this,
property: 'testText',
onChange: (data) => {
console.log(testText);
}
})
var testColor = 'rgb(255, 0, 0)';
gui.Register({
type: 'color',
label: 'Test Color',
format: 'rgb',
object: this,
property: 'testColor'
})
gui.Register({
type: 'button',
label: 'Toast Test',
action: () => {
gui.Toast('Test Toast');
}
})
</script>
</body>