SVGHMI

Contents:

• Introduction to SVGHMI
  • WYSIWYG HMI design with Inkscape
  • HMI tree scale together with PLC instance tree
  • Re-usable widgets and pages
  • Simple yet powerful widgets
  • How does it work ?
• Widget syntax
  • Widget Type
  • Update Frequency
  • Parameters
  • Variable bindings
  • Enable expression
• Pages, Jumps and HMI_NODE relativity
  • Absolute and relative pages
  • Jumps
  • Back: Jump to previous page
  • Special /CURRENT_PAGE_n variable
  • Overlapping geometry
  • Discarded element
  • References frames
  • Screensaver
  • Fading
  • Go full screen
• Re-using elements with Inkscape clones (svg:use)
  • Re-use of pages
  • Re-use of widgets
  • Re-use of SVG elements in widgets
• Using Groups (svg:g)
  • Nesting widgets
  • Side effects of optimization
• PLC variables and local variables
  • PLC variables start with /
  • Local Page variables start with .
  • Local HMI variables
• SVGHMI instances configuration
  • Ports, interfaces, path and MaxConnections
  • Watchdog
  • Starting and stopping browser
• Internationalization
  • Selecting text to be translated
  • Gettext, POedit and message catalogs
  • Adding a new language
  • Updating translations
• Include fonts in HMI
  • Fonts used by Inkscape
  • Supported font types in SVGHMI
  • Add/remove fonts
• Developer mode
  • Add JavaScript
  • Write new widget type
• Widget Types
  • HMI:Animate
  • HMI:Animaterotation
  • HMI:Assign
  • HMI:Back
  • HMI:Button
  • HMI:Circularbar
  • HMI:Circularslider
  • HMI:Custom
  • HMI:Customhtml
  • HMI:Display
  • HMI:Dropdown
  • HMI:Foreach
  • HMI:Image
  • HMI:Input
  • HMI:JsonTable
  • HMI:Jump
  • HMI:Keypad
  • HMI:List
  • HMI:Listswitch
  • HMI:Meter
  • HMI:Multistate
  • HMI:Page
  • HMI:Pathslider
  • HMI:Scrollbar
  • HMI:Slider
  • HMI:Switch
  • HMI:Textlist
  • HMI:Textstylelist
  • HMI:Tooglebutton
  • HMI:Xygraph
• Pre-made Widget Library
  • Widget selection and configuration
  • How to create a widget library