(upbeat music)
- [Tutor] Before we can build useful graphics
for our project,
we need to understand the basic functions
in Graphics Editor.
In this video section,
I'll briefly demonstrate the low-level tools
that will be expanded on in the later sections.
We won't even go into the WebHMI yet,
we'll just edit our graphics.
Also, I won't demonstrate every single tool and option,
but rather just enough to get you started.
If you need more information,
the System Guide section, Reference,
Graphics reference,
Graphics Editor References
contains everything I'm showing here in greater detail.
With that out of the way,
let's open Graphics Editor.
Many of the tools and concepts here
are similar to other vector graphics tools,
like Visio, Illustrator, or Inkscape.
The files we edit here are in TGML format,
TAC Vista Graphics Markup Language.
If I save this file,
it's located by default in the TGML folder of my project.
We'll see later how this directory structure is important.
Below the menu,
the main toolbar gives us our main tools and objects
to drop on the page.
Selecting any of these
changes the functions in the toolbar below it to match.
To the far right,
we have a link to our One-Line Connection Debugger,
which will come in handy much later.
Centered in the page is our primary display area,
where we create our graphics.
On the right side of our menu,
there are three different view modes for this pane.
Most of our work will be in Design mode,
which gives us a graphical layout of our page.
Source displays the raw TGML code,
which is an XML variant and can easily be edited by hand.
Finally, the Preview button allows us to write test values
into the page and verify its operation.
The other pages around the display
are laid out this way by default.
The left side of the page holds the Equipment,
Component, and Snippet libraries
that we can use to quickly populate a page
with pre-developed materials.
The right side holds the Objects tree,
and selecting an object
enables its Properties page.
There is also a Binding tab
that is enabled automatically
when the Equipment tab is de-selected.
The reason for this will be clear
when we start automatically binding components.
Last, the Test pane is used to write values
into the Preview.
These panes can be changed by grabbing their tabs
and moving them to different locations.
Take the Properties tab.
My preference is to move it to the middle-right of the page
by snapping it to this lower box.
However, I can also drag it out as a floating window.
It can even be added to the right pane,
or added as a new pane at the top.
You may also auto-hide a pane
with the thumbtack icon at the top-right,
or close it entirely if it's not needed.
To bring it back, just select it in the View menu.
There are other tools here that aren't displayed by default,
and we'll look at some of them later.
When you have the window laid out the way you like,
click on File,
Settings,
Save settings
to leave this as the default.
This will put you at a good starting point
to add some simple objects to your page,
which we will do in the next video.
Until then, thank you.