Vol.865 10.Mar.2023

ブレッドボード図 （Pr-6)GUIライブラリ（controlP5）

Ｂ　ブレッドボード図が作れるソフト　～Fritzing

ｂｙ　ｆｊｋ

　Fritzingは、オープンソースの電子回路設計ツールで、3種類のモード(ブレッドボード、回路、プリント基板)で回路図が作成できる。特にブレッドボード図はこれしか無いと言える。
　Frizingの正式版は、 Fritzingのホームページ　で入手できるが、8ユーロと有料である。有用なソフトなので、PayPalで支払って購入しても良いが、とりあえず試してみたいという場合は、以下のGitHubから無料版を入手できる（ただし、動作の保証は無い）。
　 https://github.com/fritzing/fritzing-app/releases
　GitHubのページを開くと、いくつかのバージョンが出てくるが、実行版のある最新のものはCD-548(2023.1現在）で、この中から自分の環境に合ったものを選んで、ダウンロードする。
　 (windows64用なら fritzing-3d61c58421bdb63ca903bb5d11310a257f1ec0ed-develop-548.windows.64.zip など）
　ダウンロードしたZipファイルを解凍し、解凍したexeファイル(インストールは不要)をクリックするとFritzingが実行できる（ファイル名が長いのでfritzing.zipなどに変更後に解凍した方がよさそう）


Fritzingのホームページ
Fritzingのダウンロードページ

GitHubのFritzingページ
（CD548を選択）
自分の環境に合うものを
ダウンロード

　起動後に、「ブレッドボード」を選び、その上に右側のパーツをドロップし、配線を行うと、簡単にブレッドボード図を作成できる。その後「回路図」を選ぶと回路図が、「プリント基板」を選ぶとプリント基板図が表示される。回路図や基板図は、とりあえず配置・配線されているだけなので、修正してやるとちゃんとした図面になる。さらに、プリント基板製造用のガーバーデータやPDF出力もできる。


Fritzing起動画面
（welcome）
ブレッドボード図
(ユニバーサル基板にも対応)

回路図(PICによるLチカ）
（PIC16F18313）
プリント基板パターン図
(片面、両面も可）

　使える部品にはArduinoなども含まれるが、ネット上でfritzingパーツ（fzpzファイル）で探すと結構見つけることが出来る（例えば、ここなどを参考に）。入手後は、Mypartsのメニューから、fzpzファイルをImportするだけ。
　パーツを０から新規に作成することも出来るが、SVGデータなども必要なので、汎用部品から右クリックし、「パーツ・エディッタ」を使ってオリジナルパーツを作るのが便利。 （PIC16F18313はIC1を流用し、ChipLabelでラベル名、EditPinLablesでpin名称を変更）
　自分で作成したパーツやダウンロードしたパーツは「MINEビン」に保存される（新規ビンも作成できる）。

※【参考】「基礎からのFritzing」(工学社）など

Ｐ　Processing (6)　　～GUIライブラリ（controlP5）

ｂｙ　ｆｊｋ

　ライブラリとは汎用性の高い複数のプログラムを再利用できる形でひとまとめにしたもので、Pocessingには、標準で使えるCoreライブラリと、ユーザによって公開されているContributedライブラリがある。これらは、「スケッチ／ライブライをインポート／ManageLibraries」で確認することが出来るほか、proccesingのページでもっと詳しく確認できる。

【Coreライブラリ】
　　・・・使い方は後述のContributedライブラリと同じ
DXF Export DXF ファイルを作成してジオメトリを保存する
Hardware I/O　 Raspberry Pi および Linux ベースのコンピューターで周辺機器にアクセスする
Network 単純なクライアントとサーバーを介して、インターネット経由でデータを送受信する
PDF Export PDFファイルを作成する
Serial シリアル通信 (RS-232) を介して 外部ハードウェアの間でデータを送受信する
Sound オーディオ ファイルの再生、オーディオ入力、サウンドの合成、エフェクト等をする
SVG Export SVG ファイルを作成する
Video カメラから画像を読み込み、ムービー ファイルを再生し、ムービーを作成する
【Contributedライブラリ】
1．ライブラリーのインストール
ここでは、汎用性が高いGUIが使えるconrolP5を使ってみることにした。Manage画面で選んでinstallすれば利用できるようになる。
２．controlP5ライブラリとは
controlP5はGUIツールで、ライブラリの纏まったチュートリアルが無いが、「ファイル／サンプル」にはcontrolP5の使用例が多く準備されている。
主なコントロールは、
Accordion 展開や折りたたみができる ControlGroup のリスト
Bang きっかけ（bang）の信号を送出するボタン
Button ボタン(ボタンが放されたら・・)
ButtonBar 横一列に並んだボタンの集合
Canvas グラフィック表示
Chart 線グラフ(chart)を描画
CheckBox チェックボックス
ColorPicker RGBのスライダーで色を選択
ColorWheel 色相/明度/彩度によるパレットから色を選択
ControlTimer プログラム起動してからの経過時間
DropdownList ドロップダウンメニュー
Knob 円形スライダー
ListBox リストメニュー
Matrix マトリクス・スイッチャー
Numberbox 数値を指定するボックス
RadioButton ラジオボタン
Range 値の範囲を指定できるスライダー
ScrolelabelList　スクロール可能なリスト
Slider 1次元のスライダー
Slider2D 2次元のスライダー
Textarea スクロール可能なテキスト表示エリア
Textfield テキスト入力フィ0ル度
Textlabel テキスト表示
Toggle トグルボタン

サンプルリスト
buttonサンプル例
３．ライブラリ（controleP5）の使い方
　① ライブラリをインポート import controleP5.*;
　② ControlP5変数を準備 ControleP5 cp5;
　③ ControlP5インスタンスの割り当て cp5 = new ControleP5(this);
　④ addメソッドでコントロ-ルを作る cp5.addButton("button1")
　⑤ 続けてドット演算子でメンバにアクセス　 .setPosition(50,50).setSize(50,20);
　⑥ イベントがあれば同名の関数にリンク public void button1(int theValue){ }
　⑦ 複数コントロールのイベント区別には void controleEvent(ControlEvent theEvent){ }
※ 「. (ドット) 演算子」は、クラス、構造体、または共用体メンバーにアクセスするために使われる。

４．ボタンを押すと信号の色が変わる例
button1ボタンが押されると、同名のbutton1関数が呼び出される。なお、ボタンの上にマウスオーバーになった場合、自動的にボタンの色が変わる。
　
① フォント（サイズ）の変更
　　フォントの変更はPFONTクラスで準備し、textFont()関数でフォントを指定する
② Captionの表示位置変更
　　ボタン宣言後、getController()関数でボタンオブジェクトを取得後、align()関数で指定し、setPadding()関数で実行する
③ Captionを表示させない
　　.setVisible(false)
④ ボタンを押した時に実行(defaultは離れた時)
　　.activateBy(ControlP5.PRESS)

ボタンを押すと 
import controlP5.*;
ControlP5 cp5;
int sgnal1 = 1;
color col1 = 0, col2=0;

void setup() {
  size(400,270);
  cp5 = new ControlP5(this);
  PFont myFont = createFont("Verdana",20); 
  ControlFont cf1 = new ControlFont(myFont);
  textFont(myFont);
  cp5.setFont(cf1);
  cp5.addButton("button1")
     .setPosition(250,150)
     .setSize(100,50)
     .setCaptionLabel("signal1")
     ;
  cp5.getController("button1")
     .getCaptionLabel()
     .align(cp5.CENTER,cp5.TOP_OUTSIDE)
     .setPaddingX(0)
     ;
}

void draw() {
  background(100);
  draw2Signal(50,50,sgnal1);
}

public void button1(int theValue) {
  println("button1: "+theValue+", "+signal1);
  if(sgnal1 == 1)   sgnal1=2;
  else              sgnal1=1;
}

void draw2Signal(float x, float y, int n){
  noFill();
  strokeWeight(3);
  strokeJoin(ROUND);
  rect(x,y,100,180);
  switch (n){
    case 1: 
        col1 = cp5.RED; 
        col2 = 0;
        break;
    case 2: 
        col1 = 0;
        col2 = cp5.GREEN;
        break;
  }
  fill(col1);   ellipse(x+50,y+50,50,50);
  fill(col2);   ellipse(x+50,y+120,50,50); 
}
　★ControlP5の定義済みカラー
　　AQUA (#3FB5D3)、BLACK (#000000)、
　　BLUE (#0000FF)、FUCHSIA (#CC1669)、
　　GRAY (#C0C0C0)、GREEN (#00FF00)、
　　LIME (#5AFF19)、MAROON (#6A1816)、
　　NAVY (#202F55)、OLIVE (#5F6527)、
　　ORANGE (#FFA500)、PURPLE (#9B72B0)、
　　RED (#FF0000)、SILVER (#C4C7CC)、
　　TEAL (#008080)、WHITE (#FFFFFF)、
　　YELLOW (#FFFF00)
※ 初めてのPIC&Arduinoさんを参考にさせていただいた

※ 本レポートの参考・利用は、あくまでも自己責任でお願いします。

ブレッドボード図 （Pr-6)GUIライブラリ（controlP5）