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

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

 找回密码
 立即注册
查看: 1153|回复: 28

[UI界面] button_card手搓万年历

[复制链接]

10

主题

70

帖子

1533

积分

论坛UI达人

积分
1533
金钱
1453
HASS币
28
发表于 2024-11-8 15:47:14 | 显示全部楼层 |阅读模式
本帖最后由 消逝 于 2024-11-8 15:51 编辑

1、主UI界面教程跳转:HA彩平图UI分享(2024-11-08更新代码架构)-保姆级教程!
2、部分数据来源本论坛:node-red本地计算万年历流程+万年历卡片
3、部分数据来源:lunar (6tail.cn)

微信截图_20241108152920.png



------------以下正文----------
1、新建辅助元素-计数器:counter.year(范围1900到2100)
2、新建辅助元素-输入选择表:input_select.month(添加选项:01、02、03……10、11、12)
3、新建辅助元素-输入日期时间值,选择日期:input_datetime.datetap
4、NR流,导入配置Server和Device,原计划配置一个实体+多属性的,但是UI界面不刷新,只能换成单个实体,所以实体有点多
游客,如果您要查看本帖隐藏内容请回复

5、(UI是普通的仪表盘模式的)放置UI代码
游客,如果您要查看本帖隐藏内容请回复


6、(UI是yaml文件形式的)放置UI代码
xiaoshi-ui.yaml放置:         \config\dashboards\xiaoshi-ui.yaml
time.yaml放置:                 \config\dashboards\ui\time.yaml
lunar.yaml放置:                \config\dashboards\popup\lunar.yaml
lunar_calendar.yaml放置:\config\dashboards\popup\lunar_calendar.yaml
calendar.yaml放置:          \config\dashboards\button_templates\calendar.yaml

游客,如果您要查看本帖隐藏内容请回复


7、调整你喜欢的配色
          #####################   时间/日期    #####################
          - type: custom:button-card  
            variables: 
              font_color_main: red    ##黄历部分,重点加粗部分颜色 
              font_color: black       ##黄历部分,普通部分颜色
              font_color_icon: white   ##黄历部分,4神位图形里的颜色
              font_calendar: black      ##日历部分,主要文本字体的颜色
              font_calendar_min: Grey   ##日历部分,次要文本字体的颜色 
              font_calendar_icon: black ##日历部分,翻页按键的颜色
              background_max: OldLace   ##深色部分颜色
              background_min: FloralWhite  ##浅色部分颜色 
              background_icon: red         ##图形部分颜色 
              background_tap_max: rgb(127,255,212,0.8)      ##选中日期的颜色-深色
              background_tap_min: rgb(127,255,212,0.3)      ##选中日期的颜色-浅色
              line_lunar: NavajoWhite           ##黄历边框浅色
              line_calendar : NavajoWhite       ##日历边框浅色


评分

参与人数 7金钱 +80 收起 理由
小小偶白 + 8 厉害了word楼主!
firewater + 10 论坛有你更精彩!
summ99111 + 8 感谢楼主分享!
hhh. + 16 高手,这是高手!
隔壁的王叔叔 + 12 真牛逼啊
sorrypqa + 16 高手,这是高手!
DDDear + 10 膜拜大神!

查看全部评分

回复

使用道具 举报

0

主题

30

帖子

120

积分

注册会员

Rank: 2

积分
120
金钱
90
HASS币
0
发表于 2024-11-8 16:00:46 | 显示全部楼层
66666666666666
回复

使用道具 举报

3

主题

32

帖子

343

积分

中级会员

Rank: 3Rank: 3

积分
343
金钱
311
HASS币
0
发表于 2024-11-8 16:13:32 | 显示全部楼层
厉害6666
回复

使用道具 举报

0

主题

11

帖子

118

积分

注册会员

Rank: 2

积分
118
金钱
107
HASS币
0
发表于 2024-11-8 16:33:08 | 显示全部楼层
厉害6666 过来学习的
回复

使用道具 举报

20

主题

136

帖子

817

积分

高级会员

Rank: 4

积分
817
金钱
681
HASS币
0
发表于 2024-11-9 00:20:46 | 显示全部楼层
支持。手搓太耗时了
回复

使用道具 举报

9

主题

226

帖子

2205

积分

论坛UI达人

积分
2205
金钱
1979
HASS币
0
发表于 2024-11-9 00:49:32 | 显示全部楼层
这个日期选择的设计真不错。

直接使用“input_datetime.datetap”直接输出给农历计算节点, 只需要一个function节点就可以实现全部输出,这样会精简很多代码。

例:  const lunarDate = lunar.Lunar.fromDate(new Date(msg.payload));      可以尝试一下。
回复

使用道具 举报

5

主题

128

帖子

1042

积分

金牌会员

Rank: 6Rank: 6

积分
1042
金钱
914
HASS币
0
发表于 2024-11-9 09:39:24 | 显示全部楼层
厉害,button card是不得不越过的大山
回复

使用道具 举报

10

主题

70

帖子

1533

积分

论坛UI达人

积分
1533
金钱
1453
HASS币
28
 楼主| 发表于 2024-11-9 12:53:31 | 显示全部楼层
hhh. 发表于 2024-11-9 00:49
这个日期选择的设计真不错。

直接使用“input_datetime.datetap”直接输出给农历计算节点, 只需要一个fun ...

我主要是对这个时间戳是真不熟悉,我试试
回复

使用道具 举报

10

主题

70

帖子

1533

积分

论坛UI达人

积分
1533
金钱
1453
HASS币
28
 楼主| 发表于 2024-11-9 12:57:11 | 显示全部楼层
hhh. 发表于 2024-11-9 00:49
这个日期选择的设计真不错。

直接使用“input_datetime.datetap”直接输出给农历计算节点, 只需要一个fun ...

var dateTime = msg.datetime + "T00:00:00";
var lunarDate = Lunar.Lunar.fromDate(new Date(dateTime));  //获取点击数后的函数头
我就是这么写的啊,只是要拼一个"T00:00:00",要不然好像不行
回复

使用道具 举报

10

主题

70

帖子

1533

积分

论坛UI达人

积分
1533
金钱
1453
HASS币
28
 楼主| 发表于 2024-11-9 13:05:22 | 显示全部楼层
hhh. 发表于 2024-11-9 00:49
这个日期选择的设计真不错。

直接使用“input_datetime.datetap”直接输出给农历计算节点, 只需要一个fun ...

我那个 农历部分不复杂,基本还是用的你得教程里的代码,
我加了日历那部分代码有点复杂,要定位日期位置(1号显示在哪个格子,在定位出其他格子应该显示几号)
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-12-14 17:33 , Processed in 0.158869 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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