バイクのメーターのプログラミング（表現）方法

Question

タッチパネル＋ラズベリーパイを組み合わせ写真のようなバイクのメーターを作りたいと勉強しています。


①メーターモード・セッティングモード・ナビゲーションモードなど切り替えれるように作りたいのですが、
今はProcessingで再現しようと勉強を始めたところなのですが、もっと適したプログラミング言語やアドイン・ツールなどは有りますでしょうか？

②タコメーターの曲がりながら幅が太くなり、その後まっすぐ、これはどうやっているのでしょうか。
まっすぐの部分は棒グラフと同じなので解りますが、最初のRを描きながら幅も太くするのはどうやってやっているのが検討も付きません。

③時計の7セグLED風の表示や、フォントに無い変わった数字を使いたい場合は0～9の画像データを切り替えて表現するのでしょうか。

④他にアドバイスが有ればよろしくお願いいたします。

Answer 1

考えることは一緒だなぁ...
とりあえず②をやってみたので、おくればせながら。
外側(?)が正円なのはそのほうが「針」がらしく描けるかなぁ、ということで。

float needleWidth=0.03;//"針"の太さ
float lvl=0;//指示値
float lvlMax=15;//最大スケール
float r1=260;//カーブ部分の外径
float l1=250;//直線部分の長さ
float hoffset=30;//全体の水平位置
float voffset=50;//全体の垂直位置
float ratio1=0.7;//直線部分の太さ(細さ)
float ratio2=0.9;//0の太さ(細さ)

void setup() {
  size(640, 360);
  ellipseMode(RADIUS);
}

void fillGage(float lv, color col) {
  if (lv<HALF_PI) {
    fill(col);
    arc(hoffset+r1, voffset, r1, r1, PI-lv, PI);
  } else {
    fill(col);
    arc(hoffset+r1, voffset, r1, r1, HALF_PI, PI);
    rect(hoffset+r1, voffset+r1*0.7, (lv-HALF_PI)*r1, r1*0.3);
  }
}

float d=0.05;
void draw() {
  lvl+=d;
  if (lvl>lvlMax) {
    d=-d;
    lvl=lvlMax;
  }
  if(lvl<0){
    d=-d;
    lvl=0;
  }

  background(0xcc);
  translate(0, height);
  scale(1, -1);
  noStroke();
  fill(255);
  arc(hoffset+r1, voffset, r1, r1, HALF_PI, PI);
  rect(hoffset+r1, voffset+r1*ratio1, l1, r1*(1-ratio1));
  float meterMax=HALF_PI+l1/r1-needleWidth;
  float needleBtm=map(lvl, 0, lvlMax, 0, meterMax);
  float needleTop=needleBtm+needleWidth;
  fillGage(needleTop,color(255,0,0));
  fillGage(needleBtm,color(0));
  //中心部を隠す
  fill(0xcc);
  ellipse(hoffset+r1, voffset, r1*ratio2, r1*ratio1);
}

Comments

[_KN_]

有難うございます。
めちゃめちゃ感動しました。
これが実際のバイクに載った時を考えるとニヤニヤしてしまいます。

因みにこれ
https://www.youtube.com/watch?v=dC1XBpKwRWs&t=35s
の0:28のロゴが出るところはどうやっているか解りますか？
フェードイン・フェードアウトは解りますが、キラっと光るやつはどうやっているのでしょうか？

[thkana]

> ロゴ
実際にどうやっているかは知りませんが、
「紙芝居」としてその画を別途作って、次々表示していけば描けないものはない、ことになります。
あるいは、RaspberryPi+Processingであれば、3Dモデルを作って光源を移動...なんていうこともできるのかも知れません。ソッチ方面は守備範囲外でわかりませんが。「輝き」感とかもなにか手法があったりしそうです。

[_KN_]

追加質問にもお答え頂き有難う御座いました。
3Dモデルを使うのは思いつきませんでした。
今回はそこまで拘るつもりも無いので、まずはメーター作りをしたいと思います。
ベストアンサーはすみません、早かったTN8001さんにさせていただきます。

Answer 2

①メーターモード・セッティングモード・ナビゲーションモードなど切り替えれるように作りたいのですが、
今はProcessingで再現しようと勉強を始めたところなのですが、もっと適したプログラミング言語やアドイン・ツールなどは有りますでしょうか？

