logo

Live Production Software Forums


Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error

Options
Go to last post Go to first unread
nomski  
#1 Posted : Friday, December 2, 2016 7:27:00 AM(UTC)
nomski

Rank: Advanced Member

Groups: Registered
Joined: 10/14/2016(UTC)
Posts: 64
Location: Sheffield

I can't be the only person wanting to achieve this so hopefully someone can point me in the right direction! I need to create an animated scoreboard that has 8 columns and 6 rows. The first two columns are name and country so can take the data directly from a spreadsheet. The next 4 columns are success or fail boxes and the last two are the numbers that represent the boxes (also comes straight from the spreadsheet.

There are 2 issues I am facing. Firstly you don't seem to be able to address multiple rows of data in the data source for titles? Seems like a strange decision! Do you have to string everything together along one row if you want to display a live scoreboard? The second issue is making the success or fail boxes change colour based on a cell value. Is this even possible? I'm starting to think that it probably isn't! Any help on this would be much appreciated as I am really stumped at the moment.

Thanks a lot.
nomski attached the following image(s):
scoreboard.jpg (116kb) downloaded 47 time(s).

You cannot view/download attachments. Try to login or register.
doggy  
#2 Posted : Friday, December 2, 2016 8:02:43 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,057
Belgium
Location: Belgium

Thanks: 283 times
Was thanked: 916 time(s) in 755 post(s)
It is possible using value converters in codebehind

Mind you I am far from an expert coder but thanks to the help of some fellow vMixers I was able to put this example together (prior to v18 datasources) by reading xml data files and base the ranking background colors on their value

see in action in this post

doggy attached the following image(s):
value.jpg (225kb) downloaded 42 time(s).

You cannot view/download attachments. Try to login or register.
nomski  
#3 Posted : Friday, December 2, 2016 4:56:16 PM(UTC)
nomski

Rank: Advanced Member

Groups: Registered
Joined: 10/14/2016(UTC)
Posts: 64
Location: Sheffield

I checked out the Youtube link and the screen shot and this is amazing! I literally have no idea where to even begin to do this. Is there a place with all the info for this kind of coding? I don't know how you are doing the animations or anything really. I'm very impressed and equally jealous!

Any knowledge on this that would help me would be awesome.
stigaard  
#4 Posted : Friday, December 2, 2016 5:02:51 PM(UTC)
stigaard

Rank: Advanced Member

Groups: Registered
Joined: 5/20/2015(UTC)
Posts: 493
Man
Denmark
Location: Copenhagen, Denmark

Thanks: 378 times
Was thanked: 100 time(s) in 79 post(s)
I think that advanced titles like this, is easier to handle with software like CasparCG.
corporatejames  
#5 Posted : Friday, December 2, 2016 5:26:07 PM(UTC)
corporatejames

Rank: Advanced Member

Groups: Registered
Joined: 8/2/2015(UTC)
Posts: 364
Man
Australia
Location: Sydney

Thanks: 283 times
Was thanked: 76 time(s) in 62 post(s)
Some I have done for basketball with XML Data, All graphics for XAMl are also pulled from the CMS

corporatejames  
#6 Posted : Friday, December 2, 2016 5:28:40 PM(UTC)
corporatejames

Rank: Advanced Member

Groups: Registered
Joined: 8/2/2015(UTC)
Posts: 364
Man
Australia
Location: Sydney

Thanks: 283 times
Was thanked: 76 time(s) in 62 post(s)
Nice work @doggy
nomski  
#7 Posted : Friday, December 2, 2016 6:15:53 PM(UTC)
nomski

Rank: Advanced Member

Groups: Registered
Joined: 10/14/2016(UTC)
Posts: 64
Location: Sheffield

These are really good. Do you animate them in Blend or something? Or do you have to code it and then hope it looks how you wrote it? If that makes sense...

I'm from the video world not the code world. An after effects style layout that created the XAML for me would be the dream!
doggy  
#8 Posted : Saturday, December 3, 2016 5:00:47 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,057
Belgium
Location: Belgium

