Zwave Js UI
Full featured Z-Wave Control Panel UI and MQTT gateway. Built using Nodejs, and Vue/Vuetify
Overview
The Z-Wave JS UI is a full-featured Z-Wave Control Panel and MQTT Gateway that allows users to directly control nodes, manage firmware updates, create groups associations, and more. The backend is powered by NodeJS, Express, socket.io, MQTTjs, zwavejs, and Webpack, while the frontend is built using Vue and Vuetify.
Features
- Control Panel UI: Directly control nodes and their values from the UI
- Nodes Management: Add, remove, and configure nodes in the Z-Wave network
- Firmware Updates: Update device firmware using manufacturer-supplied files
- Group Associations: Add, edit, and remove direct node associations
- Z-Wave JS Exposed: Provides full access to Z-Wave JS's APIs
- Z-Wave to MQTT Gateway: Expose Z-Wave devices to an MQTT broker
- Scene Management: Create scenes and trigger them via MQTT APIs
- Debug Logs and Store Access: View debug logs and access store files from the UI
- Network Graph: Displays a map showing node communication with the controller
- Docsify
Docsify generates your documentation website on the fly. Unlike GitBook, it does not generate static html files. Instead, it smartly loads and parses your Markdown files and displays them as a website. To start using it, all you need to do is create an index.html and deploy it on GitHub Pages.
- Express
Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Vuetify
Vuetify is a no design skills required UI Library with beautifully handcrafted Vue Components.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Prism JS
PrismJS is an open-source, lightweight, and extensible syntax highlighting library that supports a wide range of programming languages and markup formats.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
