EDOMI - Zeigt her eure Visus!

[ttcoach]

ttcoach Das sollte den Button mittlere Reihe links ergeben:

Aussen:

Grösse 140x70px
Rundung 20px
Z-Index: 0
CSS
content: "";background: #1A1A1A;box-shadow: inset -1px -1px 2px rgba(255,255,255,0.3),inset -5px -15px 40px rgba(255,255,255,0.1), inset 1px 1px 2px rgba(0,0,0,0.5), inset 5px 15px 40px rgba(0,0,0,0.2), -2px -40px 50px -20px rgba(255,255,255,0.1), 2px 35px 50px -10px rgba(0,0,0,0.4),0px 0px 25px 8px rgba(60,60,60,1);

Leuchtring:

Grösse 60x60px
Rundung 18px
Z-Index 1

Aus:
CSS:
box-shadow: 0 0 10px 3px rgba(0,255,0,0.5);background:rgba(0,255,0,0.5);;-webkit-transition: 0.5s ease-out

Ein:

Delta x-Pos 68
CSS:
box-shadow: 0 0 10px 4px rgba(255,0,0,0.5);background:rgba(255,0,0,0.5);-webkit-transition: 0.5s ease-out;


Knopf:
Grösse 60x60px
Rundung 15px
Z-Index: 2

Werte für Aus:
Schriftgrösse: 24px
CSS:
cursor: pointer; background: #25292C; margin: 0px auto; text-align: center; color: rgba(155,155,155,1); text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1); font-family: sans-serif; box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),inset 3px 15px 45px rgba(255,255,255,0.1),inset -1px -1px 2px rgba(0,0,0,0.5),inset -3px -15px 45px rgba(0,0,0,0.2),1px 5px 30px -4px rgba(0,0,0,1);-webkit-transition: 0.5s ease-out

Werte für EIN:

Delta x-Pos: 68
Radius 15px
Schriftgrösse 20
CSS:
cursor: pointer;background: #25292C; text-align: center; color: rgba(155,155,155,1); text-shadow: 1px 1px 0px rgba(255,255,255,0.15); font-family: sans-serif;color: rgba(0,0,0,0.7); text-shadow: 1px 1px 0px rgba(255,255,255,0.15); box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),inset 3px 15px 45px rgba(0,0,0,0.2), inset -1px -1px 2px rgba(0,0,0,0.5),inset -3px -15px 45px rgba(255,255,255,0.1),1px 5px 10px -4px rgba(0,0,0,1);-webkit-transition: 0.5s ease-out;-webkit-transform: scale(0.95, 0.95);

Hallo!
Danke Dir. Habe gerade mal eingefügt aber irgendetwas klappt da nicht bei mir.
Was hab ich denn da falsch gemacht?
Button_01.jpg

[timberland]

Coole Sache vento66

Für alle die die Demovisu verwenden können das auch mal versuchen. Werde das bei Gelegenheit in der DemoVisu ändern.

[U][B]1. Universalelement[/B][/U]
Hintergrund:

CSS:
"width: 105px;     
height: 60px;       
background: rgba(255,255,255,0.1);     
border-radius: 30px 30px 30px 30px;     
box-shadow: inset 0 1px 3px 1px rgba(0,0,0,0.5), inset 0 1px 3px rgba(0,0,0,0.2), 0 1px 0 rgba(255,255,255,0.1);         
-webkit-transition: all .5s ease; transition: all .5s ease;"



[U][B]2. Universalelement[/B][/U]
Für Status 0:
Koordinaten x +2 / y +3 zu Hintergrundelement

CSS:
"height: 53px;
width: 53px;
z-index: 2;
border-radius: 30px;
background: #4E738B; 
box-shadow: inset 0 2px 2px rgba(255,255,255,0.4), 0 8px 10px rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.5); 
-webkit-transition: all .5s ease; 
transition: all .5s ease;"



Für Status 1:
Versatz x 48

