Popup Widget Erweiterung - Kein manuelles schließen

fhainz · 24 April 2016, 13:44:06

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

) 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

takaze · 26 April 2016, 09:51:08

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

roman1528 · 29 April 2016, 19:54:00

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^^

fhainz · 29 April 2016, 20:18:28

Klar. Kein Problem.
Bin unter der Woche nicht dazu gekommen aber mache es jetzt am Wochenende mal.

Grüße

Tobias · 30 April 2016, 09:54:25

Bin auch an CodeBeispiel und FHEM Definition (falls nötig) interessiert.
Sollte dirngend in die offizielle version

fhainz · 30 April 2016, 12:48:42

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:

Code Auswählen

define al.alarmanlage.keypad dummy 
attr al.alarmanlage.keypad event-on-update-reading .*

Keypad notify:

Code Auswählen

define n.al.alarmanlage.keypad notify al.alarmanlage.keypad.\d { keypadCheck(); }

Scharf/Unscharf dummy

Code Auswählen

define al.alarmanlage.keypad.scharf dummy

99_myUtils:

Code Auswählen


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

Code Auswählen


<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:

Code Auswählen


/*
 * 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

Code Auswählen


/*
 * 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 {
[...]
}

roman1528 · 01 Mai 2016, 23:12:15

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:

Code Auswählen


.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

Grüße^^

fhainz · 02 Mai 2016, 07:40:02

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.

fhainz · 05 Mai 2016, 09:22:46

Ich habe oben noch einen js code eingefügt. Den hatte ich vorher vergessen.

Grüße

alpha1974 · 20 August 2016, 21:13:54

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