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

 找回密码
 立即注册
查看: 7576|回复: 47

[UI界面] 交流一下基于Mushroom的手机端面板设计

  [复制链接]

3

主题

43

帖子

524

积分

高级会员

Rank: 4

积分
524
金钱
481
HASS币
0
发表于 2023-1-6 22:19:41 | 显示全部楼层 |阅读模式
本帖最后由 myhades 于 2023-5-15 19:47 编辑

[2023-4-17 更新] 更新主页演示动图
![Home UI Design](

                               
登录/注册后可看大图
)
[2023-2-27 更新] 出现了几个大的改变值得记录一下,顺便更新图片
[主题升级]
使用主题 `Metrology-for-Hass`,一个以metro和fluent的极简扁平风设计的主题。更改了部分内容以匹配:
1)使用欢迎语取代“家庭”标题。
2)调整过长的标题
3)取消部分非mushroom卡片的圆角
[界面设计]
使用css的sticky属性固定一个horizontal排版的按钮在所有view底部,参照app设计的三明治结构,最大化优化导航效率(尤其是在kiosk模式下):
1)主页:保留欢迎语、状态chips、快捷指令buttons、高优先级通知;去除"家庭"横幅、通知中心按钮
2)区域:将所有区域导航移动到此页面,按钮作为导航至、返回至区域的按钮
3)更多:显示用户信息(以及传感器更新信息?)、通知中心(不在处于二级位置,类似与ha自己的updates与repair栏目)、各个side menu常用功能、导航至解除kiosk面板的按钮
[功能升级]
1)所有脚本执行均带完整的运行状态显示(自己技术不行只有不嫌麻烦,使用一个helper dropdown记录状态,主脚本和一个watchdog自动化监测主脚本运行,弄这么麻烦主要是设备多了,执行时间变长了,失败概率慢慢变大了, HA的continue_on_error并不好使)
[todo]
1)低电量、不可用检测,集成至通知
2)使用按钮导航至companion的设置,没查到资料

——————————————————————————————————————
2023-2-3 更新
已经部署到给家里人用的实体上了,虽然还是没用模板套,但是几年内家里的智能设备不会有什么变化了,只可能增添几个东西,手工维护足以
升级部分:
1)滑动切换“状态”至“快捷设置”
2)一排安放两个房间,长按关闭房间内的所有设备
3)网络和系统两个板块重做,同时与“区域”隔开
4)Kiosk隐藏边栏和顶部,(todo:在让chip和title水平堆叠实现向上一级导航的按钮)(求教怎么把companion的设置放进lovelace)
5)部分内容使用Browser_mod2+Popup做简单的确认弹窗

——————————————————————————————————————

分享一下最近用Mushroom做的一个个人认为比较简约的面板。
特点:
1)统一的界面风格:使用大标题区分View,小标题区分类型,活动状态(如”正常/异常/不可用“)使用统一的颜色与小图标进行标注
2)通知中心:使用条件卡片对部分不需要推送通知,但是需要注意的事情标注在这里
3)大量使用template:典型例子是系统/网络两个板块,使用template做了很多基于状态的图标;以及米家净水器、电饭煲、LG的电器这几个不太好接入的设备,
这几个集成也不是特别稳定,所以template同时用路由器提供的device_tracker和集成提供的数据共同判断”打开/不可用/关闭“的状态,再加上额外状态。
4)家人友好:简单、快捷、明了。包含所有基础功能和精简信息,不搞花哨。

正在完善的地方:
1)准备将部分设备(如扫地机)的二级菜单单独放进另外一个面板的view里面,这样就不用弄browser_mode+popup,只有最简单的确认弹窗用这个做。
2)首页区域按钮交互优化,如长按关闭该区域所有设备,但是想用template做统一适配,还不知道怎么写

需要大家帮忙提建议的问题:
1)kiosk模式隐藏下,ios状态栏沉浸色如何更改?
2)现在仅仅只针对移动端,还在想宽屏设备怎么做排版,但因为家里没有那种壁挂的平板,所以其实没啥做排版优化的动力。
3)在Subview下有办法使用ios的右滑手势返回上一级吗?

因为现在面板实在不太完善,就不放配置了,发这个纯粹是给大家一个思路参考。
如果大家有兴趣的话,可以后续完善了再补上来。

1.png
2.png
Picture1.png

新版2

新版2

评分

参与人数 2金钱 +18 收起 理由
隔壁的王叔叔 + 10 高手,这是高手!
DDDear + 8 感谢楼主分享!

