Add symboly/icon in a modul

[j.e.f.f]

@dominic Are you trying to add the symbol as a font (e.g.: using Font Awesome) or are you trying to add the symbol as an SVG?

[dominic]

@j.e.f.f i try to ad a sysmbol as a font . But if you have an other idea, then it is ok.

[j.e.f.f]

@dominic You need to include font-awesome in your getStyles() function.

Here is an example:

getStyles: function () {
  return ["font-awesome.css"];
},

Then you can use classes to create a symbol:

var symbol = document.createElement("span");
symbol.className = "fa fa-calendar"; //font awesome calendar icon

Take a look at the default calendar module to see how it’s been implemented there.
https://github.com/MichMich/MagicMirror/tree/develop/modules/default/calendar

[dominic]

@j.e.f.f thank you. But one question, who can i call the Symbol, so that is Displayed before

 var mqttDiv = document.createElement('div');
    mqttDiv.innerHTML = this.mqttVal.toString().concat(this.config.postText);
    wrapper.appendChild(mqttDiv);     // here add  the symbol

[j.e.f.f]

@dominic you can just insert text like so:

 var mqttDiv = document.createElement('div');
    mqttDiv.innerHTML = "< span class='fa fa-calendar'>< /span>" + this.mqttVal.toString().concat(this.config.postText);
    wrapper.appendChild(mqttDiv);     // here add  the symbol

(remove the spaces between the angle brackets and the words span and /span. I needed to put it there to get it to render in this post.)

or you can append multiple elements to your mqttDiv object, like so:

 var mqttDiv = document.createElement('div');

var symbolEl = document.createElement("span");
symbol.className = "fa fa-calendar"; //font awesome calendar icon

var textEl = document.createElement("span");
textEl.innerHTML = this.mqttVal.toString().concat(this.config.postText);

mqttDiv.appendChild(symbol)
mqttDiv.appendChild(textEl);

wrapper.appendChild(mqttDiv);

up to you which way you want to do it. No advantage either way.

[dominic]

Thank you! I will test it later.

[dominic]

It works!! Ehm is it possible to make it varriable, so i can choose the symbol with an entrie in the defaults ?

Module.register('MMM-mqtt', {

 defaults: {
   mqttServer: 'mqtt://test.mosquitto.org',
   loadingText: 'Loading MQTT Data...',
   topic: '',
   showTitle: false,
   title: 'MQTT Data',
   interval: 300000,
   postText: ''
 },

[j.e.f.f]

@dominic indeed. it’s just a string, so you can have the string in the config, then insert it when you create the symbol object. Like so:

var symbolEl = document.createElement("span");
symbol.className = "fa " + this.config.symbol;

[dominic]

Now with this code ( is the original code with added css file and with your part) i only get the text “loading MQTT DATA” before it has still worked with your code. Maybe it is to late or i don´t see the error…but if you can be so nice, can you add tell me wehre my error is and can you add the varribale code ? And thank you very much for your help. :)

'use strict';
/* global Module */

/* Magic Mirror
* Module: MMM-mqtt
*
* By Javier Ayala http://www.javierayala.com/
* MIT Licensed.
*/

Module.register('MMM-mqtt', {

 defaults: {
   mqttServer: 'mqtt://test.mosquitto.org',
   loadingText: 'Loading MQTT Data...',
   topic: '',
   showTitle: false,
   title: 'MQTT Data',
   interval: 300000,
   postText: ''
 },


 start: function() {
   Log.info('Starting module: ' + this.name);
   this.loaded = false;
   this.mqttVal = '';
   this.updateMqtt(this);
 },

  getStyles: function() {
   return ["MMM-DHT-Sensor.css", "font-awesome.css"];
 },

 updateMqtt: function(self) {
   self.sendSocketNotification('MQTT_SERVER', { mqttServer: self.config.mqttServer, topic: self.config.topic });
   setTimeout(self.updateMqtt, self.config.interval, self);
 },

 getDom: function() {
   var wrapper = document.createElement('div');

   if (!this.loaded) {
     wrapper.innerHTML = this.config.loadingText;
     return wrapper;
   }

   if (this.config.showTitle) {
     var titleDiv = document.createElement('div');
     titleDiv.innerHTML = this.config.title;
     wrapper.appendChild(titleDiv);
   }

   var mqttDiv = document.createElement('div');
   
   var symbolEl = document.createElement("span");
   symbol.className = "fa fa-calendar"; //font awesome calendar icon
   var textEl = document.createElement("span");
   textEl.innerHTML = this.mqttVal.toString().concat(this.config.postText);

   mqttDiv.appendChild(symbol)
   mqttDiv.appendChild(textEl);

   wrapper.appendChild(mqttDiv);

   return wrapper;
 },

 socketNotificationReceived: function(notification, payload) {
   if (notification === 'MQTT_DATA' && payload.topic === this.config.topic) {
     this.mqttVal = payload.data.toString();
     this.loaded = true;
     this.updateDom();
   }

   if (notification === 'ERROR') {
     this.sendNotification('SHOW_ALERT', payload);
   }
 }

});

[j.e.f.f]

@dominic can you look to see if there are errors in the console? Two places you can look: Errors from node_helper.js will be output to the pm2 logs. Type pm2 logs mm to monitor this. The second place to look for errors is in Electron’s console. Start MagicMirror in debug mode with npm start dev and you’ll get the screen divided into to halves. On the right side you’ll see a white panel. Click on “CONSOLE” and if there are any errors there they will be in red.