MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Add symboly/icon in a modul

    Scheduled Pinned Locked Moved Troubleshooting
    14 Posts 3 Posters 7.8k Views 4 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • D Offline
      dominic
      last edited by

      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 1 Reply Last reply Reply Quote 0
      • J Offline
        j.e.f.f Project Sponsor Module Developer @dominic
        last edited by

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

        D 1 Reply Last reply Reply Quote 0
        • D Offline
          dominic @j.e.f.f
          last edited by

          @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 1 Reply Last reply Reply Quote 0
          • J Offline
            j.e.f.f Project Sponsor Module Developer @dominic
            last edited by

            @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

            1 Reply Last reply Reply Quote 0
            • D Offline
              dominic
              last edited by

              @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 1 Reply Last reply Reply Quote 0
              • J Offline
                j.e.f.f Project Sponsor Module Developer @dominic
                last edited by 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.

                1 Reply Last reply Reply Quote 0
                • D Offline
                  dominic
                  last edited by

                  Thank you! I will test it later.

                  1 Reply Last reply Reply Quote 0
                  • D Offline
                    dominic
                    last edited by

                    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 1 Reply Last reply Reply Quote 0
                    • J Offline
                      j.e.f.f Project Sponsor Module Developer @dominic
                      last edited by 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;
                      1 Reply Last reply Reply Quote 0
                      • D Offline
                        dominic
                        last edited by

                        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 1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy