Der Eintrag "offcanvas-col1" existiert leider nicht.

Der Eintrag "offcanvas-col2" existiert leider nicht.

Der Eintrag "offcanvas-col3" existiert leider nicht.

Der Eintrag "offcanvas-col4" existiert leider nicht.

Die Telefonnummer wird mit JavaScript generiert.

Quick Tipp: Skalieren von Dashboards und anderen Webseiten

von

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.

Webseiten Skalierung

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.

Kategorien: Quick-Tipps

Zurück

© 2022 exensio GmbH
Einstellungen gespeichert
Datenschutzeinstellungen

Wir nutzen Cookies auf unserer Website. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern.

Sie können Ihre Einwilligung jederzeit ändern oder widerrufen, indem Sie auf den Link in der Datenschutzerklärung klicken.

Zu den gesetzlichen Rechenschaftspflichten gehört die Einwilligung (Opt-In) zu protokollieren und archivieren. Aus diesem Grund wird Ihre Opt-In Entscheidung in eine LOG-Datei geschrieben. In dieser Datei werden folgende Daten gespeichert:

 

  • IP-Adresse des Besuchers
  • Vom Besucher gewählte Datenschutzeinstellung (Privacy Level)
  • Datum und Zeit des Speicherns
  • Domain
You are using an outdated browser. The website may not be displayed correctly. Close