ScxmlEditor-Tutorial

Contents SCXML Wiki SCXML Examples Forum

stand_with_Ukraine

Video overview - v.1.0

Video overview - v.2.0

Video overview - v.2.1

Video overview - v.2.2

Scxml Editor 2.5.5

Powerful tool for creating, editing and debugging SCXML charts.

MainExample

New: IDE Insight, DOT-based autolayout, SCXML to DOT, Inheritance, visual chart splitting, conditional project definitions, GIF maker etc.

Quick Support

Discord

Changelog

2.5.5: Chart design panel view presets
2.5.4: Nested initial state indication
2.5.3: Chart Draw Constraints, Select Chart Elements
2.5.1: Fast Triggers
2.5: Virtual Invoke
2.4: Post Save Commands, Self-Transitions Inside
2.3: Highlight Transitions
2.2.4: Import QtCreator state charts
2.2.3: Transition indexes bugfix
2.2.2: Option to override SmartTransitions
2.2.1: Qt SVG Monitors Released
2.2: Invoke ID is sending by testing apps
2.1.10: New breakpoints interface
2.1.9: Better handling of virtual states
2.1.8: Support of custom console testing applications like SCION command-line tool
2.1.7: SVG Export Settings
2.1.6: UScxmlTester with EcmaScript, In() predicate autocomplete, QtScxmlTester 5.9.1->5.15
2.1.5: Refactored Qt external debugger
2.1.4: Export SCXML to SVG, Structure View

System requirements

NOTICE! Dot '.' must be a float-point delimiter in OS Regional Settings !!!

Installation

You can find portable version as attached Zip in ScxmlEditor Github Release page

Latest version: [2.5.5.1755]

Windows Installation

First Install

  1. Download from latest Release page and unpack it in any target location
  2. Install ScxmlEditor\vcredist_x86.exe for UscxmlTester, Graphviz
  3. Install ScxmlEditor\vcredist_x64.exe for QtScxmlTester
    (You may skip steps 2 and 3 if you have previously installed MSVC 2015 Update 3 redistributable)
  4. Install ScxmlEditor\UScxmlTester\vcredist_x86_vc10.exe for UscxmlTester with EcmaScript datamodel
    (You may skip step 4 if you have previously installed MSVC 2010 redistributable)

Update

  1. Download from latest Release page and unpack it into Temporary folder
  2. Run Temporary\ScxmlEditor\ScxmlEditor_InstallOrUpdate.cmd "Path\To\Location\ScxmlEditor"

NOTICE! We are continiously making updates, so follow the version number on the README page and update to the latest to have all last cool features

Linux Installation

  1. Install Wine:
sudo apt -y install wine
  1. Install Microsoft fonts
sudo apt install ttf-mscorefonts-installer
  1. Download ScxmlEditor from latest Release page and unpack it in any target location
  2. Run program
cd /path/to/ScxmlEditor
wine ScxmlEditor.exe

MacOS Installation

Read detailed installation steps here


AppPreview

Roadmap

Donations

If you are interested in the development of ScxmlEditor we would be highly appreciated for any help.

Paypal
PaypalBtn

Licensing

ScxmlEditor source code is distributed under under the terms of the BSD 3-Clause License but if you want to compile binary application by yourself you need to purchase external components with their own licensies by yourself.

Current binaries are compiled with single development licensies registered by this github account owner name. Many thanks to all who made donations and especially to Ed K for his valuable contribution

External Components License Comment
TeeChart Pro Steema Software Licenses State chart editor is based on TTree
LMD VCL Complete LMD Innovative License Used in Dock Panels, Property inspector, etc.
VCL Components C++Builder Community Edition General application compilation and VCL standard components
log4cpp LGPL-2.1 license Logger
myJSON MIT License JSON Parsing
PNG Functions Mozilla Public License 1.1 PNG Functions

Table of contents

Creating SCXML charts

Creating a unit

Unit is a single scxml chart. It is mostly used for simple charts without invokable sessions.

Select File->New Unit or press Shift+Ctrl+N

new_unit

Creating a project

Project is the most preferred choice of designing scxml charts to get all benefits (custom triggers, nested scxml charts, etc.)

Select File->New Project or press Ctrl+N

new_project

Editing SCXML charts

ScxmlEditor provides a project wizard for opening scxml. It supports either opening files with metainformation about the position of states and transitions or plain scxml files. You can use ScxmlEditor to add states and transitions to the chart. You can add executable content to a state chart to enable the state machine to modify its data model and to interact with external entities.

  1. Select File->Open Unit or press Shift+Ctrl+O (for all types of .scxml files)
  2. Select File->Open Project or press Ctrl+O (for ScxmlEditor .sproj files)

Property inspector

Is used to edit and examine the properties of the currently selected states, executable contents and transitions.

2018-09-26 09 50 33

Editor tabs

Are used to add scxml elements, zoom, align, change chart visual options, etc.

2018-09-26 09 50 33

NEW! IDE Insight

Press 'Ctrl+.' to call IDE Insight dialog where you may search for all actions through the application. Add shapes, edit properties in one place!

ide_insight

StructureViewSearch

Debugging

ScxmlEditor has an ability to receive and send string UDP commands:

Receive API:

BeforeEnter graphically highlight and BeforeExit unhighlight the corresponding states, other commands are displayed in CallStack panel

Since ScxmlEditor 2.3 there is an option to highlight taking transitions in BeforeTakingTransition Message format: FromState|TransitionIndex where TransitionIndex is transition xml child index

Example of commands:

You can also trace the execution of the chart and use breakpoints.

Local debugging

ScxmlEditor starts a testing application, intercepts its command line output and may communicate in two modes:

There are two ready-to-use testing applications:

  1. Based on USCXML framework. Supports null, lua, ecmascript datamodels

  2. QtScxmlTester - based on Qt SCXML framework Supports null, ecmascript datamodels

Also you may write your own testing application using the corresponding API

External debugging

In this mode ScxmlEditor only listens UDP commands for highlighting states and displaying messages in CallStack panel

Breakpoints

BreakpointsImage

Qt SCXML framework debugging

NEW! Qt SCXML Debug Via SVG

It was an old dream to monitor state machine workflow without any external dependencies in Qt and finally it comes true. We prepared some native SCXML SVG monitors:

StopWatchDemo

Since ScxmlEditor 2.2.1 you can export SCXML to SVG, include only monitor headers in your app and create monitor instances any time.

NOTICE: While state machine pointer is not set, the monitor does nothing and can be left in Release.

Qt SCXML External Debugging with ScxmlEditor

For Qt SCXML applications you may include scxmlexternmonitor2.h header to your project and follow the instructions

Example of debugging Qt Calculator-QML project

MonitorQML1

  1. Select Run->Start listening from external application
  2. Select Run->Run
  3. Launch Calculator-QML.exe
  4. Use Pause for tracing (optionally)

CalculatorDebug

TOP Contents SCXML Wiki SCXML Examples Forum