C#を使用して、オシロスコープ風画面を表示する。

C#

オシロスコープのように流れるデータ表示ができないかの可否があり、サンプルプログラムを作成しました。

プロジェクト

プロジェクト名: CS_Sample_Logger
開発言語:Visual Studio2019

サンプルソフト概要

・データのグラフ表示はオシロスコープ風に右から左へ流れるようにする。

・グラフ表示のレンジはオシロスコープ風に切り替えれるようにする。

・今回はサンプル表示の為、表示内容は別スレッドを起動し、スレッド内でサイン波形データを生成する。

サンプル画面

サンプルソフト説明

格子図形(目盛り)の表示

 //------------------------------------------------------------------
  //描画先とするImageオブジェクトを作成する
  //------------------------------------------------------------------
  Bitmap canvas_base = new Bitmap(iXmax, iYmax);
  //------------------------------------------------------------------
  //ImageオブジェクトのGraphicsオブジェクトを作成する
  //------------------------------------------------------------------
  Graphics g_base = Graphics.FromImage(canvas_base);
  //------------------------------------------------------------------
  //オブジェクトの作成
  //------------------------------------------------------------------
  Pen p = new Pen(Color.FromArgb(255, 255, 255));
  SolidBrush b = new SolidBrush(Color.FromArgb(255, 0, 0, 0));
  g_base.FillRectangle(b, 0, 0, iXmax, iYmax);
  g_base.DrawRectangle(Pens.White, 0, 0, iXmax - 3, iYmax - 3);
  //------------------------------------------------------------------
  // 座標描画
  //------------------------------------------------------------------
  DrawLineを使用して、座標を描画していく。
  例)
  g_base.DrawLine(p, x開始座標,y開始座標, x終了座標, y終了座標);
  ※アプリケーション終了時にGraphicsオブジェクトの破棄を行うこと。
  private void Form1_FormClosed(object sender, FormClosedEventArgs e)
  {
    g_base.Dispose();
  }

データの表示

今回はサンプル表示の為、タイマーを起動して、タイマー処理内で表示データの内容を更新する。

最初に描画用のオブジェクトを設定する

  //======================================================================
  // グラフを再描画
  //======================================================================
  //------------------------------------------------------------------
  //描画先とするImageオブジェクトを作成する
  //------------------------------------------------------------------
  Bitmap canvas = new Bitmap(pictureBox1.Width, pictureBox1.Height);
  //------------------------------------------------------------------
  //ImageオブジェクトのGraphicsオブジェクトを作成する
  //------------------------------------------------------------------
  Graphics g = Graphics.FromImage(canvas);
  //------------------------------------------------------------------
  //画像をcanvasの座標(0,0)の位置に描画する
  //------------------------------------------------------------------
  g.DrawImage(canvas_base, 0, 0);
  //------------------------------------------------------------------
  //オブジェクトの作成
  //------------------------------------------------------------------
  SolidBrush b = new SolidBrush(Color.FromArgb(255, 0, 0, 0));
  Pen p = new Pen(Color.FromArgb(255, 255, 255));
  //------------------------------------------------------------------
  //データの表示
  //------------------------------------------------------------------
  .......
  .......
  .......
  //------------------------------------------------------------------
  //リソースを解放する
  //------------------------------------------------------------------
  b.Dispose();
  p.Dispose();
  g.Dispose();
  //------------------------------------------------------------------
  //PictureBox1に表示する
  //------------------------------------------------------------------
  pictureBox1.Image = canvas;

この状態でプログラムを実行すると、データの表示が未コーディングのため、格子図形(目盛り)だけが表示される。
データの表示は、別スレッドで生成されたデータを全てプロットする。
別スレッドからのデータ受け渡しはリングバッファにして、データの読み出し開始ポイントを1プロットずらすことによって、オシロスコープのように流れるグラフ表示となる。

導入例

(1)バッテリーからCAN通信経由で送られてくる、電圧データの変動表示。
(2)TMS320x2803を用いて、海外向けグリッドタイ インバーターのファームウェアを製作した時、TIのサンプルプログラムの系統連系がどのような波形になるかの確認用にシュミレーションソフトを製作

コメント