Menü
 EMBU-Sys 
Visualisierung für die Messtechnik
EMBU-Sys GbR Dietmar+Claudia Burger
Max-Högg-Straße 4
86316 Friedberg (Germany)
info@embu-sys.de    ☏ +49/821/65041556

Technische Änderungen und Irrtümer vorbehalten.

embu-sys logo
www.embu-sys.de
Focus on your  
Productivity   

Bild dynamisch verschieben

In diesem Beispiel soll das Bild eines Fahrzeugs dynamisch verschoben werden, um den Abstand zum vorausfahrenden Fahrzeug darzustellen.

 

Zur Darstellung wird ein Bild-Widget verwendet.

Übersicht

Um ein Bild dynamisch zu verschieben, verwenden Sie die Eigenschaften X-Versatz und Y-Versatzunter Extraktion. Damit lässt sich der Ursprung des Extraktionsbereichs relativ zum Koordinaten-Ursprung der Bild-Datei definieren. Der Ursprung des Bildes befindet sich in der linken unteren Ecke. Wird kein Versatz angegeben, so hat der Extraktionsbereich die selben Maße wie die Bilddatei (z.B. 64 px * 64 px).

Wie funktioniert das Extrahieren bzw. Abschneiden?

Bei einem X-Versatz von beispielsweise -20 px beginnt der Extraktionsbereich (grün dargestellt) 20 px links vom Bildrand. Rechts wird Bildinformation abgeschnitten (rot dargestellt) und links entsteht ein Bereich ohne Bilddaten, welcher später mit den Hintergrund-Einstellungen des Widgets dargestellt wird. Diese Hintergrund-Einstellungen können entweder transparent oder eine bestimmte Farbe sein.

Erweitern ist "negatives" Abschneiden

Um das Fahrzeug-Bild zu bewegen, erweitern wir es zunächst einmal auf die Breite des Widgets (416 px). Damit wird der Bereich rechts des Fahrzeugs erweitert. Fügen wir nun einen X-Versatz von z.B. -20 px hinzu, so wird links um 20 px erweitert und rechts um 20 px weniger erweitert - Das Fahrzeug ist nun verschoben:

Bild, das zur Anzeige gebracht wird

Um die Räder auf die Fahrbahn zu setzen, wenden wir noch einen Y-Offset von 16 px an:

Y-Versatz holt Fahrzeug auf die Fahrbahn

Das mit Hilfe des Extraktionsbereiches neu erzeugte Bild (grün dargestellt) wird gemäß der Einstellung des Zoom-Modus innerhalb des Bild-Widgets angepasst. Standardmäßig wird das Bild eingepasst, um das Seitenverhältnis beizubehalten. Deshalb sollte die Höhe des Widgets mindestens der Höhe des anzuzeigenden Bildes entsprechen, da sonst eben jene Einpassung stattfindet und so ggf. das Bild nicht mit dem angenommenen Maßstab angezeigt wird.

Verschieben mit einem Messwert

Wie oben bereits dargestellt, erzeugt ein negativer Versatz eine Bewegung des Fahrzeugs nach rechts. Da das Widget 416 px breit ist und das Fahrzeug 64 px Breite einnimmt, verbleibt ein Verschiebebereich von 0 bis -352 px (=-(416-64)). Um die Verschiebung mit einer Variablen zu erreichen, muss der Ausdruck des X-Versatzes ermittelt werden:

dnorm = d / dmax
Xmax = - ( Wextract - Wimage )
X = Xmax * ( 1 - dnorm )

wobei:
dnorm = normalisierter Abstand im Bereich 0 bis 1
d = Darzustellender Abstand
dmax = maximal darzustellender Abstand
Xmax = maximaler X-Versatz in Pixel
Wextract = Extraktions-Breite. Das Bild wird auf diese Breite erweitert/extrahiert.
Wimage = Breite der Bilddatei in Pixel
X = X-Versatz in Pixel

Setzt man die Gleichungen ein, so erhält man:

X = ( Wimage - Wextract ) * ( 1 - d / dmax )

wobei:
X = X-Versatz in Pixel
Wimage = Breite der Bilddatei in Pixel
Wextract = Extraktions-Breite. Das Bild wird auf diese Breite erweitert/extrahiert
d = Darzustellender Abstand
dmax = maximal darzustellender Abstand

 

In EMBU-Sketch legen wir nun diese Variablen als Distance (d), W_extract (Wextract) und W_image (Wimage) an:
Variablen anlegen

Für die Variable Distance geben wir einen Werte-Bereich bis 100 ein, dies entspricht dem maximal darzustellenden Abstand:
Bereichsangabe für den Abstand

Für die Extraktion im Bild-Widget setzen wir nun die Formel ein:
Bild-Widget: Versatz eingeben

Ergebnis testen

Starten Sie nun den Test-Modus mit F5.

Ergebnis

Geben Sie unten bei den Variablen Werte zum Testen ein, indem Sie die Variable Distance anwählen und anschließend die entsprechenden Ziffern 1 2 3 4 5 6 7 8 9 0 gefolgt von Enter auf Ihrer Tastatur drücken:

 Test-Werte eingeben