Text on Matrix LED

このエントリーをはてなブックマークに追加

What's this

By using MatrixLED_MAX7219 and HTML5 Canvas, Drawing Characters on LED.

Program

<!-- HTML Example -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="https://unpkg.com/obniz@2.0.2/obniz.js"></script>
</head>

<body>
<div id="obniz-debug"></div>
<br>
<div class="text-center">
    <h1>DotMatrix Draw a text</h1>
</div>

<script>

/* This will be over written on obniz.io webapp page */
var obniz = new Obniz("OBNIZ_ID_HERE");

obniz.onconnect = async function () {  
  const matrix = obniz.wired("MatrixLED_MAX7219", {vcc:0, gnd:1, din:2, cs:3, clk:4});
  matrix.init(8*4, 8);
  matrix.brightness(7);
  
  const ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);

  x = matrix.width;
  obniz.repeat(async function(){

    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, matrix.width, matrix.height);
    ctx.fillStyle = "white";
    ctx.font = "9px sans-serif";
    ctx.fillText('Helloこんにちは안녕하세요你好السلام عليكم', x, 7);
    x--;
    
    matrix.draw(ctx);
  }, 1000/20)
}
    
</script>
</body>
</html>

Run Now

The html will be opened to run a program.

You will Get in Few Days

Circuit for Starter “obniz Board” is available on Amazon and other online stores.
You can get it at below

Our products and resellers

Forum

Visit our developer’s forum to discuss and discover technologies.

Forum

Contact

Feel free to contact out support and technical team.

Contact us