FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Tobias am 21 Juli 2016, 10:30:47

Titel: Fehler in IMAGE Widget??
Beitrag von: Tobias am 21 Juli 2016, 10:30:47
Hi,
auf einer Seite habe ich mit fixer Positionsangabe mehrere Widgets verteilt. Funktioniert super.
Problem bereitet das Image Widget. Definiere ich mehrere davon, werden alle kaskadierend/hierarchisch aufgebaut. Bei allen anderen nicht.
Achso, Ich arbeite mit FTUI 2.2!

FTUI 2.2 Angabe:        <div id="RLMPF1"
          data-type="image"
          style="position:fixed;top:259px;left:250px"
          data-device="Vitosolic_200"
          data-path="images/"
          data-get="Umschalt_Ruecklauf_ohne_Pufferspeicher_image"
          data-width="370px"
          data-height="7px"
        </div>

        <div id="RLMPF2"
          data-type="image"
          style="position:fixed;top:451px;left:285px"
          data-device="Vitosolic_200"
          data-path="images/"
          data-get="Umschalt_Ruecklauf_ohne_Pufferspeicher_image"
          data-width="260px"
          data-height="7px"
          class="rotate-180"
        </div>

        <div id="RLOPF1"
          data-type="image"
          style="position:fixed;top:0px;left:0px"
          data-device="Vitosolic_200"
          data-path="images/"
          data-get="Umschalt_Ruecklauf_ueber_Pufferspeicher_image"
          data-width="370px"
          data-height="7px"
        </div>


Im HTML sieht es so aus:<div id="RLMPF1" data-type="image" style="position:fixed;top:259px;left:250px" data-device="Vitosolic_200" data-path="images/" data-get="Umschalt_Ruecklauf_ohne_Pufferspeicher_image" data-width="370px" data-height="7px" <="" div="">

        <div id="RLMPF2" data-type="image" style="position:fixed;top:451px;left:285px" data-device="Vitosolic_200" data-path="images/" data-get="Umschalt_Ruecklauf_ohne_Pufferspeicher_image" data-width="260px" data-height="7px" class="rotate-180" <="" div="">

        <div id="RLOPF1" data-type="image" style="position:fixed;top:0px;left:0px" data-device="Vitosolic_200" data-path="images/" data-get="Umschalt_Ruecklauf_ueber_Pufferspeicher_image" data-width="370px" data-height="7px" <="" div="">

        <img src="images/bar_green_150.gif" style="opacity: 0.8; height: 7px; width: 370px; max-width: 50%;" alt="img">
      </div>
      <img src="images/blank.png" style="opacity: 0.8; height: 7px; width: 260px; max-width: 50%;" alt="img">
    </div>
    <img src="images/blank.png" style="opacity: 0.8; height: 7px; width: 370px; max-width: 50%;" alt="img">
</div>


Sollte es nicht so aussehen??<div id="RLMPF1" data-type="image" style="position:fixed;top:259px;left:250px" data-device="Vitosolic_200" data-path="images/" data-get="Umschalt_Ruecklauf_ohne_Pufferspeicher_image" data-width="370px" data-height="7px">
<img src="images/bar_green_150.gif" style="opacity: 0.8; height: 7px; width: 370px; max-width: 50%;" alt="img">
</div>

<div id="RLMPF2" data-type="image" style="position:fixed;top:451px;left:285px" data-device="Vitosolic_200" data-path="images/" data-get="Umschalt_Ruecklauf_ohne_Pufferspeicher_image" data-width="260px" data-height="7px" class="rotate-180">
<img src="images/blank.png" style="opacity: 0.8; height: 7px; width: 260px; max-width: 50%;" alt="img">
</div>

<div id="RLOPF1" data-type="image" style="position:fixed;top:0px;left:0px" data-device="Vitosolic_200" data-path="images/" data-get="Umschalt_Ruecklauf_ueber_Pufferspeicher_image" data-width="370px" data-height="7px">
<img src="images/blank.png" style="opacity: 0.8; height: 7px; width: 370px; max-width: 50%;" alt="img">
</div>


Ich sehe 2 anomalien:
1. Was ist das ?? <="" div="">
2. die img tag gehörien in den jeweiligen div Container. Jeder ist abgeschlossen und enthält nicht den nächsten ;)

