00:00
Hi, in this groov workshop I’ll show you how to use the SVG library on groov.com
00:10
to make your own custom graphics for your groov project. Now this page
00:14
represent something that you might find in a typical process your application.
00:17
It has all the info you need.
00:19
It's got temperature, pressure, flow, and on off button for the pump, and a pump
00:24
status light. It's ok but I think having some graphics would really help to make
00:28
this project stand out. Like this. All these graphics were built using the SVG
00:34
library. Let me show you how I did this. To get to the SVG library go to
00:39
groov.com.
00:41
Under the Support tab click SVG Image Library, and here we are.
00:46
The SVG library is an open resource. Anyone can go here to customize and download a
00:52
huge number of pre-made graphics to use in their project. The goal is to continue
00:56
to add more and more images as people suggest them. So, if you have a suggestion
01:01
for an image that you'd like to see added to the library I’ll provide a link
01:04
at the end of this video where you can submit a request. Now what is SVG? SVG stands
01:10
for scalable vector graphics, which means you can scale the image up or down without
01:15
losing resolution or quality. So you can see if I go back to my groov project and
01:21
I resize the screen everything scales without getting jagged edges. Back here
01:26
at the library you can see that I have a bunch of categories. If you wanted a
01:30
building or a door or some other architectural feature you'd find that
01:34
here. Let's go and get that tank image. That's here under process manufacturing.
01:40
Scroll down. There it is.
01:43
Now you could just download this as is, or you can modify it to be just the way
01:47
you want. I don't really like that grey. So, I can change the color by clicking on
01:52
one of those pre-defined low contrast or high contrast color schemes. Like this
01:56
blue one. That looks pretty good. Now I can further customize that down here.
02:01
First I need to bring up those colors by clicking on “get colors from image”. But
02:07
the highlight of still too light. So, I'll just change that to something more
02:11
like this. Now I can change the light color do something a little darker. That
02:16
looks better. To see how that'll look I click on “apply color”. Perfect! I want to
02:22
save this color scheme so I can apply it to other graphics. To do that I'll click
02:26
“temporarily store color scheme”. Now all my images will match and looked unified.
02:30
Now back up here at the top I can stick with the default name of “tank 1” or I
02:36
can change it to something else. This is useful if you have a bunch of tanks and
02:39
you don't want to get them mixed up. I’ll call this one “tank 1 blue”. Hit the
02:44
download button, and click OK. I have my browser set up to save files to my
02:49
downloads folder. Now, let's go get the other images for my project. I'll go over
02:54
to my sensors. There's the flow meter that I want. I’ll apply the same color
02:59
scheme. The name is fine. And, download the file.
03:03
Here's another sensor. I’ll throw that in while I'm at it. Hit apply colors. That
03:08
looks good, but it's facing the wrong way. So click rotate, and there we go.
03:13
Download and ok. And, one more thing. I need my pump. So pumps are filed under
03:20
“field devices”. Scroll down. There it is. And, like the rest I’ll hit apply colors.
03:26
And, again I rotate the image. There we go.
03:29
The name is fine. So I'll just hit download and I'm ready to add these to
03:33
my groov project.
03:35
Change the tabs here in my browser and go back to groov. Switch to groov build.
03:39
And, I'll open this “new tank page” so I can show you how to add those images. But
03:45
first, I need to load those graphics into my image library. To do that I go to
03:50
“configure image library”. Click on “Add new images”. Navigate to the images in my
03:57
downloads folder. Select all, import, ok. Then I'll go over to my gadgets palette
04:05
and drag over the image gadget. Click up here where it says “image” which
04:11
opens the image library. There it is,
04:14
“tank 1 blue”. Now, just grab my value gadgets and move them over to the side.
04:19
Move it over. Adjust the size of my tank. There we go. Now for that sensor. Drag over
04:29
another image gadget. Find the sensor image. There. Move it over. Now right click
04:38
and move it to the back.
04:41
Next to bring in the flowmeter. Drag in another image gadget. Select the image
04:47
from the library. There it is.
04:50
Resize and move it over here next to the tank. And the last thing is to bring in
04:58
the pump.Drag in another image gadget. Find the pump in the library. Here we are.
05:08
Resize it a little,
05:10
and put it next to the flow meter. And, there we go. I’ll move of some of these down a
05:17
bit. Now for the handheld page. I’ll move these over here. Then select these and drag
05:25
them up. Move these off to the side for now. Then I’ll move my sensor over here.
05:31
Resize a little. I’ll put my flow meter her. And the pump here.
05:38
resize a little. I put my pump button and indicator gadgets like so. Now,
05:47
just grab my value gadgets and move them over to the side. And, I'm done! Let's
05:54
save and switch to groov view. So we can see how that's going to look on a desktop or a
05:58
tablet. And notice if I resize the page everything scales.
06:05
Now let's check it out on my smart phone. Perfect! There you have it. I was able to
06:11
build this custom scalable page without using any complicated or expensive
06:14
graphics software in just a matter of minutes. If there are any devices or
06:18
elements that you would like to see added to the SVG library send us an
06:22
email to training@opto22.com
Up next
Autoplay