HTML button für Rolläden?

Ich gestalte meine Oberfläche lieber selber „from scratch“ mit Dreamweaver, und verwende die JSON-Schnittstelle um IPS-Befehle abzusetzen.

Momentan muss ich die Rolläden integrieren. Hätte jemand das HTML-Code für ästhetisch ansprechende dreiteilige Rolladenknöpfe? Jeder Knopf muss 3 Abschnitte haben für hochfahren, arretieren, und runterfahren. Merci vielmals im Voraus.

…never mind, schon erledigt.

… über Geschmack läßt sich streiten …

Net bös sein, aber das was du zeigst find ich jetzt aber nicht unbedingt „ästethisch ansprechend“
Hab selbst keine Rolläden, darum kann ich dir aber leider auch keine Alternative anbeiten.

die ganze Welt ist Geschmackssache
bb

… ist bestimmt nur eine Idee :smiley:

Ja sehe ich auch so. Darum habe ich es gepostet. Konstruktive Verbesserungsvorschläge willkommen.

…und negative ästhetische Beurteilungen sind auch willkommen, da schließlich nicht ganz unberechtigt :slight_smile:

Juhu aag,

wie machst denn die HTML Button und wie hinterlegte denn die Aktion?

Grüsse,
MaLu

Ich vermute mal so:
IPS Funktionen in einer HTMLBox nutzen (statt HTML Box geht natürlich auch eine komplette „externe“ Seite mit HTML/PHP)
Datenaustausch — IP-Symcon :: Automatisierungssoftware
GET/POST/JSON-RPC Requests direkt aus HTMLBoxen senden

Grüße,
Chris

Ich mach das mit dem wunderbaren JSON-RPC Wrapper von Thomas Dressler, welches jegliche Webserver-Box um sämtliche IPS-Funktionen erweitert.

Danke für die Infos @ Bayaro @aag Grüsse, MaLu

etwas weiter gekommen


<!doctype html>
<html><head>
<meta charset="utf-8">
<title>control shades</title>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
<script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script>

<style>
body {
    border-width:0px;
	align-content:center;
	margin: 0px;
	padding: 0px;
	font-size:large;
	background: black;
	color:black;
	text-shadow: 1px 1px blue;
	border-color: black;
	border:solid;
	}
	
p   {font-size:300%;
	text-align:center;
	text-align:center;
	font-family: "Comic Sans MS", cursive;
	color:yellow;
	}


.box {
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: middle;
  line-height: 3em;
  padding: 0px;
  border: 0px;
  margin: 0px;    
  width: 22%;
  border-width:1px;
  background:black;
  font-size:large;
  }
.boxesInner{
  display: table;
  margin-left: auto;
  margin-right: auto;
  position:relative; 
  width: 1em;
  height: 15em;
  padding:0px;
  background: transparent;
  border-width:1px;
  border:solid;
  }
smallText {font-size:80%;}

.boxes {
  display: table;
  align-content:center;
  position:relative;
  width: 96%;
  height: 100%;
  padding:0px;
  border-width:1px;
  border-color: white;
  border:solid;
  font-size:large;
}

.box {
  display: table-cell;
  position: relative;
  text-align: center;
  vertical-align: bottom;
  line-height: 3em;
 	padding: 0px;
    border: 0px;
    margin: 0px;    
  width: 22%;
  border-color: white;
  border:solid;
  border-width:1px;
  font-size:large;
  }
.boxesInner{
  display: table;
  margin-left: auto;
  margin-right: auto;
  position:relative; 
  width: 1em;
  height: 15em;
  padding:0px;
  background:black;
  border-width:1px;
  border-color: black;
  }

.boxesInnest {
  padding: 15px;
  border-width:0px;
  border-color: black;
  border:solid;
	}

