手机端UI-长篇大论之-主页

hhh.

导航：

• 预览篇-   手机端UI-长篇大论之-预览
• 主页篇-   手机端UI-长篇大论之-主页
• 区域篇-   手机端UI-长篇大论之-区域
• 我的篇-   手机端UI-长篇大论之-我的
• 万年历-   万年历流程+卡片
  

前言：

说明：

• 一般问题，请善用论坛和网页搜索，里面有答案。
• 也可以借助AI工具，可以很方便的解决问题。如：通义千问，GhatGPT。
  

页面结构：

• 页面主要有上，中，下三个部分，通俗理解就是：页眉→内容→页脚（dock栏）。
• 其中上和下这两个部分的卡片，分别固定在屏幕的页眉和页脚。
• 其中内容部分由：信息组卡片→主要信息卡片→助手卡片→媒体条件卡片→小爱同学卡片→空白卡片组成。
  

前期准备：

添加群组：

• 添加方式：设备与服务→辅助元素→创建辅助元素→群组：为实体添加群组。
• 分别为：全屋灯光组，全屋温度组，全屋湿度组，全屋光照组，全屋门窗组，全屋人体检测组。
• 比如灯光组，如果实体较多，可以单独给区域添加灯光组，最后添加为全屋灯光组，其他实体类似。
  

添加页面：

• 因页面跳转需要，需要添加5个页面，可见性设置为“不可见”或者“子视图”。
• 分别为：农历，模式，灯组，设备，网络。
  

那请泡好茶，我们开始卡片的添加

---

重要：

• 在视图配置页面修改主题为：minimalist-mobile，包含手机端UI全部界面。
• 在视图配置页面修改视图类型为：默认类型（部件），包含：主页，区域，我的。
  

卡片添加：     

• 使用手动模式添加卡片。
• 因dock栏需要，避免dock栏遮挡主要内容，新增空白卡片，用于下滑余量。
• 请按照：页眉→信息组卡片→主要信息卡片→助手卡片→媒体条件卡片→小爱同学卡片→空白卡片→dock栏。这个顺序依次添加卡片。
• 文件按照数字顺序命名，按照顺序添加即可。
  

需要修改：

• 需要修改的部分，主要修改这个代码：“entity:” 后面的实体ID。
• 非需必要，请勿改变代码行的缩进，不懂的代码请勿随意删除。
• 这个颜色的部分整篇代码都需要更改。sensor.time  这个就是需要显示的实体ID。
  

   card:
        type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: sensor.time
            content: '{{ states(entity) }}'
            tap_action:
              action: more-info


              - entity: sensor.wen_shi_du_chuan_gan_qi_wen_du_zu
                name: 平均
              - entity: sensor.a4c13864fa00_temperature
                name: 客厅
              - entity: sensor.a4c138162cdb_temperature
                name: 主卧

• 特殊部分：如模版，就需要更改模版中的实体ID。
• 这种颜色的部分属于模版（模版就是使用代码获取实体信息，或者是改变实体信息，用于显示）。
• 这个颜色的部分整篇代码都需要更改。
  

type: template
    content: >
      {% if is_state('binary_sensor.quan_wu_men_chuang_chuan_gan_qi_zu', 'on')
      %}
                  已开启
                {% else %}
                  已关闭
                {% endif %}
    entity: binary_sensor.quan_wu_men_chuang_chuan_gan_qi_zu
    icon: >-
      {% if is_state('binary_sensor.quan_wu_men_chuang_chuan_gan_qi_zu', 'on')
      %}
                  mdi:door-open
                {% else %}
                  mdi:door-closed
                {% endif %}

• 页面跳转部分
• 需要修改这个颜色中的页面地址，/dashboard-cellphone/lan 这个地址就是添加好的页面地址栏。
  

      type: custom:mushroom-template-card
      primary: ''
      secondary: 网络
      icon: mdi:network-outline
      layout: vertical
      icon_color: cyan
      tap_action:
        action: navigate
        navigation_path: /dashboard-cellphone/lan


其他：

• 天气只支持，和风天气，链接：和风天气
• 请把图片文件夹添加到www文件夹下。
• 重新制作dock栏卡片，不同页面需要使用不同的dock栏卡代码，附件中有明确区分。
  

遇到问题，或者有新颖的想法，请说明。谢谢！

主页1

主页2

longtor

抢个二楼。学习。

jjss520

dock栏跳转不过去呀

relliky

感谢楼主！

我也有类似的卡片模板的想法，想着一起分享一下。我现在做的是把卡片的模板做的易用一点，不放到yaml，但是放到python里面， 这样要生成yaml的时候，只用传递个参数就可以了。 比如包括你用的我那个区域导航的卡片代码其实我后来是这样的模板生成的：
https://github.com/relliky/Tais_Home_Assistant_Config/blob/master/python_templates/gen_config_yaml.py#L3180

最后出来的效果是这样



如果要是要分享的话，我想尽量做的简单，像楼主一样弄一套卡片，但可以很简单的生成，现在的想法是使用模板的人只需要类似这样输入下面参数，就能生成yaml的卡片。

