Ankündigung

Einklappen
Keine Ankündigung bisher.

POPUPS in V2.9

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

    POPUPS in V2.9

    Hallo,

    ich bin gerade dabei von 2.8 auf 2.9 umzusteigen.
    Leider geht das nicht ganz so einfach wie gedacht, die Popups funktionieren nicht mehr gleich wie bei 2.8.
    Muss ich da auch was ändern oder woran kann das liegen? Habe nur ich dieses "Problem"?

    Ich habe bei V2.8 auch ein Popup im Popup (Einkaufsliste) das funktioniert auch nicht in V2.9. https://forum.fhem.de/Smileys/default/sad.gif
    Anbei zwei Videos um mein Problem zu verdeutlichen.

    V2.8 >> https://youtu.be/ERfxTq36WrY
    V2.9 >> https://youtu.be/XDyEnEWX0Ks



    LG, DANKE
    KOAL

    #2
    Ich bin auch gerade dabei von 2.7 auf 2.9 umzusteigen. Ich habe das selbe Problem mit Popups für die USZU, die nicht mehr funktionieren.
    Falls jemand einen Tipp hat wäre ich sehr dankbar.

    VG
    Greg

    Kommentar


      #3
      Für den Umzug der UZSU beinhaltet das Forum genügend Lösungen. Bitte such einfach mal danach. Die UZSU Widgets funktionieren bestens. Man muss die UZSU-spezifischen Dateien löschen, die man damals ins Verzeichnis der eigenen Seiten kopiert hatte. Am besten ist es eh, ein ganz neues smartVISU-Verzeichnis zu erstellen, den Ordner ./pages/_templates in ein neues Verzeichnis ./pages/<DeineSeiten> zu kopieren und dann nur die HTMLs für die einzelnen Räume und die Navigation aus der alten SV dort hinein zu kopieren.

      Das Problem mit dem Dialog-Status bei den Popups ist mir schon einmal begegnet. Das muss ich mir näher ansehen.

      Bitte denkt daran, dass einige Widgets veraltet sind und in der nächsten Version gelöscht werden. Es ist Zeit, diese zu ersetzen. Der Template Checker hilft Euch dabei.

      Gruß Wolfram

      Kommentar


        #4
        KOAL,
        schau mal, ob Dich das hier weiter bringt. Wichtig ist, dass bei den Popups keine IDs doppelt vorkommen.
        zudem enthält v2.9 auch neue Popup-Widgets. Siehe dazu die Inline Doku.

        Gruß
        Wolfram

        Kommentar


          #5

          Hallo Wolfram,

          danke für die Antwort, leider verstehe ich den Lösungsansatz nicht ganz.
          Reason:
          at the start of smartVISU, index.php calls index.html in the pages/<yourpath> folder which then includes
          the starting page (here: overview/eg.html). If the footer menu calls index.php?page=overview/eg.html again,
          some data get lost resulting in a faulty reaction at the next call of a popup:
          site address is displayed as "index.php?page=overview/eg.html#&ui-state-dialog" but no popup is shown.

          Calling index.php with no arguments from the footer menu solves the problem. >>Wie geht das?🤔


          Sorry für die blöde Frage.
          ID's sind alle eindeutig, und wenn ich eine Vorlage aus der Inline Doku kopiere habe ich das selbe Problem.


          LG
          KOAL

          Kommentar


            #6
            UPDATE,

            Ich habe nun in der "menu.html" ein "codepad" eingefügt und habe damit genau die gleiche Situation, sobald man die Seite wechselt geht das Codeeingabefeld nicht mehr.

            Mein Code:
            PHP-Code:
            **
            Alarmalage
            *
            */
            <
            div class="codepad" data-bind='ALARM-PAD' >
            {{ 
            basic.stateswitch('''Hm_Alarmanlage_EIN.sw''icon', [0,1], ['icons/alarm/Alarm_extern_off.svg''icons/alarm/Alarm_extern_on.svg']) }}
            {{ 
            basic.stateswitch('''Hm_Alarmanlage_NACHT.sw''icon', [0,1], ['icons/alarm/Alarm_intern_off.svg''icons/alarm/Alarm_intern_on.svg']) }}
            {{ 
            basic.stateswitch('''Hm_Alarmanlage_AUS.sw''icon', [0,1], ['icons/alarm/Alarm_aus.svg''icons/alarm/Alarm_aus.svg']) }}
            </
            div>
            {{ 
            device.codepad('ALARM-PAD','1234') }} 


            PHP-Code:
            /**
            * SYSTEMMENU (AUSKLAPPMENU)
            *
            */

            <a href="#SYSTEMMENU" class="icon1" data-rel="popup">
            <
            img class="icon icon1" src="icons/koal/gear.svg" }}/></a>

            <
            div id="SYSTEMMENU" data-role="popup" style="width:320px; height:250px;">
            <
            a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

            <
            br>
            <
            a href="#Einkaufsliste" class="icon1" data-rel="popup">
            <
            img class="icon icon1" src="icons/koal/sell.svg" }}> Die Einkaufsliste...</a>

            <
            div id="Einkaufsliste" data-role="popup" style="width:350px; height:470px;">
            <
            a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            Inhalt der Einkaufsliste...
            <
            br>
            <
            br>
            {{ 
            basic.print('shop1''Hm_Einkaufsliste_Artikel_1.sw''BETRIEB''') }}
            {{ 
            basic.print('shop2''Hm_Einkaufsliste_Artikel_2.sw''BETRIEB''') }}
            {{ 
            basic.print('shop3''Hm_Einkaufsliste_Artikel_3.sw''BETRIEB''') }}
            {{ 
            basic.print('shop4''Hm_Einkaufsliste_Artikel_4.sw''BETRIEB''') }}
            {{ 
            basic.print('shop5''Hm_Einkaufsliste_Artikel_5.sw''BETRIEB''') }}
            {{ 
            basic.print('shop6''Hm_Einkaufsliste_Artikel_6.sw''BETRIEB''') }}
            {{ 
            basic.print('shop7''Hm_Einkaufsliste_Artikel_7.sw''BETRIEB''') }}
            {{ 
            basic.print('shop8''Hm_Einkaufsliste_Artikel_8.sw''BETRIEB''') }}
            {{ 
            basic.print('shop9''Hm_Einkaufsliste_Artikel_9.sw''BETRIEB''') }}
            {{ 
            basic.print('shop10''Hm_Einkaufsliste_Artikel_10.sw''BETRIEB''') }}
            {{ 
            basic.print('shop11''Hm_Einkaufsliste_Artikel_11.sw''BETRIEB''') }}
            {{ 
            basic.print('shop12''Hm_Einkaufsliste_Artikel_12.sw''BETRIEB''') }}
            {{ 
            basic.print('shop13''Hm_Einkaufsliste_Artikel_13.sw''BETRIEB''') }}
            {{ 
            basic.print('shop14''Hm_Einkaufsliste_Artikel_14.sw''BETRIEB''') }}
            {{ 
            basic.print('shop15''Hm_Einkaufsliste_Artikel_15.sw''BETRIEB''') }}
            {{ 
            basic.print('shop16''Hm_Einkaufsliste_Artikel_16.sw''BETRIEB''') }}
            {{ 
            basic.print('shop17''Hm_Einkaufsliste_Artikel_17.sw''BETRIEB''') }}
            {{ 
            basic.print('shop18''Hm_Einkaufsliste_Artikel_18.sw''BETRIEB''') }}
            {{ 
            basic.print('shop19''Hm_Einkaufsliste_Artikel_19.sw''BETRIEB''') }}
            {{ 
            basic.print('shop20''Hm_Einkaufsliste_Artikel_20.sw''BETRIEB''') }}
            <
            br>
            </
            div>
            <
            br>
            <
            class="icon1" href="index.php?page=99_Wetter">
            <
            img class="icon" src="icons/wetter/wetter_aktuell.svg" alt="Wetter"Das Wetter...</a>
            <
            br>
            <
            a id="menu-system" class="icon1" href="index.php?page=99_Kalender">
            <
            img class="icon" src="icons/koal/gear.svg" /> Der Kalender...
            </
            a>
            <
            br>
            <
            a id="menu-system" class="icon1" href="index.php?page=config">
            <
            img class="icon" src="icons/koal/gear.svg" /> Die Systemeinstellungen...
            </
            a>
            </
            div



            LG
            KOAL

            Kommentar


              #7
              Hinweis aus dem verlinkten Post war, dass es geholfen hat, die ids an die Seite zu binden, z.B.
              Code:
              id="{{page}}-popupMenu"
              Die Beispiele waren aus example3.graphic und sind nicht 1:1 zu übertragen. Dort war es so, dass die Index.html nur ein include auf die eigentliche Startseite eg.html enthielt. Dies führte zu Problemen mit den ids.

              Wenn Du nicht weiter kommst, kannst Du mir per PN einen Link auf Deine Seiten schicken.

              Gruß
              ​​​​​​​Wolfram

              Kommentar


                #8
                Hi,

                danke, werde morgen noch etwas schauen(heute verstehe ich nichtmehr wo das [id="{{page}}-popupMenu"] hingehören könnte, aber wenn nichts geht dann senden ich dir gerne den smartvisu Ordner oder was du brauchst,

                Was ich noch bemerkt habe:
                Wenn man jetzt ein Popup oder Codepanel öffnet kommt noch ein zweiter "unschöner" Scrollbalken


                LG
                KOAL
                Angehängte Dateien

                Kommentar


                  #9
                  HI,

                  ich habe jetzt alle Seiten 2.9 tauglich gemacht, und diverse Änderungen durchgeführt. Aber an dem Problem ändert es nichts.
                  Ich habe das db_Plot Widget aktiv, das mag er nicht so gern und deswegen sind die Seiten wo es aktiv ist "orange" alles andere ist "grün", sollte passen.
                  Bis auf eine Meldung "Masteritem file is missing" >>keine Ahnung was das ist.

                  @Wolfram: Brauchst du Zugriff auf mein System (TeamViewer?), oder reicht der Ordner "smartvisu" vom System?



                  LG
                  KOAL
                  Angehängte Dateien

                  Kommentar


                    #10
                    Hi KOAL,

                    Mit dem Masteritemfile kann der Template checker auch die item-Typen prüfen. Vor allem braucht aber der neue Assistent „Widget Constructor“ das File. Wie das erzeugt wird, steht im Ordner ./lib/widget_constructor in der readme. ShNG wird das künftig automatisch bereitstellen.

                    Das db_plot Widget kenne ich nicht. Die in SV integrierten plot Widgets sind auf jeden Fall einen Versuch wert. Zudem werde ich in der develop Version (die Du ja bereits verwendest) demnächst die Unterstützung für die nicht jQuery mobile basierten Widgets abschalten.

                    Zum Nachstellen des Fehlers würde ich eine Kopie Deines gesamten smartvisu-Ordners bei mir auf dem Testsystem installieren. Am besten schickst Du mir per PN einen Link auf einen Cloudspeicher, wo ich mir die Files ziehen kann.

                    Gruß
                    Wolfram

                    Kommentar


                      #11
                      Hi,

                      vielen dank für deine Hilfe.
                      PN mit Link zur meiner Visu ist unterwegs.

                      Ich verwende das DP_PLOT weil ich damit auf die Datenbank zugreifen kann, hab es mit dem internen PLOT nie geschafft, aber werde mir das ansehen wenn das der Fehler ist.
                      DP_PLOT : https://github.com/ToGe3688/db_plot_widget



                      LG
                      KOAL

                      Kommentar


                        #12
                        Die Seiten enthalten Popups, die in die menu.html und in die rooms_menu.html integriert sind, welche wiederum in alle Seiten integriert („included“) werden. Hier hilft es, die id der Popups eindeutig zu machen:
                        Code:
                        /**hier der Link zum Popup */
                        <a href="#{{page}}-DeinPopup" data-rel="popup" ...>DeinText</a>
                        ...
                        /** hier der Code für das Popup */
                        <div data-role="popup" id="{{page}}-DeinPopup" ....>
                        Leider habe ich dann in der Doku für Popups in jQuery mobile den Hinweis entdeckt, dass geschachtelte Popups verboten sind. Ein Popup in einem Popup macht einfach gar nichts. Das Thema trieb mich schon seit einem Jahr um. Also Danke für die Frage hier im Forum, die mich nochmal auf die Suche geschickt hat.

                        Interessant ist der Hinweis auf den workaround. Vielleicht lässt sich daraus ja etwas machen. Man dürfte das allerdings nicht an das allgemeine Schließen des Popups binden, sondern an die Betätigung eines einzelnen Elements...

                        Gruß
                        Wolfram

                        Kommentar


                          #13
                          Danke für deine Hilfe,

                          mit dem Code oben funktionieren die normalen Popups wieder wie in V2.8, das mit dem Popup im Popup werde ich erstmal deaktivieren.
                          Wenn jemand noch eine Idee hat dann bin ich gerne bereit zu testen. DANKE



                          LG
                          KOAL

                          Kommentar


                            #14
                            Zur Dokumentation und nachdem ich die jQuery mobile Doku zum Seitenaufbau gelesen habe, hier nochmal ein paar Hinweise.

                            Mit dem Wechsel von smartVISU v2.8 auf v2.9 wurde auf jQuery mobile als Plattform für die Seitensteuerung umgestellt. Dadurch kommt es neben dem anderen Handling von Widgets und leichten Veränderungen bei den Visu-Elementen zu dem geänderten Verhalten bei den Popups.

                            Generell funktionieren Popups innerhalb von Visu-Seiten einwandfrei, wenn eindeutige IDs vergeben werden. Die Widgets, die Popups verwenden (UZSU, Codepad), haben dies integriert.

                            Schwierig wird es, wenn Popups innerhalb von Bausteinen verwendet werden, die in mehrere Visuseiten mit „include“ eingebunden werden. Die Twig Template Engine setzt den Code einfach 1:1 in das html-Dokument ein (unter Berücksichtigung der in Twig definierten Parameter). Hier hilft es, wie oben beschrieben, mittels des page-Parameters für Eindeutigkeit bei den IDs zu sorgen.

                            Eine Schwachstelle in der menu.html ist der Link auf die „Home“-Seite, meist steht hier nur der Link auf index.php ohne page-Parameter. Offenbar kommt der Seitenverlauf (Hash) von jQuery mobile aus dem Tritt, wenn Popups verwendet werden und man zwischendurch mit dem Home-Button auf die Startseite wechselt. Plötzlich ist ein Popup dann blockiert, was in der Adresszeile an dem Anhang „#&ui-state=dialog“ erkennbar ist. Auch hier hilft die Angabe des page-Parameters:
                            Code:
                            <a id="{{page}}-menu-rooms" class="icon1" href="index.php?page=index">
                            erste Tests haben gezeigt, dass dies aber nicht 100%ig vor Blockade der Popups schützt. Alternativ kann man dafür sorgen, dass die Startseite komplett neu geladen wird, was den jQuery mobile Seitenverlauf zurück setzt:
                            Code:
                            <a id="menu-rooms" class="icon1" data-ajax="false" href="index.php">
                            Im smartVISU Framework kann ich hierfür nur begrenzt Vorsorge treffen, weil die meisten Anwender ihre Seiten selbst erstellen. Ergänzt dies bitte gerne mit eigenem Wissen / workarounds.

                            Gruß
                            Wolfram
                            Zuletzt geändert von wvhn; 02.01.2021, 15:53.

                            Kommentar

                            Lädt...
                            X