MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Meross

    Scheduled Pinned Locked Moved Requests
    4 Posts 2 Posters 687 Views 2 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • thetobydeT Offline
      thetobyde
      last edited by

      Hey there. I would really like to have a module to see all my Meross products like plugs for my lights :)
      Maybe to see the status of the products AND:
      Touch integration to turn ON/OFF the lights :)

      Maybe something like this, if possible:
      (just an idea)
      meross module request.png

      Thank u for help! :)
      Toby!

      1 Reply Last reply Reply Quote 1
      • lavolp3L Offline
        lavolp3 Module Developer
        last edited by

        Meross has a cloud api so shouldn’t be too difficult to mplement.
        However I don’t have the hardware nor the time unfortunately.

        Also, you could easily create touch sliders with some css magic and event listeners.
        I have done this for my tasmota module.

        If you need the code, let me know.

        8131d15d-c707-4321-ad9f-762e1f3f1254-image.png

        How to troubleshoot modules
        MMM-soccer v2, MMM-AVStock

        thetobydeT 1 Reply Last reply Reply Quote 1
        • thetobydeT Offline
          thetobyde @lavolp3
          last edited by

          @lavolp3 Thank u! The code would be nice. :) Greetings, Toby

          lavolp3L 1 Reply Last reply Reply Quote 0
          • lavolp3L Offline
            lavolp3 Module Developer @thetobyde
            last edited by lavolp3

            @thetobyde for the DOM I have created the following elements:

            var label = document.createElement("label");
                                            label.className = "tasmota-switch";
                                            label.id = "switch-" + topic;
                                                var input = document.createElement("input");
                                                input.type = "checkbox";
                                                input.id = "checkbox-" + topic;
                                                input.checked = this.setSwitch(topic);
                                                var span = document.createElement("span");
                                                span.className = "slider round";
                                                span.id = "slider-" + topic;
                                                span.onclick = function() { self.toggleSwitch(topic); };
                                            label.appendChild(input);
                                            label.appendChild(span);
            

            there is a label (as wrapper), a (hidden) checkbox, and a span that is the actual slider.
            The onclick function for the slider looks like this:

                toggleSwitch: function(topic) {
                    this.sendSocketNotification("TOGGLE_SWITCH", topic);
                    console.log("Switch toggled: " + topic);
                },
            

            So, rather generic. There you need to tell the api that you have toggled the switch.

            Also, at every DOM update you need to check the api for the switch state (see the this.setSwitch-function above). It may have been switched from another endpoint or app.
            The result sets the “checked” state of the hidden input.

                setSwitch: function(topic) {
                    this.log("Setting switch for " + topic);
                    var powerState = this.tasmotaData.tele[topic].STATE.POWER;
                    return (powerState === "ON") ? true : false;
                },
            

            The rest is css:

            /*** SWITCHES ***/
            
            .MMM-Tasmota .tasmota-switch {
                float: right;
                position: relative;
                display: inline-block;
                width: 90px;
                height: 34px;
            }
            
            /* Hide default HTML checkbox */
            .MMM-Tasmota .tasmota-switch input {
                opacity: 0;
                width: 0px;
                height: 0px;
            }
            
            /* The slider */
            .MMM-Tasmota .slider {
                position: absolute;
                cursor: pointer;
                top: 0;
                left: 30px;
                right: 0;
                bottom: 0;
                background-color: #f00;
                border: 3px solid white;
                -webkit-transition: .2s;
                transition: .2s;
            }
            
            .MMM-Tasmota .slider:before {
                position: absolute;
                content: "";
                height: 26px;
                width: 26px;
                left: 3px;
                bottom: 1px;
                background-color: white;
                -webkit-transition: .2s;
                transition: .2s;
            }
            
            .MMM-Tasmota input:checked + .slider {
                background-color: #0f0;
            }
            
            .MMM-Tasmota input:checked + .slider:before {
                -webkit-transform: translateX(24px);
                -ms-transform: translateX(24px);
                transform: translateX(24px);
            }
            
            /* Rounded sliders */
            .MMM-Tasmota .slider.round {
                border-radius: 34px;
            }
            
            .MMM-Tasmota .slider.round:before {
                border-radius: 50%;
            }
            

            I will publish all of that with my MMM-Tasmota module.

            How to troubleshoot modules
            MMM-soccer v2, MMM-AVStock

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy