Introduction

Web UI foundation for device monitoring and control. Preact components, TypeScript, tested core logic. Complete interfaces under 50KB gzipped.

Features

• Preact + TypeScript
• System and network configuration
• Sensor monitoring components
• OTA firmware update
• Notification system
• Offline device documentation
• Responsive design

Preview

Development

Install dependencies

All dependencies should be installed locally, use npm install --save-dev.

npm install

Build Web GUI

Before writing Web GUI to the device, make sure it's been built.

npm run build

Run tests

Cover your code with unit test, both logic and UI components. We use vitest.

npm run test
npm run test:coverage
npm run test:watch

Format code

Make sure your code is properly formatted. We use eslint.

npm run fmt

Compress assets

• By default everything that is inside HTML, CSS, JS are compressed during the build process, see vite.config.js for more details.
• SVG files should be pre-compressed with SVGO as npx svgo example.svg -o example.compressed.svg, SVGO is available after running npm install. After SVG is pre-compressed it should be inlined in the source code directly or as JSX component.

Contribution

• Preact JS Framework is used for development, please refer to its official documentation for more details.
• master - stable and ready-to-use branch. Semver is used for versioning.
• Try to keep PR small.
• New code should be similar to existing code. Use the Google TypeScript Style Guide.

License

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.