VisB: Difference between revisions

VisB

VisB is a plugin for ProB2-UI, the new user interface of ProB based on JavaFX and the ProB2-Java-API . It is included in the latest Snapshot builds of ProB2-UI, but can be downloaded at https://www3.hhu.de/stups/downloads/prob2/plugins/ for older version of ProB2-UI.

An article about VisB has been published in the ABZ'2020 proceedings.

Installing VisB Plugin

To install VisB in the JavaFX-based ProB2-UI you need to:

1. Choose "Plugin Menu" in the Advanced menu 2. Click on the "Add Plugin..." button. 3. Select the VisB JAR file you have downloaded from https://www3.hhu.de/stups/downloads/prob2/plugins/ 4. Choose the "Open VisB" command in the Advanced menu

You can now choose a JSON file which builds on top of a SVG graphics file. The JSON file contains a reference to a SVG file, along with entries to modify attributes based on the current state of a B model and entries which specify how VisB should react to clicks on the SVG. The SVG file should contain object ids which are referenced in the JSON file.

Here is a sample file:

{
  "svg":"Train2.svg",
  "items":[
    {
      "id":"Train1_rect",
      "attr":"visibility",
      "value":"IF 1:TRAIN THEN \"visible\" ELSE \"hidden\" END"
    },
    {
      "id":"Train1_rect",
      "attr":"fill",
      "value":"IF train_speed(1)>0 THEN \"blue\" ELSE \"orange\" END"
    },
    {
      "id":"Train1_rect",
      "attr":"x",
      "value":"train_back_loc(1)*10+20"
    },
    {
      "id":"Train1_rect",
      "attr":"width",
      "value":"train_length(1)*10"
    }
    ],
  "events":[
    {
      "id":"Train1_rect",
      "event":"Train_Move1",
      "predicates":[
        "1=1"
      ]
    }
    ]
}

VisB Attributes

For VisB items every entry needs

• id, this is the identifier of an object in the associated SVG file
• attr a valid SVG attribute
• value a B formula which will be evaluated in the current state of a model and yields a new value for the above attribute.

For VisB event every entry needs

• id, this is the identifier of an object in the associated SVG file
• event a valid B operation or event of the loaded formal model
• predicates an optional list of B predicates, which can be used to set parameters of the B operation that is executed upon a click

Additionally VisB now recognises for both items and events:

• ignore, if this attribute is present the item will be ignored
• repeat, if this attribute is present the item will be replicated (see below)
• for, if this attribute is present the item will be replicated (see below)

Other attributes will be ignored. E.g, one can use a comment attribute to add comments to the VisB items.

When executing an event, VisB now performs the following replacements within the predicates of the event:

• %shiftKey is replaced by TRUE if the shift key was pressed during the click, FALSE otherwise
• %metaKey is replaced by TRUE if the shift key was pressed during the click, FALSE otherwise
• %pageX is replaced by the x coordinate of the click relative to the top-left of the entire VisB SVG
• %pageY is replaced by the y coordinate of the click relative to the top-left of the entire VisB SVG

Finally, events can now be associated with various hovers. For this you just need to add an attribute hovers which contains a list of JSON objects with the following attributes:

• id, this is the identifier of an object in the associated SVG file; this attribut is optional; if it is not present the id specified in the VisB event will be used.
• attr a valid SVG attribute
• enter a value which will be used when the mouse enters the area of the object
• leave a value which will be used to restore the attribute when the mouse leaves the area

Note that the enter and leave values have to be static at the moment; in future we plan to allow B formulas here and also apply the repetition/replacement mechanism specified above. If you just wish to attach a hover to an SVG object (and no B operation/event) you can set the event field of the VisB event to the empty string ("event":""). You should not use attributes for the hover which are set by VisB items.

Here is an example VisB event with hovers:

 {
      "id": "button",
      "event": "toggle_button",
      "hovers": [{ "attr":"stroke-width", "enter":"6", "leave":"1"},
                 { "attr":"opacity", "enter":"0.8", "leave":"1.0"}]
    }

VisB Examples

Some examples can be found here. More details and examples will be added later.

Citing VisB

This is the Bibtex entry for an article about VisB in the ABZ'2020 proceedings:

@inproceedings{WerthLeuschel:abz2020,
  author    = {Michelle Werth and Michael Leuschel},
  title     = {{VisB}: A Lightweight Tool to Visualize Formal Models with {SVG} Graphics},
  booktitle = {Proceedings ABZ 2020},
  editor="Raschke, Alexander and M{\'e}ry, Dominique and Houdek, Frank",
  year      = {2020},
  series = {LNCS 12071},
  pages = "260--265",
  isbn="978-3-030-48077-6"
}