diff options
| author | Roland Reichwein <mail@reichwein.it> | 2025-01-20 21:56:53 +0100 |
|---|---|---|
| committer | Roland Reichwein <mail@reichwein.it> | 2025-01-20 21:56:53 +0100 |
| commit | 2c5684482c14764cec4fb32b2ec07dd3f77fd4bf (patch) | |
| tree | 9ff9c5c04a20c30568f4ce1c466fe55818a0b45b /html | |
| parent | 5fd637644c7529bfdc5291215f3f8ee1edd304c4 (diff) | |
Diffstat (limited to 'html')
| -rw-r--r-- | html/favicon.ico | bin | 0 -> 2238 bytes | |||
| -rw-r--r-- | html/index.html | 263 |
2 files changed, 263 insertions, 0 deletions
diff --git a/html/favicon.ico b/html/favicon.ico Binary files differnew file mode 100644 index 0000000..e8cbddb --- /dev/null +++ b/html/favicon.ico diff --git a/html/index.html b/html/index.html new file mode 100644 index 0000000..2fd9898 --- /dev/null +++ b/html/index.html @@ -0,0 +1,263 @@ +<!DOCTYPE html> +<html> + <head> + <title>CLICK</title> + +<style> +:root{ + background-color:#000000; + color:#FFFFFF; + font-family: "sans-serif"; +} + +body { + /* + background-color:#808080; + */ +} + +#headline{ + color:#808080; + text-align: center; + font-size: 12pt; +} + +#statusdiv{ + color:#808080; + text-align: center; +} + +.button{ + width: 200px; + height: 150px; + + background-color: #04AA04; + border: none; + color: white; + padding: 20px 50px; + text-align: center; + text-decoration: none; + display: inline-block; + margin: 4px 2px; + border-radius: 8px; +} + +#buttoncontainer{ + text-align: center; + width: 100%; +} + +.selected{ + color: #FF8080; + cursor: pointer; + font-size: 500%; +} + +.normal{ + color: #FFFFFF; + cursor: pointer; + font-size: 500%; +} + +#ui{ + height: calc(100vh - 300px); + width: 100%; + white-space: pre; + overflow-x: auto; + overflow-y: auto; + font-family: monospace; +} + +</style> +<script type="text/javascript"> + var play_state = "stopped"; + + function draw_play() + { + var canvas = document.getElementById("playcanvas"); + + var height = canvas.height; + var width = canvas.width; + + var c = canvas.getContext("2d"); + + c.clearRect(0, 0, width, height); + c.fillStyle = "#FFFFFF"; + c.beginPath(); + c.moveTo(30,30); + c.lineTo(70,50); + c.lineTo(30,70); + c.lineTo(30,30); + c.fill(); + } + + function draw_stop() + { + var canvas = document.getElementById("stopcanvas"); + + var height = canvas.height; + var width = canvas.width; + + var c = canvas.getContext("2d"); + + c.clearRect(0, 0, width, height); + c.fillStyle = "#FFFFFF"; + c.beginPath(); + c.moveTo(30,30); + c.lineTo(70,30); + c.lineTo(70,70); + c.lineTo(30,70); + c.lineTo(30,30); + c.fill(); + } + + function draw_symbols() + { + draw_play(); + draw_stop(); + } + + function show_play() + { + document.getElementById("playcanvas").style.display = 'block'; + document.getElementById("stopcanvas").style.display = 'none'; + } + + function show_stop() + { + document.getElementById("stopcanvas").style.display = 'block'; + document.getElementById("playcanvas").style.display = 'none'; + } + + function show_status(text) { + document.getElementById("status").innerHTML = text; + } + + function remove_extension(filename) + { + if (filename.endsWith(".midi")) { + return filename.substring(0, filename.length - 5); + } + if (filename.endsWith(".mid")) { + return filename.substring(0, filename.length - 4); + } + return filename; + } + + function get_ui(){ + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4) { + return; + } + if (this.status != 200) { + show_status("HTTP error"); + } else { + var xml = xhr.responseXML; + var ui = xml.getElementsByTagName("ui")[0].childNodes[0].nodeValue; + + document.getElementById("ui").innerHTML = ui; + show_status("OK"); + } + } + + xhr.open("POST", "click.fcgi" + "?command=getui", true); + xhr.setRequestHeader("Content-type", "text/xml"); + xhr.send(""); + } + + function playbutton_clicked() + { + var action = "start"; + var element = document.getElementById("playbutton"); + if (play_state == "stopped") { + show_stop(); + play_state = "playing"; + } else { + show_play(); + play_state = "stopped"; + action = "stop"; + } + + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4) { + return; + } + if (this.status != 200) { + show_status("HTTP error"); + } else { + var xml = xhr.responseXML; + var message = xml.getElementsByTagName("message")[0].childNodes[0].nodeValue; + + show_status(message); + } + } + + xhr.open("POST", "click.fcgi" + "?command=" + action, true); + xhr.setRequestHeader("Content-type", "text/xml"); + xhr.send(""); + } + + function ui_clicked(index) + { + var xhr = new XMLHttpRequest(); + + xhr.onreadystatechange = function() { + if (this.readyState != 4) { + return; + } + if (this.status != 200) { + show_status("HTTP error"); + } else { + var xml = xhr.responseXML; + var message = xml.getElementsByTagName("message")[0].childNodes[0].nodeValue; + + show_status(message); + + get_ui(); // trigger reload + } + } + + xhr.open("POST", "click.fcgi" + "?command=setfile", true); + xhr.setRequestHeader("Content-type", "text/xml"); + xhr.send("<data><value>" + "</value></data>"); + } + + function startup() { + draw_symbols(); + document.getElementById("playbutton").onclick = playbutton_clicked; + show_play(); + + get_ui(); + } + +</script> +</head> +<body onload="startup();"> + <div id="headline">CLICK</div> + +<br/> +<div id="ui"> +(Loading UI...) +</div> +<br/> +<div id="buttoncontainer"> +<button class="button">-</button> +<button class="button">+</button> +<button id="playbutton" class="button"> +<canvas id="playcanvas" width="100" height="100"></canvas> +<canvas id="stopcanvas" width="100" height="100"></canvas> +</button> +<button class="button">Mode</button> +<button class="button">Note</button> +</div> +<br/> +<div id="statusdiv"> + Status: <span id="status">(unknown)</span> +</div> + + </body> +</html> |