三十三 Home Assistant 创建自定义面板

创建自定义面板

任何组件都有可能向前端添加一个面板。面板将全屏渲染，并可以通过JavaScript实时访问Home Assistant对象。在应用程序中，地图、日志和历史记录等都是这样的例子。

<dom-module id='ha-panel-hello'>
  <template>
    <style>
      p {
        font-weight: bold;
      }
    </style>
    <p>Hello {{who}}. Greetings from Home Assistant.</p>
  </template>
</dom-module>

<script>
Polymer({
  is: 'ha-panel-hello',
  properties: {
    // Home Assistant object
    hass: {
      type: Object,
    },
    // If should render in narrow mode
    narrow: {
      type: Boolean,
      value: false,
    },
    // If sidebar is currently shown
    showMenu: {
      type: Boolean,
      value: false,
    },
    // Home Assistant panel info
    // panel.config contains config passed to register_panel serverside
    panel: {
      type: Object,
    },
    who: {
      type: String,
      computed: 'computeWho(panel)',
    }
  },

  computeWho: function (panel) {
    return panel && panel.config && panel.config.who ? panel.config.who : 'World';
  },
});
</script>

2. 在你的 configuration.yaml 文件中为新面板创建一个条目：

   panel_custom:
     -name: hello
      sidebar_title: Hello World
      sidebar_icon: mdi:hand-pointing-right
      url_path: hello

示例页面

总结

本文介绍了在Home Assistant中创建自定义面板的方法。包括创建包含视图元素构建块和相关属性及计算函数的HTML文件，以及在配置文件中为面板配置名称、标题、图标和URL路径等信息。通过这些步骤，开发者可以为Home Assistant前端添加具有特定功能和显示内容的自定义面板，实现个性化的用户界面扩展，满足不同场景和用户需求，增强应用的功能性和用户体验。