Title of your website


Online manuals

  1. Introduction
    1. About myDESIGNER
  2. Tutorial videos
  3. Getting started with myDESIGNER
    1. Creating a project
    2. Workspace management
  4. Checking project
  5. Projects’ visual appearance
  6. GUI/HMI Editor
    1. Creating views
      1. View background
    2. Selecting objects
    3. Drawing primitives
    4. Creating text elements
    5. Inserting images
    6. Poly-lines
    7. Moving objects
    8. Resizing objects
    9. Rotating objects
    10. Skewing objects
    11. Filleting
    12. Combining objects
    13. Fill and stroke
    14. Rulers and guides
    15. Layers
    16. Copying and pasting elements
    17. Object's order
    18. Grouping
    19. Repeated actions mode
    20. View scripting
    21. Used tags
    22. Zooming on zone
    23. Undo and redo
    24. View properties
  7. Components
    1. Default components
    2. Custom components
    3. Used components
    4. Editing components
    5. Replacements
    6. On touch actions
    7. Entering advanced functions (equations)
  8. Components library
    1. Combo box, List box and Text box
      1. Inserting into view
      2. Components parameters
      3. Using components in view scripts
      4. Supported functions
    2. Chart component
  9. Active area
    1. Creating active areas
    2. External web page in active area
    3. HTML code
    4. DIV type
  10. Layout views
    1. Page layout
    2. Adding layout view
    3. Creating new layout
  11. Entering tags and math expressions
    1. Entering tags
    2. Entering mathematical expressions
  12. Tree tags database
    1. Changing tag value
    2. Engineering units
    3. Filtering data
    4. Usage count
    5. MS Excel import and export
    6. Tag import
    7. Deleting unused tags
    8. Restoring tag database
    9. Specifying a new tag during development
  13. Formatting numerical values
  14. Linking views with PLC
    1. Animations
      1. Show value animation
      2. Value to text mapping animation
      3. Visibility animation
      4. Opacity animation
      5. Color animation
      6. Moving animation
      7. Size animation
      8. Scale animation
      9. Rotate animation
      10. Circular sector animation
      11. Zoom visibility animation
      12. Sounds
      13. Sounds triggered by tag value
    2. Effects
  15. Time Sequence
    1. Time sequence example
    2. Triggering time sequences
    3. Modifying time settings
    4. Adding new sequences
    5. Renaming time sequence
    6. Switching among time sequence
    7. Modifying timing
    8. Combining multiple time sequences
  16. Open command
    1. Open type
    2. Target
    3. Popup (face plate) window
    4. View type
  17. Write/Set command
    1. Using batches
    2. Specifying set command parameters
    3. Value options
  18. Scaling set values
    1. Set example
  19. Key shortcuts
  20. On touch
    1. On touch in views
    2. On touch in component
    3. On touch example
    4. Lock element
    5. Lock key
    6. Slider
  21. Parametric views
    1. Opening parametric views
    2. Symbolic text replacements
    3. Symbolic tag creation
    4. Replacing connections
    5. Nesting parametric views
    6. Usage example:
  22. View scripts
    1. Using script in views
    2. Equations in view script using parameters
    3. Declaring variables
    4. Script writing
    5. Using variables in animations and effects
    6. Debugging view scripts
    7. Using debug screen on your view
    8. Using web browsers integrated debugger
    9. Using JavaScript libraries - Includes
    10. Linking external JavaScript libraries – Remote includes
  23. View scripts - list of functions
    1. Dealing with elements
    2. ListBox, TextBox and ComboBox functions
    3. View scripts animations
    4. View scripts effects
    5. Error frames
    6. View scripts zoom
    7. View scripts open command
    8. Users, language and login
    9. Retrieving files
    10. Communicating with server side scripts
    11. View scripts tables
    12. Alarms and aggregated alarms
    13. Data - Log data
    14. Custom charts
    15. Tag info
    16. Other useful functions
  24. Documents
  25. Reports
    1. Creating report templates
    2. Designing report
    3. Inserting text
    4. Adding picture – logo
    5. Table data
    6. Table summary
    7. Previewing report during design
    8. Showing report in runtime
    9. Creating custom report in runtime
    10. Creating report on demand
  26. CAS alarms
    1. Digital alarms
    2. Analog alarms
    3. Alarm window
    4. Alarm history
      1. CAS alarms occurrence - Chart/Table
    5. CAS alarms in view - example
    6. CAS alarms preview of appearance
  27. Data logging
    1. Data - logs
    2. Defining connection
    3. Defining data points
    4. Continuous data logging
    5. Triggered data logs
    6. Triggered logging example
    7. Simple periodic export to CSV and Microsoft Power BI
    8. Data-logs properties
  28. Data - Log views
    1. Data points selection
    2. Data grouping
    3. Data filtering
    4. ✵ 3D chart
    5. Data-logs preview - appearance editor
  29. Aggregated data logs
    1. Creating aggregated data log
    2. Aggregated values:
    3. Time aggregates
    4. Value change aggregates
    5. Aggregates based on alarm activation
    6. Running the aggregation periodically
  30. Advanced trends
    1. Using multiple axes
    2. Advanced trends – visual appearance
  31. Connections
    1. Creating new connection
    2. Creating PLC type connection
    3. Creating database type connection
    4. Creating IoT type connection
    5. Deleting connections
    6. Advanced options - optimizations
  32. User accesses
    1. Access levels
    2. Access groups
    3. User accounts
    4. Limited access for whole project
    5. Limited access for views and trends
    6. Limited access of arbitrary object in views
    7. ✵ User edit in runtime
    8. ✵ RFID
  33. Multi - language support
    1. Providing translations inside a project
    2. Translating names of Views
    3. Translating Data - logs
    4. Translating CAS alarms
    5. Translating advanced trends
  34. * Server-side scripts
    1. Server-side scripts folder
    2. Server-side scripts folder structure
    3. Variables tables
    4. Script data-logs
    5. Global variables
    6. Sources folder
    7. Organizing project into modules
    8. Importing modules
    9. Using the event-driven asynchronous callbacks
    10. Creating server side reports
    11. mySCADA specific functions
    12. Debugging
    13. Script status (on myBOX devices only)
    14. Ser2Net (on myBOX devices only)
  35. View and server side scripts – common tasks
    1. Graphical guides
    2. Read/Write data from/to PLC
    3. Generating report
    4. Other guides
    5. Server side scripts – examples
    6. Reading data from PLC
    7. Writing data into PLC
    8. Timers – eg. run code in given time intervals
    9. Scheduled execution e.g run code every Monday at 2:00 PM
    10. Generating a report at given time interval
    11. Limiting access to generated files
    12. Processing data-log data
    13. Exporting data-log data into CSV files
    14. Using virtual PLC
    15. Sending data from view script into server side scripts
  36. Devices
  37. EtherNet/IP driver
  38. MicroLogix and SLC driver
  39. Modbus driver
    1. Modbus tag name syntax
    2. 32-bit registers in Modbus
    3. Floating point numbers
    4. 32-bit integers
    5. Address mapping
    6. Signed and unsigned numbers
  40. Siemens S7 family PLCs driver
    1. S7 memory types
    2. S7 data types
    3. S7 1200/1500 notes
    4. LOGO! 0BA7/0BA8 configuration
    5. S7-200 (via CP243-1) configuration
  41. OPC UA driver
    1. OPC UA tag name syntax
    2. OPC UA connection configuration
  42. MELSEC-Q driver
    1. MELSEC-Q tag name syntax
    2. MELSEC-Q connection configuration
  43. SigFox driver
    1. SigFox data types
    2. Reverse order
  44. KNX driver
    1. KNX notes
  45. Databases driver
    1. Reading values from SQL database
    2. Examples
    3. Writing values to SQL database
    4. Using SQL connectivity in Server Side Scripts
  46. Export/Import in .CSV files
    1. Translations
    2. .CSV export/import in general
  47. Download/Upload from/to device
    1. Download to device
    2. Upload from device
  48. * Recipes
    1. Recipes Advanced
    2. Recipes - Check changes with device
  49. * Running hours
  50. * Timeline
  51. * mySCADA TIA portal connector

