HomeAssistant 中使用 Vue 构建UI面板的简易方式
一种简易的对 HomeAssistant 进行 UI 自定义的方式 文
发布于

本文导览
HomeAssistant 中使用 Vue 构建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 即可。
© 商业转载请联系站长获得授权;
非商业转载请注明文章来源及链接。
评论