用VUE3制作HA卡片

kkzxsews

VUE3 有一个 defineCustomElement方法可以把整个VUE项目打包成自定义元素给这个返回的自定义元素增加上 Ha 卡片必要的属性和方法后就可以注册成卡片在configuration.yaml引入并使用了

https://github.com/fh332393900/threejs-demo是一个和floor3dcard一样加载glb模型的vue3项目
下载到本地 run起来后 修改它的 src/main.js

//引入CSS

复制代码

#three{
height:90vh;
display: flex;
flex-direction: column-reverse
}`,
`@import 'http://192.168.0.155:8123/local/community/myhome/dist/index.css'
`]
const floorcard_my = defineCustomElement(App);

floorcard_my.prototype.config = null;
floorcard_my.prototype.setConfig = function (config:any) {
  this.config = config
}
Object.defineProperties(floorcard_my.prototype,{
  hass: {
    set:function(newhass:any) {
      // console.log(newhass);
      (globalThis as any).hass = newhass
      // console.log((globalThis as any).hass.states)
      myEvent = new CustomEvent('myCustomEvent', {
        detail: {
          message: newhass
        },
        bubbles: true, // 是否冒泡
        cancelable: false // 是否可以取消
      });
      window.dispatchEvent(myEvent)
    }
  }
})
customElements.define('floorcard-my', floorcard_my );

//configuration.yaml
[
{url: main.js的位置,                            type: module},

复制代码

引入后把导入的模型换成自己的 再在代码中仿照floor3dcard绑定实体增加点光源就有类似floor3dcard的效果了

gmshiwoge

                               
登录/注册后可看大图

牛啊 刚刚我才优化我的模型可以试试效果了

bugensui

为什么不直接用floor3dcard

kkzxsews

bugensui 发表于 2024-8-4 01:23
为什么不直接用floor3dcard

floor3dcard开关灯是靠双击模型来触发的，这个事件在手机上是无效的，所以找了个能在鼠标移如模型弹窗的来改造成floor3dcard的样子。

aiqienanguatou

这个和floor3dcard哪个资源占用低啊

bugensui

kkzxsews 发表于 2024-8-4 10:30
floor3dcard开关灯是靠双击模型来触发的，这个事件在手机上是无效的，所以找了个能在鼠标移如模型弹窗的 ...

我手机上，双击是可以的，你是不是搞错了

kkzxsews

bugensui 发表于 2024-8-4 14:15
我手机上，双击是可以的，你是不是搞错了

那应该是我没配置好，不过无所谓了 我主要也是希望以后能看到有用前端框架做的卡片 floor3d-card这种对我这种公式人来说阅读难度太高了。

bugensui

kkzxsews 发表于 2024-8-4 15:32
那应该是我没配置好，不过无所谓了 我主要也是希望以后能看到有用前端框架做的卡片 floor3d-card这种对我 ...

操作确实是双击的，双击开灯，双击开电风扇，空调等，应该是配置里，你没有配置好。文档里我记得有

kkzxsews

bugensui 发表于 2024-8-4 15:38
操作确实是双击的，双击开灯，双击开电风扇，空调等，应该是配置里，你没有配置好。文档里我记得有

...

感谢 我竟然又因为没配置好绕了个大圈 早知道就发帖问了

佚蓝

floor3d里面可以用这种方式配置卡片吗？