使い方 基本的なグラフィックコントロール STONEシリアル画面では、線、三角形、多角形、長方形、正方形、円、円弧、塗りつぶし色、切り取りと貼り付けなどを描画できます。

シリアルタッチスクリーンSTVI056WT-01を使用した早期学習マシンの設計、写真を見て形状を識別し、色に応じて単語を認識し、正しいエラーを判断し、スコアを付け、レベルを通過するためのエンターテインメント形式を設計します。子供たちがリラックスして遊び心のある方法で色を認識し、基本的な形を理解し、対応する単語を学ぶことができるように。

公式のビデオプレゼンテーションは、基本的なグラフィックスコントロールの実際の効果を提供しないため、このデモはそれを補足します。 描画の指示は、 arduinoコントロールボード と STONEシリアルガラ場n.

さらに、このメモには、基本的なグラフィックスコントロールの完全な機能コンテンツは含まれていません。エラボレーションの使用に使用される機能のみが含まれ、記録されたものはマシンでテストされます。OK、デモ実行を直接ダウンロードできます。

デモのハードウェア環境を図1、図2、および図3に示します。

STONEには正式に2つのボードが付属しており、そのうち正方形のボードはUSBダウンロードボードで、長いボードはUSB-シリアル通信ボード（およびシリアル画面用のDC12V電源）です。

(Figure 1: Communication and power connection of STONE serial screen)  (Figure 2: Connection diagram for downloading Basic Graphics control files from STONE screen)

（図3：STONEシリアルスクリーン通信ボードとarduino開発ボード間のTX、RX、GND接続）

（図4：基本的なグラフィックスコントロールの描画領域と変数アドレスおよびその他のパラメーター設定）

STONE TOOLBox（GUIデザインソフトウェア）メニューのVariable Configuration（D）でBasicgraphicsコントロールを選択し、作図領域と変数アドレスパラメータを設定した後、0x82命令を使用して設定された可変メモリアドレスに書き込みます（0x1000はここで設定されます）作図領域と可変アドレスパラメータを設定した後、0x82命令を使用してCMD + Data_pack_Num_Max + Dataを設定された可変メモリアドレス（この場合は0x1000）に書き込み、作図機能の実装を完了します。 特定の機能コードを図6に示します。ここでは、次の例を使用して、線画命令0x0002があります。

（図5：基本的なグラフィックス制御データのコマンド形式）

（図6：基本的なグラフィックコントロール用の線と長方形の描画コマンドの図）

線画命令0x0002、使用例。

座標（340、200）から座標（585、200）に黒い線を接続するには、次のように指示します。

A5 5A 11 82 10 00 00 02 00 01 00 00 01 54 00 C8 02 49 00 C8

座標（200、200）、（300、200）、（250、100）にXNUMXつの頂点を持つ三角形に閉じたXNUMX本の黒い線を描画します。命令は次のとおりです。

A5 5A 19 82 10 00 00 02 00 03 00 00 00 00 C8 00 C8 01 2C 00 C8 00 FA 00 64 00 C8 00 C8

上記の0x1000は基本グラフィックス制御の可変アドレス、0x0002は命令コード、0x0001と0x0003はそれぞれ1行と3行、0x0000はカラーコード、値0000は黒、値ffffは明るい白です。 各ポイントの他のインスタントXY座標。

長方形の描画例。

長方形の左上の頂点座標（340、237）、右下の頂点座標（585、340）は黒で、コマンドは次のとおりです。

A5 5A 11 82 10 00 00 03 00 01 01 54 00 ED 02 49 01 54 00 00

340つの長方形（237、585）–（340、324）、（221、601）–（356、XNUMX）を同時に描画します。コマンドは次のとおりです。

A5 5A 1B 82 10 00 00 03 00 02 01 54 00 ED 02 49 01 54 00 00 01 44 00 DD 02 59 01 64 FF FF

