06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

À propos Dernière réflexion Prestations de service Carrières Contact

Blog

Catégories toutes catégories

Articles populaires

DMC présentera à Manufacturing in America

2023
14/03/2023

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3KaJ… 1/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

Création de graphiques personnalisés pour les IHM SCADA avec Ignition Perspective et Photoshop

S'amuser chez DMC - Volume 9

03/10/2023

IHM , Allumage , SCADA , Perspective , Adobe Photoshop

Lucas Wavrin DMC nommée n°2 des meilleures moyennes

0 commentaire entreprises par Crain !
05/11/2022
14/09/2022

En automatisation, l'un des écrans les plus demandés pour une application SCADA est l'écran de vue d'ensemble de l'usine ou du

service. Cet écran est développé pour fournir rapidement à l'utilisateur une compréhension de l'état de l'atelier de fabrication.

Souvent, la clé d'un écran de présentation efficace est un graphique efficace.

Ce graphique peut prendre plusieurs formes. Une centrale à vapeur, par exemple, peut utiliser un schéma de tuyauterie et

d'instrumentation (P&ID) pour illustrer le mouvement et la température des fluides dans tout le bâtiment. La salle d'emballage d'une

usine de fabrication de produits peut utiliser un dessin CAO de l'équipement de fabrication avec des superpositions pour indiquer

l'état. Dans tous les cas, le graphique doit être facilement reconnaissable, rapidement interprétable et utile à un large éventail
https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3KaJ… 2/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

d'utilisateurs.

Notre compagnie Blog Prestations de service Working With Us

Dans ce blog, nous montrerons comment créer un graphique animé personnalisé qui répond à ces exigences pour une application Testimonials
Biographies des employés Vidéos Automatisation et intelligence de la fabrication
SCADA construite dansfondamentales
Ignition Perspective. Customer Service
Valeurs Études de cas Automatisation des tests et mesures
Our Clients
Industries desservies Salle de presse Embedded Development & Embedded Programming
FAQ
Les partenaires Bulletin Application Development
Ignition est l'une des plates-formes SCADA/IHM à la croissance la plus rapide développées par Inductive Automation, et Perspective
Digital Workplace Solutions
est le module de visualisation convivial pour le Web qui héberge les interfaces utilisateur accessibles à partir de n'importe quel
Sign up for our newsletter
navigateur Web. Nos clients implémentent souvent des applications Perspective accessibles simultanément à partir d'IHM

industrielles, de tablettes, d'ordinateurs portables et de téléphones portables. Your email Subscribe

Le graphique personnalisé
DMC Chicago créé
HQdans ce didacticiel a été implémenté
DMC dans l'application SCADA Ignition Perspective d'un
Austin DMCclient
Boston DMC Cincinnati

exploitant une 2222

usineNd'emballage (512) 537-8957
Elston Ave de biens de consommation. Ce didacticiel est divisé en sections suivantes. 20 Holland St 10260 Alliance Road
Suite 200 Suite 408 Suite 300
Chicago, IL 60614 Somerville, MA 02144 Cincinnati OH 45242
(312) 872-0069 (617) 758-8517 (513) 800-2200
1. Conversion d'une illustration existante en un format adapté au Web
2. Importing
DMCdrawings
Dallas to Perspective DMC Denver DMC Houston DMC Nashville
2929 Carlisle St
3. Creating an effective graphic with dynamic1860
Suite 380
Blake St
bindings
Suite 410
8 Greenway Plaza
Suite 250
901 Woodland St
Suite 104
Dallas, TX 75204 Denver, CO 80202 Houston, TX 77046 Nashville, TN 37206
(972) 432-5536 (303) 223-1801 (713) 322-9192 (615) 988-1505

The following tools are needed to follow along with this guide:
DMC New York DMC San Diego DMC Seattle DMC St. Louis
141 W 36th St 4180 La Jolla Village Dr 506 2nd Ave 1034 S Brentwood Blvd
Inductive Automation Ignition, including the
19th Floor Perspective module and Designer
Suite 125 Suite 910 Suite 1080
New York, NY 10018 La Jolla, CA 92037 Seattle, WA 98104 St. Louis, MO 63117
installation —
(917) 473-0030 (858) 477-8349 (206) 388-5186 (314) 627-5427

Adobe Creative Suite, including Photoshop and Illustrator

DMC Washington, D.C.
Note – free programs, such as Gimp, can also be used to follow this tutorial.
Because DMC is a subscriber of the Adobe Creative Suite, which happens to
https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3KaJ… 3/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.
Because DMC is a subscriber of the Adobe Creative Suite, which happens to
1255 Union St. NE
7th Floor, Suite 2
provide some of most efficient tools for the job, these steps are not outlined in
Washington, D.C. 20002
(202) 945-4040
detail
Call Us: (888) DMC-4400

