Virtueller Multischalter HM-PB-6-WM55

Apps für Mobilgeräte (Smartphones, Tablets) wie Android, Apple iOS, Windows Phone etc. sowie Desktop-Betriebssysteme (Windows, Linux, OS X etc.)

Moderator: Co-Administratoren

Antworten
AlteHippe
Beiträge: 27
Registriert: 23.03.2016, 23:29

Virtueller Multischalter HM-PB-6-WM55

Beitrag von AlteHippe » 09.08.2019, 22:09

Hallo,

vielleicht kann es ja jemand gebrauchen - ich hatte Bedarf dafür..
Wenn man zu faul ist zum Aufstehen und trotzdem eine Taste auf dem Schalter drücken möchte, hier die Lösung im Browser.
Funktioniert mit Chrome auf Desktop oder Android. Langer und kurzer Tastendruck, mit Maus oder mit Touch.
Sieht dann so aus:
multischalter-demo.jpg
multischalter-demo.jpg (24.31 KiB) 481 mal betrachtet
Die HTML Seite und die zwei Grafiken (1x Multischalter, 1x das "Label" mit den Icons, getrennt zu bearbeiten) liegen bei mir auf einem kleinen Webserver, würde aber zumindest bei Desktop auch bei Aufruf aus dem Dateisystem funktionieren...

Viele Grüße von der alten Hippe!

Da HTML Dateianhänge nicht möglich sind, hier als "Code"

Code: Alles auswählen

