Add symboly/icon in a modul



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

  • Module Developer

    @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?



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


  • Module Developer

    @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



  • @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
    
    

  • Module Developer

    @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.



  • Thank you! I will test it later.



  • 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: ''
     },
    

  • Module Developer

    @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;


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

Log in to reply
 

Looks like your connection to MagicMirror Forum was lost, please wait while we try to reconnect.