00:04
Hi, in this groov workshop I’ll show you some cool graphics features in groov:
00:09
I built this project earlier to demonstrate these features: Up here at the top I have
00:13
a custom Caption Bar.  Here is an image indicator showing tank level that I’ve connected to
00:18
this slider so you can see it in action. Notice as I lower my tank level my LED goes from
00:24
blue to yellow, and then to red -- you can assign two, three or more states for LEDs.
00:31
This tank also serves as a graphical page navigation link from this overview screen….
00:36
To this detail screen, which also has a graphical return link
00:41
On this detail screen I added an image indicator gadget to show the open/closed states of a
00:46
release valve actuated by this button.
00:49
Here I have some LED indicators and buttons with various font and graphic sizes.
00:55
And I took the drain valve one step further by making this graphic a clickable button
00:59
to open and close the drain valve.
01:01
Let me show you how I did this.  Let’s go back to my overview page and then to groov
01:06
build mode.
01:08
Now to set up the custom Caption Bar I go to “configure” and then  “project…”
01:15
Down here in the styling section you can choose the logo and indicate colors for the bar.
01:20
Let’s change the colors first.
01:22
I’ll leave the menu color the default grey and make the caption bar blue to match my
01:28
water theme and the logo I’m going to bring in next.
01:31
Now I’m going to choose my custom logo from here.
01:35
Once I click this the will bring up the image library.  
01:38
wThe image library is where you store and manage all the images for your groov project.
01:43
You can use the same image in several places, and if you change it, it’s automatically
01:47
updated everywhere.
01:49
Here is my logo for the caption bar.
01:51
 We recommend that this image be 135 pixels by 35 pixels.  
01:58
OK.
02:00
Notice up here … above where you set your logo you now have the option to freeze the
02:04
caption bar.
02:05
 If you check this box the caption bar will stay visible at the top of the screen even
