Add symboly/icon in a modul

[dominic]

Hi i want to add symboly/icon in a modul. But I can not do it. The symbol is said to be the result or it can be set over the config…can any one help me pleas ?

This is the module code.

'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);
  },

  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');
    mqttDiv.innerHTML = this.mqttVal.toString().concat(this.config.postText);
    wrapper.appendChild(mqttDiv);     // here add  the symbol

    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 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);
   }
 }

});