Keep reading for©step-by-step

Copyright 2023 DMC, Inc. instructions to convert a 2D CAD drawing to a
Confidentialité / Conditions / Marques de commerce / Plan du site / Connexion

customizable Perspective graphic.

Converting Existing Illustration to SVG

A major benefit of Ignition Perspective is the ability to embed custom scalable vector
graphics (SVGs) in the user interface. An SVG is a drawing file, like a CAD or PDF file,
consisting of defined paths rather than fixed pixels. This difference allows the graphic to
scale predictably without losing definition or quality. Scalability is an excellent quality for
a graphic that will be displayed on devices with varying resolution. SVGs provide a path
to custom graphics in Perspective without the need for a Designer-based illustration
tool like that used in the Vision module.

Option 1: Convert straight to SVG

Some drawing files may be imported directly to Adobe Illustrator and saved to an SVG.
This is the best-case scenario because only the pixels of interest will be saved from the
drawing file. To do this, we simply open the file in Adobe Illustrator, crop if needed, and
Export As an SVG. At this stage, ensure each piece of equipment in the drawing is
separated into objects with appropriate names. This can be accomplished in Illustrator
by creating layers with apt naming prior to export.
https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3KaJ… 4/21
 y g y
06/04/2023 18:20
p gp pCreating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

To confirm your SVG is in the correct format, open it with any text editor. The SVG
should consist of some header information describing styles, size, and viewbox as well
as a list of path objects. These objects will be displayed in Perspective as individual
elements.

Figure 1: Example of CSV with single element, "sorterFill." Note: that path has been
cutoff for conciseness.

Option 2: Extract drawing with image editing software

Other drawing files are not provided in a scalable format or are too complex to be
redrawn on your machine. In this case, we can use an image editing software to extract
the shapes of interest from the provided drawing.

Step 1: Import illustration to Photoshop (or other photo editing software)

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3KaJ… 5/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

For this example, we start with a customer’s 2D drawing file in the locked DWG format.
Similar processes can be followed for PDFs, DWFs, PNGs, etc. This file contains the top-
down drawing of the packaging room floor. Since our photo editing software cannot
directly import a DWG file, we will first print the drawing to a high quality TIF image. We
will do this with  DWG TrueView, a free program from Autodesk. The output filetype is
not as important as the quality and size of the image. We only need to convert it to a
filetype that our image editing software can process. 

This TIF file can be dropped into the image editing software. In this guide, we will use
Adobe Photoshop. Once dropped into Photoshop, adjust the image to fill your canvas,
https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3KaJ… 6/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

and rasterize it with the confirmation button.

Step 2: Use the Magic Wand tool to select the parts of the drawing to be animated

Hint: unchecking the “Contiguous” box in the Magic Wand properties ribbon allows for
quick selection of background in grayscale images. In our example, we use the Magic
Wand to quickly select all white pixels. Right click > Select Inverse yields the selection
of all grayscale pixels. 
https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3KaJ… 7/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

Step 3: Layer Via Copy

Right click the selection and create a new layer via copy using the provided menu.
The original layer can be disabled to view only the selected pixels.

Step 4: Clean up Selection

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3KaJ… 8/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

At this point, we can use our photo editing software’s eraser tool to remove pixels
from the animation. In our example, we will remove electrical enclosures and
repeated hardware.

Step 5: Separate equipment into unique layers and create Fill Layers

Use any selection tools necessary to select and separate the drawing into
equipment regions. Separate the regions by right clicking the selections and
https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3KaJ… 9/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

creating new layers via cut. When finished, we should have a layer for each piece
of equipment and nothing else. Delete any background or leftover layers.

Once the equipment is separated into layers, each one must be used to create a new
Fill Layer. A Fill Layer is needed to vectorize the pixels in preparation for exporting to
SVG. First, select all the pixels for a given equipment layer. This can be done by right
clicking the layer preview and selecting “Select Pixels.

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 10/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

Once the pixels are selected, right click the selection, and select “Make Work Path.”A
popup will prompt the user for a tolerance. This setting may be adjusted if results are
not satisfactory. For our example, we selected a tolerance of 1 pixel. Images with denser
pixel date may not require such a tight tolerance.

Create a new Fill Layer using the dropdown navigation: Layer -> New Fill Layer -> Solid
Color. Select a neutral color, presumably black, and name the layer appropriately.
Names selected here will be displayed as properties in the Perspective project object,
so they should be intuitive.

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 11/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

Step 6: Export as SVG