<!DOCTYPE html SYSTEM "about:legacy-compat">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<html>
  <head>
    <title>Multischalter</title>
  </head>
  <style>
    .center-div {
      font-size: 14px;
    }
    .buttons {
      position:absolute;
      top: 30px;
      left: 15px;
      z-index: 1;
    }
    .symbols  {
      position:absolute;
      top: 116px;
      left: 127px;
      z-index: 2;
    }
    .buttonColor {
      position:absolute;
      background-color: blue;
      top: -100px;
      left: -100px;
      width: 67px;
      height: 84px;
      z-index: 3;
    }
  </style>
  
  <body style="margin: 0px; text-align: left" onload="refreshTemp()"> 
      <img id="bild1" src="multischalter.jpeg" alt="Multischalter" usemap="#buttonmap" class="buttons">
      <img id="bild2" src="symbols.jpeg" alt="Symbole" class="symbols">
      <map name="buttonmap">
        <area id="1" class="button-item" shape="rect" coords=" 42,  85, 110, 168" alt="1"> <!-- top left -->
        <area id="3" class="button-item" shape="rect" coords=" 42, 172, 110, 250" alt="3"> <!-- middle left -->
        <area id="5" class="button-item" shape="rect" coords=" 42, 253, 110, 337" alt="5"> <!-- bottom left -->
        <area id="2" class="button-item" shape="rect" coords="227,  85, 296, 168" alt="2"> <!-- top right -->
        <area id="4" class="button-item" shape="rect" coords="227, 172, 296, 250" alt="4"> <!-- middle right -->
        <area id="6" class="button-item" shape="rect" coords="227, 253, 296, 337" alt="6"> <!-- bottom right -->
      </map>
      <div id="buttonHighlight" class="buttonColor" style="display: none;"></div>

      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

      <div class="center-div" id="logDiv"></div>

    <script>
      navigator.vibrate(50);
      
      function absorbEvent_(event) {
        var e = event || window.event;
        //e.preventDefault && e.preventDefault();
        e.stopPropagation && e.stopPropagation();
        e.cancelBubble = true;
        e.returnValue = false;
        return false;
      }

      function preventLongPressMenu(node) {
        node.ontouchstart = absorbEvent_; 
        node.ontouchmove = absorbEvent_;
        node.ontouchend = absorbEvent_;
        node.ontouchcancel = absorbEvent_;
      }
      
      preventLongPressMenu(document.getElementById("bild1"));
      preventLongPressMenu(document.getElementById("bild2"));

      var firstId = 4430; //first channel = button top left, short press. button 2 top right is +6, button 3 +12, ... - long press is short press -2 = 4428 for top left

      var shortPressIDs = new Array(7);
      var longPressIDs = new Array(7);
      var xOffset = new Array(7);
      var yOffset = new Array(7);

      for (var i = 1; i < shortPressIDs.length; i++) { //a[0] is empty, buttons are 1..6
        shortPressIDs[i] = firstId + (6*(i-1));
        longPressIDs[i] = shortPressIDs[i]-2; 
      }
      xOffset[1] = xOffset[3] = xOffset[5] = "58px";
      xOffset[2] = xOffset[4] = xOffset[6] = "243px";
      yOffset[1] = yOffset[2] = "115px";
      yOffset[3] = yOffset[4] = "202px";
      yOffset[5] = yOffset[6] = "284px";
      
            
      // Create variable for setTimeout
      var delayTimeout;
      var dehighlightTimeout;
      
      // timestamp of click
      var clickedTimestamp;
      
      // Set number of milliseconds for longpress
      var longpress = 750;
      
      var buttonItems = document.getElementsByClassName('button-item');
      var buttonItem;
      
      for (var i = 0, j = buttonItems.length; i < j; i++) {
        buttonItem = buttonItems[i];
        
        buttonItem.addEventListener('mousedown', function (e) {
          handleStart(this);
        }, true);
        
        buttonItem.addEventListener('touchstart', function (e) {
          handleStart(this);
          absorbEvent_(e);
        }, true);
        
        function handleStart(_this) {
          highlightButton(_this.id);
          delayTimeout = setTimeout(check, longpress);
          clearTimeout(dehighlightTimeout);
          
          clickedTimestamp = Date.now();
          function check() {
            buttonclicked(_this.id, true);
          }
        }
        
        buttonItem.addEventListener('mouseup', function (e) {
          checkShortClick(delayTimeout, true, this.id);
        });
        
        buttonItem.addEventListener('touchend', function (e) {
          checkShortClick(delayTimeout, true, this.id);
        });
        
        buttonItem.addEventListener('mouseout', function (e) {
          checkShortClick(delayTimeout, true, this.id);
        });
      }
      
      function checkShortClick(delayTimeout, clicked, buttonId) {
        clearTimeout(delayTimeout);
        if (0 != clickedTimestamp && clicked && (Date.now()-clickedTimestamp < longpress)) {
          clickedTimestamp = 0;
          buttonclicked(buttonId, false);
          navigator.vibrate(50);
        }
      }
            
      function buttonclicked(buttonId, isLongClick) {
        if (isLongClick) {
          navigator.vibrate(50);
        }
        var channelId = isLongClick ? longPressIDs[buttonId] : shortPressIDs[buttonId];
        document.getElementById("logDiv").innerHTML="Taste " + buttonId + " " + (isLongClick ? "langer" : "kurzer") + " Tastendruck ausfuehren (Kanal "+channelId+")"; 
        var confirmIt = confirm("Taste " + buttonId + " " + (isLongClick ? "langer" : "kurzer") + " Tastendruck ausfuehren?");
        if (confirmIt) {
          send(channelId);
        } else{
          document.getElementById("logDiv").innerHTML=document.getElementById("logDiv").innerHTML + " - Aktion abgebrochen!"; 
        }
        dehighlightTimeout = setTimeout(dehighlightButton, 500);
      }
      
      function highlightButton(buttonId) {
        document.getElementById("buttonHighlight").style.display="block";
        document.getElementById("buttonHighlight").style.left=xOffset[buttonId];
        document.getElementById("buttonHighlight").style.top=yOffset[buttonId];
      }
      
      function dehighlightButton() {
        document.getElementById("buttonHighlight").style.left="-100px";
        document.getElementById("buttonHighlight").style.top="-100px";
      }
      
      function send(channelId) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            var xml = parseXml(this.responseText);
            var channelID = xml.getElementsByTagName("changed")[0].getAttribute("id");
            var newValue = xml.getElementsByTagName("changed")[0].getAttribute("new_value");
            document.getElementById("logDiv").innerHTML="Kanal " + channelID + " erfolgreich auf Wert " + newValue + " gesetzt (= gedrueckt)"; 
          }
        };
        xmlhttp.open("GET", "http://homematic-ccu2/addons/xmlapi/statechange.cgi?ise_id="+channelId+"&new_value=1", true);
        xmlhttp.timeout=(3500);
        xmlhttp.send();
      }

      function handleVisibilityChange() {
        if (document[hidden]) {
          //site hidden - we could do something
        } else {
          //site shown - we could do something
        }
      }
      
      var hidden, visibilityChange; 
      if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
        hidden = "hidden";
        visibilityChange = "visibilitychange";
      } else if (typeof document.msHidden !== "undefined") {
        hidden = "msHidden";
        visibilityChange = "msvisibilitychange";
      } else if (typeof document.webkitHidden !== "undefined") {
        hidden = "webkitHidden";
        visibilityChange = "webkitvisibilitychange";
      }
      
      document.addEventListener(visibilityChange, handleVisibilityChange, false);

      var parseXml;
      if (typeof window.DOMParser != "undefined") {
        parseXml = function(xmlStr) {
          return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
        };
      } 
    </script>
  </body>
</html>
Dateianhänge
multischalter.jpeg
multischalter.jpeg (17.44 KiB) 481 mal betrachtet
symbols.jpeg
symbols.jpeg (9.89 KiB) 481 mal betrachtet

Antworten

Zurück zu „HomeMatic Apps und Desktop-Anwendungen“