CSS:
"height: 53px;
width: 53px;
z-index: 2;
border-radius: 30px;
background: #11CBC5; 
box-shadow: inset 0 2px 2px rgba(255,255,255,0.4), 0 8px 10px rgba(0,0,0,0.1), 0 2px 5px rgba(0,0,0,0.5); 
-webkit-transition: all .5s ease; 
transition: all .5s ease;"

Schaut in der Visu dann so aus.

IMG_0397.PNG

[mywap]

Claus.Mallorca
Hier ist der <Ein>-Button:

<?xml version="1.0"?>
<svg width="98" height="36" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <title>Schalter Ein</title>
 <g>
  <title>Layer 1</title>
  <path stroke="#ffffff" fill-opacity="0" id="svg_1" d="m19.050999,1.04245l62.39809,0l0,0c8.174309,0 14.800911,7.592197 14.800911,16.957607c0,9.365349 -6.626602,16.957493 -14.800911,16.957493l-62.39809,0l0,0c-8.174418,0 -14.800999,-7.592144 -14.800999,-16.957493c0,-9.36541 6.62658,-16.957607 14.800999,-16.957607z" fill="#000000"/>
  <circle stroke="#27ae60" id="svg_5" r="17" cy="18" cx="18.5" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#27ae60"/>
  <text x="62" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="24" id="svg_3" y="26.296875" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" stroke="#ffffff" fill="#ffffff">Ein</text>
  <text fill="#ffffff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" id="svg_2" font-size="24" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" y="26.296629" x="17.827633" stroke="#ffffff">✔︎</text>
 </g>
</svg>

und der <Aus> Button

<?xml version="1.0"?>
<svg width="98" height="36" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <title>Schalter Aus</title>
 <g>
  <title>Layer 1</title>
  <path stroke="#ffffff" fill="#000000" d="m15.801,1.04245l62.398089,0l0,0c8.174309,0 14.800911,7.592197 14.800911,16.957603c0,9.365355 -6.626602,16.957497 -14.800911,16.957497l-62.398089,0l0,0c-8.174419,0 -14.801,-7.592142 -14.801,-16.957497c0,-9.365408 6.62658,-16.957603 14.801,-16.957603z" id="svg_1" fill-opacity="0"/>
  <circle fill="#ff5656" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" cx="80" cy="18" r="17" id="svg_5" stroke="#ff5656"/>
  <text fill="#ffffff" stroke="#ffffff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" y="26.296875" id="svg_3" font-size="24" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" x="34">Aus</text>
  <line fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="72" y1="10" x2="88" y2="26" id="svg_6"/>
  <line fill="none" stroke="#ffffff" stroke-width="null" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x1="72" y1="26" x2="88" y2="10" id="svg_9"/>
 </g>
</svg>

Erstellt hatte ich sie ursprünglich mit SVG-EDIT. Jetzt nehme ich inkscape.

Grüße
Frank

[vento66]

ttcoach Das sollte den Button mittlere Reihe links ergeben:

Aussen:

Grösse 140x70px
Rundung 20px
Z-Index: 0
CSS
content: "";background: #1A1A1A;box-shadow: inset -1px -1px 2px rgba(255,255,255,0.3),inset -5px -15px 40px rgba(255,255,255,0.1), inset 1px 1px 2px rgba(0,0,0,0.5), inset 5px 15px 40px rgba(0,0,0,0.2), -2px -40px 50px -20px rgba(255,255,255,0.1), 2px 35px 50px -10px rgba(0,0,0,0.4),0px 0px 25px 8px rgba(60,60,60,1);

Leuchtring:

Grösse 60x60px
Rundung 18px
Z-Index 1

Aus:
CSS:
box-shadow: 0 0 10px 3px rgba(0,255,0,0.5);background:rgba(0,255,0,0.5);;-webkit-transition: 0.5s ease-out

Ein:

Delta x-Pos 68
CSS:
box-shadow: 0 0 10px 4px rgba(255,0,0,0.5);background:rgba(255,0,0,0.5);-webkit-transition: 0.5s ease-out;


Knopf:
Grösse 60x60px
Rundung 15px
Z-Index: 2