.SunshadeButtonStyle  {
	display: block;
    margin-left: auto;
    margin-right: auto; 
	background-size: cover;
    background-repeat: no-repeat;  /* make the background image appear only once */
    border: none;           /* assuming we don't want any borders */
    cursor: pointer;        /* make the cursor like hovering over an <a> element */
 	padding: 0px;
    border: 0px;
	border-color:black;
    margin: 0px;
	background:black;
}

.SunshadeButtonSizeSmall {
	width: 140px;
    height: 140px;           /* make this the size of your image */
}
.SunshadeButtonSizeLarge {
	width: 300px;
    height: 300px;           /* make this the size of your image */
}


#SunshadeButtonUp {background-image: url(images/3dButtons/UpButton2.svg);}
#SunshadeButtonStop {background-image: url(images/3dButtons/StopButton2.svg);}
#SunshadeButtonDown {background-image: url(images/3dButtons/DownButton2.svg);}

</style>
</head>

<body>
<div ID="divContainer">
 	<div class="boxes">   
    	<div class="box" ID="box41"><p>Left shutters</p></div>   
        <div class="box" ID="box42"><p>All shutters at once</p></div>   
        <div class="box" ID="box43"><p>Right shutters</p></div>
     </div>
	<div class="boxes">   
    	<div class="box" ID="box11"><p><br><br>rechts 1</p></div>
        <div class="box" ID="box12"><p><br><br>rechts 2</p></div>   
        <div class="box" ID="box13"><p><br><br>rechts 3</p></div>
        <div class="box" ID="box14"><p><br><br>rechts 4</p></div>
     </div>
	<div class="boxes">   
    	<div class="box" ID="box21"><p><br><br>rechts 5</p></div>   
        <div class="box" ID="box22"><p><br><br>Mitte</p></div>   
        <div class="box" ID="box23"><p><br><br>links 5</p></div>
        <div class="box" ID="box24"><p><br><br>links 4</p></div>
     </div>
 	<div class="boxes">   
    	<div class="box" ID="box31"><p><br><br>links 3</p></div>   
        <div class="box" ID="box32"><p><br><br>links 2</p></div>   
        <div class="box" ID="box33"><p><br><br>links 1</p></div>
     </div>
<p class=smallText ID="alertText" align="left" >  </p>
</div>
 

<template ID="template3buttons">
<div ID="container3buttons" class="boxesInner">
    <div ID= "sunShadeUp" class="boxesInnest">
    			<input type="button" 
                id="SunshadeButtonUp" 
                class="SunshadeButtonStyle SunshadeButtonSizeSmall">
	</div>
    <div ID= "sunShadeStop" class="boxesInnest">
				<input type="button" 
                id="SunshadeButtonStop"
                class="SunshadeButtonStyle SunshadeButtonSizeSmall">
    </div>
    <div ID= "sunShadeDown" class="boxesInnest">
          		<input type="button" 
                id="SunshadeButtonDown"
                class="SunshadeButtonStyle SunshadeButtonSizeSmall">
	</div>
</div>
</template>

<script> 

//create Buttonto be placed into the div boxes;
create3Button("box11", "smallButtons");
create3Button("box12", "smallButtons");
create3Button("box13", "smallButtons");
create3Button("box14", "smallButtons");
create3Button("box21", "smallButtons");
create3Button("box22", "smallButtons");
create3Button("box23", "smallButtons");
create3Button("box24", "smallButtons");
create3Button("box31", "smallButtons");
create3Button("box32", "smallButtons");
create3Button("box33", "smallButtons");
create3Button("box41", "largeButtons");
create3Button("box42", "largeButtons");
create3Button("box43", "largeButtons");

$(document).ready(function(){
	//sets up the trigger of function genericAction when a button area is pressed
	$("[id*=sunShade]").children().click(function(event) {
		var buttonIdentity = [event.target.id, event.target.parentNode.parentNode.parentNode.id];
		genericAction (buttonIdentity);
	});
}); 

