led-stick.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>LED Cheering Stick</title>
  6. </head>
  7. <body>
  8. <h1>LED Cheering Stick</h1>
  9. <p>Text: <input type="text" id="myText" value="Hello!"><button id='set'>Set</button></p>
  10. <canvas id="myCanvas" width="140" height="28" style="border:1px solid #00f;">Your browser does not support the HTML5 canvas tag.</canvas>
  11. <div id="localStatus"></div>
  12. <div id="remoteStatus"></div>
  13. <script>
  14. var w = 140;
  15. var h = 28;
  16. var blockSize = 320;
  17. var savingText;
  18. var savingFileOffset;
  19. var savingXhr;
  20. function color_text(v) {
  21. return String.fromCharCode(Math.round(v/64));
  22. }
  23. function setLocalStatus(msg) {
  24. document.getElementById("localStatus").innerHTML = msg;
  25. }
  26. function setRemoteStatus(msg) {
  27. document.getElementById("remoteStatus").innerHTML = msg;
  28. }
  29. function isXhrSuccess(xhr) {
  30. return ((xhr.readyState === 4) && (xhr.status == 200));
  31. }
  32. function handleSaveCallback() {
  33. if (isXhrSuccess(savingXhr)) {
  34. setRemoteStatus("");
  35. savingFileOffset += blockSize;
  36. if (savingFileOffset < savingText.length) {
  37. var params = "action=append&filename=led-stick.dat&data=" + encodeURIComponent(savingText.substring(savingFileOffset, savingFileOffset + blockSize));
  38. savingXhr = new XMLHttpRequest();
  39. savingXhr.open("POST", "file-api.lc", true);
  40. savingXhr.onreadystatechange = handleSaveCallback;
  41. savingXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  42. setLocalStatus("Sending data: " + savingFileOffset + "/" + savingText.length + " bytes");
  43. savingXhr.send(params);
  44. } else {
  45. var xhr = new XMLHttpRequest();
  46. xhr.open("POST", "led-stick.lc", true);
  47. xhr.onreadystatechange = function() {
  48. if (isXhrSuccess(xhr)) {
  49. setLocalStatus("Run led-stick.lc!");
  50. }
  51. setRemoteStatus(xhr.responseText);
  52. };
  53. xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  54. setLocalStatus("Data sent!");
  55. xhr.send();
  56. }
  57. } else {
  58. setRemoteStatus(savingXhr.responseText);
  59. }
  60. }
  61. function save() {
  62. savingFileOffset = 0;
  63. var params = "action=save&filename=led-stick.dat&data=" + encodeURIComponent(savingText.substring(savingFileOffset, savingFileOffset + blockSize));
  64. savingXhr = new XMLHttpRequest();
  65. savingXhr.open("POST", "file-api.lc", true);
  66. savingXhr.onreadystatechange = handleSaveCallback;
  67. savingXhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  68. setLocalStatus("Sending data: " + savingFileOffset + "/" + savingText.length + " bytes");
  69. savingXhr.send(params);
  70. }
  71. document.getElementById("set").addEventListener("click", function () {
  72. var t = document.getElementById("myText");
  73. var c = document.getElementById("myCanvas");
  74. var ctx = c.getContext("2d");
  75. var gradient = ctx.createLinearGradient(0, 0, c.width, 0);
  76. gradient.addColorStop("0", "red");
  77. gradient.addColorStop("0.5", "green");
  78. gradient.addColorStop("1.0", "purple");
  79. ctx.beginPath();
  80. ctx.rect(0, 0, w, h);
  81. // Fill with gradient
  82. ctx.fillStyle = gradient;
  83. // ctx.fillStyle = "black";
  84. ctx.fill();
  85. ctx.font = "bolder 24px sans-serif";
  86. // ctx.fillStyle = gradient;
  87. ctx.fillStyle = "white";
  88. ctx.fillText(t.value, 0, 22);
  89. var d = ctx.getImageData(0, 0, w, h);
  90. savingText = "";
  91. for (var x = 0; x < w; x++)
  92. {
  93. for (var y = (h - 1); y >= 0; y--)
  94. {
  95. savingText += color_text(d.data[((x + y * w) * 4) + 1]); // Green
  96. savingText += color_text(d.data[((x + y * w) * 4) + 0]); // Red
  97. savingText += color_text(d.data[((x + y * w) * 4) + 2]); // Blue
  98. }
  99. }
  100. save();
  101. });
  102. </script>
  103. </body>
  104. </html>