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.
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)
- 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
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.^
The layout of the dashboard is customizable with json files.
Displays a digital clock widget
{
"type": "clock",
"name": "Clock",
"sizeX": 2,
"sizeY": 1,
"actions": []
}The dashboard currently supports two different graph widgets based on the fantastic d3 library.
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": {}
}
]
}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": {}
}
]
}Displays a dynamic image like an album cover.
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": {}
}
]
}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
}
}
]
}There are three different switches:
- A Hue-Switch (type
switch) - A TP-Link switch (type
switchPlug) - A music player switch to control playback (type
switchMusicPlayer)
However, all widgets behave and look exactly the same.
{
"type": "switch",
"name": "lights_Ambilight",
"deviceName": "Ambilight",
"title": "Ambilight",
"sizeX": 2,
"sizeY": 1
} {
"type": "switchPlug",
"name": "power_Computer",
"sizeX": 1,
"sizeY": 1,
"deviceName": "Computer",
"title": "Computer"
} {
"type": "switchMusicPlayer",
"name": "music_player_mute",
"deviceName": "Skip",
"title": " ",
"startStatus": "volume_mute",
"sizeX": 1,
"sizeY": 1
}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
}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
}