上記の0x1000は基本グラフィックスコントロールの可変アドレス、0x0003は長方形のコマンドコード、0x0001、0x0002は1つの長方形、2つの長方形、0x0000、0xffffはカラーコード、0000の値は黒、fffffの値は明るい白い。 その他は、各長方形の左上の頂点と右下の頂点のXY座標です。

（図7：基本的なグラフィックス制御のための長方形の塗りつぶしと円の描画コマンド）

長方形の塗りつぶしの例。

黒い長方形の塗りつぶし（470、200）〜（550、255）コマンドは

A5 5A 11 82 10 00 00 04 00 01 01 D6 00 C8 02 26 00 FF 00 00 00

円を描く例。

円の中心（470、200）、R = 50黒、命令は

A5 5A 0F 82 10 00 00 05 00 01 01 D6 00 C8 00 32 00 00

中央A（470、200）R = 50と中央B（256、200）R = 80のXNUMXつの円を同時に描画するには、両方とも黒で、コマンドは次のようになります。

A5 5A 17 82 10 00 00 05 00 02 01 D6 00 C8 00 32 00 00 01 00 00 C8 00 50 00 00

（図8：基本的なグラフィックス制御のためのArcコマンド）

円弧の解像度は0.5度、360度は720度に対応し、0度は垂直上方向です。

アークの例。

開始時の上部円弧315度–終了時の45度、円の中心（300、200）R = 80、黒、コマンドは次のとおりです。

A5 5A 13 82 10 00 00 0B 00 01 00 00 01 2C 00 C8 00 50 02 76 00 5A

色について。

0x0000は黒0xffffは白0x00ffは青0xf000は赤0xfd60はオレンジ

0xff60は黄色です0x2f60は緑色です

（図9：基本的なグラフィックスコントロールシェイプインターフェイスの製図板のパラメーターとアドレス）

（図10：基本的なグラフィックスコントロールカラーインターフェイスの製図板パラメータとアドレス）

変数アドレスによると、（10、80）〜（630、400）の緑色を塗りつぶすコマンドは

A5 5A 11 82 60 00 00 04 00 01 00 0A 00 50 02 76 01 90 2f 60

その他の類似点については、プログラムコードを参照してください。

ビデオで示されているコードは次のとおりです。

/*

  frank10

  STONEとarduinoCOMM、基本的なグラフィックはプログラムで再生されます。

  LEDをXNUMX秒間オンにし、次にXNUMX秒間オフを繰り返します。LEDは、ソフトランニングが正常であることを示します。

  サンプルには1ページあります。page2は形状、pageXNUMXはcorlorです。

  このサンプルコードはfrankのファイルにあります。 20210625

 */

//ピン13には、ほとんどのArduinoボードに接続されたLEDがあります。

//名前を付けます：

int LED = 13;

int iYePian = 0; // 0x0020 for YePian！

// int iGongLu = 0; // 0x0180 for the GongLu！

// int iLiuLiang = 0; // 0x0160 for the now LiuLiang！

int iJiao = 0; // JieJuJiaoの場合は0x0260！

int iGongLuWater = 0; // 0x0280 for the Water GongLu！ 値は0-50000です！

int iLed = 1; //遅延時間num。

int iLed2 = 1; //遅延時間num。 50msがポイントを行います。

int iLed3 = 0; //遅延時間num。 50msがポイントを行います。

int iLed4 = 0; //遅延時間num。 50msがポイントを行います。

int iCurve0 = 0; // curve0の値。 50msがポイントを行います。

int iCurve1 = 0; // curve1の値。 50msがポイントを行います。

int iFlag0 = 1; // curve0のフラグ+または-; .1はアップ、0はダウンです。

int iFlag1 = 1; // curve1のフラグ+または-; .1はアップ、0はダウンです。

int iNum = 0; //文字番号を読み込みます。

int iNum2 = 0; // ShuiDianZhanのcharnum2を読み込みます！

// int iPower = 2; //キースタチュー0x0009

// int iMode = 2; //キースタチュー0x000A

int iPowerWater = 2; //キースタチュー0x0039