6.13.Fill and stroke #

Graphic objects can be filled (or stroked) with a solid color, linear gradient, radial gradient, or complex pattern.




Change a fill or stroke:

1. Select the object(s) whose color you want to change

2. Click on the Color, Gradients, and Patterns button in the GUI Toolbar



3. Choose a solid color, gradient, or pattern.

4. Confirm the changes by clicking on the OK

Solid Color

Navigate to the Colors tab in the Resources tab where you will see a few options for solid colors:

Swatches – select the color from the pre-defined palette



HSV – mix your desired color by determining the Hue, Saturation, and Value and setting Transparency



HSL – mix your desired color by determining the Hue, Saturation, and Lightness values and setting Transparency



RGB – mix your desired color by determining the Red Green and Blue values and setting Alpha level



CMYK – select your color from the Cyan, Magenta, Yellow, Key (Black) color palette and set Alpha



SVG – select your color from the pre-defined SVG standard colors palette




Using gradients enables you to create your own custom color blends and give your objects a plastic look. You can create smooth color gradations over one or more objects and save them for later use   on other objects.



The Resources tab contains pre-defined linear and radial gradients and patterns. You may create new gradients and patterns or modify the existing ones.


Linear gradient

The linear gradient function enables you to create horizontal, vertical, and diagonal gradient fills.


