交流一下基于Mushroom的手机端面板设计

relliky

我研究的没有你多。我就一行放两个增加效率。

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

主面板我现在用的template来显示更多的房间内容，然后用这个按键导航。


我现在最不爽mushroom的就是不能像ios16一样，如果灯开的时候，卡片整个不会变颜色，只有那个圆里面的图标变颜色，所以不明显。不太爽。

relliky

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个放下面组成。

relliky

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

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

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

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

relliky

myhades 发表于 2023-1-9 16:35
python太差了，还得学学
但是我一排只有一个东西，所以不会很乱

用你自己熟悉的脚本语言就行。

这个是之前研究出来的方法，但是语言本身不重要，重要的是运用模板/蓝图的理念就行。
https://bbs.hassbian.com/forum.php?mod=viewthread&tid=17467
https://bbs.hassbian.com/thread-17621-1-1.html

relliky

bluefire1982 发表于 2023-9-9 11:17
卡片变色可以通过card-mod实现。

card-mod我好像就会点最基本的，跟CSS有关的就不知道怎么学习了。

而且我要卡片背景颜色根据实体开关来变化。可能还得加点别的卡片

relliky

bluefire1982 发表于 2023-9-10 10:29
可以的，card-mod中用template。

哇塞，这个可以有

relliky

bluefire1982 发表于 2023-9-10 10:29
可以的，card-mod中用template。

花了几个小时学习了一下card-mod

chrome里面可以调试还是很方便的，上手比我想象中的简单。。现在已经会找css变量了。 感谢

relliky

bluefire1982 发表于 2023-9-10 22:30
高手！期待更完美的作品。

做出来了，仿ios16的开灯变白，关灯变黑


代码如下

type: custom:mushroom-light-card
fill_container: true
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: true
collapsible_controls: false
name: ' Lamp 1'
icon: ''
entity: light.master_room_lamp_1
card_mod:
  style: >
    :host {
           --ha-card-background:  {% if states(config.entity) in ['on'] %}
                                      rgba(245, 245, 245, 0.7)  
                                  {% else  %} 
                                      rgba(10, 10, 10, 0.4)  
                                  {% endif%};

           --primary-text-color:  {% if states(config.entity) in ['on'] %}
                                      black                                            
                                  {% else  %}
                                      white                                           
                                  {% endif%};

          --secondary-text-color : {% if states(config.entity) in ['on'] %}
                                      rgba(100, 100, 100, 1)
                                   {% else  %} 
                                      rgba(220, 220, 220, 1) 
                                   {% endif %};
    }

    ha-card > mushroom-card > div > mushroom-button:nth-child(2) {  
      --bg-color:   {% if states(config.entity) in ['on'] %} 
                        rgba(245, 245, 245, 0.4) 
                    {% else %} 
                        rgba(10, 10, 10, 0.4) 
                    {% endif %};
    }

    ha-card > mushroom-card > div > mushroom-button:nth-child(3) {  
      --bg-color:   {% if states(config.entity) in ['on'] %} 
                        rgba(245, 245, 245, 0.4) 
                    {% else %} 
                        rgba(10, 10, 10, 0.4) 
                    {% endif %};
    }

复制代码

感谢指点。还不够像ios16，再琢磨一下把icon颜色弄一下, 各个颜色还需要调整一下。不过那个等下周末再弄吧，可以睡觉咯