Giter Club home page Giter Club logo

pimatic-angular-material-frontend's Introduction

Pimatic Angular Material Frontend

Master: Build Status Code Climate Test Coverage

Development: Build Status

A web frontend build for the pimatic framework using angular and material design (angular material).

Configuration

Example configuration:

{
  	"plugin": "angular-material-frontend",
	"mountPath": "/material",
	"customTitle": "Pimatic Material",
	"debug": false
}

By default, the webinterface wil be available via http://<hostname>/material. You can change this by setting the mountPoint option.

If the debug setting is set to true, the web app will print additional debug information to the console of the browser.

A screen width of at least 400 pixels is advised, otherwise some buttons will overlap with text.

Installation

You can install the plugin either via npm or via git.

  1. Add the plugin to the plugins section of the config.json file of your pimatic app:

     {
       "plugin": "angular-material-frontend"
     }
    
  2. Now you can do one of two steps:

    • Start pimatic. The plugin will be downloaded automatically

    • Install the plugin manually by executing the following command in the pimatic app root:

         npm install pimatic-angular-material-frontend
      

      or

         npm install git://github.com/denniss17/pimatic-angular-material-frontend
      

      This should also automatically download all dependencies via bower. If not, run the following command in the root of the plugin:

         bower install -p
      

Changelog

0.3.3

Fixed Issue #10: Installation not working Fixed Issue #9: Login not working

0.3.2

Fixed issue #7, caused by an update of socket.io.

0.3.1

Fixed issue #4 Fixed issue #5

0.3.0

This update does not change much in the frontend, but has some rather big changes in the background.

  • Updated description to make the plugin ready for Pimatic 0.9.x (thanks to https://github.com/mwittig)
  • Updated dependencies (also fixes bug with visible scrollbar when toast message is shown)
  • Added loading page
  • Background changes:
    • Many restructurings and refactorings of the code.
    • Introduced config based on environment.
    • Added CI using Travis and CodeClimate.

0.2.1

Bugfixes

0.2.0

  • All basic devices (except music player) added
  • Better localisation

0.1.2

A little bugfix.

0.1.1

  • Description updated
  • Documentation updated

0.1.0

Initial release.

To do

(not in order of priority)

  • Add all default templates link
    • switch
    • shutter
    • dimmer
    • device
    • buttons Test many buttons (more than fitting in one row)
    • musicplayer
    • thermostat (GUI settings)
    • timer
  • Error if device could not be found link
  • Default (device)template if given template does not exist
  • Graphs :)
  • Edit pages
  • Themes
  • More settings

Developing

First make sure all development dependencies are installed:

npm install

The full source code is available at the git repository. Download the source by cloning the repository.

The application itself is in the app/ directory. After a change in the application, you should update the file used in the dev.html page. This can be done by executing the following command:

grunt dev

or simply

grunt

This command wil update the dist/pimatic-angular-material-frontend.js file. I recommend creating some kind of file watcher to do this automatically after a file change.

Testing

Jasmine is used to unit test the frontend. Running the following command should run all tests (all files ending with .test.js):

grunt test

Building

A Grunt task is specified which should test the scripts and build the production files. Simply run the following command in the project root:

grunt build

This command will run tests, execute a jshint inspection and update the dist/pimatic-angular-material-frontend.min.js and index.tmpl.html files.

References

Pimatic: http://pimatic.org/

Angular: https://angularjs.org/

Angular Material: https://material.angularjs.org/latest/#/

Jasmine: http://jasmine.github.io/

Grunt: http://gruntjs.com/

Bower: http://bower.io/

npm: https://www.npmjs.com/

This project attempts to follow the AngularJS style guide, which can be found here.

License

Pimatic Angular Material Frontend is published under the GNU General Public License Version 3:
you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, version 3.

You should have received a copy of the GNU General Public License
along with this plugin. If not, see <http://www.gnu.org/licenses/>.

pimatic-angular-material-frontend's People

Contributors

dennisschroer avatar mwittig avatar sweetpi avatar

Watchers

 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.