A module for the MagicMirror² project which creates a table filled with a list gathered from a json request.
All the variables of the objects in the array are represented by a table column.
For every column it checks if a valid DateTime is given, and then formats it to HH:mm:ss
if it is today or YYYY-MM-DD
otherwise.
Just clone the module into your modules folder of your MagicMirror².
git clone https://github.com/timdows/MMM-JsonTable
That's it!
If you are a developer please also install the depenendies for linter and prettier:
cd MMM-JsonTable
npm install
Except url
all options are optional.
Option | Description |
---|---|
url | The full url to get the json response from Default value: "" |
arrayName | Define the name of the variable that holds the array to display Default value: null |
noDataText | Text indicating that there is no data. Default value: Json data is not of type array! Maybe the config arrayName is not used and should be, or is configured wrong. |
keepColumns | Columns on json will be showed Default value: [] |
tryFormatDate | For every column it checks if a valid DateTime is given, and then formats it to HH:mm:ss if it is today or YYYY-MM-DD otherwise Default value: false Possible values: false and true |
size | Text size at table, 0 is default and 3 is H3 Default value: 0 Possible values: 0 - 3 |
updateInterval | Milliseconds between the refersh Default value: 15000 |
animationSpeed | Speed of the update animation. (Milliseconds) If you don't want that the module blinks during an update, set the value to 0 . Default value: 500 Possible values: 0 - 5000 |
descriptiveRow | Complete html table row that will be added above the array data Default value: "" |
End result:
Raw json response:
{
"items": [
{
"name": "Watt",
"value": "270 Watt"
},
{
"name": "Today",
"value": "5.85 kWh"
},
{
"name": "ThisWeek",
"value": "5.83 kWh"
},
{
"name": "ThisMonth",
"value": "12.8 kWh"
},
{
"name": "LastMonth",
"value": "246.75 kWh"
}
]
}
Configuration:
{
module: 'MMM-JsonTable',
position: 'top_right',
header: 'HouseDB Sevensegment',
config: {
url: 'https://xyz/abc/get.json', // Required
arrayName: 'items' // Optional
}
}
Raw json response:
{
"currentUsages": [
{
"deviceName": "P1",
"currentWattValue": 180,
"todayKwhUsage": 5.902,
"lastUpdate": "2018-04-02T18:12:06Z"
},
{
"deviceName": "Studie - MainDown",
"currentWattValue": 76,
"todayKwhUsage": 0.46,
"lastUpdate": "2018-04-02T18:06:52Z"
},
{
"deviceName": "BoilerPower",
"currentWattValue": 0,
"todayKwhUsage": 2.21,
"lastUpdate": "2018-04-02T17:30:01Z"
},
{
"deviceName": "Koelkast",
"currentWattValue": 1.3,
"todayKwhUsage": 0.55,
"lastUpdate": "2018-04-02T18:09:55Z"
},
{
"deviceName": "Vaatwasser",
"currentWattValue": 0.5,
"todayKwhUsage": 0.01,
"lastUpdate": "2018-04-02T18:10:51Z"
},
{
"deviceName": "Wasmachine",
"currentWattValue": 0,
"todayKwhUsage": 0,
"lastUpdate": "2018-04-02T18:12:06Z"
}
]
}
Configuration:
{
module: 'MMM-JsonTable',
position: 'top_right',
header: 'HouseDB Current Usages',
config: {
url: 'https://xyz/abc/get.json', // Required
arrayName: 'currentUsages', // Optional
tryFormatDate: true
}
}
Raw json response:
{
"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"
},
...
]
}
Raw json response:
{
"deviceKwhUsages":[
{
"name": "Studie - MainDown",
"today": 0,
"todayFormatted": "0",
"thisWeek": 1.27,
"thisWeekFormatted": "1,27",
"lastWeek": 7,
"lastWeekFormatted": "7,00",
"thisMonth": 17.41,
"thisMonthFormatted": "17,41",
"lastMonth": 30.58,
"tLastMonthFormatted": "30,58"
},
{
"name": "BoilerPower",
"today": 0,
"todayFormatted": "0",
"thisWeek": 1.9,
"thisWeekFormatted": "1,90",
"lastWeek": 13.3,
"lastWeekFormatted": "13,30",
"thisMonth": 30.44,
"thisMonthFormatted": "30,44",
"lastMonth": 54.99,
"tLastMonthFormatted": "54,99"
},
...
]
}
Configuration:
{
module: 'MMM-JsonTable',
position: 'top_right',
header: 'HouseDB Kwh Statistics',
config: {
url: 'https://xyz/abc/get.json',
arrayName: 'deviceKwhUsages',
descriptiveRow: '<tr><td>Name</td><td>Today</td><td>ThisWeek</td><td>LastWeek</td><td>ThisMonth</td><td>LastMonth</td></tr>'
}
}
Raw json response:
{
"trash": [
{
"icon": "fa-trash",
"za-type": "Paper",
"zb-date": "15 July"
},
{
"icon": {
"color": "#FF6E00",
"value": "fa-trash"
},
"za-type": {
"color": "#FF6E00",
"value": "Plastic"
},
"zb-date": {
"color": "#FF6E00",
"value": "25 July"
}
},
{
"icon": {
"color": "red",
"value": "fa-trash"
},
"za-type": {
"value": "GFT"
},
"zb-date": {
"color": "yellow"
}
}
]
}
Configuration:
{
module: 'MMM-JsonTable',
position: 'top_left',
header: 'Trash calendar',
config: {
url: 'https://xyz/abc/get.json',
arrayName: 'trash',
descriptiveRow: '<tr><td></td><td>Type</td><td>Day</td></tr>',
updateInterval: 60000
}
}
Please use npm run test
before doing a PR.