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
davidcallahan  
#1 Posted : Wednesday, March 17, 2021 9:07:52 PM(UTC)
davidcallahan

Rank: Advanced Member

Groups: Registered
Joined: 1/22/2020(UTC)
Posts: 47
France
Location: Montpellier

Thanks: 14 times
Was thanked: 2 time(s) in 2 post(s)
Hi !
During the french municipal elections I had the following problem to solve :

We get voting datas from 50 cities, each city having multiple candidates.
We have up to 30 journalists on the field, we'll have a video feed for some, for others we won't (we don't know which one will have one)
There will be up to 150 people talking during the live.

TO DO :

1 - Find a way to display a city's voting results from 50 cities, displaying the most voted up, less down, with progress bars, coloured with their political party's colors (does that makes sense ?), showing abstention, "partial results" or "definitive results" sentence.
2 - Find a way to display a journalist's picture if he's not able to be filmed.
3 - Find a way to display lower thirds for hundreds of different people, adding more during the live.

Let's start by the easiest task :

3 - Hundreds of different names on lower thirds :


I chose to use the datas from a google sheet file. I created a "user friendly" sheet where the boss can write the following : "Name" ; "Title" ; "Journalist/Guest dropdown"
Then I created another sheet to parse everything as desired : uppercase, column name corresponding to my GT title's text layer.
Connecting the lower third input to the data sheet.
Et voilà, scrolling in the data table helped finding easily any people's name that could be on screen.
With a refresh rate of 50000ms the boss could write down a new name and I'd get it in 50 sec maximum (I had to used that time because of Google Sheet's requests limitations)


2 - Journalists' pictures


Remember the "Journalist/Guest" dropdown from above ?
I used that to create a "picture_path" column.
Parsing the name to something like "C:/Pictures/Journalists/NAME_JOURNALIST.png" I was able to create a new GT Title with a picture in it.
In VMIX I just needed to associate the picture's path value to that column.
So that every time I was selecting a new row inside the data table, the picture would change (IF the person IS a journalist AND we have the picture) on that particular title.
So that if there's no video, even at the last second, we can display a name with the picture of him/her.

1 - Voting system


3 parts to work on this :

a - Datas
b - Creating a title
c - Using it in real conditions, 2 pages per city, up to 6 cities alternately.

a - I had every datas on a website. To options from here : Getting a feed in JSON ( 1 file per city) OR copying everything manually from the website.
The boss wanted us to be able to change a result in case there would be an issue with the website.
So using the JSON was not an option anymore.
I used the same GSheet binding option to make it.

- Configuration page with every political camps,every cities, colors, many positions (for the XAML display)
- Data page :
The writer can add a candidate, choose the political party from dropdown, add his score (in % OR number of votes)
You got it, if he does a mistake, it can go live. So we created multiple checkpoints.
- Parsing pages : Everything goes in UPPER case, gets sorted to get the best score first.
One name per row.
- VMIX Friendly page : We change the display to on city per row.
There can be up to 16 candidate -> means 16 column for each name, 16 columns for the progress bar color, for the x and y position (position for the bar, the name, the result, etc.)
I have something like 100 columns total.
x6 sheets cause I need to display 6 cities alternately

b - I created the title using XAML in Blend for VS. Huge thanks to user Doggy for his help on this !!!
Every XAML property (position, colour, text, etc.) can be binded to a text value.
The text value are binded in VMIX with our GSheet dataset.
Ex : I need to give the 0x45F2A7 color to my "progress_bar_5" (representing the fifth candidate).
There's a column titled "progress_bar_colour_5" in my GSheet.
I created a Text in my XAML title that I set to 0% opacity, this Text's name will be "progress_bar_colour_5", binding the value to the GSheet corresponding column.
In my Progress Bar Colour property I bind the value to the text value of "progress_bar_colour_5".
Then when I change the value in GSheet (or manually in VMIX), it will change dynamically !
I repeated the process for everything : x and y positions of every elements, colors, text values.

c - In real conditions it can be hard to use. I still have the 50 seconds refresh rate.
There's someone next to me filling the GSheet according to the website's datas.
There's a journalist saying "I want to go on set and talk about those cities"
They check if every values are good.
I have set a streamdeck to preview datas and reload animations
Once everything is good I wait for the director to ask for the desired results to display, page 1, 2, next city etc.

