Code Monkey home page Code Monkey logo

smarthome-dashboard's Introduction

smarthome-dashboard

I consider Fibaro HC2's web interface and smartphone application unusable. Instead of whining there and there, I decided to create my own application relying on their API.

Wall

Disclaimers

  • This project is still WIP and improvable.
  • I did not specifically create this application to be flexible, configurable, etc. It fits my needs and use-case.
  • I am definitely not a node.js, jquery, html, css, whatever developer. Lots of things are probably ugly and against best practices.

My need

I wanted to hang a tablet on a wall in my house to display some information, have a view and control Fibaro HC2 attached devices.
It had to have a custom interface with big text, buttons, slider, etc. to be easily touched and if possible be good looking (not really my area of expertise).

Hardware

My first quest was to find a cheap x86 tablet onto which I could install a Linux distro (Debian in my case): the winner is a Onda v975w.
Got it for abt. 150$ shipping fees included and it's a really impressive device for the price!
It's running Debian testing with a custom 4.3.0 kernel. Thanks to lwfinger and hadess the tablet has WiFi, otherwise it would be useless.

Repository content

Now, for what regards files in this repository:

  • /Dockerfile: used to generate a docker container based on debian jessie with node.js to run the backend/server part (virtual size abt. 255Mb)
  • /Dockerfile.nodemon: same as above but using nodemon to restart the app every time a change happens in /src/backend/ (coding purposes)
  • /src/package.json: to feed npm install during container generation
  • /src/backend/: node.js application serving frontend to clients, handling incoming websocket connections and exchanges with Fibaro HC2
  • /src/frontend/: the frontend part (html/css/js/fonts) served by the node.js application to clients

Backend configuration

The backend part (server.js) needs a little bit of configuration:

credentials: HC2 username:password
host: HC2 IP address/hostname
port: HC2 port (most likely 80)
myself: IP:2080 (IP to reach docker container from HC2 scene pushing devices status changes)
sceneName: 'NODE-tification' (scene that pushes devices status changes to HTTP server)
polling: 3600 (seconds between updates)
polling_fail: 60 (seconds before next update when previous attempt failed)

Just above this part, in the file, you may want to:

  • Enable/disable debug mode. It only makes the application verbose. Check logs for output.
  • Change the timezone. I couldn't get dates to be displayed correctly until I specifically mentioned the timezone I was in.

How does it work?

When the docker container is generated from the Dockerfile, the src directory is copied at its root level and it exposes ports 2080 and 8888. The former is listening for HTTP connections to serve the frontend part while the latter is waiting for incoming websocket connections (this is the way the frontend interacts with the backend almost instantly). The container runs the node.js application /src/backend/server.js.
Of course if Dockerfile.nodemon is being used /src directory has to be shared between host and container otherwise changes won't trigger a reload of the node app.
HC2 state feedback: Upon its start, node.js creates/updates a given scene on the HC2. This scene is being triggered by any device change (value / value2) so that our app is notified when something happens on the HC2: it makes a simple GET towards port 2080 and the info is then relayed to homeautomation.js for handling.
Finally there's a very basic protocol between server and clients to do what is expected, see below.

"Protocol" used between server and clients

Format: { action: "<action>", info: "<info>" }

####server -> client actions:

  • schema (info = elements to build interface)
  • displayNotification (info = message/notification to be displayed)
  • deviceChanged (info.id = , info.value|value2 = )
  • dump (info = json/message to be dumped as-is)
  • reload (info = optional, delay before reloading page)
  • error (info = error message to display)

####client -> server actions:

  • turnOn (info = id of element to which turnOn action should be sent)
  • turnOff (info = id of element to which turnOff action should be sent)
  • setValue (info.id = id of element to which new value should be sent, info.value = )
  • setValue2 (info.id = id of element to which new value2 should be sent, info.value = )

External components I used for this project:

I haven't committed these as they can be fetched directly. As-is the project will also be missing the CSS and fonts.

Thanks to these guys

Their info helped me start the project:

What does my frontend look like?

Room Graph Scenes

smarthome-dashboard's People

Contributors

callmemagnus avatar dynek avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.