Download the Form file (.zip)
Google/RelativeWave released Form 1.2.0 last month with some new patches:
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.
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:
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.
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 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.
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.
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.
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.
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.