[DigiKey "Smart Everything, Non-stop Happiness" Creative Competition] Work Submission: Smart Home Central Control Screen

pomin

[DigiKey "Smart Everything, Non-stop Happiness" Creative Competition] Work Submission: Smart Home Central Control Screen [Copy link]

 

Work name: Smart Home Central Control Screen Author: pomin > Introduction: The interface is drawn using LVGL with GUI Guider, and the MQTT protocol is used to communicate with the home server (RK3568). It is connected to HomeAssistant home automation through MQTT, and Node-RED is used to create home automation flows and control various smart devices in the home. [[DigiKey "Intelligent Manufacturing of Everything, Non-stop Happiness" Creative Contest] Smart Home Central Control Screen 1. Unboxing](https://en.eeworld.com/bbs/thread-1260339-1-1.html) [[DigiKey "Intelligent Manufacturing of Everything, Non-stop Happiness" Creative Contest] Smart Home Central Control Screen 2. Building the Development Environment](https://en.eeworld.com/bbs/thread-1261361-1-1.html) [[DigiKey "Intelligent Manufacturing of Everything, Non-stop Happiness" Creative Contest] Smart Home Central Control Screen 3. Running LVGL](https://en.eeworld.com/bbs/thread-1263269-1-1.html) [[DigiKey "Intelligent Manufacturing of Everything, Non-stop Happiness" Creative Contest] Smart Home Central Control Screen 4. Adapting GUI Guider](https://en.eeworld.com/bbs/thread-1265767-1-1.html) [【DigiKey "Smart Manufacturing, Non-stop Happiness" Creative Competition】Smart Home Central Control Screen 5. Wi-Fi Module Production](https://en.eeworld.com/bbs/thread-1268320-1-1.html) [【DigiKey "Smart Manufacturing, Non-stop Happiness" Creative Competition】Smart Home Central Control Screen 6. Home Server Construction](https://en.eeworld.com/bbs/thread-1268694-1-1.html) Author: pomin --- ## Project Introduction Smart home has become more and more popular in recent years. Taking the opportunity of this DigiKey competition, I designed and made a smart home central control screen. - The central control screen can be connected to the home server, use MQTT to communicate with the home server, and connect to HomeAssistant - The central control screen is bridged to HA through Node-RED and EMQX to realize graphical construction of its own automation flow to achieve complex home automation - The central control screen uses LVGL to build the interface, realize a beautiful interface on the screen, and realize real-time viewing and control. ## Overall design <ignore_js_op> <img style="cursor:pointer;" id="aimg_774394" aid="774394" src="/bbs/static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233451s2rtnr66twierqvr.png" file="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233451s2rtnr66twierqvr.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_774394_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>系统框图.drawio.png</strong> <em class="xg1">(274.37 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_774394" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=774394&handlekey=savephoto_774394">save to album</a> </p> <p class="xg1 y">2024-1-14 23:34 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> This project uses the STM32H7B3I-DK development board to create a very beautiful interface. It uses LVGL to draw a very beautiful interface. It uses the MQTT protocol to communicate with the home server (RK3568), connects to HomeAssistant home automation, and uses Node-RED to obtain the real-time status of various smart devices in the home. Through the BLE adapter, ZigBee gateway, Wi-Fi or Ethernet of the home server, it connects to various smart devices of different communication protocols and different manufacturers in the home, and realizes the function of a private and easy-to-deploy smart home central control screen, avoiding the bundled sales of smart home devices and solving the incompatibility of multiple manufacturers and multiple communication protocols. The system block diagram is shown in the figure below. ### Hardware module design H7B3I-DK board supports Arduino interface module, so I drew an expansion board for ESP32-S3 to Arduino interface, designed with EasyEDA, USB, CH340 automatic download circuit and ESP32 module, using serial port to communicate with H7B3-DK board, using MQTT protocol to communicate with the server. <ignore_js_op> <img style="cursor:pointer;" id="aimg_774395" aid="774395" src="/bbs/static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233502i5ojht5poo5pap4d.png" file="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233502i5ojht5poo5pap4d.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_774395_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>Pasted image 20240109232644.png</strong> <em class="xg1">(75.37 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_774395" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=774395&handlekey=savephoto_774395">save to album</a> </p> <p class="xg1 y">2024-1-14 23:35 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> <ignore_js_op> <img style="cursor:pointer;" id="aimg_774396" aid="774396" src="/bbs/static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233517kz2g36h9g9sn39dg.jpg" file="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233517kz2g36h9g9sn39dg.jpg" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_774396_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>IMG_20240109_232713 (2).jpg</strong> <em class="xg1">(340 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_774396" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=774396&handlekey=savephoto_774396">save to album</a> </p> <p class="xg1 y">2024-1-14 23:35 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> ### Software design#### WiFi networking - Use Arduino to develop ESP32, make it automatically connect to the Internet, connect to the home MQTT server, subscribe to the specified topic, and enter the serial port transparent mode <ignore_js_op> <img id="aimg_774397" style="cursor:pointer;" aid="774397" src="/bbs/static/image/common/none.gif" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233535ropx1swzbdigjxxx.png" file="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233535ropx1swzbdigjxxx.png" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="440" id="aimg_774397" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_774397_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>Pasted image 20240113140102.png</strong> <em class="xg1">(11.45 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_774397" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=774397&handlekey=savephoto_774397">save to album</a> </p> <p class="xg1 y">2024-1-14 23:35 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> #### Screen display - Use LVGL interface library to draw the interface, realize beautiful HMI, display the data obtained from the home server on the screen, and can control various smart devices in the home. <ignore_js_op> <img style="cursor:pointer;" id="aimg_774398" aid="774398" src="/bbs/static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233543rk5zqkzew0qd5dju.jpg" file="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233543rk5zqkzew0qd5dju.jpg" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_774398_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>main.jpg</strong> <em class="xg1">(53.06 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_774398" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=774398&handlekey=savephoto_774398">save to album</a> </p> <p class="xg1 y">2024-1-14 23:35 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> #### Home Server - Use Docker to install some common images, such as HomeAssistent, etc., to achieve home automation - Use the casaos management panel to manage Docker images <ignore_js_op> <img style="cursor:pointer;" id="aimg_774400" aid="774400" src="/bbs/static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233602rrkkfxwkzz0q3wk9.png" file="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233602rrkkfxwkzz0q3wk9.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_774400_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>Pasted image 20240113152713.png</strong> <em class="xg1">(855 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_774400" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=774400&handlekey=savephoto_774400">save to album</a> </p> <p class="xg1 y">2024-1-14 23:36 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> ### MQTT Server - Use the EMQX Docker image to build a home MQTT server to achieve data flow of MQTT message packets <ignore_js_op> <img style="cursor:pointer;" id="aimg_774401" aid="774401" src="/bbs/static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233624vss611s1l4ssx1sk.png" file="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233624vss611s1l4ssx1sk.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_774401_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>Pasted image 20240113152739.png</strong> <em class="xg1">(80.81 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_774401" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=774401&handlekey=savephoto_774401">save to album</a> </p> <p class="xg1 y">2024-1-14 23:36 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> ### HomeAssistant Use the HomeAssistant Docker image to connect smart home devices to HomeAssistant. <ignore_js_op> <img style="cursor:pointer;" id="aimg_774402" aid="774402" src="/bbs/static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233632lb5uyw5zn4rxvve6.png" file="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233632lb5uyw5zn4rxvve6.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_774402_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>Pasted image 20240114215427.png</strong> <em class="xg1">(80.32 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_774402" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=774402&handlekey=savephoto_774402">save to album</a> </p> <p class="xg1 y">2024-1-14 23:36 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> This is a Xiaomi Bluetooth thermometer and hygrometer connected to HA, an E-Micron ZigBee thermometer and hygrometer, and the switch displayed on the HMI of the central control screen. <ignore_js_op> <img style="cursor:pointer;" id="aimg_774403" aid="774403" src="/bbs/static/image/common/none.gif" onclick="zoom(this, this.getAttribute('zoomfile'), 0, 0, '0')" zoomfile="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233640ianip2n56vbng25v.png" file="//bbs.eeworld.com.cn/data/attachment/forum/202401/14/233640ianip2n56vbng25v.png" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /> <div class="tip tip_4 aimg_tip" id="aimg_774403_menu" style="position: absolute; display: none" disautofocus="true"> <div class="xs0"> <p><strong>Pasted image 20240114215817.png</strong> <em class="xg1">(29.76 KB, downloads: 0)</em></p> <p> <a href="javascript:;" class="loginf" >download attach</a> <a href="javascript:;" onclick="showWindow(this.id, this.getAttribute('url'), 'get', 0);" id="savephoto_774403" url="home.php?mod=spacecp&ac=album&op=saveforumphoto&aid=774403&handlekey=savephoto_774403">save to album</a> </p> <p class="xg1 y">2024-1-14 23:36 上传</p> </div> <div class="tip_horn"></div> </div> </ignore_js_op> ## Demo video <div id="player_09bd4fe1f241a583d78d3970a367f4710" class="localvideo-box"></div><div class="localvideo-title">1月14日</div> <br/> ## Code link Code download link: [https://download.eeworld.com.cn/detail/pomin/630784](https://download.eeworld.com.cn/detail/pomin/630784) ## Project summary Summary: The interface is drawn using LVGL with GUI Guider, and the MQTT protocol is used to communicate with the home server (RK3568). Through MQTT, it is connected to HomeAssistant home automation, and Node-RED is used to create home automation flows and control various smart devices in the home. <ignore_js_op> <img src="/bbs/static/image/filetype/msoffice.gif" border="0" class="vm" alt="" /> <span style="white-space: nowrap" id="attach_774411" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})"> <a href="javascript:;" class="loginf">智能家居中控屏.doc</a> <em class="xg1">(4.8 MB, downloads: 3)</em> </span> <div class="tip tip_4" id="attach_774411_menu" style="position: absolute; display: none" disautofocus="true"> <div class="tip_c xs0"> <div class="y">2024-1-14 23:44 上传</div> 点击文件名下载附件 </div> <div class="tip_horn"></div> </div> </ignore_js_op>

okhxyyo

Great~~Thanks for your hard work~~By the way, do you play Matter?

pomin

okhxyyo posted on 2024-1-15 09:18 Thumbs up~~Thanks for your hard work~~By the way, do you play Matter?

I have read the information about Matter before, and the current ecosystem is still quite lacking.