Skip to content

A module for the MagicMirror project which creates a table filled with a list gathered from a json request.

License

Notifications You must be signed in to change notification settings

timdows/MMM-JsonTable

Repository files navigation

MMM-JsonTable

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.

Installation

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

Build and Test status

Node.js CI

Config options

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: ""

Example 1

End result:

Example 1

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
  }
}

Example 2

Example 2

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
  }
}

Example 3 (with font awesome icons)

Example 3

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"
      },
      ...
   ]
}

Example 4 (with descriptive row)

Example 4

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>'
  }
}

Example 5 (with font awesome icons, colors and descriptive row)

Example 5

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
  }
}

Developer hints

Please use npm run test before doing a PR.

About

A module for the MagicMirror project which creates a table filled with a list gathered from a json request.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published