takashiskiのブログ

覚書の殴り書き

fitbit ionicを入手したので早速Clock Faceを作ってみた

Fitbit Developers and Users Conference 2017 Autumn に参加して先行販売のfitbit ionicを手に入れたので早速Clock Faceを作ってみたという簡易記録。

f:id:takashiski:20171115092428p:plain

遍歴としては、pebble一年くらい、その後pebble2を一年くらい使ってたけど、そういえばwatchfaceはサンプル見たくらいで作ったことはありませんでした。

簡単に制作してみた所感は、SVGとJavaScriptで遊んだことがある人ならすぐできるんじゃないかなー、です。SVGの要素名と動かすための属性名がバラバラで非常にわかりにくいので、遊んだことがない人は「なんで反映されないんじゃい!ちゃんと指定してるだろ!!!」と難儀するんじゃないかなーと思います。d3js...うっあたまが...

最初にやろうとしたことと実際にできたもの

パイチャートを積んだような、円がだんだんかけていく or 満ちていく文字盤がかっこいい気がしたので作ろうとしました。 最終的には、リング半分が回っていくものになりました。

とりあえず知ってる範囲で手早く組み上げたかったのでできないところは仕様を変えて解決しました。 fitbit studioではcircleに背景色と同じ色のrectを乗せることで円を削ることにしました。 そのため、内側に重ねた四角形の角が見えてしまうという問題がありました。 「内接正方形の内接円にすればいいんじゃない?」と思いつき、svgの属性指定間違いで悩みながらなんとか作り上げました。 所要時間は、2時間以上3時間未満くらいです。サンプルがどこにあるか探しながら、どんなの作るかなーどんなの作れるかなーというところからなのでこんなものじゃないでしょうか。

嵌ったり困ったりした点

  • スマートフォンが接続されない
    • ionicだけ接続しても転送できた
    • 最終的に一度もスマートフォンとfitbit studioが接続できていない。なんでだろ。
  • 主にcssに予想以上に制限がある
    • borderが使えないから外枠をつけるためには要素二重重ね
      • border-radiusも当然使えないので角丸不可
    • サイズ指定はピクセルか%だが、ピクセルの場合は単位を付けない。つけてrunするとconsoleにinvalid valueと表示される
  • テキスト中に改行入れたら点線豆腐になった
  • インテリセンスがないっぽいので文字列を属性に与える必要があるところで誤字で悩まされる。transfromになってたりとか。
  • svgの移動系の属性で悩まされる。x,y,cx,cy,transformなど

最後に

そういえばmaskなんて要素があった気がするので、mask使えばパイチャート風Clock Faceいけるんじゃないか?とこの記事書きながら思いつきました。 まず対応しているか確認します。border-radius使えない問題に帰着しそうな気もします。

Webフロントエンドいじれる人にとっては、かなり手軽に文字盤作れるのではないでしょうか。

国内正式販売は1月ですがそのうちエミュレータでるのでとりあえずfitbitのdevelopperアカウントとるのがいいかもしれません。

キーキャップへの昇華印刷メモ

以下の記事をみて「へーできるんだー」と思ったら試せる機会ができたのでメモ。

kou014.hateblo.jp

 

昇華印刷は、昇華転写用紙に印刷した画像を、熱と圧力を使ってポリエステルに転写する技術である。

google検索候補上位の昇華印刷に関する記述においては「ポリエステルにしか転写できない」とあるが、何故かPBTは転写ができる。化学は詳しくないのでよくわからない。

PBTでないキーボードのキーキャップにも転写はできなくもない。ただし、発色がよくなる温度が190度くらいだそうなので、その温度+α以下で溶けるような素材だと溶けて変形したり、紙と一体化する。

 

おおまかな手順は以下のとおりである。

  1. 画像を用意する
  2. 画像を左右反転させる
  3. カラープロファイルを普通紙向けインクから昇華転写用紙向けインクのものに変更する
  4. 転写用紙に印刷する
  5. 転写用紙から転写する画像を切り出す
  6. 転写したい素材に印刷面が向くように切り出した転写用紙を置く
  7. 転写用紙を素材に固定する
  8. 素材表面に凹凸があれば、スペーサーを作成し凹凸を可能な限り平坦にする
  9. 転写部に対して、30秒程度、190度の熱源を押し付ける
  10. 熱源を離し、冷ます
  11. 転写用紙を剥がして発色を確認する

 

