Grid.png

The Grid Widget is an advanced widget and is a powerful tool for turning data into beautiful looking rows and columns within an overlay. 


The Grid Widget can significantly reduce the time it takes to build all sorts of Standings, Tables, Fixtures, Etc. because all you need is one row or column, and the Grid Widget will handle the replication of multiple rows and columns. This includes handling multiple pages of data with dynamic update animations between pages, which you will see at the very end of this tutorial.

This is a step-by-step of how to build an NFL standings overlay consisting of team name, team logo, wins, loses, and ties. It's for a more advanced user of Singular Composer but once you get through it, you'll find it's not too bad.

There's a bit of setup when using the Grid Widget because it needs the right structure within the Composition Tree to do its magic.

To begin, the Grid Widget is dependent on a dedicated Composition called Grid/Composition that the Grid Widget will create for you automatically, and then you will design the actual layout. It's within this Grid/Composition that you'll build the overlay you see here:

This is effectively one row of data with five variables. Logo, Team, Win, Lose, and Tie.

The Grid Widget will automatically duplicate this row to achieve our end goal of creating a full Divisional NFL standings overlay, which will look like this when we're done:

Another way to look at it the Rows and Columns of this Standings overlay is this:

Here's a low resolution preview of what the end result will look like:

Standings.gif

 

 

 Let's get started!

1 - Add a New Subcomposition

We always want each overlay in it's own Sub-composition so we can take advantage of Layer Logic. Rename the sub-comp "NFL Standings."

2 - Open NFL Standings and add the Grid Widget

Click on the arrow icon to open. Then, select Widget from the Add dropdown and choose Grid Widget.

3 - Set Grid properties

Select the Grid tab within the Property Panel to display the Grid Widget properties. In this order, set Columns to 1 and Rows to 4, then click the Edit button.

Clicking the Edit button navigates you into the Grid/Composition, the one mentioned at the beginning of this tutorial where we build the single row like this:

You'll always want to set the columns and rows in the Grid Widget first because it sets up the proper size and aspect ratio of the Grid/Composition. In this example, we set Columns: 1 and Rows: 4, as in the image below.

If you've set it incorrectly before you clicked Edit, simply go back up to the NFL Standings Sub-Composition by clicking on NFL-Standings in the menu bar (or Composition Navigator) and set the Columns to 1 and Rows to 4 then click Edit, and you're good to go.

Note

The NFL Standings Subcomposition is the parent to Grid/Composition. It's in the NFL Standings where you'll setup Layer Logic.

In Grid/Composition you'll build the single row which is this:

Another way to see it:

 

 Let's continue building...

4 - Add a Rectangle Widget

Click the Rectangle Widget Icon from the menu bar. Rename this to Main BG for Main Background. Adjust the Rectangle's properties and colors to your preference.

5 - Add a Logo Background layer

Right click Main BG and select Duplicate. Rename the duplicated page Logo BG and change the color to grey. Set the Anchor Point to the left, unlock the Size scaling, and set X=12.0%.

You now have this in your render window and the background of the row is complete. Next step is to add the Text Widgets and Image Widget for the logo.

 

6 - Add team name text

Click the A icon to add a Text Widget. Name this Team. Click the Transform tab and set the properties as seen in the image below. 

  • Set the Anchor Point to the left
  • Position X=12%, Y=0.0%
  • Unlock Size
  • Set Size X=55%, Y=100.0%

 

7 - Set Update Animation Properties

Click the Update tab and enable the Active button in the upper right corner, then set the properties as seen in the image below.

This turns on Update Animations that get triggered automatically when new JSON data is pushed into the Grid Widget.

This is where you can have quite a bit of fun after we're done building this Composition. Numerous possible combinations are possible.

 

8 - Set Text Properties

Click the Text Tab, set Line Height to Custom, and set Custom Line Height to 340%.

Let's finish off the Text with the Win, Loss, and Tie Text Widgets. Since all of the parameters will be the same as the Team Text with the exception of position and size, we'll duplicate the Team Text three times and save our click finger some undo strain!

 

9 - Duplicate Team text layer

Right click Team and select Duplicate. Duplicate the Team three times, then rename the duplicates to W, L, and T (Short for Win, Lose, Tie).

 

10 - Set Transform for W

Click the Transform tab for W and set the properties:

  • Position X: 65.0%
  • Size X: 10.0%

 

11 - Set Transform for L

Click the Transform tab for L and set the properties:

  • Position X: 77.0%
  • Size X: 10.0%

12 - Set Transform for T

Click the Transform tab for L and set the properties:

  • Position X: 89.0%
  • Size X: 10.0%

 

13 - Set Text Properties for W, L, T

Click the Transform tab for W. Set the text to center justify and set Indent to 0%. Do the same for L and T.

Important

Unfortunately, multi-select is not supported in Composer at this time

 Next up is the team Logo.

 

14 - Add an Image Widget

Click the Image Widget Icon from the menu bar and rename the layer to Logo.

