TC3 HMI Enigeering: In JS Höhe / Breite eines Containers und Images ermitteln

J

Jörn

Level-1
Beiträge
58
Reaktionspunkte
1
Zuviel Werbung?
-> Hier kostenlos registrieren
Moin,

ich möchte in der Visu ein Image skalieren und hab mir dafür eine kleine Hilfsfunktion geschrieben. Leider tut sie nicht so ganz, was sie soll. Dem JavaScript möchte ich einen Container und ein Image (welches in eben diesem Container drin ist) übergeben und es soll sich von denen die Höhen und Breiten ermitteln, den AspectRatio berechnen und zurückgeben. Leider bekomme ich stattdessen nur 4 Exceptions. Neben _.height hab ich auch _.RenderedHeight und _.getHeight() ausprobiert - mit gleichem Ergebnis. Ein bissl irritierend ist auch, daß er nur die Meldung "IntelliSense kann keine genaue Vervollständigungliste für diesen Ausdruck ermitteln." anzeigt, wenn ich den Punkt hinter scrContent mache.

Falls ein HMI- oder JavaScript-Spezialist anwesend ist, würde ich mich über Hilfe freuen. :)

Gruß
Jörn



02_Container+Image.png
Der Container und das Image

01_Aufruf.png
Der Aufruf in der HMI

03_CalcAspectRatio.png
Das JavaScript

04_Exception.png
Eine der Exceptions
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Ich hab gerade gesehen, daß es ein HMI Unterforum gibt. Möchte einer der Moderatoren diesen Faden bitte dorthin verschieben?! Danke. :)

---

Wieso gibt es eigentlich keinen facepalm-Smiley? :ROFLMAO:

Trotzdem gibt es immer noch 2 Exceptions wegen der Typkonvertierung. Immerhin schomal der Anzahl der Fehler halbiert! :s12:


Edith möchte nicht unerwähnt lassen, daß ich nach wie vor im Javascript die Größe des Bildes nicht abfragen kann. Egal wie ich es versuche, entweder bekomme ich eine 0 zurück oder ein NaN:

Code: 
   var imageHeight = srcImage.OriginalHeight;
   var imageWidth = srcImage.OriginalWidth;


   var imageHeight = srcImage.getOriginalHeight();  // = 0
   var imageWidth = srcImage.getOriginalWidth();


   var imageHeight = srcImage.Height;
   var imageWidth = srcImage.Width;


   var imageHeight = srcImage.getHeight();  // = 0
   var imageWidth = srcImage.getWidth();

Wobei Height bzw. getHeight ja eigentlich auch falsch ist, weil ich die ja in der HMI anhand der OriginalHeight und des berechneten AspectRatio setzen will.

Gruß
Jörn
 
Zuletzt bearbeitet:
Ich denke dein Code läuft einfach zu früh. Du hast ja ein Binding auf height. Das wird gesetzt, "gleichzeitig" (vorher oder nachher, je nach Reihenfolge im HTML) mit der Konfiguration des Bildes. Da ist das Bild noch nicht geladen und damit getOriginalHeight noch nicht bekannt.
Dein Code solltest du nicht im Attribut selbst laufen lassen, sondern per Trigger/Actions&Conditions beim ".onLoad" Event. Das wird ausgeführt, wenn das Bild erfolgreich geladen wurde.

Dein Code zeigt kein scrContent. Schwierig dir zu helfen, wenn du uns den relevanten Code nicht zeigst. :)

Du solltest weniger raten (dein erster Screenshot sieht sehr nach gerate aus) sondern die DevTools deines Browsers nutzen. Wenn bei "Pause on caught exceptions" einschaltest, bleibt dein Browser wahrscheinlich genau in deinem Code stehen. Da kannst du dann direkt per Console Code-Fragmente testen.
X Vlh0Db9SoLgAAAABJRU5ErkJggg==
devtools.jpg
 
Zuletzt bearbeitet:
Ob sie zu früh läuft?! Keine Ahnung. Ich hab eine function geschrieben, der ich die Höhen und Breiten des container und des image einzeln übergebe. Mit der läuft es tadellos, allerdings sieht der Aufruf schon ziemlich unschön aus:

01_Funktion_calcPicRatio.JPG
1: function calcPicRatio

02_Aufruf_calcPicRatio.JPG
2: Aufruf calcPicRatio


Deshalb würde ich beim Aufruf gerne nur den container und das image übergeben und die function holt sich die Höhen und Breiten selber:

03_Function_calcAspectRatio_Parameter.JPG
3: function calcAspectRatio properties

04_Function_calcAspectRatio.JPG
4: function calcAspectRatio

05_Aufruf_calcAspectRatio.JPG
5: Aufruf calcAspectRatio


Leider bekomme ich immer nur 0 oder NaN zurück. Ich muss ja "nur" getRenderedWidth() (für den container) bzw. getOriginalWidth() (für das image) aufrufen, es fehlt mir - vermutlich - nur an der richtigen Syntax.

Das ist in der Tat geraten. Programmieren ist auch oft raten, wenn die genaue Syntax nicht bekannt ist. Häufig kommt man in recht kurzer Zeit auch zu einem Ergebnis. In diesem Fall jedoch nicht. Ich bin aus Java / Javascript einfach zu lange raus.

Gruß
Jörn
 
Zuviel Werbung?
-> Hier kostenlos registrieren
Ja, du nutzt ein Binding. Zu dem Zeitpunkt ist das Bild noch nicht geladen. Falsche Syntax ist nicht dein Problem.
Siehe meine anderen Hinweise. Das mit dem Raten war nicht böse gemeint. :)
 
Dann wundert mich aber, daß die erste von mir eingesetzte, "umständliche" function funktioniert. :confused:

Ich werd' am Wochenende mal ein bissl rumspielen und mir zudem die DevTools anschauen. Vielleicht hab ich ja dann einen Geistesblitz. :ROFLMAO:
 
Ah. Ok. Sorry, hatte nicht genau geschaut.
Du nutzt in der umständlichen Version die Property "OriginalWidth" in der SymbolExpression.
Daher weiss das System, dass du diese Eigenschaft nutzt und sie sich nach dem Laden geändert hat und führt den ganzen Aufruf nochmal mit richtigen Werten auf.

Mit den DevTools wirst du erkennen, dass deine Funktion mehrfach aufgerufen wird.
 
Zuletzt bearbeitet:
Zurück
Oben