Fullscreen Block

[TCr82]

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

[Bonze]

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

<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

//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?

[TCr82]

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.

[Bonze]

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

{% 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

[TCr82]

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:

<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:

$(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

.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.

[Bonze]

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

[TCr82]

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.

[Bonze]

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..

[Bonze]

bei mir gehts

supersize.gif

hab mein github mal geupdated mit der aktuellen version

die Icons funktionieren jetzt auch richtig..

[wvhn]

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:

{{ 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

[SMarcus]

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

[wvhn]

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:

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

Gruß
Wolfram

[SMarcus]

Danke Wolfram, das funktioniert auf Anhieb.

Super coole Sache, jetzt kann ich meinen Kamerastream auf Vollbildschirm stellen 😁

In Verbindung mit dem Smartvisu Plugin ist die Funktion nur insofern eigeschränkt als das beide Symbole) Supersize Widget und Smartvisu Plugin oben rechts im Block übereinander liegen. Mit der Maus kann man das noch differenzieren, mit den (groben) Fingern am iPad nicht mehr.

SV.jpg
Schätze die Position des Supersize Widget Symbols ist nicht konfigurierbar?

2 Verbesserungsvorschläge hätte ich noch für das Supersize Widget:

• Generell fände ich es fast besser, wenn die Supersize Funktion durch 'anklicken' auf die Boxüberschrift oder den Boxhintergrund bzw. das Kamerabild aktiviert würde
• Nach dem Vergrößern wird der Boxinhalt so weit nach oben geschoben, das die dahinterliegenden SV-Inhalte die untere Begrenzung am Bildschirm darstellen und damit die vergrößerte Box in der Höhe ober abgeschnitten wird (sofern in der Höhe mehr Inhalt hinter der vergrößerten Box ist als die Box selbst darstellt). 🤔 Natürlicher wäre es, wenn die vergrößerte Box so positioniert ist, das der obere Bereich sichtbar ist.

Gruß,
Marcus

[wvhn]

Hi Markus,

Standard in jQuery mobile ist, dass das Icon zum Einklappen der "collapsible" Blocks links ist. In den mit dem smartvisu-Plugin mitgelieferten Makros für die Blöcke, ist dieses Icon nur im "black" Design nach rechts gewandert (data-iconpos = "right" ). Wenn Du darauf verzichten kannst, ist der Konflikt behoben. Dazu musst Du im Plugins-Verzeichnis von shNG die html-Dateien im Verzeichnis ./smartvisu/tplNG anpassen.

Alternativ kann man im supersize-Widget den z-index erhöhen. Dann siegt beim Wurstfinger auf dem iPad die supersize-Funktion. Dennoch sieht man beide icons übereinander und das sieht blöd aus. Ich muss mal sehen, ob mir da etwas besseres einfällt.

Der Klick auf die Überschrift ist beim collapsible block für das Einklappen reserviert. Das kann ich nicht kapern. Ein Klick auf den Inhalt führt dann bei Plots zu unerwünschten Ergebnissen.

Der Boxinhalt wird nach dem Vergrößern ganz nach oben geschoben. Wenn der ursprüngliche Block auf der Seite so weit unten sitzt, dass Du die Seite schon nach unten gescrollt hast, dann verschwindet der vergrößerte Block und Du musst nach oben scrollen. Das hat mich auch schon gestört. Abhilfe bringt in der ./widgets/lib.html eine neue Zeile nach Zeile 148 vor dem "}else{":

$.mobile.silentScroll(0);

Damit scrollt die Ansicht immer nach oben. Allerdings bleibt sie nach dem Verkleinern auch oben. Wenn das für Dich passt, nehme ich diese Änderung in den develop branch auf.

Gruß
Wolfram

[wvhn]

Ich habe noch ein bisschen gebastelt
Das supersize-Widget versteckt beim collabsible block jetzt den Button, wenn er rechts angeordnet ist. Zudem wählt es die icon-Farbe korrekt, die beim "black"-Design noch nicht passte. Beim Klicken merkt es sich den aktuellen Y-scroll Wert, scrollt im supersize-Modus ganz nach oben und kehrt beim Verkleinern wieder zur Originalposition zurück.

Die Datei ./widgets/lib.html befindet sich im Anhang und kann einfach ausgetauscht werden (nach Umbenennen von .txt in .html). Die Änderung ist auch im develop branch.

Gruß
Wolfram