Note that you won't actually see an image when you add the Image Widget because there's no URL path in the Image Widget yet. Fear not.

15 - Transform the Logo

Click logo in the Composition Tree then click the transform tab. Adjust the following:

  • Position X: -44.0%
  • Unlock size
  • Size X: 12.0%

 

16 - Add an Update Animation to the logo

Just as we did with the text, the logo also needs an update animation. Click logo in the Composition Tree then click the Update tab. Set the Update Animation to Active and set the properties as seen in the image below.

At this point your Grid/Composition should look like this:

The next steps involves connecting Control Nodes to the Widgets in the Composition Tree so the JSON data populate them with data.

Let's start with the Logo.

17 - Add a control node to the logo image

First select Logo in the Composition Tree (A). Next, click the image tab (B), then click the word "Image" under Properties (C). 

In the window that pops up, select "Add to Control Node."

 

If you look in the lower right area, you'll notice that a Control node was created with the same name as the Composition Tree layer + "-image" because it's an image Widget.

A Control Node is one of our methods for connecting Widgets in a Composition Tree to data (the other being data nodes if the data is automatically pushed...more on that here).

The Grid Widget, which is located in the parent Sub-Composition above the Grid/Composition, will be pushing data into the Logo-image URL control field below. Because the Control Node is now connected to the Logo in the Composition Tree, the image will appear. 

Also note that the text image in the upper left turned green which tells you it's connected.

18 - Add Control Nodes to the remaining text fields

Repeat the process in Step 17 to add control nodes to the Team, W, L, and T fields.

 

Once you're done, the single row Grid/Composition should look like this:

You can copy and paste in some real data into the Control node fields so you can see what it'll look:

 

Enter this:

Team - Text: New England Patriots
Logo-image: https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/4d15kjv5wub78mekgtpd166w4.png
W - text: 11
L - text: 5
T - text: 0

 

...to get this:

19 - Edit Control Node IDs match the JSON variables

The names we used in the Composition Tree (A) can be anything we want. I named them to match the JSON data variable names so as to not get confused.

 

However the Control Node ID's MUST match the JSON data variables. The JSON data variable names are here in bold green:

{
"Team":"New England Patriots",


"Logo":"https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/4d15kjv5wub78mekgtpd166w4.png",


"W":"11",


"L":"5",


"T":"0"
},

 

To change the Control Node ID, click the Edit Control Node button for Logo - image.

Edit the ID to "Logo" so it matches the JSON variable name.

Do the same for the remaining control nodes. 

You don't need to edit the Title field underneath ID (it's what appears in control applications).

 

20 - Paste JSON data into the Grid Widget

Click NFL Standings Sub-Composition, then click the tab NFL - Standings. This will take you to the NFL Standings Sub Composition.

Copy all of the JSON data below:   

{"content":[
 {
"Team":"Baltimore Ravens",
"Logo":"https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/9x16697f8jzyta0f1yx9ftj8h.png",
"W":"10",
"L":"6",
"T":"0"
 },
 {
  "Team":"Pittsburgh Steelers",
  "Logo":"https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/94jw0ryhnfl1094x8sms7tgmf.png",
  "W":"9",
  "L":"6",
  "T":"7"
 },
  {
  "Team":"Cleveland Browns",
  "Logo":"https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/9ueytjx99g72dfb7wy4u6tk7t.png",
   "W":"7",
   "L":"8",
   "T":"1"
 },
 {
  "Team":"Cincinnati Bengals",
  "Logo":"https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/d2rtnr51xhtuvmj91br71osg3.png",
   "W":"6",
   "L":"10",
   "T":"0"
}]}

 

Paste the JSON data into the content field of the Grid Widget.

If the outline around the JSON content is red, it means the JSON is not formatted correctly. It could be that it was not copied and pasted correctly.

Voilà - It Works !

 

Overview

What's going on here? It's much easier to get your head around things now that we can see the big picture.

A) This Sub-Composition is where the Grid Widget lives and where we define the Grid properties, such as the number of columns and rows, and spacing between the columns and rows. In this case, it's a 1 x 4 Grid arrangement.

It's also handles the processing of the JSON data. 

B) This is where we define our single Row overlay - the Grid/Composition. The Widget replicates this row based on the what's set in the Grid Widget.

But wait...there's more...

Copy and Paste the full NFL Standings JSON data below into the Grid Widget and then use then try changing the Current Page to 2, then 3, etc....

 

Full NFL Standings JSON:

