https://github.com/domiot-io/iot-elements-node
Collections of HTML/DOM elements for IoT systems by domain (home, retail, hospitality, etc.).
https://github.com/domiot-io/iot-elements-node
dom domiot elements home-automation html iot iot-system nodejs smart-building web-components
Last synced: 7 months ago
JSON representation
Collections of HTML/DOM elements for IoT systems by domain (home, retail, hospitality, etc.).
- Host: GitHub
- URL: https://github.com/domiot-io/iot-elements-node
- Owner: domiot-io
- License: mit
- Created: 2025-06-15T21:59:12.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-06-24T20:32:39.000Z (8 months ago)
- Last Synced: 2025-06-24T21:01:33.407Z (8 months ago)
- Topics: dom, domiot, elements, home-automation, html, iot, iot-system, nodejs, smart-building, web-components
- Language: JavaScript
- Homepage: https://domiot.org
- Size: 9.77 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HTML/DOM IoT Element Factories
Collections of HTML/DOM element factories for IoT systems by domain (home, retail, hospitality, etc.).
Elements refer to a single node in the HTML document structure, typically representing part of the logical structure (e.g. ``, ``, ``).
Element classes are required to implement their specific behaviors. For example, "a door element should fire a `change` event when its state changes from `locked=true` to `locked=false` and vice versa".
Elements are organized by domain because their meaning may change depending on the domain of application.
## Installation
```
npm install iot-elements-node
```
## Usage
### Import domain-specific collections
```
import { retailElementFactoryCollection } from 'iot-elements-node';
import { homeElementFactoryCollection } from 'iot-elements-node';
import { hospitalityElementFactoryCollection } from 'iot-elements-node';
```
Then you can use them in your IoT system HTML:
```
```
Pass the collections to the DOMIoT (you can pass none, one or more element factory collections to the DOMIoT.):
```
const domiot = new DOMIoT(html, [retailElementFactoryCollection, myElementFactoryCollection]);
const document = domiot.window.document;
const button = document.getElementById('a6Product2Button');
button.addEventListener('press', (ev) => {
const shelvingUnitId = ev.target.getAttribute('shelving-unit-id');
if (!shelvingUnitId) return;
const shelvingUnit = document.getElementById(shelvingUnitId);
if (!shelvingUnit) return;
// change the color of the shelving unit to blue,
// this changes the light color.
shelvingUnit.style.setProperty('color','blue');
});
...
```
### Import individual element creators
Useful for creating your own collections (see below).
```
import { createHTMLIoTButtonElement, createHTMLIoTAisleElement } from 'iot-elements-node/retail';
import { createHTMLIoTLampElement, createHTMLIoTRoomElement } from 'iot-elements-node/home';
import { createHTMLIoTDoorElement, createHTMLIoTCurtainElement } from 'iot-elements-node/hospitality';
```
## Create your collections using `HTMLElementFactoryCollection`
You can create your own collection of element factories using `HTMLElementFactoryCollection`
Example:
```
'use strict';
import { HTMLElementFactoryCollection } from 'iot-elements-node';
import {
createHTMLIoTAisleElement,
createHTMLIoTShelvingUnitElement,
createHTMLIoTButtonElement,
createHTMLIoTVideoElement,
createHTMLIoTAudioElement
} from 'iot-elements-node/retail';
const myElementFactoryCollection = new HTMLElementFactoryCollection();
myElementFactoryCollection.add('iot-aisle', createHTMLIoTAisleElement);
myElementFactoryCollection.add('iot-shelving-unit', createHTMLIoTShelvingUnitElement);
myElementFactoryCollection.add('iot-button', createHTMLIoTButtonElement);
myElementFactoryCollection.add('iot-video', createHTMLIoTVideoElement);
myElementFactoryCollection.add('iot-audio', createHTMLIoTAudioElement);
```
- `add(tagName, elementFactory)` - Add an element factory
- `remove(tagName)` - Remove an element factory
- `get(tagName)` - Get an element factory
- Iterable (supports `for...of` loops):
```
for (const [tagName, elementFactory] of collection) {
...
}
```
## Domain-specific collections
### Retail
`HTMLIoTAisleElement`
`HTMLIoTAudioElement`
`HTMLIoTBasketElement`
`HTMLIoTButtonElement`
`HTMLIoTColumnElement`
`HTMLIoTCompartmentElement`
`HTMLIoTCubbyElement`
`HTMLIoTCustomerElement`
`HTMLIoTDisplayUnitElement`
`HTMLIoTEndcapElement`
`HTMLIoTGondolaElement`
`HTMLIoTItemElement`
`HTMLIoTLineElement`
`HTMLIoTPodiumElement`
`HTMLIoTRoomElement`
`HTMLIoTShelfElement`
`HTMLIoTShelvingUnitElement`
`HTMLIoTTileElement`
`HTMLIoTVideoElement`
### Home
`HTMLIoTAudioElement`
`HTMLIoTCurtainElement`
`HTMLIoTLampElement`
`HTMLIoTRoomElement`
`HTMLIoTVideoElement`
`HTMLIoTWindowElement`
### Hospitality
`HTMLIoTAudioElement`
`HTMLIoTCurtainElement`
`HTMLIoTDoorElement`
`HTMLIoTLampElement`
`HTMLIoTRoomElement`
`HTMLIoTVideoElement`
`HTMLIoTWindowElement`
## License
MIT.