transitions-gui 0.9.0

是transitions状态机包的扩展。《transitions-gui》使用tornado作为网络服务器，使用cytoscape进行图形绘制和操作。有关javascript工作流程的信息，请访问前端。服务器（包括状态机）和客户端（您的网络浏览器）通过WebSockets进行通信。

反馈所需：东西没有按预期工作？您不是特别喜欢所选的图标、颜色、布局或样式？现在是时候提出意见和建议并创建新问题。

安装

从PyPI安装 transitions-gui

pip install transitions-gui

或克隆GitHub存储库

# clone the repository
git clone https://github.com/pytransitions/transitions-gui.git
cd transitions-gui
# install transitions-gui and all dependencies
python setup.py install

快速入门

让我们从创建一个简单的循环状态机开始。运行 python examples/simple.py 将执行以下代码

from transitions_gui import WebMachine
import time

states = ['A', 'B', 'C', 'D', 'E', 'F']
# initializing the machine will also start the server (default port is 8080)
machine = WebMachine(states=states, initial='A', name="Simple Machine",
                     ordered_transitions=True,
                     ignore_invalid_triggers=True,
                     auto_transitions=False)

try:
    while True:
        time.sleep(5)
        machine.next_state()
except KeyboardInterrupt:  # Ctrl + C will shutdown the machine
    machine.stop_server()

这将创建一个简单的循环状态机 'ordered' 转换。该机器的名称将是 Simple Machine，它将作为其自身的模型，这是默认行为。初始状态是状态 A，并且每5秒状态将改变。接下来，打开您最喜欢的最新版网页浏览器，转到 localhost:8080。您应该看到类似于以下内容：

GUI相当简单，只包含两个按钮，您可以在左上角看到它们

• - 在 事件模式 和 编辑模式 之间切换
• - 保存当前布局

事件模式

GUI始终以 事件模式 启动，这由铅笔的 白色 背景表示。在此模式下，可以通过单击和拖动来移动图形，但不能单独移动节点。在 事件模式 中单击边/转换将向机器发送相关的触发器。试试看！单击任何边都应触发状态改变。由于所有边都触发 next_state 事件，因此您单击哪个边都无关紧要。

编辑模式

现在让我们重新排列一些状态节点，好吗？单击铅笔符号以切换到 编辑模式（铅笔的背景会改变），并开始像这样拖动节点

在 编辑模式 中，单击边不会触发事件。然而，机器的模型状态将被无差别更新。完成操作后，切换回 事件模式。或者也可以不切换。模式对于下一步并不重要。我们将保存此布局，以便下次运行状态机。单击保存按钮（）将节点当前位置存储在浏览器本地存储中。布局按名称存储。如果您计划使用 transitions-gui 与多个状态机一起使用，建议通过名称区分它们。现在重新加载浏览器标签。您的节点排列应该会被重新创建。除非您再次保存，否则拖动节点将不会更改已保存的布局。

关于布局

当将转换状态机配置发送到浏览器时，浏览器将根据以下优先级列表确定布局

• 传递的URL参数 layout 的值
• 浏览器本地存储中的布局
• 默认布局
  • 机器包含 嵌套状态 -> dagre
  • 否则 -> concentric

transitions-gui 可能不会立即选择正确的布局来适应您的图形。通过传递不同的布局值，您可以选择最适合您的需求的布局。此外，如果想要图形自动重新排列，还可以“重置”布局。当 layout=<value> 传递时，手动存储的排列将被忽略。通过以 localhost:8080?layout=bilkent 打开GUI来查看带有改进版CoSE排列的简单机器。它应该看起来像这样

目前支持的布局值有

• dagre (源)
• concentric (源)
• bilkent (源)

此功能由 cytoscape.js 提供。如果您认为 transitions-gui 应该支持更多布局，请随时打开一个问题，提出您最喜欢的布局。

显示更多详细信息

默认情况下，仅显示状态和边。如果您还想注释 conditions 和 enter/exit 回调，可以将 details=true 作为 URL 参数传递，如下所示：localhost:8080?details=true。此图（意义不大）是由 examples/process.py 生成的。您可能还记得 transitions 文档中的此图。

自定义样式

如果您想调整的不仅仅是节点的位置，您可以通过 graph_css 将 CSS 样式信息传递给 WebMachine。这将转发给 cytoscape。一个样式项包含一个 selector 和一个 css 字段。

import time

from transitions_gui import WebMachine

# just a simple state machine setup
states = ["Red", "Yellow", "Green"]
transitions = [
    ["tick", "Red", "Green"],
    ["tick", "Green", "Yellow"],
    ["tick", "Yellow", "Red"],
    ["reset", "*", "Red"]
]

# Check https://js.cytoscape.org/#selectors and https://js.cytoscape.org/#style for more options
styling = [
    {"selector": 'node[id = "Green"]',  # state names are equal to node IDs
     "css": {"font-size": 28, "color": "white", "background-color": "darkgreen"}},
    {"selector": 'node[id = "Red"]',
     "css": {"shape": "ellipse", "color": "darkred"}},
    {"selector": 'node[id != "Green"]',  # select all nodes EXCEPT green
     "css": {"border-style": "dotted"}},
    {"selector": "edge",  # select all edges
     "css": {"font-size": 12, "text-margin-y": -12, "text-background-opacity": 0}},
    {"selector": 'edge[source = "Red"][target = "Green"]',  # select all edges from Red to Green
     "css": {"line-gradient-stop-colors": "red yellow black", "line-fill": "linear-gradient"}},
    {"selector": 'edge[label = "reset"]',  # transition triggers map to edge labels (without conditions)
     "css": {"line-style": "dotted", "target-arrow-shape": "triangle-tee"}}
]

machine = WebMachine(
    states=states,
    transitions=transitions,
    initial="Red",
    name="Traffic Machine",
    ignore_invalid_triggers=True,
    auto_transitions=False,
    graph_css=styling,
)

try:
    while True:
        time.sleep(5)
        machine.tick()
except KeyboardInterrupt:  # Ctrl + C will shutdown the machine
    machine.stop_server()

要了解您可以调整的内容，请查看 cytoscape 文档，特别是 选择器 和 样式 部分。上面的示例应如下所示

NestedWebMachine

如果您想使用层次化机器，则需要使用 NestedWebMachine 而不是 WebMachine。例如，请参阅 examples/hsm.py 或 examples/parallel.py。

HSM 是 transitions 示例的略作调整版本 ...

... 以及 parallel.py（如名称所示）利用并行状态

顺便说一下，当并行状态的高度大于其宽度时，虚线的方向会改变。
这是一个实验性解决方案，可能在未来发生变化。

我有 [错误报告/问题]...

对于错误报告和其他问题，请在 GitHub 上打开一个问题。