search

timdows / MMM-JsonTable

A module for the MagicMirror project which creates a table filled with a list gathered from a json request.
MIT License
25 stars 31 forks source link

Font Awesome Icons and images support #4

Closed Snille closed 5 years ago

Snille commented 5 years ago

Hello! I'm trying out your module to display some statistics from my coffee machine. I would like to be able to use small "icons". I'm thinking if I define in the json for example the fa-icons, se below... And also if possible, if an image is inserted that could be displayed as well...

Here is an example of my json... 

{  
   "cups":[  
      {  
         "icon":"fa-calendar",
         "data":"Senaste bryggning",
         "value":"2019-03-07",
         "type":""
      },
      {  
         "icon":"fa-clock-o",
         "data":"Klockan",
         "value":"17:32:06",
         "type":""
      },
      {  
         "icon":"fa-coffee",
         "data":"Totalt antal bryggda koppar",
         "value":60,
         "type":"st"
      },
      {  
         "icon":"img=http://10.0.0.30/img/magicmirror/buttons/coffeebeans-512x512.png",
         "data":"Kostnad b\u00f6nor (alla koppar)",
         "value":319.2,
         "type":"kr"
      },
      {  
         "icon":"fa-cog",
         "data":"Kostnad b\u00f6nor \/ kopp",
         "value":5.32,
         "type":"kr"
      },
      {  
         "icon":"fa-cogs",
         "data":"Kostnad maskin \/ kopp",
         "value":408.17,
         "type":"kr"
      },
      {  
         "icon":"fa-diamond",
         "data":"Kostnad totalt \/ kopp",
         "value":413.49,
         "type":"kr"
      }
   ]
}

In this example I would like to get the "icons" from font awesome displayed instead of the text, and when the img= is present, the picture should be displayed instead. Result in this case would be: image

I hope you get what I mean. :)

Best regards Erik

timdows commented 5 years ago

Awesome suggestion! Added it in commit https://github.com/timdows/MMM-JsonTable/commit/5f51e1e45ec2d1afc14720439bade5fd3240ae11

Let me know if it works for you as well

For now, I'm not quite sure how to add support for the img (coffeebeans example) Maybe it is better to expose it via an own dedicated key in the json array Also sizing of the source needs to be taken into account

Snille commented 5 years ago

Hi! Good work! :) Looks great, thank you! I'm happy with the font awesome support. It's enough. The Image was just because there are no "beans" in the font... But it's ok It's not that important! :) Result: image