2,3,4は外注する場合は非反転画像を渡せば先方が何とかしてくれるはず。カラープロファイルは、印刷の宿命である。ディスプレイの発色とも家庭用インクジェットプリンタの発色とも異なるのでカラー印刷をする場合は根気強く調整するしかない。黒系のみであれば関係ない。

めんどくさいのは1と5以降で、特に8,9である。

1の用意する画像に関しては、傾きや位置ずれを防止するために、トンボを付ける必要がある。また、後述の理由により中央より直径8mm程度のみに印刷することが望ましい。

8,9に関しては「転写するためには圧力をかけ、転写用紙と素材を密着させ、一定時間加熱する」という性質によるめんどくささである。一般的なキーキャップの表面は、すり鉢状になっている。つまり、印刷面の高さが一定でない場合に密着しない/十分に圧力がかからない部分が出現し、品質がばらつくということを解決しなくてはならない、ということである。手元にあったキーキャップは角が一番高く、次に辺の中央、そして中央が一番低いくぼんだ形状になっている。角と辺の中央の間で0.5mm, 角と中央の間で1mmほど高さが異なる。

解決策として、耐熱シリコンシートを差し込むことがある。ここで次の問題が発生する。シリコンシートの反発に負けない程度に力を加えなければならないが、専用器具出ない場合は均一に圧力を十分にかけることができない、ということである。 

手持ちアイロンの場合はキーキャップ一個だけに対して加圧加熱しようとした場合に傾いて力を加えている場合がある。この場合、むらが発生する。かといって複数同時に実施したとしても、どちらか一方に偏る可能性がある。

今回厚さ約1mmのスペーサーを利用した。スペーサーの形状と圧力のバランス次第で中央/中央の周辺/角付近という三段階の転写むらが発生した。時間は190度で30秒から1分程度で十分である。加熱時間が長いと、インクが出過ぎてぼやける恐れがある。

私が使ったのは以下のアイロンである。非接触温度計で測温したところ、最高温度に設定することで190度前後になることが確認できた。

 

パナソニック コードリール式スチームアイロン   シルバー NI-R36-S

パナソニック コードリール式スチームアイロン シルバー NI-R36-S

 

 

 

各家庭で実施される場合は、転写むらの確認をするためのテストパターンの印刷と無地キーキャップを多く用意することを推奨したい。

 

書いたほうがよさそうなこと思い出したので加筆した。

 

 

あ、あとUVプリントが最強。冶具と印刷パターンを適切に作れば、分解することなくそのまま表面全体に印刷可能 。ただしプリンターが300万くらいする。

 

技術書典3にメカざざむしとして出展していました。(今後の予定・購入者向け告知など)

出展していました。 ぷらはの既刊「しろくまコード vol.3(micropythonで遊ぶ)」とたかしすきー新刊「予定は未定。(Addressable LEDでInfinity LED mirrorを作る)」、あと一人月Tシャツを販売していました。

techbookfest.org

写真撮るのを忘れていてこの写真しかないです。右上と左上の丸と四角のやつは、厚さ2cmくらいで、奥にぶち抜いてあるわけではないです。これがInifinity LED mirrorなんて呼ばれてるブツです。真ん中は参考までに作ったライフゲームです。

f:id:takashiski:20171023085922j:plainf:id:takashiski:20171023090845j:plain

全然関連のない話の詰め合わせ予定だったのでこのタイトルだったのですが、最終的にLED&Infinity LED mirrorだけに絞ってしまったことと、表紙に本文に関する内容を入れなかったこと、POPの内容が不親切であったことが原因で手に取ってもらうことができなかったと考えています。 具体的には、「POPを見てわかる人には必要ない。構造が簡単なので作り方が大よそ想像がつくし、操作に関する説明は不要」「POPを見てわからない人には、"Addressable LEDの何がうれしいか"がまったくわからない(本来のターゲットは彼ら)」という、非常にちぐはぐな状態であったことが大きいです。

さらに執筆時には感じなかったのですが、当日製本されたものを読み返したところ本来のターゲットである層に対しては非常に不親切な内容になっていると感じました。立ち読みした人が購入に至らなかった原因かと思います。次回は余裕もって事前にレビュー依頼をします。

