timdows/MMM-JsonTable

Font Awesome Icons and images support

Closed this issue · 2 comments

Snille commented

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

Awesome suggestion!
Added it in commit 5f51e1e

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

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