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

Demo adapter based on simple JSON data files
HomeGenie adapter to connect to HomeGenie Server and HomeGenie Mini

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.