Riz UI
Vue 3+Typescript UI to control Wiz lights with the Riz API
Overview
The Riz UI provides an intuitive interface for managing rooms and lights, making it a great solution for anyone looking to enhance their home automation experience. With features that allow you to add, edit, and remove both rooms and lights, this tool is particularly user-friendly and accessible. It also boasts hot-reloading capabilities when started with npm, ensuring a seamless development experience for further enhancements and customizations.
This application caters to both new and experienced users, permitting them to control various aspects of their lighting environment directly through a mobile-friendly interface. It’s geared towards those who want a simple yet effective way to manage their smart home components without needing extensive technical knowledge.
Features
- Room Management: Easily add, edit, and remove rooms, enabling better organization of your smart home setup.
- Light Control: Add, edit, and manage lights with features including brightness adjustments and color settings for a more personalized ambiance.
- Scene Customization: Set specific scenes with defined parameters such as temperature or lighting color to create the desired atmosphere in any room.
- Toggle Controls: Quickly turn lights on or off and reboot individual rooms or lights, making it straightforward to manage your home environment.
- Mobile Friendly: Designed with mobile in mind, ensuring a smooth user experience regardless of device being used.
- Hot-Reloading: Start the npm development server with hot-reload, making development iterations faster and more efficient.
- State Resync Options: Available functionality to refresh states and ensure accurate representation of room and light statuses, even when changes are made from another client.
- 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.
- 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.