Smarthome Dashboard for Tablets

This project is a modular smart home dashboard application based on Angular 6. It is configurable with json files. The dashboard connects to a separate Express Server via Socket.io.

This is a private side project that I created to control my own smart home.

Current state

Currently it is able to control the following systems in my home:

• Hue Ecosystem
  • Lights
  • Scenes
  • Plugs
  • Temperature Readings from Hue Motion Sensors
• TP-Link Smart Plugs with energy monitoring (only HS110)
• Logitech Harmony Bridge with support for activities and commands
  • TV
  • AV-Receiver
  • Xbox
  • Apple TV
• Custom DIY Ambilight
• Custom iTunes-Controller (Repo)
  • Playlist selection
  • Play / Pause
  • Skip / Prev (TODO)

Planned

• Connection to Apple Health to display steps, heartrate, sleep, weitht, etc...
• Nuki support
• IFTTT support
• Dynamic configuration file support (controlled by server based on current situation)
• Action chaining
• Magic Mirror support
• More widgets to display data

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.^

Widgets

The layout of the dashboard is customizable with json files.

Clock widget

Displays a digital clock widget

    {
          "type": "clock",
          "name": "Clock",
          "sizeX": 2,
          "sizeY": 1,
          "actions": []
    }

Line graph widget

The dashboard currently supports two different graph widgets based on the fantastic d3 library.

Single series line graph widget

Displays a d3 graph with a single line series.

    {
          "type": "lineGraph",
          "name": "powerLevelHistory_Computer",
          "title": "Computer",
          "parameters": {
            "scaleType": "linear",
            "singleSeriesColorFunction": true,
            "ticks": 4,
            "ticksFormatterFunctionType": null,
            "areaOpacity": 0.2
          },
          "margins": {
            "top": 4,
            "bottom": 0,
            "left": 0,
            "right": 0
          },
          "dataPrefix": "",
          "dataSuffix": "W",
          "sizeX": 1,
          "sizeY": 1,
          "cardColor": "#FFF",
          "headerColor": "#4CAF50",
          "showLegend": false,
          "actions": [
            {
              "type": "primary",
              "tabDestinationIndex": 3,
              "socketTopic": "",
              "socketMessage": {}
            }
          ]
    }

Multi series line graph widget

Displays a d3 graph with multiple line series.

    {
          "type": "lineGraph",
          "name": "powerLevelHistory_Total",
          "title": "Power History",
          "parameters": {
            "scaleType": "date",
            "singleSeriesColorFunction": false,
            "ticks": 5,
            "ticksFormatterFunctionType": null,
            "areaOpacity": 0.2
          },
          "margins": {
            "top": 4,
            "bottom": 20,
            "left": 28,
            "right": 4
          },
          "dataPrefix": "",
          "dataSuffix": "",
          "sizeX": 1,
          "sizeY": 2,
          "cardColor": "#FFF",
          "headerColor": "#4CAF50",
          "showLegend": true,
          "actions": [
            {
              "type": "primary",
              "tabDestinationIndex": 3,
              "socketTopic": "",
              "socketMessage": {}
            }
          ]
    }

Image widget

Displays a dynamic image like an album cover.

Example 1

Displays the current harmony activity. A tap on the widget navigates to a specific page to control the harmony devices.

    {
        "type": "image",
        "name": "harmony_activity",
        "sizeX": 1,
        "sizeY": 1,
        "actions": [
            {
                "type": "primary",
                "tabDestinationIndex": 2,
                "socketTopic": "",
                "socketMessage": {}
            }
        ]
    }

Example 2

Displays a generated cover for a playlist. A tap on the widget sends a message to the server to play this playlist.

    {
          "type": "image",
          "name": "music_playlist_1_cover",
          "sizeX": 1,
          "sizeY": 1,
          "actions":
          [
            {
              "type": "Primary",
              "socketTopic": "music_playlist",
              "socketMessage":
                {
                    "folder": "Dashboard",
                    "index": 1
                }
            }
          ]
    }

Switch widget

There are three different switches:

1. A Hue-Switch (type switch)
2. A TP-Link switch (type switchPlug)
3. A music player switch to control playback (type switchMusicPlayer)

However, all widgets behave and look exactly the same.

Hue switch widget

    {
          "type": "switch",
          "name": "lights_Ambilight",
          "deviceName": "Ambilight",
          "title": "Ambilight",
          "sizeX": 2,
          "sizeY": 1
    }

TP-Link switch widget

    {
          "type": "switchPlug",
          "name": "power_Computer",
          "sizeX": 1,
          "sizeY": 1,
          "deviceName": "Computer",
          "title": "Computer"
    }

Music player switch widget

    {
          "type": "switchMusicPlayer",
          "name": "music_player_mute",
          "deviceName": "Skip",
          "title": " ",
          "startStatus": "volume_mute",
          "sizeX": 1,
          "sizeY": 1
    }

Number widget

This widget displays a dynamic number like a live power consumption.

    {
          "type": "number",
          "name": "powerLevelValue_Total",
          "title": "Total Power",
          "subtitle": "",
          "dataPrefix": "",
          "dataSuffix": "W",
          "sizeX": 2,
          "sizeY": 1,
          "showHighLow": true
    }

Image Switch widget

Depending on the value this widget can take on two different image states.

    {
          "type": "imageSwitch",
          "name": "harmony_activity_Continue Netflix_state",
          "deviceName": "Continue Netflix",
          "imageUrl": "Continue Netflix.png",
          "imageUpdatePrefix": "harmony/activities/",
          "sizeX": 1,
          "sizeY": 1
    }