Browse Source

add led-text example

moononournation 7 years ago
parent
commit
4d6e385f94
2 changed files with 109 additions and 0 deletions
  1. 63 0
      bin/led-text.html
  2. 46 0
      bin/led-text.lua

+ 63 - 0
bin/led-text.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>LED Text</title>
+  </head>
+  <body>
+    <h1>LED Text</h1>
+    <p>Text: <input type="text" id="myText" value="Hello World!"><button id='set'>Set</button></p>
+    <canvas id="myCanvas" width="72" height="12" style="border:1px solid #00f;">Your browser does not support the HTML5 canvas tag.</canvas>
+    <div id="dataOutput"></div>
+    <script>
+      var w = 72;
+      var h = 12;
+
+      function color_text(v) {
+        return String.fromCharCode(Math.round(v/64));
+      }
+
+      document.getElementById("set").addEventListener("click", function () {
+        var t = document.getElementById("myText");
+        var c = document.getElementById("myCanvas");
+        var ctx = c.getContext("2d");
+        ctx.beginPath();
+        ctx.rect(0, 0, w, h);
+        ctx.fillStyle = "black";
+        ctx.fill();
+        ctx.font = "bolder 12px sans-serif";
+        var gradient=ctx.createLinearGradient(0,0,c.width,0);
+        gradient.addColorStop("0","orange");
+        gradient.addColorStop("0.5","red");
+        gradient.addColorStop("1.0","purple");
+        // Fill with gradient
+        ctx.fillStyle=gradient;
+        ctx.fillText(t.value, 0, 9);
+
+        var d = ctx.getImageData(0,0,w,h);
+        var o = document.getElementById("dataOutput");
+        text = "";
+        for (var y=0;y<h;y+=2)
+        {
+          for (var x=0;x<w;x+=2)
+          {
+            //average 4 pixels colors
+            //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
+            //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
+            //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
+            text += color_text(d.data[((x+y*w)*4)+1]); // Green
+            text += color_text(d.data[((x+y*w)*4)+0]); // Red
+            text += color_text(d.data[((x+y*w)*4)+2]); // Blue
+          }
+        }
+        text = "data=" + escape(text);
+        o.innerHTML = text;
+        xhr=new XMLHttpRequest();
+        xhr.open("POST", "led-text.lc", true);
+        xhr.onreadystatechange=function() {}
+        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+        xhr.send(text);
+      });
+    </script>
+  </body>
+</html>

+ 46 - 0
bin/led-text.lua

@@ -0,0 +1,46 @@
+return function (connection, req, args)
+  dofile('httpserver-header.lc')(connection, 200, 'html')
+
+  local w, h, dataWidth, offset = 10, 6, 36, 0
+  -- timer id(0-6), interval in ms
+  local tmrId, tmrMs = 4, 200
+
+  if req.method == 'POST' then
+    local rd = req.getRequestData()
+    if (rd['data'] ~= nil) then
+      file.open('led-text.dat', 'w+')
+      file.write(rd['data'])
+      file.close()
+    end
+  end
+  collectgarbage()
+
+  tmr.alarm(tmrId, tmrMs, tmr.ALARM_SEMI, function()
+    if offset < dataWidth then
+      local data = ''
+      file.open('led-text.dat', 'r')
+      local row = 0
+      while row < h do
+        file.seek("set", (row * dataWidth + offset) * 3)
+        local size = w
+        if (offset + w > dataWidth) then
+          size = dataWidth - offset
+        end
+
+        data = data .. file.read(size * 3)
+        if size < w then
+          data = data .. string.char(0):rep((w - size) * 3)
+        end
+        row = row + 1
+      end
+      file.close()
+      ws2812.write(data)
+
+      offset = offset + 1
+      tmr.start(tmrId)
+    else
+      ws2812.write(string.char(0):rep(w*h*3))
+      tmr.unregister(tmrId)
+    end
+  end)
+end