Parsing a .json file - virtual car dashboard

[unihumi_2]

Hello guys,

I've been trying to build a virtual car dashboard but to no success as of yet.

I have a ton of data from an actual city bus which is powered by an electrical drive system. So my client wants to have a splitscreen video showing the driving bus on the left side filmed with a GoPro and on the right side I need to visualize the live data on a virtual dashboard, which then show speed, engine, steer and charging state of its battery.

I got that data as a CSV file, converted it to a JSON file which now looks like this:

[

  {

    "Speed": 14,

    "Engine": "24,5",

    "Steer": "1,1",

    "Charge": "30,1"

  },

  {

    "Speed": 14,

    "Engine": "24,5",

    "Steer": "1,1",

    "Charge": "30,1"

  },

  {

    "Speed": 14,

    "Engine": "24,5",

    "Steer": "1,1",

    "Charge": "30,1"

  },

  {

    "Speed": 14,

    "Engine": "24,5",

    "Steer": "1,1",

    "Charge": "30,1"

  },

For every second the bus printed out 50 of those entries.

Once imported to after effects, what do I need to do?

Do you have any clues?

Thanks for the time reading this!

Stefan

[Mylenium]

Not sure what you're asking. Of course you're still going to need some expressions to actually use the data, which in your case will need to be a bunch of for() loops due to the JSON being the most primitive and inefficient type with just bullet point entries basically. No way to just drag & connect this type of data to a property.

Mylenium

[unihumi_2]

Thanks for the quick response. I tried editing my previous post but apparently I was as stupid doing so as I am solving my expression problem. [edited]

I was about to add the following:

---------------------------------------

Once imported to after effects I put the JSON file into my comp, which then looks like this:

I figured, the first dataValue inside the brackets refer to every one of those entries of the value "Speed" inside my JSON file. But now I don't know how to map those 50 values per second to my graph. I have built a simple graph which goes from 0 to 100 percent so I guess I could just pick whip this value to the speed value which I somehow have to transform into percentage.

Do you have any clues?

Thanks for the time reading this!

Stefan

[Dave Merchant]

Unfortunately AE doesn't automatically understand a normal JSON file as "a set of values over time", it sees it as an array of objects, all with fixed values. Connecting the values to the movement of something on screen has to be done by hand, using expressions or pick-whipping. There's also no point-and-click solution for making a graph.

https://lesterbanks.com/2018/09/animate-multi-line-chart-ae/ covers the workflow involved. Whether the data is controlling the X/Y position of a dot, or the content of a text layer, makes no difference.

[unihumi_2]

Thank you, I will look into it!

//edit

I think I did not do a very good job describing this whole endavour. Here's my second try:

---------------------------------------------------------------------------------------------

I got a request from my colleague to visualize data which was aquired directly from the interface of an electrical drive city bus. This electical drive engine is new and the client wants to visualize the live battery data (and something more) on his website via splitscreen: a view of the bus driving on the left side and the corresponding live data on the right side, visualized as a digital dashboard.

It is going to look like this:

The data from the bus I'm about to describe was grabbed 50 times per second to a CSV file, which means I have 50 values for each parameter every second to work with.

So the csv file I received looked like this:

After removing everthing I did not need for further work, I got this:

After importing it to After Effects I realised it won't do me no good as long as it's not in JSON file format so I converted the CSV to JSON which then looked like this:

In After Effects it finally looks like I could work with those values:

You see After Effects interprets the JSON file in a two dimensional way: dataValue([x,y]) whereas x represents the number of entry and y stands for the entry's parameter (0 = speed, 1 = engine, 2 = steer, 3 = charge)

Now the most basic thing I want is to have my text layer in after effects just show me the "speed" value. But it needs to change according to this JSON table. So for instance, if I look at frame 0 in my comp the text value should display the very first speed value taken from the first entry of the JSON file (which is called "dataValue([0,0])" in After effects. When I look at frame 136 the text should grab its value from "dataValue([136,0])"

I could pick whip the text layer's source parameter to one of those values, but then I only have one constant value. I somehow need to map it to the second dimension ("x") and tell After Effects the first dimension ("x") should always be the same as the current frame the comp is in.

Do you have any clue how to write this expression?

Thanks a ton!

Stefan

[Dave Merchant · Accepted solution]

OK, first thing - unless your data contains complex objects, forget JSON. After Effects can read CSV or TSV files just fine, and more efficiently since there's less packing. Remember the data file is read continually just in case a value has updated, that's the point behind the "dynamic" data feature.

Let's suppose you have a CSV file that begins something like this...

Speed,Battery,Gear
80,99.6,D
82,99.5,D
81,99.4,D

etc.

In scripting, row and column counts begin at zero, so the "data " for speed starts at [0,1]  - ignoring the column header - and continues [0,2] ... [0,3].... etc.

It's important to have the header row as we'll see shortly.

Second thing - don't put your data into the composition as a layer. You simply read it from the project panel directly.

So, import the CSV file - let's say it's called "data.csv" - and create a text layer in your composition. Twirl down to "Source Text" and alt-click the stopwatch to create an expression.

Assuming your composition is running at 50fps and the data is 50 samples/sec, all you need to get is the data point for the frame number (since frame numbers begin at 1, that header row in the file is automatically ignored). You get the frame number using timeToFrames(), and you get a CSV cell using dataValue()... so for "speed" write this in the expression:

t = timeToFrames();
footage("data.csv").dataValue( [0,t] )

For "gear" just change the column number

t = timeToFrames();
footage("data.csv").dataValue( [2,t] )

If the composition frame rate doesn't match the sample rate, insert a line that does some math with "t" before using it. If your composition is NTSC 29.97 and your sample rate is 50Hz, that math will hurt. Blame the NTSC.

Notes:

• Rather that writing footage("data.csv") every time you can pickwhip the data file directly from the project panel while the expression editor is open.
• You must have enough data - if AE reads beyond the end of a file, it'll throw an error. To "pause" on the last entry, you can use a simple restriction on the value of t, such as if (t>1000) t = 1000;

[unihumi_2]

Dear Dave,

this is exactly what helped me! Thank you very much! ❤️