Title of your website

myDESIGNER USER MANUAL
  1. Introduction
    1. About myDESIGNER
  2. Tutorial videos
    1. myDESIGNER
    2. myREPORTS
    3. myMOBILE
  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
    2. Selecting objects
    3. Drawing primitives
    4. Creating text elements
    5. Insert image
    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 scripts
    21. Used tags
    22. Zoom 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. Introduction
    2. Creating active areas
    3. External web page in active area
    4. HTML code
    5. 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. Introduction
    2. Animations
    3. Show value animation
    4. Value to text mapping animation
    5. Visibility animation
    6. Opacity animation
    7. Color animation
    8. Moving animation
    9. Size animation
    10. Scale animation
    11. Rotate animation
    12. Circular sector animation
    13. Zoom visibility animation
    14. Sounds
    15. Sounds triggered by tag value
    16. Effects
  15. Time Sequence
    1. 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. Declaring variables
    3. Script writing
    4. Using variables in animations and effects
    5. Debugging view scripts
    6. Using debug screen on your view
    7. Using web browsers integrated debugger
    8. Using JavaScript libraries - Includes
    9. Linking external JavaScript libraries – Remote includes
  23. View scripts - list of functions
    1. Dealing with elements
    2. ListBox, TextBox and ComboBox functions
    3. Animations
    4. Effects
    5. Error frames
    6. Zoom
    7. Open command
    8. Users, language and login
    9. Retrieving files
    10. Communicating with server side scripts
    11. 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. Filtering data
    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
    3. Gantt chart
  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. Limiting 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. Introduction
    2. Server-side scripts folder
    3. Server-side scripts folder structure
    4. Variables tables
    5. Script data-logs
    6. Global variables
    7. Sources folder
    8. Organizing project into modules
    9. Importing modules
    10. Using the event-driven asynchronous callbacks
    11. Creating server side reports
    12. mySCADA specific functions
    13. Debugging
    14. Script status (on myBOX devices only)
    15. 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. 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. Memory types
    2. S7 data types
    3. S7 1200/1500 notes
    4. Protection
    5. LOGO! 0BA7/0BA8 configuration
    6. S7-200 (via CP243-1) configuration
  41. OPC UA driver
    1. Connection configuration
    2. Tag name syntax
  42. MELSEC-Q driver
    1. Tag name syntax
    2. Connection settings
  43. SigFox driver
    1. Datatype
    2. Reverse order
  44. Databases driver
    1. Reading values from SQL database
    2. Examples
    3. Writing values to SQL database
    4. Using SQL connectivity in Server Side Scripts
  45. Download/Upload from/to device
    1. Download to device
    2. Upload from device
  46. Recipes
  47. Running hours
  48. Timeline
  49. mySCADA TIA portal connector

7.6.On touch actions #

On Touch Actions are used to modify the visual appearance of your component when a user touches it. Usage is very simple: when a user touches the component, the component can change its color or text to denote the action for the end user. When the user releases their touch, the component will return to its default look.

You can modify visibility, fill, and stroke color of any object in your component. Select the object you would like to modify based on user touch and, in Properties, fill in the On Touch section:

7.6.1

Example:

We will create a simple button that will change the background color on touch.

  • Create a new component with a rectangle inside
  • Enter in the text “Press me.”

7.6.2

 

  • Click on the rectangle and in Properties set the color to red in On Touch -> Fill

7.6.3

 

  • When you set the fill color, a new dialog is presented:

7.6.4

 

  • Save the component and insert it into a view
  • Now, you can test your component.
  • When a button is not pressed, it looks like this:

7.6.5

 

  • When a user is pressing the button, it looks like this:

7.6.6

 

Creating Complete Component:

In the following example, we will create a simple slide bar showing the variable progress and its Min and Max values. Create a new component and draw a rectangle, as seen in the picture below. Copy the selected rectangle and apply Paste on same location to it. Set the Fill property to “none” then put the element in the background with the function Lower to the background. We have now created a frame of the scale.

Now create 3 text fields; your component will look like this:

7.6.7

 

Now fill in the Component Variables as shown in the picture below:

7.6.8

 

As you can see, we have created 3 local variables. For the tag value, you have used a variable tag; for specifying the minimum and maximum values, you have used the min and max variables.

You can make indicator out of the rectangle by resizing it according to the value read from the PLC; set the Scale animation as shown in the following picture:

7.6.9

 

We also want to show the actual value in the middle of the slide bar. Click on the text field in the middle of the rectangle, select the Anim tab in the Properties window and click on the Tag (Address) field in the Show Value section. Then, fill in the Tag field with “tag,” which corresponds to our local variable name.

7.6.10

 

As you can see, we have used one of our local variables. You can use the same variable (especially the tag type) for multiple animations/effects to achieve a better effect. We will also show the Min and Max limits of our tag. Click on the right text field, then select the Rep. tab from the Properties window and set “max” for Text in the Replacements.

7.6.11

 

Now do the same for the other text field but place the min variable there. The final component should look like this:

7.6.12

 

Save the component and test its functionality.

Testing Component

Create a new view and open it, then navigate to the Library. Select your component and press the Insert button.

Now click on the component and look at the Properties window:

7.6.13

 

In the Component section, you can see all the local variables that you have defined.

Set the Tag (address) and the Minimum and Maximum values:

7.6.14

 

Now, save the view and send to a supported device; the screen should look as follows:

7.6.15

 

Suggest Edit