XMPP Message Board with Homepanel

Hi guys. It’s time to share my newest Project. It might not concern all of you but I thought it might be funny to be able not only to receive Messages / Informations from my Home-Assistant but also send messages and Pictures TO Home-Assistant (Dashbboard).

I setup Home-Panel With HassIO Addon and payed around.

To get this running I created a very simple Node-Red Flow which reads out messages which are send to my Home-Assistant XMPP account (which also send me notifications etc.) . Those message will be formatted and filtered. Either if I send a message it’ll just send the Payload “message” to a MQTT topic or when I send a Picture it will search the message for ```http://myaddress/…" and modifies the message payload into a camera symbol.

Why I had to do this? My xmpp server / Client sends the pic as a message payload with the link which will be shown in my XMPP Client as a picture (httpupload).

To now get messages and Pictures work in the dasboard I created two MQTT-sensors:

One with message topic and one with pic topic (which is basically the same)

With the Picture sensor I setup a generic camera in Home-Assistant with the url from the pic MQTT sensor which will show me the pic in the dashboard.

To make it more clear here the steps:

  1. THE FLOW

[{"id":"a2757ffe.cc76e","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"4fcb9317.034f9c","type":"xmpp in","z":"a2757ffe.cc76e","name":"NodeRed XMPP","server":"4ebd7914.0649e8","to":"","join":false,"x":100,"y":260,"wires":[["a0c6a003.72d96"],[]]},{"id":"b66a768.0fd9d88","type":"debug","z":"a2757ffe.cc76e","name":"XMPP Messages","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"true","targetType":"full","x":650,"y":280,"wires":[]},{"id":"cf010dee.6004a","type":"mqtt out","z":"a2757ffe.cc76e","name":"","topic":"xmpp/messages","qos":"2","retain":"true","broker":"31f0eaf6.ee4fb6","x":660,"y":220,"wires":[]},{"id":"a0c6a003.72d96","type":"function","z":"a2757ffe.cc76e","name":"Format Message","func":"var newMsg = Object();\nvar sender = msg.topic.split(\"@\", 1).toString().toUpperCase();\nvar message = msg.payload;\n\nif (message.includes('http')) {\n    message = '📸';\n}\n\n// Otherwise message already contains the msg.payload\n\nnewMsg.payload = {\n    \"sender\": sender,\n    \"message\": message\n}\n\nreturn newMsg;","outputs":1,"noerr":0,"x":330,"y":260,"wires":[["b66a768.0fd9d88","cf010dee.6004a"]]},{"id":"ca0ea3b1.62a6a","type":"xmpp in","z":"a2757ffe.cc76e","name":"NodeRed XMPP","server":"3f083773.346bf8","to":"","join":false,"x":100,"y":340,"wires":[["a0c6a003.72d96"],[]]},{"id":"3044a37e.fd010c","type":"mqtt out","z":"a2757ffe.cc76e","name":"","topic":"xmpp/images","qos":"2","retain":"true","broker":"31f0eaf6.ee4fb6","x":650,"y":480,"wires":[]},{"id":"7a424a3b.bc5824","type":"debug","z":"a2757ffe.cc76e","name":"XMPP Images","active":true,"tosidebar":true,"console":true,"tostatus":false,"complete":"true","targetType":"full","x":650,"y":560,"wires":[]},{"id":"280a7cc4.f156b4","type":"function","z":"a2757ffe.cc76e","name":"Format Image","func":"var sender = msg.topic.split(\"@\", 1).toString().toUpperCase();\nvar message = msg.payload;msg.payload = {\n    \"sender\": sender,\n    \"image\": message\n}\nreturn msg;","outputs":1,"noerr":0,"x":320,"y":480,"wires":[["7a424a3b.bc5824","3044a37e.fd010c"]]},{"id":"824119a0.8fcbc8","type":"xmpp in","z":"a2757ffe.cc76e","name":"NodeRed XMPP","server":"4ebd7914.0649e8","to":"","join":false,"x":120,"y":480,"wires":[["280a7cc4.f156b4"],[]]},{"id":"4ebd7914.0649e8","type":"xmpp-server","z":"","user":"[email protected]","nickname":"Home-Assistant"},{"id":"31f0eaf6.ee4fb6","type":"mqtt-broker","z":"","name":"Home-Assistant-MQTT","broker":"192.168.1.41","port":"1883","clientid":"Node-Red","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"3f083773.346bf8","type":"xmpp-server","z":"","user":"[email protected]","nickname":"Thorsten"}]
  1. THE SENSORS:
## XMPP to MQTT Messages Sensor

  - platform: mqtt
    name: XMPP Message Box
    state_topic: "xmpp/messages"
    qos: 0
    value_template: "{{ value_json.sender }}: {{ value_json.message }}"

  - platform: mqtt
    name: XMPP Picture Box
    state_topic: "xmpp/images"
    qos: 0
    value_template: "{{ value_json.image }}"
  1. THE GENERIC CAMERA
# Cameras
camera:
  - platform: generic
    still_image_url: "{{ states('sensor.xmpp_picture_box') }}"
  1. Home Panel Dasboard

The good thing is, if I send a Picture and after a Message, The Camera Pic will remain as the url from the MQTT sensor is a message and not a valid picture url. And the Message will be transformed directly in a camera Icon. If I would not “convert” this message, the message box would contain the ugly url of the picture.

Also the senders JID in modified to only show the First part before the @ of the JID.

If you have any questions, don’t hesitate to ask. I’ll try my best and help you out. Maybe we can expand / modify or just improve this project together.

1 Like