Load HTML and replace Text and Images

General
1

Hello,

I am very new to this and I am trying to make it ork since last Friday. It was quite hard to find out that I have to install the old Animate Edge 2014 - version to make the samples work, which has been provided by Seppo Sormunen. So I am using the E2C_Library v0.7.1.

I have build a template which contains 2 text-fields called teamA and teamB and 2 images called logoA and logoB. The Name of the html-file is matchID.html.

This is what I send with my own client:
CG 1-20 ADD 1 Hockey/MATCHID “0” "<componentData id=“teamA”><data id=“text” value=“Lok Rackwitz”/><componentData id=“teamB”><data id=“text” value=“RW Jena”/>"

That works well so far, but I have no idea how to change the logos (images).

Thats why I tried to call this:
CALL 1-20 updateImage(“logoA”, “images/logos/EHC.png”)

updateImage is a function of E2C_Library and I hoped, that this would work, which does´nt.
images/logos/EHC.png is placed where the matchID.html is located.

What I am doing wrong?
Is there a chance to send all contents in 1 command?

Thanks for your helping hand
Cheers Thomas

2

I am not an expert in HTML and neither in Sepo’s library, but have you tried to set the images the same way as you set the texts, just by adding another <componentData> node for each of the images to the XML string?

3

Hi Didi,
yes I did, but I guess, that the code inside the XML is to much specified for text-objects.

For text-objects works fine:
<componentData id=“teamA”><data id=“text” value=“Lok Rackwitz”/>

I tried this for images:
<componentData id=“logoA”><data id=“imagePath” value=“images/logos/ehc.png” />

I am sure I am not the only one who needs to solve this. :wink:

4

Took a quick look at the E2C code. Try changing id=“imagePath” to id=“img”

5

Hi,
I did, what you mentioned and changed the Code into this:

CG 1-20 ADD 1 Hockey/MATCHID “0”
“<templateData>
<componentData id=“teamA”><data id=“text” value=“Lok Leipzig”/>
<componentData id=“teamB”><data id=“text” value=“RW Erfurt”/>
<componentData id=“logoA”><data id=“img” value=“images/logos/ehc.png” />
</templateData>”

The image does not chage its look, but I can see some additional text on the logo, something like a title.

Zwischenablage01

6

Looks like logoA is the ID of a div/span or comparable surrounding the img tag and not the ID of the img tag itself.

7

Yes maybe. Unfortunatly, I am very new to this and not that good in JS.

8

for me this works in my templates when my client sends it like this:
hflagge = “img=c:/CG_Sports/flags/ch.png”
example here
https://drive.google.com/file/d/1TMtqNFL-eojo72RciU-J0Sbi6hEa3Yus/view?usp=sharing

9

Hi Peter,

perfect advise! That works perfect, even with the relative path, that I was using with your template.

Hope you can live with the score. :wink:

Thomas

2019-02-19_11-38-49
2019-02-19_11-38-491639Ă—171 524 KB

10

Not really :slight_smile: but it’s realistic anyway. By the way, the Swiss flag should not be that distorted, Officially the flag is a square, but there is also a rectangle version around… :slight_smile:

11

Yes I know. Usually flags like the Swiss one, will be shown also as rectangle with some added colored space to keep the original dimensions. I did not took the time to prepare this, as I was to excited, that it was working.

As soon I have it working from my Client, I would finally give a feedback for those who are also facing this question.

12

…don’t always take everything serious :slight_smile:

13

Thanks again to Peter and Didi!

It was hard for me to find out how to load an HTML-Template, as it was to easy to load Images and Videos. :wink:
To fill the template with some content was even harder to find out. Thats why I would like to share this:

CG 1-20 ADD 1 "resultat gross/RESGROSS3" 1 

"<templateData>

<componentData id=\"_home\"><data id=\"text\" value=\"Germany\"/></componentData>
<componentData id=\"_away\"><data id=\"text\" value=\"Switzerland\"/></componentData>
<componentData id=\"_period\"><data id=\"text\" value=\"1st Half\"/></componentData>
<componentData id=\"_hpoint\"><data id=\"text\" value=\"5\"/></componentData>
<componentData id=\"_apoint\"><data id=\"text\" value=\"1\"/></componentData>
<componentData id=\"hflagge\"><data id=\"text\" value=\"img=images/de.png\"/></componentData>
<componentData id=\"aflagge\"><data id=\"text\" value=\"img=images/ch.png"/></componentData>

</templateData>"

Text-Objects are named with _home, _away, _period, _hpoint, _apoint
Images are hflagge and aflagge. The path could send as absolute path or like the example as relative path.

Hope this helps!

1 Like