You can choose from pre-defined linear gradients in the Resources tab:



When you click on a pre-defined gradient, you will see its properties in the right side panel.

You can see the gradient preview in the small top window, and if you click on the tab Preview, you will see how the object will look.



The bottom part of the panel is divided into two tabs, Basic and Advanced:


Basic – you will find all defined colors for a selected gradient



On the basic tab panel, each color has its own controls.



Therefore, each color has the following properties:

  • Color – sets the color and corresponding color code



  • Opacity – specifies the alpha channel (transparency)



  • Position – specifies the starting point of this color. Move the slider to the side to change the color position.



To remove a color, press the “X” button.



To add a new color, press the + Add Color button.

Advanced – you can fine-tune your custom gradient and define the id, angle, and fill options



  • Id – you can name the newly created gradient
  • Angle – you can change the angle of the gradient from horizontal to a custom angle
  • x1, y1, x2,y2 – linear gradients are defined by the bounding box of an object they fill; x1 and y1 specify the initial point of the gradient of the bounding box; x2 and y2 represent the end point of the gradient
  • Spread method – Pad – basic fill option, no reflection or repeating
    • Repeat (repeats the shading)
    • Reflect (reflects the shading)


Radial gradients

This function operates with circular gradient fills; this is the same principal as for the linear gradients, only the Advanced section is slightly different:



  • Id – you can name the newly created gradient
  • Radius – sets the gradient radius
  • cx, cy, and r define the outermost circle of the radial gradient
  • fx and fy define the focal point of the radial gradient
  • Spread method – Pad – basic fill option, no reflection or repeating
    • Repeat (repeats the shading)
    • Reflect (reflects the shading)



Different objects or images can be used as a pattern for other objects. myDESIGNER lets you choose from pre-defined patterns or create new ones, either by modification of the existing ones or by importing a file (jpg, png, jpeg) or selection. Patterns can be either raster images or vectors. If you use raster images, you might experience pixelation on tighter zoom, so if you can choose, use vector image where possible.



Predefined Patterns

Predefined patterns are simple but effective patterns for you to use. Please keep in mind that you can very easily change color or rotate gradients to suit your requirements. Usage is quite simple; select a pattern you wish to use, and if necessary, modify the parameters and hit the save button.



User Defined Patterns

All the patterns used in your view are listed here. You can also create new ones from predefined patterns or import them from files or selections.



To use a user-defined pattern, just select it and click on the OK button.

Buttons on the bottom allow you to create new patterns, either from a file or from a selection, as well as delete and duplicate existing patterns.


Pattern Import

From File

Click on the + From Picture button and select the source raster image file in the dialog window, then click on the OK button.

From Selection

Click on the + From Selection button to create a new pattern from the selection in your current view.

1. Draw the objects you would like to use as a pattern and select them.



2. Now open the resources dialog. Navigate to the Pattern tab. Now click on the + From Selection The new gradient has been created:



The parameters of the selected gradients can be easily modified. You can, for example, change the main color of the gradient, rotate, or scale it. Please find a list of parameters below, including explanations for each one.






Unique ID of the pattern. Each object has its own unique id.


You can scale the gradient so it appears smaller or larger. You might need to scale the gradient to fit your object’s size. You can preview the result in the Preview window.


You can rotate the pattern to the desired angle.


Move the position of the gradient along the X and Y coordinates.


Example of using a pattern

We will show you a simple example of how to use a pattern in your design. We will create a simple progress bar by using and modifying a predefined pattern.

1. First, we will create tree rectangles. The top one will be used as a border, the middle one will be used as our progress indicator, and the last one will be used in the foreground to give our progress bar a plastic look.



2. Now select the middle rectangle and click on the Colors, gradients, and patterns In the pattern section, select a bar pattern.



3. In the properties on the right side of the window, click on the color chooser rectangle and select a different color. Then use the Rotate slider to rotate the pattern by 45 degrees.



4. Click on the OK button to apply a pattern to the rectangle.


5. Now put all of the rectangles together to finish the progress bar.



Suggest Edit