HI, using this example
“Lovelace: Custom Cards | Home Assistant Developer Docs”
I created an HTML page with 4 buttons it sends MQTT messages when pressed and released. all working in webserver, but when I integrate HTML code into Custom Cards, it’s showing buttons but clicking on it doesn’t do anything.
4 files in “www/custom_lovelace/habot”
I added resource /local/custom_lovelace/habot/habot-card.js
- habot-card.js ----- Custom Cards
- jquery-3.5.0.js
- mqttws31.min.js
- app.js
I think the problem is that I need to import these modules as
import "jquery-3.5.0.js?module";
import "mqttws31.min.js?module";
import "app.js?module";
but when I do this the card gives an error “custom habot-card not found”
Help with advice. which way to look
Thanks
habot-card.js
class HABot extends HTMLElement {
// Whenever the state changes, a new `hass` object is set. Use this to
// update your content.
set hass(hass) {
// Initialize the content if it's not there yet.
if (!this.content) {
this.innerHTML = `
<ha-card header="HABot Control">
<div class="card-content"></div>
</ha-card>
`;
this.content = this.querySelector('div');
}
this.content.innerHTML = `
<head>
<script src="query-3.5.0.js"></script>
<script src="mqttws31.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<input type="button" value="FORWARD" id="forward"><br><br>
<input type="button" value="LEFT" id="left">
<input type="button" value="RIGHT" id="right"><br><br>
<input type="button" value="BACKWARD" id="backward">
<script>
$( "[id^=left]" ).on('mousedown touchstart',function(){
$(left());
});
$( "[id^=left]" ).on('mouseup touchend',function(){
$(stop());
});
$( "[id^=right]" ).on('mousedown touchstart',function(){
$(right());
});
$( "[id^=right]" ).on('mouseup touchend',function(){
$(stop());
});
$( "[id^=forward]" ).on('mousedown touchstart',function(){
$(forward());
});
$( "[id^=forward]" ).on('mouseup touchend',function(){
$(stop());
});
$( "[id^=backward]" ).on('mousedown touchstart',function(){
$(backward());
});
$( "[id^=backward]" ).on('mouseup touchend',function(){
$(stop());
});
</script>
</body>
`;
}
// The user supplied configuration. Throw an exception and Lovelace will
// render an error card.
setConfig(config) {
this.config = config;
}
// The height of your card. Home Assistant uses this to automatically
// distribute all cards over the available columns.
getCardSize() {
return 3;
}
}
customElements.define('habot-card', HABot);
app.js
// Generate a new random MQTT client id on each page load
var MQTT_CLIENT_ID = "iot_web_"+Math.floor((1 + Math.random()) * 0x10000000000).toString(16);
// Create a MQTT client instance
var MQTT_CLIENT = new Paho.MQTT.Client("192.168.2.20", 1884, "/ws", MQTT_CLIENT_ID);
// Tell the client instance to connect to the MQTT broker
MQTT_CLIENT.connect({userName : "xxx",password : "xxxxx", onSuccess: myClientConnected });
// This is the function which handles button clicks
function left() {
// create a new MQTT message with a specific payload
var left = new Paho.MQTT.Message("left");
// Set the topic it should be published to
left.destinationName = "HABot/Controlle";
// Publish the message
MQTT_CLIENT.send(left);
}
function right() {
// create a new MQTT message with a specific payload
var right = new Paho.MQTT.Message("right");
// Set the topic it should be published to
right.destinationName = "HABot/Controlle";
// Publish the message
MQTT_CLIENT.send(right);
}
function forward() {
// create a new MQTT message with a specific payload
var forward = new Paho.MQTT.Message("forward");
// Set the topic it should be published to
forward.destinationName = "HABot/Controlle";
// Publish the message
MQTT_CLIENT.send(forward);
}
function backward() {
// create a new MQTT message with a specific payload
var backward = new Paho.MQTT.Message("backward");
// Set the topic it should be published to
backward.destinationName = "HABot/Controlle";
// Publish the message
MQTT_CLIENT.send(backward);
}
function stop() {
// create a new MQTT message with a specific payload
var stop = new Paho.MQTT.Message("stop");
// Set the topic it should be published to
stop.destinationName = "HABot/Controlle";
// Publish the message
MQTT_CLIENT.send(stop);
}
// This is the function which handles subscribing to topics after a connection is made
function myClientConnected() {
MQTT_CLIENT.subscribe("<your_random_topic_root>/iot_tutorial/from_esp8266");
}
// This is the function which handles received messages
function myMessageArrived(message) {
// Get the payload
var messageBody = message.payloadString;
// Create a new HTML element wrapping the message payload
var messageHTML = $("<p>"+messageBody+"</p>");
// Insert it inside the ```id=updateMe``` element above everything else that is there
$("#updateMe").prepend(messageHTML);
};
// Tell MQTT_CLIENT to call myMessageArrived(message) each time a new message arrives
MQTT_CLIENT.onMessageArrived = myMessageArrived;