//リセットを押すと、セットアップルーチンがXNUMX回実行されます。

voidセットアップ（）{               

  //デジタルピンを出力として初期化します。

  pinMode（led、OUTPUT）;    

  Serial.begin（115200）; //シリアル通信機能を開き、シリアルポートが開くのを待ちます

  while（！Serial）{

    ; //シリアルポートが接続するのを待ちます。 レオナルドにのみ必要

  } 

}

//ループルーチンは永遠に何度も何度も実行されます：

voidループ（）{

  inChar;

/ * ——————————————————————————- * /    

    if（iLed == 800）{    

// ——- 0x0039値を読み取ります———-

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x04）; //長さ

            Serial.write（0x83）; // 読んだ！

            Serial.write（0x00）; // ShuiDianZhan電源キーのアドレス！

            Serial.write（0x39）; // ShuiDianZhan電源キーのアドレス！

            Serial.write（0x01）; // 0x0039（電源キー）

// ——— STONEの戻り値は「A5A 5 06 83 00 39 01」になります-

     }

  //シリアルポートから送信された情報を読み取ります。

  if（Serial.available（）> 0）{inChar = Serial.read（）; }

 /*

   bakを保存します。

   読み取りキーとキーの働きを持つことができるからです。

   プログラムは、入力のキーがpeploseの仕事をするHMIです。

 */

 // ————————————————————————————

 // —————————- 0x0039キー読み取り開始———————————–

  if（inChar == 0x39）{iNum2 = 1; }

  if（（inChar == 0x01）&&（iNum2 == 1））{iNum2 = 2; }

  if（（inChar == 0x00）&&（iNum2 == 2））{iNum2 = 3; }

  if（（inChar == 0x01）&&（iNum2 == 3））{ 

      iNum2 = 0;

      if（iPowerWater！= 1）{

          iPowerWater = 1; //電源オン！      

          iJiao = 0;

          iGongLuWater = 0;

      }

   }

   if（（inChar == 0x02）&&（iNum2 == 3））{ 

      iNum2 = 0;

      iPowerWater = 2; //電源を切る！

   }

 // —————— 0x0039キーの読み取りOK！ iPowerWater ok！—————————-

// ————————————————————————————

  delay（1）;

  iLed + = 1;  

  iLed2 + = 1; // 50msがポイントを実行します。

  // ————————————————————————————————

  // ——————————— 50msでポイントが始まります————————————–

    if（iLed2 == 50）{ 

           iLed2 = 1;

           iLed4 + = 1; // 50msがポイントを実行します。 

           if（iFlag0 == 1）{

                iCurve0 + = 1; // 50msがポイントを実行します。 

                if（iCurve0> = 150）{

                    iFlag0 = 0; // iCurve0がダウンします！。

                }

           }

           if（iFlag0 == 0）{

                iCurve0- = 1; // 50msがポイントを実行します。 

                if（iCurve0 <= 1）{

                    iFlag0 = 1; // iCurve0が表示されます！。

                }

           }

           if（iFlag1 == 1）{

                if（iLed4> = 3）{

                  iCurve1 + = 1; // 50msがポイントを実行します。 

                  iLed4 = 0;

                }

                if（iCurve1> = 50）{

                    iFlag1 = 0; // iCurve1がダウンします！。

                }

           }

           if（iFlag1 == 0）{

                if（iLed4> = 3）{

                  iLed4 = 0;

                  iCurve1- = 1; // 50msがポイントを実行します。 

                }

                if（iCurve1 <= 1）{

                    iFlag1 = 1; // iCurve1が表示されます！。

                }

           }

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x06）;

            Serial.write（0x84）; //曲線に書き込む！

            Serial.write（0x03）; //カーブパス、

            Serial.write（iCurve0）; // N = 1、

            Serial.write（0x00）;

            Serial.write（iCurve1）;

            Serial.write（0x00）;           

    }

  // ——————————- 50msでポイントエンドを実行—————————————

  // ———————————————————————————————

  if（iLed == 500）{ 

      digitalWrite（led、HIGH）; // LEDをオンにします（HIGHは電圧レベルです）

                  // delay（500）; // 200秒待ちます、範囲：2000-XNUMX

  }   

  if（iLed> = 1000）{   

      digitalWrite（led、LOW）; //電圧をLOWにしてLEDをオフにします

                  // delay（500）; // 200秒待つ、範囲：2000-XNUMX

      iLED = 1;

      if（iNum <= 6）iNum + = 1; //シェイプターン！

      if（iNum == 6）iNum = 0; //シェイプターン！

// ————————————–赤が始まります—————————————–    

      if（iNum == 1）{//三角形！ と赤！

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x19）;

            Serial.write（0x82）;

            Serial.write（0x10）; //基本グラフィックのaddressH

            Serial.write（0x00）; //基本的なグラフィックのaddressL

            Serial.write（0x00）; //行CMDを実行します 

            Serial.write（0x02）; //行CMDを実行します

            Serial.write（0x00）; //行の番号

            Serial.write（0x03）; //行の番号。

            Serial.write（0x00）; // colorH黒

            Serial.write（0x00）; // colorL

            Serial.write（0x00）; // pointX1H

            Serial.write（0xc8）; // pointX1L

            Serial.write（0x00）; // pointY1H 

            Serial.write（0xc8）; // pointY1L

            Serial.write（0x01）; // pointX2H

            Serial.write（0x2C）; // pointX2L。

            Serial.write（0x00）; // pointY2H

            Serial.write（0xC8）; // pointY2L

            Serial.write（0x00）; // pointX3H

            Serial.write（0xFA）; // pointX3L

            Serial.write（0x00）; // pointY3H 

            Serial.write（0x64）; // pointY3L

            Serial.write（0x00）; // pointX1H

            Serial.write（0xc8）; // pointX1L

            Serial.write（0x00）; // pointY1H 

            Serial.write（0xc8）; // pointY1L

            //塗りつぶし -

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x11）;

            Serial.write（0x82）;

            Serial.write（0x60）; //基本的なグラフィックページ2のaddressH

            Serial.write（0x00）; //基本的なグラフィックpabe2のaddressL

            Serial.write（0x00）; //長方形CMDを塗りつぶします 

            Serial.write（0x04）; //長方形CMDを塗りつぶします

            Serial.write（0x00）; //長方形の番号

            Serial.write（0x01）; //長方形の番号

            Serial.write（0x00）; // pointX1H

            Serial.write（0x0A）; // pointX1L

            Serial.write（0x00）; // pointY1H 

            Serial.write（0x50）; // pointY1L

            Serial.write（0x02）; // pointX2H

            Serial.write（0x76）; // pointX2L。

            Serial.write（0x01）; // pointY2H

            Serial.write（0x90）; // pointY2L          

            Serial.write（0xF0）; //赤いcolorH 

            Serial.write（0x00）; //赤いcolorL          

      }

  // ————————————–赤は終わりです—————————————–   

  // ————————————–黄色と弧が始まります—————————————–

        if（iNum == 2）{//アーク！ と黄色！

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x13）;

            Serial.write（0x82）;

            Serial.write（0x10）; //基本的なグラフィックページ1のaddressH

            Serial.write（0x00）; //基本的なグラフィックpabe1のaddressL

            Serial.write（0x00）; //アークCMDを実行します 

            Serial.write（0x0B）; //アークCMDを実行します

            Serial.write（0x00）; //円弧の数

            Serial.write（0x01）; //円弧の番号。

            Serial.write（0x00）; // colorH黒

            Serial.write（0x00）; // colorL空白

            Serial.write（0x01）; //円の中心XH

            Serial.write（0x2c）; //円XLの中心

            Serial.write（0x00）; //円の中心YH 

            Serial.write（0xc8）; //円の中心YL

            Serial.write（0x00）; // RH

            Serial.write（0x50）; // RL。

            Serial.write（0x02）; // Angle1H

            Serial.write（0x76）; // Angle1L

            Serial.write（0x00）; // Angle2H

            Serial.write（0x5A）; // Angle2L

             //塗りつぶし -

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x11）;

            Serial.write（0x82）;

            Serial.write（0x60）; //基本的なグラフィックページ2のaddressH

            Serial.write（0x00）; //基本的なグラフィックpabe2のaddressL

            Serial.write（0x00）; //長方形CMDを塗りつぶします 

            Serial.write（0x04）; //長方形CMDを塗りつぶします

            Serial.write（0x00）; //長方形の番号

            Serial.write（0x01）; //長方形の番号

            Serial.write（0x00）; // pointX1H

            Serial.write（0x0A）; // pointX1L

            Serial.write（0x00）; // pointY1H 

            Serial.write（0x50）; // pointY1L

            Serial.write（0x02）; // pointX2H

            Serial.write（0x76）; // pointX2L。

            Serial.write（0x01）; // pointY2H

            Serial.write（0x90）; // pointY2L          

            Serial.write（0xFF）; //黄色H 

            Serial.write（0x60）; //黄色L            

      }

// ————————————–黄色と弧は終わりです—————————————–

  // ————————————–緑と長方形が始まります—————————————–

        if（iNum == 3）{//長方形！ と緑！

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x11）;

            Serial.write（0x82）;

            Serial.write（0x10）; //基本的なグラフィックページ1のaddressH

            Serial.write（0x00）; //基本的なグラフィックpabe1のaddressL

            Serial.write（0x00）; //長方形CMDを実行します 

            Serial.write（0x03）; //長方形CMDを実行します

            Serial.write（0x00）; //長方形の番号

            Serial.write（0x01）; //長方形の番号

            Serial.write（0x01）; // pointX1H

            Serial.write（0x54）; // pointX1L

            Serial.write（0x00）; // pointY1H 

            Serial.write（0xED）; // pointY1L

            Serial.write（0x02）; // pointX2H

            Serial.write（0x49）; // pointX2L。

            Serial.write（0x01）; // pointY2H

            Serial.write（0x54）; // pointY2L          

             Serial.write（0x00）; // colorH黒

            Serial.write（0x00）; // colorL空白        

                        //塗りつぶし -

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x11）;

            Serial.write（0x82）;

            Serial.write（0x60）; //基本的なグラフィックページ2のaddressH

            Serial.write（0x00）; //基本的なグラフィックpabe2のaddressL

            Serial.write（0x00）; //長方形CMDを塗りつぶします 

            Serial.write（0x04）; //長方形CMDを塗りつぶします

            Serial.write（0x00）; //長方形の番号

            Serial.write（0x01）; //長方形の番号

            Serial.write（0x00）; // pointX1H

            Serial.write（0x0A）; // pointX1L

            Serial.write（0x00）; // pointY1H 

            Serial.write（0x50）; // pointY1L

            Serial.write（0x02）; // pointX2H

            Serial.write（0x76）; // pointX2L。

            Serial.write（0x01）; // pointY2H

            Serial.write（0x90）; // pointY2L          

            Serial.write（0x2F）; //緑色H 

            Serial.write（0x60）; //緑色L   

      }

// ————————————–緑と長方形は終わりです—————————————–     

  // ————————————–オレンジと正方形が始まります—————————————–

        if（iNum == 4）{//正方形！ とオレンジ！

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x11）;

            Serial.write（0x82）;

            Serial.write（0x10）; //基本的なグラフィックページ1のaddressH

            Serial.write（0x00）; //基本的なグラフィックpabe1のaddressL

            Serial.write（0x00）; //長方形CMDを実行します 

            Serial.write（0x03）; //長方形CMDを実行します

            Serial.write（0x00）; //長方形の番号

            Serial.write（0x01）; //長方形の番号

            Serial.write（0x01）; // pointX1H

            Serial.write（0x54）; // pointX1L

            Serial.write（0x00）; // pointY1H 

            Serial.write（0x91）; // pointY1L

            Serial.write（0x02）; // pointX2H

            Serial.write（0x49）; // pointX2L。

            Serial.write（0x01）; // pointY2H

            Serial.write（0x86）; // pointY2L          

             Serial.write（0x00）; // colorH黒

            Serial.write（0x00）; // colorL空白        

                        //塗りつぶし -

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x11）;

            Serial.write（0x82）;

            Serial.write（0x60）; //基本的なグラフィックページ2のaddressH

            Serial.write（0x00）; //基本的なグラフィックpabe2のaddressL

            Serial.write（0x00）; //長方形CMDを塗りつぶします 

            Serial.write（0x04）; //長方形CMDを塗りつぶします

            Serial.write（0x00）; //長方形の番号

            Serial.write（0x01）; //長方形の番号

            Serial.write（0x00）; // pointX1H

            Serial.write（0x0A）; // pointX1L

            Serial.write（0x00）; // pointY1H 

            Serial.write（0x50）; // pointY1L

            Serial.write（0x02）; // pointX2H

            Serial.write（0x76）; // pointX2L。

            Serial.write（0x01）; // pointY2H

            Serial.write（0x90）; // pointY2L          

            Serial.write（0xFD）; //オレンジ色H 

            Serial.write（0x60）; //オレンジ色L   

      }

// ————————————–オレンジと正方形は終わりです—————————————–  

  // ————————————–青と円が始まります—————————————–

        if（iNum == 5）{//円！ と青！

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x0F）;

            Serial.write（0x82）;

            Serial.write（0x10）; //基本的なグラフィックページ1のaddressH

            Serial.write（0x00）; //基本的なグラフィックpabe1のaddressL

            Serial.write（0x00）; //円CMDを実行します 

            Serial.write（0x05）; //円CMDを実行します

            Serial.write（0x00）; //円の数

            Serial.write（0x01）; //円の数     

            Serial.write（0x01）; //円の中心XH

            Serial.write（0xD6）; //円XLの中心

            Serial.write（0x00）; //円の中心YH 

            Serial.write（0xc8）; //円の中心YL

            Serial.write（0x00）; // RH

            Serial.write（0x32）; // RL。      

             Serial.write（0x00）; // colorH黒

            Serial.write（0x00）; // colorL空白     

                      //塗りつぶし -

            Serial.write（0xA5）; //「A5」は165です

            Serial.write（0x5A）; //「5A」は90です

            Serial.write（0x11）;

            Serial.write（0x82）;

            Serial.write（0x60）; //基本的なグラフィックページ2のaddressH

            Serial.write（0x00）; //基本的なグラフィックpabe2のaddressL

            Serial.write（0x00）; //長方形CMDを塗りつぶします 

            Serial.write（0x04）; //長方形CMDを塗りつぶします

            Serial.write（0x00）; //長方形の番号

            Serial.write（0x01）; //長方形の番号

            Serial.write（0x00）; // pointX1H

            Serial.write（0x0A）; // pointX1L

            Serial.write（0x00）; // pointY1H 

            Serial.write（0x50）; // pointY1L

            Serial.write（0x02）; // pointX2H

            Serial.write（0x76）; // pointX2L。

            Serial.write（0x01）; // pointY2H

            Serial.write（0x90）; // pointY2L          

            Serial.write（0x00）; //青いcolorH 

            Serial.write（0xFF）; //青いcolorL     

      }

// ————————————–青と円は終わりです—————————————–   

最後に、オンラインデバッグ。

            STONE TOOLBox（GUIデザインソフトウェア）は、画面ファイルのダウンロード、arduinoコードファイルのアップロードを編集し、電源を接続し、通信し、電源を入れて画像の描画と色の変化を観察し、目的の効果を実現します。

ビデオで示されているコードは次のとおりです。

（オンラインチューニングの試み）

出典：プラトンデータインテリジェンス