查看全部评分

回复

使用道具 举报

7

主题

1072

帖子

3361

积分

论坛元老

Rank: 8Rank: 8

积分
3361
金钱
2289
HASS币
0
发表于 2023-1-7 10:56:49 | 显示全部楼层
感谢楼主 分享
回复

使用道具 举报

29

主题

921

帖子

4160

积分

论坛元老

Rank: 8Rank: 8

积分
4160
金钱
3229
HASS币
70
发表于 2023-1-8 04:46:10 | 显示全部楼层
我研究的没有你多。我就一行放两个增加效率。

https://bbs.hassbian.com/thread-17935-1-1.html

主面板我现在用的template来显示更多的房间内容,然后用这个按键导航。
Screenshot 2023-01-07 at 20.45.21.png

我现在最不爽mushroom的就是不能像ios16一样,如果灯开的时候,卡片整个不会变颜色,只有那个圆里面的图标变颜色,所以不明显。不太爽。
我家全屋智能的HA设置 https://github.com/relliky/Tais_Home_Assistant_Config
回复

使用道具 举报

3

主题

43

帖子

524

积分

高级会员

Rank: 4

积分
524
金钱
481
HASS币
0
 楼主| 发表于 2023-1-8 14:40:18 | 显示全部楼层
relliky 发表于 2023-1-8 04:46
我研究的没有你多。我就一行放两个增加效率。

https://bbs.hassbian.com/thread-17935-1-1.html

挺好看的诶,但是我看房间导航是个subview?请问你首页放了些什么内容,我现在在纠结哪些东西放到最前面是最有用的。
以及这个按钮是咋做的啊
回复

使用道具 举报

29

主题

921

帖子

4160

积分

论坛元老

Rank: 8Rank: 8

积分
4160
金钱
3229
HASS币
70
发表于 2023-1-8 18:36:19 | 显示全部楼层
本帖最后由 relliky 于 2023-1-8 18:38 编辑
myhades 发表于 2023-1-8 14:40
挺好看的诶,但是我看房间导航是个subview?请问你首页放了些什么内容,我现在在纠结哪些东西放到最前面 ...

哈哈,这个就是首页了,再上就没有了。我只是把它变成subview可以多在最上面显示home这几个字。

按钮原文件在这里
https://github.com/relliky/Tais_ ... rall_dashboard.yaml

写好一个以后我用python写模板生成每个房间的。

一个按钮的写法在这里

    type: custom:stack-in-card
    mode: vertical
    cards:
    - type: custom:mushroom-template-card
      icon: mdi:silverware-clean
      icon_color: blue
      layout: horizontal
      entity: input_boolean.placeholder
      fill_container: true
      primary: Kitchen
      secondary: "{% set temperature_sensor = 'sensor.kitchen_temperature_sensor' %}\n{% set motion_postfix     = 'kitchen_motion' %}\n{{ states(temperature_sensor) }}\xB0C | {{\n (as_timestamp(now()) -\n as_timestamp(states.group[motion_postfix].last_changed)) |\n timestamp_custom("%H:%M", false) }}  | {{states('vacuum.x1')}}"
      tap_action:
        action: navigate
        navigation_path: /lovelace-kitchen/kitchen
    - type: custom:stack-in-card
      mode: horizontal
      cards:
      - type: custom:mushroom-template-card
        icon: "{% set occupancy = 'input_select.kitchen_occupancy' %} {% if   is_state(occupancy, 'Outside') %}\n  mdi:door-closed\n{% elif is_state(occupancy, 'Just Entered') %}\n  mdi:arrow-right-circle\n{% elif is_state(occupancy, 'In Sleep') %}\n  mdi:sleep\n{% else %}\n  mdi:account-multiple\n{% endif %}"
        icon_color: "{% set occupancy = 'input_select.kitchen_occupancy' %}         {% if   is_state(occupancy, 'Outside') %} {% elif is_state(occupancy, 'Just Entered')%}\n  green\n{% elif is_state(occupancy, 'In Sleep') %}\n  blue            \n{% else %}\n  purple\n{% endif %}"
        layout: horizontal
        entity: input_boolean.placeholder
        fill_container: true
        primary: null
        secondary: null
        tap_action:
          action: navigate
          navigation_path: /lovelace-kitchen/kitchen
      - type: custom:mushroom-template-card
        icon: "{% set motion = 'group.kitchen_motion' %}        \n{% if is_state(motion, 'on') %}\n  mdi:run-fast\n{% else %}\n  mdi:shoe-print\n{% endif %}"
        icon_color: "{% set motion = 'group.kitchen_motion' %}        \n{% if is_state(motion, 'on') %}\n  pink\n{% endif %}"
        layout: horizontal
        entity: input_boolean.placeholder
        fill_container: true
        primary: null
        secondary: null
        tap_action:
          action: navigate
          navigation_path: /lovelace-kitchen/kitchen
      - type: custom:mushroom-template-card
        icon: "{% set thermostat = 'climate.kitchen' %}        \n{% if is_state(thermostat, 'heat') %}\n  mdi:heating-coil\n{% else %}\n  mdi:snowflake\n{% endif %}"
        icon_color: "{% set thermostat = 'climate.kitchen' %}        \n{% if is_state(thermostat, 'heat') %}\n  red\n{% endif %}"
        layout: horizontal
        entity: input_boolean.placeholder
        fill_container: true
        primary: null
        secondary: null
        tap_action:
          action: navigate
          navigation_path: /lovelace-kitchen/kitchen
      - type: custom:mushroom-template-card
        icon: "{% set light = 'group.kitchen_lights_and_tvs' %}        \n{% if is_state(light, 'on') %}\n  mdi:floor-lamp\n{% else %}\n  mdi:floor-lamp-outline\n{% endif %}"
        icon_color: "{% set light = 'group.kitchen_lights_and_tvs' %}                \n{% if is_state(light, 'on') %}\n  yellow\n{% endif %}"
        layout: horizontal
        entity: input_boolean.placeholder
        fill_container: true
        primary: null
        secondary: null
        tap_action:
          action: navigate
          navigation_path: /lovelace-kitchen/kitchen

