Web

form の input text に文字列を追加してから submit する

2019年2月15日お母ちゃんコメントする

項目自体には文字を追加したくなかったので、
隠し項目を追加し、 submit の onclick で文字列を追加する形で対応。

<form id="form" name="form" method="get" action="https://example/">
  <input type="text" value="" size="20" id="t" name="" />
  <input type="hidden" name="q" value="" id="t2">
  <button id="submit" type="submit" name="btn" onclick="$('#t2').val($('#t').val()+' テキスト追加');">検索</button>
</form>

</form>

工作・ハンドメイド

はじめてのレザークラフト – キーケース製作 –

2019年2月14日お父ちゃんコメントする

ワカサギ釣りの帰りに東急ハンズによって見たら、なんとレザークラフトのワークショップが開催されていました。がま口財布かペンホルダーを製作できるークショップでした。

実はお母ちゃんがいつかレザークラフトを始めたいと器具や革材などは購入してあったのですが、なかなか独学で始めるきっかけがなかったのでコレは好機会♡

残念ながら子供二人連れで時間もなかったので、翌日に日を改めてお母ちゃんにワークショップに参加してもらいました。

作ったのは接着や手縫いの基本が習得できるということでペンホルダーを選択。

めっちゃよくできてる((((；ﾟДﾟ))))

水性の塗料で色まで塗って、縫い合わせたエッジの処理もツヤツヤでかっこいい！首にかけておくだけでもなんかいい感じ♪

ワークショップ参加でレザークラフトの基礎を学んだお母ちゃん。早速なんか作る気満々でお父ちゃんも触発され、2人でキーケースづくりに挑戦しました！

キーケース製作

お母ちゃんは、厚手の革で、お父ちゃんは薄めの革にさらに薄い皮を張り合わせて、キーケースを製作することにしました。今まで使用していたキーケースを参考に作りました。

以下、左側お父ちゃん、右側お母ちゃんのステレオ放送でお送りします。

革裁断

はベースに赤、裏に青、ポイントにオレンジの皮を使用。
は厚手のヌメ革を使用。

ベースの皮は17cm×9cmにカッターでカット。
は裏に接着する青い皮を4cm×9cmを2枚、5cm×9cmを1枚カット。
は鍵をフックする金具を取り付けるためのオレンジの皮を5cm×9cmにカットしました。

ジャンパーホックとキーホルダー取付

キーホルダー取付

キーホルダーを取り付ける布に穴をあけてカシメで固定します。

5cm×9cmにカットした革に穴あけポンチ(2mm径)で穴を2か所あけます。

穴にカシメを通して打ち具で固定します。

いい感じ♪

ジャンパーホック取付

三つ折りでボタンで留めれるようにジャンパーホックを取り付けます。

キーホルダーと同様に穴あけポンチ(2mm径)で穴を2か所あけ、ホックを通して打ち具で固定します。

は4cm×9cmにカットした青革を両端に、キーホルダーを付けた革を真ん中に接着して両端にジャンパーホックを取り付けました。

革の接着にはGクリヤーを使用。

エッジ手縫い

キーケースの端を糸で縫っていきます。

菱目打で穴あけ

2本菱目打(5mm巾)で端に穴をあけるためのガイドとなる跡を付けます。

ガイドに沿って 4本菱目打(5mm巾)で穴をあけます。

ちなみにはキーホルダーを付けた5cm×9cmのオレンジ革の上部のみベースの革に接着して縫っていきます。

四辺全部穴をあけます。

糸手縫い

レザークラフト用のナイロン糸でキーケースの四辺を縫っていきます。糸にはロウがぬってあって滑りやすくなっています。

糸を縫い合わせる長さの4倍の長さで切ります。今回は約2m [(17cm×2+9cm×2)×4] 程です。
　

針糸通し

糸の両端に針を取り付けます。つけ方は説明しにくいので以下の動画をご参考にしてください。

縫い方

縫い始め箇所に針を通して糸が同じ長さになるように真ん中まで糸を通します。

手前側の糸を次の穴に通します。こちら側をオモテとします。
　
オモテから通した糸を下にして、上からかぶせるように他方の針を通します。

　
糸を双方から引っ張ってしっかり縫い合わせます。

　
1-３を繰り返します。
オモテ

ウラ

これらの順番や糸の上下を変えてしまうと仕上がりがガタガタになってしまします。

縫い仕上がり

オモテ
直線的になります。

ウラ
縫い目が斜めに並びます。

縫い終わり

縫い終わりは、２穴くらい始点を追い越して重ね縫いして3mm程残して切ります。切り口をライターであぶると、縮んで丸まり、指やライターの腹で抑えて固定し完成です。

ナイロン糸なのでライターでとめれますが麻などの糸に場合は木工用ボンドを使用して固定するようです。

キーケース縫い仕上がり

キーケースは表面がウラの縫い目斜めに仕上がるように縫いました。

は水色の糸を使用し、表面2か所にオレンジの革を三角に切って接着して四辺縫いました。
はピンクの糸を使用して縫いました。

エッジ処理

裁断した革はコバといわれる毛羽立ちがあります。それをヤスリや仕上げ材で磨いていきます。

断面を100均の詰め磨きで磨いて、トコノールという仕上げ材を断面にぬって木のヘラで磨きます。

のは薄手の革なのでピカピカとはいきませんが毛羽立ちはなくなり、シックな仕上がりとなりました♪

は厚手のヌメ革なのでピカピカに仕上がります！

完成品

割と簡単にできて驚き！でもお母ちゃんにワークショップに参加してもらってプロに色々直接教えてもらわなければ一生やらなかったかも。。(;^ω^)

道具もそろえたし今後はバシバシレザークラフト楽しみたいです。

つーか、自分の持ち物や身に着けるものは全部自作したいなぁ 🙄

おでかけ・イベント

月形温泉氷上ワカサギ釣り体験

2019年2月12日お父ちゃんコメントする

長男くんが最近頻繁に凍った海が見てみたいというので、流氷でも見に行こうかなとも思ったのだけど、遠いし流氷観測船はすでにシーズン中の予約がいっぱいだしどうしたものかと。

夏には釣りしてみたいと言っていたことも思い出し「そうだ！ワカサギ釣りで大体両方の願い満たせるじゃん！」　というわけで家族でワカサギ釣り体験してきました。

ネット検索すると札幌近郊でワカサギ釣りのツアーが割とたくさん出てきました。今回は以下のプランに参加しましたのでご報告いたします🐡。

ワカサギ釣りのプラン｜【札幌近郊・皆楽公園開催／半日】氷上ワカサギ釣り｜ぽかぽか3セットで手ぶらで快適♪『天然温泉入浴』&『ストーブ付き釣り小屋』&『防寒ウェア無料レンタル』♪札幌駅北口から無料... - opt.hokkaidotour.net

8:30 札幌駅集合バス出発

バス移動となるので札幌駅北口構内鐘の広場に行き、担当者に料金を支払います。

みんなで頑張って早起きしてバスで札幌駅に向かいました。

参加者がそろったところでバスに乗車しいざ出発！この日はだいたい40名ほどの参加者がいました。子連れの家族やカップル、海外からの観光客など多種多様。

バスは普通の路線バスタイプでしたが暖房がきいていて快適でした。飲食も自由なのでおにぎりやおやつを遠足気分で堪能させていただきました。

10:00 月形温泉到着

1時間ほどで目的地に到着。月形温泉という温泉や宿泊施設、レストランがあるエリアに到着。その目の前の湖がワカサギ釣りの現場となります。

バスを降り、湖近くの小屋でトイレや着替えを済ませます。現地で手袋やスキーウェア、長靴なども借りることができます。我々は普段の装備のまま釣りに臨みました。長女ちゃんはスキーウェア着用。

10:15 釣り小屋へ移動

いよいよ湖に行って釣り開始！

歩いて湖上の釣り小屋に向かいます。一面真っ白でどこが湖の上なのかは全く分かりませんでしたw。

