P5 图标替换

P5 图标替换

1.接着打开刚才的项目

2.运行到内置浏览器,观察效果

3.我们去阿里矢量图网站,进行查找图标

4.搜索温度,挑选一个,然后调整一下颜色,Png下载,

5.湿度,也是一样,PNG下载

6.再搜索一个,台灯

7.把图片剪切到源目录的static目录,名字改成英文的,humi(湿度),lamp(台灯),temp(温度),

8.在源代码里面,进行路径替换

9.保存后,就可以看到

10.台灯按钮的颜色,需要替换一下

11.标题也改一下,在static的pages.json里面改动

12.随便起个名字就行

13.复制一个卡片, 我们就可以进行拓展了

14.就可以看到空白的地方

15.里面放点东西,自由发挥

16.链接硬件,下载最新的程序,我们就可以控制相关的灯开关

17.发现不同步,看下程序,需要把每三秒读取数据,进行解开注释