A touch enabled Command and Control Center for Home Assistant
Please note: this project is currently NOT intended to be used on a publicly available host as the js/credentials.js file is downloaded to the client and used to authenticate to the HASS websocket.
To run the server at the command line: ./cube.py
By default, the cube will:
- serve pages on *:4096
- look for templates in
./web/templatesrelative to the location ofcube.py - look for assets in
./web/assetsrelative to the location ofcube.py - embed parameters from
./parameters.jsonrelative to the location ofcube.py
Add to /etc/rc.local:
#/bin/bash
sudo screen -S cube -X quit
sudo screen -S cube -dm sh -c 'sudo -u homeassistant -H /path/to/cube.py; echo $?; exec bash -i'This is the primary interface component for the cube.
It expects six .cube-face divs with cube-face attributes of front, back, top, bottom, left, and right. The first face declared in the DOM is the default face. After the inactivity reset timeout, the cube will return to the default face.
Parameters:
// initialization
$('#cube').cubify({
'resetTimeout': 120 // OPTIONAL
// The number of seconds of inactivity before the cube
// returns to the default face
});On initialization, the hass.js component will discover all sensor, control, and camera entities in the specified interface. Any element can be made into an entity by adding and entity class (.sensor, .control, or .camera) and giving it an entity-id attribute with the HASS entity-id.
Example entity:
<div class="sensor" entity-id="sensor.time"> </div>The component will then subscribe to all state changes in Home Assistant and respond to changes in the discovered entities. Upon receipt of a state change to a watched entity, hass.js will trigger an update-state event on the entity element and pass it an {'state': 'xxx', 'attributes': {}} object as data. The cube consumes these events in sensors.js, controls.js, and cameras.js
// initialization
$('#cube').hass({
'host': 'localhost', // OPTIONAL
// The Home Assistant host
'password': '', // REQUIRED
// The Home Assistant API password
'virtualEntities': [], // OPTIONAL
// List of entity-ids not present in interface but to
// handle anyway
'log': '[hass-log]', // OPTIONAL
// The element to use as the log
'logLength': 25, // OPTIONAL
// The number of recent log entries to show
'timeFormat': 'YYYY-MM-DD HH:mm:ss.SSS', // OPTIONAL
// The time format for the event log face
'logEventsToConsole': false, // OPTIONAL
// Log all HASS events to the console
'onDiscoveryComplete': null // OPTIONAL
// Callback for when entity discovery is complete
});This component responds to update-state events produced by hass.js and updates sensor states accordingly.
// should be initialized after entity discovery is complete
$('.sensor').sensor({
'bindings': [] // OPTIONAL
// Dictionary of custom bindings to apply to sensors
// key: regex pattern matching sensor type
// value: function(state, attributes, type){ }
});This component responds to update-state events produced by hass.js and updates control states accordingly.
// should be initialized after entity discovery is complete
$('.control').control();This component provides a janky "real-time" view from cameras in Home Assistant.
// should be initialized after entity discovery is complete
$('.camera').camera({
'baseurl': '' // OPTIONAL
// Home Assistant provides a relative URL to capture from
// the camera. This is the base url to load the image
// and is typically the the same as the hass host.
});
// paramaters.js
"cameras": {
"typeA": [
"camera.entity_id_0",
"camera.entity_id_1",
"camera.entity_id_2"
],
"typeB": [
"camera.entity_id_3",
]
}On initialization, the floorplan.js component will convert the elements provided during initialization into controls attached to their respective entity-ids. The component is SVG capable.
// initialization
$('#floorplan').floorplan({
'controls': [], // REQUIRED
// Dictionary mapping elements to entity-ids
'onReady': null // OPTIONAL
// Callback for when controls have been created
});
// example
$('#floorplan').floorplan({
'controls': {
'#living-room-lights': 'light.living_room'
}
});The notices.js component displays transient notices a list. It leverages virtual entities in hass.js to display entity states which are not always required to be shown; the number of USPS packages being delivered today, for example.
Only one instance of a notice type is allowed to be shown at a time. If you add a notice of an existing type, this will be interpreted as an update to the notice, and the new instance will replace the old.
// initialization
$('#notices').notices({
'max': 10, // OPTIONAL
// The maximum number of notices to display
'icons': [], // OPTIONAL
// Dictionary of paths to additional icons
});
// adding a new notice
$.notices.add({
'type': 'usps-package-count', // REQUIRED
// The notice type
'message': '3 packages arriving today', // REQUIRED
// The message to display with the notice
'description': null, // OPTIONAL
// Additional information to display with the notice
'priority': null, // OPTIONAL
// Increases the priority of the notice so that it is more
// prominent in the list
// Values: [null, 'high', 'urgent']
'symbol': '', // OPTIONAL
// The symbol to display next to the notice
// If not specified, will try to use notice type.
// Looks in icons provided during initialization,
// if not found will try to use icon pack.
'precedence': '' // OPTIONAL
// Prepend the notice to the list instead of appending it
// Values: [null, 'top']
}); By default, the notices.js component will use the material-icons pack.
The agenda.js component displays today's events from an iCal feed for up to two users.
// parameters.js
...
"agenda": {
"ttl": 10800, // REQUIRED
// How often to refresh the feeds
"calendars": { //
// OPTIONAL
"left": "http://ical.feed", // Feed to display on the left hand side
// OPTIONAL
"right": "http://ical.feed" // Feed to display on the right hand side
}
},
...The stream.js component displays a webstream camera on the page when the face is visible
// parameters.js
...
"printer":{
"webcam": "http://webcam.stream" // Feed URI
}
...deprecated - use a webshot camera instead. The prevents exposure of the google api keys to the cube, as well as reducing the number of calls to the maps service if multiple cubes are in use.
Creates a Google Map with traffic layer showing how heavy the traffic is in your local area. Please note, this component is not integrated with Home Assistant and does not respond to events. It is a pure client side implementation talking directly to Google.
// initialization
$('#traffic').traffic({
'apiKey': '', // REQUIRED
// Google Maps API key
'location': 'latitude,longitude' // REQUIRED
// The coordinates to center on
'updateInterval': 5 // OPTIONAL
// The number of minutes between updates
// Note: Your API key is rate limited, if you specify
// too small an interval your updates may be inconsistent
});