Once a fill layer is created for each division of equipment, disable all other layers. Only
the fill layers should be displayed in the editing window. At this stage, we are ready to
export our SVG. Use the dropdown navigation to select Export As, and select SVG from
the dropdown menu in the popup that appears.

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 12/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

Note: you may want to ensure the drawing is in the proper orientation. This step is not
critical but will make responsive resizing in Perspective windows much smoother. Image
rotation in Perspective can be accomplished, but it currently requires nesting in a
coordinate container.

Import SVG to Ignition Perspective Project

Now that the SVG was created from the provided system drawing, it can be imported to
the Ignition designer. The easiest way to do this is to drag and drop the file into a blank
Perspective view. For this example, we are employing a flex container. Ensure that the
SVG is embedded and not linked in the view.

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 13/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

Once the drawing is embedded, the component will appear in the Project Browser.
Browse the `elements` property to ensure that all layers have imported successfully as
separate elements.

For our example, we set Grow and Shrink properties to 1and allowed the basis to be set
automatically. This ensures maximum responsiveness in embedding views. It may also
be reasonable to set minHeight and minWidth constraints on the SVG component, or
flex container, if needed for a given application.

Create Intuitive Overlays and Animations in Perspective

Each element of the SVG component can be customized like other Perspective
components. Namely, a “style” object may be defined for each element to employ
standard Perspective CSS-esque customization. For this example, we will be
animating/coloring the pieces of equipment drawing based on OPC status tags using
Perspective styles.

Step 1: Create Perspective styles

For this example, we will use style to change the color and of each piece of
equipment. This is not the only way of animating equipment with styles. Border,
transparency, and visibility can also be customized for a more inclusive design. Let’s
https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 14/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

first define our “alarm” class. When this class is applied, we want the equipment to
flash between red and black at a fixed rate. Use the Timing and Shape/Fill
properties to accomplish this.

Step 2: Create dynamic bindings

Once styles have been created, they need to be dynamically assigned to the class
property of each element of the SVG. This can be accomplished in a few ways:

Option 1: Create bindings for each element

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 15/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

For simple drawings, a binding may be defined for each object in the SVG. For
each element, create a “style” object with a “classes” value. This value will be
bound to the appropriate OPC tag. In our example, we use an indirect tag
binding to retrieve the equipment status from tag UDTs. Two transforms are then
applied: a script transform to check tag quality — end user wanted custom error
behavior — and a map transform to select the appropriate predefined style from
an enumeration.

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 16/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

Option 2: Update style classes via scripting

For complicated drawings with many pieces of equipment, scripting may be a

more efficient use of developer time. Consider creating a timed event or a
custom root property with a polling expression binding to execute the following
pseudo code:

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 17/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

This allows the styling to be set without configuring individual bindings on each
element. For this code to work, the names of SVG elements must match tag names in
the tag provider UDT that is supplying status information, and the eqPath parameter of
the view must be a valid tag path to a UDT instance.

Once our bindings have been created, we are ready to embed the animation
throughout the project.

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 18/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

In this guide, we've learned how to create a custom illustration and animation from a 2D
drawing file and import it to an Ignition Perspective project. To learn more designing
dynamic Perspective projects, see Caz’s series of blogs listed below!

Learn more about DMC's Ignition expertise, and contact us to get started on your next
HMI, SCADA, or MES project!

See other blogs related to this topic: Creating Dynamic Ignition Perspective Projects
Part 1: Bindings and Transforms
Part 2: Button Event Actions
Part 3: Embedded Views and Flex Containers
Part 4: View Parameters, Indirect Bindings, and Flex Repeaters

Related Blog Posts

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 19/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

CSS personnalisé dans Ignition Une évaluation de la cybersécurité pour Créer des blocs d'affichage dans
Perspective : ajout de transformations les systèmes d'eau et d'eaux usées WinCC Unified
et de transitions

Services associés

Programmation IHM et SCADA

Programmation iconique

Programmation d'allumage

Usine RockwellDébats

Programmation Siemens SIMATIC WinCC

commentaires

Il n'y a actuellement aucun commentaire, soyez le premier à en poster un.

Poste un commentaire

Nom (obligatoire)

Email (requis)

Comment

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 20/21
06/04/2023 18:20 Creating Custom Graphics for SCADA HMIs with Ignition Perspective and Photoshop | DMC, Inc.

Entrez le code affiché ci-dessus :

Ajouter un commentaire

Avertissez-moi des commentaires de suivi via courriel

https://www.dmcinfo.com/latest-thinking/blog/id/10328/creating-custom-graphics-for-scada-hmis-with-ignition-perspective-and-photoshop?mkt_tok=OTY2LVRVWC0yNjEAAAGK9ao1zNI57tHYOzPkxIUP-O8J6k3Ka… 21/21