Homie-Lit [ˈhoʊmi lɪt] is a TypeScript library that integrates Homie devices with DOM element attributes for easy visualization and interaction. It combines the Homie convention for IoT devices with the Lit library for creating fast, lightweight web components.
You can install Homie-Lit using npm:
npm install homie-litOr include it directly in your HTML file:
<script src="https://cdn.jsdelivr.net/gh/bcopy/homie-lit@main/dist/homie-lit.js"></script>Here's a basic example of how to use Homie-Lit to create a light bulb device with a switch:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homie-Lit Demo: Light Switch and Light Bulb</title>
<script src="https://cdn.jsdelivr.net/gh/bcopy/homie-lit@main/dist/homie-lit.js"></script>
<script type="module" src="lightBulb.js"></script>
</head>
<body>
<h1>Homie-Lit Demo: Light Switch and Light Bulb</h1>
<light-bulb-device id="myLightBulb"></light-bulb-device>
<light-switch id="myLightSwitch"></light-switch>
<script type="module">
import { LightBulbDevice } from './lightBulb.js';
const lightBulb = new LightBulbDevice('my-light', 'My Light Bulb');
document.getElementById('myLightBulb').device = lightBulb;
document.getElementById('myLightSwitch').device = lightBulb;
</script>
</body>
</html>You can find more examples in the demo* directories of this repository. These examples demonstrate various use cases and features of Homie-Lit.
The main class for creating a Homie device.
class HomieDevice {
constructor(id: string, name: string);
addNode(node: HomieNode): void;
getNode(id: string): HomieNode | undefined;
getAllNodes(): HomieNode[];
}Represents a node in the Homie device.
class HomieNode {
constructor(id: string, name: string, type: string);
addProperty(property: HomieProperty): void;
getProperty(id: string): HomieProperty | undefined;
}Represents a property of a Homie node.
class HomieProperty {
constructor(id: string, name: string, datatype: string);
setValue(value: any): void;
getValue(): any;
}A custom element for rendering Homie devices.
class HomieDeviceElement extends LitElement {
device: HomieDevice;
}For more detailed API documentation, please refer to the source code and comments.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the ISC License.