Unexpected template render behaviour

General
, ,
1

I was trying to make a simple image composition to generate a gallery for social media, so I could process a lot of pictures automatically with a combination of “add” template and “snapshot”.
So the template is very simple and has no animation, just text “div”, svg images and a png picture of the subject with the background cutted away (just 400x480px).

The client will send the “update” command with the new values and a function is called to make the changes, very simple and straight forward.

The strange thing that I encounter is that quite often doesn’t render everything, sometimes the image and texts are missing, sometimes just the texts are missing, sometimes the image is rendered in half.

merged
merged1430×529 726 KB 

function main() {

    Rider_FirstName_Field.innerHTML = Input_First_Name;
    Rider_LastName_Field.innerHTML = Input_Last_Name;
    Rider_Nationality_Field.innerHTML = Input_Nationality;

    if (Input_Last_Name.length > 0) {
        Rider_Face_Image.src = "../../_Images/Face/" + Input_Last_Name + "_" + Input_First_Name + ".png";;
        Rider_Face_Image.style.opacity = 1;
    } else {
        Rider_Face_Image.src = "";
        Rider_Face_Image.style.opacity = 0;
    }
    if (Input_Nationality.length > 0) {
        Rider_Flag_Image.src = "../../_Images/Flag/" + Input_Nationality + ".svg";;
        Rider_Flag_Image.style.opacity = 1;
    } else {
        Rider_Flag_Image.src = "";
        Rider_Flag_Image.style.opacity = 0;
    }
}

I’m not sure if that is normal or not, or if I’m doing something wrong in how I handle things.
I found a simple solution which is to call the function more than once with a setInterval, it is just for postproduction in this case so I don’t care that much, but I would like to know more about it.

The important I think, is that it is not a flaw or a bug in the server code

2

If you are using a recent build of master, this could be another case of Consumer shows countdown clock *skipping* times in the output · Issue #1441 · CasparCG/server · GitHub

3

Ops, sorry, I forgot the server version

I’m using the 2.3.3 LTE on windows 11 with an Nvidia card
in the log is shown as:

Server 2.3.2 fd75dd58 Dev

4

Ok, it won’t be that bug then. I don’t know what will be at fault

5

doesn’t looks to be a big problem, I think I never encountered it because animations probably have the same effect of recalling the function as I do in this case.

Let me know if you want me to do some tests or else, I will be happy to do that

6

Try remote debugging to diagnose the problem. It might help to understand what is going on.

7

I never tried remote debugging, I’m not sure how it works, but sounds good

8

Remote debugging uses an instance of Chrome browser running on the CasparCG server to access the embedded chromium that is running a template on the server.

The CasparCG server needs the remote debug feature enabled as part of the server configuration. This is implemented in the <html> tag. For example to enable port 8081 for remote debug:

<html>
     <remote-debugging-port>8081</remote-debugging-port>
</html>

Other items such as <enable-gpu> may also be in the tag group.

Run a template on the CasparCG server.

Open an instance of Chrome on the server. In the address bar enter chrome://inspect/#devices

On the displayed page, tick the “Discover network targets” box, and click the Configure… button. Enter the address 127.0.0.1:8081 (or whichever port number you placed in the CasparCG config file). Click the Done button on the Target discovery settings.

After a few seconds you see a list of templates running on the server, including the template name and url. Click the blue “inspect” text to show the chrome dev tools page for the CasparCG template.

There is a small icon on the tools menu that looks like a small box at the bottom left of a larger box. This enables or disables the screencast mode. When screencast is enabled you see the output of the CasparCG template on the chrome page.

You can use the other tools to show the code, profile performance data, inspect the values of variables, and enter commands in the console panel. Commands include all standard Caspar invoked functions such as next(), update(), play() and stop(). For example if the template javascript code is accepts JSON wrapped data you can update a field named f0 using the console command:

update("{\"f0\":\"New text for f0\"}")

Or to avoid escaping quote marks inside quote marks use the single quote on the outer wrapper

update('{"f0":"New text for f0"}')

Of course when you run stop() the remote debug also closes.

2 Likes
9

Thank you very much for the guide, very interesting tool!

so, I tried with the photo gallery template, and seems to not detect anything. Also, even when on the server the template was incompletely rendered, on the remote debugging was all well rendered.

The good news is that on the latest server master there is no issue.
Server 2.3.3 3e80053 Dev
I tried a lot of times and managed to render everything fine all the times

10

Pleased to hear you have found a workable solution. There may be some diagnostic info in the screencast in remote debug operating, but the output not updating. Julusian has noted several times in the forum and the github server issues that the embedded chromium can be very tricky to connect into Caspar.

11

this is great @andyw thanks!