Folge ist, meine ganzen Images sind auf der seite "irgendwo", die Positionsangaben passen durch die Kaskadierung überhaupt nicht mehr :(
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: Tobias am 25 Juli 2016, 07:36:28
Hi,
kann das wer bestätigen? Oder hab ich irgendwo einen Bock in meiner Config?
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: Tobias am 25 Juli 2016, 10:01:33
Erledigt.. Das Problem saß wieder einmal 60cm vor dem Bildschirm.
Habe die End-Tags der einleitenden Divs vergessen :(

        <div id="RLMPF2"
          data-type="image"
          style="position:fixed;top:451px;left:285px"
          data-device="Vitosolic_200"
          data-path="images/"
          data-get="Umschalt_Ruecklauf_ohne_Pufferspeicher_image"
          data-width="260px"
          data-height="7px"
          class="rotate-180">
        </div>
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: ext23 am 21 Oktober 2016, 16:09:09
Ich hab auch ein Problem mit dem Image, bei mir funktioniert der Refresh nicht. Weder per default (900) noch wenn ich es angebe. Sitzt das Problem bei mir auch 60cm vor der Glotze?

<div data-type="image"
data-size="90%"
data-url="http://niederschlagsradar.de/images.aspx?srt=loopvorhersage&jaar=-3&regio=homepage&tijdid=&m=&d=&uhr=&mi="
data-refresh="180"
class="top-space">
</div>
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: ext23 am 22 Oktober 2016, 14:30:34
Kann das jemand verifizieren? Ich hab jetzt schon unterschiedliche Browser verwendet und nochmals ein Update von TabletUI gemacht, aber ich bekomme den Refresh leider nicht zum laufen.

Gruß
Daniel
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: Ulm32b am 23 Oktober 2016, 02:46:14
Ich kann das Problem (Image Refresh ohne Funktion) bestätigen, habe leider auch keine Antwort und hoffe auf höheren Rat.

Gruß
Ulm32b
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: ext23 am 23 Oktober 2016, 09:56:36
Mhh OK, steht leider nicht der Name des Entwicklers im JavaScript.

Dafür aber folgender Kommentar "//3rd party source refresh"

Nagut, vielleicht findet sich ja noch jemand der mal drüber schauen kann, ich bin leider Java-blond.

/Daniel
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: setstate am 23 Oktober 2016, 10:38:53
Ich kann kein Problem beim Refresh sehen.
Wenn ich in Zeile 69 ein Log einbaue, sehe ich immer pünktlich den Aufruf.
Ob das aber bei eurer "...images.aspx" zum Holen eines neues Image führt, kann ich nicht versichern. Da ist noch Server-Logik dahinter, es ist kein direkter Image aufruf. Evtl. müsste man die URL-Parameter optimieren.

Edit
Es kann aber auch am Cache liegen. Klappt es mit class="nocache" besser ?
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: ext23 am 23 Oktober 2016, 11:33:56
OK an dem Cache könnte es liegen, an der ASP Datei nicht, weil es läuft auch mit statischen Bildern nicht.

Ich probiere es mal aus.
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: ext23 am 23 Oktober 2016, 12:14:39
Super, lag wirklich am nocache, interessant nur, dass ich das oben schon im Seiten META deaktiviert hatte.
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: Tabularasa am 03 November 2016, 20:36:01
Hallo. Gibt es denn eine Möglichkeit beim Klick auf das Image (QR Code)ein Popup zu öffnen und es vergrößert darzustellen? Weil es schwierig ist auf dem tablet zu scannen. Ich weiß zwar das es ein Popupwidget gibt, jedoch nicht wie ich es einsetzten soll. Habe mal meinen bisherigen Code zum ergänzen :-) angefügt. Danke

<header><div data-type="label" class="large">WLAN Gast</div></header>
<div data-type="switch" data-device="FritzBox" data-icon="oa-it_router" data-get="box_guestWlan" data-set-on="guestWlan on" data-set-off="guestWlan off" class="cell top-space"></div>
<div data-type="label" class="top-space">Zugangscode</div>
<div data-type="image" data-url="./images/Guest_QR.png" data-size="100%" class="cell"></div>
Titel: Antw:Fehler in IMAGE Widget??
Beitrag von: setstate am 03 November 2016, 21:01:44
Die Basisstruktur für ein Popup sieht so aus


<div data-type="popup" data-height="150px" data-width="250px">
  <div><!-- click object to open the popup --></div>
  <div class="dialog">
  <header>DIALOG</header>
  <div><!-- widget(s) inside the popup dialog --></div>
  </div>
</div>


Hier setzt du nur noch deine Bilder ein


   <div data-type="popup" data-height="150px" data-width="250px">
     <div><div data-type="image" data-url="./images/Guest_QR.png" data-size="10%" ></div></div>
     <div class="dialog">
             <header>DIALOG</header>
             <div><div data-type="image" data-url="./images/Guest_QR.png" data-size="50%" ></div></div>
     </div>
   </div>