最终实现效果
女票可以通过发送图片到微信公众号实现上传相片,收到消息后会给女票返回相片id,女票输入相片id即可实现删除相片。树莓派开机后WIFI自动连接,自动开始全屏轮播相片(鼠标隐藏),并且也可以当一面镜子来放在桌上。
来一张效果图:
原材料
- 树莓派
- HDMI屏幕
- HDMI线
- 原子镜
- 相框(我选用小木条)
- 相框架(屏幕送的)
- 锯子、砂纸、剪刀等工具
- AB胶、绝缘胶带、泡沫双面胶等固定材料
步骤
一、制作相框
我在某宝买了两种规格的小木条和一块,来搭成相框,用绝缘胶带包裹主板背板,用泡沫双面胶粘贴,相当牢固。
成品如下:
二、服务端开发
这里就不详细说实现过程了,大致分为两步:
- 对接微信消息接口
- 服务端接收微信消息,判断是图片类型,则通过URL下载图片,将URL放入ConcurrentHashMap中,Key为图片id(我实现的是自增id),Value为服务端根据保存的图片生成可以访问的URL。
- 微信接收消息,判断是消息类型,则认为消息是图片的id,根据id删除图片
- 暴露出获取图片URL列表的接口,也就是之前缓存中的Map的values
说明:
我后台使用的是Spring Boot
注意事项:
- 微信消息接口是XML格式的
- 不能直接使用微信消息中的图片URL,有跨域限制,所以服务端将图片下载下来再提供给前端服务端的URL就可以啦
- 服务端记得开启跨域
- 记得捕获异常后返回一个提示错误的消息
三、前端页面开发
前端使用的是Bootstrap的轮播图插件Carousel,用AJAX请求到图片URL列表后foreach动态添加DOM。
鼠标隐藏用这个CSS就行:
html {
cursor: none;
}
效果图:
四、树莓派端配置
- 在树莓派设置里将SSH打开,用同一局域网下的电脑SSH连接(注意要用pi用户登录,默认禁止root账户SSH)
- 查看支持的分辨率,选一个最合适的,记住mode的值,这里提示我81最合适
/opt/vc/bin/tvservice -m DMT
- 修改树莓派屏幕设置
sudo vi /boot/config.txt
添加如下代码:
# 开始屏幕热插拔
hdmi_force_hotplug=1
# DMT模式
hdmi_group=2
# 刚刚查看的分辨率编号
hdmi_mode=81
# 屏幕旋转90度
display_rotate=1
附上参考文章:
https://www.jianshu.com/p/a65b295eb285
https://www.jianshu.com/p/657f6e113666
- 配置WIFI自动连接(也可以在树莓派图形界面连接一次,之后会自动连接)
vi /etc/wpa_supplicant/wpa_supplicant.conf
network={
ssid="WIFI名(不可直接用中文)"
psk="WIFI密码"
key_mgmt=WPA-PSK
}
将前端项目文件夹scp入树莓派
设置chromium开机自启并打开页面
cd /home/pi/.config
# 创建autostart文件夹
mkdir autostart
cd autostart
# 创建my.desktop文件
sudo vi my.desktop
# 添加如下代码:
[Desktop Entry]
Type=Application
Exec=chromium-browser --disable-popup-blocking --no-first-run --disable-desktop-notifications --kiosk "file://HTML文件路径"
#重启
sudo reboot
配置完啦!看看效果
五、贴上原子镜
Bootstrap的响应做得真不错
关机的时候也可以当做镜子
六、再装饰一下
贴上字母贴
加个架子
大功告成,装箱!
本人太原理工大学大二学生狗一枚,赶工期做的有些糙,谅解。