Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/genielabs/homegenie-web-ui
HGUI, dashboard and components for Smart Home and IoT applications
https://github.com/genielabs/homegenie-web-ui
component-based component-library iot-dashboard progressive-web-app pwa zuixjs
Last synced: 3 months ago
JSON representation
HGUI, dashboard and components for Smart Home and IoT applications
- Host: GitHub
- URL: https://github.com/genielabs/homegenie-web-ui
- Owner: genielabs
- License: mit
- Created: 2019-03-10T20:37:20.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T01:55:51.000Z (about 2 years ago)
- Last Synced: 2023-08-15T03:58:01.667Z (over 1 year ago)
- Topics: component-based, component-library, iot-dashboard, progressive-web-app, pwa, zuixjs
- Language: JavaScript
- Homepage: https://genielabs.github.io/homegenie-web-ui
- Size: 1.71 MB
- Stars: 4
- Watchers: 4
- Forks: 6
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://zuixjs.org) library and its
[web-starter](https://github.com/zuixjs/zuix-web-starter) project.
#### **[Online DEMO](https://genielabs.github.io/homegenie-web-ui)**
Components from this project can also be embedded as stand-alone components
in any web page.
#### **[CodePen EXAMPLE](https://codepen.io/genielabs/pen/EJRZoa)**
## 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](https://github.com/genielabs/homegenie-web-ui/tree/master/source/app/adapters/demo)
- **HomeGenie** adapter to connect to [HomeGenie Server](https://github.com/genielabs/HomeGenie)
and [HomeGenie Mini](https://github.com/genielabs/homegenie-mini)
Other connection adapters might also be implemented.
Contributors in this area are very welcome :)
## Prerequisites
This project requires [Node.js/npm](https://www.npmjs.com/get-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 "" %}` 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](https://github.com/zuixjs/zuix-web-starter) documentation for further information.