Gibt es eine Möglichkeit in FTUI ein Popup oder anderes Element beim Aufruf per Passwort zu schützen.
Ich würde gerne ein "Service-Menü" einbauen auf das nicht jeder Zugriff hat.
Es sollte zwischen dem Aufruf und der Anzeige eben ein Passwort abgefragt werden.
FTUI2 oder 3?
FTUI2, genau genommen müsste es sich um 2.6 handelt
Kannst wenn dann mit PinPad schützen. Entweder das fertige nehmen:
https://forum.fhem.de/index.php/topic,79283.msg712855.html#msg712855 (https://forum.fhem.de/index.php/topic,79283.msg712855.html#msg712855)
oder eins selber erstellen wie hier als Beispiel:
https://forum.fhem.de/index.php/topic,47461.msg689723.html#msg689723 (https://forum.fhem.de/index.php/topic,47461.msg689723.html#msg689723)
Gruß
Edit: Links getauscht...
Danke für den Hinweis, sowas ähnliches hatte ich auch schon mal irgendwo gelesen.
Aber bei mir sieht die Ausgangslage ja etwas anderes aus.
Bei mir soll zwar das PopUp (Also das Zahlenfeld für die Pineingabe) automatisch geschlossen werden, aber gleichzeitig eine Seite aus dem Menü mit Pagebutton oder ähnlichem aufgerufen wird was als Service-Menü Einstellungen enthält, die nicht für jeden zugänglich sein sollen.
Ich könne eventuell ein Popup automatisch öffnen lassen, wenn mit der Pineingabe ein bestimmtes Reading auf einen bestimmten Wert gesetzt wird, aber lieber wäre mir wenn da ein richtiger Seitenaufruf stattfinden würde,
Ich finde aber nichts dazu, ob sich der Data-Typ "Link" nur ausführen läßt wenn ein bestimmtes Reading gesetzt ist und am besten auch noch nur in einen bestimmten Teil des Fensters.
Dazu mal den Code meiner index.html:
<!DOCTYPE html>
<html>
<head>
<!--
load this page via widget pagebutton
Tablet Acer Iconia One 10 B3-A20: 10 Zoll 1280x800 1 GB Quad Core 1,3 GHz 16GB
Breite: 30 Felder / Höhe: 18 Felder
Schalter mit Label: Breite: 10 Felder / Höhe: 5 Felder
<li data-row="1" data-col="15" data-sizex="10" data-sizey="5">
<header><div data-type="label" class="medium orange">Widget 2</div></header>
</li>
Schalter mit Label: Breite: 14 Felder / Höhe: 9 Felder
<li data-row="1" data-col="10" data-sizex="14" data-sizey="9">
<header><div data-type="label" class="medium orange">Widget 3</div></header>
</li>
-->
<link rel="stylesheet" href="css/Alarm.css" data-type="theme" data-device="Alarmcenter" data-get="state" data-get-on="aktiv" data-get-off="!aktiv" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_margin" content="3">
<meta name="toast" content="2">
<meta name="toast_position" content="top-center">
<meta name="lang" content="de">
<meta name="username" content="extern">
<meta name="password" content="fhem">
<title>FHEM-Steuerung</title>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user" />
<script src="js/fhem-tablet-ui.js" defer></script>
</head>
<body class="" style="overflow:hidden;"> <!-- -->
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="2" data-sizey="20">
<header><div data-type="label" class="">Menü</div></header>
<div>
<div class="centered interlock" data-type="popup" data-height="150px" data-width="350px" data-mode="fade" data-device="" data-get="" data-get-on="" data-get-off="">
<div class="big items-bottom bottom-space center-align top-space yellow">
<div class="center-align items-bottom" data-type="clock" data-format="H:i"></div>
<div class="center-align mini" data-type="clock" data-format="d.n.Y"></div>
</div>
<div class="dialog bg-grey">
<div class="hbox">
<div class="notransmit" data-type="input" id="sendTask"></div>
<div class="big round" data-type="link" data-icon="fs-general_ok" data-device="Controls" data-set="state" data-value="#sendTask" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</div>
</div>
<!--
<div class="big items-bottom bottom-space center-align top-space yellow">
<div class="center-align items-bottom" data-type="clock" data-format="H:i"></div>
<div class="center-align mini" data-type="clock" data-format="d.n.Y"></div>
</div>
-->
<!--
<div class="default" data-type="pagebutton" data-url="#vorlage.html" data-load="#vorlage" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="606060" data-on-color="#222222" data-active-pattern="(.*/||.*vorlage.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/home.png" data-size="75px"></div>
</div>
<div class="default" data-type="pagebutton" data-url="#leer.html" data-load="#vorlage2" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="606060" data-on-color="#222222" data-active-pattern="(.*/||.*leer.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/home.png" data-size="75px"></div>
</div>
-->
<div class="default" data-type="pagebutton" data-url="#uebersicht.html" data-load="#uebersicht" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*uebersicht.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/home.png" data-size="75px"></div>
</div>
<div class="default" data-type="pagebutton" data-url="#floorplan_menu.html" data-load="#floorplan_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*floorplan_menu.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/wohnung.png" data-size="75px"></div>
</div>
<div class="default" data-type="pagebutton" data-url="#light.html" data-load="#light" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*light.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/licht.png" data-size="75px"></div>
</div>
<!--
<div class="default" data-type="pagebutton" data-url="#klima_menu.html" data-load="#klima_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*klima_menu.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/klima.png" data-size="75px"></div>
</div>
-->
<!--
<div class="default" data-type="pagebutton" data-url="#timer_menu.html" data-load="#timer_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*timer_menu.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/timer.png" data-size="75px"></div>
</div>
-->
<!--
<div class="default" data-type="pagebutton" data-url="#rollaeden_menu.html" data-load="#rollaeden_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*rollaeden_menu.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/rolladen.png" data-size="75px"></div>
</div>
-->
<div class="default" data-type="pagebutton" data-url="#security.html" data-load="#security" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*security.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/kamera.png" data-size="75px"></div>
</div>
<div class="default" data-type="pagebutton" data-url="#multimedia_menu.html" data-load="#multimedia_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*multimedia_menu.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/multimedia.png" data-size="75px"></div>
</div>
<div class="default" data-type="pagebutton" data-url="#wetter.html" data-load="#wetter" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*wetter.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/umwelt.png" data-size="75px"></div>
</div>
<div class="default" data-type="pagebutton" data-url="#batterie.html" data-load="#batterie" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*batterie.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/batterie.png" data-size="75px"></div>
</div>
<!--
<div class="default" data-type="pagebutton" data-url="#auswertung_menu.html" data-load="#auswertung_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*auswertung_menu.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/auswertung.png" data-size="75px"></div>
</div>
-->
<div class="default" data-type="pagebutton" data-url="#setup_allgemein.html" data-load="#setup_allgemein" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*setup_allgemein.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/setup.png" data-size="75px"></div>
</div>
<!--
<div class="default" data-type="pagebutton" data-url="#systeminfo_menu.html" data-load="#systeminfo_menu" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*/||.*systeminfo_menu.html||.*#1_overview.html)" data-icon="transparent">
<div class="menu_image" data-type="image" data-url="../images/systeminfo.png" data-size="75px"></div>
</div>
-->
</div>
</li>
<li data-row="1" data-col="3" data-sizex="18" data-sizey="20">
<div class="page" id="uebersicht"></div>
<div class="page" id="floorplan_menu"></div>
<div class="page" id="light"></div>
<div class="page" id="klima_menu"></div>
<div class="page" id="timer_menu"></div>
<div class="page" id="rollaeden_menu"></div>
<div class="page" id="security"></div>
<div class="page" id="multimedia_menu"></div>
<div class="page" id="wetter"></div>
<div class="page" id="batterie"></div>
<div class="page" id="auswertung_menu"></div>
<div class="page" id="systeminfo_menu"></div>
<div class="page" id="setup_allgemein"></div>
</li>
<li data-row="1" data-col="21" data-sizex="4" data-sizey="20">
<header><div data-type="label" class="">Meldungen</div></header>
<div class="vbox items-top">
<div class="card bg-blue border-white grow-0 vbox" data-type="label" data-device="Alarmcenter" data-get="" data-hide="state" data-hide-on="!aktiv" data-hide-off="aktiv">
<div class="yellow left-space top-space bold left-align" data-type="label">Info</div>
<div class="top-space bottom-space centered" data-type="label" data-device="Alarmcenter" data-get="" data-hide="state" data-hide-on="!aktiv" data-hide-off="aktiv">Alarmanlage<br>ist scharf</div>
</div>
<div class="card bg-blue border-white grow-0 vbox" data-type="label" data-device="wz_kontakt_balkontuer" data-get="" data-hide="state" data-hide-on="closed" data-hide-off="open">
<div class="yellow left-space top-space bold left-align" data-type="label">Info</div>
<div class="top-space bottom-space centered" data-type="label" data-device="wz_kontakt_balkontuer" data-get="" data-hide="state" data-hide-on="closed" data-hide-off="open">Die Balkontür<br>ist offen</div>
</div>
<div class="card bg-blue border-white grow-0 vbox" data-type="label" data-device="sz_structure_schlafzimmerfenster" data-get="" data-hide="state" data-hide-on="closed" data-hide-off="open">
<div class="yellow left-space top-space bold left-align" data-type="label">Info</div>
<div class="top-space bottom-space centered" data-type="label" data-device="sz_structure_schlafzimmerfenster" data-get="" data-hide="state" data-hide-on="closed" data-hide-off="open">Das Schlafzimmerfenster<br>ist offen</div>
</div>
<div class="card bg-blue border-white grow-0 vbox" data-type="label" data-device="ku_kontakt_fenster" data-get="" data-hide="state" data-hide-on="closed" data-hide-off="open">
<div class="yellow left-space top-space bold left-align" data-type="label">Info</div>
<div class="top-space bottom-space centered" data-type="label" data-device="ku_kontakt_fenster" data-get="" data-hide="state" data-hide-on="closed" data-hide-off="open">Das Küchenfenster<br>ist offen</div>
</div>
<div class="card bg-blue border-white grow-0 vbox" data-type="label" data-device="k_plug_waeschetrockner" data-get="" data-hide="state" data-hide-on="off" data-hide-off="on">
<div class="yellow left-space top-space bold left-align" data-type="label">Info</div>
<div class="top-space bottom-space centered" data-type="label" data-device="k_plug_waeschetrockner" data-get="" data-hide="state" data-hide-on="off" data-hide-off="on">Der Wäschetrockner<br>ist eingeschaltet</div>
</div>
<div class="card bg-red border-white grow-0 vbox" data-type="label" data-device="wz_smoker_rauchmelder" data-get="" data-hide="state" data-hide-on="off" data-hide-off="!off">
<div class="white left-space top-space bold left-align" data-type="label">Gefahr!</div>
<div class="top-space bottom-space centered" data-type="label" data-device="wz_smoker_rauchmelder" data-get="" data-hide="state" data-hide-on="off" data-hide-off="!off">Rauch<br>im Wohnzimmer</div>
</div>
<div class="card bg-red border-white grow-0 vbox" data-type="label" data-device="sz_smoker_rauchmelder" data-get="" data-hide="state" data-hide-on="off" data-hide-off="!off">
<div class="white left-space top-space bold left-align" data-type="label">Gefahr!</div>
<div class="top-space bottom-space centered" data-type="label" data-device="sz_smoker_rauchmelder" data-get="" data-hide="state" data-hide-on="off" data-hide-off="!off">Rauch<br>im Schlafzimmer</div>
</div>
<div class="card bg-orange border-white grow-0 vbox" data-type="label" data-device="k_wasser_sensor_spuele" data-get="" data-hide="flood" data-hide-on="false" data-hide-off="true">
<div class="grey left-space top-space bold left-align" data-type="label">Warnung!</div>
<div class="top-space bottom-space centered" data-type="label" data-device="k_wasser_sensor_spuele" data-get="" data-hide="flood" data-hide-on="false" data-hide-off="true">Wasseraustritt<br>in der Küche</div>
</div>
<div class="card bg-orange border-white grow-0 vbox" data-type="label" data-device="k_gas_shellygas" data-get="" data-hide="gas" data-hide-on="none" data-hide-off="mild">
<div class="grey left-space top-space bold left-align" data-type="label">Warnung!</div>
<div class="top-space bottom-space centered" data-type="label" data-device="k_gas_shellygas" data-get="" data-hide="gas" data-hide-on="none" data-hide-off="mild">Gasaustritt<br>in der Küche</div>
</div>
<div class="card bg-red border-white grow-0 vbox" data-type="label" data-device="k_gas_shellygas" data-get="" data-hide="gas" data-hide-on="none" data-hide-off="heavy">
<div class="white left-space top-space bold left-align" data-type="label">Gefahr!</div>
<div class="top-space bottom-space centered" data-type="label" data-device="k_gas_shellygas" data-get="" data-hide="gas" data-hide-on="none" data-hide-off="heavy">Gasaustritt<br>in der Küche</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Nach richtiger Pineingabe sollte im Mittelteil - der ohne einen Header - dann das Service-Menü geladen werden.
Dann kann ich dir nur FTUI3 empfehlen. Ist zwar noch nicht im Release-Status, funktioniert aber schon super.
Da gibt es dann auch hidden oder open Funktionen... und mehr...
Ich habe dafür auch schon ein PinPad gebaut:
https://forum.fhem.de/index.php/topic,120107.0.html (https://forum.fhem.de/index.php/topic,120107.0.html)
Da kannst du auch ein separates set absetzen...
Kann ich beim pagetab denn den einzelnen li's eine ID mitgeben auf die ich mich beim Link beziehen kann?
Habe mir das Pinpad-Widget eingebaut, leider funktioniert es nicht. Der Programmierer gibt leider keinen Support für FTUI mehr.
Gibt es weitere Informationen zu dem Pinpad-Widget, außer dem genannten Threat?
So sah das bei mir aus im FTUI2 (ist die letzte Version von mir):
<div>
<!-- ============= PIN Eingabe================== -->
<div data-type="popup_delay"
data-draggable="false"
data-device="Heizung_Settings_PIN"
data-get-on="on"
data-get-off="off"
data-height="520px"
data-width="330px"
class="center interlock">
<!-- ============= Widgetinhalt Start ================== -->
<!-- ============= Widgetinhalt Ende ================== -->
<!-- ============= Popupinhalt Start ================== -->
<div class="dialog">
<header>PIN Eingabefeld</header>
<div data-type="pinpad"
data-device="Heizung_Settings_PIN"
data-get="STATE"
data-get-pin="pin"
data-text-locked="PIN erforderlich"
data-text-blocked="Gesperrt für: "
data-text-unlocked="PIN ok"
data-bg-color="#393939"
data-font-size="40px"
data-locked-time="10"
data-tries="3"
class="center">
</div>
</div>
<!-- ============= Popupinhalt Ende ================== -->
</div>
<!-- ============= PIN Eingabe Ende ================== -->
</div>
War direkt nach dem li.
Und hier das Device:
defmod Heizung_Settings_PIN dummy
attr Heizung_Settings_PIN readingList pin
attr Heizung_Settings_PIN room Heizung
attr Heizung_Settings_PIN setList on off pin
Das ganze wurde so auf an geschalten im Menü:
<div data-type="link" data-url="#vaillant_heizung.html" data-load="#heizung"
data-icon="fa-fire" data-active-background-color="cornflowerblue"
data-color="white" data-background-color="#505050"
data-height="45" data-width="90" data-active-pattern=".*#vaillant_heizung.html"
onclick="ftui.setFhemStatus('set Heizung_Settings_PIN on');"
data-active-color="black" class="round7 center prefetch">Heizung</div>
Ich hänge dir noch die Dateien an. user.css musst du halt mit einbinden.
Mehr kann ich dir da nicht Helfen!