我在數字時代做了一個電子日曆,讓油畫和照片可以被裝進去 - 少數派#
#Omnivore
我在數字時代做了一個電子日曆,讓油畫和照片可以被裝進去
前言#
坐在椅子上發呆時,忽然注意到桌面的台曆還停留在上個月。在這個數字時代,實體日曆似乎跟不上我們匆匆的步伐,我們更多地依賴著手機和電腦,提醒著我們的會議、旅行和約會。
我唯一鐘愛的日曆,是和她在雨夜跑進咖啡店避雨,向老闆要到的當天的單向曆。那一天,我們正式在一起,還不到 24 小時。
如今,我們早已步入婚姻的殿堂,在紀念日前夕,送點什麼禮物好呢?她剛好喜愛實物,喜歡紙質書、喜歡記事簿、喜歡拍立得,要不就送日曆吧,當然,得有點不一樣。
我希望這「本」日曆的生命能突破 365 天、能自動翻頁、能顯示待辦,還能提醒我們的紀念日,還要足夠好看...... 於是我製作了它,墨水屏日曆。
日曆功能#
功能分區。日曆分為三個顯示區,分別為圖片區、日曆區和待辦區。每日凌晨,日曆進行一次刷新,更新日曆信息。每當待辦事項有變動(新增、完成、刪除、修改),日曆進行一次刷新,顯示最新待辦信息和新圖片。
圖片區的圖片來源可以設置為大都會博物館在線隨機獲取、預設圖庫和用戶上傳圖片。圖片區的左下角顯示圖片的標題和作者。日曆區顯示月份、日期和星期三個基本信息。待辦區顯示微軟 ToDo 的待辦事項,待辦事項以「完成情況」、「創建日期」降序排列,完成的事項會有刪除線標識。
根據圖片的寬高比,日曆自動設定朝向,基本規則是寬高比小於等於 1,日曆橫向顯示,寬高比大於 1,日曆縱向顯示。
交互。我在上一篇文章《家庭伺服器 Home Server 實踐》中提到了多維表格 Apitable,在這個日曆中也用到了它。交互均在 Apitable 的 WebAPP 內實現,可以進行的交互有:
- 顯示朝向設置:「縱向」、「橫向」、「自動」;
- 日曆模式設置:模式一「圖片 + 日曆 + ToDo」、模式二「圖片 + 日曆」、模式三「圖片」;
- 圖片來源設置:「Metmusem」、「精選」(TOP1000)、「圖庫」(照片);
- 上傳自定義圖片;
- 選取顯示指定圖片。
設置界面與上傳自定義圖片
選取顯示指定圖片
設計與製作#
總體設計思路#
- ** 屏幕。** 選用墨水屏,因為它的顯示效果最自然,最接近紙質效果。
- ** 數據更新。** 墨水屏終端只負責接收最終需要顯示的圖片數據,基礎數據的獲取與處理在伺服器上完成。因為在後期使用時,硬件不會在我手邊,如此設計,有利於維護(和遠程發送彩蛋)。
- ** 待辦數據。** 必須來源於已有軟件,最好提供了 api,我選擇的是微軟 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° |
顯示屏校色。官方宣稱的七色為黑、白、綠、藍、紅、黃、橙。我拿到手發現顯示屏有不小的色差。因此需要標定顯示屏的實際色彩。沒有標準色卡,只能簡單地校一下色:使用彩色打印機打出七色 + 中性灰;在統一光照下拍攝圖片,並在 Lightroom 裡借助中性灰校正照片色彩;再用吸管工具獲取照片中墨水屏的各個色彩 RGB 值。
以下為色彩校正後的數值和顯示情況。
顏色 | 標稱值 | 實際值 |
---|---|---|
黑 | (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) |
Varoom!-- Roy Lichtenstein 由左至右分別是原作、抖動算法處理後的圖片、墨水屏實拍圖
驅動板可選項有很多: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){
...
}
我們有七種顏色,所以最少需要三位數據才能表示所有顏色,但為了方便運算在它前面加一個 0,即用四位數據表示一個像素點的顏色,這樣一個字節 (1Byte) 可以表示兩個像素點。因此,我們寫入顯示屏的字節數 = 600*448/2=134,400 Bytes。
不知原因,在 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();
// create buffer for read
uint8_t buff[1280] = { 0 };
// get tcp stream
WiFiClient * stream = http.getStreamPtr();
// read all data from server
int numData = 0;
String headString = "";
while(http.connected() && (len > 0 || len == -1)) {
// get available data size
size_t size = stream->available();
int c = 0;
if(size) {
// read up to 1280 byte
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):
# Create a pallette with the 7 colors supported by the panel
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)
# Convert the soruce image to the 7 colors, dithering if needed
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 數據來源於微軟 ToDo。由於我在其它項目中同時使用著 ToDo 數據,因此,放在 n8n 中統一管理特別方便。獲取的 ToDo 數據條目按照status
和lastModifiedDateTime
排序,並保存在msgToDo.json
文件中。
n8n 獲取 ToDo 數據
圖片拼接#
使用 python 的 PIl 庫對藝術圖片、日曆、待辦圖像進行拼接,並轉換成字節流:
# concaten pic
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("Success")
def buffImg(image):
image_temp = image
buf_7color = bytearray(image_temp.tobytes('raw'))
# PIL does not support 4 bit color, so pack the 4 bits of color
# into a single byte to transfer to the panel
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
交互#
如上文所述,通過 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 線纜的通孔、支撐腳固定通孔和懸掛孔。
寫在最後#
感謝您能忍受中間枯燥乏味的文字,看到這裡。這是一個很匆忙的項目,有很多粗糙的製作,希望以後能有時間優化升級,也希望以後的自己還能有閒情逸致做一些好玩的東西。
也祝您每日平安喜樂。