マイコン系は全然わからないのですが、GUIは何でやっても大変なので情報の多いものでやるのがいいと思います（何がメジャーなのかは知りません^^;

②タコメーターの曲がりながら幅が太くなり、その後まっすぐ、これはどうやっているのでしょうか。
まっすぐの部分は棒グラフと同じなので解りますが、最初のRを描きながら幅も太くするのはどうやってやっているのが検討も付きません。

円弧（扇形）を描く関数があります。
arc() / Reference / Processing.org
うまく大きさを変えて２つ描けばいけそうです。

③時計の7セグLED風の表示や、フォントに無い変わった数字を使いたい場合は0～9の画像データを切り替えて表現するのでしょうか。

7セグ風なんかは探せばそういうフォントがいっぱいありそうですけど？
もちろん画像でもいいでしょうし、SVGのようなベクターデータも扱えます。
Load and Display a Shape Illustration / Examples / Processing.org

④他にアドバイスが有ればよろしくお願いいたします。

Processingはボタンすら組み込みのものはありません（ControlP5やG4Pといったライブラリを使えば簡単に作れますが、見た目のカスタマイズ性はあまり高くありません）
しかし逆に言えば全部自前描画なら、いくらでも見た目にこだわれるとも言えます。

このアプリがあくまで実用重視（実際に使えることのほうが重要）なら、見た目はとりあえず置いておいてControlP5等でざっと作ってみるのをお勧めします。
あるいはProcessing以外の選択肢のほうが、向いているかもしれません。

このアプリが見た目重視（完コピすることに意味がある）なら、Processingもありって気はします。
機能が増えるにしたがってスパゲッティ化しないようにするスキル（テクニック？）は必要でしょうが^^;

---

マウス左右でメーターが振れます。
構造が分かりやすいように色を付けました。

void setup() {
  size(400, 300);
}

void draw() {
  background(255);

  // arcで使いやすいようにPIベースに値を変換（最大値に特に意味はない。TWO_PIだと長すぎた）
  float v = map(mouseX, 0, width, 0, PI + QUARTER_PI);

  //fill(0);
  fill(#ff0000);
  arc(120, 200, 220, 300, PI, min(PI + v, PI + HALF_PI)); // 扇形メーター部分

  //fill(255);
  fill(#00ff00);
  arc(120, 200, 200, 200, PI, PI + HALF_PI); // 一回り小さい1/4扇形で下側を隠す

  line(120, 100, 380, 100);

  if (HALF_PI < v) {
    //fill(0);
    fill(#0000ff);
    rect(120, 50, (v - HALF_PI) * 100, 50); // 直線部分
  }
}

Comments

[_KN_]

有難うございます。
まさか思い描いていたものを再現して頂けるなんて思ってもいませんでした。
思わず口でブンブン言いながらマウスを動かしてしまいました。（笑）
別に完コピを目指している訳では無いのですが、私に美的センスが無いもので
取りあえずは模倣から初めて、それからオリジナリティを持たせようと思っています。

因みにこれ
https://www.youtube.com/watch?v=dC1XBpKwRWs&t=35s
の0:28のロゴが出るところはどうやっているか解りますか？
フェードイン・フェードアウトは解りますが、キラっと光るやつはどうやっているのでしょうか？

[TN8001]

> 思わず口でブンブン言いながらマウスを動かしてしまいました。（笑）

当初はthkanaさんのよう自動で（空ぶかしっぽく）動かそうと思ったんですが、計算（基本的には重力とおんなじ）が面倒で丸投げしました^^;
楽しんでいただけたようで何よりですｗ

> キラっと光るやつはどうやっているのでしょうか？

Adobe After Effectsとかで作ってるんでしょうかね？（まったくあてずっぽうですが^^;

これをProcessingでどうするかという話なら
1. アニメーションGIFなり連番画像
　それをどう作るかという話が残るｗ
2. 3Dモデル（obj）を作りライトを回す
　objをどう作るかという話が残るし、金属光沢は結構難しい（できなくはないです）
3. ロゴ画像にハイライト円を重ねる
　一瞬なのでメインのハイライトだけでも案外気にならないかも？

あたりでしょうか？

[_KN_]

追加質問にもお答え頂き有難う御座いました。
やはりアニメーションとかになるんですね。
今回はそこまで拘るつもりも無いので、まずはメーター作りをしたいと思います。