Thanks: 283 times
Was thanked: 916 time(s) in 755 post(s)
I am a "google" coder ;-)

Changing color based on a cell value example
using Blend, compiled into a .dll load as a vMix title
any value > 0 in textblock will turn the square yellow

Code:
<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:vMixTitleLibrary="clr-namespace:vMixTitleLibrary;assembly=vMixTitleLibrary"
	mc:Ignorable="d"
	x:Class="MainControl"
	Height="1080" Width="1920"
	>

    <Grid Margin="223.5,235.5,0,0"  HorizontalAlignment="Left" VerticalAlignment="Top" Height="681.833" Width="1397.415" RenderTransformOrigin="0,0" >

        <TextBlock x:Name="Num" HorizontalAlignment="Left" Height="60.833" Margin="372.5,213,0,0" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Top" Width="92" Foreground="#FFC6FF04" FontSize="48"/>

        <Rectangle x:Name="Rect" Fill="#FFFFB900" Height="60.833" Margin="657.833,213,611.582,0" Stroke="Black" VerticalAlignment="Top"/>
       
    </Grid>
</UserControl>


Code:
Class MainControl

Private Sub MainControl_DataContextChanged(ByVal sender As Object, ByVal e as System.EventArgs) handles me.LayoutUpdated

        If Val(Num.Text) = 0 Then
            Rect.Fill = Brushes.White
        Else
            Rect.Fill = Brushes.Yellow
        End If
    End Sub

End Class

File Attachment(s):
ValueColor.zip (4kb) downloaded 87 time(s).

You cannot view/download attachments. Try to login or register.
thanks 3 users thanked doggy for this useful post.
corporatejames on 12/3/2016(UTC), AlexSandr on 2/28/2018(UTC), smudge1977 on 4/17/2018(UTC)
nomski  
#9 Posted : Saturday, December 3, 2016 7:02:15 AM(UTC)
nomski

Rank: Advanced Member

Groups: Registered
Joined: 10/14/2016(UTC)
Posts: 64
Location: Sheffield

Wow. Fortunately with the new datasources functionality I can do the changing of boxes etc. dynamically. However is there a tutorial anywhere for actually designing an animated title? It would be easy to use title designer to bring a .png add a load of text and image boxes etc. and then fill in all the data dynamically from my excel scoring system but I really want it to be animated like the .mov file attached which I did in after effects.

Maybe I'm asking too much from XAML/my lack of knowledge?
File Attachment(s):
Lower3rd1.mov (1,978kb) downloaded 79 time(s).

You cannot view/download attachments. Try to login or register.
doggy  
#10 Posted : Saturday, December 3, 2016 7:51:34 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,057
Belgium
Location: Belgium

Thanks: 283 times
Was thanked: 916 time(s) in 755 post(s)
Per your mov example

look at the code for the animated titles included in vMix to get an idea (AnimatedInOutHD.xaml)
play with the animations in Blend to create something like your example

no code behind needed, just xaml
nomski  
#11 Posted : Saturday, December 3, 2016 9:22:25 AM(UTC)
nomski

Rank: Advanced Member

Groups: Registered
Joined: 10/14/2016(UTC)
Posts: 64
Location: Sheffield

Ok, I think I'm getting there! Thanks for the tip. Only thing that is a bit odd is that when I add a new timeline and do an animation it fails in vMix as it adds things in blend which don't seem to be supported in vMix. The error is:

"The tag "EasingDoubleKeyFrame" does not exist in XML namespace 'http://schemas.microsoft.com/winfx/2006/xaml/presnetation'. Line '5' Position '10'.

Is there something I need to update somewhere to make this work? Or do I need an older version of Blend?

Thanks again. I feel pretty close now! The only thing left is to get the animations to work as in and outs and it should be sorted.
doggy  
#12 Posted : Saturday, December 3, 2016 9:26:42 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,057
Belgium
Location: Belgium

Thanks: 283 times
Was thanked: 916 time(s) in 755 post(s)
The error needs to be solved by more knowledgable people , sorry