{
"content": [
{
"Team": "New England Patriots",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/4d15kjv5wub78mekgtpd166w4.png",
"W": "11",
"L": "11",
"T": "0"
},
{
"Team": "Miami Dolphins",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/17rrojpsfp5dn795td3snznwm.png",
"W": "7",
"L": "9",
"T": "0"
},
{
"Team": "Buffalo Bills",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/80cfzhmvjwrbxyl0coffwywpj.png",
"W": "6",
"L": "10",
"T": "0"
},
{
"Team": "New York Jets",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/5br75okktdgyaqxj35u5dv6bt.png",
"W": "4",
"L": "12",
"T": "0"
},
{
"Team": "Baltimore Ravens",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/9x16697f8jzyta0f1yx9ftj8h.png",
"W": "10",
"L": "6",
"T": "0"
},
{
"Team": "Pittsburgh Steelers",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/94jw0ryhnfl1094x8sms7tgmf.png",
"W": "9",
"L": "6",
"T": "0"
},
{
"Team": "Cleveland Browns",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/9ueytjx99g72dfb7wy4u6tk7t.png",
"W": "7",
"L": "8",
"T": "0"
},
{
"Team": "Cincinnati Bengals",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/d2rtnr51xhtuvmj91br71osg3.png",
"W": "6",
"L": "10",
"T": "0"
},
{
"Team": "Houston Texans",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/bs7lev901eykp4exr224p63hz.png",
"W": "11",
"L": "5",
"T": "0"
},
{
"Team": "Indianapolis Colts",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/bp0x603lemg03e0p4ca7nw5kh.png",
"W": "10",
"L": "6",
"T": "0"
},
{
"Team": "Tennessee Titans",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/4k49uhco5vwmahyi4l02wdaa1.png",
"W": "9",
"L": "0",
"T": "0"
},
{
"Team": "Jacksonville Jaguars",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/e650583rlknv28poe8tvd2ccx.png",
"W": "5",
"L": "11",
"T": "0"
},
{
"Team": "Kansas City Chiefs",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/170ragzhd5k1e37x4bx7fp8xx.png",
"W": "12",
"L": "4",
"T": "0"
},
{
"Team": "Los Angeles Chargers",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/3abglcaootblfj04poh17r290.png",
"W": "12",
"L": "4",
"T": "0"
},
{
"Team": "Denver Broncos",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/eha8m26m9k8vnnldeo87m6mss.png",
"W": "6",
"L": "10",
"T": "0"
},
{
"Team": "Oakland Raiders",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/9j3wv0wwbt4cawbrj5nt5ys2s.png",
"W": "4",
"L": "12",
"T": "0"
},
{
"Team": "Dallas Cowboys",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/9i7etcpqnvnx5f6nsv17ifhqk.png",
"W": "10",
"L": "6",
"T": "0"
},
{
"Team": "Philadelphia Eagles",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/c9zmv2bro8qqif0t48l0j8kbh.png",
"W": "9",
"L": "7",
"T": "0"
},
{
"Team": "Washington Redskins",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/6ml2rdm6by636ucmdyjzbjgu1.png",
"W": "7",
"L": "9",
"T": "0"
},
{
"Team": "New York Giants",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/ak811mzf28qob2uqwrxnl817w.png",
"W": "5",
"L": "11",
"T": "0"
},
{
"Team": "Chicago Bears",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/6c7bh6o879lw0sdqjwwenhebp.png",
"W": "12",
"L": "4",
"T": "0"
},
{
"Team": "Green Bay Packers",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/dpbey9ae6ek9wnf3uw03z6np1.png",
"W": "8",
"L": "7",
"T": "1"
},
{
"Team": "Minnesota Vikings",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/8z8zg664o0q0ob4a6ab3kvspb.png",
"W": "6",
"L": "9",
"T": "1"
},
{
"Team": "Detroit Lions",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/5dqwb6vkqhagy6no1kbg1dnga.png",
"W": "6",
"L": "10",
"T": "0"
},
{
"Team": "New Orleans Saints",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/2lx8c17tl1bieb9dhmnvftl7h.png",
"W": "13",
"L": "3",
"T": "0"
},
{
"Team": "Atlanta Falcons",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/8w66hgsfkjz35llx39qecnipu.png",
"W": "7",
"L": "9",
"T": "0"
},
{
"Team": "Carolina Panthers",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/ep8flv44hd7yqf1rnf9ky1k4n.png",
"W": "7",
"L": "9",
"T": "0"
},
{
"Team": "Tampa Bay Buccaneers",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/3qjw9mvbhdo21c29ox0hnywiu.png",
"W": "5",
"L": "11",
"T": "0"
},
{
"Team": "Los Angeles Rams",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/9mz5acamdk5yryzpximpg31z6.png",
"W": "13",
"L": "3",
"T": "0"
},
{
"Team": "Seattle Seahawks",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/bccu3mv2h2ygvz0o6tk6s77n.png",
"W": "10",
"L": "6",
"T": "0"
},
{
"Team": "San Francisco 49ers",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/222gkngsavpv9e0r6vyjri36m.png",
"W": "4",
"L": "12",
"T": "0"
},
{
"Team": "Arizona Cardinals",
"Logo": "https://s3-us-west-2.amazonaws.com/mastersportslogos/NFL/256x256/b65i9i9omiby7hiuci8a0mobm.png",
"W": "3",
"L": "13",
"T": "0"
}
]
}

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.