ledstrip_sandbox/frontend/index.html
2021-09-19 03:48:30 +02:00

218 lines
4.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>LAP</title>
<style type="text/css">
html, body {
background-color: #222;
color: #fff;
}
body {
font-family: monospace;
}
input, button, textarea {
color: inherit;
background-color: #222;
padding: 1ex;
border-radius: 1ex;
border: 1px solid #777;
font-family: inherit;
font-size: inherit;
box-sizing: border-box;
box-shadow: 0.4em 0.4em 1em #0d0d0d inset;
}
input:focus, button:focus, textarea:focus {
border-color: #6688ff;
outline: none;
}
button {
padding: 0.5ex 1ex;
box-shadow: -0.4em -0.4em 1em #0d0d0d inset, 0.2em 0.2em 0.5em #1d1d1d;
cursor: pointer;
}
button:hover {
border-color: #656565;
}
button:active {
box-shadow: 0.4em 0.4em 1em #0d0d0d inset, 0.2em 0.2em 0.5em #1d1d1d;
}
input[disabled], button[disabled], textarea[disabled] {
box-shadow: none;
border-color: #777;
}
button[disabled] {
color: #777;
cursor: default;
}
svg {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
}
.yesscript {
display: none;
}
.segment {
font-size: 70%;
display: inline-block;
height: 1em;
line-height: 1em;
cursor: pointer;
border: 1px solid transparent;
margin: 1px;
margin-bottom: 2em;
padding: 2px;
box-shadow: 0 0.2em 0.5em #1d1d1d;
position: relative;
z-index: 100;
}
.segment:first-child {
border-top-left-radius: 0.75em;
border-bottom-left-radius: 0.75em;
}
.segment:last-child {
border-top-right-radius: 0.75em;
border-bottom-right-radius: 0.75em;
}
.segment.active {
border-color: #fff;
z-index: 101;
}
.segment:focus, .segment:hover {
border-color: #6688ff;
}
#owner_label {
position: absolute;
display: none;
z-index: 300;
background-color: #4466dd;
border-radius: 0.5em;
padding: 0.2em 0.4em;
color: white;
font-size: 1em;
line-height: 1em;
}
.led {
display: inline-block;
height: 6px;
width: 6px;
border-radius: 6px;
margin-left: 2px;
margin-right: 2px;
background-color: #fff;
opacity: 0.5;
}
.segment.active .led {
opacity: 0.75;
}
#segment-control, #program {
display: none;
}
#owner_line {
line-height: 3em;
}
#lua_editor {
width: 100%;
height: 200px;
}
</style>
<script type="application/javascript">
(function() {
"use strict";
var styleObject = document.createElement("style");
styleObject.innerHTML = ".yesscript { display: block; }";
document.head.appendChild(styleObject);
})();
</script>
</head>
<body>
<div id="owner_label"></div>
<h1>Zeus WPI LED-Automaten-Programmatie</h1>
<p class="noscript">Voor deze applicatie is helaas JavaScript vereist.</p>
<div id="configuration" class="yesscript">
<h2>Configuratie</h2>
Je schuilnaam: <input type="text" name="us" id="us" onchange="ledStripControl.updateUs()">
</div>
<div id="led-strip" class="yesscript">
<h2>LED-strip</h2>
<div id="segments">
LED-strip wordt geladen...
</div>
</div>
<div id="segment-control">
<h2>Segmentcontrole</h2>
<div>
Segment <b id="active_segment_id"></b>
van LED <b id="active_segment_begin"></b>
tot <b id="active_segment_end"></b>
</div>
<div id="owner_line">Toegewezen aan: <b id="active_segment_owner"></b> <button id="claim_button"></button> <button id="release_button"></button></div>
</div>
<div id="program">
<h2>Programma</h2>
<p id="not-your-own">Dit segment is niet van jou. Je kunt de code enkel bekijken.</p>
<textarea id="lua_editor" spellcheck="false"></textarea>
<div id="program-controls">
<button id="publish-button">Publiceren</button>
<p>De code wordt niet bestendig bewaard. <strong>Sla ze zelf op op je computer.</strong> Gebruik dit veld bij voorkeur enkel om naar te kopiëren-en-plakken.</p>
</div>
<div id="program-instructions">
<p>Programmeer je segment in Lua. Voor je code lijkt het alsof je LED 0 tot <span id="active_segment_last_virtual">x</span> hebt. Extra beschikbare functies:</p>
<dl>
<dt>led(led_nr, r, g, b)</dt>
<dd>Stel LED <i>led_nr</i> in op de kleur met gegeven RGB-waarden (0255)</dd>
<dt>ledamount(something, probably)</dt>
<dd>Uhh</dd>
<dt>delay(ms)</dt>
<dd>Wacht gedurende <i>ms</i> milliseconden</dd>
<dt>waitframes(frames)</dt>
<dd>Wacht gedurende <i>frames</i> frames</dd>
<dt>print(message)</dt>
<dd>Stuur <i>message</i> naar de console</dd>
</dl>
</div>
</div>
<script type="application/javascript">
(function() {
"use strict";
var objects = document.getElementsByClassName("noscript");
for (var i in objects) {
if (objects.hasOwnProperty(i)) {
objects[i].parentElement.removeChild(objects[i]);
}
}
})();
</script>
<script type="application/javascript" src="main.js"></script>
</body>
</html>