【树莓派】带你从0到1完成魔镜制作

此文为制作过程中杂记,等后续完成后再统一整理。

目录

硬件部分搭建:

软件部分搭建:

安装MagicMirror2

天气预报显示

旋转屏幕

允许HDMI支持热插拔


硬件部分搭建:

原子镜一块:淘宝订做,23*36,匹配显示屏

笔记本拆机显示屏+驱动板:咸鱼购买,买的触摸屏36*23cm,实际使用中确认外面增加了一块原子镜后无法使用触摸功能,需要另外再覆膜才能使用触摸功能。

树莓派一块,我用的是树莓派3B,使用其他型号的也可以,或者其他显示主控器其实都可以。

镜框制作,用木板制作一个木框,将上述这些东西放置到镜框内

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------

软件部分搭建:

github上有现成的魔镜开源代码,可以基于这份开源代码进行修改。

开源代码:https://github.com/MichMich/MagicMirror

说明文档:https://docs.magicmirror.builders/

但本质上,任何魔镜只是一种显示界面,我们只需要将自己想显示的内容充满整个显示屏屏幕即可。

因为镜子是一个悬挂或可移动的东西,我不希望有网线出来,所以选择树莓派3B,现在可以用4B,自带WIFI功能,实际使用会方便很多。

 

安装MagicMirror2

在树莓派终端中输入:

git clone https://github.com/MichMich/MagicMirror.git

 

下载完毕后,进行自动安装:

bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"

注意:若输入上述指令无反应,则先检查是不是无法访问https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh 这个文件,若显示“raw.githubusercontent.com 拒绝了我们的连接请求。”,则说明下不到这个文件,所以指令无反应无法执行。产生该问题的主要原因是我安装的树莓派系统是精简版的,很多包没有安装。

有两种方式解决:

(1)提前下好这个文件放到根目录下,然后直接执行该脚本;

(2)解决连接问题,安装ssl-cert包即可:

sudo apt-get install ssl-cert

解决后再用前面的指令,即可开始magicmirror2的自动化安装。 

 

天气预报显示

自动完成安装后,会发现右上角的天气并没有显示出来,因为天气信息是从https://openweathermap.org/上获取的,当前的配置中并未设置有效的appid,需要做一些修改。

打开config/config.js文件,原始内容如下:

......

{
			module: "currentweather",
			position: "top_right",
			config: {
				location: "New York",
				locationID: "",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				appid: "YOUR_OPENWEATHER_API_KEY"
			}
		},
		{
			module: "weatherforecast",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				location: "New York",
				locationID: "5128581",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				appid: "YOUR_OPENWEATHER_API_KEY"
			}
		},
......

修改地区:

我这里改成了 宁波 “Ningbo”,对应的id从city.list.json文件中查找(该文件从http://bulk.openweathermap.org/sample/city.list.json.gz下载) 

location: "Ningbo",
locationID: "1799397",  

修改appid,需要使用 OpenWeatherMap 的服务,首先我们要到它的官网上注册一个帐号,地址:http://openweathermap.org 
然后再登录帐号,注册个 apikey(即appid)。这个在后面获取气候信息时参数中需要带上。(注册这些都是免费的。但是注册时容易失败,使用qq邮箱无法成功,可以使用gmail邮箱进行注册,应该是被强了)
appid: "12b2817fbec86915a6e9b4dbbd3d9036" 

完整修改如下所示:

sudo nano config/config.js

......

{
			module: "currentweather",
			position: "top_right",
			config: {
				location: "Ningbo",
				locationID: "1799397",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				appid: "12b2817fbec86915a6e9b4dbbd3d9036"
			}
		},
		{
			module: "weatherforecast",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				location: "Ningbo",
				locationID: "1799397",  //ID from http://bulk.openweathermap.org/sample/city.list.json.gz; unzip the gz file and find your city
				appid: "12b2817fbec86915a6e9b4dbbd3d9036"
			}
		},
......

ctrl+x保存退出

重新执行npm start即可看到天气预报已显示

 

旋转屏幕

魔镜在设计上是纵向肖像模式,所以我需要将屏幕顺时针旋转90度,最终显示分辨率为1080 x 1920

树莓派的系统配置主要在boot/config.txt文件里,相关的配置可以参考https://www.raspberrypi.org/documentation/configuration/config-txt/README.md

在配置中需要将屏幕旋转270度,可以按如下说明进行操作。

sudo nano /boot/config.txt

在config.txt文件最后添加

display_hdmi_rotate=3

lcd_totate=3

说明: 

对于触摸屏添加如下内容:
lcd_rotate = 0 //不旋转
lcd_rotate = 1 //旋转90度
lcd_rotate = 2 //旋转180
lcd_rotate = 3 //旋转270

对于HDMI显示输出,添加:
如果是只是想旋转HDMI输出显示的角度(不用触摸屏)
则可以添加:
display_rotate = 0
display_rotate = 1
display_rotate = 2
display_rotate = 3

如果是触摸屏,用display的话,只会旋转显示,不会改触摸屏驱动,点击屏幕就不对
应了。。

reboot重启树莓派即可

reboot

 重启后,触摸屏驱动和显示都会旋转。

 

display_hdmi_rotateresult
0no rotation
1rotate 90 degrees clockwise
2rotate 180 degrees clockwise
3rotate 270 degrees clockwise
0x10000horizontal flip
0x20000vertical flip

 

允许HDMI支持热插拔

在/boot/config.txt中添加

hdmi_force_hotplug=1

-----------------------------------------------------------------------------------------------------------------------------------------------------------

相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页