02:10
if you scroll down.
02:11
I’ll hit save settings and we’re ready to start building our pages.
02:15
I’ve created a starter page already. Now I’ll add some enhancements
02:18
First, I’ll show you how to create a graphical link. Find the link gadget and drag it onto
02:23
the page.
02:26
Indicate which groov page or URL to point the link to.
02:33
Select the Display Mode menu and you see options for Text, Button, and Image,
02:39
This is how the link would appear as a button.  
02:42
And I have a variety of text styles and button colors I could apply.
02:45
However, here I want to use an image
02:48
Click the image property to open the Image Library. I could add an image by clicking
02:53
Add Image
02:55
But since I’ve already loaded the graphics I need, I’ll scroll to find the image I
02:59
want.
03:00
I’ll select the return arrow graphic.
03:03
Our page navigator needs only a little resizing which is easy to do with groov’s grid.
03:07
Let’s test this page navigator.
03:10
Choose Save All Changes and Switch to Groov View.
03:14
Click the image. We go back to the overview page. Since I already did the same thing on
03:18
this page, I need only click this tank, which is my link back to my detail page.
03:24
Now let’s build an image indicator for the release valve.
03:27
Choose Switch to groov Build from the menu.
03:30
The image indicator will display graphics to represent values or ranges.
03:34
Let’s find the Image Indicator under the Gadget Palette and drag it onto the page.
03:39
Now click the gadget.
03:41
Let’s assign a tag first, because the type of variable used as a tag will determine the
03:45
options for the Image Indicator.
03:47
I’m using the data simulator for this demonstration, so I’ll open up the list of basic variables.
03:53
You can see some Boolean, Float and Integer32 variables, I’ll choose boolean variable
03:59
A and hit Update Gadget.
04:02
Now let’s choose “Add Image”. The image library appears, from where we can find one
04:08
of two images I loaded earlier to represent my release valve.
04:12
Here it is. I’ll select the closed image.
04:16
Notice that some new properties are now displayed with this image. A boolean can be true or
04:20
false.
04:21
My property default is “false” which is the state I’ll assign the closed image to.
04:27
So no changes are needed. Notice that I could also change the opacity.
04:31
This is handy if you want to make an object appear and disappear or fade.
04:35
I’m not doing that so I’ll leave the opacity at 100.
04:38
Now, I’ll add the true image:
04:41
Click Add Image.
04:43
Find the true image.
04:45
Here it is. Select ReleaseValve_Open
04:50
Change False to True
04:50
Now let’s place the image gadget. Click, drag, resize, use the arrow keys if you like.
04:58
Let’s test this. Choose “Save All Changes and Switch to groov view”.
05:04
My release Valve button is assigned to the same tag as this button.
05:08
Click the button on and off. You’ll notice that the valve pops open and closed.
05:13
Return to groov Build.
05:15
In this user interface, I wanted to create visual reminders to the operator that the
05:19
release valve must be open before it’s safe to drain the tank. So both of these LEDs indicate
05:24
the release valve’s state, but in one, I set the off color to red and relabeled it
05:28
“Drain Valve Ready” It will be red until the release valve is open.
05:32
I also want to change the size of the buttons and the LED indicators while keeping all the
05:37
text the same size.
05:39
Let’s enlarge the Drain Valve Ready LED while keeping the text the same size..
05:42
Select Text size menu. Instead of Auto, choose a text size. Try 12. Oops, 12 is too big.
05:50
Let’s Try 10. Now the text is locked at 10.
05:54
Now expand the LED. This will make the LED larger because its size is still automatically
05:59
controlled.
06:00
But I could over-ride that under the Graphic Size property.
06:04
Now I have a nice large LED to indicate the ready state.
06:06
Let’s do something similar with my drain valve button:
06:10
Drag it larger. Notice the text got larger too. Let’s put it back.
06:15
Click Text Size and select 10.
06:17
Let’s do the same for the Release valve button.
06:22
And now let’s make the Draining indicator extra large. Resize and restore the text to
06:27
10.
06:28
Let’s test our work:
06:32
OK that works.
06:33
Now let’s add one more thing: Let’s add that graphical version of the Drain Valve
06:37
button. Switch back to build mode.
06:41
All buttons can be displayed as buttons or graphics: this means the Button Gadget, the
06:46
Command Button, and the Momentary Button.
06:48
Let’s create a graphical button using the one we already have on the page.
06:53
Click the Drain Valve button.
06:55
Right-click and choose duplicate.
06:57
Drag it to about where we’ll use it.
07:00
Now let’s change its display mode to Image.
07:03
Notice now that I have two states to provide images for. Let’s get the On state first.
07:09
Again, I pre-loaded the images I would need. Let’s find my valve.
07:13
Here it is. Notice that I’m using an image that, like a real valve, uses the handle direction
07:18
to indicate open and closed states.
07:21
Select PipeValve_open.
07:23
Now let’s provide the Off State.
07:25
Click the image property.
07:27
Scroll to and select PipeValve Closed.
07:31
Now let’s resize and reposition the button.
07:34
OK
07:35
Now let’s test.
07:37
Save Changes and Switch to groov View.
07:39
Click my button on and off.
07:42
Let’s return to my overview page to look at the tank level indicator and the LED.
07:50
The tank is two images stacked on top of each other. The top image
07:55
Is a Page Navigation link. Let me drag it aside.
07:59
Underneath it is an image indicator. If I select it, you can see its properties.
08:04
The tag is Float Variable A. Choosing a float enables me to include as many images for as
08:10
many conditions as I wish to define.
08:12
I defined 11 states to display when my tank goes from 0 to 100 percent full.
08:19
The image indicator will look for the first image that matches the current value starting
08:23
at the bottom. If the value is equal to or greater than 95, it will show this bottom
08:28
image, if lower, it will check the next images until it finds a match.
08:32
Let’s look at the range definition.
08:37
Three options, exact, range, and negate, allow you to anticipate a variety of conditions.
08:42
Exact is for showing a graphic when the value is equal. Range allows you define a range
08:49
by lower limit (min value), upper limit (Max value), or both. I’ve defined this range
08:55
to 95 as the minimum but I could have defined a maximum if I had wanted.
09:01
And negate lets me show a graphic when the tag does not equal a value or is outside of
09:06
the defined range.
09:07
Let’s drag my tank back to its place. Notice that I put the tank in front of the tank level
09:13
image indicator gadget so you can click the tank to navigate.
09:17
Let’s look at the LED of the tank level
09:20
Since the LED is connected to a Float Variable (same if it were an integer) I can define
09:25
any number of states. You can see that I have a blue indicator if
09:29
the value is equal to or greater than 30; Yellow if less than 30 and greater than or
09:34
equal to 10. And red if less than 10.
09:38
And I could add more Ranges too, by click Add Range,  using different colored LEDs
09:42
if I wanted to.
09:43
I made changes to the Detail Page that I want to adjust for my Handheld view.
09:47
Let’s return to the Detail page and choose handheld. You can see my new gadgets were
09:51
added. Let’s position them.
09:53
I’ll move the release valve over here... center this up…resize….Do the same with
10:02
the drain valve.... No line up my buttons and adjust the buttons and LEDs.... OK....
10:10
and... I’m done.
10:12
Now let’s go to file… “save all changes and switch to groov view” to check it out.
10:18
And here is what it looks like on my smartphone.
10:21
For more tips and tricks check out the other groov workshops on groov.com
10:26
Thanks.
Up next
Autoplay