釣り小屋はビニルハウス。湖に穴をあけて鉄骨の梁を通してベニヤ板を乗せただけの床なのでちょっと怖ったww　でもストーブも点いているのでめちゃめちゃあったかい！この日は-10℃くらいで外はかなりの寒さだったのですが、快適な中で釣りを楽しむことができました。ビニルハウス＆ストーブで暑いくらいでした。

さて、本筋のワカサギ釣りですがなかなか難しい！スタッフの方がほぼ付きっきりで教えてくれたので何とかみんな釣ることができましたが前半はほとんど釣れませんでした。

ワカサギ釣りの方法

釣り竿は小型のまるでおもちゃのようなものでした。十数センチほどの持ち手にリールがついています。針は5個ほどついていて白サシという小さなワームを針に通して半分に切って使います。虫を針に取り付けた後、後ろ半分をハサミで切る理由はワカサギはこの虫を食べるわけではなく虫に寄り付くプランクトンを食べるためです。

みんな気味悪がって餌付けはもっぱらお父ちゃんの仕事となりました。この虫がすごく元気でタッパにウジャウジャたくさん入っていたのですが、フタをし忘れると逃げる逃げるww 長女ちゃん大騒ぎww

餌を取り付けたら、リールのロックを解除して湖底につくまで糸を伸ばします (3mほど)。湖底についたらリールをロックして少し巻いて浮かせます。

ワカサギは餌に食らいつくわけではなく、餌付近のプランクトン目当てにちかづくだけなので釣った感覚は微量です。手でもっていてもほとんど感覚がないので上の写真のようにバケツにおいて釣り竿の先の動きを凝視し、ピクッと動いたら急いで手に取って持ち上げてまだ竿先が動いたらリールを巻きます。

バケツにおいてしばらく反応がない場合は、手に取って3回ほどチョンチョンと竿を動かしてまたバケツに起きて竿先を凝視し反応を待ちます。

これを繰り返すのでとても忙しい釣りです。餌も5~10分で効力がなくなるとのことで頻繁に取り換える必要があります (お父ちゃん大忙しww)。

10:20 釣り開始

前半は釣り方のコツがつかめず、全然釣れませんでしたが　スタッフのワカサギ釣りプロがたくさん教えてくれたのでみんな感覚をつかんで子供達でも釣ることができました！

長女ちゃんワカサギゲット! pic.twitter.com/hPrBindLoE

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月11日

釣れるのはワカサギだけではなく、ウグイやクチボソというワカサギの外敵も釣れます。下処理が必要とのことで残念ながら食べれません。

残念。。ウグイだ。。。でも大興奮！ pic.twitter.com/AHy1pOX1kp

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月11日

ウグイやクチボソが釣れてもワカサギの外敵なのでリリースしません。実際これらを釣るとワカサギが当たりやすくなりました。

なんとなくウグイはでかいし、クチボソは黒っぽくて、白くて目がクリっとしたワカサギに比べると可愛くない印象でした (偏見)。

なんとワカサギの2匹同時釣りもできましたよ♪

12:00 釣り終了釣果発表

ワカサギ 16
ウグイ 4
クチボソ 5

なかなか釣れたほうではないでしょうか？後半はみんな慣れてバンバンつれましたよ。プロの指導のおかげです。

ワカサギ天ぷら試食

釣ったワカサギはその場で揚げて食べることができます。

めちゃめちゃうまかった
ワカサギ天ぷら pic.twitter.com/coubVxO2YS

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月11日

新鮮だし、きれいな湖でプランクトンだけ食べてるだけあってすんごくおいしかった！もっとたくさん食べたかったー！

子供たちはいまだにワカサギ食べたいと言ってくるほどですw。

12:00-14:00 自由時間

出発時間の14:00までは自由時間。釣りを続けてもいいし温泉入ってもいいし。

我々はレストランで食事を済ませて子供たちは雪遊び。大人は交代で温泉を楽しみました。

ソリやチューブが借りれて子供たちは雪の中、大はしゃぎで滑って遊んでいました♪

釣りのあとはソリ遊び pic.twitter.com/ldp6MZ7AQT

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月11日

チューブはでかい pic.twitter.com/dEYP0J1Wxu

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月11日

チューブはちょっと大きかったかな。。。。ww

お母ちゃんとお父ちゃんは交代で温泉を堪能しました。

月形温泉ホテル - tsukigataonsen-hotel.com

水質はウーロン茶のような色でとろみや強いにおいはないもので、いままで入ったことのないタイプの温泉でした。

お父ちゃんは入浴後、30分ほど外で子供たちのソリ遊びの監視員をやったのですが、ずーっと体ポカポカで眼鏡が曇るほどでした。ものすごく体が温まり氷点下でも湯冷め知らずでした。やっぱり温泉は最高です♨

15:00 札幌駅着

14:00にバスに乗車。札幌に帰ります。みんな遊び疲れて寝ながらバスに揺られての帰宅となりました。

真冬の初ワカサギ釣りということで極寒のなか一匹も釣れずにボーズとなる覚悟もあったのですが、大人も子供存分に楽しむことができて大満足でした。

今後も積極的に体験型アクティビティに参加していきたいなと思うそんなお出かけになりました。

POV製作, 電子工作

ESP32 でバーサライタ作製

2019年2月8日お父ちゃん 1件のコメント

以前つくったPOV(Persistent Of Vision＝残像)表示装置バーサライタのマイコンをESP32にしてみました。高速で優秀なESP32で更に無線も使えるので、表示画像をBluetoothで切り替えなども試してみました。

スマート靴占い『 IしたoTんきになぁ〜れ』

動作

スマホで画像を切り替えるとPOVの表示が切り替わります。無線搭載のESP32ならではです。

ESP32だとこれができるのよ#実験 #POV #ESP32 #Dotstar #Bluetooth #Blynk #ジャージ pic.twitter.com/ZWtBNJqYgw

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月7日

構成

基本構成は前回とほぼ同じです。回転部にLEDテープDotstarとマイコン、フォトリフレクタを搭載し、ワイヤレスチャージモジュールを使って回転部への給電します。

今回はLEDテープを2列にして表示の高分解能化をはかりました。

またスマホアプリBlynkでBluetooth介して信号を送って表示する画像を切り替えます。

部品

マイコン ESP32-DevKitC ESP-WROOM-32開発ボードV2

http://akizukidenshi.com/catalog/g/gM-11819/ - akizukidenshi.com

　
フォトリフレクタ QTR-1A

　
LEDテープ Dotstar

　
ワイヤレスチャージモジュール

　
マブチモーター RS-540SH

POV装置

ESP32の高速動作(CPUクロック周波数 240MHz )をいいことにSPIを2個出力してLEDテープを2列にしました。29セルの間に28セルが配置されるように設置しました。

光を拡散させるために切ったクリアファイルでコートしてさらに包帯などをとめるテープを貼ってみました。

Blynk設定

スマホとESP32をスマホアプリのBlynkを用いてBluetooth通信させてPOV表示させる画像を切り替えます。Blynkアプリのバージョンは2.27.1。
　

新規プロジェクトを作成します。HARDWRE MODELはESP32 Dev Boardを選択。CONNECTION TYPEはBluetoothを選択。AUTH TOKENはArduinoコード生成時に使用します(アカウントに登録したメアドに送信されます)。
　

Bluetoothウィジェット、Vertical Sliderウィジェット、Image Galleryウィジェットを配置します。
　

Vertical SliderウィジェットでヴァーチャルピンV0に最小値 1、最大値 2を設定できるようにします。
　

Image Galleryウィジェットで入力をヴァーチャルピンV0として、2個の画像のあるURLを指定します。V0 = 1でロックマン、V0 = 2でレナが選択されます。

Arduino IDEコード

ArduinoでESP32のコードを作成しました。環境設定は以下の通りです。ライブラリのバージョンは1.0.1。
　https://github.com/espressif/arduino-esp32/blob/master/docs/arduino-ide/boards_manager.md

