banner
Leo

Leo的恒河沙

一个活跃于在珠三角和长三角的商业顾问/跨境电商专家/投资人/技术宅/骑行爱好者/两条边牧及一堆小野猫的王/已婚;欢迎订阅,日常更新经过我筛选的适合精读的文章,横跨商业经济情感技术等板块,总之就是我感兴趣的一切

2023-09-07-デジタル時代に電子カレンダーを作成し、油絵と写真を入れることができるようにしました - 少数派

デジタル時代に電子カレンダーを作成し、油絵や写真を入れられるようにした - 少数派#

#Omnivore

デジタル時代に電子カレンダーを作成し、油絵や写真を入れられるようにした

前言#

椅子に座ってぼんやりしていると、ふとテーブルのカレンダーが先月のままであることに気づいた。このデジタル時代に、実体のカレンダーは私たちの急速なペースに追いつけないようで、私たちはより多くスマートフォンやコンピュータに依存し、会議、旅行、約束を思い出させてくれる。

私が唯一愛するカレンダーは、彼女と雨の夜にカフェに駆け込んで雨を避け、店主にその日の単方向カレンダーを頼んだものだ。その日、私たちは正式に付き合い始めて、まだ 24 時間も経っていなかった。

image

今では私たちはすでに結婚の殿堂に入っており、記念日の前夜に何か贈り物をしたいと思った。彼女はちょうど実物が好きで、紙の本やメモ帳、インスタントカメラが好きだ。だからカレンダーを贈ろうと思った、もちろん、少し違ったものにしなければならない。

私はこの「本」カレンダーの命が 365 日を超え、自動でページをめくり、やるべきことを表示し、記念日を思い出させ、見た目も十分に美しいことを望んだ...... それで、私はそれを作成した、インクスクリーンカレンダー。

image

image

カレンダー機能#

機能分区。カレンダーは画像エリアカレンダーエリアやるべきことエリアの 3 つの表示エリアに分かれています。毎日午前 0 時にカレンダーは更新され、カレンダー情報が更新されます。やるべきことに変動があるたび(追加、完了、削除、修正)、カレンダーは更新され、最新のやるべきこと情報と新しい画像が表示されます。

image

画像エリアの画像ソースはメトロポリタン美術館オンラインランダム取得プリセットギャラリーユーザーアップロード画像に設定できます。画像エリアの左下には画像のタイトルと作者が表示されます。カレンダーエリアには月、日、曜日の 3 つの基本情報が表示されます。やるべきことエリアにはMicrosoft ToDoのやるべきことが表示され、やるべきことは「完了状況」、「作成日」の降順で並べられ、完了した項目には取り消し線が表示されます。

画像のアスペクト比に基づいて、カレンダーは自動的に向きを設定します。基本ルールは、アスペクト比が 1 以下の場合、カレンダーは横向きに表示され、アスペクト比が 1 より大きい場合、カレンダーは縦向きに表示されます。

インタラクション。前回の記事「家庭サーバー Home Server 実践」で言及した多次元テーブル Apitable もこのカレンダーで使用されています。インタラクションはすべて Apitable の WebAPP 内で実現され、可能なインタラクションは以下の通りです:

  • 向き設定の表示:「縦向き」、「横向き」、「自動」;
  • カレンダーモード設定:モード 1「画像 + カレンダー + ToDo」、モード 2「画像 + カレンダー」、モード 3「画像」;
  • 画像ソース設定:「Metmusem」、「セレクション」(TOP1000)、「ギャラリー」(写真);
  • カスタム画像のアップロード;
  • 指定画像の表示選択。

image

設定画面とカスタム画像のアップロード

image

指定画像の表示選択

設計と制作#

全体設計思路#

  • ** スクリーン。** インクスクリーンを選択しました。なぜなら、表示効果が最も自然で、紙の効果に最も近いからです。
  • ** データ更新。** インクスクリーン端末は、最終的に表示する必要がある画像データを受信するだけで、基本データの取得と処理はサーバー上で行います。後期使用時にはハードウェアが手元にないため、この設計はメンテナンス(およびリモートでのエッグ送信)に役立ちます。
  • ** やるべきことデータ。** 既存のソフトウェアから取得する必要があり、API が提供されているのが望ましいため、私は Microsoft ToDo を選択しました。

ハードウェア#

ディスプレイは、微雪の 5.65 インチカラーデジタルインクスクリーンモジュールを使用しており、7 色、600 × 448 の解像度です。