以下は「予定は未定。」の、主に購入者向けの今後の予定告知です。

  1. 弊サークル新刊「予定は未定。(Addressable LEDでInfinity LED mirrorを作る)」を購入いただいた方は、@takashiski までDMで表紙の画像を送っていただけましたらPDF版をお送りいたします。EPUBもいけます。写真がフルカラーになります。 2. 後から読み返したところ、内容を絞りすぎた&本当に必要な情報が漏れていた印象があるので、構成変更・書き直しをして再度出版します(予定)。その際には、今回の「予定は未定。」購入者にはなんらかの方法でPDFなどの配布を考えております。
  2. LEDにかんして、「こういう話を書いて欲しい」「ここがわかりにくかったから説明加筆してほしい/図を追加して欲しい」などご助言いただけますと助かります。

「Infinity LED mirrorのストラップ」「ライフゲーム」「光る靴」などの制作方法をまとめたいと思います。

あと、日高さんがコミケのときに技術書系のブースを回っておられ、その際に「一人月シャツは技術書典なら売れる」的な雑談をしました。ターゲット層考えると実際そうだろうなーと思ったのですが、見事に売れませんでした。増刷しなくてよかった...

今後のイベント参加予定

私たかしすきーは、2017/11/12(日)のデジゲー博に出展します。Addressable LEDを使ったゲームの展示をする予定です。大体Line wobblerの劣化コピーになる予定です。音もFXもあそこまでクオリティだせない。

B-11b「たかしや」です。ご興味あればよろしくお願いいたします。

splatoon2用ドット打ち機(atmega32u4)

あらまし

splatoon2(以下イカ)の「投稿」でドット絵描くの面倒だからコントローラ作って自動的に打ち込ませようぜ!って動きがあるようで、試してみた。

先行記事で存在を知ったのだが、先行記事では「オリジナルリポジトリを勘違いしている」「必要な依存関係に関して記載がない」など、情報の間違いや抜けが見られる。何より非常に高価な上に入手がしにくいteensy++2.0を選択している。 ArduinoUNOは入手性がよいが、3000-3500円程度で安価ではない。また、廉価品ではCH340が搭載されていることが多いため、動作するかがわからない。

手元のpro microで行けそうだったので動作確認し、どうせ自分用にまとめるつもりだったからまとめた。

今回の動作OSはWindows10で、bash on windowsを使う。 マイコンボードはatmega32u4を積んだpro microを使う。

先行記事にあるteensy++2.0やArduinoUNOは使わないので注意されたい。 特にArduinoUNOは下記手順では動かない。 teensy++2.0はもしかしたら動くかもしれないが、金銭的余裕がないので検証する予定はない。

先行記事

esprog.hatenablog.com

qiita.com

qiita.com

必要なハードウェア・予算

以下のものが必要である。

  • AVRマイコンボード
  • マイコンボードのコネクタに対応したUSBケーブル(mini, microなど)
  • [オプション] USB typeA メス - USB typeC オスの変換アダプタ
  • [オプション] ブザー

AVRマイコンボード

発案者のリポジトリのREADME.mdには以下の三つのマイコンボードが書かれていて、このプログラムはいずれもが使える。

  • teensy++2.0(at90usb1286)
  • Arduino UNO(atmega16u2)
  • Arduino micro(atmega32u4)

teensy++2.0とArduino UNOに関しては先行記事で紹介されている。

この記事では、atmega32u4を積んだ、「pro micro」というマイコンボードを使う。 これはArduino microやArduino Leonardoと同等の機能を備えたマイコンボードである pro microは国内入手の安値はおそらくaitendoである。しかし、秋葉原が近所にない場合は入手コストが大きい。

www.aitendo.com

amazonが最速で届いてかつぼちぼちの価格であるので購入先として適当である。 amazonから購入するときに気を付ける点は、いくら安くともprimeマークがついていないものは中国から発送されて受け取るまでにおおよそ2週間以上かかるということだ。 以下はprimeのうち最安値で出品されていたものである(9/12調べ)。

余談だが、独自ブランドとして出品されていても、写真で明らかな違いがないものはシルク程度の独自要素すらあった試しがないので安いものを買えばよいと思う。

USBケーブル

大体mini USBかmicro USBなので、マイコンボードの端子を確認して、持っていなかったら買おう。

iBUFFALO USB2.0ケーブル (A to miniB) スリムタイプ ブラック 1m BSUAMNSM210BK

iBUFFALO USB2.0ケーブル (A to miniB) スリムタイプ ブラック 1m BSUAMNSM210BK

