Hallo setstate,
ich habe das Popup Widget ein wenig erweitert. Damit ist nun folgendes möglich:
Wenn das neue attribut data-only-autoclose (kann gerne anders genannt werden ;D) gesetzt ist kann das Popup nur durch data-get-off geschlossen werden. Das schalten eines Devices das hinter dem Popup liegt ist nicht mehr möglich, das X das schließen des Popups wird auch entfernt.
Somit kann man die UI "sperren" wenn zB die die Alarmanlage scharf ist. Wenn die Alarmanlage unscharf ist, verschwindet das Popup wieder. In meinem Fall hab ich im Popup eine Code Tastatur eingebaut die Alarmanlage unscharf schaltet. Das Popup öffnet sich sobald die Alarmanlage scharf ist.
Das ganze ist angelehnt an diesen Post: https://forum.fhem.de/index.php/topic,47461.msg392481.html#msg392481 Habe aber den Code abgeändert und gehe über ein notify ohne sequence. Kann bei Interesse gerne eine Anleitung einstellen.
Hab eine kurzes Video aufgenommen um das zu verdeutlichen.
http://sendvid.com/nxen6iie
Hier ist der PR: https://github.com/knowthelist/fhem-tablet-ui/pull/145
Was meinst du zu der Erweiterung? Mein Code ist sicher nicht perfekt. Bin für vorschläge immer offen :)
Grüße
Zitat von: fhainz am 24 April 2016, 13:44:06
Das ganze ist angelehnt an diesen Post: https://forum.fhem.de/index.php/topic,47461.msg392481.html#msg392481 Habe aber den Code abgeändert und gehe über ein notify ohne sequence. Kann bei Interesse gerne eine Anleitung einstellen.
Hab eine kurzes Video aufgenommen um das zu verdeutlichen.
http://sendvid.com/nxen6iie
Sieht richtig gut aus, vor allem der Effekt bei einer falschen Eingabe! Könntest du die Umsetzung mit ein paar Worten und Codezeilen hier näher erläutern? :)
Grüße,
Florian
Zitat von: fhainz am 24 April 2016, 13:44:06
Kann bei Interesse gerne eine Anleitung einstellen.
Jap :)
Das wäre sau interessant! Alles... für die Allgemeinheit.
Abgesehen davon, dass ich nicht das PopUp nutzen werde sondern eine schicke Variante mit slideDown() / slideUp() á la jQuery API....
würde mich das "shaken" des Tastaturfeldes (wahrscheinlich in eine <div> verpackt) sehr sehr interessieren!
Danke dir im Vorraus.
Grüße^^
Klar. Kein Problem.
Bin unter der Woche nicht dazu gekommen aber mache es jetzt am Wochenende mal.
Grüße
Bin auch an CodeBeispiel und FHEM Definition (falls nötig) interessiert.
Sollte dirngend in die offizielle version :)
Hier mal eine Anleitung:
Wenn der Scharf/Unscharf dummy (al.alarmanlage.keypad.scharf) auf on steht sollte das Popup erscheinen. Dieses Popup verschwindet nur durch code eingabe oder durch off schalten des scharf/unscharf dummys. Der Hintergrund ist deaktiviert.
Der Code lässt sich in der 99_myUtils.pm einstellen.
Es gibt derzeit noch einen Bug wenn sich ein 2. Popup auf der Seite befindet. Siehe hier: https://github.com/knowthelist/fhem-tablet-ui/pull/145#issuecomment-215950790
FHEM:
Keypad dummy:
define al.alarmanlage.keypad dummy
attr al.alarmanlage.keypad event-on-update-reading .*
Keypad notify:
define n.al.alarmanlage.keypad notify al.alarmanlage.keypad.\d { keypadCheck(); }
Scharf/Unscharf dummy
define al.alarmanlage.keypad.scharf dummy
99_myUtils:
sub keypadCheck() {
my $device = "al.alarmanlage.keypad";
my $deviceScharf = "al.alarmanlage.keypad.scharf";
my $key = 1234;
my $value = ReadingsVal($device,"state","0");
my $try = ReadingsVal($device,"try","none");
if( $try =~ "none" ) {
fhem("setreading $device try $value");
}
elsif( $try =~ /^\d{0,2}$/ ) {
my $aktTry = $try.$value;
fhem("setreading $device try $aktTry");
}
elsif( $try =~ /^\d{3}$/ ) {
my $aktTry = $try.$value;
if( $aktTry == $key ) {
fhem("setreading $device unlocked 1");
fhem("set $device -");
fhem("set $deviceScharf off");
}
else {
fhem("setreading $device lastFalseTry $aktTry");
Log3 $device, 3, "Keypad false try: $aktTry";
fhem("set $device invalid");
}
fhem("setreading $device try none");
}
}
Tablet UI:
index.html
<body>
<div data-type="popup" data-device="al.alarmanlage.keypad.scharf" data-get="state" data-get-on="on" data-get-off="off" data-draggable="false" data-width="495px" data-height="500px" class="only-autoclose">
<div class="dialog">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="4" data-sizey="4">
<header>Alarmanlage</header>
<div data-type="symbol" data-device="al.alarmanlage.keypad.scharf" data-get-on="on" data-icon="fa-exclamation-circle" data-background-icon="fa-circle" data-on-background-color="rgba(255,0,0,0.0)" data-off-background-color="rgba(255,0,0,0.0)" data-on-color="red" data-off-color="grey" class="gigantic"></div>
<div data-type="label" data-device="al.alarmanlage.keypad" id="keyState" data-get="state" data-substitution="toString().keyState()"></div>
<div id="keypad">
<div>
<div data-type="push" data-device="al.alarmanlage.keypad" data-set-on="1" data-icon="" class="big">1</div>
<div data-type="push" data-device="al.alarmanlage.keypad" data-set-on="2" data-icon="" class="big">2</div>
<div data-type="push" data-device="al.alarmanlage.keypad" data-set-on="3" data-icon="" class="big">3</div>
</div>
<div>
<div data-type="push" data-device="al.alarmanlage.keypad" data-set-on="4" data-icon="" class="big">4</div>
<div data-type="push" data-device="al.alarmanlage.keypad" data-set-on="5" data-icon="" class="big">5</div>
<div data-type="push" data-device="al.alarmanlage.keypad" data-set-on="6" data-icon="" class="big">6</div>
</div>
<div>
<div data-type="push" data-device="al.alarmanlage.keypad" data-set-on="7" data-icon="" class="big">7</div>
<div data-type="push" data-device="al.alarmanlage.keypad" data-set-on="8" data-icon="" class="big">8</div>
<div data-type="push" data-device="al.alarmanlage.keypad" data-set-on="9" data-icon="" class="big">9</div>
</div>
<div>
<div data-type="push" data-device="al.alarmanlage.keypad" data-set-on="0" data-icon="" class="big">0</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
fhem-tablet-ui-user.css:
/*
* Alarmanlage Popup
*/
.dialog {
overflow: hidden;
}
.dialog > .gridster {
margin:-5px 0 0 -5px !important;
}
.dialog div[data-type=symbol] {
margin-top: -65px !important;
}
.dialog #keypad {
margin-top: -60px !important;
}
.dialog #keypad div div {
margin: 4px;
}
.dialog #keypad.invalid {
-webkit-animation: shake .5s linear;
}
@-webkit-keyframes shake {
8%, 41% {
-webkit-transform: translateX(-10px);
}
25%, 58% {
-webkit-transform: translateX(10px);
}
75% {
-webkit-transform: translateX(-5px);
}
92% {
-webkit-transform: translateX(5px);
}
0%, 100% {
-webkit-transform: translateX(0);
}
}
fhem-tablet-ui-user.js
/*
* Alarm Popup bei falscher Eingabe wackeln lassen
*/
String.prototype.keyState = function() {
var state = this;
if( state == "invalid" ) {
$("#keypad").addClass("fail-shake");
}
else {
$("#keypad").removeClass("fail-shake");
}
};
Die widget_popup.js muss derzeit noch in das js Verzeichnis kopiert werden. https://github.com/fhainz/fhem-tablet-ui/blob/patch-3/www/tablet_eval/js/widget_popup.js
Grüße
Änderungen:
- js angepasst. + Dieser CSS Teil wird ab sofort nicht mehr benötigt und wird durch eine aktuelle fhem-tablet-ui.css bereitgestellt:
.dialog #keypad.invalid {
-webkit-animation: shake .5s linear;
}
@-webkit-keyframes shake {
[...]
}
Vielen Dank. Das hat tatsächlich geholfen meine KeyPad-Div zu animieren.
Da aber nicht jeder Äpfel
isst benutzt sollte die CSS wenigstens dahingehen geändert werden:
.dialog #keypad.invalid {
-webkit-animation: shake .5s linear;
animation: shake .5s linear;
}
@-webkit-keyframes shake {
8%, 41% {
-webkit-transform: translateX(-10px);
}
25%, 58% {
-webkit-transform: translateX(10px);
}
75% {
-webkit-transform: translateX(-5px);
}
92% {
-webkit-transform: translateX(5px);
}
0%, 100% {
-webkit-transform: translateX(0);
}
}
@keyframes shake {
8%, 41% {
transform: translateX(-10px);
}
25%, 58% {
transform: translateX(10px);
}
75% {
transform: translateX(-5px);
}
92% {
transform: translateX(5px);
}
0%, 100% {
transform: translateX(0);
}
}
sodass auch normale Browser und/oder Devices dieses verstehen.
de.selfhtml.org:
Zitat
Achtung!
Für die Verwendung in älteren Browser-Versionen müssen Sie proprietäre Eigenschaften verwenden.
für Android bis 4.44 und Safari 8:
-webkit-animation
@-webkit-keyframes
Hinweis
Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.
Ich habe da ganz schön lange dran rumgeflucht ;D ;D
Grüße^^
Zitat von: roman1528 am 01 Mai 2016, 23:12:15
Da aber nicht jeder Äpfel isst benutzt
Ich habe die Animation auch nur von stackoverflow geklaut. (http://stackoverflow.com/a/15991184)
Funtioniert bei mir aber auch unter Windows und Chrome problemlos.
Ich habe oben noch einen js code eingefügt. Den hatte ich vorher vergessen.
Grüße
Hallo,
ich haben den obigen Code heute mit der aktuellen TabletUI-Evaluierungsversion 2.2 ausprobiert und wollte nur zur Klarstellung (falls noch andere User auf diesen Thread stoßen) auf Folgendes hinweisen:
Der im Beispiel genannte Parameter class="only-autoclose" heißt inzwischen wohl class="interlock".
Gruß,
alpha1974