Hi all.
I’m trying to create my first card. I try to create a card to configure from home assistant my devices sonoff with firmware tasmota. At this moment I am faced with the first problem. How to send a mqtt message from a button.
Does anyone know what would be the best way to do it?
Thank you
This is my first card. I do not know how this works and I do not find documentation. A question arises in my code and is that the hass function is executed every so often. This causes the click event to be created multiple times. How to do to solve this. Thank you
class MyCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: ‘open’ });
}
setConfig(config) {
var x;
//if (!config.entity) {
// throw new Error(‘Please define an entity’);
//}
const root = this.shadowRoot;
if (root.lastChild) root.removeChild(root.lastChild);
const cardConfig = Object.assign({}, config);
if (!cardConfig.scale) cardConfig.scale = "50px";
if (!cardConfig.from) cardConfig.from = "left";
const card = document.createElement('ha-card');
const content = document.createElement('div');
content.id = "value"
const title = document.createElement('div');
title.id = "title"
for(x=0;x<cardConfig.entities.length;x++) {
title.innerHTML += `
<div class="item" id="a${x}">
${cardConfig.entities[x].name}
<ha-icon id="a1" icon=mdi:timer></ha-icon>
</div>
`;
}
const style = document.createElement('style');
style.textContent = `
ha-card {
text-align: center;
--base-unit: ${cardConfig.scale};
padding: calc(var(--base-unit)*0.6) calc(var(--base-unit)*0.3);
}
.tl {
background: var(--disabled-text-color);
}
.tl.disabled {
background: var(--paper-item-icon-color);
}
#value {
font-size: calc(var(--base-unit)*0.3);
line-height: calc(var(--base-unit)*0.3);
color: var(--primary-text-color);
}
#title {
font-size: calc(var(--base-unit) * 0.5);
line-height: calc(var(--base-unit) * 0.5);
color: var(--primary-text-color);
}
.item {
display: flex;
justify-content: space-between;
padding: 8px;
align-items: left;
cursor: pointer;
}
`;
card.appendChild(title);
card.appendChild(content);
card.appendChild(style);
root.appendChild(card);
cardConfig.height = '140px';
this._config = cardConfig;
}
set hass(hass) {
const config = this._config;
const root = this.shadowRoot;
const entityState = hass.states[config.entities[0].entity].state;
const measurement = hass.states[config.entities[0].entity].attributes.unit_of_measurement || “”;
var contenedor = `<table>
<form method="post" action="tm" onsubmit="return st();">
<tr><td><input id="e0" name="e0" type="checkbox"><b>Habilitar Temporizadores</b></td></tr>
<tr><td><button type="button" class="tl disabled" onclick="ot(0,this)" id="dP">1</button><button type="button" class="tl" onclick="ot(1,this)" >2</button><button type="button" class="tl" onclick="ot(2,this)">3</button><button type="button" class="tl" onclick="ot(3,this)">4</button><button type="button" class="tl" onclick="ot(4,this)">5</button><button type="button" class="tl" onclick="ot(5,this)" >6</button><button type="button" class="tl" onclick="ot(6,this)" >7</button><button type="button" class="tl" onclick="ot(7,this)">8</button><button type="button" class="tl" onclick="ot(8,this)">9</button><button type="button" class="tl" onclick="ot(9,this)" >10</button><button type="button" class="tl" onclick="ot(10,this)" >11</button><button type="button" class="tl" onclick="ot(11,this)">12</button><button type="button" class="tl" onclick="ot(12,this)" >13</button><button type="button" class="tl" onclick="ot(13,this)" >14</button><button type="button" class="tl" onclick="ot(14,this)" >15</button><button type="button" class="tl" onclick="ot(15,this)">16</button></div></td></tr>
<tr><td><div id="bt" name="bt"><div id="oa" name="oa"><b>Salida</b> <span><select style="width:60px;" id="d1" name="d1"><option>1</option></select></span> <b>Estado</b> <select style="width:99px;" id="p1" name="p1"><option>Apagado</option><option>Encendido</option><option>Conmutar</option><option>Regla</option></select></div></td></tr>
<tr><td><input id="b0" name="rd" type="radio" value="0" onclick="gt();"><b>Hora</b></tr></td>
<tr><td><input id="b0" name="rd" type="radio" value="0" onclick="gt();"><b>Hora</b></tr></td>
<tr><td><input id="b1" name="rd" type="radio" value="1" onclick="gt();"><b>Salida del Sol</b> (04:53)</tr></td>
<tr><td><input id="b2" name="rd" type="radio" value="2" onclick="gt();"><b>Puesta del Sol</b> (20:41)</tr></td>
<tr><td><select style="width:46px;" id="dr" name="dr" disabled=""><option>+</option><option>-</option></select><span><select style="width:60px;" id="ho" name="ho"><option>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option></select></span> : <span><select style="width:60px;" id="mi" name="mi"><option>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option><option>16</option><option>17</option><option>18</option><option>19</option><option>20</option><option>21</option><option>22</option><option>23</option><option>24</option><option>25</option><option>26</option><option>27</option><option>28</option><option>29</option><option>30</option><option>31</option><option>32</option><option>33</option><option>34</option><option>35</option><option>36</option><option>37</option><option>38</option><option>39</option><option>40</option><option>41</option><option>42</option><option>43</option><option>44</option><option>45</option><option>46</option><option>47</option><option>48</option><option>49</option><option>50</option><option>51</option><option>52</option><option>53</option><option>54</option><option>55</option><option>56</option><option>57</option><option>58</option><option>59</option></select></span><b>+/-</b> <span><select style="width:60px;" id="mw" name="mw"><option>00</option><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option><option>13</option><option>14</option><option>15</option></select></span></tr></td>
<tr><td><div id="ds" name="ds"><input id="w0" name="w0" type="checkbox"><b>Dom</b><input id="w1" name="w1" type="checkbox"><b>Lun</b> <input id="w2" name="w2" type="checkbox"><b>Mar</b> <input id="w3" name="w3" type="checkbox"><b>Mie</b> <input id="w4" name="w4" type="checkbox"><b>Jue</b> <input id="w5" name="w5" type="checkbox"><b>Vie</b> <input id="w6" name="w6" type="checkbox"><b>Sab</b> </div> </tr></td>
<tr><td><button id="save" name="save" type="submit" >Grabar</button></tr></td>
</form>
</table>
`;
root.getElementById("value").innerHTML = contenedor;
root.lastChild.hass = hass;
if (!config.auto_enter) {
root.querySelectorAll(".item").forEach(element => {
element.addEventListener('click', event => {
switch(element.id) {
case 'a0':
alert("asd")
break;
case 'a1':
break;
case 'a2':
break;
case 'a3':
break;
}
})
});
}
var save = root.getElementById("save")
var a1 = root.getElementById("a1")
var a2 = root.getElementById("a2")
}
getCardSize() {
return 1;
}
}
customElements.define(‘mini-card-prueba’, MyCard);