Giter Club home page Giter Club logo

dashicz's Introduction

dashicz

Dashicz is Dashing.io (nice dashboard) for Domoticz (home automation), and looks something like this. It doesn't need a server, you simply unpack it in the domoticz/www directory, and manage the dashboard by editing the example html file. It's purpose is a nice user friendly dashboard to control your house from a tablet for instance.

Screenshot

screenshot

Impatient?

Run:

cd domoticz/www
git clone https://github.com/maartenbreddels/dashicz --recursive
cd dashicz
cp example.html index.html

Open http://localhost:8080/dashicz/index.html

Installing

Get the source

cd domoticz/www
git clone https://github.com/maartenbreddels/dashicz --recursive

The recusive part makes sure you also get dashing.io

Edit the html file

You may want to copy example.html to index.html

cp example.html index.html

Edit the index.html, and you are done! Now open your browser and point it to (probably) http://localhost:8080/dashicz/index.html

Developing

Install python libraries

This is fool proof, assuming you have python.

curl -O https://bootstrap.pypa.io/get-pip.py
python get-pip.py --user
~/.local/bin/pip pScss coffeescript --user

Otherwise, simpy do:

sudo pip install pyScss coffeescript

Install coffeescript

sudo apt-get install nodejs npm

I couldnt get coffee-script install over https, this fixed it

sudo npm config set registry http://registry.npmjs.org/
sudo npm install coffee-script

Generate javascript and css

python compile.py 

Test it out

Go to http://youserver:yourport/dashicz/example.html , possibly http://localhost:8080/dashicz/example.html

What now?

Dashicz doesn't come with an editor or whatever, copy example.html to index.html (or something else), and edit it.

How it works

  • Using ajax we get poll the device changes in domoticz
  • Using Dashing.io we have <div data-id="Dummy" data-view="Switch"></div>, which links the Domoticz switch named Dummy to a widget called 'Switch'.
  • dashicz/widgets/switch contains switch.coffee/html/scss, which defines the whole widget
  • compile.py compiles all the coffeescript and scss into javascript and css.
  • On top of that you can also have composite widgets, thermostate_room and status are examples
  • Use the source!
  • Contributions welcome, otherwise fork!

Usefull tips

Auto recompile

If you edit any of the js/coffeescript or css/scss files, compile.py needs to be run. Automate this by installing watchdog, it can monitor file changes and execute a command when something changes.

pip install watchdog

Now execute this:

watchmedo shell-command --patterns="*.scss;*.js;*.coffee"     --recursive     --command='python compile.py' -W

Making a new widget

  • Run sh new_widget.sh switch foo to create a widget called foo based on switch, or do the following:
  • Create widgets/foo/foo.coffee (and have a class Dashing.Foo, see other widgets for an example)
  • Create widgets/foo/foo.html
  • Create widgets/foo/foo.scss (make sure it starts with .widget-foo { )
  • Add "foo" to the list in compile.py
  • Execute compile.py
  • Add
    to index.html
  • Use the source!

dashicz's People

Contributors

maartenbreddels avatar

Watchers

James Cloos 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.