灯光控制系统
用于家庭自动化灯光控制系统的Web应用程序。
目录
演示版
:backhand_index_pointing_right: 观看演示视频。
成就成就
简洁的用户界面
动态更改亮度值和灯泡名称
改善了动态呈现数据的可维护性-主App组件的每个子组件都在动态呈现数据
响应式设计可提高用户体验
自动化的组件测试
建立过程
使用渲染房间数据。
使用使用房间数据创建表。
渲染灯开关并创建带有toggleSwitch方法。
研究了用于渲染圆形滑块以进行灯光控制的不同库,并决定使用。 我做出此决定是为了通过更好的用户体验来改善UI。 我考虑过的其他库: ,
为了突出显示用户选择的房间,我在选定的表行中添加了“突出显示”类。
为了使箭头从“显示”点指向突出显示的房间,我使用了样式库来动态更改“顶部”样式属性。
使用HTML颜色代码将零部件颜色与线框设计进行匹配。
添加了详细的样式以与线框设计匹配。
当用户选择特定的灯泡来更改名称时,将
1