cards += getEntityCard(entity='media_player.tv',    entity_name='电视',   card_type='播放卡片1')
cards += getEntityCard(entity='light.kitchen_light',entity_name='厨房灯', card_type='灯卡片1')
cards += getEntityCard(entity='light.toilet_light', entity_name='厕所灯', card_type='灯卡片1')

复制代码

这样的好处是对于使用的人来说更好的维护（比如获得模板更新升级的时候就不需要每次都得手动替换)。

至于排版是暂时不打算做进去的，排版模板这个东西不易于分享，容易变成HKI一样的难用的东西。这个个人建议需要排版的人自己手动写排版模板，引用这个卡片模板。

我因为自己需要已经做了部分功能https://github.com/relliky/Tais_ ... .py#L417C35-L417C51， 等再有点时间，我把你的这些卡片也加进去行吗？

hhh.

relliky 发表于 2024-4-26 20:22
感谢楼主！

我也有类似的卡片模板的想法，想着一起分享一下。我现在做的是把卡片的模板做的易用一点，不放 ...

可以呀，后期我发出的全部卡片，都可以添加进去。

关于区域卡片这一块，我想做的尽可能的一目了然，通过图标，图标颜色，徽标，徽标颜色去展示状态，因为主题框架统一使用的mushroom风格，其他卡片也会用此方法，目前可能不太完善，后期卡片更新，你是不是要同步更新？或者我同你一样把卡片代码上传到GitHub，你直接去调用呢？

relliky

hhh. 发表于 2024-4-26 20:55
可以呀，后期我发出的全部卡片，都可以添加进去。

关于区域卡片这一块，我想做的尽可能的一目了然，通过 ...

感谢。比如你上传的yaml是

type: custom:mushroom-climate-card,
show_temperature_control: True,
collapsible_controls: False,
name: <card_name>,
icon: <card_icon>,
entity: <entity>

复制代码

我不能直接调用yaml，得先转换成python（基本上和json格式一致），再加上参数之类得，基本上得加工一下。不过如果你能传到哪里是最好的，这样的话还可以更新。当然，最好的就是咱俩合力搞个python的项目，每个卡片类似的是这种代码

if card_type == "空调暖气卡片1":
      card = {
        "type": "custom:mushroom-climate-card",
        "show_temperature_control": True,
        "collapsible_controls": False,
        "name": card_name,
        "icon": card_icon,
        "entity": entity        
      }

复制代码

维护这个肯定是最方便的。如果你能上传成这样的格式，大家就可以直接用了。

使用的话只需要敲下面代码一次，以后就可以自动生成yaml代码和更新了

       cards += getEntityCard(entity='climate.air_conditioner', card_name='空调', card_icon='mdi:air-conditioner', card_type='空调暖气卡片1')

复制代码

hhh.

删删删删

hhh.

删删删删

hhh.

relliky 发表于 2024-4-26 21：21
感谢。比如你上传的yaml是

我不能直接调用yaml，得先转换成python（基本上和json格式一致），再加上参数 ...

大佬，莫要高看我，我对于python一窍不通，准确说，我对于编程一窍不通。

不过我使用chatGPT试了一下，可以转译为python。
详细说一下，我上传的卡片归类在一起吗？还是把卡片区分开？
这个是我提交的库，你看看是不是这样测试地址

<font _mstmutation="1" _msttexthash="33759083878" _msthash="104">[code]config = {
 “type”： “custom：mod-card”，
 “card”： {
 “type”： “custom：button-card”，
 “show_icon”： false，
 “show_state”： false，
 “show_name”： false，
 “styles”： {
 “grid”： [
 {“grid-template-areas”： '“a a b c”'}，
 {“grid-template-columns”： “1fr 3fr 1fr 1fr”}，
 {“grid-template-rows”： “1fr”}
 ]，
 “card”： [{“padding”： “8px”}]
 }，
“custom_fields”： {
 “a”： {
 “card”： {
 “type”： “custom：mushroom-chips-card”，
 “chips”： [
 {“type”： “menu”}
 ]
 }
 }，
 “b”： {
 “card”： {
 “type”： “custom：mushroom-chips-card”，
 “chips”： [

 { “type”： “template”，
 “entity”： “sensor.time”，
 “content”： “{{ states（entity） }}”，
“tap_action”： {“action”： “more-info”}

 } ]
 }
 }，
 “c”： {
 “card”： {
 “type”： “custom：mushroom-chips-card”，
 “chips”： [

 { “type”： “template”，
 “entity”： “sensor.shi_chen”，
 “content”： “{{ states（entity） }}”，
 “tap_action”： {“action”： “more-info”}

 } ]
 }

 } }
 }，
 “card_mod”： {
 “style”： “”“
 ：host {
 z-index： 5;
位置：粘性;
位置：-webkit-sticky;
顶部：0;</font>
            }
        """
    }
}

复制代码

[/代码]

hhh.

删删删删