Howto control a dynamic scorebug with vMixUTCScorebugs in sport production are more and more sophisticated. vMixUTC is a perfect tool for this, even when using a basic xaml title and no complex coding.
Here, you will see how to create and control a basic dynamic scorebug with multiple triggers.
This video starts with a functional demo and will show you how to use Trigger Functions to show and hide elements in your scorebug.
For this demo I created a very basic but specific xaml title with 2 images. See attached file if you want to use it.
>>> Watch the video: Notes:1. Creation of the xaml title
The idea is to create a xaml title with multiple elements that combine together. Here 2 images compose the scorebug:
- the upper part is for the score and the clock
- the lower part is meant to be shown or hidden with triggers or on demand. It is composed of 2 objects: an image called "scorebugxtra" and a text area called "XtraInfo"
2. As seen before you will need to use vMix API status to identify the elements in your xaml.
Use your browser to request it using http://YoutvMix-IP:8088/api/ as a URL.
Here's the report for scorebug.xaml
Code:<input key="e0892642-9bc2-4dff-af4e-57c71ba29521" number="3" type="Xaml" title="scorebug.xaml" state="Paused" position="0" duration="0" loop="False" selectedIndex="0">
scorebug.xaml
<text index="0" name="HomeTeam">BAR</text>
<text index="1" name="AwayTeam">MAD</text>
<text index="2" name="HomeScore">2</text>
<text index="3" name="AwayScore">1</text>
<text index="4" name="Time">44:00</text>
<text index="5" name="XtraInfo">vMix UTC rocks!</text>
<image index="0" name="Object">
file:///D:/vMix-Projects/_vMixUTC/Tutorials/scorebug.png
</image>
<image index="1" name="scorebugxtra">
D:/vMix-Projects/_vMixUTC/Tutorials/scorebug-xtra.png
</image>
</input>
It shows that this title is made of 6 text values (text index="0" to text index="5") and 2 images (image index="0" and image index="1").
We will mainly use those named with "Xtra", that is <text index="5" name="XtraInfo"> and <image index="1" name="scorebugxtra">.
Now we are ready to use vMix UTC to build our User Interface to control the scorebug title.
3. I will not explain again how to create Button, Text, Timer or Score Widgets used in this demo. Also we have already seen how to use internal function "ExecLink" which allow to trigger actions within Widgets. Check the previous posts if you need more information.
Only 2 new functions are used in this tutorial : "SetText" and "SetImageNative". They allow to update text fields and image paths in xaml titles from Button Widgets.
You will see I created 2 Red Buttons. These are "Sub Functions" to simplify the programming. The Widgets we click on (the green ones) call these functions to execute frequently the same operation. It avoids to "write" the same routine in several different Buttons and it makes it easy to update many Widgets at once (in case we change the image path for example).
4. About SetImage and SetImageNative.
Latest release of vMix UTC introduced 2 new functions: SetTextNative and SetImageNative. So what's the difference with previous SetText and SetImage functions? Basically they do the same thing, but not the same way.
The "Native" functions will use vMix indexes where Text and Image are indexed separately, when the original functions use vmix UTC internal state indexes.
Here's an example based on the report for scorebug.xaml I copied above :
- with SetImageNative, the index to use for updating "scorebugxtra" is 1 >> <image index="1" name="scorebugxtra">
- with SetImage, the index to use for updating "scorebugxtra" is 7, as it is the 8th object in this input (8 - 1 = 7. Index starts at 0)
5. As you might already have understood if you watched the video, the principle is simple:
- when we need it, we activate the appearance of scorebugxtra image by specifying its path and we define a text value for the area,
- when we don't need it anymore, we simply set the image path and the text value to... nothing!
This can be done with more objects at the same time. It is also possible to swap images with different colors. There are no limits for your creativity. This was a basic example just to get you started.
That's it. Do not hesitate to ask if you need more explanation about this. I think the video explains pretty well the principle. It's up to you now to experiment and create awesome scorebugs titles for your productions.
...
