Hallo,
Ich habe ein x-beliebiges Widget bei dem das Attribut data-device="devicename1" ist, Da ich mehrere ähnliche devices habe, möchte ich mit jQuery den devicename1 über ein <select>-Element das neue Device auswählen und "devicename 1" durch den ausgewählten neuen Namen z.B. "devicename2" ersetzen. Bei der Überprüfung werden brav alle devicename1 durch devicename2 ersetzt. Trotzdem werden alle Aktionen noch mit dem "alten" Namen durchgeführt. Damit bekomme ich auch keine Statusanzeigen.
Beispiel an einer Pausentaste:
<div data-type="switch"
data-device="SB3.Buero"
data-get="playStatus"
data-set-on="play"
data-set-off="pause 1"
data-get-on='["playing","paused","stopped"]'
data-icons='["fa-pause","fa-play","fa-play"]'
data-background-icon="fa-square-o" >
</div>
Jetzt wird über jQuery mit diesem Code;
<script>
$( "select" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div" ).attr( "data-device",str );
})
.change();
</script>
das data-device="SB3.Buero" in data-device="SBN.Bad" in allen div's ausgetauscht. Der abgesetzte Befehl ist aber immer noch "set SB3.Buero play" und "set SB3.Buero pause 1".
Das Script steht im header-Element.
Kann es sein, dass ich etwas versuche, was durch den FTUI-Code nicht funktionieren kann? Oder wie kann ich FTUI mitteilen, dass das Device sich geändert hat?
Gruß Eberhard
Überschrift angepasst!
Ich muss das dann mal live testen, aber ich würde eine ID vergeben, damit du nur wirklich das eine Element änderst:
<div data-type="switch" id="musicbox"
data-device="SB3.Buero"
data-get="playStatus"
data-set-on="play"
data-set-off="pause 1"
data-get-on='["playing","paused","stopped"]'
data-icons='["fa-pause","fa-play","fa-play"]'
data-background-icon="fa-square-o" >
</div>
und dann data ändern
$('#musicbox').data( "device", str );
ist aber noch ungetestet ...
Dadurch, dass Du das Attribut data-device setzt wird erstmal nichts geändert an der Anzeige des aktuellen FTUI. Es gibt zentrale Routinen, die aus den widget-Definitionen die devices zusammensammeln und auch die einzelnen Widgetinstanzen initialisieren. Nur dann wird das Attribut neu ausgewertet.
Ich habe versucht etwas ähnliches zu erreichen, leider aber auch noch ohne Lösung.
Ich habe auch schon versucht mit initPage() bzw. initWidgets() weiterzukommen, denn damit wird die Seite neu ausgelesen (Devices gesammelt und widgets ebenfalls initialisiert)
Vielleicht kommst Du damit weiter, ich habe momentan wie gesagt auch noch keine Lösung.
Ist ja keine Anzeige, der Switch soll senden. Und vorm Senden wird das data Attribute device aus dem DOM gelesen. Eigentlich müsste es so gehen.
Ich probiere das dann mal ...
Wenn es nur um den set geht ja (Bist Du da sicher, denn es wird in meiner Version auf elem.data('device') zugegriffen) . Ich hatte angenommen, dass auch der Zustand richtig angezeigt werden sollte, da ein data-get angegeben war (und das wird ja nicht aus dem DOM sondern beim init... ausgelesen)
Dein SCRIPT muss ans Ende des Documents, zwischen </BODY> und </HTML>
Damit das Document schon gelesen wurde bevor das Skript ausgeführt wird. Weil sonst noch kein SELECT Element existiert, wo der 'change' Listener drangehangen werden könnte.
Im Header müsste der Code erst mit dem Document.Ready Event ausgeführt werden
<script>
$(document).ready(function() {
$( "select" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "#musicbox" ).data( "device",str );
})
.change();
});
</script>
Erst einmal vielen Dank an euch für das Interesse an meinem Problem.
Zusätzlichliche Info's:
Ziel meiner "Übung" sollte folgendes Szenrio werden. Ich habe eine Bedienungsoberfläche für die Bedienung meiner Squeezeboxen (SB) gebastelt. Da ich aber mehrere habe, möchte ich sie innerhalb eines widget-Rahmens steuern können. Der Kopf bekommt ein Pulldown-Menu, von dem aus alle SB angewählt werden können. In allen data-devices wird der vorhandene Name gegen den ausgewählten Namen mit jQuery ausgetauscht. Eine Oberfläche für alle SBn
Der <select>-Part hat folgendes aussehen:
<form >
<input class ="play" type="text" value ="Field 1">
<select class="play" name="sqb" size="1" onchange="player=(this.form.sqb.options[this.form.sqb.selectedIndex].value);">
<option value="SB3.Buero" selected="selected">SB3.Buero</option>
<option value="SBT.Buero">SBT.Buero</option>
<option value="SBiP.Eberhard">SBiP.Eberhard</option>
<option value="RX-V477">RX-V477</option>
<option value="SBN.Bad">SBN.Bad</option>
</select>
</form>Wie zu noch zu sehen ist, hatte ich auch versucht den ausgewählten Wert direkt in die Variable
player zu schreiben und dann im jQuery-Teil zu benutzen. Kein Erfolg. Einen Wert habe ich als selected bereits ausgewählt. Das wäre in den gezeigten Fall die
SB3.Büro. Setze ich die Vorauswahl auf einen anderen Wert, wird direkt beim ersten Aufruf das Gerät geändert. Ziel: Jedes Zimmer hat den gleichen Code, nur wird an unterschiedlichen Stellen
selected="selected" eingetragen.
@setstate: zu #1 Ob mit id class oder sonst wie. Die Auswahl und der Austauch ist korrekt, aber alle Zustandsabfragen und Befehle sind fehlerhaft. Auch die ursprünglich eingetragene SB3.Buero funktioniert nun nicht mehr.
zu #5:
ZitatIm Header müsste der Code erst mit dem Document.Ready Event ausgeführt werden
Das ist wohl richtig, bringt aber leider keine Veränderung.
@viegener: zu #2:
ZitatIch habe auch schon versucht mit initPage() bzw. initWidgets() weiterzukommen,
. Da meine Kenntnisse begrenzt sind, komme ich auch mit Deinen Hinweisen nicht weiter.
zu 4:
ZitatWenn es nur um den set geht ja (Bist Du da sicher, denn es wird in meiner Version auf elem.data('device') zugegriffen) . Ich hatte angenommen, dass auch der Zustand richtig angezeigt werden sollte, da ein data-get angegeben war (und das wird ja nicht aus dem DOM sondern beim init... ausgelesen)
Es geht nicht nur um set-Befehle. In der Oberfläche werden die widgets image, label, joinedlabel, switch, select, popup, multistatebutton und slider verwendet. Den switch hatte ich mir als Testobjekt herausgesucht. Für die Zustandsanzeige wäre wichtig, dass der aktuelle >Z>Ustand ausgelesen wird, wenn das Dok mit JQuery fertig ist. Das ist vmtl. ein weiteres Problem, welches nach dem set-Problem angepackt werden sollte, momentan lassen wir es mal außen vor.
Wenn ich über
<option value="SBN.Bad" selected="selected">SBN.Bad</option> von vornherein die
SBN.Bad "voreinstelle" werden die
Befehle auch dafür ausgesendet. Abfragen gehen überhaupt nicht.
Gruß Eberhard
Mein Beispiel von gestern funktioniert aber fürs Senden!
Das Umstellen beim Empfangen ist nicht so einfach, wie du dir das vorstellst. Die Widgets werden am Anfang initialisiert. D.h. alle Parameter die Readings sind und von FHEM kommen, gehen in eine Subscription-Liste und werden nur dann mit Daten gefüttert, wenn diese dem Widget zugeordnet sind. Wenn du alle data-device austauschst, musst du danach 'initWidgets(<area>);' rufen. <area> ist der Container, der die geänderten Widgets enthält, damit nicht die ganze Seite neu initialisiert wird.
Aber zuerst musst du sicher sein, dass alle data-devices richtg ausgetauscht wurden. Dazu setzt man sich console.log('mytext'); Zeilen in den entsprechenden Events, damit man sieht, ob der Basis-Code überhaupt funktioniert. Welchen Wert die data-* Attribute haben, sieht man auch schön im DOM-Inspektor.
Ich würde das aber alle etwas anders realisieren: Ich würde mit dem Swiper mir alle Player nebeneinander anzeigen und dann mit einem Wisch oder mit Pagebutton-oder Link das spezielle Element anwählen. Dann braucht an nix immer wieder neu zu initialisieren
Hallo setstate,
viel Marterial für viel Stunden testen und spielen. Ich werde mich wieder melden wenn ich durch bin oder aufgegeben haben. ;D ;D ;D
Danke ersteinmal!
Gruß Eberhard
Hallo setstate,
ich habe mich für Deinen Vorschlag entschieden.
Zitat von: setstate am 05 Mai 2016, 14:46:32
Ich würde das aber alle etwas anders realisieren: Ich würde mit dem Swiper mir alle Player nebeneinander anzeigen und dann mit einem Wisch oder mit Pagebutton-oder Link das spezielle Element anwählen. Dann braucht an nix immer wieder neu zu initialisieren
Das habe ich mal versucht: Drei Playersteuerungen neben einander gestellt und in swiper nach dem BASIC-Muster eingebunden. Größe des Fensters sollte 300px x 500px sein. dargestellt werden sollten drei Playersteuerungen in der Größe 482px x 275px.
Meine Fehlerliste:
Das widget slider und pop-up geht gar nicht mehr.
Von den drei Fenstern wird nur das erste angezeigt.
Der Ausschnitt des swipers gibt ja nur einen kleinen Ausschnitt des Ganzen frei. Deshalb geht das Pop-up im nicht sichtbaren Bereich auf. Die Positionsangaben wurden immer mit position:absolute angegeben worden.
Die drei Punkte haben ihre position irgendwo innerhalb des Rahmens.
Das Pull-down wird zwar angezeigt, hat aber keine Wirkung mehr.
Am rechten Rand fehlt eine breite von ca. 5px, obwohl links noch jede Menge Luft ist. (Kann ich das Fenster (Guckloch) verschieben?)
Am unteren Rand fehlen ebenfalls ca.3px obwohl nach oben Luft wäre.
Ehrlich gesagt weiß ich nicht wo ich anfangen soll.
Gruß Eberhard
Die Erläuterung in Github ist leider nicht gerade der Bringer... 8) 8)
Ich habe die Anregung auch mal bei mir umgesetzt (für Charts, aber das grundsätzliche Gerüst sollte passen), anbei mal ein Ausschnitt aus der Seite auf der das bei mir korrekt funktioniert. Allerdings nicht in einem popup (ich habe das direkt auf der Seite). Dis Auswahl erfolgt über ein select widget und das zugehörige Dummy-Device in FHEM.
<li data-row="1" data-col="2" data-sizex="10" data-sizey="4">
<header>Temperaturen</header>
<div class="cell wider inline">
<div data-type="label" class="inline wider">Sensor</div>
<div data-type="select" data-device="ftuiSelectSensor"
data-alias='["Aussen","Gaestebad","Wohnzimmer"]'
data-items='["temp_aussen","temp_gb","temp_wz"]'
data-get="copyState" data-set="" class="w3x" ></div>
<div></div>
</div>
<div data-type="swiper" data-height="400px" data-width="850px" data-get="copyState" data-device="ftuiSelectSensor"
data-states='["temp_aussen","temp_gb","temp_wz"]'
class="top-space-2x noswipe ">
<ul>
<li data-hash="temp_aussen">
<div data-type="label" class="large center">Aussen</div>
<div class="normal"
data-type="chart"
data-device="temp_aussen"
data-logdevice='["FileLog_temp_aussen"]'
data-columnspec='["4:temperature","4:humidity"]'
data-style='["ftui l2","ftui l6"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temp", "Hum"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="300px">
</div>
</li>
<li data-hash="temp_gb">
<div data-type="label" class="large center">Gästebad</div>
<div class="normal"
data-type="chart"
data-device="temp_gb"
data-logdevice='["FileLog_temp_gb"]'
data-columnspec='["4:temperature","4:humidity"]'
data-style='["ftui l2","ftui l6"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temp", "Hum"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="300px">
</div>
</li>
<li data-hash="temp_wz">
<div data-type="label" class="large center">Wohnzimmer</div>
<div class="normal"
data-type="chart"
data-device="temp_wz"
data-logdevice='["FileLog_temp_wz"]'
data-columnspec='["4:temperature","4:humidity"]'
data-style='["ftui l2","ftui l6"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temp", "Hum"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="300px">
</div>
</li>
</ul>
</div>
</li>
Sorry wenn die Einrückungen jetzt nicht passen, aber bei mir wird das auf dem Server automatisch für die vorhandenen Devices zusammengebaut.
Hinweise zu Deinen Fehlern:
- Ein popup ist mit dem Slider eigentlich nicht nötig, oder willst Du den slider explizit in einm Popup anzeigen?
Ein popup im Slider macht aus meiner Sicht nicht unbedingt Sinn.
- Die Position der Punkte ist üblicherweise ausserhalb des Sliders, möglicherweise passen die Grössen nicht zusammen.
- Die Positionen lassen sich weiterhin auch mit den narrow-CSS-Elementen anpassen
Vorschlag zum Anfangen lege mal eine Slider mit ganz simplen Inhalt an (z.B: jeweils nur ein Label) und bau die Umschaltung mit Select+Dummy-Device. Dann von da aus erweitern um die richtigen Controls, wenn das stimmt die genaue Grössen aussen oder innen anpassen.
@ Viegener: Ich werde mal so vorgehen wie Du empfliehlst.
Ein erklärendes Wort zum Pop-up. In dem swiper-Fenster soll meine Squeezeboxsteuerung je Raum laufen. Das Pop-Up ist nur für die Vergrößerung des Cover-Bildes zuständig. Alles andere macht wirklich keinen Sinn. Aber das sich öffnende Fenster hat offensichtlich nicht die hohe Priorität (z-index), um vor dem Guckloch angezeigt werden zu können.
Gruß Eberhard.
Dafür wartet schon ein Patch als pull Request im Github, glaube ich. Ich schaue gleich mal nach ...
@Viegener:
Ich habe mal das Grundgerüst nach Deinem Vorbild nachgebaut. Eine Frage: Die Select-Box oben dient zur Auswahl des Fensters, oder hat die andere Zwecke? Über die select-Box ein bestimmtes Item (von dreien) anzuspringen, klappt nicht. Ich verstehe auch nicht, warum das Device ftuiSelectSensor da ist?
Ich habe mal Deinen modifizierten Code mitgeliefert. Ich habe aber nur den <body>-Teil beigefügt. Meine widget_Base_width und ~height ist jeweils "60". Du dürftest nur eine weißen Rahmen sehen, in dem ein Name steht.
<body>
<div class="gridster">
<ul>
<!-- Content -->
<div class="container">
<li data-row="1" data-col="1" data-sizex="9" data-sizey="8">
<header>SB-Player</header>
<div class="cell wider inline">
<div data-type="label" class="inline wider"></div>
<div data-type="select" data-device="ftuiSelectSensor"
data-alias='["Küche","Wohnen","Büro"]'
data-items='["sb_Ku","sb_Wz","sb_Bu"]'
data-get="copyState" data-set="" class="w3x" ></div>
<div></div>
</div>
<div data-type="swiper" data-height="350px" data-width="536px" data-get="copyState" data-device="ftuiSelectSensor"
data-states='["sb_Ku","sb_Wz","sb_Bu"]'
class="noswipe">
<ul>
<li data-hash="sb_Ku">
<div
style= "width: 482px;
height: 275px;
border: 1px solid;
position:absolute;
top:31px;
left:26px;
margin: 0px;
background-image: url('images/squeezebox/wallpaper/fab4_sonata.png');" >
<div style = "font-size: 11px;
top: 219px;
left: 429px;
position: absolute;">Küche
</div>
</div>
</li>
<li data-hash="sb_Wz">
<div style= "width: 482px;
height: 275px;
border: 1px solid;
position:absolute;
top:31px;
left:26px;
margin: 0px;
background-image: url('images/squeezebox/wallpaper/fab4_sonata.png');" >
<div
style = "font-size: 11px;
top: 219px;
left: 429px;
position: absolute;">RX-V477
</div>
</div>
</li>
<li data-hash="sb_Bu">
<div
style= "width: 482px;
height: 275px;
border: 1px solid;
position:absolute;
top:31px;
left:26px;
margin: 0px;
background-image: url('images/squeezebox/wallpaper/fab4_sonata.png');" >
<div style = "font-size: 11px;
top: 219px;
left: 429px;
position: absolute;">PC-Buero
</div>
</div>
</li>
</ul>
</div>
</li>
</div>
</ul>
</div>
</body>
Geht es überhaupt, ein Gerät über select auszuwählen, welches dann im Swiper angezeigt wird?
Gruß Eberhard
Vielleicht nochmal generell zur Erklärung:
Es gibt keine direkte Verbindung zwischen dem select und dem swiper. Diese Verbindung findet über fhem statt und zwar mit dem dummy ftuiSelectSensor.
Ablauf:
1) Wenn man im Select einen neuen Wert einstellt, wird der state des dummy devices ftuiSelectSensor in fhem auf diesen Wert gesetzt.
2) In dem device habe ich ein userReading copyState, dass nur den Wert des Readings state kopiert
copyState { ReadingsVal("ftuiSelectSensor","state","");; }
3) Der geänderte copyState kommt wiederum in FTUI als Ereignis an
4) Die Änderung triggert eine Änderung des angezeigten Teiles im swiper (der ja auf denselben device/reading eingestellt ist)
(Das passiert indem der neue Wert mit dem Feld von Werten in data-states verglichen wird und der entsprechende index im Feld für das n-te Swiper-Element steht.
Den copyState habe ich eingeführt, da die Auswahl im select nicht immer ein update im swiper triggert und die Einführung eines getrennten Readings das zumindest verbessert hat
Ich denke da gibt es noch einen Fehler im FTUI --> Das führt dazu, dass (bei mir ?) die ersten 2-3 Selektionen nicht funktionieren, da wohl die Events noch nicht durchkommen?
Dem dummy ist es übrigens völlig egal welche texte im state stehen, ob das devicenamen oder Gemüsenamen sind ist irrelevant, da ein dummy ja wie der Name schon sagt weniger intelligent ist ;)
Das ist ja mal wirklich trickreich!! Aber es funktioniert. Klasse! + Danke für die Hilfe.
Zusatzfrage: Ich habe über data-hash nichts gefunden. Ist das ein Sprung-label?
Zitat von: FHEm2005 am 07 Mai 2016, 11:15:42
Das ist ja mal wirklich trickreich!! Aber es funktioniert. Klasse! + Danke für die Hilfe.
Zusatzfrage: Ich habe über data-hash nichts gefunden. Ist das ein Sprung-label?
Das mit den data-hashes ist ein Überbleibsel von Tests, die ich mit Java-script gemacht hatte, dabei wird bei einer Änderung der aktuellen Adresse (nach dem #) ein andere Swiper-Seite ausgewählt. Das kollidiert aber wohl mit den pagetabs, deshalb habe ich diesen Weg aufgegegeben.
Achso: um die data-hashes zu verwenden muss noch die class "hashnav" eingestellt sein. Ich habe das auch nur im Souce (und dann in einem Beispiel für den swiper) gefunden.
ichhabe nirgendwo die Klasse "hashnav" das Attribut kann ich demnach löschen?
Ja, im Sourcecode wird nur über die Reihenfolge in data-states der richtige Inhalt angesteuert
Jetzt habe ich ein "gerüttelt Maß" an FTUI gelernt. Danke für die Extra-Stunde!
Kein Problem! setstates-Hinweis hat bei mir ja auch erst den Anstoss gegeben...
Ich habe jetzt meine(n) Player integriert - einfach Top. Die Fehlerliste ist abgearbeitet und alles funktioniert - alles? Nein ein kleiner Fehler ist noch da und kämpft um sein Daseion :D. Genau! Das PopUp:
Zitat von: setstate am 06 Mai 2016, 18:38:50
Dafür wartet schon ein Patch als pull Request im Github, glaube ich. Ich schaue gleich mal nach ...
Gibt es da was Neues? Ich habe keine Ahnung was ein Pull Request ist.
Gruß Eberhard
Mein Pull Request betraf das fehlende X (zum schließen) wenn ein swiper in einem Popup definiert ist.
Zitat von: FHEm2005 am 07 Mai 2016, 14:52:45
Gibt es da was Neues? Ich habe keine Ahnung was ein Pull Request ist.
Gruß Eberhard
Ein pull-request ist die Änderung von jemand anders am sourcecode, der sie dem Entwickler zur Übernahme in github bereitstellt. Also quasi ein patch den jemand gemacht hat und der darauf wartet, vom Entwickler in den "offiziellen" Teil übernommen zu werden.
Das hätt google aber vermutlich besser als ich erklären können ;)
Es war aber augenscheinlich ein Patch für ein anderes Problem.
Wie kann ich das bei mir nachstellen? Leere Seite, ein Swiper und auf eine beliebige Sektion ein Popup setzen? Das Öffnen des Popup klappt dann nicht? Es verbleibt im Hintergrund?
1. Erkenntnis:
Das Popup "lebt" nur innerhalb der Swiper Container, hat aber einen Left und Top Abstand für die Mitte der Seite. Deshalb ist es nicht im sichtbaren Bereich.
2. Lösungsansatz:
Man müsste das Dialog-Element an seiner Position ablösen und neu an BODY anfügen, damit es mittig der Seite aufpoppen kann. Auf den ersten Blick ist das die Lösung, funktioniert auch auf meiner reparierten Testseite. Vielleicht sollte man noch die Option haben, wo es erscheinen soll. Es wäre bestimmt auch manchmal gewünscht, ein Popup ganz oben oder ganz unten erscheinen zu lassen.
Zum Nachtesten: im widget_popup.js das nach Zeile 91 einfügen
91 if (dialog && close && starter){
92 dialog.detach();
93 $('body').append(dialog);
Hier der Code:
<header>SB-Player</header>
<div class="cell inline">
<div data-type="label" class="inline wider"></div>
<div data-type="select" data-device="ftuiSelectSB"
data-alias='["Küche","Bad","Wohnen","Büro","iPhone-Eberhard"]'
data-items='["sb_Ku","sb_Bad","sb_Wz","sb_Bu","sb_iPE"]'
data-get="copyState" data-set="" class="w3x" ></div>
</div>
<div data-type="swiper" data-height="350px" data-width="536px" data-get="copyState" data-device="ftuiSelectSB"
data-states='["sb_Ku","sb_Bad","sb_Wz","sb_Bu","sb_iPE"]' >
<ul>
<li>
<div style= "width: 482px;
height: 275px;
border: 1px solid;
position:absolute;
top:31px;
left:26px;
margin: 0px;
background-image: url('images/squeezebox/wallpaper/fab4_allegro.png');" >
<!-- Coverart -->
<div data-type="popup"
data-height="500px"
data-width="500px"
style="position:absolute;
top: 47px !important;
left: 0px !important;"> -->
<div class="left "
data-type="image"
style = "margin: 0px 10px 0px 5px;
position:absolute;
top:48px;
left:2px;
cursor:pointer;
background-color:none;"
data-device="SB3.Buero"
data-get="coverarturl"
data-size="100%"
data-height="182px"
data-width="182px"
data-opacity = "1" >
</div>
<div class="dialog" style="border: 1px solid;">
<div data-type="image" style = "margin: 0px;
background-color:none;"
data-device="SB3.Buero"
data-get="coverarturl"
data-size="100%"
data-height="495px"
data-width="498px"
data-opacity = "1"
class="left" >
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Dies ist ein Auszug aus meinem Code zum Nachstellen.
Gruß Eberhard
Ich habe die Änderung jetzt so eingecheckt. Das Popup bleibt jetzt auch auf einem Swiper positioniert sichtbar.
Optional kann man die Bildschirmposition mit data-left und data-top in px oder % festlegen. Ansonsten ist es mittig angeordnet.
ZitatIch habe die Änderung jetzt so eingecheckt.
Tut mir leid zu fragen: wo find ich die Änderung? Im widget_swiper.js vermutlich und der ist mit einem update aktualisierbar?
Danke für das Einarbeiten.
Gruß Eberhard
Sorry, ich wollte es noch vermerken :-(
Siehe meine Signatur, der erste Update Befehl. Einfach in die Fhem Web commandline eingeben und enger drücken.
Zitat von: setstate am 08 Mai 2016, 11:34:46
Sorry, ich wollte es noch vermerken :-(
Siehe meine Signatur, der erste Update Befehl. Einfach in die Fhem Web commandline eingeben und enger drücken.
Hallo setstate,
ich habe gerade deinen letzten Stand einschließlich popup rausgeholt. Bei mir kommt das Layout durcheinander und die caption vom popup fehlt.
Wenn ich diese Zeilen auskommentiere ist alle wieder in Ordnung.
Zeile 92,93:
dialog.detach();
$('body').append(dialog);
Muss ich bei mir Anpassungen machen?
<div class="dialog">
<header>Küche</header>
<div data-type="spinner"
data-device="EG_WZ_RT"
data-min="10"
data-max="30"
data-unit="°"
data-get="desired-temp"
data-set="desired-temp"
data-on="100"
data-off="0"
class="value">
</div>
</div>
Bild: Oben ist mit deiner Änderung, unten sind die beiden Zeilen auskommentiert.
@setstate
Ich konnte leider erst heute das Pop-Up im Swiper testen. Bis auf eine Kleinigkeit ist alles ok: Wenn das Pop-up größer ist als das swiper-Widget wird der "Überlauf" abgeschnitten und ist nicht mehr sichtbar. Das geschieht auch bei normalen Popups, bei denen versucht wird sie in der Bildschirmmitte zu positionieren und damit das swiper-Widget verlassen.
Ich habe dunkel im Kopf, dass das Pop-up positionierbar geworden ist. Ich finde den Hinweis zum Verrecken nicht mehr, oder war ein Wunsch der Vater des Gedankens?
Gruß Eberhard
Edit: Ich habe das Gefühl, dass das Popup Fenster abgeblendet ist? Da ich nicht alles sehe kann ich auch falsch liegen.
Zitat von: FHEm2005 am 16 Mai 2016, 12:40:05
@setstate
Ich konnte leider erst heute das Pop-Up im Swiper testen. Bis auf eine Kleinigkeit ist alles ok: Wenn das Pop-up größer ist als das swiper-Widget wird der "Überlauf" abgeschnitten und ist nicht mehr sichtbar. Das geschieht auch bei normalen Popups, bei denen versucht wird sie in der Bildschirmmitte zu positionieren und damit das swiper-Widget verlassen.
Ich habe dunkel im Kopf, dass das Pop-up positionierbar geworden ist. Ich finde den Hinweis zum Verrecken nicht mehr, oder war ein Wunsch der Vater des Gedankens?
Gruß Eberhard
Hallo Eberhard,
hast du nicht die Layout-Veränderungen im Popup die ich beschrieben habe?
Gruß
Michael
Hallo Michael,
ich habe extra noch ein Update der eval-Version gemacht, um die neueste Version zu haben. Ich habe nichts verändert. Meine Umgebung ist Windows Vista (das ist ja mal noch ein Schätrzchen 8) 8) 8) ) mit Firefox.
Auf meinem Anrdoid-Tablet mit FULLY hatte ich für eine halbe Stunde mal ein Bildelement verschoben, das ist aber jetzt auch wieder weg.
Obwohl in meinem Swiper richtig viele Elemente ( 6 swiper, je ca. 20 Elementen) sind, habe ich (bis jetzt) nirgendwo Probleme - abgesehen von den aufgeführten Teilen - bemerken können.
In dem Pop-ups habe ich - soweitich sie sehen kann - keine Verschiebungen gesehen.
Gruß Eberhard
Wenn jetzt das Popup immer ausserhalb vom Gridster aufgehangen ist, musste CSS-mässig auch noch einiges beachtet werden, damit alles wieder wie gewohnt mittig angeordnet wird. Ist jetzt gefixed.
Die Position des Popup kann man mit data-left und data-top vorgeben:
<div data-type="popup" data-height="300px" data-width="400px"
data-left="100px">
<div>open me</div>
<div class="dialog">
<header>BAD</header>
<div>Heizung</div>
<div data-type="spinner"
data-device="BadHeizung_Clima"
data-min="10"
data-max="30"
data-unit="°"
data-get="desired-temp"
data-set="desired-temp"
data-on="100"
data-off="0"
class="value centered">
</div>
<div data-type="label"
data-device="BadHeizung_Clima"
data-min="10"
data-max="30"
data-unit="°"
data-get="measured-temp">
</div>
</div>
</div>
Wow! das ist ja richtig flott! Vielen Dank. Ab Morgen im Update?
Gruß Eberhard
Zitat von: setstate am 16 Mai 2016, 13:36:26
Wenn jetzt das Popup immer ausserhalb vom Gridster aufgehangen ist, musste CSS-mässig auch noch einiges beachtet werden, damit alles wieder wie gewohnt mittig angeordnet wird. Ist jetzt gefixed.
Die Position des Popup kann man mit data-left und data-top vorgeben:
.....
Hallo setstate,
muss ich jetzt bei jedem Widget im popup Anpassungen machen?
Nach deiner Änderung von gerade ist der Effekt bei mir immer noch vorhanden.
Es sieht so aus, als wenn durch das Umhängen an "body" die relative Koordinaten nicht mehr passen.
Es rutscht alles ein wenig nach links.
Gruß Michael
Hallo setstate,
Zitat
Wenn jetzt das Popup immer ausserhalb vom Gridster aufgehangen ist, musste CSS-mässig auch noch einiges beachtet werden, damit alles wieder wie gewohnt mittig angeordnet wird. Ist jetzt gefixed.
Die Position des Popup kann man mit data-left und data-top vorgeben:
nach einem Update funktioniert weder das eine, noch das andere bei mir. :'( :'( Ein Updateversuch zeigt mir "nothing to do..." Das Pop-Up-Fenster wird nach wie vor in der Fenstermitte dargestellt, und die eingegebenen top und left-Werte haben keine Auswirkung, das zeigt der FF-Inspektor. Die Top und left-Werte ändern sich nur bei einer Größenänderung des Fensters. Außerdem wird das Pop-Up Fenster wirklich mit dem shade überdeckt. In der widget-popup.js (Zeile 114) wird in einer Zeile auf die Klasse 'noshade' geprüft, die ich aber in der fhem-tablet-ui.css nicht gefunden habe. Muss ich dennoch die Klasse 'noshade' hinzufügen?
Zur Info Mein Coverart-Element sieht wie folgt aus:
<!-- Coverart -->
<div data-type = "popup"
data-height = "500px"
data-width = "500px"
data-left = "10px"
data-top = "10px"
style="position:relative;
top: 47px !important;
left: 0px !important;">
<div class="left"
data-type="image"
style = "margin: 0px 10px 0px 5px;
background-color:none;"
data-device="SB3.Buero"
data-get="coverarturl"
data-size="100%"
data-height="182px"
data-width="182px"
data-opacity = "1" >
</div>
<div class="dialog " style="border: 1px solid;">
<div data-type="image" style = "margin: 0px;
background-color:none;"
data-device="SB3.Buero"
data-get="coverarturl"
data-size="100%"
data-height="495px"
data-width="498px"
data-opacity = "1"
class="left" >
</div>
</div>
</div> Die zusätzlich vorhandenen Positionsangaben sind für die pixelgenauen Position dieser Elemente erforderlich. Da ist ja sonst nix Aufregendes drin.
Gruß Eberhard
Habe es gerade noch einmal bei mir getestet, inkl. update all: Popup auf Swiper -> ohne Probleme und startet auch ganz links.
Da musst du deine Files mal überprüfen, ob die wirklich neu geholt wurden.
https://github.com/knowthelist/fhem-tablet-ui/blob/eval/www/tablet_eval/js/widget_popup.js
Danke für die Datei!
Gruß Eberhard
Edit:
Es funktioniert, nachdem ich alles nochmal neu gemacht habe. Einige Elemente sind noch verschoben, habe aber noch ein paar Bilder nicht in den entsprechenden Verzeichissen.