Download the Form file (.zip)

Google/RelativeWave released Form 1.2.0 last month with some new patches:

Align Layout, Grid Layout, JavaScript Expression, JSON Importer, Device Location, Device Vibration, 9-Patch Image View

Let’s take a look at the JavaScript Expression and JSON patches. This is what it’ll look like at the end:

It’s a list of image URLs. Unfortunately, there’s currently no way to display images by URL. I imagine that’ll change in the future, so I think it’s good to take at this portion now. This is the final composition.

Let’s take a look at it patch by patch in this order: JSON Importer, JavaScript Expression, Array Count, and a Text Images Replicator.

JSON Importer

The JSON Importer patch takes a URL in and provides outputs for Data, Error, and Done. In this example, unlike in life, let’s assume there aren’t any errors. So we’re just using the Data output.

For the input URL, we’re using the Giphy API and their sample Paul Rudd search:

http://api.giphy.com/v1/gifs/search?q=paul+rudd&api_key=dc6zaTOxFJmzC

I attached the output to a Console Log patch temporarily to see what it looks like. I thought there might be more to see, but it’s just the JSON object:

The JSON Importer patch has a Load input. From what I can tell, if nothing is connected to that input, the load happens once when you connect to your device in Form.

JavaScript Expression

The JavaScript Expression patch seems like it’ll be pretty powerful, so I’m excited to see how other people use it. The patch has a Result and Error output.

In the patch settings, there’s an Expression text field to write your code. Whatever you return in expression() is sent to the result patch. By default, the patch just returns “Hello World!”.

No inputs? Then I read the patch library description again. Parameters for expression() become inputs for the patch. Let’s add some.

We’ve added anInput, anotherInput, parameter1, and parameter2 and now we have corresponding patch inputs. Cool. Let’s take a look at the JavaScript Expression patches in our prototype.

We have a single data parameter. We connect the JSON Expression patch’s Data output here. In the expression, we parse the JSON results and add the URLs to a urls array (and also set the string to uppercase). We return the final urls array so that’s what you’ll get from the Result output.

Array Count

The Array Count patch takes an array as an input and gives the length of the array as an output. We use the array length to set the number of copies in the Text Images Replicator.

Before realizing this patch existed, I was using a JavaScript Expression patch doing the same thing with Array.length(). With that in mind, there are probably a ton (endless?) of useful one-use patches we can create now with the JavaScript Expression patch.

Text Images Replicator

This looks a little more complicated than it should be, but I wanted to show how we can start styling the text output.

Replicator Variables: Here we’re only using the replicator’s index value to pass into the Array Value patch and the Math Expression patch. Based on the index, we set the y-position of the text. Sort of like setting line-height in CSS.

Array Value: We’ve set an output on the Array Value patch so that we can pass the JavaScript array in. The patch sends a URL out based on that index.

You’ll hurt your eyes if you stare too long.

Text Image and Image View: This combination displays text on the screen. We pass the URL string into the Text input. Color is connected to the RGBA to Color patch.

Math Expression and RGBA to Color: This combination sets the text color. The pink color is hard coded and opacity is set by the Math Expression. The first text view is set to 100% opacity and we lower the value a little bit as the index increases.

Line-Height Math Expression: We’re using this to set the Text Image View y-position. As mentioned in the Replicator Variables description above, it takes the replicator index to move the text down on each index like line-height in CSS.

That’s that

Download the Form file and try things out. I added a Text Input patch and another JavaScript Expression to create a search box:

I’ll record a screencast soon showing how it works. Thanks for checking this out. Reach out on Twitter, I’d love to hear suggestions for future posts.