HTML Template using a CasparCG image file

General
1

Hello awesome community… I have a question regarding HTML templates:

I’m trying to create either a PSD producer or HTML template that will allow me to display images that are on CasparCG server using their proper aspect ratios. We don’t want to have to bring all of the images in to Photoshop or similar prior to going to air and would like to have a standard colored background, an image on top of that, and then a dynamic image credit as the top most layer.

I can get the dynamic credit to work via the PSD producer just fine. But where I’m struggling is getting the actual background image to display correctly. CasparCG wants to always stretch the image to fill the screen, which is not the desired format here.

I would use an HTML template but I’m unsure of how to pass local CasparCG images in to the template… Or maybe that’s not possible?

Thoughts?

2

The trick is to display the images in the (HTML) template and not direcrly in Caspar. I never did that in HTML, but in Flash. In Flash there is a UILoader component, that can be used for that. You can pass the local filenames as a file URL to the UILoader and it loads and displays the image. It can be set to scale to fit by keeping the aspect ratio and you can use code to move the x and y values of the component, based on the size of the loaded image, to make it center on the screen. This can also be done using HTML and JavaScript somehow.

3

If we have a html file “aa.html” as below

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>

 <body>
 <img id='image1' src='C:/casparcg/mydata/games2/country/India.png' />

 <script>
  function changeimage(value)
   {
  document.getElementById('image1').src=value;
    }
  </script>

  </body>
  </html>

We can show the image (with its original size) as below

play 1-101 [html] “file:///C:/Users/developer/Desktop/aa.html”

And update the image as below

call 1-101 changeimage(‘C:/casparcg/mydata/games2/country/bhutan.png’)

4

Ah, so the possible issue here is that I use CasparCG integration with RundownCreator. In that we get the name of the file, but not the extension as I believe that is how it is presented to RundownCreator by the CasparCG server. So if I can’t pass the server variable straight in to the HTML template, I’m not sure I’ll be able to make this work as I don’t know if it is a .jpg .png or other :frowning:

Unless I’m missing something basic. And/or is there a way to tell the server to honor the aspect ratio of the image and not stretch it to fill the width of the screen?

5

What are you talking about? Vimlesh and my post refer to templates, that load the picture, so you set a variable with the filename, as you would with the text for a lower third. The scaling snd positioning of the picture is done by the templates code. For the server this is a template, like any other, he will not know of any image etc.

6

To give you an example Here you see a fullscreen video loop, the violet background and a template on top of it, with the banner “Filmkritik”, the image, the logo and the two lines bellow with the captions. That is a CasparCG template (done in Flash), that scales the image to fit regarding the lower left corner to be fixed, and scale it, respecting the aspect ratio, so that it eater fits to the right or the top border. If you click on the picture you can see the whole program with a lot more examples

7

Unless I’m mistaken that variable is via the full path to the file on the hard drive. We use RundownCreator integration which listens to the CasparCG server itself and doesn’t have the full path to the file. What I get is what CasparCG server spits out, “SPACE/11.41/NEWS/HYPERION/HYPERION PROTO-SUPERCLUSTER” as an example. I can fix the absolute path in the front, but I have no file extension data, so I can’t tell you if that is a .jpg, .png or other…

Unless I’m misunderstanding how the template works and I can indeed pass the CasparCG path (not the absolute file path on the drive) to the template and have it work?

8

Aha, I did not get that. It depends on how the template is built. I usually do not load the files from the servers media path, but form somewhere else. What you could do is to simply add the missing text (like “file://M:/CasparCG/Media”) to the text variable, before you load the file. Or any other trick. Sometimes we have a folder on the server machine that is the same as on the machine of the client (if they are different) and synchronize the files in it. Then the path added to the variable is the same. So if you use “D:\Data\Pictures” on the client, make sure that you have “D:\Data\Pictures” also on the server and use a toll to sync these folders.

9

Yeah, the front part of the path I can pretty easily fix… Just add the absolute path of C:\something, something… It’s the file extension I’m unsure of how to proceed on. I’m missing the .jpg, .png, .gif, etc. at the end as the server seems to strip that out.

10

Two ideas: Standardize on a given extension, like all png and make sue, that there are nothing else. Or check for existence of a file in code by trying different versions of the filename with added extension.