storyboard1 is the in animation , storyboard2 the out
Cpilcher  
#13 Posted : Saturday, December 3, 2016 10:08:05 AM(UTC)
Cpilcher

Rank: Advanced Member

Groups: Registered
Joined: 8/3/2015(UTC)
Posts: 323
Location: Chicago, IL

Thanks: 22 times
Was thanked: 57 time(s) in 47 post(s)
For some reason in Blend when you create key frames they are created as "Double Easing" but you can only use "Keyspline" key frames. You need to select the key frames listed under each storyboard and make sure they are specified as "Keyspline"

Blend is very confusing to work with but once you get the hang of it you can make some awesome titles and graphics

Chuck
nomski  
#14 Posted : Monday, December 5, 2016 4:31:03 AM(UTC)
nomski

Rank: Advanced Member

Groups: Registered
Joined: 10/14/2016(UTC)
Posts: 64
Location: Sheffield

Thanks for the tip. It works with that added in. I've done my first successful title and I think I've "unlocked" it now.

Let me know what you think.
File Attachment(s):
Lower3rd1.xaml (19kb) downloaded 93 time(s).

You cannot view/download attachments. Try to login or register.
doggy  
#15 Posted : Monday, December 5, 2016 6:32:11 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,057
Belgium
Location: Belgium

Thanks: 283 times
Was thanked: 916 time(s) in 755 post(s)
Thumbs Up

though would get rid of :

<Run Text="FIRST "/><Run Text="SECOND"/>
and
<Run FontWeight="Bold" FontSize="22" FontFamily="Nexa Bold" Text="COUNTRY"/>

as it is messing up changing the content from within vMix

Just put
<TextBlock x:Name="Name" Text="FIRST SECOND"
and
<TextBlock x:Name="Country" Text="COUNTRY" FontSize="22" ......
Cpilcher  
#16 Posted : Monday, December 5, 2016 11:39:11 AM(UTC)
Cpilcher

Rank: Advanced Member

Groups: Registered
Joined: 8/3/2015(UTC)
Posts: 323
Location: Chicago, IL

Thanks: 22 times
Was thanked: 57 time(s) in 47 post(s)
Glad you got it working. So many possibilities now. Keep sharing your ideas
nomski  
#17 Posted : Friday, December 9, 2016 5:08:34 AM(UTC)
nomski

Rank: Advanced Member

Groups: Registered
Joined: 10/14/2016(UTC)
Posts: 64
Location: Sheffield

I've now got a scoreboard and some other bits and pieces working. Something that would be awesome is being able to control the size of a rectangle from a data source. I.e. when an excel spreadsheet has "100" in it, make the rectangle 100 pixels wide.

Does anyone if that is possible?
doggy  
#18 Posted : Friday, December 9, 2016 5:38:45 AM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,057
Belgium
Location: Belgium

Thanks: 283 times
Was thanked: 916 time(s) in 755 post(s)
Is possible

Think about the example in post #8 but instead of color make it a rectangle size based on a input value and make that input itself hidden from display if you don't want to see the value

Code:
Rect.Width = Val(Num.Text)
Le-bo2d9  
#19 Posted : Saturday, May 18, 2019 10:16:28 AM(UTC)
Le-bo2d9

Rank: Advanced Member

Groups: Registered
Joined: 3/25/2019(UTC)
Posts: 38
Belgium

Thanks: 1 times
Was thanked: 5 time(s) in 5 post(s)
Hi doggy,

I'm new in VmiX and I'm trying to change the color of a textbox based on a field in an excel file The color is writen in Hex

I found this post of you, but I don't know how to implement the code and the dll?

Can you please help me out?

Kind regards

Koen Deschepper
doggy  
#20 Posted : Saturday, May 18, 2019 1:40:42 PM(UTC)
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,057
Belgium
Location: Belgium

Thanks: 283 times
Was thanked: 916 time(s) in 755 post(s)
thanks 1 user thanked doggy for this useful post.
Le-bo2d9 on 5/19/2019(UTC)
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.