I'll take some time to show some pictures of it !
Don't hesitate if you have some questions or suggestion that could have made the solution easier :)

Again, thanks a lot to doggy and DWAM users, they helped a lot by giving amazing informations.

David
thanks 1 user thanked davidcallahan for this useful post.
lyco on 10/29/2023(UTC)
menluddevafan  
#2 Posted : Thursday, March 18, 2021 3:54:50 PM(UTC)
menluddevafan

Rank: Newbie

Groups: Registered
Joined: 1/31/2019(UTC)
Posts: 7
Sweden
Location: Sthlm

Thanks: 1 times
Was thanked: 1 time(s) in 1 post(s)
Morning and bonjour,

I peaked in to the forums for the first time in a while to read up on the new release of vMix.

Glad to read your post since it looks like you're doing something similar to what I'm doing. Althouch you seem to have a lot more going on and I'm not into the .xaml-parts so much.

I'm doing statistics for winter sports.

Thought I'd share a few short thoughts from my point of view:


- To handle the google API requests limit I'm merging all my data into one big sheet (that way using one URL to fetch data) with different tabs. Minimizing number of requests in that way.

I usually keep track of requests/sec in the google cloud platform. I haven't seen the service crash/stop due to "Too many requests", it seems to just skip every other request as you go over the limit.

- For retrieving live data I get JSON from an API. The tricky part of this is that vMix needs the JSON to be wrapped in an array []. I ended up writing a nodejs server that I run on the vMix-machine (or better yet on another machine on the same LAN as vMix). The nodejs-machine acts as a middle-ware and I've found it really helpfull to be able to reformat and even re-map data on the fly in there instead of in vMix.

JSON from API -> nodejs on my LAN -> vMix. Since I'm already hosting the .json files locally with nodejs I also host all pictures from there. That's turned outbto be handy for the same reason as the JSON data. Easier to change stuff on the fly.


Being sleep deprived and not having had coffee yet I probably missunderstood a few things in your post. But I was so glad to see you sharing your process, working with vMix in a similar way I do, that I thought I should atleast try to give some input.

Good luck, feel free to reach out if you have any questions avout my solution and please share a link or what not if you can after tye production!

Have nice day
//Ludde
davidcallahan  
#3 Posted : Thursday, March 18, 2021 6:00:29 PM(UTC)
davidcallahan

Rank: Advanced Member

Groups: Registered
Joined: 1/22/2020(UTC)
Posts: 47
France
Location: Montpellier

Thanks: 14 times
Was thanked: 2 time(s) in 2 post(s)
Hi!
Thanks a lot for your reply, yeah it looks actually the same process!
Did you use any progress bat or visualization mean to show the data? Or only text boxes?

Your way of doing it looks actually the best to me. Concerning requests I've been watching carefully the cloud platform also, and it looks like the more cells are used the more requests it gets. I'm actually working on a 30 tabs sheet without a lot of data inside and I get the error message quite frequently. My thought would be to have as few tabs as possible.

Creating a server looks like the proper way to do it. Parsing everything in the array and here we go.

Thanks a lot for your answer again!
Unfortunately I can't give that much pictures of it, I deleted all the code and the Vmix project 1 month ago while cleaning the machine... A good way to start a better one with code next time :)
menluddevafan  
#4 Posted : Thursday, March 18, 2021 7:04:14 PM(UTC)
menluddevafan

Rank: Newbie

Groups: Registered
Joined: 1/31/2019(UTC)
Posts: 7
Sweden
Location: Sthlm

Thanks: 1 times
Was thanked: 1 time(s) in 1 post(s)
Quote:
Unfortunately I can't give that much pictures of it, I deleted all the code and the Vmix project 1 month ago while cleaning the machine... A good way to start a better one with code next time :)


- Haha, that's one of the nice things working with live. Plan it, do it, forget it :)

Quote:
Did you use any progress bat or visualization mean to show the data? Or only text boxes?


- No I actually didn't do progress bars/visualisation. Only text boxes. I've had requests from customers to do that. My first thought would be to do that in html through nodejs. Rendering html with react/vue/angular or what have you. I'm not at all good at that so having looked at it briefly I would need a week or two on youtube and the interwebs grinding tutorials I guess. I got stuck on cross domain requests trying to set that up last time. Someday I guess I'm going to have to figure it out. I guess there are solutions for that online, maybe the hard part about it is to have it continuously updating.