function genericAction(shutterCommand) {
     //calls a PHP page with the appropriate parameters (an array of 2 elements)
	 $.get('../json_api/shutter_control.php', 
	 	{action:shutterCommand}, 
		function(data, status) {document.getElementById('alertText').innerHTML = data;
		}
		);
     
	 
	 } 

function create3Button(cellButtonId, buttonSize) //create boxes with 3 buttons each
  {
  // Instantiate the table with the existing HTML tbody and the row with the template
  var template3buttons = document.querySelector('#template3buttons');
  // Clone the new row and insert it into the table
  var insertionPoint= document.getElementById(cellButtonId);
  var clone = document.importNode(template3buttons.content, true);
  var cloneExploded = clone.children[0].children[0].text +
  		             clone.children[0].children[1].innerHTML +
  	                 clone.children[0].children[2].innerHTML;
  var shadeUp = cellButtonId + "&up";
  var shadeStop = cellButtonId + "&stop";
  var shadeDown = cellButtonId + "&down";
  
  //fetches the classes of the button
  var buttonClassName = clone.children[0].children[2].children[0].className; 
  if (buttonSize == "smallButtons")
  	{clone.children[0].children[0].children[0].className = "SunshadeButtonStyle SunshadeButtonSizeSmall";
	clone.children[0].children[1].children[0].className = "SunshadeButtonStyle SunshadeButtonSizeSmall";
	clone.children[0].children[2].children[0].className = "SunshadeButtonStyle SunshadeButtonSizeSmall";} 
  if (buttonSize == "largeButtons")
  	{clone.children[0].children[0].children[0].className = "SunshadeButtonStyle SunshadeButtonSizeLarge";
	clone.children[0].children[1].children[0].className = "SunshadeButtonStyle SunshadeButtonSizeLarge";
	clone.children[0].children[2].children[0].className = "SunshadeButtonStyle SunshadeButtonSizeLarge";} 
    
  // here comes the generation of buttons from the template
  insertionPoint.appendChild(clone);
  }

	

</script>

</body>
</html>



<?php 
// set variable $testing to "1" to disable IPS output and redirect it to messages  
// any other value activates the shutter control
$testing = 1;

#________________________________
# no changes below here
error_reporting(E_ALL);
ini_set('display_errors', 1);



if (!function_exists('IPS_GetKernelVersion')) {
   // this all that is needed to execute IPS functions!
   include('ips_wrapper.php');
}
$version=IPS_GetKernelVersion();

# this array is a table assigning the HTLM buttons to the various sunshades,
$shutterArray = array (
	array("boxNo" => "box11", 
		  "IpsId" => 36910, 
		  "IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 01"),
	array("boxNo" => "box12", 
		  "IpsId" => 53755, 
		  "IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 02 Rechts2"),
	array("boxNo" => "box13", 
		"IpsId" => 45005, 
		"IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 03 Rechts3"),
	array("boxNo" => "box14", 
		"IpsId" => 40950, 
		"IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 04 Rechts4"),
	array("boxNo" => "box21", 
		"IpsId" => 58528, 
		"IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 05 Rechts5"),
	array("boxNo" => "box22", 
		"IpsId" => 25818, 
		"IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 06 Mitte"),
	array("boxNo" => "box23", 
		"IpsId" => 45385, 
		"IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 07 Links5"),
	array("boxNo" => "box24", 
		"IpsId" => 19756, 
		"IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 07a Links4"),
	array("boxNo" => "box31", 
		"IpsId" => 19521, 
		"IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 09 Links3"),
	array("boxNo" => "box32", 
		"IpsId" => 32556, 
		"IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 10 Links2"),
	array("boxNo" => "box33", 
		"IpsId" => 57189, 
		"IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen Wohnzimmer 11 Links1"),
	array("boxNo" => "box34", 
		"IpsId" => 23980, 
		"IpsDescription" => "EnOcean Aktoren\Rolladen Oben\Rolladen ToiletteOben"),
	);

