Vol.863 10.Feb.2023

ハンドヘルドオシロ 既読ハイパーリンクの色変更 （Pr-4)ラスタ画像、ベクタ画像

Ｄ　ハンドヘルドデジタルオシロスコープ ～HDS2102S

ｂｙ　ｆｊｋ

　オシロスコープ、マルチメータ、波形発生の多機能を1台に集約したHDS2102S（OWON、100MHz、\27,100）を入手した。同機は、 リチウム電池を内蔵しており、電源のない屋外のフィールドでも使うことができる。また、 USB Type-Cインターフェースによりパソコンとの通信が可能（専用ソフトあり）である。

【HDS2102Sの主な仕様】
・本体サイズ：198H×96W×38mmD、1.1kg
＜オシロスコープ＞
・周波数帯域： 100MHz、2チャンネル
・サンプルレート： 最高500Mサンプル/秒、8k
・3.5インチ・カラーLCD, 320x240ピクセル
・18650Li電池、消費電力≦5W、約4時間使用可
・USB Type-Cインターフェース、充電と通信
・SCPIコマンドによるリモート制御
・水平軸スケール：2nS～1000S／div
・垂直軸スケール：10mV～10V／div
・トリガーモード：オート、ノーマル、シングル
＜マルチメータ＞
・分解能：20,000カウント
・測定モード：電圧、電流、抵抗、キャパシタンス、ダイオード、導通テス
＜波形発生器＞
・正弦波（25Mhz)、方形波・パルス・任意波形（5Mhz)、ランプ（1Mhz)。最低0.1Hzから
・分解能：14ビット
＜付属品＞
・オシロプローブ、ACアダプタ、USBケーブル、メーターリード、BNCワニ口ケーブル、専用ケース

ケース付きHDS2102S
オシロモード
マルチメータモード
信号発生モード

Ｈ　既読ハイパーリンクの色変更を戻したい

ｂｙ　ｆｊｋ

　ExcelやWordで、ハイパーリンクアドレスをクリックすると、リンクページを開けるが、閲覧済みのアドレスの表示色が変わってしまう。これを元の色に戻したい時は、アドレスにマウスを合わせ、

Ｐ　Processing (4)　　～ラスタ画像、ベクタ画像

ｂｙ　ｆｊｋ