基板上に実装されている micro USBコネクタは、抜き差し方向以外に力を加えると簡単にもげてしまうので、特に抜き差しするときはしっかりコネクタを抑えて抜き差ししてほしい。 以下のような先端がとれて磁気とくっつくようなケーブルを使うと、コネクタに負担がかからなくてよいかもしれない。ただし、たまにUSBデバイスの認識を失敗する。

[オプション] USB typeA メス-USB typeC オスの変換アダプタ

先行記事では何故か「本体のUSBポートに刺すので必須!」と書かれている。 しかし、switchのドックのUSBポートに刺せば認識される。 家でしか使わないならば、買わなくても問題ないのではないかと思う。

[オプション] ブザー

マイコンボードに接続することで、終わったら音で教えてくれるらしい(未確認)。

ダウンロード/インストールしておくもの

Switch-Fightstick(のイカ特化のforkプロジェクト)

shinyquagsire23 氏による Switch-Fightsticksplatoon-2-printer ブランチをベースとしてイカのドット打ち専用に改造されたリポジトリ。 master ブランチはWiiU向けコントローラをSwitchで使うためのプロジェクトである。 フォーク元はWiiU向けの「Pokken Tournament Pro Pad」をSwitchで使うためのプログラムのようである。 完全に特化用途の別物なのに名前変えてないので非常に紛らわしい。

github.com

追記・修正[9/13]

EsProgram氏による先行記事の参照先を勘違いしていたので修正。

progmem 氏の リポジトリに splatoon-2-printer branchが存在したのでそちらをフォーク・修正していたよう。 ただし、フォーク元は更新が一月程度されていなく、また先行記事の通り参照先が滅茶苦茶になっている恐れがある。 一方 shinyquagsire23 によるリポジトリではマイコン名を変更する程度で動かすことができ、かつ描画速度の2倍の高速化がなされている。

以下はフォーク元リポジトリの splatoon-2-printer ブランチへの参照である。

github.com

LUFA

The Lightweight USB Framework for AVRs。 名前のまま、AVR向けの軽量USBフレームワーク。Switch-Fightstickが依存してる。 プロジェクト内の LUFAフォルダ を参照するので適当な場所に配置すること。Switch-Fightstickmakefile からはデフォルトで ../LUFA/LUFA/ を参照している。 このパスは、 Switch-Fightstick と同じ場所で git clone するか、解凍することで満たされる。

github.com

Arduino IDE

これがなんであるかの説明は、流石に不要かと思う。bash on windowsはシリアルポートを認識しないので、Powershellからマイコンへのプログラム書き込みをするために使用する。

Arduino - Software

bash on windows

powershell開いてbashって打って実行できたらOK。 だめだったらググってなんとかしていれて。

qiita.com

bash on windows上で入れるもの

AVRCのコンパイルのためにavr-gccが必要である。

画像のソースコード変換のためにpython2.Xおよびpillowが必要である。ただし、後述の一部行を変更することでpython3.Xでも動いた。

bash on windows上で以下のコマンド実行することで追加可能である。上記以外のパッケージは、上記パッケージの依存先である。 末尾のechoは全部終わった後にbeep音鳴らすコマンドなので必要に応じて削除していただきたい。

sudo apt-get install -y python-minimal
sudo apt-get install -y python-pip
sudo apt-get install -y zlib1g-dev
sudo apt-get install -y gcc-avr
sudo apt-get install -y avr-libc
pip install --upgrade pip
pip install pillow
echo -e '\a'

大まかな手順

  1. 320x120のpngまたはraw画像を用意する(mspaint, GIMPなど)
  2. 画像をソースコードに埋め込むためのツールを使って変換する(python2.X, bash on windows)
  3. makeコマンドでコンパイル・hexファイルを生成する(avr-gcc, bash on windows)
  4. avrdudeコマンドでマイコンへ書き込む(Arduino IDE, powershell)
  5. Switchに接続する

1. 画像の用意

320x120の画像を適当に用意すること。一応Switch-Fightstickにテストパターンが用意されている。

2. 画像をソースコードに変換する(bash on windows上)

bash on windows上で実行する。 raw画像の場合は bin2c.py , png画像の場合は png2c.py の引数に画像のパスを入れて実行する。

python bin2c.py your_raw_path
python png2c.py your_png_path

なお、python2.Xと指定されているが、python3.Xでも、以下の個所でエラーがでるだけなので、定数に置き換えれば動いた。

