Add symboly/icon in a modul

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

[dominic]

@j.e.f.f said in Add symboly/icon in a modul:

with npm start dv i get this info, i dont get es divided screen in to halves.

pi@raspberrypi:~ $ npm start dev
npm ERR! Linux 4.9.41-v7+
npm ERR! argv “/usr/bin/node” “/usr/bin/npm” “start” “dev”
npm ERR! node v6.11.3
npm ERR! npm v3.10.10
npm ERR! path /home/pi/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open

npm ERR! enoent ENOENT: no such file or directory, open ‘/home/pi/package.json’
npm ERR! enoent ENOENT: no such file or directory, open ‘/home/pi/package.json’
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! Please include the following file with any support request:
npm ERR! /home/pi/npm-debug.log

and with pm2 logs mm this one
pi@raspberrypi:~ $ pm2 logs mm
[TAILING] Tailing last 15 lines for [mm] process (change the value with --lines option)

ach with the other code

 mqttDiv.innerHTML = "< span class='fa fa-calendar'>< /span>" + this.mqttVal.toString().concat(this.config.postText);

i get a symbol, only with the var version, it does not work.

[Mykle1]

@dominic said in Add symboly/icon in a modul:

pi@raspberrypi:~ $ npm start dev

You have to cd in the MagicMirror directory first, then run npm start or npm start dev