マトリクスLEDの8列目が1列目に表示されてしまう



  • 文字が右から左に流れていくようにしたいです。
    表題のような現象がおきるので文字の右端が切り取られ、左端に表示されてしまいます。
    静止表示でも同様です。
    解決方法ご教授いただけると幸いです。

    ■環境
    ・Windows7
    ・Obniz Starter Kit付属のマトリクスLED
    https://obniz.io/ja/sdk/parts/MatrixLED_HT16K33/README.md)

    ■コード
    (スクリプト以降)

    <script>
    var obniz = new Obniz("XXXXXXXX"); 
      obniz.onconnect = async function() {
    
        const matrix = obniz.wired("MatrixLED_HT16K33", { vcc:1, gnd:0, sda:2, scl:3});
        matrix.init(8);
        matrix.brightness(1);
        obniz.display.print(matrix.height);
    
        const ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);
        x = 8;
        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('★★★', x, 7);
        x--;
       if(x <= -50){x = 10;}
        else{}
        matrix.draw(ctx);
        }, 1000/ 10 );
      }
    
    </script>
    

    状況写真:https://imgur.com/a/L7xAtYs (外部リンクです)



  • @うぞう said in マトリクスLEDの8列目が1列目に表示されてしまう:

    Obniz Starter Kit付属のマトリクスLED

    3つ前に投稿しているものです。 Obniz Starter Kit付属のマトリクスLEDでの表示に関する類似の不具合と思います。 このキットを、A*****では一文字ずつ表示したり、一列ずつ横に流していくことができるので、ObnizのCanvasContextの問題ではないでしょうか?



  • ObnizのCanvasContextがよくわかりませんが、私の方で解決できる問題ではないのでしょうか?



  • 質問していただきありがとうございます。

    上記の問題ですが、選択すべきパーツを現在のMatrixLED_HT16K33からKeyestudio_HT16K33に変更していただけるときちんと動作します。

    文字を流したいという要件については、下記の回答にプログラムの方添付させていただいているのでそちらを参照していただけると幸いです。

    https://forum.obniz.io/topic/382/obniz-starter-kit-の-ledマトリクス-のプログラム



  • ご回答ありがとうございます。うまく作動いたしました!
    パーツライブラリにはMatrixLED_HT16K33となっていますので修正していただければと思います。
    また、https://forum.obniz.io/post/1157  こちらの質問にあるように「ドット単位で点灯させる」が
    私の方でも作動しません。対処法ご教授いただけますでしょうか。



  • パーツライブラリのドット単位で転送させるところの説明で、  matrix.draw(dots); を使うことになっていますが、これを  matrix.dots(dots); に変えてみていただけませんか。 小生作成の、サンプルプログラムを下記しますので参考になれば幸いです。

    <html>
    <head>
    <script src="https://unpkg.com/obniz@3.5.0/obniz.js"></script>
    </head>
    <body>
    <div id="Keyestudio_HT16K33"></div>
    <script>
    var obniz = new Obniz("OBNIZ_ID_HERE");
    obniz.onconnect = async function () {
    const matrix = obniz.wired("Keyestudio_HT16K33", { gnd:0, vcc:1, sda:2, scl:3 });
    matrix.init(8);
    matrix.brightness(7);
    const ctx = obniz.util.createCanvasContext(matrix.width, matrix.height);

    var dots = new Array(9);
    dots = [1,2,4,8,16,32,64,128,0];

    obniz.repeat(async function(){
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, matrix.width, matrix.height);
    ctx.fillStyle = "white";

      while(true){ 
        for(i=0; i<8; i++){
          matrix.dots(dots);
          await obniz.wait(200);
          dots[8] = dots[0];
          for(j= 0; j<8; j++){
            dots[j] = dots[j+1];
            }
          }
        }
      }, 1000/10);
    

    }
    </script>
    </body>
    </html>



  • ご回答ありがとうございます。
    教えていただいたプログラムで動作確認しました。 ありがとうございました。