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. <iot-room></iot-room>, <iot-door/>, <iot-wardrobe></iot-wardrobe>).
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.
npm install iot-elements-node
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:
<html>
<iot-section>
<iot-aisle id="aisle6" name="Coffee, Hot Beverages, Cookies & Chocolate">
<iot-ibits-button-binding id="a6ButtonBinding" location="/dev/ihubx24-sim0">
<iot-obits-color-binding id="a6RelayBinding" channels-per-element="2" location="/dev/ohubx24-sim0">
<iot-button id="a6Product1Button" shelving-unit-id="a6L1" binding="a6ButtonBinding">
<iot-button id="a6Product2Button" shelving-unit-id="a6L2" binding="a6ButtonBinding">
<iot-shelving-unit id="a6L1" name="Ground Coffee" style="background-color:white;" binding="a6RelayBinding:0">
<iot-shelving-unit id="a6L2" name="Coffee Pods & K-Cups"
<iot-my-element></iot-my-element>
</iot-aisle>
</iot-section>
</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');
});
...
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';
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...ofloops):
for (const [tagName, elementFactory] of collection) {
...
}
HTMLIoTAisleElement
HTMLIoTAudioElement
HTMLIoTBasketElement
HTMLIoTButtonElement
HTMLIoTColumnElement
HTMLIoTCompartmentElement
HTMLIoTCubbyElement
HTMLIoTCustomerElement
HTMLIoTDisplayUnitElement
HTMLIoTEndcapElement
HTMLIoTGondolaElement
HTMLIoTItemElement
HTMLIoTLineElement
HTMLIoTPodiumElement
HTMLIoTRoomElement
HTMLIoTShelfElement
HTMLIoTShelvingUnitElement
HTMLIoTTileElement
HTMLIoTVideoElement
HTMLIoTAudioElement
HTMLIoTCurtainElement
HTMLIoTLampElement
HTMLIoTRoomElement
HTMLIoTVideoElement
HTMLIoTWindowElement
HTMLIoTAudioElement
HTMLIoTCurtainElement
HTMLIoTDoorElement
HTMLIoTLampElement
HTMLIoTRoomElement
HTMLIoTVideoElement
HTMLIoTWindowElement
MIT.