其他
我用彩色墨水屏「手搓」了一个电子日历……
显示朝向设置:「纵向」「横向」「自动」; 日历模式设置:模式一「图片+日历+ ToDo」、模式二「图片+日历」、模式三「图片」; 图片来源设置:「Metmusem」「精选」(TOP1000)「图库」(照片); 上传自定义图片; 选取显示指定图片。
总体设计思路
屏幕:选用墨水屏,因为它的显示效果最自然,最接近纸质效果。 数据更新:墨水屏终端只负责接收最终需要显示的图片数据,基础数据的获取与处理在服务器上完成。因为在后期使用时,硬件不会在我手边,如此设计,有利于维护(和远程发送彩蛋)。 待办数据:必须来源于已有软件,最好提供了 api,我选择的是微软 ToDo。
硬件
esp32
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){
...
}
对于计算机来说,图片是由像素点构成的,而每一个像素点所占的空间大小就决定了这个像素点可能的状态(颜色)多少,最简单的黑白图片每个像素点只占一位(1Bit),不是 0 就是 1 非黑即白,随着颜色的增加,每一个像素点占用的空间越来越大,八位、十六位、二十四位...
我们有七种颜色,所以最少需要三位数据才能表示所有颜色,但为了方便运算在它前面加一个 0,即用四位数据表示一个像素点的颜色,这样一个字节(1Byte)可以表示两个像素点。因此,我们写入显示屏的字节数=600*448/2=134,400 Bytes。
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();
}
Metmusem。大都会艺术博物馆(Metropolitan Museum of Art),是美国最大的艺术博物馆,收藏有 300 万件展品,提供其藏品中超过 470,000 件艺术品的精选信息数据集,这些选定的数据集现在可以在任何媒体上使用,无需许可或付费。可通过他们的 API 获取。这是简单用例:parkchamchi/dailyArt[1]。通过 Metmusem 提供的 API,我们能「随机」地获取指定类目的图片。
著名油画。Metmusem在线获取的图片在色彩和尺寸上可能不一定适合墨水屏的显示(比例过大或过小、色彩过淡)。因此,构建了一份本地存储的世界名画。在 most-famous-paintings[2] 网站上获取「TOP1000 油画」,存储于 Apitable 中。以下为python脚本。 节日图片。自定义的节日、节气主题图片,存储于 Apitable 中。 照片。自定义的照片,存储于 Apitable 中。
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)
图片处理
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 < 0.67:两侧填充空白至 ratio=0.67,横向显示; 0.67 <= ratio <= 1:横向显示; 1 < ratio < 1.49:纵向显示: 1.49 < ratio:上下填充空白至 ratio=1.49,纵向显示。
日历数据处理
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 数据处理
图片拼接
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")
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
交互
通过 WebAPP 完成的设置,日历将会在下一次 HTTP 请求时开始应用; 通过自定义表单,上传的图片将被加入到「图库」合集中; 通过 Apitable 提供的「小程序」功能,编写一个图片拾取器,可以选取显示指定图片,日历将会在下一次 HTTP 请求时开始应用。
//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)
});