Quote:
My thought would be to have as few tabs as possible.


- Interesting. I'll have to look in to that. I had a lot of requests that I couldn't figure out where they came from. Might be like you say. I ended up creating a new API-key in the case I forgot to clear my datasources on other machines I've worked with. Have to do a proper test with a fresh API-key to test with.

One thing I did try was to share a .xls file on the local LAN in the control room. Then have the producer/who ever needed to modify data edit that file. Didn't have time enough to set it up right so I just went with the sheet as you did telling the crew there will be a delay of max 30 sec to get the data into vMix. I'm sure there are better ways to do that.

Quote:
Creating a server looks like the proper way to do it. Parsing everything in the array and here we go.


- It worked great for me. I had no clue about nodejs and manage to have it more or less production-ready in two weeks following tutorials, thinking a little and just doing. It's absolutely necessary for my application since all of the sudden things can change in the API and I get peoples phone numbers instead of team name in the lower thirds.



Have a good one!
davidcallahan  
#5 Posted : Tuesday, October 5, 2021 10:13:46 PM(UTC)
davidcallahan

Rank: Advanced Member

Groups: Registered
Joined: 1/22/2020(UTC)
Posts: 47
France
Location: Montpellier

Thanks: 14 times
Was thanked: 2 time(s) in 2 post(s)
Hi,
I wanted to update this project, since I did everything again from scratch !

Here is the result :



There are 6 pages of results (horizontal bar graphs) in which can be displayed up to 8 candidates.

Every pages are VMIX inputs, in an XAML title format (Huge thanks to @doggy for his help on this !) that I built using BLEND for visual studio and the VMIX library inside of it.

Each titles are connected to GSheet datasources : 1 Spreadsheet per input.

There is a lot of GSheet wizardry going on to have the datas displayed as I want : 1 column per text layer.

The main issue with what I wanted to do is to dynamically change the size of each bar based on votes, AND the text alignment (if votes = 40%, then the text "40%" will be farer right than "1%")

This magic happens in the XAML code, where you can bind a property value to a text value. So that I can calculate all of this inside of my GSheet and give the XAML file what it needs : "top, bottom, left, right" in pixels.

I could give the source code for further improvments if anyone needs it.

The best optimizations for the future would be the following :

- Using C# codebehind abbilities to have something even more dynamic and calculated.

- Preferring Python over GSheet to create a JSON file as a datasource (more work, more control over calculations but less editable)

If anyone has ideas on how I should have made it, please tell me :)
Pavel Vesel  
#6 Posted : Tuesday, February 1, 2022 5:02:04 PM(UTC)
Pavel Vesel

Rank: Newbie

Groups: Registered
Joined: 1/18/2019(UTC)
Posts: 2
Ukraine
Location: Запорожье

Originally Posted by: davidcallahan Go to Quoted Post
Hi,
I wanted to update this project, since I did everything again from scratch !

Here is the result :



There are 6 pages of results (horizontal bar graphs) in which can be displayed up to 8 candidates.

Every pages are VMIX inputs, in an XAML title format (Huge thanks to @doggy for his help on this !) that I built using BLEND for visual studio and the VMIX library inside of it.

Each titles are connected to GSheet datasources : 1 Spreadsheet per input.

There is a lot of GSheet wizardry going on to have the datas displayed as I want : 1 column per text layer.

The main issue with what I wanted to do is to dynamically change the size of each bar based on votes, AND the text alignment (if votes = 40%, then the text "40%" will be farer right than "1%")

This magic happens in the XAML code, where you can bind a property value to a text value. So that I can calculate all of this inside of my GSheet and give the XAML file what it needs : "top, bottom, left, right" in pixels.

I could give the source code for further improvments if anyone needs it.

The best optimizations for the future would be the following :

- Using C# codebehind abbilities to have something even more dynamic and calculated.

- Preferring Python over GSheet to create a JSON file as a datasource (more work, more control over calculations but less editable)

If anyone has ideas on how I should have made it, please tell me :)

Hello. Is it possible to get a file with graphs for study? I really need such graphics, and quite quickly, but I'm bad at programming, I'm more of a solder. If you'd be kind enough to share the file, my mail is: p.veselkov@gmail.com
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.