以下のDotstar用ライブラリを使用しています。
　https://github.com/adafruit/Adafruit_DotStar

フォトリフレクタ QTR-1A用のライブラリは以下を使用しました。
　https://github.com/pololu/qtr-sensors-arduino

更にBlynk用ライブラリも使用します。バージョンは0.6.0。
　https://github.com/blynkkk/blynk-library

[スケッチの例] -> [Blynk] -> [Boards_Bluetooth]-> [ESP32_BT]を参考にコード生成しました。

#define BLYNK_PRINT Serial

#define BLYNK_USE_DIRECT_CONNECT

#include <BlynkSimpleEsp32_BT.h>
#include <Adafruit_DotStar.h>
#include <QTRSensors.h>
#include <SPI.h> 

#include "graphics.h"

#define NUMPIXELS 29 // Number of LEDs in strip

int numRot = 0;
int numDiv = 0, numDiv2 = 0; 
int stateRot = 0;
int stateDiv = 0;

unsigned long rotTime, timeOld, timeNow;

#define HDATAPIN    13
#define HCLOCKPIN   14
Adafruit_DotStar stripH = Adafruit_DotStar(NUMPIXELS, HDATAPIN, HCLOCKPIN, DOTSTAR_BGR);

#define VDATAPIN    23
#define VCLOCKPIN   18
Adafruit_DotStar stripV = Adafruit_DotStar(NUMPIXELS, VDATAPIN, VCLOCKPIN, DOTSTAR_BGR);

#define NUM_SENSORS             1  // number of sensors used
#define NUM_SAMPLES_PER_SENSOR  6  // average analog samples per sensor reading
#define EMITTER_PIN             QTR_NO_EMITTER_PIN
#define th_SENSORS 1000

QTRSensorsAnalog qtra((unsigned char[]) {34}, NUM_SENSORS, NUM_SAMPLES_PER_SENSOR, EMITTER_PIN);
unsigned int sensorValues[NUM_SENSORS];

// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char auth[] = "YourAuthToken";

int pic = 0;

BLYNK_WRITE(V0) {
  pic = param[0].asInt();
  Serial.println(pic);
}

void setup() {
  Serial.begin(115200);
  
  stripH.begin(); // Initialize pins for output
  stripV.begin();
  stripH.clear();
  stripV.clear();
  stripH.show();
  stripV.show();  // Turn all LEDs off ASAP
  delay(500);

  Serial.println("Waiting for connections...");
  Blynk.setDeviceName("Blynk");
  Blynk.begin(auth);
}

