Quick Tipp: Skalieren von Dashboards und anderen Webseiten

von Andreas Scheidmeir

In einem aktuellen Projekt kam die Bitte auf, eines der webbasierten 4k Shopfloor Dashboards auch für kleine Bildschirme in einer andere Web-Applikation einzubinden.

Für die Umsetzung gibt es viele Wege, im Idealfall ist das Dashboard bereits responsive aufgebaut und kann sich selbst entsprechend einpassen. Dies ist aber nicht immer gegeben, entweder weil die Ausgangstechnologie dies nicht unterstützt oder das Verhalten im ursprünglichen Auftrag nicht vorgesehen war.

Ein anderer Weg wäre, die Daten in der Web-Applikation separat abzurufen und eine neue Darstellung für die kleinen Screens umzusetzen, das bedeutet jedoch zusätzlichen Aufwand und ist damit teurer.

Wenn es schnell und einfach gehen soll, kann man dafür auf die CSS-Transform Eigenschaft zurückgreifen. Das darzustellende Dashboard wird hierfür in ein Inlineframe (iframe) eingebettet, welches die Originalmaße aufweist und dann in die Zielgröße herunter skaliert – hier mit der Klasse dashboard-frame bezeichnet. Der umschließende Container – hier als dashboard-container gekennzeichnet – besitzt die gewünschte Maße, welches sich aus der Originalgröße mal dem Skalierungsfaktor (hier 0.35 oder 35%) errechnet.

Wichtig ist noch die Eigenschaft transform-origin, welche den Ankerpunkt der Transformation angibt. Der Standardwert geht von der Mitte des Objekts aus, in unserem Fall wollen wir die linke obere Ecke fixieren, daher wählen wir die Werte 0 0 (oder left top).

Mit diesem Trick lässt sich das Ausgangsmaterial originalgetreu herunterskalieren, ohne dass Abstände oder Proportionen verzerrt werden.

<div class="dashboard-container">
    <iframe class="dashboard-frame" src="https://path.to/dashboard/index.html">
    </iframe>
</div>

.dashboard-container { width: 1346px; height: 758px; overflow: hidden; }
.dashboard-frame {
  width: 3840px;
  height: 2160px; 
  overflow: hidden;
  /* pointer-events: none; */
}
.dashboard-frame {
  transform: scale(0.35);
  transform-origin: 0 0;
}

PS: Mit der CSS-Eigenschaft pointer-event: none; kann man sämtliche Maus-Events im Inlineframe deaktivieren, sodass Scrollen im Elterncontainer weiterhin möglich ist, auch wenn die Maus über das eingebettete Element fährt. Gleichzeitig verhindert dies aber auch jede Interaktionsmöglichkeit innerhalb des Inlineframe. Je nach Situation kann dies hilfreich sein.

Zurück