From f1beba65e3a9beab87f206a237f09063c359d3b9 Mon Sep 17 00:00:00 2001 From: Roberto Boati Date: Tue, 16 Dec 2014 13:37:47 +0100 Subject: [PATCH] Updated web demo --- web/css/style.css | 77 ++++------------- web/index.html | 216 +++++++++++++++++++++++----------------------- 2 files changed, 127 insertions(+), 166 deletions(-) diff --git a/web/css/style.css b/web/css/style.css index 9dde2e6..92e17fd 100644 --- a/web/css/style.css +++ b/web/css/style.css @@ -49,78 +49,39 @@ h2 { float: left; } -.box { +#diagramTitle { + font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; + font-size: 16px; +} + +#log { + font-family: 'Droid Sans Mono', Menlo, Consolas, 'Courier New', Courier, monospace; + font-size: 14px; +} + +.state { margin: 8px; padding: 10px; text-align: center; border-radius: 10px; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size: 18px; + border: 1px solid #3D3D3D; + background-color: white; } -.first-state { - font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; - font-size: 32px; -} - -#StateA { -} - -#StateB { - -} - -#StateC { - -} - -#StateD { - background-color: #7499ff -} - -#StateE { - background-color: #7499ff -} - -#StateF { - -} - -#StateG { - background-color: #7499ff -} - -#StateH { - background-color: #7499ff -} - -#StateX { - background-color: #7499ff -} - -#StateY { - background-color: #7499ff +.state.leaf { + background-color: #7499ff; } -#StateZ { - background-color: #7499ff +.state.initial { } - -#diagramTitle { - font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; - font-size: 16px; +.state.initial.leaf { } -#log { - font-family: 'Droid Sans Mono', Menlo, Consolas, 'Courier New', Courier, monospace; - font-size: 14px; +.state.current { + background-color: #FF4064; } -.currentState{ - border: 3px solid #3D3D3D; -} -.state{ - border: 1px solid #3D3D3D; -} diff --git a/web/index.html b/web/index.html index 8657265..7dd85cc 100644 --- a/web/index.html +++ b/web/index.html @@ -1,66 +1,63 @@ + - - FHSM Demo - - - - - + +qwe demo + + + + + +
-

Click the on a state and watch the log

-
- state A - -
- state B * - -
+
+ state A* +
+ state B* +
state C - -
- state D *

+
+ state D*
-
- state E
+
+ state E
-
- state F * - -
- state G
+
+ state F* +
+ state G
-
- state H *
+
+ state H*
-
+
state X
-
+
state Y
-
+
state Z
-
+

Diagram

States are classified in leaf and non-leaf states:

    -
  • leaf states are colored in blue have no children
    • +
  • leaf states are colored in blue and have no children
  • non-leaf states have at least one child that is marked (*) as an initial state
    • @@ -69,89 +66,92 @@

    Diagram

    Log


    - +
+