No announcement yet.

DIY MQTT Touchscreen Scene Switch

  • Filter
  • Time
  • Show
Clear All
new posts

    DIY MQTT Touchscreen Scene Switch

    Hello everyone,

    I'm farily new to HomeSeer but I wanted to share a Color Touch Screen Scene Switch I made using a Nextion 3.52 display, Wemos D1 Mini a printed box and some code.

    For this I've used MCSMQTT plugin and my guess, it should run on any HomeSeer version but tested on HomeSeer Pro running on Windows 10.

    This is what it does:

    Attached is the code, tft file for the Netion Display 3.5" and a modified 3d printable box (I'm very bad at it but it works) with all the credits to the original designer where you can download the face plate.

    The tft file is to be uploaded to your nextion, the .ino is the sketch and the .stl in case you like my version (or remix as some may call it) of the bottom box.

    In case you are interested in making one for yourself:

    Click image for larger version  Name:	IMG_6548 2.jpg Views:	0 Size:	133.5 KB ID:	1315354

    Click image for larger version  Name:	IMG_6549 2.jpg Views:	0 Size:	96.4 KB ID:	1315355

    Upload the attached code to your ESP8266 and modify the wifi parameters:
    Click image for larger version  Name:	Screen Shot 2019-07-12 at 10.22.08 PM.png Views:	0 Size:	398.4 KB ID:	1315356

    Then modify the topics to suit your needs and the MQTT authentication if needed, It creates a topic per scene:
    Click image for larger version  Name:	Screen Shot 2019-07-12 at 10.22.19 PM.png Views:	0 Size:	452.7 KB ID:	1315357

    If you watch the video above, you'll see it displays the name of the active Scene on top. You can customize those names here,just make sure that name is no longer than 15 characters:
    Click image for larger version  Name:	Screen Shot 2019-07-12 at 10.22.31 PM.png Views:	0 Size:	427.1 KB ID:	1315358

    This part I'm a rookie, you might fin a way to configure it better but anyway, in case it helps, here it goes the event configuration example for the Switch to work:
    Click image for larger version  Name:	Screen Shot 2019-07-12 at 6.59.45 PM.png Views:	0 Size:	401.4 KB ID:	1315359

    And this:
    Click image for larger version  Name:	Screen Shot 2019-07-12 at 7.03.42 PM.png Views:	0 Size:	398.8 KB ID:	1315360

    Hope somebody might find it useful!


    Thank you for making this available. It shows how easy it is to use a protocol designed for machine to machine communication (MQTT) to interface home automation such as Homeseer.

    Can you comment on the Nextion display? From what I see on the ITead site the strength of the display is the editor they provide to construct what is shown on the screen. What is your experience using it? How long did it take to make the scene layout that you have?

    I see it has resistive touch. Can you easily use your finger to control it or is a stylus needed?

    I am also a novice with 3D/CAD. You indicated you did a remix of a design on Thingiverse. I looked at the link and see that it was drawn with Sketchup. Were you able to modify the original because the Sketchup project files were made available? My question is in general how does one modify the designs that are uploaded to Thingiverse?

    I understand where it is advantageous to use events as you have shown when multiple HS devices are to be controlled by a single MQTT topic. For the cases where a single device is to be controlled then associating that device to the subscription of the topic will avoid the need to create an event that has the same effect. HS is flexible and things can be done many different ways. It is typically a matter of personal preference on how to accomplish one's objective and all I am trying to do is show an option.


      Wow, thank you for your kind feedback.

      I don’t know how to use the the device association. I guess taking the mqtt virtual device and associate it to the physical one? I love this kind of suggestions since, as I stated before, I’ve been a HomeSeer user for less than two months. Don’t be shy, any suggestions are very welcome!

      About the Nextion, is pretty easy to configure since it is not a simple screen vuelta Human-Machine Interface (HMI) so it has it’s own microprocessor, all you need to add is power (5v) and serial connections. You just add your elements, if sending data through the serial port is required when a button is released or pushed, just click a box and it will do exactly that. From the Arduino/esp side all you have to do is to monitor the serial to catch such buttons. You can see the sketch to find out how.

      Regarding the resistive touch, since all you are doing is to push big buttons, works perfectly fine with fingers.

      The 3D, I am by no means, versed on that, but I used Tinker cad and could import and modify the original design. Is a lot less difficult if one has the original code but, little modifications are possible when all you have is an .stl and all the talent is 3d is equivalent to mine (aka ver low lol )

      Tomorrow I will publish a series of screenshots of how easy is to create simple interfaces like the one I created on my SceneSwitch.

      Once again, thank you so much for your kind feedback! I’ll give the device association a try once I’m back at home.


        Hey Michael, are you the creator of the MCSMQTT plugin??? If you are, you are like a movie star to me!!! Thank you so much for sharing that beautiful piece of software!!!!!


          I'm no movie star, but thanks for the complement.

          For "I don’t know how to use the the device association. I guess taking the mqtt virtual device and associate it to the physical one? " I will try to use a takeoff of one of your screenshots that has device 'Home Study Webex" being set to Off. I am assuming that you already have this device created by some other plugin or just as a virtual device that you created manually.

          On the Association tab of mcsMQTT you will include the checkbox to include non-plugin devices. Using the "Show Associations" button it should then show up in pink on one of the rows of the table. If you click the "A" column checkbox then Topic column will open some text boxes where you can enter the subscribe and publish topics. For subscribe textbox it would be home/SceneSwitch2/Scene1 and in the way you setup your topics it would be the same for the publish textbox. You are using Scene1Off and Scene1On for your payloads. For this to work well in Homeseer then Value Status Pairs (VSP) would be used so that the text "Scene1Off" is paired with the number 0 and "Scene1On" is paired with number 1. Homeseer works well with numbers and no so much so with text. You would use HS Device Management to define the VSP for Home Study Webex.

          My suggestion is that you use different topics for control and status. This will avoid circular logic. For example, if HS commands a scene then I expect your D1 Mini to recognize the topic and change the display. It should then send a status update that the scene changed which, being on the same topic, would be recognized by Homeseer and the loop could start again.

          The convention adopted by Tasmota firmware is to use /cmnd/ in the topic if the intent is to control something and use the same topic without the /cmnd/ to report the status of something. It does not matter what is done just as long as there is consistency so you do not later confuse yourself.

          The second suggestion is that if you created Home Study Webex manually then it would be better to delete it and let mcsMQTT create it for you. This gives you more flexibility on setting up the association between MQTT and Homeseer Device. The first immediate benefit is that mcsMQTT will recognize the Scene1Off and Scene1On and automatically create the VSP based upon previously seen these payloads in the topic. You would likely use the Control/Status UI type on the mcsMQTT edit page of Button so mcsMQTT would then create two button in Device Management for ease of manual control of the scene.

          The flow when letting mcsMQTT create the device is to use checkbox for showing plugin devices on the Association tab. When you find the green colored row for home/SceneSwitch2/Scene1 you would then use the "A" column checkbox to create the device. The Ref column would then be populated with the Device Reference number. Click on it to bring up the Edit page and assure that the Button is the type and that the VSP are as desired. You can then go to Device Management and change the Floor, Room, Name to be Home Study Webex or anything you desire.


            Wow... did the changes you suggested, and the consequent modifications to my code. Although the end result is almost the same, I’m loving the integration between mqtt and the devices, in my case, virtual ones.

            Since this is a scene switch, obviously every single button requires an event, which is the only way I know to create scenes. But it is a lot easier now!

            Right now I’m traveling (for a change ) but will publish the new code and the screenshots later and of course, the nano tutorial for nextion designer.



              Hello again Michael,

              Attached is the new code now adapted to use the method you describe. I think is best.

              Basically created a group of topics to subscribe to... where responses of button state changes are received when scenes are triggered anywhere else, and another group of topics where changes of scenes states are triggered from the switch.

              and the configuration from Homseer side is fairly easy. I have to practice the RTFM protocol more often but there's something wrong with me, I never do

              Changed the payload from messages to numbers (from the code) so now the configuration on HomeSeer is more natural:

              And then the Event:

              Appart I saw the original published code had some error due to the excesive use of cut and paste :P

              Now for a very basic example on how to create your own personalized touch screen simple and beautiful MQTT switch.

              First create your own background as I did on this video I just created to illustrate the process. This is a very short, made in the hotel video which is very basic but worth a look:

              Make your own switch, use the code by deleting or adding new buttons, program your HomeSeer to do whatever you want it to do when a button is pressed and that is about it.

              Hope you guys find it of any use!


              Attached Files


                The code should werk well with HS. It is easy to follow for anybody else who would like to take the same path of making an interface with Nextion.

                I have not done much with touch screen development, but the video looks like the same easy approach that was used with HSTouch. Visual tutorials that are short and to the point really help one understand.