如标题,最近有空重新整了下之前论坛里跟风购买的价签。一直想着自己写个应用试试,奈何太菜一直没开始。好在现在AI很强了,于是化身产品经理,不停的让AI改需求,几轮后,终于可以用了,这里发出来给大家看看。
全AI 写的代码如下。
http-Display-Server.rar
上电后,自己配置后连的WIFI后,应用启动后会在屏幕上显示自身IP。
在浏览器上打开http://xx ip, 上传jpg图片后,即可在屏幕上显示,美中不足的是,2GHz wifi比较慢,上传后要好几秒才能显示出来。

最近编辑记录 xichuangxue (2026-05-17 18:44:21)
离线
这个思路挺适合价签这类小屏设备的,浏览器上传图片后直接刷屏,调试和使用都方便。
上传后显示慢几秒,除了 2.4G WiFi 本身慢,也可以从这几个方向优化一下:
前端上传前先把图片缩放到屏幕实际分辨率,再转 jpg/png,避免传大图到板端再处理;
板端收到图片后尽量直接写 framebuffer 或显示缓存,减少中间格式转换;
如果屏幕是黑白/灰阶墨水屏,可以在浏览器端先做抖动/灰度转换,只上传最终位图;
HTTP server 里上传缓存不要太小,分块写文件时避免频繁 fsync;
可以加一个 /status 接口,上传后浏览器轮询显示“接收中/转换中/刷新中”,体验会好很多。
如果后面要做成常用工具,建议把图片预处理尽量放到浏览器端,F1C100S 这边只负责接收和刷屏,速度会明显好一些。
离线
"前端上传前先把图片缩放到屏幕实际分辨率,再转 jpg/png,避免传大图到板端再处理;"
=> 这个有用,我之前在esp32+lcd弄过,直接在浏览器端把图片解码为raw data传输,esp32收到后直接写入LCD。
即省了解码,又省了内存。
离线
xichuangxue 说:
这个有用,我之前在esp32+lcd弄过,直接在浏览器端把图片解码为raw data传输,esp32收到后直接写入LCD。
即省了解码,又省了内存。
对,就是这个思路。价签这种场景其实非常适合把“脏活”丢给浏览器:浏览器有 canvas,解码、缩放、旋转、抖动都很方便,板端只收最终数据。
如果继续往下做,我觉得可以直接定义一个很简单的上传格式,比如:
magic + width + height + format + payloadpayload 就是已经处理好的屏幕数据。比如:
彩屏:RGB565 little-endian,板端直接 memcpy / write framebuffer;
黑白/灰阶屏:浏览器端先做二值化或 Floyd-Steinberg 抖动,板端只负责刷屏;
如果屏幕需要特殊 bit 排列,也尽量在浏览器端排好,别让 F1C100S 再倒腾。
这样板端 http server 的逻辑会很干净:
收 header,检查宽高和 format;
分块接收 payload;
写到 framebuffer 或者临时文件;
通知显示线程刷新。
甚至可以做两个接口:
/upload_raw 上传最终屏幕数据
/upload_preview 浏览器预览用这样调试体验会很好:网页上先预览“实际会显示成什么样”,确认没问题再发给价签。
2.4G WiFi 慢这个问题,如果传 raw 数据反而更可控。比如 800x480 RGB565 大概 750KB,黑白屏就更小;如果浏览器端再做 RLE 这种简单压缩,价签类图片大面积纯色很多,压缩率应该还不错。板端解 RLE 比解 JPG 轻多了。
我觉得你这个项目挺有意思,方向是对的:让浏览器当“图像处理工作站”,F1C100S 当“网络屏幕控制器”。这样小板子压力小,代码也容易稳定。
离线