2021-09-16 16:58:13 +02:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width" >
2021-09-19 03:48:30 +02:00
< title > LAP< / title >
2021-09-16 16:58:13 +02:00
< style type = "text/css" >
html, body {
2021-09-19 03:48:30 +02:00
background-color: #222;
color: #fff;
2021-09-16 16:58:13 +02:00
}
body {
2021-09-19 03:48:30 +02:00
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;
2021-09-16 16:58:13 +02:00
}
svg {
width: 100%;
height: 50px;
}
2021-09-19 03:48:30 +02:00
h1 {
text-align: center;
}
2021-09-16 16:58:13 +02:00
.yesscript {
display: none;
}
2021-09-19 03:48:30 +02:00
.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;
}
2021-09-16 16:58:13 +02:00
< / style >
< script type = "application/javascript" >
(function() {
"use strict";
var styleObject = document.createElement("style");
2021-09-19 03:48:30 +02:00
styleObject.innerHTML = ".yesscript { display: block; }";
2021-09-16 16:58:13 +02:00
document.head.appendChild(styleObject);
})();
< / script >
< / head >
< body >
2021-09-19 03:48:30 +02:00
< div id = "owner_label" > < / div >
< h1 > Zeus WPI – < / 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 (0– < / 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 >
2021-09-16 16:58:13 +02:00
< script type = "application/javascript" >
2021-09-19 03:48:30 +02:00
(function() {
2021-09-16 16:58:13 +02:00
"use strict";
var objects = document.getElementsByClassName("noscript");
for (var i in objects) {
if (objects.hasOwnProperty(i)) {
objects[i].parentElement.removeChild(objects[i]);
}
}
})();
< / script >
2021-09-19 03:48:30 +02:00
< script type = "application/javascript" src = "main.js" > < / script >
2021-09-16 16:58:13 +02:00
< / body >
< / html >