　Processinngでは写真やアイコンといったラスタ画像を扱うことが出来る。扱うことが出来るラスタ画像フォーマットはJPEG、PNG、TGA、GIFの４種類で、WEB上のデータを指定することも出来る。
　また、画像には図形をベクトルで表現するベクタ画像(拡張子がsvg)があり、svgファイルもProcessingで扱うことが出来る。
　ラスタ画像はPIMageクラス、ベクタ画像はPShapeクラスとして扱われ、前述のフォントはPFontクラスの画像データとして扱われる、
　matrixを使ったtranslate（移動）、rotate(回転）、scale（サイズ変更）などの関数をこれらの画像に適用することで、動きのある画像を描くことが出来る。

１．表示したい画像を使う準備をする
　Processingでデフォルトで利用するフォルダーはプロジェクトフォルダー内のdataフォルダーと決まっている。dataフォルダーに画像を追加するには、「スケッチ」「ファイル追加」を選び、追加したいファイルをダイアログボックスで選び「開く」を押すと、だたフォルダーにファイルが追加される。追加されたファイルは、@スケッチ」「ファイルフォルダーを開く」で確認できる。また、以下の方法も可、
　① ファイルをdataフォルダーに直接コピー
　② フルパスでファイル名を指定する
　③ Web上のデータは、“http://・・・.jpg“等で指定
なお、jpeg写真データは大きいのでサイズを小さくしておくこと

画像データの保存
２．ラスター画像を読み込んで表示する
Processingでラスター画像を表示するには、
① PImageクラス変数を宣言する
② loadImage()関数で画像データを読み込む
③ image()関数で画像を表示する

ラスター画像表示例 
PImage online,png2;
void setup(){
  size(400,250);
  background(0x40C0FF);
  String url = "http://www1.coralnet.or.jp/fjk/spielen3.gif";
  online = loadImage(url,"gif");
  png2 = loadImage("spielen.png","png");
}
void draw(){
  image(online,20,20,300,60);
  image(png2,50,100,300,140);
}
３．GIFやPNGの背景透明画像の作成
背景が透明な画像を表示するには、背景が透明な画像を作成する必要がある、この方法には、web上のフリーサービスやフリーソフト(例えば、ここ）を利用する方法、パワーポイントで作る方法、透明化後、「図として保存」／「PNG ポータルブルネットワークグラフィクス形式」で保存）などがあるが、ここではWindowsの標準ツールである「ペイント３Ｄ]を使って背景が透明な画像を作る。
　
【背景透明画像の作り方】
① 透明にしたい画像(spielen.jpg)をペイントなどで作成する。
② ペイント3Dを起動（ペイントの右上の「ペイント3Dで編集する」をクリック）
　（保存後、画像アイコン上で右クリックし、「ペイント3Dで編集する」をクリックでも良い）
③ ペイント3Dに画像を読み込んだら、「マジック選択」をクリック
④ 透明化したエリアをマウスで選択し、「次へ」をクリックすると背景が消去される
⑤ 不足している部分がある場合、「追加」を選び、マウスでその場所をクリック
⑥ 余計な場所がある場合、「削除」を選び、マウスでその場所をクリック
⑦ 背景がうまく消されたら、「完了」をクリック
⑧ 完成した画像を、選択状態のまま、ctrl＋Cを押してクリップボードにコピー
⑨ メニューから「新規作成」を選び、作業内容は「保存しない」を選ぶ
⑩ 新キャンバスが表示されるので、キャンバスタブを選び、「透明なキャンバス」をONにする
⑪ ctrl＋Vで先ほどコピーした画像を貼り付ける（背景が透明になっているはず）
⑫ キャンバスと画像のサイズを好みの大きさに変更する。
⑬ メニューから「名前を付けて保存」／「画像」を選ぶ
⑭ ファイルの種類でPNGまたはGIFを選び、「保存」をクリック
⑮ ファイル名(spielen.gif)を入れて、［保存」すると、背景透明画像として保存される

ペイントで文字画像作成
ペイント3Dで編集画面
「マジック選択」を実行

背景が透明に・・
不足文字を追加
完了後、コピー

新規画像を透明キャンパスに
画像を貼付。サイズ変更、保存
透明文字として保存できた
4．画像データを使って車を走行させる
前述の手順でspielen画像（spielen.jpg）から作成した背景透明画像（spielen.gif）を使って車を走行させる。車は左端から右に向かって移動し、画面からはみ出すと、反対向きで移動する。
spielen画像の左右反転画像は、事前に作成しておいても良いが、ここではscale()関数のパラメータを負数にすることで実現している。なお、この時、表示位置はマイナスに画像の表示幅分（carW)をオフセットする必要がある。
座標計算を簡単にするため、imgFlip(）関数を作成した。
左右反転画像の表示方法】
① scale()関数の基準点を画像の左上に
② scale(-1,1)を実行し、左右を反転する
③ carW分だけ左にオフセット（負数）して表示 
PImage spImg;
float x=0;
float speed=2.5;
int direction=1;
int carW=100;
int carH=60;
void setup(){
  size(400,200);
  spImg = loadImage("spielen.gif","gif");
}
void draw(){
  background(0x00FF00);
  x += speed * direction;
  if(x < -carW || x > width){
    direction *= -1;
  }
  if(direction == 1){
    imgFlip(spImg,x,30);
  }else{
    image(spImg,x,120,carW,carH);
  }
}
void imgFlip(PImage img,float x,float y){
  pushMatrix();
  translate(x,y);
  scale(-1,1);
  image(img,-carW,0,carW,carH);
  popMatrix();
}

走行する車(シュピーレン）
５．ベクタ画像を読み込んで表示する
ベクター画像はサイズを変更しても解像度が悪くならない特徴を持っている。
Processingでベクター画像を表示するには、
　① PShapeクラス変数を宣言する
　② loadShape()関数で画像を読み込む
　③ shape(）関数で画像を表示)

マウスを動かすと画像が拡大されるが、
拡大縮小しても鮮明さが失われない 
PShape bMask;
void setup(){
  size(300,300);
  shapeMode(CENTER);
  bMask = loadShape("bahtinov150-50.svg");
}
void draw(){
  background(200);
  float diameter = map(mouseX,0,width,10,1000);
  shape(bMask,150,150,diameter,diameter);
}
拡大縮小の中心を図形中心にしている
（abc725で作成したバーティノフマスクを利用）
６．フレーム画像をファイルに書き出す
フレーム画像はsave(filename)、又はsaveFrame(filename)で、ファイルに書き出すことが出来る。書き出した画像を繋げると、動画として見ることが出来る（「書き出すフレーム数<メモリ容量」に注意！！）。
  • Draw()の最後に、saveFrame(filename)を記述することで、連番付きファイルとして書き出す
    　(例)　saveFrame("frm-#####.png") →“frm00001.png”,“frm00002.png”、・・・
    　"#"（ハッシュ）の数は桁数。filenameを省略すると、ファイル名を"screen-0001.tif"として保存
  • 拡張子として、tif、tga、jpeg、pngが指定でき、拡張子を省略するとtiffファイルになる

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

ハンドヘルドオシロ 既読ハイパーリンクの色変更 （Pr-4)ラスタ画像、ベクタ画像