//extract subarray $ipsInstances containing just the IpsIDs of all shutters
$ipsInstances = array(); 
foreach ($shutterArray as &$value) {array_push ($ipsInstances, $value["IpsId"]);}


// extract parameters from calling page
if(isset($_GET['action']) && (!empty($_GET['action'])))
 {$IpsCommand= $_GET['action'];}
 else 
 	{# script was not invoked with appropriate parameters
	echo "IPS version: ". $version.  "
 <br> no IPS command passed";
	return;}

//array containing the parameters that were passed (button and box)
$IpsActionArray = array(
    "button" => $IpsCommand[0],
    "box" => $IpsCommand[1],
	);

// assign IPS action depending on which button was pressed
switch ($IpsActionArray['button']) {
    case "SunshadeButtonUp":
        $IpsAction = "ENO_ShutterMoveUp";
        break;
    case "SunshadeButtonStop":
        $IpsAction = "ENO_ShutterStop";
        break;
    case "SunshadeButtonDown":
        $IpsAction = "ENO_ShutterMoveDown";
        break;
}

// fetch index of $shutterArray element contaning the IPS instance 
$IpsArrayIndex = array_search ($IpsActionArray['box'], array_column($shutterArray, "boxNo"), $strict = false);
// fetch correct IPS instance
$IpsInstanzID = $shutterArray [$IpsArrayIndex]["IpsId"];

if ($testing == 1) 
		{echo $IpsAction ."(". $IpsInstanzID.")";}
	else
		{call_user_func($IpsAction, $IpsInstanzID);}

# -----------------------------------------------
function SunshadeButtonUp(&$IpsInstance)
	{
    ENO_ShutterMoveUp($IpsInstance) ;
	}

function SunshadeButtonStop(&$IpsInstance)
	{
    ENO_ShutterMoveStop($IpsInstance) ;
	}
function SunshadeButtonDown(&$IpsInstance)
	{
    ENO_ShutterMoveDown($IpsInstance) ;
	}

function AllShutters($move)
	{
	switch ($move){
	case "Up":
		foreach ($IpsInstances as &$IpsInstance) 
			{if (testing==1)
				{echo ENO_ShutterMoveUp."(".$IpsInstance.")";}
			else
				{ENO_ShutterMoveUp($IpsInstance);
				usleep(200000);} // 200 millisec sleep (required by EnOcean)
				};
	case "Stop":
		foreach ($IpsInstances as &$IpsInstance) 
			{if (testing==1)
				{echo ENO_ShutterMoveStop."(".$IpsInstance.")";}
			else
				{ENO_ShutterMoveStop($IpsInstance);
				usleep(200000);} // 200 millisec sleep (required by EnOcean)
				}
	case "Down":
		foreach ($IpsInstances as &$IpsInstance) 
			{if (testing==1)
				{echo ENO_ShutterMoveDown."(".$IpsInstance.")";}
			else
				{ENO_ShutterMoveDown($IpsInstance);
				usleep(200000);} // 200 millisec sleep (required by EnOcean)
				}
			}
	}

?> 



