MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.20.0 is available! For more information about this release, check out this topic.

    assign a symbol to a module

    Troubleshooting
    5
    19
    7885
    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
      dominic last edited by

      Hello everyone 🙂
      How can I assign a symbol to a module?
      I have a modul which displayed some info´s for me.
      Now i want to add a Symbol to this modul,
      similar to the calender modul symbol. ( The modul has no .css file only .js files.)
      But I don´t know how I get it.
      Can someone help me?

      sorry for my bad endglisch and Greetings from Germany

      strawberry 3.141 1 Reply Last reply Reply Quote 0
      • strawberry 3.141
        strawberry 3.141 Project Sponsor Module Developer @dominic last edited by

        @dominic ou can add a fontawesome icon in the header like the following lines here https://github.com/fewieden/MMM-Fuel/blob/master/MMM-Fuel.js#L49

        and add

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

        Please create a github issue if you need help, so I can keep track

        D 1 Reply Last reply Reply Quote 0
        • D
          dominic @strawberry 3.141 last edited by paviro

          @strawberry-3.141 said in assign a symbol to a module:

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

          I add:

           var header = document.createElement("header");   // in the getdom function and 
          
          getStyles: function () {
                  return ["font-awesome.css"];
          },
          

          in the .js file. And now I have to do ?

          how do i musst edit the config file ?


          Note from admin: Please use Markdown on code snippets for easier reading!

          1 Reply Last reply Reply Quote 0
          • yawns
            yawns Moderator last edited by

            getDom: function() {
            	var wrapper = document.createElement("div");
            
            	var symbol =  document.createElement("span");
            	symbol.className = "fa fa-home";
            	wrapper.appendChild(symbol);
            
            	return wrapper;
            }
            

            This will result in a “house symbol”

            D 1 Reply Last reply Reply Quote 0
            • D
              dominic @yawns last edited by paviro

              @yawns said in assign a symbol to a module:

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

              var symbol = document.createElement(“span”);
              symbol.className = “fa fa-home”;
              wrapper.appendChild(symbol);

              return wrapper;
              }

              Thanks. When i add the code, i have the “house” but i have a getdom function with the following code…

              getDom: function(){
              		
              		var wrapper = document.createElement("div");
              		if(this.dataFile){
                                      var humidityRegExp = /Humidity = (.*?) %/ig;
                                      var humidity = humidityRegExp.exec(this.dataFile)[1];
              
                                      var temperatureRegExp = /Temperature = (.*?) *C/ig;
                                      var temperature = temperatureRegExp.exec(this.dataFile)[1];
              			wrapper.innerHTML = "r.F.: " + humidity + "%, Temp.: " + temperature + "°C";
              		} else {
              			wrapper.innerHTML = "No data";
              		}
              		return wrapper;
              	},
              

              …how do I implement the code in this?

              1 Reply Last reply Reply Quote 0
              • yawns
                yawns Moderator last edited by yawns

                like this:

                getDom: function() {
                	var wrapper = document.createElement("div");
                	if(this.dataFile){
                		var humidityRegExp = /Humidity = (.*?) %/ig;
                		var humidity = humidityRegExp.exec(this.dataFile)[1];
                
                		var temperatureRegExp = /Temperature = (.*?) *C/ig;
                		var temperature = temperatureRegExp.exec(this.dataFile)[1];
                
                		var spacer = document.createElement("span");
                		spacer.innerHTML = " ";
                		var temperature_symbol =  document.createElement("span");
                		temperature_symbol.className = "fa fa-home";
                		var humidity_symbol =  document.createElement("span");
                		humidity_symbol.className = "fa fa-tint";
                
                		wrapper.appendChild(temperature_symbol);
                		var temperature_text = document.createElement("span");
                		temperature_text.innerHTML = " " + temperature + "°C";
                		wrapper.appendChild(temperature_text);
                
                		wrapper.appendChild(spacer);
                
                		wrapper.appendChild(humidity_symbol);
                		var humidity_text = document.createElement("span");
                		humidity_text.innerHTML = " " + humidity + "%";
                		wrapper.appendChild(humidity_text);
                	} else {
                		wrapper.innerHTML = "No data";
                	}
                	return wrapper;
                },
                

                Should give you a house symbol for temperature inside and a droplet for humidity.

                D 1 Reply Last reply Reply Quote 0
                • P
                  Plati last edited by paviro

                  @yawns

                  I need add a symbol to text (before or behind).

                  Code:

                  getDom: function() {
                  		
                  		var header = document.createElement("header");
                  		var wrapper = document.createElement("div");
                  		if(this.config.title !== false){
                  			var title = document.createElement("header");
                  			title.innerHTML = this.config.title || this.name;
                  			wrapper.appendChild(title);
                  		}
                  		var logs = document.createElement("table");
                  
                  		for (var i = this.messages.length - 1; i >= 0; i--) {
                  			//Create callWrapper
                  			var callWrapper = document.createElement("tr");
                  			callWrapper.classList.add("normal");
                  
                  			
                  			var icon =  document.createElement("td");
                  			
                  			if (this.messages[i].type === "INFO"){
                  				icon.className = "fa fa-info";
                  			}
                  			else if (this.messages[i].type === "WARNING"){
                  				icon.className = "fa fa-exclamation";
                  			}
                  			else if (this.messages[i].type === "ERROR"){
                  				icon.className = "fa fa-exclamation-triangle";
                  			}
                  			else {
                  				icon.className = "fa fa-question";
                  			}
                  			
                  			
                  			
                  			//Set caller of row
                  			var caller =  document.createElement("td");
                  			caller.innerHTML = "[" + this.messages[i].type + "] " + this.messages[i].message + " " + wrapper.appendChild(icon);
                  			caller.classList.add("title", "small", "align-left");
                  			if(this.config.types.hasOwnProperty(this.messages[i].type)){
                  				caller.classList.add(this.config.types[this.messages[i].type]);
                  			}
                  			callWrapper.appendChild(caller);
                  
                  			//Set time of row
                  			var time =  document.createElement("td");
                  			time.innerHTML = this.config.format ? moment(this.messages[i].timestamp).format(this.config.format) : moment(this.messages[i].timestamp).fromNow();
                  			time.classList.add("time", "light", "xsmall");
                  			callWrapper.appendChild(time);
                  
                  			//Add to logs
                  			logs.appendChild(callWrapper);
                  		}
                  		wrapper.appendChild(logs);
                  		return wrapper;
                  

                  This is effect:0_1473698703685_syslog-icon.jpg

                  What is wrong?

                  I 1 Reply Last reply Reply Quote 0
                  • I
                    ianperrin @Plati last edited by

                    Hi @Plati

                    The solution depends on how you want to display the table.

                    Do you want

                    • 3 columns in the following order: | Icon | Message | Time |
                    • Or 2 columns laid out as follows: | Message Icon | Time |

                    "Live as if you were to die tomorrow. Learn as if you were to live forever." - Mahatma Gandhi

                    P 1 Reply Last reply Reply Quote 0
                    • P
                      Plati @ianperrin last edited by

                      Hi @ianperrin

                      | Icon | Message | Time | should be ok

                      I 1 Reply Last reply Reply Quote 0
                      • I
                        ianperrin @Plati last edited by

                        @Plati said in assign a symbol to a module:

                        Hi @ianperrin

                        | Icon | Message | Time | should be ok

                        In that case, try this

                        
                        		var iconCell = document.createElement("td");
                        
                        		var icon =  document.createElement("i");
                        		if (this.messages[i].type === "INFO"){
                        			icon.className = "fa fa-info";
                        		}
                        		else if (this.messages[i].type === "WARNING"){
                        			icon.className = "fa fa-exclamation";
                        		}
                        		else if (this.messages[i].type === "ERROR"){
                        			icon.className = "fa fa-exclamation-triangle";
                        		}
                        		else {
                        			icon.className = "fa fa-question";
                        		}
                        
                        		iconCell.appendChild(icon);
                        		callWrapper.appendChild(iconCell);
                        		
                        		//Set caller of row
                        		var caller =  document.createElement("td");
                        		caller.innerHTML = "[" + this.messages[i].type + "] " + this.messages[i].message;
                        

                        "Live as if you were to die tomorrow. Learn as if you were to live forever." - Mahatma Gandhi

                        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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy