8abc823276
- essayé d'installer webide sur NodeMCU, il y a justement un exemple de websocker server, je n'arrive pas encore à comprendre comment cela marche - donc il y a encore pas mal de taf
116 lines
4.1 KiB
HTML
Executable File
116 lines
4.1 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>LED Cheering Stick</title>
|
|
</head>
|
|
<body>
|
|
<h1>LED Cheering Stick</h1>
|
|
<p>Text: <input type="text" id="myText" value="Hello!"><button id='set'>Set</button></p>
|
|
<canvas id="myCanvas" width="140" height="28" style="border:1px solid #00f;">Your browser does not support the HTML5 canvas tag.</canvas>
|
|
<div id="localStatus"></div>
|
|
<div id="remoteStatus"></div>
|
|
<script>
|
|
var w = 140;
|
|
var h = 28;
|
|
var blockSize = 320;
|
|
|
|
var savingText;
|
|
var savingFileOffset;
|
|
var savingXhr;
|
|
|
|
function color_text(v) {
|
|
return String.fromCharCode(Math.round(v/64));
|
|
}
|
|
|
|
function setLocalStatus(msg) {
|
|
document.getElementById("localStatus").innerHTML = msg;
|
|
}
|
|
|
|
function setRemoteStatus(msg) {
|
|
document.getElementById("remoteStatus").innerHTML = msg;
|
|
}
|
|
|
|
function isXhrSuccess(xhr) {
|
|
return ((xhr.readyState === 4) && (xhr.status == 200));
|
|
}
|
|
|
|
function handleSaveCallback() {
|
|
if (isXhrSuccess(savingXhr)) {
|
|
setRemoteStatus("");
|
|
|
|
savingFileOffset += blockSize;
|
|
if (savingFileOffset < savingText.length) {
|
|
var params = "action=append&filename=led-stick.dat&data=" + encodeURIComponent(savingText.substring(savingFileOffset, savingFileOffset + blockSize));
|
|
savingXhr = new XMLHttpRequest();
|
|
savingXhr.open("POST", "file-api.lc", true);
|
|
savingXhr.onreadystatechange = handleSaveCallback;
|
|
savingXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
|
setLocalStatus("Sending data: " + savingFileOffset + "/" + savingText.length + " bytes");
|
|
savingXhr.send(params);
|
|
} else {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", "led-stick.lc", true);
|
|
xhr.onreadystatechange = function() {
|
|
if (isXhrSuccess(xhr)) {
|
|
setLocalStatus("Run led-stick.lc!");
|
|
}
|
|
setRemoteStatus(xhr.responseText);
|
|
};
|
|
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
|
setLocalStatus("Data sent!");
|
|
xhr.send();
|
|
}
|
|
} else {
|
|
setRemoteStatus(savingXhr.responseText);
|
|
}
|
|
}
|
|
|
|
function save() {
|
|
savingFileOffset = 0;
|
|
var params = "action=save&filename=led-stick.dat&data=" + encodeURIComponent(savingText.substring(savingFileOffset, savingFileOffset + blockSize));
|
|
savingXhr = new XMLHttpRequest();
|
|
savingXhr.open("POST", "file-api.lc", true);
|
|
savingXhr.onreadystatechange = handleSaveCallback;
|
|
savingXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
|
|
setLocalStatus("Sending data: " + savingFileOffset + "/" + savingText.length + " bytes");
|
|
savingXhr.send(params);
|
|
}
|
|
|
|
document.getElementById("set").addEventListener("click", function () {
|
|
var t = document.getElementById("myText");
|
|
var c = document.getElementById("myCanvas");
|
|
var ctx = c.getContext("2d");
|
|
var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
|
|
gradient.addColorStop("0", "red");
|
|
gradient.addColorStop("0.5", "green");
|
|
gradient.addColorStop("1.0", "purple");
|
|
|
|
ctx.beginPath();
|
|
ctx.rect(0, 0, w, h);
|
|
// Fill with gradient
|
|
ctx.fillStyle = gradient;
|
|
// ctx.fillStyle = "black";
|
|
ctx.fill();
|
|
ctx.font = "bolder 24px sans-serif";
|
|
// ctx.fillStyle = gradient;
|
|
ctx.fillStyle = "white";
|
|
ctx.fillText(t.value, 0, 22);
|
|
|
|
var d = ctx.getImageData(0, 0, w, h);
|
|
savingText = "";
|
|
for (var x = 0; x < w; x++)
|
|
{
|
|
for (var y = (h - 1); y >= 0; y--)
|
|
{
|
|
savingText += color_text(d.data[((x + y * w) * 4) + 1]); // Green
|
|
savingText += color_text(d.data[((x + y * w) * 4) + 0]); // Red
|
|
savingText += color_text(d.data[((x + y * w) * 4) + 2]); // Blue
|
|
}
|
|
}
|
|
save();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|