<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 612 613" style="enable-background:new 0 0 612 613;" xml:space="preserve">
<style type="text/css">
	.st0{fill:url(#path3556_1_);}
	.st1{fill:#FFFFFF;stroke:#46221F;stroke-width:3.1;}
	.st2{opacity:0.64;fill:url(#path3564_1_);enable-background:new    ;}
	.st3{fill:url(#path3566_1_);}
	.st4{fill:url(#path3568_1_);}
	.st5{opacity:0.5;fill:url(#path3570_1_);enable-background:new    ;}
	.st6{fill:none;stroke:#46221F;stroke-width:2.852;}
</style>
<g id="g3554" transform="matrix(.47822 0 0 .47822 .012944 59.832)">
	
		<radialGradient id="path3556_1_" cx="300.7942" cy="4022.5613" r="96.161" gradientTransform="matrix(1.0364 0 0 1.0931 328.1176 -4274.8433)" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#E81D25"/>
		<stop  offset="0.3304" style="stop-color:#EB4748"/>
		<stop  offset="0.5" style="stop-color:#D82E2A"/>
		<stop  offset="0.875" style="stop-color:#695C5C"/>
		<stop  offset="1" style="stop-color:#69100F"/>
	</radialGradient>
	<path id="path3556" class="st0" d="M1279.7,521.2c0-353.4-286.5-639.9-639.9-639.9C286.5-118.6,0,167.9,0,521.2
		c0,353.4,286.5,639.9,639.9,639.9C993.2,1161.1,1279.7,874.6,1279.7,521.2z"/>
	<g id="g3558" transform="translate(0 -2.61)">
		<path id="path3560" class="st1" d="M255.6,576.3l269.8,267.9c23,35.2,55.5,52.8,97.4,52.8c43.3,0,77.1-17.6,101.4-52.8
			l267.9-267.9c24.3-24.4,36.5-52.1,36.5-83.2c0-32.5-12.2-60.9-36.5-85.2c-24.3-24.3-52.7-36.5-85.2-36.5
			c-29.8,0-57.5,12.2-83.1,36.5l-81.2,83.2v-284c0-36.5-11.8-65.3-35.5-86.2c-23.7-21-51.1-31.5-82.1-31.5
			c-32.5,0-60.6,10.5-84.3,31.5c-23.7,21-35.5,49.7-35.5,86.2v284L424.1,408c-24.4-24.4-52.1-36.5-83.2-36.5
			c-32.4,0-60.8,12.2-85.2,36.5c-24.4,24.4-36.5,52.7-36.5,85.2C219.1,524.3,231.3,552,255.6,576.3L255.6,576.3z"/>
	</g>
	<g id="g3562" transform="matrix(1 0 0 -1 0 63.175)">
		
			<radialGradient id="path3564_1_" cx="351.9577" cy="-9406.6963" r="89.0928" gradientTransform="matrix(0.7277 0 0 0.7277 395.6568 6843.9072)" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#EEEEED"/>
			<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
		</radialGradient>
		<path id="path3564" class="st2" d="M1244.5-405.5c0,327.3-265.4,592.7-592.7,592.7C324.4,187.3,59-78.1,59-405.5
			c0-327.4,265.4-592.8,592.8-592.8C979.1-998.2,1244.5-732.8,1244.5-405.5z"/>
		
			<radialGradient id="path3566_1_" cx="430.725" cy="-10096.6094" r="53.2779" gradientTransform="matrix(-0.6569 0.8388 -0.4294 -0.3363 -3816.1628 -4523.5439)" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#EEEEED"/>
			<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
		</radialGradient>
		<path id="path3566" class="st3" d="M260.4-88.9c-206.3-161.6-264-449.4-135.9-678c128.1-228.6,403.7-329.6,649.2-238L588-507.2
			L260.4-88.9z"/>
		
			<radialGradient id="path3568_1_" cx="121.1458" cy="-10384.2432" r="53.2764" gradientTransform="matrix(-1.0592 -0.1155 5.915581e-002 -0.5423 1402.0946 -6574.8486)" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#EEEEED"/>
			<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
		</radialGradient>
		<path id="path3568" class="st4" d="M96.5-580.9c28.4-260.5,242.5-461.4,504.3-473.2s493,169.1,544.8,426L624.6-523.3L96.5-580.9z"
			/>
		
			<radialGradient id="path3570_1_" cx="-113.6535" cy="-9145.248" r="53.2617" gradientTransform="matrix(0.7534 -0.7534 0.3857 0.3857 4630.8521 3333.9832)" gradientUnits="userSpaceOnUse">
			<stop  offset="0" style="stop-color:#EEEEED"/>
			<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
		</radialGradient>
		<path id="path3570" class="st5" d="M1076-783.4c185.3,185.3,207.8,478,53.1,689.5C974.3,117.5,688.4,184.6,455.8,64l244.5-471.7
			L1076-783.4z"/>
	</g>
	<path id="path3572" class="st6" d="M1279.7,521.2c0-353.4-286.5-639.9-639.9-639.9C286.5-118.6,0,167.9,0,521.2
		c0,353.4,286.5,639.9,639.9,639.9C993.2,1161.1,1279.7,874.6,1279.7,521.2z"/>
</g>
</svg>



<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 612 613" style="enable-background:new 0 0 612 613;" xml:space="preserve">
<style type="text/css">
	.st0{fill:url(#path7119_1_);}
	.st1{fill:#FFFFFF;stroke:#146B36;stroke-width:3.1;}
	.st2{opacity:0.56;fill:url(#path8028_1_);enable-background:new    ;}
	.st3{opacity:0.56;fill:url(#path9812_1_);enable-background:new    ;}
	.st4{opacity:0.56;fill:url(#path10709_1_);enable-background:new    ;}
	.st5{opacity:0.56;fill:url(#path10713_1_);enable-background:new    ;}
	.st6{fill:none;stroke:#17371B;stroke-width:2.852;}
</style>
<g id="g3475" transform="matrix(.47822 0 0 .47822 .012944 60.438)">
	
		<radialGradient id="path7119_1_" cx="298.999" cy="4395.8081" r="95.876" gradientTransform="matrix(1.0364 0 0 1.0931 328.1176 -4685.5996)" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#5CBA47"/>
		<stop  offset="0.3304" style="stop-color:#72BF44"/>
		<stop  offset="0.5" style="stop-color:#59BA47"/>
		<stop  offset="0.875" style="stop-color:#20B24B"/>
		<stop  offset="1" style="stop-color:#146B36"/>
	</radialGradient>
	<path id="path7119" class="st0" d="M1276,517.4c0-352.3-285.7-638-638-638S0,165.2,0,517.4s285.7,638,638,638
		S1276,869.7,1276,517.4z"/>
	<g id="layer3" transform="matrix(1 0 0 -1 0 -.82529)">
		<path id="text3011" class="st1" d="M254.7-404.9l269,267c22.9,35.2,55.2,52.6,97.2,52.6c43.3,0,76.8-17.4,101.1-52.6l267-267
			c24.2-24.2,36.5-52,36.5-83c0-32.3-12.3-60.7-36.5-84.9c-24.2-24.2-52.6-36.5-84.9-36.5c-29.7,0-57.1,12.3-83,36.5l-81,83v-283.2
			c0-36.5-11.6-65.2-35.5-85.9c-23.6-21-51-31.3-82-31.3c-32.3,0-60.4,10.3-83.9,31.3S503-809.1,503-772.9v283.2l-81-83
			c-24.2-24.2-52-36.5-83-36.5c-32.3,0-60.7,12.3-84.9,36.5c-24.2,24.2-36.5,52.6-36.5,84.9C218.2-456.5,230.5-429.1,254.7-404.9
			L254.7-404.9z"/>
	</g>
	
		<radialGradient id="path8028_1_" cx="348.9987" cy="4029.5608" r="88.8352" gradientTransform="matrix(0.7277 0 0 0.7277 395.6568 -2870.5298)" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#EEEEED"/>
		<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
	</radialGradient>
	<path id="path8028" class="st2" d="M1240.8,464.8c0-326.4-264.8-591.2-591.2-591.2S58.4,138.4,58.4,464.8S323.2,1056,649.6,1056
		S1240.8,791.2,1240.8,464.8z"/>
	
		<radialGradient id="path9812_1_" cx="128.0526" cy="3687.4919" r="53.1139" gradientTransform="matrix(-0.6569 -0.8388 0.4295 -0.3363 -1263.4187 2172.1423)" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#EEEEED"/>
		<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
	</radialGradient>
	<path id="path9812" class="st3" d="M259.2,149.4C53.6,310.5-3.9,597.5,123.6,825.5c127.9,228,402.6,328.7,647.4,237.3L585.7,566.5
		L259.2,149.4L259.2,149.4z"/>
	
		<radialGradient id="path10709_1_" cx="165.1198" cy="3692.5588" r="53.1135" gradientTransform="matrix(-1.0592 0.1155 -5.915581e-002 -0.5423 1050.5443 2999.1665)" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#EEEEED"/>
		<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
	</radialGradient>
	<path id="path10709" class="st4" d="M95.9,639.8c28.4,259.6,241.8,460.1,502.7,471.7c260.9,11.6,491.7-168.5,543.1-424.6
		L622.2,582.3L95.9,639.8L95.9,639.8z"/>
	
		<radialGradient id="path10713_1_" cx="158.031" cy="3740.041" r="53.1064" gradientTransform="matrix(0.7534 0.7534 -0.3857 0.3857 2337.8127 -1393.0717)" gradientUnits="userSpaceOnUse">
		<stop  offset="0" style="stop-color:#EEEEED"/>
		<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
	</radialGradient>
	<path id="path10713" class="st5" d="M1072.6,841.9c184.7-184.7,207.3-476.6,53-687.4C971.2-56.3,686.1-123.2,454.3-3L698,467.4
		L1072.6,841.9z"/>
	<path id="path3471" class="st6" d="M1276,517.4c0-352.3-285.7-638-638-638S0,165.2,0,517.4s285.7,638,638,638
		S1276,869.7,1276,517.4z"/>
</g>
</svg>


<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 612 613" style="enable-background:new 0 0 612 613;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#2C5FAC;}
	.st1{opacity:0.56;fill:url(#path8028_2_);enable-background:new    ;}
	.st2{opacity:0.56;fill:url(#path9812_2_);enable-background:new    ;}
	.st3{opacity:0.56;fill:url(#path10709_2_);enable-background:new    ;}
	.st4{opacity:0.56;fill:url(#path10713_2_);enable-background:new    ;}
	.st5{fill:none;stroke:#17371B;stroke-width:2.852;}
	.st6{fill:#FFFFFF;stroke:#146B36;stroke-width:3.1;}
</style>
<path id="path7119_1_" class="st0" d="M612,308.7c0-169-137-306-306-306c-169,0-306,137-306,306c0,169,137,306,306,306
	C475,614.6,612,477.7,612,308.7z"/>
<radialGradient id="path8028_2_" cx="33.5524" cy="650.3553" r="89.0898" gradientTransform="matrix(3.1818 0 0 3.1818 204.9485 -1979.223)" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#EEEEED"/>
	<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
</radialGradient>
<path id="path8028_1_" class="st1" d="M595.2,283.5C595.2,126.9,468.3,0,311.7,0C155.1,0,28.2,126.9,28.2,283.5
	C28.2,440,155.1,567,311.7,567C468.3,567,595.2,440,595.2,283.5z"/>
<radialGradient id="path9812_2_" cx="9.4556" cy="629.6821" r="53.2693" gradientTransform="matrix(-2.8725 -3.6679 1.878 -1.4707 -1041.9845 1416.6736)" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#EEEEED"/>
	<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
</radialGradient>
<path id="path9812_1_" class="st2" d="M124.5,132.1C25.8,209.4-1.8,347,59.5,456.3C120.7,565.7,252.5,614,369.9,570.2l-88.8-238
	L124.5,132.1L124.5,132.1z"/>
<radialGradient id="path10709_2_" cx="8.1148" cy="630.6642" r="53.2695" gradientTransform="matrix(-4.6315 0.5051 -0.2586 -2.3712 516.0961 2039.0906)" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#EEEEED"/>
	<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
</radialGradient>
<path id="path10709_1_" class="st3" d="M46.1,367.3c13.6,124.6,116,220.6,241.2,226.3c125.2,5.6,235.8-80.8,260.5-203.7l-249.1-50.1
	L46.1,367.3L46.1,367.3z"/>
<radialGradient id="path10713_2_" cx="7.5142" cy="616.3297" r="53.2611" gradientTransform="matrix(3.2945 3.2945 -1.6866 1.6866 1501.3224 -922.9501)" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#EEEEED"/>
	<stop  offset="1" style="stop-color:#EEEEED;stop-opacity:0"/>
</radialGradient>
<path id="path10713_1_" class="st4" d="M514.5,464.3c88.6-88.6,99.4-228.6,25.4-329.7C465.9,33.4,329.2,1.4,217.9,59l116.9,225.6
	L514.5,464.3z"/>
<path id="path3471_1_" class="st5" d="M612,308.7c0-169-137-306-306-306c-169,0-306,137-306,306c0,169,137,306,306,306
	C475,614.6,612,477.7,612,308.7z"/>
<path class="st6" d="M465.9,393c0,21.5-17.4,38.9-38.9,38.9H200.6c-21.5,0-38.9-17.4-38.9-38.9V196.9c0-21.5,17.4-38.9,38.9-38.9
	h226.5c21.5,0,38.9,17.4,38.9,38.9V393z"/>
</svg>


Also ich würde es eher schlicht halten :slight_smile:

Oder im Standard IPS Design belassen:


Man muss sich beim Webfront Design immer auch Gedanken machen, wie sieht es dann auf den Mobile Endgeräten aus (iOS, Android…)

So finde ich es durchgängiger. Im Webfront steht „in Farbe“ AUF/ZU/Kippen… in der mobilen APP steht das in „Grau“ AUF/ZU/Kippen…

Dein Design wird in der IPS App wieder anderst aussehen - das wäre für mich ein k.O. Kriterium.

P.S.

Bau doch das Gira Homeserver Design nach. Das schlichte geradlinige Design gefällt mir -als Alternative- recht gut…
Da könntest du sogar die Navigation nachbauen.
D.h. eine „Startseite“ bei der man nicht oben die einzelnen Reiter/Registerblätter auswählt, sondern eine Seite mit Icons auf die man klickt.

Naja, Zweck der Uebung war ja, mir nachzuweisen, dass ich sowas überhaupt hinkriegen kann :). Und ich wollte mich vom IPS-eigenen Webserver loslösen, um etwas mehr Freiheitsgrade zu gewinnen. Der gegenwärtige Server ist Nginx auf Arch Linux.

Ich habe ein riesiges hässliches Panel mit 9 (!) Schaltern zur Steuerung der Rolläden im Wohnzimmer. Jegliche Veränderung kann die Situation nicht schlimmer machen.

Meine Idee war, das Panel abzumontieren, ein 5V-Netzteil im Unterputz einzubauen, und das Loch mit einem Lenovo Miix3 Tablet abzudecken. Dann habe ich mir einen schönen Holzrahmen fürs Tablet machen lassen. Ich habe nicht unbedingt vor, die Rolläden übers Handy zu steuern - obwohl das im Prinzip ja möglich ist.

Du hast aber nicht zufällig KNX im Einsatz?
Da würde sich dieser 4fach Multitaster anbieten. D.h. in einem konventionellen Schalterrahmen sind 4 Schalter/Taster mit LED Beleuchtung.

Wenn es so was für Zwave oder sonst einem Funksystem… gäbe - ich würde so einen Schalter sofort kaufen…
Aber KNX ist bei mir nicht vorhanden.

Ich hab zwei nebeneinanderliegende 5 Fach Schalterbatterie von JUNG.
5x Rolläden
5x Licht

Sieht bescheiden aus… Da muss über kurz oder lang auch eine Lösung her…

falls es jemanden interessiert: den Rahmen fürs Lenovo Miix3-1030 habe ich bei allesrahmen dot com bestellt. Die Masse sind: Breite 172 mm, Höhe 256 mm.

Es gibt von eltako Funktaster mit Beleuchtung, falls du sowas sicher