void loop() {
  Blynk.run();
  
  qtra.read(sensorValues);

  /*
  Serial.print(sensorValues[0]);
  Serial.print("\t");
  Serial.print(numRot);
  Serial.print("\t");
  Serial.println(rotTime);
  */

  if(stateRot == 0 && sensorValues[0] < th_SENSORS){
    timeNow = micros();
    rotTime = timeNow - timeOld;
    timeOld = timeNow;
    stateRot = 1;
    numRot++;
  }
  if(stateRot == 1 && sensorValues[0] > th_SENSORS){
    stateRot = 0;
  }
  

  if(stateDiv == 1 && micros() - timeOld > rotTime / Div * (numDiv)){
    stateDiv = 0;
  }
  if(stateDiv == 0 && micros() - timeOld < rotTime / Div * (numDiv + 1)){
    stateDiv = 1;
    
    stripH.clear();
    stripV.clear();

    for(int i=0;i<NUMPIXELS; i++){
      numDiv2 = numDiv+1;
      if(numDiv2 >= Div) numDiv2 -= Div;
      if(pic == 1){
        stripH.setPixelColor(i, rock[numDiv2][i*2]);
        stripV.setPixelColor(i, rock[numDiv][i*2+1]);
      }else{
        stripH.setPixelColor(i, rena[numDiv2][i*2]);
        stripV.setPixelColor(i, rena[numDiv][i*2+1]);
      }
      
    }
    
    stripH.show();
    stripV.show();
    
    
    numDiv++;
    if(numDiv >= Div ) numDiv = 0;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

#define BLYNK_PRINT Serial

#define BLYNK_USE_DIRECT_CONNECT

#include <BlynkSimpleEsp32_BT.h>

#include <Adafruit_DotStar.h>

#include <QTRSensors.h>

#include <SPI.h>

#include "graphics.h"

#define NUMPIXELS 29 // Number of LEDs in strip

int numRot = 0;

int numDiv = 0, numDiv2 = 0;

int stateRot = 0;

int stateDiv = 0;

unsigned long rotTime, timeOld, timeNow;

#define HDATAPIN 13

#define HCLOCKPIN 14

Adafruit_DotStar stripH = Adafruit_DotStar(NUMPIXELS, HDATAPIN, HCLOCKPIN, DOTSTAR_BGR);

#define VDATAPIN 23

#define VCLOCKPIN 18

Adafruit_DotStar stripV = Adafruit_DotStar(NUMPIXELS, VDATAPIN, VCLOCKPIN, DOTSTAR_BGR);

#define NUM_SENSORS 1 // number of sensors used

#define NUM_SAMPLES_PER_SENSOR 6 // average analog samples per sensor reading

#define EMITTER_PIN QTR_NO_EMITTER_PIN

#define th_SENSORS 1000

QTRSensorsAnalog qtra((unsigned char[]) {34}, NUM_SENSORS, NUM_SAMPLES_PER_SENSOR, EMITTER_PIN);

unsigned int sensorValues[NUM_SENSORS];

// You should get Auth Token in the Blynk App.

// Go to the Project Settings (nut icon).

char auth[] = "YourAuthToken";

int pic = 0;

BLYNK_WRITE(V0) {

pic = param[0].asInt();

Serial.println(pic);

}

void setup() {

Serial.begin(115200);

stripH.begin(); // Initialize pins for output

stripV.begin();

stripH.clear();

stripV.clear();

stripH.show();

stripV.show(); // Turn all LEDs off ASAP

delay(500);

Serial.println("Waiting for connections...");

Blynk.setDeviceName("Blynk");

Blynk.begin(auth);

}

void loop() {

Blynk.run();

qtra.read(sensorValues);

Serial.print(sensorValues[0]);

Serial.print("\t");

Serial.print(numRot);

Serial.print("\t");

Serial.println(rotTime);

if(stateRot == 0 && sensorValues[0] < th_SENSORS){

timeNow = micros();

rotTime = timeNow - timeOld;

timeOld = timeNow;

stateRot = 1;

numRot++;

}

if(stateRot == 1 && sensorValues[0] > th_SENSORS){

stateRot = 0;

}

if(stateDiv == 1 && micros() - timeOld > rotTime / Div * (numDiv)){

stateDiv = 0;

}

if(stateDiv == 0 && micros() - timeOld < rotTime / Div * (numDiv + 1)){

stateDiv = 1;

stripH.clear();

stripV.clear();

for(int i=0;i<NUMPIXELS; i++){

numDiv2 = numDiv+1;

if(numDiv2 >= Div) numDiv2 -= Div;

if(pic == 1){

stripH.setPixelColor(i, rock[numDiv2][i*2]);

stripV.setPixelColor(i, rock[numDiv][i*2+1]);

}else{

stripH.setPixelColor(i, rena[numDiv2][i*2]);

stripV.setPixelColor(i, rena[numDiv][i*2+1]);

}

stripH.show();

stripV.show();

numDiv++;

if(numDiv >= Div ) numDiv = 0;

}

LEDテープ Dotstarを2列使用しているのでSPIを2個出力しています。
　stripH：DATA-GPIO13 、CLK-GPIO14
　stripV：DATA-GPIO23 、CLK-GPIO18

フォトリフレクタ QTR-1Aで1周する時間を測定して表示する発光パターンを切り替えています。1周を100分割して画像を表示します。

ヴァーチャルピンV0の値を受信して表示する画像の配列を切り替えます。配列はgraphics.hファイルに記載しています。

57(LED数) × 100(1周の分割数)の配列を2画像分(rock[], rena [])記載しています。
画像配列の生成方法は次の節で説明します。

#define NUMPIXELS2 57
#define Div 100

const uint32_t rock [Div][NUMPIXELS2] = {
  //データ省略
};


const uint32_t rena [Div][NUMPIXELS2] = {
 //データ省略
};

#define NUMPIXELS2 57

#define Div 100

const uint32_t rock [Div][NUMPIXELS2] = {

//データ省略

};

const uint32_t rena [Div][NUMPIXELS2] = {

//データ省略

};

表示グラフィックデータ作成手法

Pythonで表示データ生成プログラムをこしらえました。画像処理ライブラリのopenCVとPillowを利用しています。

表示したい画像を取り込んで縮小して極座標変換してLEDの数 (29+28 = 57) ×１周の分割数 (100)の色コードの配列を生成します。確認用に変換後の画像も出力します。

全体の輝度 (Bright)をパーセンテージで指定できるようにしました。

中心LEDの輝度を端のLEDに対するパーセンテージ (Led0Bright )で指定できるようにして、端から中心に徐々にLEDの輝度を下げれるようにしました。
これによって中心が異常に明るくなることを避けれます。

import cv2
import math
from PIL import Image

NUMPIXELS2 = 57 #LEDの数
Div = 100 #１周の分割数
Bright = 30 #輝度
Led0Bright = 10 #中心LEDの輝度 [%]

#画像データ読み込み
imgOrgin = cv2.imread('test.jpg')

#画像サイズ取得
#参考：https://note.nkmk.me/python-opencv-pillow-image-size/
h, w, _ = imgOrgin.shape
print('widthOrgin: ', w)
print('heightOrgin:', h)

#画像縮小
#参考：https://www.tech-tech.xyz/opecv_resize.html
imgRedu = cv2.resize(imgOrgin,(math.floor((NUMPIXELS2 * 2 -1)/h *w), NUMPIXELS2 * 2 -1))
cv2.imwrite('img-resize.jpg',imgRedu)

#縮小画像中心座標
h2, w2, _ = imgRedu.shape
print('widthRedu: ', w2)
print('heightRedu:', h2)
wC = math.floor(w2 / 2)
hC = math.floor(h2 / 2)
print('widthCenter: ', wC)
print('heightCenter:', hC)

#極座標変換画像準備
imgPolar = Image.new('RGB', (NUMPIXELS2, Div))


#極座標変換
file = open('PolarConv.txt', 'w')

for j in range(0, Div):
    file.write('{')
    for i in range(0, hC+1):
        #座標色取得
        #参考：http://peaceandhilightandpython.hatenablog.com/entry/2016/01/03/151320
        rP = int(imgRedu[hC + math.ceil(i * math.cos(2*math.pi/Div*j)),
                     wC - math.ceil(i * math.sin(2*math.pi/Div*j)), 2]
                 * ((100 - Led0Bright) / NUMPIXELS2 * i + Led0Bright) / 100 * Bright /100)
        gP = int(imgRedu[hC + math.ceil(i * math.cos(2*math.pi/Div*j)),
                     wC - math.ceil(i * math.sin(2*math.pi/Div*j)), 1]
                 * ((100 - Led0Bright) / NUMPIXELS2 * i + Led0Bright) / 100 * Bright /100)
        bP = int(imgRedu[hC + math.ceil(i * math.cos(2*math.pi/Div*j)),
                     wC - math.ceil(i * math.sin(2*math.pi/Div*j)), 0]
                 * ((100 - Led0Bright) / NUMPIXELS2 * i + Led0Bright) / 100 * Bright /100)
        
        file.write('0x%02X%02X%02X' % (rP,gP,bP))
        
        if i == hC:
            file.write('},\n')
        else:
            file.write(', ')
            
        imgPolar.putpixel((i,j), (rP, gP, bP))
    
file.close()

#変換画像保存
#参考：https://qiita.com/uosansatox/items/4fa34e1d8d95d8783536
imgPolar.save('PolarConv.jpg')

import cv2

import math

from PIL import Image

NUMPIXELS2 = 57 #LEDの数

Div = 100 #１周の分割数

Bright = 30 #輝度

Led0Bright = 10 #中心LEDの輝度 [%]

#画像データ読み込み

imgOrgin = cv2.imread('test.jpg')

#画像サイズ取得

#参考：https://note.nkmk.me/python-opencv-pillow-image-size/

h, w, _ = imgOrgin.shape

print('widthOrgin: ', w)

print('heightOrgin:', h)

#画像縮小

#参考：https://www.tech-tech.xyz/opecv_resize.html

imgRedu = cv2.resize(imgOrgin,(math.floor((NUMPIXELS2 * 2 -1)/h *w), NUMPIXELS2 * 2 -1))

cv2.imwrite('img-resize.jpg',imgRedu)

#縮小画像中心座標

h2, w2, _ = imgRedu.shape

print('widthRedu: ', w2)

print('heightRedu:', h2)

wC = math.floor(w2 / 2)

hC = math.floor(h2 / 2)

print('widthCenter: ', wC)

print('heightCenter:', hC)

#極座標変換画像準備

imgPolar = Image.new('RGB', (NUMPIXELS2, Div))

#極座標変換

file = open('PolarConv.txt', 'w')

for j in range(0, Div):

file.write('{')

for i in range(0, hC+1):

#座標色取得

#参考：http://peaceandhilightandpython.hatenablog.com/entry/2016/01/03/151320

rP = int(imgRedu[hC + math.ceil(i * math.cos(2*math.pi/Div*j)),

wC - math.ceil(i * math.sin(2*math.pi/Div*j)), 2]

* ((100 - Led0Bright) / NUMPIXELS2 * i + Led0Bright) / 100 * Bright /100)

gP = int(imgRedu[hC + math.ceil(i * math.cos(2*math.pi/Div*j)),

wC - math.ceil(i * math.sin(2*math.pi/Div*j)), 1]

* ((100 - Led0Bright) / NUMPIXELS2 * i + Led0Bright) / 100 * Bright /100)

bP = int(imgRedu[hC + math.ceil(i * math.cos(2*math.pi/Div*j)),

wC - math.ceil(i * math.sin(2*math.pi/Div*j)), 0]

* ((100 - Led0Bright) / NUMPIXELS2 * i + Led0Bright) / 100 * Bright /100)

file.write('0x%02X%02X%02X' % (rP,gP,bP))

if i == hC:

file.write('},\n')

else:

file.write(', ')

imgPolar.putpixel((i,j), (rP, gP, bP))

file.close()

#変換画像保存

#参考：https://qiita.com/uosansatox/items/4fa34e1d8d95d8783536

imgPolar.save('PolarConv.jpg')

元画像

変換画像

全体輝度 [%] Bright = 30
中心LEDの輝度 [%] Led0Bright = 10
サイズ 57×100ピクセル

生成された57×100の色データをgraphics.hにコピペします。

Blynk Bluetooth接続

BlynkアプリでBluetoothウィジェットをクリックします。

“Connect Bluetooth device”をクリックするとBluetoothデバイスの検索が始まり”Blynk”というデバイスが表示されますのでクリックして接続します。

接続ができましたらアプリを実行して、スライダでPOV表示画像を切り替えが可能となります。

製作の流れ

POV装置にESP32を適応するに際して、いろいろと紆余曲折ございましたので記載します。

割り込み

フォトリフレクタ QTR-1Aの出力で割り込みして回転速度検出したかったのですが、

attachInterrupt(digitalPinToInterrupt(itrPin), RotCount, FALLING );

1	attachInterrupt(digitalPinToInterrupt(itrPin), RotCount, FALLING );

がESP32ではうまく動きませんでした。

FALLINGモードなので入力ピンitrPinがLOWになると1度だけ割り込まれてRotCount()関数が呼び出されるはずなのですが、何度も割り込んでくるのです。。。

ちょっと原因不明。チャタリングとかではないはず。
　https://www.switchdoc.com/2018/04/esp32-tutorial-debouncing-a-button-press-using-interrupts/

まぁ割り込みなしでもLEDテープ1列(29セル)で250分割余裕だったので。。今後の課題とさせていただきます。

POVディスプレイ ESP32で実験。割り込みなしで割と余裕で1周250分割達成。さすが。
割り込みがうまく動かないようなのであきらめて、VSPI, HSPIの2個出しやデュアルコアによる高分解能化の可否引き続き調べていきます。　#実験 #ESP32 #Dotstar #人生 pic.twitter.com/VADxx7Kv9X

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月5日

ハードウェアSPI

今回のコードではSPIはソフトウェアSPIとして使用しています。

ESP32は複数のハードウェアSPIを搭載しておりArduinoでも2個(HSPI, VSPI)使用できます。ソフトウェアSPIよりハードウェアSPIのほうが一般的に高速です。

しかし、Dotstarライブラリで複数個のハードウェアSPIを使用できるようにするのはライブラリ改造が必要そうなので断念しました。。

マルチタスク

ESP32はArduino環境でもデュアルコアを使用することができます。以下の記事が非常に参考になります。
　Arduino – ESP32 のマルチタスク ( Dual Core ) を試す

私もデュアルコアに挑戦して CORE0でフォトリフレクタ回転検出、CORE1でLED発光処理させてみたのですが、うまくLEDが光りませんでした。

ESP32でマルチタスクでCORE0で回転検出、CORE1でLED発光試してみたがデュアルコアでDatstar LEDテープうまく光らせれなかった。。。無念。ちなみに動画は1周16分割でRGBY表示。#実験 #ESP32 #Dotstar #岐路 pic.twitter.com/FdRXjoPUYC

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月6日

これも根が深そうなので、今後の課題とさせてください。。。

2枚羽化

当初、1枚羽から2枚羽にして高分解能化を目指しておりました。

回転の際にそれぞれのLEDは少しずれて配置しているので、隙間なく絵が出るはずです。

さすがに1周140分割が限界。でも割り込み処理未使用、シングルスレッド、ソフトウェアSPI使用だから伸びしろ満載。#実験 #ESP32 #Dotstar #伸びしろですねぇ pic.twitter.com/1i4V4Jhp5O

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月6日

SPI2個出力にしたためか250分割→140分割くらいが限界でした。

細かくはなったけどもっと目の覚めるような変化がほしい。 pic.twitter.com/NjX9U4JLLY

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月6日

1枚羽より密集した絵が表示できましたが、半周差があるためかどうしても隙間感が出ていたので結局1枚羽で2列に修正しました。そしてマージンとって1周100分割としました。

追記

もろもろ解決

本ブログでの課題は以下で解決いたしました。是非ご覧ください。

ESP32でバーサライタ高分解能化

音楽

nana用モノラル変換の mix

2019年2月8日お母ちゃんコメントする

nanaにもトラックをアップしています😃

nana への音源アップロードは90秒以内のモノラルwavのみとなっています。

我が家では DAW は Propellerhead の Reason 10 を使用していますが、Reason では直接モノラルを書き出し出来ません。

なので通常のミックスで書き出してから ffmpeg でモノラル変換するのですが、2mix をそのままモノラルにすると凄い音質劣化が気になるときがあります。

トラックによってはそのままでも大丈夫なものもあるのですが、

例えばこれ

ひどい状態になるものもあります。

例えばこれ　ピアノが全然聞こえない。

なのでモノラル用にちょっと手直ししてから上げる事にしたのですが、モノラル用なんてやったことないですからねｗ　（しかしなんで今どきモノラルなんだろう？）

今の所、音質劣化をマシにするモノラル用ミックスで気をつけてることをざっくり

・PANを全部真ん中に戻す
・ビートの音量下げる
・低域少し抑える
・LoFi系：高域をカットしすぎない
・マスタリングのMS処理を切る

モノラルにするとビート以外の音が殆ど聞こえなくなったりするｗ
LoFi 好きだけど高域削ってると、モノラルだと異常にもっさり感じる。
しかもなんか遠くでなってるような感じだし・・
それこそ本当にただの音が悪い音源・・・

これってffmpegの方の処理も影響しているかわからないけど・・
とりあえず上記で調整すると、マシな感じにはなるのでちょこっと手直しするようにしています。

（モノラルにした時にマトモかそうでないかは、そもそものmixの良し悪しによるんだろうか？）

お父ちゃんのやつ！

電子工作

APA102C vs SK9822　－SPI入力フルカラーLEDセルの比較－

2019年2月5日お父ちゃん 4件のコメント

以前POVディスプレイ制作の際にDotstarというSPI信号入力のLEDテープを使ったのですが、高速動作に物凄く感動しました。

“キング・オブ・ダークネス” EVIL の魔法陣を自作

ただ、Dotstarって日本で購入しにくいんですよねぇ。。。私もAdafruitで高い送料払って輸入購入しました。

Dotstar LEDテープは APA102CというLEDセルが使用されています。ここではAPA102CとコンパチブルだといわれているSK9822というセルを使用したLEDを購入して比較してみましたのでご報告いたします。

比較したLEDテープ

いずれも144セル/1mピッチのLEDテープを使用しました。テープのピン配置も同じです。

APA102C (Dotstar)

2016年4月に購入

Adafruit DotStar Digital LED Strip - Black 144 LED/m - One Meter [BLACK] ID: 2241 - $74.95 : Adafruit Industries, Unique & fun DIY electronics and kits - www.adafruit.com

2021年11月現在 DotstarにはAPA102CではなくSK9822が搭載されているようです。

SK9822

テープLED フルカラーLED72個(高密度) 個別アドレス 5V 0.5m (SK9822) :Pololu-3091:朱雀技研工房ストア - 通販 - Yahoo!ショッピング - Yahoo!ショッピング

仕様比較

	APA102C	SK9822
発光リフレッシュレート	19.2 kHz	4.7 kHz
グローバル輝度制御方法	低周波数のPWMパターン( ~440 Hz)を重畳	電流制御
チップダイサイズ	SK9822のほうが小さい。セルの中を目視でも比較確認できる。

　
発光リフレッシュレートはSK9822のほうがかなり低いですが4.7ｋHzであれば、目視で気になるレベルではないと思います。

グローバル輝度とはLED全体の明るさを調整するパラメータです。AdafruitのライブラリですとsetBrightness()で調光するやつです。
APA102Cは低周波のPWMを重畳して輝度をコントロールするので輝度が低い時にチラチラしそうです。

一方、SK9822は供給電流を制御して輝度調整しています。電圧は不変なので3.5V以上であれば電圧降下による輝度や色への影響がないとのことです。これは素晴らしいですね！

制御チップのダイサイズはSK9822のほうが小さいです。プロセス次第ですが価格が低くなる余地ありそうですね。

参考

POVディスプレイによる比較

以前作成したPOVディスプレイ装置でLEDテープの比較を行いました。29個のLEDを使用しています。

APA102C (Dotstar )とSK9822の信号入力は共にSPIでプロトコルもコンパチなので同じライブラリで発光制御できました。

以下のAdafruitのDotstar用ライブラリを使用しています。
　https://github.com/adafruit/Adafruit_DotStar

APA102C　POV動作

POVディスプレイ動作
LEDセル：APA102C (Dotstar) pic.twitter.com/Exm6w6xppi

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月4日

SK9822　POV動作

POVディスプレイ動作
LEDセル：SK9822 pic.twitter.com/Qeb8ZcPAWh

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月4日

比較検証

動作を比較するとSK9822の発色、特に白色の出力がよくない結果となりました。上記の比較動画ではグローバル輝度は指定していないのでMax [setBrightness(255)]です。

SK9822の結果をよくよく見ると白出力の多いところで色がくすんでいるので、これは電源能力によるものでは。。。と思い、全白Max発光時の消費電流を比較してみました。

全白・輝度Max発光時の消費電流

５V供給、LED 29セルで比較しました。

APA102C ： 0.69 A
　
SK9822 ： 1.26 A

なんと2倍近く電流が違いました。。。

製作したPOVディスプレイ装置は回転部のLED制御マイコンへの電源供給をワイヤレスチャージモジュールを使用しているので電源がへたって色が出なかったのだと思います。一応最大 5V-1.2A出力のモジュールなのですが、一時側の電源が乾電池3本の4.5VなのでSK9822 Max発光は厳しいですね。。。

実際SK9822のほうが明るいんです。

SK9822　輝度低下 POV動作

グローバル輝度をsetBrightness(255)からsetBrightness(50)にして輝度下げました。

POVディスプレイ動作
LEDセル：SK9822
グローバル輝度低減 pic.twitter.com/fHfjbaBfnQ

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月4日

輝度調整で色ムラは改善しました 😀

結論

輝度調整して過電流での電源へたりに気をつければSK9822も使える！

もっと言うと強い電源で制御すればDotstarより明るい表示が可能になります。

ただPOVにおいて私は制作の楽さから回転部への電源供給のワイヤレスはやめたくないので、SK9822使用の際は輝度調整で対処ですね。

リフレッシュレートの差も目視では全くわからなかったので、国内で手に入りやすいSK9822を今後活用したいと思います 😆

追記

激安APA102 LEDテープ (2019/8/6)

Amazonで安いAPA102を見つけてしましました。144LED/1mでこの価格は安い。。。いつか使用報告できればと思います！

IoT

Alexa 画面付きデバイス向けスキル公開「カラーデコード」

2019年2月4日お父ちゃんコメントする

去年の2018年後半から画面付きのAmazon Echoが続々発売されて、Fire TVもAlexa対応になりましたね。

んでこの度、画面表示向けのAlexaスキルを作ってみたいと思い立ったのです。SpotもShowまだもってないんだけどね 🙄 。
　

スキル概要

今回つくったスキル「カラーデコード」は、16進数 6桁のカラーコードを言うと、画面にその色を表示するといういたってシンプルなスキルです。

でもふと口にしたカラーコードが色として目の前に現れるって素敵なことですよね。ファンタジーです。これまではカラーコードを言っても何も起きなかったのですから。

Alexa SDK for Node.js Ver2をつかってコーディングしてます。スキル作成の基本設定などは以下のブログの通りです。ご参照ください。

Alexaスキル公開「夏休みの友」

Alexa Developer Console

スキルの呼び出し名を設定

スキル名を「カラーデコード」としました。

インテントを追加

カラーコードが発話されると呼び出されるColorCodeインテントを作成します。

6桁のカラーコードを識別するために、{first} ~ {sixth}という6個のスロットを作りました。スロットタイプは以下のLIST_OF_NUMを作成して6つのスロットすべてに適用しました。

0～Fの16進数を検出します。

参考

6桁のカラーコード発話の認識として以下が大変参考になりました！

https://dev.classmethod.jp/cloud/4-digit-number-custom-slot/

Lambda Management Console

index.js

/* eslint-disable  func-names */
/* eslint-disable  no-console */

const Alexa = require('ask-sdk');

//起動時
const GetNewFactHandler = {
  canHandle(handlerInput) {
    const request = handlerInput.requestEnvelope.request;
    return request.type === 'LaunchRequest'
      || (request.type === 'IntentRequest'
        && request.intent.name === 'GetNewFactIntent');
  },
  handle(handlerInput) {
    return handlerInput.responseBuilder
      .speak('ようこそカラーデコードへ。ディスプレイ表示したいカラーコード６桁をおっしゃってください')
      .reprompt('確認したいカラーコード６桁をおっしゃってください')
      .withSimpleCard('カラー de コード', '発話例) \n　FF00FF など')
      .getResponse();
  },
};

//ヘルプ
const HelpHandler = {
  canHandle(handlerInput) {
    const request = handlerInput.requestEnvelope.request;
    return request.type === 'IntentRequest'
      && request.intent.name === 'AMAZON.HelpIntent';
  },
  handle(handlerInput) {
    return handlerInput.responseBuilder
      .speak('画面付きデバイス用のスキルです。６桁のカラーコードを言うと、その色を画面表示します。確認したいカラーコード６桁をおっしゃってください')
      .reprompt('確認したいカラーコード６桁をおっしゃってください')
      .getResponse();
  },
};

//カラーコードインテント
const ColorCodeHandler = {
  canHandle(handlerInput) {
    const request = handlerInput.requestEnvelope.request;
    return request.type === 'IntentRequest'
      && request.intent.name === 'ColorCode';
  },
  handle(handlerInput) {
    let value1 = handlerInput.requestEnvelope.request.intent.slots.first.resolutions.resolutionsPerAuthority[0].values[0].value.id;
    let value2 = handlerInput.requestEnvelope.request.intent.slots.second.resolutions.resolutionsPerAuthority[0].values[0].value.id;
    let value3 = handlerInput.requestEnvelope.request.intent.slots.third.resolutions.resolutionsPerAuthority[0].values[0].value.id;
    let value4 = handlerInput.requestEnvelope.request.intent.slots.fourth.resolutions.resolutionsPerAuthority[0].values[0].value.id;
    let value5 = handlerInput.requestEnvelope.request.intent.slots.fifth.resolutions.resolutionsPerAuthority[0].values[0].value.id;
    let value6 = handlerInput.requestEnvelope.request.intent.slots.sixth.resolutions.resolutionsPerAuthority[0].values[0].value.id;

    const colorCode = value1 + value2 + value3 + value4 + value5 + value6;
    
    
    const url = 'phpコードのあるサーバ/?code=' + colorCode;
    
    //ディスプレイ表示
    if (supportsDisplay(handlerInput) ) {
      var speechText = 'カラーコード、' + value1 + '、' + value2 + '、' + value3 + '、' + value4 + '、' + value5 + '、' + value6  + 'の色を表示しています。'
                        + '確認したいカラーコード６桁をおっしゃってください';
      const myImage = new Alexa.ImageHelper()
        .addImageInstance(url)
        .getImage();

      handlerInput.responseBuilder.addRenderTemplateDirective({
        type: 'BodyTemplate1',
        token: 'string',
        backButton: 'HIDDEN',
        backgroundImage: myImage,
        title: '#' + colorCode,
      });
      
      return handlerInput.responseBuilder
        .speak(speechText)
        .reprompt('確認したいカラーコード６桁をおっしゃってください')
        .getResponse();
    }else{
      speechText = 'カラーコードは' + value1 + '、' + value2 + '、' + value3 + '、' + value4 + '、' + value5 + '、' + value6  + 'ですが。画面の無いデバイスのため、色はお見せできません。'
                    + '申し訳ございません。彩りあるいち日を';
    
      return handlerInput.responseBuilder
        .speak(speechText)
        //.withSimpleCard('カラー de コード', 'カラーコードは')
        .getResponse();
    }
  },
};

//キャンセル・停止時
const ExitHandler = {
  canHandle(handlerInput) {
    const request = handlerInput.requestEnvelope.request;
    return request.type === 'IntentRequest'
      && (request.intent.name === 'AMAZON.CancelIntent'
        || request.intent.name === 'AMAZON.StopIntent');
  },
  handle(handlerInput) {
    return handlerInput.responseBuilder
      .speak('ありがとうございました。彩りあるいち日を')
      .withShouldEndSession(true) 
      .getResponse();
  },
};


const SessionEndedRequestHandler = {
  canHandle(handlerInput) {
    const request = handlerInput.requestEnvelope.request;
    return request.type === 'SessionEndedRequest';
  },
  handle(handlerInput) {
    console.log(`Session ended with reason: ${handlerInput.requestEnvelope.request.reason}`);

    return handlerInput.responseBuilder.getResponse();
  },
};

//エラー時
const ErrorHandler = {
  canHandle() {
    return true;
  },
  handle(handlerInput, error) {
    console.log(`Error handled: ${error.message}`);

    return handlerInput.responseBuilder
      .speak('申し訳ございません。正しいカラーコードが聞き取れませんでした。もう一度お願いします')
      .reprompt('確認したいカラーコード６桁をおっしゃってください')
      .getResponse();
  },
};

// スキルが画面付きデバイスで動作している時は true を返す。 
function supportsDisplay(handlerInput) {
  var hasDisplay =
    handlerInput.requestEnvelope.context &&
    handlerInput.requestEnvelope.context.System &&
    handlerInput.requestEnvelope.context.System.device &&
    handlerInput.requestEnvelope.context.System.device.supportedInterfaces &&
    handlerInput.requestEnvelope.context.System.device.supportedInterfaces.Display
  return hasDisplay;
}

const skillBuilder = Alexa.SkillBuilders.standard();

exports.handler = skillBuilder
  .addRequestHandlers(
    GetNewFactHandler,
    ColorCodeHandler,
    HelpHandler,
    ExitHandler,
    SessionEndedRequestHandler
  )
  .addErrorHandlers(ErrorHandler)
  .lambda();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

/* eslint-disable func-names */

/* eslint-disable no-console */

const Alexa = require('ask-sdk');

//起動時

const GetNewFactHandler = {

canHandle(handlerInput) {

const request = handlerInput.requestEnvelope.request;

return request.type === 'LaunchRequest'

|| (request.type === 'IntentRequest'

&& request.intent.name === 'GetNewFactIntent');

handle(handlerInput) {

return handlerInput.responseBuilder

.speak('ようこそカラーデコードへ。ディスプレイ表示したいカラーコード６桁をおっしゃってください')

.reprompt('確認したいカラーコード６桁をおっしゃってください')

.withSimpleCard('カラー de コード', '発話例) \n　FF00FF など')

.getResponse();

};

//ヘルプ

const HelpHandler = {

canHandle(handlerInput) {

const request = handlerInput.requestEnvelope.request;

return request.type === 'IntentRequest'

&& request.intent.name === 'AMAZON.HelpIntent';

handle(handlerInput) {

return handlerInput.responseBuilder

.speak('画面付きデバイス用のスキルです。６桁のカラーコードを言うと、その色を画面表示します。確認したいカラーコード６桁をおっしゃってください')

.reprompt('確認したいカラーコード６桁をおっしゃってください')

.getResponse();

};

//カラーコードインテント

const ColorCodeHandler = {

canHandle(handlerInput) {

const request = handlerInput.requestEnvelope.request;

return request.type === 'IntentRequest'

&& request.intent.name === 'ColorCode';

handle(handlerInput) {

let value1 = handlerInput.requestEnvelope.request.intent.slots.first.resolutions.resolutionsPerAuthority[0].values[0].value.id;

let value2 = handlerInput.requestEnvelope.request.intent.slots.second.resolutions.resolutionsPerAuthority[0].values[0].value.id;

let value3 = handlerInput.requestEnvelope.request.intent.slots.third.resolutions.resolutionsPerAuthority[0].values[0].value.id;

let value4 = handlerInput.requestEnvelope.request.intent.slots.fourth.resolutions.resolutionsPerAuthority[0].values[0].value.id;

let value5 = handlerInput.requestEnvelope.request.intent.slots.fifth.resolutions.resolutionsPerAuthority[0].values[0].value.id;

let value6 = handlerInput.requestEnvelope.request.intent.slots.sixth.resolutions.resolutionsPerAuthority[0].values[0].value.id;

const colorCode = value1 + value2 + value3 + value4 + value5 + value6;

const url = 'phpコードのあるサーバ/?code=' + colorCode;

//ディスプレイ表示

if (supportsDisplay(handlerInput) ) {

var speechText = 'カラーコード、' + value1 + '、' + value2 + '、' + value3 + '、' + value4 + '、' + value5 + '、' + value6 + 'の色を表示しています。'

+ '確認したいカラーコード６桁をおっしゃってください';

const myImage = new Alexa.ImageHelper()

.addImageInstance(url)

.getImage();

handlerInput.responseBuilder.addRenderTemplateDirective({

type: 'BodyTemplate1',

token: 'string',

backButton: 'HIDDEN',

backgroundImage: myImage,

title: '#' + colorCode,

});

return handlerInput.responseBuilder

.speak(speechText)

.reprompt('確認したいカラーコード６桁をおっしゃってください')

.getResponse();

}else{

speechText = 'カラーコードは' + value1 + '、' + value2 + '、' + value3 + '、' + value4 + '、' + value5 + '、' + value6 + 'ですが。画面の無いデバイスのため、色はお見せできません。'

+ '申し訳ございません。彩りあるいち日を';

return handlerInput.responseBuilder

.speak(speechText)

//.withSimpleCard('カラー de コード', 'カラーコードは')

.getResponse();

}

};

//キャンセル・停止時

const ExitHandler = {

canHandle(handlerInput) {

const request = handlerInput.requestEnvelope.request;

return request.type === 'IntentRequest'

&& (request.intent.name === 'AMAZON.CancelIntent'

|| request.intent.name === 'AMAZON.StopIntent');

handle(handlerInput) {

return handlerInput.responseBuilder

.speak('ありがとうございました。彩りあるいち日を')

.withShouldEndSession(true)

.getResponse();

};

const SessionEndedRequestHandler = {

canHandle(handlerInput) {

const request = handlerInput.requestEnvelope.request;

return request.type === 'SessionEndedRequest';

handle(handlerInput) {

console.log(`Session ended with reason: ${handlerInput.requestEnvelope.request.reason}`);

return handlerInput.responseBuilder.getResponse();

};

//エラー時

const ErrorHandler = {

canHandle() {

return true;

handle(handlerInput, error) {

console.log(`Error handled: ${error.message}`);

return handlerInput.responseBuilder

.speak('申し訳ございません。正しいカラーコードが聞き取れませんでした。もう一度お願いします')

.reprompt('確認したいカラーコード６桁をおっしゃってください')

.getResponse();

};

// スキルが画面付きデバイスで動作している時は true を返す。

function supportsDisplay(handlerInput) {

var hasDisplay =

handlerInput.requestEnvelope.context &&

handlerInput.requestEnvelope.context.System &&

handlerInput.requestEnvelope.context.System.device &&

handlerInput.requestEnvelope.context.System.device.supportedInterfaces &&

handlerInput.requestEnvelope.context.System.device.supportedInterfaces.Display

return hasDisplay;

}

const skillBuilder = Alexa.SkillBuilders.standard();

exports.handler = skillBuilder

.addRequestHandlers(

GetNewFactHandler,

ColorCodeHandler,

HelpHandler,

ExitHandler,

SessionEndedRequestHandler

)

.addErrorHandlers(ErrorHandler)

.lambda();

起動時のインテント、エラーやキャンセル、ヘルプのインテント発動時の動作をそれぞれ記載しています。

supportsDisplay()でスキルが画面付きデバイスで動作しているかを判断しています。
ColorCodeインテントでカラーコードを識別して、phpで動的に1ドットの対応する色のpng画像を生成して、画面付きデバイスであれば画面に表示させます。

スロットタイプLIST_OF_NUMでスロットIDを追加しておいたのでカラーコードの文字列生成を容易にできました。

スキル停止時に画面表示を明確に切らないとダメですよと申請時にリジェクトされました。全然修正がわからなくてググりにググって以下を見つけました。
　画面表示付きのskillを作成したが、対話が終了しても画面が消えない

こちらを参考にindex.jsの101行に .withShouldEndSession(true) を追加で、スキル停止時に画面表示も止まるようになりました。

index.php

1ドットの色画像を生成するphpコードです。

<?php
// カラーコード
$colorcode = $_GET['code'];
$red = hexdec(substr($colorcode, 0, 2));
$green = hexdec(substr($colorcode, 2, 2));
$blue = hexdec(substr($colorcode, 4, 2));

 //ヘッダーの設定
header("Content-type: image/png");

//指定した大きさの黒画像を生成
$img = imagecreatetruecolor(1, 1);
//背景色の指定
$background_color = imagecolorallocate($img, $red, $green, $blue);
//画像を背景色で塗る
imagefilledrectangle($img, 0, 0, 300, 300, $background_color);

//画像の出力
imagepng($img);

//画像の消去（メモリの解放）
imagedestroy($img);
?>

<?php

// カラーコード

$colorcode = $_GET['code'];

$red = hexdec(substr($colorcode, 0, 2));

$green = hexdec(substr($colorcode, 2, 2));

$blue = hexdec(substr($colorcode, 4, 2));

//ヘッダーの設定

header("Content-type: image/png");

//指定した大きさの黒画像を生成

$img = imagecreatetruecolor(1, 1);

//背景色の指定

$background_color = imagecolorallocate($img, $red, $green, $blue);

//画像を背景色で塗る

imagefilledrectangle($img, 0, 0, 300, 300, $background_color);

//画像の出力

imagepng($img);

//画像の消去（メモリの解放）

imagedestroy($img);

参考

スキル動作検証

スキルの動作検証はAlexa DeveloperコンソールのAlexaシミュレータや

　
Fire TVで行いました。

Alexaスキル「カラーデコード」
こんな感じで動作します。Echo Spot持ってないのでFire TVで確認。 pic.twitter.com/R2Hp9MtjCT

— HomeMadeGarbage (@H0meMadeGarbage) 2019年2月4日

工作・ハンドメイド

フリース生地でイルカのきぐるみパジャマ作成

2019年2月2日お母ちゃんコメントする

作ってみた！

前に着ていた猿の気ぐるみを見よう見まねで作ってみた。
作り方が適当すぎだけどざっくり書いておこう。

生地について

手芸店で購入した、フリース生地一着分という切り売りされていたもので、お値段 ¥1,500 位。
折っているので分かりづらいけどこんな感じの布。

サイズは多分1.1m（もしくは1m）✕1.5m だと思う。
長男くんの身長は110cm弱。

生地を切る

生地を三等分にして、2/3 を胴体部分、1/3を腕とフードに。

（このとき胴体部分を測ると1.1m✕1mだったので多分元は1.1ｍ✕1.5mだったのかと）
腕・フード部分は更に３等分にして使用。

ミシンで縫う

胴体を作る

胴体の上下を縫う

ゴムを入れたいので 2~3cm内側に折り曲げながら縫う。
縫い目の種類はよくわからないので全て直線縫い。
フリース生地はふわふわだし伸びるので、あまり速度は上げずゆっくり目に縫ったほうが良い様子。

半分に折って足の部分を切る

切った胴体部分を半分に折り２枚合わせた状態で、足の部分になる方をたぶん1/4 位切り目を入れる。
足元はゴムを入れるので、ズドンと筒状にして折り目の部分だけ切るのでも良いかと思っていたけど、少し丸みを持たせたかったので若干絞る感じで緩く曲線的に両側を切る。

開いたらこんな感じの形。

この絵よりも実際はもっと足部分は短くてカーブも緩かったと思う。

裏返して背中部分を縫う

裏返して二つ折りにし、背中部分を縫い合わせる。

最初間違えて足まで全部縫ってしまった 💦
ミシンで縫った糸の取り方がわからず、縫った部分を切って対処。
大きめに切っておいて良かった😓

足の内側を縫い合わせる

足の内側が開いている状態になっているので、裏側からその部分を縫い合わせる。

もこもこしているので縫いづらいし、縫うのが大変だった。

ひとまずこれで胴体がほぼ出来た

腕を作る

生地の1/3 を三等分にしたものを２つ折りにして、切って縫う

胴体に腕を通す穴を開ける

胴体と腕を裏側から縫い合わせる

（これが難しかった。無理やり強行した感じだけどちゃんとした縫い方があるんだと思う・・・）

フードを付ける

両端を内側に折り曲げて縫う（フードの縁）
縫い目を表にして二つ折りにし上を縫い合わせる（フードの上）

裏側から胴体に縫い合わせる

仕上げ

ゴムを通す

首、腕、足にゴムを通して完成！

余り布でイルカの顔と背びれをつけた

更に顔もつけてみた。
あまり布を縫い合わせて手縫いでくっつけたけど一番難しかったかも。
余っていたボタンを黒く塗ってレジンでコーティングして目に。

背びれは背中にあったら寝るとき邪魔そうなのでお尻部分に。
ただのしっぽ。
微妙にいるかっぽいかどうか謎な仕上がりにｗ

お母ちゃんが長男くんにイルカ着ぐるみを作ってくれた！カワイイ♪#自作 #カナリヤ #裁縫 pic.twitter.com/5zMo506Oyh

— HomeMadeGarbage (@H0meMadeGarbage) 2019年1月27日

感想

初心者が型紙もなしで適当に作った割には上出来かなと😅
思ったより大変だったし疲れたけど服嫌いの長男君も気に入ってくれたみたいで良かった🐬

ミシンはこちら

ジャノメミシンコンピュータミシン JN-31/JN-51/DN-11 本体
価格：24800円（税込、送料無料) (2018/9/28時点)

楽天で購入

ミシンは小学校の家庭科授業以来というレベルだったけど初心者にとっても使いやすくて良いと思う。

シーツを作った話

過去にお父ちゃんがシーツを作った時の記事

REALFABRIC オリジナル布でコットカバー自作

キーケース製作

革裁断

ジャンパーホックとキーホルダー取付

キーホルダー取付

ジャンパーホック取付

エッジ手縫い

菱目打で穴あけ

糸手縫い

縫い方

縫い仕上がり

縫い終わり

キーケース縫い仕上がり

エッジ処理

完成品

8:30 札幌駅集合 バス出発

10:00 月形温泉到着

10:15 釣り小屋へ移動

ワカサギ釣りの方法

10:20 釣り開始

12:00 釣り終了 釣果発表

ワカサギ天ぷら試食

12:00-14:00 自由時間

15:00 札幌駅着

動作

構成

部品

POV装置

Blynk設定

Arduino IDEコード

表示グラフィックデータ作成手法

Blynk Bluetooth接続

製作の流れ

割り込み

ハードウェアSPI

マルチタスク

2枚羽化

追記

もろもろ解決

比較したLEDテープ

APA102C (Dotstar)

SK9822

仕様比較

参考

POVディスプレイによる比較

APA102C POV動作

SK9822 POV動作

比較検証

全白・輝度Max発光時の消費電流

SK9822 輝度低下 POV動作

結論

追記

激安APA102 LEDテープ (2019/8/6)

スキル概要<img loading="lazy" src="https://ir-jp.amazon-adsystem.com/e/ir?t=homemadegarba-22&amp;language=ja_JP&amp;l=li2&amp;o=9&amp;a=B07NCSRFP7" alt="" width="1" height="1" border="0">

Alexa Developer Console

スキルの呼び出し名を設定

インテントを追加

参考

Lambda Management Console

index.js

index.php

参考

スキル動作検証

生地について

生地を切る

ミシンで縫う

胴体を作る

胴体の上下を縫う

半分に折って足の部分を切る

裏返して背中部分を縫う

足の内側を縫い合わせる

腕を作る

フードを付ける

仕上げ

ゴムを通す

余り布でイルカの顔と背びれをつけた

感想

ミシンはこちら

シーツを作った話

ホームメードガービッジ 家族４人の手作りおもしろブログ。電子工作、Arduino、LED、Raspberry Pi、Web、プロレス、音楽など。

8:30 札幌駅集合バス出発

12:00 釣り終了釣果発表

APA102C　POV動作

SK9822　POV動作

SK9822　輝度低下 POV動作

スキル概要

ホームメードガービッジ家族４人の手作りおもしろブログ。電子工作、Arduino、LED、Raspberry Pi、Web、プロレス、音楽など。