一种简易的对 HomeAssistant 进行 UI 自定义的方式
发布于
今天在 Home Assistant Developer Docs 中看到了一篇关于如何新建侧边栏项目，以及对应的面板内容的教程。教程中使用了 wired-card ，并提示说可以使用任何想用的框架，我便立马想到了 Vue 。
示例代码中给了一些可用的变量，包括：
static get properties() {
return {
hass: { type: Object },
narrow: { type: Boolean },
route: { type: Object },
panel: { type: Object },
};
}其中 hass 就是 HomeAssistant 的实例，narrow 是当前页面是否处于窄屏状态，route 是当前页面的路由信息，panel 是当前页面的信息。
其中当前页面信息可以在 configuration.yaml 中进行配置。
官方的代码我就不重复了，下面直接贴出我的基于 Vue 框架的代码, 可以在此基础上自由发挥。
新建<config>/www/XXPanel.js, <config>指代的是你的HA的配置目录，你要你安装过 HACS 中的lovelace插件，一般也默认会有 www 文件夹了，如果没有就手动新建下，XXPanel.js文件内容如下：
import { createApp, ref, nextTick } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
// custom_panel.js
const CustomPanel = {
template: `
<ha-card header="环境监测">
<div class="card-content">
<p>温度: {{ temperature }}°C</p>
<p>湿度: {{ humidity }}%</p>
<button @click="updateSensors" :disabled="isLoading">
{{ isLoading ? '加载中...' : '刷新数据' }}
</button>
</div>
</ha-card>
`,
data: () => ({
temperature: 0,
humidity: 0,
isLoading: false
}),
methods: {
async updateSensors() {
this.isLoading = true;
const [temp, hum] = await Promise.all([
this.$hass.states['sensor.temperature'].state,
this.$hass.states['sensor.relative_humidity'].state
]);
this.temperature = temp;
this.humidity = hum;
this.isLoading = false;
}
},
mounted() {
nextTick(()=>{
console.log(this.$hass)
this.updateSensors();
this.interval = setInterval(this.updateSensors, 60000);
})
},
beforeUnmount() {
clearInterval(this.interval);
}
};
// 注册自定义元素
customElements.define('xx-panel', class extends HTMLElement {
set hass(hass) {
if (!this._panel) {
this._panel = createApp(CustomPanel).mount(this);
}
this._panel.$hass = hass;
}
});这里在 mounted 钩子函数中，获取了 HomeAssistant 的实例，然后使用 this.$hass.states['sensor.temperature'].state 来获取温度传感器的值。另外使用了 beforeUnmount 钩子函数，在组件卸载时清除定时器，防止内存泄漏。
在 configuration.yaml 文件中添加以下内容：
panel_custom:
- name: xx-panel
# url_path needs to be unique for each panel_custom config
url_path: xx-panel
sidebar_title: XXPanel
sidebar_icon: mdi:server
module_url: /local/XXPanel.js
config:
# Data you want to make available to panel
hello: world其中注意 name 字段，这个字段就是你在自定义元素中注册的名称，也就是 customElements.define('xx-panel', ...) 中的 xx-panel。
最后重启 HA 即可。
© 商业转载请联系站长获得授权；
非商业转载请注明文章来源及链接。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。