led-text.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>LED Text</title>
  6. </head>
  7. <body>
  8. <h1>LED Text</h1>
  9. <p>Text: <input type="text" id="myText" value="Hello World!"><button id='set'>Set</button></p>
  10. <canvas id="myCanvas" width="72" height="12" style="border:1px solid #00f;">Your browser does not support the HTML5 canvas tag.</canvas>
  11. <div id="dataOutput"></div>
  12. <script>
  13. var w = 72;
  14. var h = 12;
  15. function color_text(v) {
  16. return String.fromCharCode(Math.round(v/64));
  17. }
  18. document.getElementById("set").addEventListener("click", function () {
  19. var t = document.getElementById("myText");
  20. var c = document.getElementById("myCanvas");
  21. var ctx = c.getContext("2d");
  22. ctx.beginPath();
  23. ctx.rect(0, 0, w, h);
  24. ctx.fillStyle = "black";
  25. ctx.fill();
  26. ctx.font = "bolder 12px sans-serif";
  27. var gradient=ctx.createLinearGradient(0,0,c.width,0);
  28. gradient.addColorStop("0","orange");
  29. gradient.addColorStop("0.5","red");
  30. gradient.addColorStop("1.0","purple");
  31. // Fill with gradient
  32. ctx.fillStyle=gradient;
  33. ctx.fillText(t.value, 0, 9);
  34. var d = ctx.getImageData(0,0,w,h);
  35. var o = document.getElementById("dataOutput");
  36. text = "";
  37. for (var y=0;y<h;y+=2)
  38. {
  39. for (var x=0;x<w;x+=2)
  40. {
  41. //average 4 pixels colors
  42. //text += escape_color((d.data[((x+y*w)*4)+1] + d.data[((x+1+y*w)*4)+1] + d.data[((x+(y+1)*w)*4)+1] + d.data[((x+1+(y+1)*w)*4)+1]) / 4); // green
  43. //text += escape_color((d.data[((x+y*w)*4)+0] + d.data[((x+1+y*w)*4)+0] + d.data[((x+(y+1)*w)*4)+0] + d.data[((x+1+(y+1)*w)*4)+0]) / 4); // red
  44. //text += escape_color((d.data[((x+y*w)*4)+2] + d.data[((x+1+y*w)*4)+2] + d.data[((x+(y+1)*w)*4)+2] + d.data[((x+1+(y+1)*w)*4)+2]) / 4); // blue
  45. text += color_text(d.data[((x+y*w)*4)+1]); // Green
  46. text += color_text(d.data[((x+y*w)*4)+0]); // Red
  47. text += color_text(d.data[((x+y*w)*4)+2]); // Blue
  48. }
  49. }
  50. text = "data=" + escape(text);
  51. o.innerHTML = text;
  52. xhr=new XMLHttpRequest();
  53. xhr.open("POST", "led-text.lc", true);
  54. xhr.onreadystatechange=function() {}
  55. xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  56. xhr.send(text);
  57. });
  58. </script>
  59. </body>
  60. </html>