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: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: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
00:00
Hola, en este video de groov, voy a enseñarles como
usar la librería de SVG en groov.punto.com
00:10
para hacer sus propios gráficos para
su proyecto de groov. Esta página
00:14
representa algo que encontraría
en un proceso o aplicación típica.
00:17
Tiene toda la información que necesita.
00:19
Tiene temperatura, presión, flujo,
un botón para encender o apagar la bomba, y una
00:24
luz del estado de la bomba. Está bien, pero creo que si le agregamos unos gráficos, se vería
00:28
mucho mejor. Como este. Todos estos
gráficos fueron hechos con la librería
00:34
de SVG. Vamos a ver cómo lo hice.
Para conseguir la librería de SVG, vaya a
00:41
Bajo la pestaña de Support, haga clic en SVG Image
Library, y aquí tenemos.
00:46
La librería de SVG es un recurso abierto. Cualquier persona
puede ir allí para descargar y personalizar
00:52
muchísimos gráficos, ya hechos y listos para usar
en su proyecto. El meta es de continuar
00:56
agregando más y más gráficos.
Así es que, si Ud. tiene una sugerencia
01:01
para un gráfico que le gustaría ver
en la librería, habrá un enlace
01:04
al fin de este video para que pueda sugerirlo.
Ahora, ¿qué es SVG? SVG significa
01:10
‘Scaleable Vector Graphics’o ‘gráficos vectoriales escalares’.
Quiere decir que puede escalar una imagen, ya sea más grande o chico, sin
01:15
perder la resolución o la calidad. Podemos ver,
si regreso a mi proyecto de groov y
01:21
cambio el tamaño de la pantalla, todo se escala
sin que aparezcan orillas irregulares. Aquí en
01:26
la librería, puede ver que tengo
muchas categorías. Si gusta un
01:30
edificio o una puerta, o cualquier otro
diseño arquitectural, lo encontraría
01:34
aquí. Vamos a conseguir la imagen del tanque.
Ese está aquí, bajo “process manufacturing”, fabricación de procesos.
01:40
Desplaces hacía abajo. Aquí está.
01:43
Ahora, puede descargarlo así como está,
o puede modificarlo a su
01:47
gusto. No me gusta este color gris.
Puedo cambiar el color si hago click en
01:52
uno de los esquemas de color con bajo o
con alto contraste. Como este
01:56
azul. Me gusta cómo se ve. Ahora
puedo modificarlo más aquí abajo.
02:01
Primero, para tener estos colores disponibles,
hacemos click en “get colors from image”. Pero
02:07
todavía está muy claro. Entonces,
lo voy a cambiar para que se parezca
02:11
a este. Ahora puedo cambiar el color
claro u algo más oscuro. Así
02:16
se ve mejor. Para ver cómo se van aparecer, le
hago click en “apply color”. Perfecto! Quiero
02:22
guardar este esquema de color para usarlo
con otros gráficos. Para eso, hago click
02:26
en “temporarily store color scheme”. Ahora todos
los gráficos se ven uniforme.
02:30
Ahora, en esta parte superior, puedo seguir
con el nombre por default de “tank 1” o
02:36
lo puedo cambiar. Esto es
útil si tiene muchos tanques y
02:39
no quiere confundirlos. A este
lo nombraré “tanque 1 azul”. Oprima el
02:44
botón “download”, y click en OK. Tengo mi
navegador configurado para que guarde archivos a mi
02:49
carpeta de descargues. Ahora, vamos a conseguir
otros gráficos para mi proyecto. Voy a ir a
02:54
mis sensores. Ahí está el medidor de flujo
que quiero. Voy a aplicarle el mismo esquema
02:59
de colores. El nombre está bien. Y, descargue el
archivo.
03:03
Aquí está otro sensor. También lo
voy a incluir. Oprima ‘apply colors’. Se
03:08
ve bien, pero está incorrecta la posición.
Hacemos click en ‘rotate’, y listo.
03:13
Descargue y ok. Necesito algo más. Necesito’
Una bomba. Las bombas se encuentran bajo
03:20
“field devices”. Desplacer hacía abajo. Aquí lo tenemos.
Y, como a los demás, le aplico los colores con ‘apply colors’.
03:26
Y, otra vez, volteo la imagen. Listo.
03:29
El nombre está bien. Oprimo
download y están listos para agregarlos a
03:33
mi proyecto de groov.
03:35
Cambio de pestañas aquí en mi navegador y
regresar a groov. Cambiar a groov Build.
03:39
Abro esta ‘nueva página del tanque’ para
mostrar como agregar estos gráficos. Pero
03:45
primero, necesito agregar esos gráficos a
mi librería. Voy a
03:50
“configure image library”. Hacer click en “Add new
Images”. Navegar a las gráficos en mi
03:57
carpeta de descargues. Seleccionar todos, importar, y ok.
Me cambio al grupo de gadgets o sea, el gráfico
04:05
y los arrastro sobre el gadget.
Hacemos click aquí donde dice “image”, el cual
04:11
abre la biblioteca de gráficos. Aquí tenemos
04:14
“tanque 1 blue o sea azul”. Ahora, selecciono mis
gadgets y los muevo a un lado.
04:19
Muevalo a un lado. Ajuste el tamaño del tanque.
Muy bien. Ahora, para el sensor. Escoja
04:29
otro gráfico. Busque el gráfico del sensor.
Eso… Ahora, hacer clic-derecho >>
04:38
y moverlo hacía atrás.
04:41
Luego, agregar el medidor de flujo. Vamos agregar
otro gráfico. Seleccione la imagen
04:47
de la biblioteca. Ahí está.
04:50
Cambiamos el tamaño y lo movemos acá junto al
tanque. Y lo último que vamos hacer es agregar
04:58
la bomba. Agregamos otro gráfico.
Buscamos la bomba en la biblioteca. Aquí está.
05:08
Cambiamos el tamaño un poquito,
05:10
y lo ponemos junto al medidor de flujo. Y,
listo. Voy a mover algunos de estos hacia abajo
05:17
un poco. Ahora, para la página de “handheld”. Voy a mover
estos acá. Luego voy a seleccionar y arrastrarlos
05:25
hacía arriba. Mueva estos a un lado por
ahorita. Luego voy a mover mi sensor para acá.
05:31
Lo ajustamos un poco. Voy a poner el medidor de flujo aquí. Y la bomba acá.
05:38
..ajustar el tamaño un poco. Pongo mi botón para la bomba
y estos gadgets así. Ahora,
05:47
muevo estos gráficos a un lado. Y ya terminé! Vamos
05:54
a guardar y cambiar a groov view. Podemos ver como
se ve en una PC o en un
05:58
Tablet. Y se fijan, si cambio el tamaño de la página,
Todo se escala.
06:05
Ahora, vamos a verlos en mi smartphone.
Perfecto! Ahí lo tiene. Pude
06:11
construir esta página a mi gusto sin
usar software de gráficos complicada o cara
06:14
en solo unos
minutos. Si hay unos
06:18
gráficos que le gustaría
ver agregados a la biblioteca de SVG, mandemos un
06:22
corre a training@opto22.com.