名称数値名称数値
動作電圧3.3V/5V表示色7 色(黒、白、緑、青、赤、黄、オレンジ)
通信インターフェース3-wire SPI、4-wire SPIグレースケール2
全体更新<35s寿命100 万回
表示サイズ114.9 × 85.8mm更新消費電力50mW(typ.)
ピッチ0.1915 × 0.1915mmスリープ電流<0.01uA (ほぼ 0)
解像度600 × 448pixels視野角>170°

ディスプレイの色校正。公式に宣言されている 7 色は黒、白、緑、青、赤、黄、オレンジです。手元に届いたとき、ディスプレイにはかなりの色差があることがわかりました。したがって、ディスプレイの実際の色を校正する必要があります。標準の色見本がないため、簡単に色を校正します:カラープリンターで 7 色 + 中性灰を印刷し、均一な光の下で画像を撮影し、Lightroom で中性灰を使って写真の色を補正します。そして、スポイトツールを使用して、写真中のインクスクリーンの各色の RGB 値を取得します。

image

以下は色校正後の数値と表示状況です。

名称値実際値
(0,0,0)(16,14,27)
(255,255,255)(169,164,155)
(0,255,0)(19,30,19)
(0,0,255)( 21,15,50)
(255,0,0)(122,41,37)
(255,255,0)(156,127,56)
オレンジ(255,128,0)(128,67,54)

image

Varoom!-- ロイ・リキテンスタイン 左から右へ原作、抖動アルゴリズム処理後の画像、インクスクリーン実撮影画像

ドライバーボードには多くの選択肢があります:Raspberry Pi、Arduino、Jetson Nano、STM32、ESP32/8266。手間を省くために、私はメーカーが販売している ESP32 ドライバーボードを選びました。ボードには FFC ポートが搭載されています。

コード#

esp32#

esp32 ドライバーボードのコードは非常にシンプルです。サーバーに HTTP リクエストを送信し、返された画像データを書き込むだけです。

// StreamClient.ino
void setup() {
    wifiMulti.addAP(ssid, password);
    DEV_Delay_ms(1000);
}

void loop() {
    if((wifiMulti.run() == WL_CONNECTED)) {
      if(requestGET("newContent")){
        updateEink();
      }
    }
    delay(60000);
}
//画像データを取得
void updateEink(){
...
}
//更新内容があるか確認
bool requestGET(String bodyName){
...
}

コンピュータにとって、画像はピクセルで構成されており、各ピクセルが占めるスペースの大きさがそのピクセルの可能な状態(色)を決定します。最も単純な白黒画像では、各ピクセルは 1 ビット(1Bit)しか占めず、0 か 1 のどちらかです。色が増えるにつれて、各ピクセルが占めるスペースはますます大きくなり、8 ビット、16 ビット、24 ビット...

私たちは 7 色を持っているので、すべての色を表現するには最低でも 3 ビットのデータが必要ですが、計算を便利にするためにその前に 0 を加え、4 ビットのデータで 1 つのピクセルの色を表現します。こうして 1 バイト(1Byte)は 2 つのピクセルを表現できます。したがって、ディスプレイに書き込むバイト数 = 600*448/2=134,400 Bytes。

image

理由は不明ですが、esp32 のメモリに余裕があるにもかかわらず、フレーム全体の画像データキャッシュを作成できず、ブロックごとに書き込む必要があります: DEV_Module_Init();,EPD_5IN65F_Init();,EPD_5IN65F_Display_begin();``EPD_5IN65F_Display_sendData(gImage_5in65f_part1)

void UpdateEink(){
  HTTPClient http;
  http.begin("https://YOUR_SITE.COM");
  int httpCode = http.GET();
  if(httpCode > 0) {
      if(httpCode == HTTP_CODE_OK) {
          int len = http.getSize();
          // 読み取り用のバッファを作成
          uint8_t buff[1280] = { 0 };
          // tcpストリームを取得
          WiFiClient * stream = http.getStreamPtr();
          // サーバーからすべてのデータを読み取る
          int numData = 0;
          String headString = "";
          while(http.connected() && (len > 0 || len == -1)) {
              // 利用可能なデータサイズを取得
              size_t size = stream->available();
              int c = 0;
              if(size) {
                  // 最大1280バイトを読み取る
                  c = stream->readBytes(buff, ((size > sizeof(buff)) ? sizeof(buff) : size));
                  String responseString((char*)buff, c);
                  responseString = headString + responseString;
                  String temp = ""; 
                  for (int i = 0; i < responseString.length(); i++) {
                    char cAti = responseString.charAt(i);
                    if (cAti == ',') { 
                      if (numData < 67200){
                        gImage_5in65f_part1[numData] = temp.toInt();
                      } else if(numData == 67200){
                        DEV_Module_Init();
                        EPD_5IN65F_Init();                              
                        EPD_5IN65F_Display_begin();
                        EPD_5IN65F_Display_sendData(gImage_5in65f_part1);
                        gImage_5in65f_part1[numData-67200] = temp.toInt();
                      } else if(numData > 67200 && numData < 134399){
                        gImage_5in65f_part1[numData-67200] = temp.toInt();
                      } else if(numData == 134399){
                        gImage_5in65f_part1[numData-67200] = temp.toInt();
                        EPD_5IN65F_Display_sendData(gImage_5in65f_part1);
                        EPD_5IN65F_Display_end();
                        EPD_5IN65F_Sleep();
                      }
                      temp = ""; // 一時文字列をクリア
                      numData++; // 配列インデックスを1増やす
                    } else {
                      temp += cAti; // 文字を一時文字列に追加
                    }
                  }
                  if (temp.length() > 0) { // 最後の数字を処理
                    headString = temp;
                  } else{
                    headString = "";
                  }
                  if(len > 0) {
                      len -= c;
                  }
                }
          }
      }
  }
  http.end();
}

