Skip to content

Latest commit

 

History

History
114 lines (79 loc) · 3.95 KB

README.md

File metadata and controls

114 lines (79 loc) · 3.95 KB
Raw

What is HGUI ?

Is a dashboard and control panel but also a set of reusable components for web based Smart Home and IoT applications.

Based on zuixjs library and its web-starter project.

Online DEMO

Components from this project can also be embedded as stand-alone components in any web page.

CodePen EXAMPLE

Features

  • component based
  • modern and mobile-first UI design
  • self contained widgets that can be embedded as stand-alone components into any web page with just one line of code
  • reactive design with real time event stream
  • integration of multiple and heterogeneous data sources through the implementation of connection adapters
  • integrated build tool to generate as SPA+PWA

Currently implemented connection adapters

Other connection adapters might also be implemented. Contributors in this area are very welcome :)

Prerequisites

This project requires Node.js/npm to be installed.

Installation

Download or clone this repository

 git clone https://github.com/genielabs/homegenie-web-ui.git
 cd homegenie-web-ui

Install development dependencies and run initial build

npm install && npm run build

Usage

Start local web server

npm start

Start auto-build script (watch file tree for changes and auto-rebuild)

npm run build && npm run watch

Or manual building

npm run build

website source files are located in the ./source folder and are generated in the ./docs folder. This setting can be changed by modifying the ./config/default.json file.

Site Structure

The following are just guide-lines for app structuring.

├── source/                #
│   ├── _inc/              # Static-Site includes (eg. header.html, footer.html)
│   ├── app/               # app folder
│   ├────── adapters/      # - data adapters and providers
│   ├────── components/    # - components
│   ├────── controllers/   # - controllers
│   ├────── layout/        # - layout files (header, footer, ...) 
│   ├────── pages/         # - page fragments conveniently
│   │                      #   organized into subfolders
│   ├────── shared/        # - other bits shared across the whole app
│   ├────── templates/     # - templates
│   ├────── widgets/       # - widgets
│   ├── images/            # Images (generic/shared)
│   └── ...                # Landing/Home and other entry pages,
.   .                      #  PWA service worker, SEO, etc.

The _inc folder is reserved for static-site content fragments that are reusable fragments of page that can be included by using the {% include "<file_to_include>" %} command.

It is recommended to put component-local or content-local resources inside a dedicated subfolder.

For instance, a app/components/login_dialog component will consist of the following files/folder:

├── source/
│   ├── app/
│   ├────── components/
│   ├────────── login_dialog.js     # Controller
│   ├────────── login_dialog.html   # View
│   ├────────── login_dialog.css    # Style
│   ├────────── login_dialog/       # Folder where to put
.   .                               #  component-local assets/resources

Read zuix-web-starter documentation for further information.