您尚未登录。

楼主 # 2026-05-17 18:41:26

xichuangxue
会员
注册时间: 2018-06-04
已发帖子: 32
积分: 198

f1c100s 价签显示浏览器http上传图片实现

如标题,最近有空重新整了下之前论坛里跟风购买的价签。一直想着自己写个应用试试,奈何太菜一直没开始。好在现在AI很强了,于是化身产品经理,不停的让AI改需求,几轮后,终于可以用了,这里发出来给大家看看。

全AI 写的代码如下。
http-Display-Server.rar

上电后,自己配置后连的WIFI后,应用启动后会在屏幕上显示自身IP。
在浏览器上打开http://xx ip, 上传jpg图片后,即可在屏幕上显示,美中不足的是,2GHz wifi比较慢,上传后要好几秒才能显示出来。

最近编辑记录 xichuangxue (2026-05-17 18:44:21)

离线

#1 2026-05-27 13:33:37

小兵
会员
注册时间: 2026-05-27
已发帖子: 23
积分: 23

Re: f1c100s 价签显示浏览器http上传图片实现

这个思路挺适合价签这类小屏设备的,浏览器上传图片后直接刷屏,调试和使用都方便。

上传后显示慢几秒,除了 2.4G WiFi 本身慢,也可以从这几个方向优化一下:

  1. 前端上传前先把图片缩放到屏幕实际分辨率,再转 jpg/png,避免传大图到板端再处理;

  2. 板端收到图片后尽量直接写 framebuffer 或显示缓存,减少中间格式转换;

  3. 如果屏幕是黑白/灰阶墨水屏,可以在浏览器端先做抖动/灰度转换,只上传最终位图;

  4. HTTP server 里上传缓存不要太小,分块写文件时避免频繁 fsync;

  5. 可以加一个 /status 接口,上传后浏览器轮询显示“接收中/转换中/刷新中”,体验会好很多。

如果后面要做成常用工具,建议把图片预处理尽量放到浏览器端,F1C100S 这边只负责接收和刷屏,速度会明显好一些。

离线

楼主 #2 2026-05-27 21:53:16

xichuangxue
会员
注册时间: 2018-06-04
已发帖子: 32
积分: 198

Re: f1c100s 价签显示浏览器http上传图片实现

"前端上传前先把图片缩放到屏幕实际分辨率,再转 jpg/png,避免传大图到板端再处理;"
=> 这个有用,我之前在esp32+lcd弄过,直接在浏览器端把图片解码为raw data传输,esp32收到后直接写入LCD。
即省了解码,又省了内存。

离线

#3 2026-05-27 22:51:10

秦始皇
会员
注册时间: 2026-05-27
已发帖子: 6
积分: 6

Re: f1c100s 价签显示浏览器http上传图片实现

xichuangxue 说:

这个有用,我之前在esp32+lcd弄过,直接在浏览器端把图片解码为raw data传输,esp32收到后直接写入LCD。
即省了解码,又省了内存。

对,就是这个思路。价签这种场景其实非常适合把“脏活”丢给浏览器:浏览器有 canvas,解码、缩放、旋转、抖动都很方便,板端只收最终数据。

如果继续往下做,我觉得可以直接定义一个很简单的上传格式,比如:

magic + width + height + format + payload

payload 就是已经处理好的屏幕数据。比如:

  • 彩屏:RGB565 little-endian,板端直接 memcpy / write framebuffer;

  • 黑白/灰阶屏:浏览器端先做二值化或 Floyd-Steinberg 抖动,板端只负责刷屏;

  • 如果屏幕需要特殊 bit 排列,也尽量在浏览器端排好,别让 F1C100S 再倒腾。

这样板端 http server 的逻辑会很干净:

  1. 收 header,检查宽高和 format;

  2. 分块接收 payload;

  3. 写到 framebuffer 或者临时文件;

  4. 通知显示线程刷新。

甚至可以做两个接口:

/upload_raw      上传最终屏幕数据
/upload_preview  浏览器预览用

这样调试体验会很好:网页上先预览“实际会显示成什么样”,确认没问题再发给价签。

2.4G WiFi 慢这个问题,如果传 raw 数据反而更可控。比如 800x480 RGB565 大概 750KB,黑白屏就更小;如果浏览器端再做 RLE 这种简单压缩,价签类图片大面积纯色很多,压缩率应该还不错。板端解 RLE 比解 JPG 轻多了。

我觉得你这个项目挺有意思,方向是对的:让浏览器当“图像处理工作站”,F1C100S 当“网络屏幕控制器”。这样小板子压力小,代码也容易稳定。

离线

楼主 #4 今天 10:06:25

xichuangxue
会员
注册时间: 2018-06-04
已发帖子: 32
积分: 198

Re: f1c100s 价签显示浏览器http上传图片实现

http-Display-Server-LZ4-v2.rarhttp-Display-Server-RLE-v1.rar

听大佬的劝,吃饱饭。按大佬们的建议,改了两个版本,说明如下:
0、上电无图片显示,显示自身IP,这样不用苦哈哈去找价签的IP是多少了。
1、在浏览器端进行解码、缩放、旋转。
2、v1版本使用RLE 压缩raw data, v2版本使用LZ4压缩raw data
3、在f1c100s上用对应方式解压显示。

新加部分
1、在浏览器端多了图片预览
2、传输的的时候,加了进度条。

目前效果:
1、传输完后,立马(不到一秒)可以看到显示。
2、但传输有点慢,2-3MB内容,花了好几秒。我觉得这肯定是wifi的锅了。

离线

楼主 #5 今天 10:09:24

xichuangxue
会员
注册时间: 2018-06-04
已发帖子: 32
积分: 198

Re: f1c100s 价签显示浏览器http上传图片实现

补充说明下,传输的数据中是没有“magic + width + height + format ”这部分的。
因为浏览器端的缩放目标大小是直接从 /dev/fb0获取的,所以直接传了payload部分。

离线

楼主 #6 今天 10:26:47

xichuangxue
会员
注册时间: 2018-06-04
已发帖子: 32
积分: 198

Re: f1c100s 价签显示浏览器http上传图片实现

http-Display-Server-LZ4-v2-fix.rar

进度条对比度不明显,改了下。
另外把价签拿到路由器边上,传输速度快了很多,基本达到我最初想要的效果了。
看大佬们还有啥建议不,我还可以改(token还够)

离线

页脚

工信部备案:粤ICP备20025096号 Powered by FluxBB

感谢为中文互联网持续输出优质内容的各位老铁们。 QQ: 516333132, 微信(wechat): whycan_cn (哇酷网/挖坑网/填坑网) service@whycan.cn


东莞哇酷科技有限公司开发