サーバー側#

サーバーはアート画像、ToDo データ、カレンダーデータの取得と処理を担当し、esp32 のリクエストとインタラクション行動の処理(apitable)を行います。

アート画像の取得

  • Metmusem。メトロポリタン美術館(Metropolitan Museum of Art)は、アメリカ最大の美術館で、300 万点の展示品を収蔵しており、470,000 点以上のアート作品の選定情報データセットを提供しています。これらの選定データセットは、メディアを問わず使用でき、許可や料金は不要です。彼らの API を通じて取得できます。これは簡単なユースケースです:parkchamchi/dailyArt。Metmusem が提供する API を通じて、指定したカテゴリの画像を「ランダム」に取得できます。
  • 有名な油絵。Metmusem からオンラインで取得した画像は、色やサイズがインクスクリーンの表示に必ずしも適しているわけではありません(比率が大きすぎたり小さすぎたり、色が淡すぎたりします)。したがって、世界の名画をローカルに保存したリストを構築しました。most-famous-paintingsサイトから「TOP1000 油絵」を取得し、Apitable に保存しました。以下は python スクリプトです。
  • 祝日画像。カスタムの祝日、節気テーマの画像を Apitable に保存しました。
  • 写真。カスタムの写真を Apitable に保存しました。
import requests
from bs4 import BeautifulSoup
import csv

url = 'http://en.most-famous-paintings.com/MostFamousPaintings.nsf/ListOfTop1000MostPopularPainting?OpenForm'

r = requests.get(url)
soup = BeautifulSoup(r.content, 'html.parser')
artist=[]
images=[]
ratios=[]
for element_img in soup.find_all('div', attrs={'class': 'mosaicflow__item'}):
    artist.append((element_img.text).strip('\n'))
    imgRatio = int(element_img.img.get('width')) / int(element_img.img.get('height'))
    ratios.append(imgRatio)
    images.append(element_img.a.get('href'))

details=[]
rank = 1
for i in artist:
    painter = i[:i.index('\n')]
    painting = i[i.index('\n')+1:i.index('(')]
    ratio = ratios[rank-1]
    img = images[rank-1]
    details.append([rank,painter,painting.strip(),ratio,img])
    rank += 1

with open('famouspaintings.csv', 'w', newline='',encoding="UTF-8") as file:
    writer = csv.writer(file)
    writer.writerow(["Rank", "Name", "Painting","Ratio","Link"])
    for i in details:
        writer.writerow(i)

画像処理#

表示スクリーンは 7 色しかないため、画像を 7 色表示に処理する必要があります。Floyd-Steinberg 抖動アルゴリズムは、色数が非常に少ない場合に豊かな階層感を示すのに非常に適しています。これにより、より多くの色の組み合わせが得られ、元の画像に対してより良い影のレンダリングが可能になります。特に電子インクスクリーンのさまざまな使用シーンに適しています。Python でも簡単に実装できます。

from PIL import Image
def dithering(image, selfwidth=600,selfheight=448):
        # パネルがサポートする7色のパレットを作成
        pal_image = Image.new("P", (1,1))
        pal_image.putpalette( (16,14,27,  169,164,155,  19,30,19,   21,15,50,  122,41,37,  156,127,56, 128,67,54) + (0,0,0)*249)
        
        # ソース画像を7色に変換し、必要に応じて抖動処理
        image_7color = image.convert("RGB").quantize(palette=pal_image)

        return image_7color

画像の縦横比に基づいて、カレンダーは自動的に向きを設定します。具体的なルールは画像のアスペクト比(ratio)によって決定され、比率が大きすぎたり小さすぎたりする画像に対しては、キャンバスを拡張する方法で適切な比率に調整します:

  • ratio < 0.67:両側に空白を追加して ratio=0.67 にし、横向き表示;
  • 0.67 <= ratio <= 1:横向き表示;
  • 1 < ratio < 1.49:縦向き表示;
  • 1.49 < ratio:上下に空白を追加して ratio=1.49 にし、縦向き表示。

