インターネットWeb時計は、たくさん発展させれる要素があると思います。初心者としては、まずはTFT(ST7735S)の描画を学んでみることにしました。このWeb時計は年月日、曜日、時間:分、秒のグラフィック表示だけですので、少し色のラインと四角の描画コマンドをつかってフレームを作成してみました。単に表示位置の周りに色のドット枠つけるだけです。大した内容ではありませんが、重要なのは、128X160ドットのロケーション(位置関係)を把握するという意味では大切な描画練習です。描画コマンドの説明はしなくても、単に位置を決めて色を指定するという単純な作業です。注意しなければならないのが描画しているグラフィックとの重なりがない用に設定するということだけです。重なる部分でドット発光がとぎれたりしました。案外とX,Yの位置関係が慣れないと変なところへ描画してしまいます。繰り返し確認しながらやることで最終的には自分の思ったとおりのライン、四角フレームにする事が出来ます。四角フレームは外側が緑、各表示毎に緑のラインで区切りをつけ、その内側に白の四角フレーム、又その内側に青のフレーム、そして又その内側に白のフレームというようにしてみました。特に他意はありません。1.8インチもフレームをつけると意外と表示エリアは狭くなりどうしても、年月日、曜日、時間:分、秒の位置調整は必要となりました。もう少し大きなインチのTFTを選べば楽に時計情報の表示位置もフレームも余裕で描画出来ると思います。
以下、年月日(2020年9月28日)の周りのフレーム作成です。フレームの中間は青色を使っていましたが、赤に変えました。また、年月日の色を一旦白にしてみましたが、後から緑に変えました。

 tft.setCursor(xp,yp+0);
  tft.drawRect(x0,y0,160,128,TFT_GREEN);      //draw Square green
 
  tft.drawRect(x0+3,y0+3,154,18,TFT_WHITE); //draw Square white
  //tft.drawRect(x0+2,y0+2,156,20,TFT_BLUE);  //draw Square blue
  tft.drawRect(x0+2,y0+2,156,20,TFT_RED);  //draw Square blue
  tft.drawRect(x0+1,y0+1,158,22,TFT_WHITE);  //draw Square white
  tft.drawLine(x0,y0+23,160,y0+23,TFT_GREEN); //draw Line

  String nenn = dayInfo.substring(0,11);
  Serial.println(nenn);
  tft.setCursor(40,4,2);
  //tft.setTextColor(TFT_WHITE,TFT_BLACK);
  tft.setTextColor(TFT_GREEN,TFT_BLACK);
  //tft.setTextSize(1);
  //tft.println(nenn);
  tft.drawString(nenn,40,4,2);

フレーム練習は無事終了しました。

フレームがついたインターネットWeb時計の完成です。
CIMG8753

フレーム作成のついでに描画コマンドの tft.fillRect コマンドを駆使して、秒の0から59までをプログレスバー形式で表示させてみました。秒を描画していた場所は、プログレスバーにする為、秒は曜日のところへ移動しました。プログラム上では、このプログレスバーの秒の変数の扱い(変換)で、少し悩みました。役に立ったのは、Serial.println です。デバッグの仕方として、プログラムは自走Loop しているので、deray(10);をdelay(500);と0.5秒間隔のループに変更し時間を少し伸ばすことで、Serial.printlnで表示させた各変数は容易に確認出来るようになります。一秒ぐらいでも良いかもしれません。シリアルモニターはコンパイル中は停止しています。書き込み完了になると表示開始します。

描画の範囲を60区画に分けて、1秒で何ドットかずつx軸方向に増やして行くやり方をとれば、秒が進むプログレスバーらしくなりそうだという案です。この案で作成することにしました。

秒の変数の値は、Stringで入ります。つまり0秒は”00”のString変数です。ここで先ず、プログレスバーの描画と時間幅の関係を考えないといけません。
入って来る情報はStringで ”00”,”01”,”02”,・・・"58","59","00","01",・・・といった値をとります。これでは位置情報には使うことが出来ませんから、”00”は数値の0、”01”は数値の1、の様に秒の文字列を数値へ変換が必要になります。数値になると、計算値として使用できます。プログレスバーの領域X軸のドット分割の範囲とすると、ドット数を60で割ると分割倍数が出てきます。少し値の調整が必要でしたが!
int pbar;と宣言して、文字として取り込んだ秒のストリング情報のmyou をint型に変換です。以下はその変換部抜粋です。

String myou = dayInfo.substring(23);
pbar = myou.toInt();
plogbar = int((2.58*pbar));
plogbarnasi = plogbar;
  Serial.println(myou);
  Serial.println(pbar);
  Serial.println(plogbar);
tft.fillRect(x0+4, y0+107,(x0+plogbar),y0+17, TFT_GREEN);
この後に、0秒になったら秒描画した箇所を消す処理があります。

ここで、とても厄介な目に合っています。変換する myou.toInt(); のプログラムの位置です。最初はtft.drawStringで秒描画した後にmyou.toInt();を置いていたのですが、変換値は描画を消すピクセル位置計算値として使うのですが常に0となってしまいました。下記がその時の変換が常に0となったときのプログラム位置です。なんで0になるのかがわかりません。対策として上のプログラムにあるとおり、使うための値を他の変数にコピーしておく方法をとりました。憶測ですが、変数値をプログラムで使うと(下のtft.drawString(myou,125,27,2) 消えてしまうというような状況に見えていました。消えても、別にもコピーがあるよー!での対策です。

String myou = dayInfo.substring(23);
tft.setCursor(71,107,2);
tft.setTextColor(TFT_WHITE,TFT_BLACK);
tft.setTextSize(1);
//tft.println(myou);
tft.drawString(myou,125,27,2);
pbar = myou.toInt();
plogbar = int((2.58*pbar));
tft.fillRect(x0+4, y0+107,(x0+plogbar),y0+17, TFT_GREEN);

上記の様に数値への変換値が0になってしまう現象は、別の変数にコピーを取ることで解決しました。コピーデータの使いみちは、秒で塗りつぶした箇所を0秒時に消す処理で使っています。
2.58倍したのは描画の端までの位置合わせで、丁度端のフレームにかかる前のドットまで描画出来る位置の調整で丁度となる倍数が2.58でした。

途中からですが上記の問題が解決したプログラムです。
void loop(){
省略

 String myou = dayInfo.substring(23);
  pbar = myou.toInt();
  plogbar = int((2.58*pbar));
  plogbarnasi = plogbar;
  Serial.println(myou);
  Serial.println(pbar);
  Serial.println(plogbar);
  tft.fillRect(x0+4, y0+107,(x0+plogbar),y0+17, TFT_GREEN);
 
  Serial.println(plogbarnasi);
  switch(plogbarnasi){
    case 0:
            tft.fillRect(x0+4,y0+107,x0+152,y0+17,TFT_BLACK);
            break;
    default :
            break;
  }
 
  tft.setCursor(71,107,2);
  tft.setTextColor(TFT_WHITE,TFT_BLACK);
  tft.setTextSize(1);
  //tft.println(myou);
  tft.drawString(myou,125,27,2);
 
  delay(10);//10 for debug 500
}

秒のプログレスバーが動作している動画です。


描画もやってみると意外と楽しい面があります。
日中はまだ暑かったりがありますが、少しずつ季節は秋になってきています。新米もスーパーで出始めました。外はすこし冷えてきています。外では、今鈴虫が泣いています。
そろそろ寝ようかと思います。

つづく?