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