请选择 进入手机版 | 继续访问电脑版

『瀚思彼岸』» 智能家居技术论坛

 找回密码
 立即注册
查看: 1647|回复: 5

[UI界面] 【作业向】制作一个跟随时间的打招呼Title

[复制链接]

14

主题

89

帖子

1053

积分

金牌会员

Rank: 6Rank: 6

积分
1053
金钱
954
HASS币
90
发表于 2022-8-12 13:54:23 | 显示全部楼层 |阅读模式
本帖最后由 hudan717 于 2022-8-12 13:55 编辑

先看一下大致效果
1.png
2.png
3.png
4.png
5.png
6.png

可以看到主要有两个变量,一是跟随每天时间的变化,打招呼的用词会不同,其次是图片的变化
核心是picture-element的一些东西,由于调试,做图都比较麻烦,我就直接放代码了。
按需自取
type: picture-elements
image: /local/pic/微信截图_20220812101458.png
elements:
  - type: custom:mushroom-title-card
    title: 大胡,{{ states('sensor.nodered_aa609d6f7ad57c12') }}
    subtitle: >-
      今天是{{ now().month }}月{{ now().day }}日,农历{{states('sensor.nongli2')
      }},{{states('sensor.jie_qi') }}
    alignment: start
    style:
      top: 25%
      height: 30%
      width: 100%
      left: 71%
  - type: image
    entity: sensor.nodered_aa609d6f7ad57c12
    tap_action:
      action: toggle
    image: /local/pic/微信截图_20220812105553.png
    state_image:
      早安: /local/pic/微信截图_20220812105553.png
      早上好: /local/pic/微信截图_20220812125926.png
      中午好: /local/pic/微信截图_20220812130559.png
      下午好: /local/pic/微信截图_20220812131557.png
      晚上好: /local/pic/微信截图_20220812132239.png
      夜深了: /local/pic/微信截图_20220812132828.png
    style:
      top: 50%
      left: 11%
      width: 21%
card_mod:     
  style:
    .: |
      ha-card {
        border-radius: 0;
        box-shadow: none
      }
因为整体默认是一个卡片,所以卡片原背景会跟随你的主题设置变化,所以要用到card-mod让这个卡片融入你的背景,否则会有阴影,看起来会比较突兀。
card-mod在HACS中自行下载

代码中用到的几个变量,我这边也一并给出成品,省的大家再花时间去捣鼓
1.跟随时间变化的问候语,你可以直接在yaml上通过templating来编辑,我嫌代码太冗长,就用nr做了
问候.zip (1.1 KB, 下载次数: 63)
2.农历的显示,请在论坛中自行搜索”农历“,有相关教程,我这边只是在NR中把农历日期结果中的年份去掉了,用了split函数,大家看下即可,比较简单就不专门上传了
7.png
3.里面用到的图片,我打包了,请直接连同pic目录一起放在www文件夹里
pic.zip (200.61 KB, 下载次数: 55)
可以注意到我为了让整个背景融为一体,所有的背景色都是用的同一种,如果你也要达到一样的效果,请自行编辑图片,把ui背景、卡片背景、图片背景都弄成同一种。
我的色号是#FDF6E3 ,仅供参考。

以上。
回复

使用道具 举报

1

主题

66

帖子

566

积分

高级会员

Rank: 4

积分
566
金钱
500
HASS币
0
发表于 2022-8-12 23:55:26 | 显示全部楼层
你好,大神能把农历的文件也分享一下吗。
回复

使用道具 举报

0

主题

557

帖子

2143

积分

金牌会员

Rank: 6Rank: 6

积分
2143
金钱
1586
HASS币
0
发表于 2022-8-16 14:30:26 | 显示全部楼层
这个有点意思,要可以开门的时候念出来就好了
回复

使用道具 举报

23

主题

258

帖子

1529

积分

金牌会员

Rank: 6Rank: 6

积分
1529
金钱
1271
HASS币
0
发表于 2022-8-17 19:05:18 | 显示全部楼层
前端大佬
回复

使用道具 举报

0

主题

51

帖子

711

积分

高级会员

Rank: 4

积分
711
金钱
660
HASS币
0
发表于 2022-8-30 22:13:49 | 显示全部楼层
请问一下“立秋后”这个是如何弄出来的。NR流咋写
回复

使用道具 举报

2

主题

89

帖子

343

积分

中级会员

Rank: 3Rank: 3

积分
343
金钱
254
HASS币
0
发表于 2022-9-1 13:19:54 | 显示全部楼层
真的做得太可爱了吧
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-3-29 05:21 , Processed in 0.436323 second(s), 30 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表