Code Monkey home page Code Monkey logo

smartvisu's Introduction

smartVISU

Join the chat at https://gitter.im/sVISU/Lobby

DESCRIPTION

smartVISU is a framework to create a visualisation for a knx-installation with simple html-pages.
To read and write group-telegrams special tags are used.
You don't need to know javascript.

SEE: smartvisu.de

FEATURES

  • Pretty: Responsive design, auto adjustment to smartphones and tablets
  • Strict: One template for all devices
  • Easy: Implementation with HTML5
  • Simple: Connect to KNX with commands directly in HTML
  • Universal: Small concept of widgets
  • Connectable: Using drivers for different KNX installations

SYSTEM REQUIREMENTS

  • IP-Network, KNX-Bus
  • smarthomeNG, linknx, ioBroker, openHAB2, FHEM or knxd (deprecated: eibd ) backend or JSON interface
  • Webserver with PHP. We highly recommend PHP 7.2 and above since older version are end of life and get no more security updates. Some features in quad design explicitely require PHP 7.2+
  • Firefox, Chrome, IE, Safari, iPhone, iPad, Android Phone or Android Tablet

10 STEP GUIDE

For your own Project do the following:

  1. Create a new directory in "pages", for example "pages/YOURPROJECT".
    This is your individual project-directory where you may work.
    Copy all files from "pages/_template" to your project-directory
  2. Call smartVISU in your browser (http://localhost/smartVISU) and proceed to the configuration page. Select "YOURPROJECT" in the user interface section.
  3. Select your smart home backend in the "smarthome/IoT data source" section
    • linknx: for linxknx and eibd environment
    • smarthomeNG: for SmartHomeNG environment
    • ...
    • knxd / eibd: for direct access
    • offline: only for testing, all GADs will be stored in a textfile ("temp/offline_YOURPROJECT.var")
  4. Create a new page in your project-directory, for example "mypage.html". Note: Do not use "base.html, basic.html, device.html" nor any other reserved name of the system pages.
  5. Fill the page with your preferred content and widgets (see the pages/example*.* sections). The widget constructor in the system menu will help you to parametrize the widgets correctly.
  6. If you need to change the design, select a design in the user interface section.
    If you want to develop your own widgets, place them in ./pages/YOURPROJECT/widgets or ./dropins.
    Provide a mywidget.html and a mywidget.js (if you need one). You'll need to import the html file in your pages while javascript will be included automatically.
    Avoid names which are already used in the "smartvisu/widgets" directory or other sytem file names.
  7. Test your page with: http://localhost/smartVISU/index.php?page=mypage
    Note: replace "localhost" with the hostname from your server
  8. Create all pages you need. The template checker will check the formal correctness of the completed set of pages.
  9. At the end of your project set "cache" to "on" in the user interface area to speed up your smartVISU
  10. Enjoy smartVISU!

smartvisu's People

Contributors

andrek01 avatar aschwith avatar bear80 avatar bmxp avatar bonze255 avatar cstrassburg avatar cyberjunky avatar dacebu avatar dka23 avatar gitmirko avatar gitter-badger avatar hcs-svn avatar hebe2k avatar henfri avatar jpawlowski avatar lausitzer avatar martin-gleiss avatar msinn avatar onkelandy avatar panzaeron avatar patrikg8 avatar rammann avatar robertaistleitner avatar smailee avatar svsool avatar t3r avatar thomascr avatar tom-bom-badil avatar wvhn avatar zobi 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.