LogyanGFXでグラフィックを横スクロールする

はじめに

この記事では、LogyanGFXを使ってグラフィックスの横スクロールについて記載します。
ADコンバータで計測した電圧をオシロスコープのような波形表示を行う場合等に応用できます。

• ソースの修正
• Windows環境でのビルド・デバッグ
• 実機での動作確認

LovyanGFX for Windowsの環境構築

LovyanGFX for Windowsを使ってみた(https://qiita.com/pokibon/items/4f6f9b1f733ad60c708a )を参考にPC上に環境を構築します。

グラフィックスの横スクロール

以下の例では、M5Stackの画面の一部にグラフを横スクロール表示を実現しています。PC側でデバッグするために、本来ADCで電圧を取得する部分をSINカーブを表示するようにしています。
スプライト上にプロット点が画面上に収まる間は左から順にプロットし、画面の右端まで達した時には、graph.scroll(-1.0);で1ドットスクロールして、空いた右端に新しい値をプロットしています。スプライトの画像が完成後、描画エリアにpushSprite()で描画を繰り返すことにより横スクロールを実現しています。

void adc_get()
{
	char buf[128];
	static uint16_t volt_discharge = 0;
	static uint16_t volt_charge = 0;
	float  ohm_battery = 0.0;
	float  current = 0.0;

	if (etime % time_span == 0) {
		if (discharge == false) {
			//Serial.println("Start Discharge");
			//startDischarge();
			discharge = true;
			time_span = RECOVERY_TIME;
		}
		else {
			//Serial.println("Stop Discharge");
			//stopDischarge();
			discharge = false;
			time_span = DISCHARGE_TIME;
		}
	}

	//voltage = analogReadMilliVolts(ADC_PIN) * 2L;
	float rad = etime * 6 * -0.0174532925;
	voltage = sin(rad) *  1000 + 3000;
	plot_y = map(voltage - 2000, 0, 2000, GRAPH_HEIGHT - 2, 0);

	if (discharge == false) {			// charge state
		if (old_discharge == true) {
			volt_discharge = (count_discharge) ? volt_discharge_total / count_discharge : 0;
			current_discharge_total += volt_discharge / DISCHARGE_REG * (DISCHARGE_TIME / 3600.0);
			//Serial.printf("volt = %d, dischage = %7.2f\n", volt_discharge, current_discharge_total);
			volt_discharge_total = 0;
			count_discharge = 0;
		}
		ohm_battery = 0.0;
		volt_charge_total += voltage;
		count_charge++;
	}
	else {							// discharge state
		if (old_discharge == false) {
			volt_charge = volt_charge_total / count_charge;
			volt_charge_total = 0;
			count_charge = 0;
		}
		ohm_battery = abs(voltage - volt_charge) * DISCHARGE_REG / voltage;
		volt_discharge_total += voltage;
		count_discharge++;
	}
	old_discharge = discharge;
	if (plot_x >= GRAPH_WIDTH - 1) {
		graph.scroll(-1.0);
		plot_x--;
		graph.drawPixel(plot_x - 1, GRAPH_HEIGHT / 2 - 1, TFT_DARKGRAY);
		graph.drawLine(old_plot_x - 1, old_plot_y, plot_x - 1, plot_y, TFT_RED);
	}
	else {
		graph.drawLine(old_plot_x, old_plot_y, plot_x, plot_y, TFT_RED);
	}
	old_plot_x = plot_x;
	old_plot_y = plot_y;
	plot_x++;
	graph.pushSprite(&lcd, GRAPH_START_X + 1, GRAPH_START_Y + 1);

	current = voltage / DISCHARGE_REG;
	current = (discharge) ? current : 0.0;
	sprintf(buf, "%8u, %4u, %7.2f, %7.2f, %7.2f\n", etime, voltage, current, current_discharge_total, ohm_battery);
	disp_value(voltage, current, ohm_battery, current_discharge_total, etime);
	etime++;
}

• Windows環境でのビルド・デバッグ
  Visual Studio上でデバッグ可能です。ドット単位に表示不正などを目視で確認することができます。
  https://twitter.com/pokibon/status/1603535037005123584?s=20&t=8OfZQdGjVuRVe9Aw3BinEA

• 実機での動作確認
  デバッグが完了したソースをM5Stack BASICで実行してみました。
  再現性もばっちりです。
  

まとめ

LovyanGFX for Windowsを使うことにより、組込みデバイス書き込み前にPC上で動作確認、デバッグができるようになった。
LovyanGFXのスプライトを使うことにより、グラフィックの横スクロールをちらつきなしに実現できた。