Using OBS widgets as HTML page


I have an upcoming event producing a cornhole show . The organizers are using scoreholio as their score tracking system . Scoreholio has OBS widgets ready to use for automatic score graphics et.c. But problem is that I of course use CasparCG for graphics and not OBS .
So played around with some OBS widgets and they seem to work as a normal HTML page source in Caspar but when adding the scoreholio widget it gets blown out of proportions , so much that is it outside the render window . So I tried adding a transformer to scale down the layer by the effect is that it’s only the original visible parts that are scaled , so it is still the same clipping .
Attaching images , first is by just opening the widget in a browser (this is what I expect to see in 1080p) , second is what I see when adding the HTML page to Caspar and third image is after applying a transformer to it

Does anyone have experience using OBS widgets and have a solution for my issue?

Update: a strange behaviour with the widget showing in a webpage is that is seem to scale with the window size . Perhaps that is messing up the Caspar HTML render . I think that is a problem from scoreholio , I would expect them to render all their components as fixed 1080p as that is what is stated as widget size


so the graphics are responcive and doesnt recognize the size of the casparcg channel.
Since there has been a big varietion of which Chrome extension different versions of Caspar uses, my first recomendation would to try a newer version. There are significant difference between 2.3.0, 2.3.3 and 2.4.0RC1.
ususally it would be also helpfull to know in which version you already tested.

br markus

Tack för svaret Markus :slight_smile:

in my first try I was using 2.0.7 … then on your suggestion updating to 2.3.3 fixed the scale issue and display the page as expected BUT the expected text on the page was for some reason not there. Then changing to 2.4.0RC1 fixed both the scale and the text, and is responsive from the web controller, so that seems to do the trick.
One problem I observed though was that I get some scroll bars right and bottom of the component. They are not visible until I transform the page to the size I want. I solved it by using a cropstep on the layer cropping right and bottom 20 pixels. Is that a problem with the webpage for the overflow behaviour or is it caspar? In obs I do not see the same scrollbars when adding the component, so leaning to a caspar issue.
See attached images, first is the component with text fullscreen 1080 , second is when just transformed to scale and last is with the applied crop


thats a mark that the webpage is higher than 1080px
as you can see from this example