Copyright © 2014 magnetic.

Hexo Theme by Jonathan K.

Make a Digital Sticker

12/16

デジタルサイネージを作ってみる

目次

小型のデジタルステッカーみたいなの

キーホルダーとかバッジとか、そのくらいの大きさで好きなイラストをさりげなく持ち歩きたいなと思った。
思いだったが吉日ということで、ちゃちゃっと用意してみた。

用意したもの

  • Raspberry Pi Pico
  • 0.91inch OLED ディスプレイ(128x32)
  • Pico-UPS-A

こんな感じ。

早速組んでみる

大まかなところの一切は割愛する。
まずは、MicroPythonのファームウェアここらへんからゲットして、インストール。
次にOLEDディスプレイの表示テストをするので、ブレッドボードに組み上げる。
GPIO0とGPIO1を使う。
Pythonで以下のように書いてみる。

import machine
import utime
import ssd1306

sda=machine.Pin(0)
scl=machine.Pin(1)
freq=400000

i2c=machine.I2C(0, sda=sda, scl=scl, freq=freq)
#print(i2c.scan())

oled=ssd1306.SSD1306_I2C(128, 32, i2c)

disp_x_range = 42
pixel_data = [
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,1,0,1,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,1,0,1,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,1,1,0,1,1,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,1,0,1,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
]

i = 0
line_offset = 0

oled.fill(0)
for p in pixel_data:
    if (i % disp_x_range) == 0:
        #print(str(i % disp_x_range))
        #print("line feed")
        line_offset = line_offset + 1
        i = 0
    
    if p == 1:
        oled.fill_rect((i * 3), line_offset, 3, 1, 1)

    i = i + 1

#display.invert(1) 
oled.show()
#utime.sleep(2)

こんな感じにしてみる。
んで、表示テストをしてみる。

イカちゃんが表示されてる。
これをベースにアニメーションとかも考えてみよう。
例えば、スプラ１のローディング中に泳ぐイカちゃんとか。

イラストの作り方

このイカちゃんのデータは、表計算ソフトで作ってみた。
Google SpreadSheetを使って、以下のような感じで絵を描くと。

これをPythonのデータシートに変換したいので、Apps Scriptを使って変換している。
こんな感じの関数を作っている。

function canvas() {
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sh = ss.getSheetByName("canvas");
  var sr = ss.getSheetByName("result");

  sr.getRange(1,1,30,42).clear;

  var line_offset = 1;
  var p = 1;
  for(var i=1;i<=(42*30);i++){

    if(sh.getRange(line_offset + 1, p + 1).getBackgrounds()=='#999999'){
      sr.getRange(line_offset, p).setValue('1');
    }else{
      sr.getRange(line_offset, p).setValue('0');
    }
    p++;

    if(i % 42 == 0){
      line_offset++;
      p = 1;
    }
  }
};

canvasというシートが絵描いているところ。
resultは0,1で結果が返ってくるところ。
実行結果は以下の通り。

これをテキストエディタとかでゴニョゴニョしてソースに貼っている。

最後に

簡単に紹介したが、次回以降はアニメーションとバッテリ駆動に挑戦してみよう。

tech

コメント: