用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的效果了

kkzxsews

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

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

kkzxsews

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

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

kkzxsews

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

...

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

kkzxsews

佚蓝 发表于 2024-8-4 16:59
floor3d里面可以用这种方式配置卡片吗？

理论上来说把别人的卡片添加进自己的卡片也是可行的 但不是用上面的方式  而是用在源码里用JavaScript里添加html元素的方式加入.   我刚把mushroom-light-card加入到我的这张卡片 你可以参考一下

 customElements.whenDefined('mushroom-light-card').then( () => {
      var classLightCard:any = customElements.get('mushroom-light-card')
      lightcard1 = new classLightCard();
      
      // var lightcard1:any = document.createElement("mushroom-light-card")
      lightcard1.setConfig({entity: 'light.leishi_eps127_fb44_light'})
      // lightcard1.render();
      lightcard1.hass = hass.value
      console.log(lightcard1.hass)
      console.log(lightcard1.render())
      // air_con.value.appendChild(lightcard1)
      // console.log(lightcard1.getCardSize())
      
      console.log(air_con.value.appendChild(lightcard1))
    })

    }, 3000);

复制代码

最关键是那个 hass 你要在卡片的hass刷新的时候也把lightcard1的hass也重新赋值 不然它就不会有变化