Ankündigung

Einklappen
Keine Ankündigung bisher.

Fullscreen Block

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

    Fullscreen Block

    Hi,

    wollte mal anfragen, ob es möglich wäre, ein block zu bauen bzw die vorhandenen zu erweitern, in dem es ein "Fullscreen" Knopf gibt, wie man es hier sehen kann.

    https://stackoverflow.com/questions/...rts-responsive

    Durch klick darauf, wird der Block dann auf die komplette Bildschirmgröße skaliert.

    Bei mir geht es eigentlich auch primär um die Möglichkeit ein Plot auf voller Bildschirmgröße anzusehen.

    Deswegen könnte man natürlich auch nur das Plot um die Fullscreen Funktionalität erweitern, ich fände es aber besser, wenn auch andere Widgets davon Profitierten könnten.

    Gruß,
    Thomas

    Fullscreen.PNG
    Zuletzt geändert von wvhn; 18.12.2021, 13:53. Grund: Status gelöst gesetzt

    #2
    also probier mal sowas in der art, aber ohen JS wirste da nicht hinkommen
    der Html code, wichtig ist halt das du die class hast
    Code:
    <div style="background-color: red; width:20%;">
    <button class="[MARKIEREN]btnprev[/MARKIEREN]" type="button">test</button>
    </div>
    dann der JS Teil ist eigentlich am einfachsten
    Code:
    //Button events
    $([MARKIEREN]".btnprev[/MARKIEREN]").click(function () {
    console.log("test");
    $(this).closest("div").css( "width", "100%" );
    });
    das funzt bei jsfiddle
    man muss dann halt auf die smartvisu übertragen..

    was mir dabei auffällt, was soll dann mit den anderen blöcken passieren?
    verschieben oder überdeckt werden wie bei nem popup?

    Kommentar


      #3
      Zitat von Bonze Beitrag anzeigen
      was mir dabei auffällt, was soll dann mit den anderen blöcken passieren?
      verschieben oder überdeckt werden wie bei nem popup?

      Überdeckt werden, bis man den "Fullscreen" wieder verlässt.

      Werde das später mal testen. Aber denke nicht dass das so reicht.

      zb wird damit die obere Bar bzw das menü links ausgeblendet? Und zurück kommt man damit ja auch nicht wieder.

      Denle ohne weitere CSS Definitionen geht erstmal nichts.
      Zuletzt geändert von TCr82; 21.01.2021, 06:44.

      Kommentar


        #4
        https://github.com/Bonze255/smartvis...ster/supersize
        was reingelegt, die dateien in dropins, einbinden mit

        Code:
        {% import "supersize.html" as supersize %}
         {{supersize.supersize('', '')}}

        so siehts du mal wie man auf Aktionen reagieren kann, was genau vergrößssert werden soll und wie es reagiert muss man jetzt noch feinjustieren..


        BTW ->https://stackoverflow.com/questions/...ts-with-jquery
        Zuletzt geändert von Bonze; 21.01.2021, 09:08.

        Kommentar


          #5
          Also ich habe da mal dran rum gebaut, aber so richtig will es nicht, da jquery-ui das wohl einfach nicht so vorgesehen hat, das "collapsible" so zu modifizieren - aber so in etwa hab ich es mir vorgestellt:

          Code:
          <div class="block">
            <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
              <div data-role="collapsible" data-enhanced="true" class="set-2 ui-collapsible-set ui-corner-all">
                <h3 class="ui-collapsible-heading ui-controlgroup-controls ui-corner-all" style="display: inline-flex; width: 100%;">
                  <a href="#" class="ui-collapsible-heading-toggle ui-corner-all ui-first-child" data-role="button" data-icon="action" data-theme="c" data-inline="true" data-mini="true" style="width: 99%;">
                    Heizung
                    <span class="ui-collapsible-heading-status">click to collapse contents</span>
                  </a>
                  <a href="#" title="Toggle fullscreen" class="ui-corner-all ui-last-child" data-btn-tofull="true" data-role="button" data-icon="action" data-iconpos="notext" data-theme="c" data-inline="true" data-mini="true" role="button"></a>
                </h3>
                <div class="ui-collapsible-content ui-body-a" aria-hidden="false">
                  {{ my_widgets.heizungsanlage('technik.heizung.ha') }}
                </div>
              </div>
            </div>
          </div>
          den js code habe ich in meine visu.js gepackt:

          Code:
          $(document).delegate('a[data-btn-tofull="true"]', {
                  'dblclick': function (event) {
                          event.preventDefault();
                          var t = $(this);
                          if (t.hasClass('ui-icon-action')) {
                                  t.removeClass('ui-icon-action');
                                  t.addClass('ui-icon-delete');
                          } else {
                                  t.removeClass('ui-icon-delete');
                                  t.addClass('ui-icon-action');
                          }
                          t.closest('div').toggleClass('panel-fullscreen');
                  }
          });
          und das in meine visu.css

          Code:
          .panel-fullscreen {
            display: block;
            z-index: 9999;
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            overflow: auto;
          }
          Leider fängt query-ui bei dem collapsible das click event ab, deswegen funktioniert es nur mit einem Doppelklick, was sich aber auch wieder überschneidet, da für das collapsible der click Event nicht auf das <a> in dem <h3> gelegt wird, sondern auf das <h3> selbst.

          Vielleicht hat noch wer ne Idee, wie man das "schön & funktionell" umsetzten kann.

          Vor dem Doppelklick:
          1.PNG
          Nach dem Doppelklick:
          2.PNG

          EDIT: HTLM Code korrigiert, mein Editor hatte da den Zeilenumbruch abgeschnitten.
          Zuletzt geändert von TCr82; 22.01.2021, 20:56.

          Kommentar


            #6
            Also bei mir funzt das beispiel 1a, man könnte das als zusatzwidget machen, da immer der nächst erreichbare block maximiert wird, da musst du auch nix in deinem quellcode ändern, einfach das widget vom github einbinden..

            Wie nan das in das h3 einbauen kann mhh vl reichts such das unter das h3 rechts oben einzubauen ?

            Edit vl mal hier guckn
            https://stackoverflow.com/questions/...nk-css-missing
            und hier
            https://stackoverflow.com/questions/...the-collapsibl
            Zuletzt geändert von Bonze; 23.01.2021, 08:15.

            Kommentar


              #7
              Das sieht vielversprechend aus, ich glaube ich automatiere das noch etwas, so dass das einfacher wird. Hoffentlich komme ich später noch dazu.

              Hatte mittlerweile noch eine andere Idee, dass ich den Button im Content erstelle und ihn dann per Position oben in den Header verschiebe. Aber das ist mir leider auch nicht so gelungen.

              Wie gesagt ich schau mir das später noch mal an und melde mich zurück.

              Kommentar


                #8
                Ich guck mir das morgen auch mal an, denke das es mit der 2 antwort klappt, ich würde trotzdem das als widget zu erstellen, sodass man bei jedem block einzeln entscheiden kann oder man ihn maximieren können will..

                Kommentar


                  #9
                  bei mir gehts

                  supersize.gif

                  hab mein github mal geupdated mit der aktuellen version

                  die Icons funktionieren jetzt auch richtig..
                  Angehängte Dateien
                  Zuletzt geändert von Bonze; 23.01.2021, 18:01.

                  Kommentar


                    #10
                    Ich habe das Widget von Bonze jetzt in den develop branch übernommen als "lib.supersize". Es wird aktiviert, indem man in die <h3>-Tags des betreffenden Blocks folgenden Code einsetzt:
                    Code:
                    {{ lib.supersize('') }}
                    Als Parameter kann man eine ID vergeben, wenn man die für andere Zwecke benötigt. Weitere Imports oder CSS-Dateien sind nicht erforderlich.

                    Das Widget vergrößert den Block auf 99% der Bildschirmbreite und rechnet die Höhe des Blocks proportional um.
                    Als Zugabe werden jetzt die im Block enthaltenen Plots auf die neue Größe angepasst.

                    supersize_spoiler.gif

                    Gruß
                    Wolfram
                    Zuletzt geändert von wvhn; 18.12.2021, 13:59.

                    Kommentar


                      #11
                      Servus,

                      ich verwende SV 3.2.2 mit SHNG v1.9.2-master. Gibt's eine Möglichkeit das 'Supersize Widget' irgendwie im Rahmen des Smartvisu Plugin zu verwenden?

                      Gruß,
                      Marcus

                      Kommentar


                        #12
                        Hi Markus,

                        dafür gibt es keine dokumentierte Vorgehensweise. Es wäre aber einen Versuch wert, dies in das Attribut "name" des betreffenden Visublocks zu integrieren. Vermutlich sind Anführungszeichen zu verwenden und man muss damit ein bisschen experimentieren.

                        Ungetestet:
                        Code:
                        visublock01:
                            name: "{{ lib.supersize('') }}Raum Beleuchtung"
                            sv_widget: "{{ basic.stateswitch('', 'world.kochen.deckenlicht') }} Deckenlicht"
                        Gruß
                        Wolfram

                        Kommentar

                        Lädt...
                        X