用树莓派制作轮播相册、化妆镜送女友（树莓派魔镜）

2019-04-21 本文已影响0人 qiyubing

最终实现效果

女票可以通过发送图片到微信公众号实现上传相片，收到消息后会给女票返回相片id，女票输入相片id即可实现删除相片。树莓派开机后WIFI自动连接，自动开始全屏轮播相片(鼠标隐藏)，并且也可以当一面镜子来放在桌上。

来一张效果图：

IMG_20190421_115131.jpg

qq_pic_merged_1555831312336.jpg

原材料

树莓派
HDMI屏幕
HDMI线
原子镜
相框（我选用小木条）
相框架（屏幕送的）
锯子、砂纸、剪刀等工具
AB胶、绝缘胶带、泡沫双面胶等固定材料

IMG_20190421_090932.jpg

步骤

一、制作相框

我在某宝买了两种规格的小木条和一块，来搭成相框，用绝缘胶带包裹主板背板，用泡沫双面胶粘贴，相当牢固。

Screenshot_2019-04-21-11-26-48-075_com.taobao.tao.png

Screenshot_2019-04-21-11-27-01-916_com.taobao.tao.png

qq_pic_merged_1555817298504.jpg

qq_pic_merged_1555828632771.jpg

qq_pic_merged_1555828660513.jpg

成品如下：

IMG_20190421_092159.jpg

二、服务端开发

这里就不详细说实现过程了，大致分为两步：

对接微信消息接口
服务端接收微信消息，判断是图片类型，则通过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;
}

效果图：

QQ20190421-140753.png

四、树莓派端配置

在树莓派设置里将SSH打开，用同一局域网下的电脑SSH连接（注意要用pi用户登录，默认禁止root账户SSH）
查看支持的分辨率，选一个最合适的，记住mode的值，这里提示我81最合适

/opt/vc/bin/tvservice -m DMT

QQ20190421-102746@2x.png

修改树莓派屏幕设置

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