Flexible text-field width for TV graphics

Responsive
1

Hello together,

I’m using Hype 4 for generating the templates for my charcter generator, for TV graphics.

I did a search on the forums, but find more about scaling the document for different devices. For me it’s important, that the scene is always 1920x1080, this can not be responsive.

So, what’ my challenge: for one template I would like to have the field dynamically growing, according to the text, which is a variable, coming from the CaqsparCG client or Excel sheet,

So, line 1 is the name (Thomas Probst e.g.), line 2 is the function (Head of Broadcast, e.g.). Both fields have element-ids’, for recognizing in the graphics client. Also, the second field is coloured. What I’m trying now, is, that the fields, especially the sewcond one, will resize to the variable, because maybe the next person is “Head of nothing and everything, everywhere and nowhere” :wink:

Any hint for me, how this field can be flexible width? In hype directly. Or is it only possible on jQuery?

Thanks for hints, and Cheers, Thomas

2

A very quick edited example of something I have used in the past.

As you notice the height style for a text box or div stays the same and the text overflows ouside the bounds.

In this example I use MutationObserver to watch a data atribute. ( this is just a way to show how we can trigger a change. But it can be done from any other actions. .i.e on mouse click)

The main bit;

Example 1
have a div inside the text box with a class name.
We get the offsetHeight of the div which holds the new/changed text.

And adjust the height of the text box.

   var ccinfo = document.getElementsByClassName('cc_streaminfo')[0].offsetHeight
   hypeDocument.setElementProperty(streaminfoText, 'height', ccinfo + 20)

offsetHeightExample.hype.zip (35.3 KB)

remember this is a quick edit example but should show you the idea.

Example 2

You can do this directly on the textbox without an inner div.

offsetHeightExample_v2.hype.zip (34.4 KB)

offsetHeight is a HTMLElement property. You can also use properties from .getBoundingClientRect() to get the text box or a divs properties.

you are also not limited to height on either…

3 Likes
3

Thanks @MarkHunte :slight_smile: Will give it a try.