Coder Social home page Coder Social logo

sbambach / smartvisu-cleaninstall Goto Github PK

View Code? Open in Web Editor NEW

This project forked from herrmannj/smartvisu-cleaninstall

0.0 2.0 0.0 28.58 MB

smartvisu customized for fresh fhem / fronthem install

License: GNU General Public License v3.0

HTML 59.45% CSS 20.96% JavaScript 12.34% PHP 7.25%

smartvisu-cleaninstall's Introduction

This is a customized package of smartVISU for use with fhem and fronthem

THIS WORK IS BASED ON smartVISU.de, 
CREDITS AND THANKS TO MARTIN GLEISS

license     GPL [http://www.gnu.de]

Extension for fhem and fronthem by Joerg Herrmann
see fhem.de

DISCRIPTION
--------------------------------------------------------------------------------
smartVISU is a framework to create a visualisation with simple html-pages.
You don't need to know javascript, but if you know you will have a lot more fun


SHORT INTRODUCTION OF THE STANDARD PAGE LOADING PROCESS OF SMARTVISU
--------------------------------------------------------------------------------
In Smartvisu, pages follow a predefined integration line when loading:
All starts with loading index.php as the default page of http://<yourserver>/smartVISU which 
	- calls includes.php for reading out the config.ini
	- starts the twig environment (autoloader.php)
	- sets path variables (pages, icons, widgets, base, apps, cache)
	- smartvisu looks into several folders to find a file in the following order:
		1. your selected ./pages/<myfolder> folder from config.ini
		2. the ./apps folder
		3. the ./pages/smarthome folder
		4. the ./pages.base folder
	- if no page is given as a URL parameter,  index.php loads the config_index page which is index.html defined by /lib/defaults.php, 
	- if no pages folder is configured, the welcome page ./pages/base/index.html is loaded
	- if a pages folder is configured, the index.html is loaded from there
The follwing runs in a recursive order by loading index.html from your selected pages folger:
The index.html calls to
	- {% extends "base.html" %} which loads base.html and fills the weather and some other widgets into the {% block sidebar %} of base.html
	- {% include 'rooms_menu.html' %} into {% block content %} of base.html which is your room select menu
base.html itself {% extends "root.html" %} which loads root.html and defines what to show inside the {% block body %} from root.html: 
- Header including
	- Menu
	- clock
	- icon
	- alerts
- and defines the new blocks 
	- {% block content %}{% endblock %}
	- {% block sidebar %}{% endblock %}
	- {% block footer %}{% endblock %
 root.html 
 	- loads all that environment stuff including widgets, jquery and other scripts 
 	- offers the {% block body %}{% endblock %} for later filling within base.html (see above)
 Now your page shows up and your navigation can begin
 
SYSTEMREQUIREMENTS
--------------------------------------------------------------------------------
    -   fhem with fronthem and a working local webserver with php support
 
3 STEP FIRST SETUP GUIDE:
--------------------------------------------------------------------------------

    For the first setup do the following:
    
    1. cd to the www-root folder of your installation
    2. use git clone https://github.com/herrmannj/smartvisu-cleaninstall.git smartvisu
    3. COPY config.ini.default to config.ini with cp config.ini.default config.ini
   
 
10 STEP PERSONALIZATION GUIDE:
--------------------------------------------------------------------------------

    For your own Project do the following:
    
    1.  Create a new directory in "pages", for example "pages/visu" or 
        "pages/YOURPROJECT". This is your individual project-directory where you
		may work. Copy all files from "pages/_template" to your project-directory
    
    2.  Check the config.ini and set the "config_pages" to "YOURPROJECT"
      
    3.  Set the "config_driver" to your backend-environment
        - fhem: domotiga.js or fronthem.js, port 2121
        - 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", these are system
        pages
    
    5.  Fill the page with your preferred content and widgets
    
    6.  If you need to change the design, use a "visu.css" - stylesheet file in 
        your project-directory. 
		If you wand to develop own widgets, also place them in your directory.
		Name the javascript-file (if you need on) to "visu.js" and it will be
		included automatically. Name the file with the widgets e. g. "custom.html"
    
    7.  Test your page with:
        http://localhost/smartVISU/index.php?page=mypage
        Note: replace "localhost" with your hostname from your server      
   
    8.  Create all pages you need
     
    9.  At the end of your project set "config_cache" to "true" to speed up your
        smartVISU
        
   10.  Enjoy smartVISU!
        
 
1 STEP UPDATE GUIDE:
--------------------------------------------------------------------------------

    1.  use git pull in the ../smartvisu folder to refresh smartvisu from git
        (all your personal files will not be touched!)
        
        If you changed original files of this git in your local installation this will fail.
        Use git pull and follow the instructions. Your personalized changes will get lost.
        Change only your own files!



smartvisu-cleaninstall's People

Contributors

bgewehr avatar hcs-svn avatar herrmannj avatar

Watchers

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