#変更前
for i in range(0, 320*120) / 8):
#変更後
for i in range(0, 4800):

3. makeコマンドでhexファイルを生成する(bash on windows上)

bash on windows上で実行する。 makeコマンドを叩く前に、makefile内に変更が必要なパラメータがいくつかあるので修正すること。

#MCU = at90usb1286 コメントアウトする
MCU = atmega32u4 #追加する

以下はLUFAをmakefileの場所に対して ../LUFA/LUFA 以外に置いた場合に変更する

#LUFA_PATH = ../LUFA/LUFA コメントアウトする
LUFA_PATH = your_LUFA_path #追加する

以上の2か所を変更した上で make をたたけば、 Joystick.hex が生成される。

4. 書き込む(powershell上)

Powershell上で実行するのでbash on windowsからは抜ける。 pro microは、リセットをかけると書き込みモードに切り替わる。 まず最初にデバイスマネージャを開き、pro microにはリセットボタンがついていないので、ボタンを接続するか、スルーホール/ピンに直接金属を触らせるなどしてresetとGNDを短絡させる。 次にデバイスマネージャーの「ポート(COMとLPT)」から「Arduino micro bootloader」の番号を調べる(COMX,Xは整数)。

確認出来たら、Joystick.hexがあるフォルダで、以下のコマンドを実行する。 コマンド中の -PCOMX のXをポート番号に置き換えること。

avrdude -c avrdude.conf -v -patmega32u4 -cavr109 -PCOMX -Uflash:w:Joystick.hex:i

書き込みモードに切り替わっていないと、COMポートが開けなかったとエラーがでる。 デフォルトのブートローダでは数秒で通常モードに切り替わってしまうようなので、リセットをかけてからコマンドを実行する必要がある。

一度avrdudeコマンドで書き換えたあとは、リセットをかけないとWindowsからは認識されなくなる。

5. Switchに接続する

まずイカを起動し、ポストから投稿の準備画面へ移動する。 ペンサイズは最小にする。

次に、PCからUSBケーブルを引き抜く。引き抜いたケーブルはドックのUSBポートに刺すか、USB type Cへの変換コネクタをつかって本体に接続する。

あとは自動的にSwitchコンとして認識・接続され、全消去、原点遷移を行った後にドット打ちが行われる。

注意点は、自動操作をさせているだけなので、本体の画面やボタンに触れないこと。ペンサイズが変わったり、座標がずれてもそのまま続行されるので、時間を無駄にする。

最後に

ちゃんと動くように、かつ可能な限り正確な情報を書くの、いろんなこと調べないといけないからめんどくさくてもうまとめたくないなっておもった。 てきとーに最低限の再現性を用意できるだけの記事を書けるようになりたい人生だった。

www.amazon.co.jp

bash on windows/Windows Subsystem for Linuxをまっさらにする

とあることをするための記事を書こうと思った際に、bash on windowsにいろいろ入れ過ぎてどの動作が必要だったかわからなくなってしまったので、初期化したくなったので調べた。

参照したのは以下のページ。 www.atmarkit.co.jp

  1. アンインストールする
  2. インストールする

の2ステップ。

lxrun /uninstall /y
lxrun /install

アンインストール時にはいちいち聞かれるのが面倒なので /y オプションを付けている。 インストール時にも /y オプションを付けることができるが、その場合はユーザ名やパスワードの入力が求められず、ログインユーザがrootになる(らしい)。

アンインストール時は、 /full オプションを付けることで、通常は残ってしまう C:\Users\[ユーザ名]\AppData\Local\lxss\homeの中身も消せるそう。

/fullなくてもまっさらになったような気がするのでとりあえずこれでいいや。

www.atmarkit.co.jp

得体のしれないキーボードのキーアサインを調べる

Ergodoneを買って、とりあえずデフォルトで使おうとしたものの、一部不明なキーがあって困ったため調べました。

 

1. IntelliTypeProのインストール

以下から可能です。

Download Microsoft IntelliType Pro 8.2 Keyboard Software for Windows - 64 bit from Official Microsoft Download Center

 

2. ファイル名を指定して実行->mskey

以上です。

 

公式であったので非常に楽でした。

 

参考ページ

 

https://support.microsoft.com/ja-jp/help/919618

C92で気になってるとこまとめ

気になったツイート貼っていくだけの記事。