カレンダーデータ処理#

カレンダーデータには、日付、曜日、節気、記念日が含まれています。節気データは6tail/lunar-pythonを通じて取得できます。記念日は手動で設定され、記念日当日には小さな花火が表示されます。日付数字の色は現在のアート画像の色調から取得されます:

def get_dominant_color(pil_img):
    img = pil_img.copy()
    img = img.convert("RGBA")
    img = img.resize((5, 5), resample=0)
    dominant_color = img.getpixel((2, 2))
    return dominant_color

ToDo データ処理#

ToDo データは Microsoft ToDo から取得されます。他のプロジェクトでも ToDo データを同時に使用しているため、n8n で統一管理するのが特に便利です。取得した ToDo データ項目はstatuslastModifiedDateTimeでソートされ、msgToDo.jsonファイルに保存されます。

image

n8n で ToDo データを取得

画像結合#

Python の PIL ライブラリを使用して、アート画像、カレンダー、ToDo 画像を結合し、バイトストリームに変換します:

# 画像を結合
img_concat = Image.new('RGB', (EINK_WIDTH, EINK_HEIGHT),WHITE_COLOR)
if DisplayMode == "Portrait":
    img_concat.paste(img_photo, (0, 0))
    img_concat.paste(img_date, (img_photo.width, 0))
    img_concat.paste(img_info, (img_photo.width, img_date.height))
    img_concat.paste(img_todo, (img_photo.width + img_info.width, img_date.height))
elif DisplayMode == "Landscape":
    img_concat.paste(img_date, (0, 0))
    img_concat.paste(img_todo, (0, img_date.height))
    img_concat.paste(img_info, (0, img_date.height + img_todo.height))
    img_concat.paste(img_photo,(img_date.width, 0))

buffs = buffImg(dithering(img_concat))
if len(buffs) == EINK_HEIGHT * EINK_WIDTH / 2:
    print("成功")
def buffImg(image):
    image_temp = image
    buf_7color = bytearray(image_temp.tobytes('raw'))
    # PILは4ビットカラーをサポートしていないため、4ビットの色を1バイトにパックしてパネルに転送します
    buf = [0x00] * int(image_temp.width * image_temp.height / 2)
    idx = 0
    for i in range(0, len(buf_7color), 2):
        buf[idx] = (buf_7color[i] << 4) + buf_7color[i+1]
        idx += 1
    return buf

image

インタラクション#

前述のように、Apitable の WebAPP を通じて、設定表示の向き、カレンダーモードの設定、画像ソースの設定、カスタム画像のアップロード、指定画像の表示選択を行うことができます。

  • WebAPP で完了した設定は、次回の HTTP リクエスト時にカレンダーに適用されます;
  • カスタムフォームを通じてアップロードされた画像は「ギャラリー」コレクションに追加されます;
  • Apitable が提供する「小プログラム」機能を使用して、画像ピッカーを作成し、指定画像を選択できます。カレンダーは次回の HTTP リクエスト時に適用されます。
//YOUR_APITABLE_SPACE apitableスペースID
//YOUR_APITABLE_SHEET apitableシートID
//YOUR_APITABLE_FILED apitable列ID
//YOUR_WEBHOOK トリガーフローwebhook
const datasheet = await space.getDatasheetAsync('YOUR_APITABLE_SPACE');
const record = await input.recordAsync('レコードを選択してください:', datasheet);

const data = {
  datasheet: 'YOUR_APITABLE_SHEET',
  fieldid: 'YOUR_APITABLE_FILED' ,
  record: record.title
};

const response = await fetch('YOUR_WEBHOOK', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
});

構造#

表示スクリーンとドライバーボードのサイズに基づいて、シンプルなボックス状の外殻を設計し、3D プリントで製造しました。材料はポリカーボネート PC で、その靭性と耐熱性は非常に良好です。フレームと背面はナットで接続され、フレーム接続部にはインジェクションモールドの銅ナットが埋め込まれています。背面には USB ケーブル用の通孔、支え脚固定用の通孔、吊り下げ孔があります。

image

最後に#

ここまでの退屈な文章を耐えていただき、ありがとうございます。これは非常に急いでいるプロジェクトで、多くの粗い制作があり、今後時間があれば最適化やアップグレードを行いたいと思います。また、今後の自分が楽しいものを作る余裕があることを願っています。

あなたの日々が平安で喜びに満ちますように。

image

image

image

image

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。