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 (24.31 KiB) 3182 mal betrachtet
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>