主要用custom:stack-in-card在卡片里面塞卡片。然后用了5个template卡片,1个放上面,4个放下面组成。

我家全屋智能的HA设置 https://github.com/relliky/Tais_Home_Assistant_Config
回复

使用道具 举报

9

主题

178

帖子

1363

积分

金牌会员

Rank: 6Rank: 6

积分
1363
金钱
1185
HASS币
0
发表于 2023-1-9 00:45:56 来自手机 | 显示全部楼层
留痕备用
回复

使用道具 举报

3

主题

43

帖子

524

积分

高级会员

Rank: 4

积分
524
金钱
481
HASS币
0
 楼主| 发表于 2023-1-9 01:03:04 | 显示全部楼层
relliky 发表于 2023-1-8 18:36
哈哈,这个就是首页了,再上就没有了。我只是把它变成subview可以多在最上面显示home这几个字。

按钮原文 ...

谢谢分享,晚点试试
我觉得可以这样
用这个插件堆叠条件卡,条件卡里在嵌套二级菜单,仅在活动的时候展开。
不过这种基本都要单独写,没办法批量生成
回复

使用道具 举报

29

主题

921

帖子

4160

积分

论坛元老

Rank: 8Rank: 8

积分
4160
金钱
3229
HASS币
70
发表于 2023-1-9 07:09:28 | 显示全部楼层
本帖最后由 relliky 于 2023-1-9 07:15 编辑

>> 用这个插件堆叠条件卡,条件卡里在嵌套二级菜单,仅在活动的时候展开。

我有试过,这样看的不工整。有的展开有的没有,层次不齐。

>> 不过这种基本都要单独写,没办法批量生成

可以用模版生成的,我大部分代码包括自动化全是自动生成的,因为我有好几个房间,单独写太难维护了。
下面就是我的python对每个房间这个导航卡片的模版(github需要科学)
https://github.com/relliky/Tais_ ... onfig_yaml.py#L1468


我家全屋智能的HA设置 https://github.com/relliky/Tais_Home_Assistant_Config
回复

使用道具 举报

0

主题

562

帖子

2183

积分

金牌会员

Rank: 6Rank: 6

积分
2183
金钱
1621
HASS币
0
发表于 2023-1-9 08:35:02 | 显示全部楼层
感谢分享,很实用
回复

使用道具 举报

2

主题

712

帖子

4888

积分

论坛元老

Rank: 8Rank: 8

积分
4888
金钱
4176
HASS币
85
发表于 2023-1-9 09:51:46 | 显示全部楼层
感謝分享
回复

使用道具 举报

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

本版积分规则

Archiver|手机版|小黑屋|Hassbian

GMT+8, 2024-4-27 09:17 , Processed in 0.103145 second(s), 35 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

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