Werte für Aus:
Schriftgrösse: 24px
CSS:
cursor: pointer;  background: #25292C;   margin: 0px auto;   text-align: center;   color: rgba(155,155,155,1);   text-shadow: -1px -1px 0px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,1);    font-family: sans-serif;   box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),inset 3px 15px 45px rgba(255,255,255,0.1),inset -1px -1px 2px rgba(0,0,0,0.5),inset -3px -15px 45px rgba(0,0,0,0.2),1px 5px 30px -4px rgba(0,0,0,1);-webkit-transition: 0.5s ease-out

Werte für EIN:

Delta x-Pos: 68
Radius 15px
Schriftgrösse 20
CSS:
cursor: pointer;background: #25292C; text-align: center;  color: rgba(155,155,155,1);    text-shadow: 1px 1px 0px rgba(255,255,255,0.15); font-family: sans-serif;color: rgba(0,0,0,0.7);   text-shadow: 1px 1px 0px rgba(255,255,255,0.15);   box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3),inset 3px 15px 45px rgba(0,0,0,0.2), inset -1px -1px 2px rgba(0,0,0,0.5),inset -3px -15px 45px rgba(255,255,255,0.1),1px 5px 10px -4px rgba(0,0,0,1);-webkit-transition: 0.5s ease-out;-webkit-transform: scale(0.95, 0.95);

[mywap]

https://knx-user-forum.de/member/688-claus-mallorca Die Ein/Aus Buttons sind svg's, die ich gemalt habe. Stelle Sie morgen hier ein.

[ttcoach]

gefällt mir auch sehr gut - die Buttons schaun geil aus

Sieht prima aus. Würde ich gerne übernehmen. Würdest Du bitte die Einstellungen zur Verfügung stellen? Da ich nur Anwender bin würde das sehr helfen. Ansonsten muss ich wohl warten bis Christian die Möglichkeit geschaffen hat die Muster-Visus zu übernehmen.
Vorab schon mal einen Guten Rutsch allen im Forum.
Finde es toll was ihr hier macht.

Gruß Dietmar

[eriche]

gefällt mir auch sehr gut - die Buttons schaun geil aus

[hexer]

Das sind ja mal wieder ein paar sehr coole Inspirationen. Danke euch. Hab nur leider wenig Zeit. Muss noch Keller fliesen und so....

[Brick]

vento66 die Buttons sehen richtig cool aus.. schöner räumlicher Effekt !

[vento66]

Und als rudimentäre Inbetriebnahme Visu (Da noch einige Komponenten fehlen, ist das im Moment die einzige Bedienmöglichkeit auf der Baustelle)

tm.PNG

[vento66]

So hab gestern auch mal ein wenig getestet Ein paar Buttons nur mit CSS:

on_.pngoff_.png

[Claus.Mallorca]

Wie hast du den Aus/Ein-Button designt ?? Sieht gut aus!

[mywap]

hexer ich stelle das dimmen über einen Schieberegler ein. Siehe Beispiel Esstisch. Insgesamt sind dies 4 Visuelemente:
Bildschirmfoto 2016-12-30 um 16.31.34.png

Hier die Einstellung für das Schiebeelement:
Bildschirmfoto 2016-12-30 um 16.31.57.png

und die Linie:
Bildschirmfoto 2016-12-30 um 16.34.31.pngBildschirmfoto 2016-12-30 um 16.34.13.png

image_52289.png

Grüße
Frank

[hexer]

Hallo Gemeinde. Dann gebe ich auch mal meine Ansätze kund und hoffe auf konstruktive Kritik. Ich bin Designtechnisch nicht so begabt wie man sieht. Momentan hänge ich daran dimmfunktionen zu integrieren und weiß nicht wie ich es am besten (funktionalsten) lösen soll.

[gspsteve]

Vielen Dank jonofe hat funktioniert. Ich dachte schon der Fehler liegt an meiner Implementierung, somit kommt der Fehler also bei allen welche das "Demo-Projekt" von timberland implementiert haben...