diff --git a/notebooks/manual/VisB_Features.ipynb b/notebooks/manual/VisB_Features.ipynb
index 3e61b7254046c12ac1a56e75c099c8ca4c6514fc..cb248d9ce2b47d6decb2af96f9b2d31c698912f2 100644
--- a/notebooks/manual/VisB_Features.ipynb
+++ b/notebooks/manual/VisB_Features.ipynb
@@ -2,14 +2,14 @@
"cells": [
{
"cell_type": "markdown",
- "id": "5850e2ad",
+ "id": "19cb95a8",
"metadata": {},
"source": [
"# VisB\n",
"\n",
"\n",
- "Initially VisB was developed for [[ProB2-UI]], the new user interface of ProB based on JavaFX and the ProB2-Java-API.\n",
- "It is included in ProB2-UI version 1.1.0 and later, which [[Download#ProB2-UI using Java FX|can be downloaded here]].\n",
+ "Initially VisB was developed for ProB2-UI, the new user interface of ProB based on JavaFX and the ProB2-Java-API.\n",
+ "It is included in ProB2-UI version 1.1.0 and later.\n",
"\n",
"\n",
"ProB Tcl/Tk and probcli version 1.11.0 and later also support VisB visualisations:\n",
@@ -23,7 +23,7 @@
},
{
"cell_type": "markdown",
- "id": "53b80314",
+ "id": "c60ba2f9",
"metadata": {},
"source": [
"As of version 1.12 you can also provide many of the VisB annotations via B DEFINITIONS.\n",
@@ -53,7 +53,7 @@
{
"cell_type": "code",
"execution_count": 1,
- "id": "629b2052",
+ "id": "e05c7f0d",
"metadata": {},
"outputs": [
{
@@ -82,7 +82,7 @@
{
"cell_type": "code",
"execution_count": 2,
- "id": "ed27217b",
+ "id": "5c13651d",
"metadata": {},
"outputs": [
{
@@ -103,7 +103,7 @@
{
"cell_type": "code",
"execution_count": 3,
- "id": "9e2e4225",
+ "id": "c98db2e1",
"metadata": {},
"outputs": [
{
@@ -235,7 +235,6 @@
" <script>\n",
" function visualise0(stepNr) {\n",
" setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 0\");\n",
- " highlightRow(stepNr);\n",
" }\n",
" async function runAll(delay) {\n",
" visualise0(1);\n",
@@ -247,10 +246,10 @@
" <script> function registerHovers() {} </script>\n",
" </head>\n",
"<body>\n",
- " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
- " <div text-align=\"left\"> \n",
- " \n",
"\n",
+ "\n",
+ " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
+ " <div text-align=\"left\">\n",
"<svg xmlns=\"http://www.w3.org/2000/svg\"\n",
" width=\"400\" height=\"100\" viewBox=\"0 0 400 100\" >\n",
" <circle id=\"button\" cx=\"200\" cy=\"50\" fill=\"red\" r=\"30\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
@@ -296,7 +295,7 @@
},
{
"cell_type": "markdown",
- "id": "b8d00549",
+ "id": "5fedc58e",
"metadata": {},
"source": [
"A VISB_SVG_OBJECT definition should either define a record or a set of records. The fields of the record specify the kind of object created and its initial attributes:\n",
@@ -310,13 +309,13 @@
{
"cell_type": "code",
"execution_count": 4,
- "id": "669da81c",
+ "id": "c85fc53a",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
- "Loaded machine: test2"
+ "Loaded machine: test_svg_objects"
]
},
"execution_count": 4,
@@ -326,14 +325,14 @@
],
"source": [
"::load\n",
- "MACHINE test2\n",
+ "MACHINE test_svg_objects\n",
"DEFINITIONS\n",
" N == 5; WID==400.0;\n",
" VISB_JSON_FILE == \"\";\n",
" VISB_SVG_BOX == rec(height:100, width:WID+30.0);\n",
" VISB_SVG_OBJECTS == UNION(i).(i:1..N|\n",
" {rec(`id`:(\"circ\",i), svg_class:\"circle\",\n",
- " cx:real(i)*WID/real(N),cy:50, r:(30-i), fill: \"red\",\n",
+ " cx:real(i)*WID/real(N),cy:50, r:(30-N), fill: \"red\",\n",
" stroke:\"black\", `stroke-width`:2)});\n",
"END"
]
@@ -341,7 +340,7 @@
{
"cell_type": "code",
"execution_count": 5,
- "id": "5846d13f",
+ "id": "29ec21cb",
"metadata": {},
"outputs": [
{
@@ -362,7 +361,7 @@
{
"cell_type": "code",
"execution_count": 6,
- "id": "64d5cc55",
+ "id": "b863e764",
"metadata": {},
"outputs": [
{
@@ -494,7 +493,6 @@
" <script>\n",
" function visualise0(stepNr) {\n",
" setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 0\");\n",
- " highlightRow(stepNr);\n",
" }\n",
" async function runAll(delay) {\n",
" visualise0(1);\n",
@@ -506,16 +504,16 @@
" <script> function registerHovers() {} </script>\n",
" </head>\n",
"<body>\n",
- " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
- " <div text-align=\"left\"> \n",
- " \n",
"\n",
+ "\n",
+ " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
+ " <div text-align=\"left\">\n",
"<svg xmlns=\"http://www.w3.org/2000/svg\"\n",
" width=\"430.0\" height=\"100\" viewBox=\"0 0 430.0 100\" >\n",
- " <circle id=\"circ1\" cx=\"80.0\" cy=\"50\" fill=\"red\" r=\"29\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
- " <circle id=\"circ2\" cx=\"160.0\" cy=\"50\" fill=\"red\" r=\"28\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
- " <circle id=\"circ3\" cx=\"240.0\" cy=\"50\" fill=\"red\" r=\"27\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
- " <circle id=\"circ4\" cx=\"320.0\" cy=\"50\" fill=\"red\" r=\"26\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
+ " <circle id=\"circ1\" cx=\"80.0\" cy=\"50\" fill=\"red\" r=\"25\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
+ " <circle id=\"circ2\" cx=\"160.0\" cy=\"50\" fill=\"red\" r=\"25\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
+ " <circle id=\"circ3\" cx=\"240.0\" cy=\"50\" fill=\"red\" r=\"25\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
+ " <circle id=\"circ4\" cx=\"320.0\" cy=\"50\" fill=\"red\" r=\"25\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
" <circle id=\"circ5\" cx=\"400.0\" cy=\"50\" fill=\"red\" r=\"25\" stroke=\"black\" stroke-width=\"2\"></circle>\n",
"</svg>\n",
" </div>\n",
@@ -560,7 +558,7 @@
{
"cell_type": "code",
"execution_count": 7,
- "id": "1cddf7f4",
+ "id": "2f6bcc5b",
"metadata": {},
"outputs": [
{
@@ -568,18 +566,18 @@
"text/markdown": [
"|cx|cy|fill|id|r|stroke|stroke-width|svg_class|\n",
"|---|---|---|---|---|---|---|---|\n",
- "|80.0|50|\"red\"|(\"circ\"↦1)|29|\"black\"|2|\"circle\"|\n",
- "|160.0|50|\"red\"|(\"circ\"↦2)|28|\"black\"|2|\"circle\"|\n",
- "|240.0|50|\"red\"|(\"circ\"↦3)|27|\"black\"|2|\"circle\"|\n",
- "|320.0|50|\"red\"|(\"circ\"↦4)|26|\"black\"|2|\"circle\"|\n",
+ "|80.0|50|\"red\"|(\"circ\"↦1)|25|\"black\"|2|\"circle\"|\n",
+ "|160.0|50|\"red\"|(\"circ\"↦2)|25|\"black\"|2|\"circle\"|\n",
+ "|240.0|50|\"red\"|(\"circ\"↦3)|25|\"black\"|2|\"circle\"|\n",
+ "|320.0|50|\"red\"|(\"circ\"↦4)|25|\"black\"|2|\"circle\"|\n",
"|400.0|50|\"red\"|(\"circ\"↦5)|25|\"black\"|2|\"circle\"|\n"
],
"text/plain": [
"cx\tcy\tfill\tid\tr\tstroke\tstroke-width\tsvg_class\n",
- "80.0\t50\t\"red\"\t(\"circ\"|->1)\t29\t\"black\"\t2\t\"circle\"\n",
- "160.0\t50\t\"red\"\t(\"circ\"|->2)\t28\t\"black\"\t2\t\"circle\"\n",
- "240.0\t50\t\"red\"\t(\"circ\"|->3)\t27\t\"black\"\t2\t\"circle\"\n",
- "320.0\t50\t\"red\"\t(\"circ\"|->4)\t26\t\"black\"\t2\t\"circle\"\n",
+ "80.0\t50\t\"red\"\t(\"circ\"|->1)\t25\t\"black\"\t2\t\"circle\"\n",
+ "160.0\t50\t\"red\"\t(\"circ\"|->2)\t25\t\"black\"\t2\t\"circle\"\n",
+ "240.0\t50\t\"red\"\t(\"circ\"|->3)\t25\t\"black\"\t2\t\"circle\"\n",
+ "320.0\t50\t\"red\"\t(\"circ\"|->4)\t25\t\"black\"\t2\t\"circle\"\n",
"400.0\t50\t\"red\"\t(\"circ\"|->5)\t25\t\"black\"\t2\t\"circle\"\n"
]
},
@@ -594,7 +592,7 @@
},
{
"cell_type": "markdown",
- "id": "7c892901",
+ "id": "c18595ee",
"metadata": {},
"source": [
"### VISB_SVG_UPDATES\n",
@@ -606,13 +604,13 @@
{
"cell_type": "code",
"execution_count": 8,
- "id": "7d8491f0",
+ "id": "b0f7ee23",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
- "Loaded machine: test3"
+ "Loaded machine: test_svg_updates"
]
},
"execution_count": 8,
@@ -622,7 +620,7 @@
],
"source": [
"::load\n",
- "MACHINE test3\n",
+ "MACHINE test_svg_updates\n",
"VARIABLES x\n",
"INVARIANT x:1..N\n",
"INITIALISATION x:=1\n",
@@ -633,7 +631,7 @@
" VISB_SVG_BOX == rec(height:100, width:WID+30.0);\n",
" VISB_SVG_OBJECTS == UNION(i).(i:1..N|\n",
" {rec(`id`:(\"circ\",i), svg_class:\"circle\",\n",
- " cx:real(i)*WID/real(N),cy:50, r:(30-i),\n",
+ " cx:real(i)*WID/real(N),cy:50, r:(30-N),\n",
" stroke:\"black\")});\n",
" VISB_SVG_UPDATES == UNION(i).(i:1..N|\n",
" {rec(`id`:(\"circ\",i),\n",
@@ -645,7 +643,7 @@
{
"cell_type": "code",
"execution_count": 9,
- "id": "ea98b025",
+ "id": "6b924113",
"metadata": {},
"outputs": [
{
@@ -666,7 +664,7 @@
{
"cell_type": "code",
"execution_count": 10,
- "id": "bb265467",
+ "id": "80e35ec5",
"metadata": {},
"outputs": [
{
@@ -798,7 +796,6 @@
" <script>\n",
" function visualise0(stepNr) {\n",
" setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 0\");\n",
- "Extracting SVG updates from VISB_SVG_UPDATES\n",
" setAttr(\"circ2\",\"fill\",\"gray\");\n",
" setAttr(\"circ2\",\"stroke-width\",\"0.5\");\n",
" setAttr(\"circ3\",\"fill\",\"gray\");\n",
@@ -809,7 +806,6 @@
" setAttr(\"circ5\",\"stroke-width\",\"0.5\");\n",
" setAttr(\"circ1\",\"fill\",\"red\");\n",
" setAttr(\"circ1\",\"stroke-width\",\"2.0\");\n",
- " highlightRow(stepNr);\n",
" }\n",
" async function runAll(delay) {\n",
" visualise0(1);\n",
@@ -821,17 +817,16 @@
" <script> function registerHovers() {} </script>\n",
" </head>\n",
"<body>\n",
- " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
- " <div text-align=\"left\"> \n",
- " \n",
"\n",
+ "\n",
+ " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
+ " <div text-align=\"left\">\n",
"<svg xmlns=\"http://www.w3.org/2000/svg\"\n",
" width=\"430.0\" height=\"100\" viewBox=\"0 0 430.0 100\" >\n",
- "Extracting SVG updates from VISB_SVG_UPDATES\n",
- " <circle id=\"circ1\" cx=\"80.0\" cy=\"50\" fill=\"red\" r=\"29\" stroke=\"black\" stroke-width=\"2.0\"></circle>\n",
- " <circle id=\"circ2\" cx=\"160.0\" cy=\"50\" fill=\"gray\" r=\"28\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
- " <circle id=\"circ3\" cx=\"240.0\" cy=\"50\" fill=\"gray\" r=\"27\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
- " <circle id=\"circ4\" cx=\"320.0\" cy=\"50\" fill=\"gray\" r=\"26\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
+ " <circle id=\"circ1\" cx=\"80.0\" cy=\"50\" fill=\"red\" r=\"25\" stroke=\"black\" stroke-width=\"2.0\"></circle>\n",
+ " <circle id=\"circ2\" cx=\"160.0\" cy=\"50\" fill=\"gray\" r=\"25\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
+ " <circle id=\"circ3\" cx=\"240.0\" cy=\"50\" fill=\"gray\" r=\"25\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
+ " <circle id=\"circ4\" cx=\"320.0\" cy=\"50\" fill=\"gray\" r=\"25\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
" <circle id=\"circ5\" cx=\"400.0\" cy=\"50\" fill=\"gray\" r=\"25\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
"</svg>\n",
" </div>\n",
@@ -876,7 +871,7 @@
{
"cell_type": "code",
"execution_count": 11,
- "id": "d8d09a69",
+ "id": "1b0b9ff4",
"metadata": {},
"outputs": [
{
@@ -897,7 +892,7 @@
{
"cell_type": "code",
"execution_count": 12,
- "id": "61d5ca71",
+ "id": "d02c5098",
"metadata": {},
"outputs": [
{
@@ -1029,7 +1024,6 @@
" <script>\n",
" function visualise1(stepNr) {\n",
" setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 1\");\n",
- "Extracting SVG updates from VISB_SVG_UPDATES\n",
" setAttr(\"circ1\",\"fill\",\"gray\");\n",
" setAttr(\"circ1\",\"stroke-width\",\"0.5\");\n",
" setAttr(\"circ3\",\"fill\",\"gray\");\n",
@@ -1040,7 +1034,6 @@
" setAttr(\"circ5\",\"stroke-width\",\"0.5\");\n",
" setAttr(\"circ2\",\"fill\",\"red\");\n",
" setAttr(\"circ2\",\"stroke-width\",\"2.0\");\n",
- " highlightRow(stepNr);\n",
" }\n",
" async function runAll(delay) {\n",
" visualise1(1);\n",
@@ -1052,17 +1045,16 @@
" <script> function registerHovers() {} </script>\n",
" </head>\n",
"<body>\n",
- " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
- " <div text-align=\"left\"> \n",
- " \n",
"\n",
+ "\n",
+ " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
+ " <div text-align=\"left\">\n",
"<svg xmlns=\"http://www.w3.org/2000/svg\"\n",
" width=\"430.0\" height=\"100\" viewBox=\"0 0 430.0 100\" >\n",
- "Extracting SVG updates from VISB_SVG_UPDATES\n",
- " <circle id=\"circ1\" cx=\"80.0\" cy=\"50\" fill=\"gray\" r=\"29\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
- " <circle id=\"circ2\" cx=\"160.0\" cy=\"50\" fill=\"red\" r=\"28\" stroke=\"black\" stroke-width=\"2.0\"></circle>\n",
- " <circle id=\"circ3\" cx=\"240.0\" cy=\"50\" fill=\"gray\" r=\"27\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
- " <circle id=\"circ4\" cx=\"320.0\" cy=\"50\" fill=\"gray\" r=\"26\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
+ " <circle id=\"circ1\" cx=\"80.0\" cy=\"50\" fill=\"gray\" r=\"25\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
+ " <circle id=\"circ2\" cx=\"160.0\" cy=\"50\" fill=\"red\" r=\"25\" stroke=\"black\" stroke-width=\"2.0\"></circle>\n",
+ " <circle id=\"circ3\" cx=\"240.0\" cy=\"50\" fill=\"gray\" r=\"25\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
+ " <circle id=\"circ4\" cx=\"320.0\" cy=\"50\" fill=\"gray\" r=\"25\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
" <circle id=\"circ5\" cx=\"400.0\" cy=\"50\" fill=\"gray\" r=\"25\" stroke=\"black\" stroke-width=\"0.5\"></circle>\n",
"</svg>\n",
" </div>\n",
@@ -1107,7 +1099,7 @@
{
"cell_type": "code",
"execution_count": 13,
- "id": "2993ed34",
+ "id": "252c373c",
"metadata": {},
"outputs": [
{
@@ -1141,7 +1133,7 @@
},
{
"cell_type": "markdown",
- "id": "7818407b",
+ "id": "be35f677",
"metadata": {},
"source": [
"### VISB_SVG_CONTENTS\n",
@@ -1153,13 +1145,13 @@
{
"cell_type": "code",
"execution_count": 14,
- "id": "5bdcf602",
+ "id": "a6e8923b",
"metadata": {},
"outputs": [
{
"data": {
"text/plain": [
- "Loaded machine: test4"
+ "Loaded machine: test_svg_contents"
]
},
"execution_count": 14,
@@ -1169,7 +1161,7 @@
],
"source": [
"::load\n",
- "MACHINE test4\n",
+ "MACHINE test_svg_contents\n",
"VARIABLES x\n",
"INVARIANT x:1..N\n",
"INITIALISATION x:=1\n",
@@ -1180,7 +1172,7 @@
" VISB_SVG_BOX == rec(height:100, width:WID+30.0);\n",
" VISB_SVG_OBJECTS == UNION(i).(i:1..N|\n",
" {rec(`id`:(\"circ\",i), svg_class:\"circle\",\n",
- " cx:real(i)*WID/real(N),cy:50, r:(30-i))});\n",
+ " cx:real(i)*WID/real(N),cy:50, r:(30-N))});\n",
" VISB_SVG_UPDATES == UNION(i).(i:1..N|\n",
" {rec(`id`:(\"circ\",i),\n",
" class: IF i=x THEN \"selected\" ELSE \"normal\" END)});\n",
@@ -1203,7 +1195,7 @@
{
"cell_type": "code",
"execution_count": 15,
- "id": "366c7bfc",
+ "id": "1e9d51c2",
"metadata": {},
"outputs": [
{
@@ -1224,7 +1216,7 @@
{
"cell_type": "code",
"execution_count": 16,
- "id": "569344f3",
+ "id": "8b0c885d",
"metadata": {},
"outputs": [
{
@@ -1356,13 +1348,11 @@
" <script>\n",
" function visualise0(stepNr) {\n",
" setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 0\");\n",
- "Extracting SVG updates from VISB_SVG_UPDATES\n",
" setAttr(\"circ2\",\"class\",\"normal\");\n",
" setAttr(\"circ3\",\"class\",\"normal\");\n",
" setAttr(\"circ4\",\"class\",\"normal\");\n",
" setAttr(\"circ5\",\"class\",\"normal\");\n",
" setAttr(\"circ1\",\"class\",\"selected\");\n",
- " highlightRow(stepNr);\n",
" }\n",
" async function runAll(delay) {\n",
" visualise0(1);\n",
@@ -1374,13 +1364,12 @@
" <script> function registerHovers() {} </script>\n",
" </head>\n",
"<body>\n",
- " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
- " <div text-align=\"left\"> \n",
- " \n",
"\n",
+ "\n",
+ " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
+ " <div text-align=\"left\">\n",
"<svg xmlns=\"http://www.w3.org/2000/svg\"\n",
" width=\"430.0\" height=\"100\" viewBox=\"0 0 430.0 100\" >\n",
- "Detected VISB_SVG_CONTENTS (requires_nothing)\n",
"\n",
" <style>\n",
" .selected {\n",
@@ -1394,11 +1383,10 @@
" }\n",
" </style>\n",
"\n",
- "Extracting SVG updates from VISB_SVG_UPDATES\n",
- " <circle id=\"circ1\" class=\"selected\" cx=\"80.0\" cy=\"50\" r=\"29\"></circle>\n",
- " <circle id=\"circ2\" class=\"normal\" cx=\"160.0\" cy=\"50\" r=\"28\"></circle>\n",
- " <circle id=\"circ3\" class=\"normal\" cx=\"240.0\" cy=\"50\" r=\"27\"></circle>\n",
- " <circle id=\"circ4\" class=\"normal\" cx=\"320.0\" cy=\"50\" r=\"26\"></circle>\n",
+ " <circle id=\"circ1\" class=\"selected\" cx=\"80.0\" cy=\"50\" r=\"25\"></circle>\n",
+ " <circle id=\"circ2\" class=\"normal\" cx=\"160.0\" cy=\"50\" r=\"25\"></circle>\n",
+ " <circle id=\"circ3\" class=\"normal\" cx=\"240.0\" cy=\"50\" r=\"25\"></circle>\n",
+ " <circle id=\"circ4\" class=\"normal\" cx=\"320.0\" cy=\"50\" r=\"25\"></circle>\n",
" <circle id=\"circ5\" class=\"normal\" cx=\"400.0\" cy=\"50\" r=\"25\"></circle>\n",
"</svg>\n",
" </div>\n",
@@ -1443,7 +1431,7 @@
{
"cell_type": "code",
"execution_count": 17,
- "id": "caeb65b3",
+ "id": "3b67a359",
"metadata": {},
"outputs": [
{
@@ -1478,7 +1466,7 @@
{
"cell_type": "code",
"execution_count": 18,
- "id": "09c42864",
+ "id": "ac5e7081",
"metadata": {},
"outputs": [
{
@@ -1486,18 +1474,18 @@
"text/markdown": [
"|cx|cy|id|r|svg_class|\n",
"|---|---|---|---|---|\n",
- "|80.0|50|(\"circ\"↦1)|29|\"circle\"|\n",
- "|160.0|50|(\"circ\"↦2)|28|\"circle\"|\n",
- "|240.0|50|(\"circ\"↦3)|27|\"circle\"|\n",
- "|320.0|50|(\"circ\"↦4)|26|\"circle\"|\n",
+ "|80.0|50|(\"circ\"↦1)|25|\"circle\"|\n",
+ "|160.0|50|(\"circ\"↦2)|25|\"circle\"|\n",
+ "|240.0|50|(\"circ\"↦3)|25|\"circle\"|\n",
+ "|320.0|50|(\"circ\"↦4)|25|\"circle\"|\n",
"|400.0|50|(\"circ\"↦5)|25|\"circle\"|\n"
],
"text/plain": [
"cx\tcy\tid\tr\tsvg_class\n",
- "80.0\t50\t(\"circ\"|->1)\t29\t\"circle\"\n",
- "160.0\t50\t(\"circ\"|->2)\t28\t\"circle\"\n",
- "240.0\t50\t(\"circ\"|->3)\t27\t\"circle\"\n",
- "320.0\t50\t(\"circ\"|->4)\t26\t\"circle\"\n",
+ "80.0\t50\t(\"circ\"|->1)\t25\t\"circle\"\n",
+ "160.0\t50\t(\"circ\"|->2)\t25\t\"circle\"\n",
+ "240.0\t50\t(\"circ\"|->3)\t25\t\"circle\"\n",
+ "320.0\t50\t(\"circ\"|->4)\t25\t\"circle\"\n",
"400.0\t50\t(\"circ\"|->5)\t25\t\"circle\"\n"
]
},
@@ -1510,18 +1498,661 @@
":table VISB_SVG_OBJECTS"
]
},
+ {
+ "cell_type": "markdown",
+ "id": "f9df6251",
+ "metadata": {},
+ "source": [
+ "### VISB_SVG_FILE\n",
+ "\n",
+ "It is possible to combine the above VisB DEFINITIONS with either an additional SVG graphics file or with an additional JSON file (which can itself include an SVG graphics file).\n",
+ "\n",
+ "Note that when creating an HTML export the file includes an SVG description inside.\n",
+ "For example, the above rendering contains inside this SVG code:\n",
+ "```\n",
+ "<svg xmlns=\"http://www.w3.org/2000/svg\"\n",
+ " width=\"430.0\" height=\"100\" viewBox=\"0 0 430.0 100\" >\n",
+ " <style>\n",
+ " .selected {\n",
+ " stroke : black;\n",
+ " stroke-width: 2.0;\n",
+ " fill: red\n",
+ " }\n",
+ " .normal {\n",
+ " stroke : none;\n",
+ " fill : white\n",
+ " }\n",
+ " </style>\n",
+ " <circle id=\"circ1\" class=\"normal\" cx=\"80.0\" cy=\"50\" r=\"29\"></circle>\n",
+ " <circle id=\"circ2\" class=\"normal\" cx=\"160.0\" cy=\"50\" r=\"28\"></circle>\n",
+ " <circle id=\"circ3\" class=\"selected\" cx=\"240.0\" cy=\"50\" r=\"27\"></circle>\n",
+ " <circle id=\"circ4\" class=\"normal\" cx=\"320.0\" cy=\"50\" r=\"26\"></circle>\n",
+ " <circle id=\"circ5\" class=\"normal\" cx=\"400.0\" cy=\"50\" r=\"25\"></circle>\n",
+ "</svg>\n",
+ "```\n",
+ "\n",
+ "Below we have put this SVG into the file five_circles.svg and have modified it slightly, making the circles smaller and changing the color scheme. Note: you can leave the above VISB_SVG_OBJECTS definitions in the B machine: the SVG file will take precedence; only in case the SVG does not contain an object of the specified id will it be added."
+ ]
+ },
{
"cell_type": "code",
- "execution_count": null,
- "id": "a215c22b",
+ "execution_count": 19,
+ "id": "4d1899d7",
"metadata": {},
- "outputs": [],
- "source": []
+ "outputs": [
+ {
+ "data": {
+ "text/plain": [
+ "Loaded machine: test_svg_file"
+ ]
+ },
+ "execution_count": 19,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ "::load\n",
+ "MACHINE test_svg_file\n",
+ "VARIABLES x\n",
+ "INVARIANT x:1..N\n",
+ "INITIALISATION x:=1\n",
+ "OPERATIONS inc = BEGIN x:= (x mod N)+1 END\n",
+ "DEFINITIONS\n",
+ " N == 5; WID==400.0;\n",
+ " VISB_SVG_FILE == \"five_circles.svg\";\n",
+ " VISB_SVG_BOX == rec(height:100, width:WID+30.0);\n",
+ " VISB_SVG_OBJECTS == UNION(i).(i:1..N|\n",
+ " {rec(`id`:(\"circ\",i), svg_class:\"circle\",\n",
+ " cx:real(i)*WID/real(N),cy:50, r:(30-N))});\n",
+ " VISB_SVG_UPDATES == UNION(i).(i:1..N|\n",
+ " {rec(`id`:(\"circ\",i),\n",
+ " class: IF i=x THEN \"selected\" ELSE \"normal\" END)});\n",
+ "END"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 20,
+ "id": "01c7afe0",
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/plain": [
+ "Executed operation: INITIALISATION()"
+ ]
+ },
+ "execution_count": 20,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ ":init"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 21,
+ "id": "6b7f2fe0",
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ "<!DOCTYPE html>\n",
+ "<html>\n",
+ "<head>\n",
+ " <!-- html file generated by ProB from a VisB visualization -->\n",
+ " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
+ " <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">\n",
+ " <script>\n",
+ " function setAttr(id, attribute, value){\n",
+ "\t\t\tvar obj = document.getElementById(id);\n",
+ "\t\t\tif (obj == null) {\n",
+ "\t\t\t if (id != \"visb_debug_messages\") {\n",
+ "\t\t\t\t console.error(\"Unknown SVG id \" + id + \" for attribute \" + attribute);\n",
+ "\t\t\t\t}\n",
+ "\t\t\t} else if(attribute==\"text\") {\n",
+ "\t\t\t\tobj.textContent = value;\n",
+ "\t\t\t} else if(attribute==\"class\" && value != \"\") {\n",
+ "\t\t\t if(value[0]==\"+\") {\n",
+ "\t\t\t obj.classList.add(value.substr(1));\n",
+ "\t\t\t } else if(value[0]==\"-\") {\n",
+ "\t\t\t obj.classList.remove(value.substr(1));\n",
+ "\t\t\t } else {\n",
+ "\t\t\t\t obj.setAttribute(attribute, value);\n",
+ "\t\t\t }\n",
+ "\t\t\t} else {\n",
+ "\t\t\t\tobj.setAttribute(attribute, value);\n",
+ "\t\t\t}\n",
+ " }\n",
+ "\t\tfunction sleep(ms) {\n",
+ "\t\t return new Promise(resolve => setTimeout(resolve, ms));\n",
+ "\t\t}\n",
+ "\t\tvar lastSelectedRow = 0;\n",
+ "\t\tfunction highlightRow(id) {\n",
+ " if (lastSelectedRow>0) {setAttr(\"row\"+lastSelectedRow,\"bgcolor\",\"\")};\n",
+ " setAttr(\"row\"+id,\"bgcolor\",\"yellow\");\n",
+ " lastSelectedRow = id;\n",
+ "\t\t}\n",
+ "\t\tfunction backStep() {\n",
+ "\t\t if (lastSelectedRow>1) {\n",
+ "\t\t var prev = lastSelectedRow-1;\n",
+ "\t\t document.getElementById(\"row\"+prev).click();\n",
+ "\t\t }\n",
+ "\t\t}\n",
+ "\t\tfunction forwardStep() {\n",
+ "\t\t if (lastSelectedRow>0) {\n",
+ "\t\t var nxt = lastSelectedRow+1;\n",
+ "\t\t var row = document.getElementById(\"row\"+(nxt));\n",
+ "\t\t if (row != null) { row.click() };\n",
+ "\t\t }\n",
+ "\t\t}\n",
+ " </script>\n",
+ " \n",
+ "\t<style>\n",
+ "\ttable {\n",
+ "\t font-family: arial, sans-serif;\n",
+ "\t font-size: 11px;\n",
+ "\t border-collapse: collapse;\n",
+ "\t width: 100%;\n",
+ "\t}\n",
+ "\ttd, th {\n",
+ "\t border: 1px solid #dddddd;\n",
+ "\t text-align: left;\n",
+ "\t padding: 2px;\n",
+ "\t}\n",
+ "/* \n",
+ "\ttr:nth-child(even) {\n",
+ "\t background-color: #dddddd;\n",
+ "\t}\n",
+ " */\n",
+ "\t</style> \n",
+ "\t\n",
+ "\t<style>\n",
+ "\t.collapsible {\n",
+ "\t cursor: pointer;\n",
+ "\t}\n",
+ "\t.collapsible-style {\n",
+ "\t background-color: #777;\n",
+ "\t color: white;\n",
+ "\t padding: 6px;\n",
+ "\t width: 100%;\n",
+ "\t border: none;\n",
+ "\t text-align: left;\n",
+ "\t outline: none;\n",
+ "\t font-size: 12px;\n",
+ "\t}\n",
+ "\n",
+ "\t.active, .collapsible:hover {\n",
+ "\t background-color: #555;\n",
+ "\t}\n",
+ "\t\n",
+ "\t.collapsible:after {\n",
+ "\t content: '\\002B';\n",
+ "\t color: white;\n",
+ "\t font-weight: bold;\n",
+ "\t float: right;\n",
+ "\t margin-left: 5px;\n",
+ "\t}\n",
+ "\n",
+ "\t.active:after {\n",
+ "\t content: \"\\2212\";\n",
+ "\t}\n",
+ "\n",
+ "\t.coll-content-hid {\n",
+ "\t padding: 0 12px;\n",
+ "\t display: none;\n",
+ "\t overflow: hidden;\n",
+ "\t background-color: #f1f1f1;\n",
+ "\t}\n",
+ "\t.coll-content-vis {\n",
+ "\t padding: 0 12px;\n",
+ "\t display: block;\n",
+ "\t overflow: hidden;\n",
+ "\t background-color: #f1f1f1;\n",
+ "\t}\n",
+ "\t.visb-messages {\n",
+ "\t text-align: left;\n",
+ "\t outline: none;\n",
+ "\t font-size: 12px;\n",
+ "\t font-family: arial, sans-serif;\n",
+ "\t}\n",
+ " </style>\n",
+ "\n",
+ " \n",
+ "\n",
+ " <script>\n",
+ " function visualise0(stepNr) {\n",
+ " setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 0\");\n",
+ " setAttr(\"circ2\",\"class\",\"normal\");\n",
+ " setAttr(\"circ3\",\"class\",\"normal\");\n",
+ " setAttr(\"circ4\",\"class\",\"normal\");\n",
+ " setAttr(\"circ5\",\"class\",\"normal\");\n",
+ " setAttr(\"circ1\",\"class\",\"selected\");\n",
+ " }\n",
+ " async function runAll(delay) {\n",
+ " visualise0(1);\n",
+ " setAttr(\"visb_debug_messages\",\"text\",\"Step: 1/1, State ID: 0, Event: \");\n",
+ " await sleep(delay);\n",
+ " }\n",
+ " </script>\n",
+ "\n",
+ " <script> function registerHovers() {} </script>\n",
+ " </head>\n",
+ "<body>\n",
+ "\n",
+ "\n",
+ " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
+ " <div text-align=\"left\">\n",
+ "<svg xmlns=\"http://www.w3.org/2000/svg\"\n",
+ " width=\"430.0\" height=\"100\" viewBox=\"0 0 430.0 100\" >\n",
+ " <style>\n",
+ " .selected {\n",
+ " stroke : gray;\n",
+ " stroke-width: 2.0;\n",
+ " fill: coral\n",
+ " }\n",
+ " .normal {\n",
+ " stroke : none;\n",
+ " fill : burlywood\n",
+ " }\n",
+ " </style>\n",
+ " <circle id=\"circ1\" class=\"normal\" cx=\"80.0\" cy=\"50\" r=\"10\"></circle>\n",
+ " <circle id=\"circ2\" class=\"normal\" cx=\"160.0\" cy=\"50\" r=\"10\"></circle>\n",
+ " <circle id=\"circ3\" class=\"selected\" cx=\"240.0\" cy=\"50\" r=\"10\"></circle>\n",
+ " <circle id=\"circ4\" class=\"normal\" cx=\"320.0\" cy=\"50\" r=\"10\"></circle>\n",
+ " <circle id=\"circ5\" class=\"normal\" cx=\"400.0\" cy=\"50\" r=\"10\"></circle>\n",
+ "</svg><script>\n",
+ " const svg = document.querySelector(\"svg\");\n",
+ " const svgns = \"http://www.w3.org/2000/svg\";\n",
+ " if(document.getElementById(\"circ1\") == null) {\n",
+ " var new___obj = document.createElementNS(svgns,\"circle\");\n",
+ " new___obj.setAttribute(\"id\",\"circ1\");\n",
+ " new___obj.setAttribute(\"cx\",\"80.0\");\n",
+ " new___obj.setAttribute(\"cy\",\"50\");\n",
+ " new___obj.setAttribute(\"r\",\"25\");\n",
+ " svg.appendChild(new___obj);\n",
+ " }\n",
+ " if(document.getElementById(\"circ2\") == null) {\n",
+ " var new___obj = document.createElementNS(svgns,\"circle\");\n",
+ " new___obj.setAttribute(\"id\",\"circ2\");\n",
+ " new___obj.setAttribute(\"cx\",\"160.0\");\n",
+ " new___obj.setAttribute(\"cy\",\"50\");\n",
+ " new___obj.setAttribute(\"r\",\"25\");\n",
+ " svg.appendChild(new___obj);\n",
+ " }\n",
+ " if(document.getElementById(\"circ3\") == null) {\n",
+ " var new___obj = document.createElementNS(svgns,\"circle\");\n",
+ " new___obj.setAttribute(\"id\",\"circ3\");\n",
+ " new___obj.setAttribute(\"cx\",\"240.0\");\n",
+ " new___obj.setAttribute(\"cy\",\"50\");\n",
+ " new___obj.setAttribute(\"r\",\"25\");\n",
+ " svg.appendChild(new___obj);\n",
+ " }\n",
+ " if(document.getElementById(\"circ4\") == null) {\n",
+ " var new___obj = document.createElementNS(svgns,\"circle\");\n",
+ " new___obj.setAttribute(\"id\",\"circ4\");\n",
+ " new___obj.setAttribute(\"cx\",\"320.0\");\n",
+ " new___obj.setAttribute(\"cy\",\"50\");\n",
+ " new___obj.setAttribute(\"r\",\"25\");\n",
+ " svg.appendChild(new___obj);\n",
+ " }\n",
+ " if(document.getElementById(\"circ5\") == null) {\n",
+ " var new___obj = document.createElementNS(svgns,\"circle\");\n",
+ " new___obj.setAttribute(\"id\",\"circ5\");\n",
+ " new___obj.setAttribute(\"cx\",\"400.0\");\n",
+ " new___obj.setAttribute(\"cy\",\"50\");\n",
+ " new___obj.setAttribute(\"r\",\"25\");\n",
+ " svg.appendChild(new___obj);\n",
+ " }\n",
+ "</script>\n",
+ " </div>\n",
+ " <script> visualise0(1); </script>\n",
+ " </div>\n",
+ " <script> registerHovers() </script>\n",
+ " \n",
+ "<script>\n",
+ "var collapsibles = document.getElementsByClassName(\"collapsible\");\n",
+ "var ii;\n",
+ "\n",
+ "for (ii = 0; ii < collapsibles.length; ii++) {\n",
+ " collapsibles[ii].addEventListener(\"click\", function() {\n",
+ " this.classList.toggle(\"active\");\n",
+ " var content = this.nextElementSibling;\n",
+ " if (content.style.display === \"block\") {\n",
+ " content.style.display = \"none\";\n",
+ " } else {\n",
+ " content.style.display = \"block\";\n",
+ " }\n",
+ " });\n",
+ "}\n",
+ "</script>\n",
+ "\n",
+ "</body>\n",
+ "</html>\n",
+ "\n"
+ ],
+ "text/plain": [
+ "<VisB visualization>"
+ ]
+ },
+ "execution_count": 21,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ ":show"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 22,
+ "id": "cd6ca95a",
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/markdown": [
+ "$1$"
+ ],
+ "text/plain": [
+ "1"
+ ]
+ },
+ "execution_count": 22,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ "x"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 23,
+ "id": "48a9b1ad",
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/plain": [
+ "Executed operation: inc()"
+ ]
+ },
+ "execution_count": 23,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ ":exec inc"
+ ]
+ },
+ {
+ "cell_type": "code",
+ "execution_count": 24,
+ "id": "54536443",
+ "metadata": {},
+ "outputs": [
+ {
+ "data": {
+ "text/html": [
+ "<!DOCTYPE html>\n",
+ "<html>\n",
+ "<head>\n",
+ " <!-- html file generated by ProB from a VisB visualization -->\n",
+ " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n",
+ " <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">\n",
+ " <script>\n",
+ " function setAttr(id, attribute, value){\n",
+ "\t\t\tvar obj = document.getElementById(id);\n",
+ "\t\t\tif (obj == null) {\n",
+ "\t\t\t if (id != \"visb_debug_messages\") {\n",
+ "\t\t\t\t console.error(\"Unknown SVG id \" + id + \" for attribute \" + attribute);\n",
+ "\t\t\t\t}\n",
+ "\t\t\t} else if(attribute==\"text\") {\n",
+ "\t\t\t\tobj.textContent = value;\n",
+ "\t\t\t} else if(attribute==\"class\" && value != \"\") {\n",
+ "\t\t\t if(value[0]==\"+\") {\n",
+ "\t\t\t obj.classList.add(value.substr(1));\n",
+ "\t\t\t } else if(value[0]==\"-\") {\n",
+ "\t\t\t obj.classList.remove(value.substr(1));\n",
+ "\t\t\t } else {\n",
+ "\t\t\t\t obj.setAttribute(attribute, value);\n",
+ "\t\t\t }\n",
+ "\t\t\t} else {\n",
+ "\t\t\t\tobj.setAttribute(attribute, value);\n",
+ "\t\t\t}\n",
+ " }\n",
+ "\t\tfunction sleep(ms) {\n",
+ "\t\t return new Promise(resolve => setTimeout(resolve, ms));\n",
+ "\t\t}\n",
+ "\t\tvar lastSelectedRow = 0;\n",
+ "\t\tfunction highlightRow(id) {\n",
+ " if (lastSelectedRow>0) {setAttr(\"row\"+lastSelectedRow,\"bgcolor\",\"\")};\n",
+ " setAttr(\"row\"+id,\"bgcolor\",\"yellow\");\n",
+ " lastSelectedRow = id;\n",
+ "\t\t}\n",
+ "\t\tfunction backStep() {\n",
+ "\t\t if (lastSelectedRow>1) {\n",
+ "\t\t var prev = lastSelectedRow-1;\n",
+ "\t\t document.getElementById(\"row\"+prev).click();\n",
+ "\t\t }\n",
+ "\t\t}\n",
+ "\t\tfunction forwardStep() {\n",
+ "\t\t if (lastSelectedRow>0) {\n",
+ "\t\t var nxt = lastSelectedRow+1;\n",
+ "\t\t var row = document.getElementById(\"row\"+(nxt));\n",
+ "\t\t if (row != null) { row.click() };\n",
+ "\t\t }\n",
+ "\t\t}\n",
+ " </script>\n",
+ " \n",
+ "\t<style>\n",
+ "\ttable {\n",
+ "\t font-family: arial, sans-serif;\n",
+ "\t font-size: 11px;\n",
+ "\t border-collapse: collapse;\n",
+ "\t width: 100%;\n",
+ "\t}\n",
+ "\ttd, th {\n",
+ "\t border: 1px solid #dddddd;\n",
+ "\t text-align: left;\n",
+ "\t padding: 2px;\n",
+ "\t}\n",
+ "/* \n",
+ "\ttr:nth-child(even) {\n",
+ "\t background-color: #dddddd;\n",
+ "\t}\n",
+ " */\n",
+ "\t</style> \n",
+ "\t\n",
+ "\t<style>\n",
+ "\t.collapsible {\n",
+ "\t cursor: pointer;\n",
+ "\t}\n",
+ "\t.collapsible-style {\n",
+ "\t background-color: #777;\n",
+ "\t color: white;\n",
+ "\t padding: 6px;\n",
+ "\t width: 100%;\n",
+ "\t border: none;\n",
+ "\t text-align: left;\n",
+ "\t outline: none;\n",
+ "\t font-size: 12px;\n",
+ "\t}\n",
+ "\n",
+ "\t.active, .collapsible:hover {\n",
+ "\t background-color: #555;\n",
+ "\t}\n",
+ "\t\n",
+ "\t.collapsible:after {\n",
+ "\t content: '\\002B';\n",
+ "\t color: white;\n",
+ "\t font-weight: bold;\n",
+ "\t float: right;\n",
+ "\t margin-left: 5px;\n",
+ "\t}\n",
+ "\n",
+ "\t.active:after {\n",
+ "\t content: \"\\2212\";\n",
+ "\t}\n",
+ "\n",
+ "\t.coll-content-hid {\n",
+ "\t padding: 0 12px;\n",
+ "\t display: none;\n",
+ "\t overflow: hidden;\n",
+ "\t background-color: #f1f1f1;\n",
+ "\t}\n",
+ "\t.coll-content-vis {\n",
+ "\t padding: 0 12px;\n",
+ "\t display: block;\n",
+ "\t overflow: hidden;\n",
+ "\t background-color: #f1f1f1;\n",
+ "\t}\n",
+ "\t.visb-messages {\n",
+ "\t text-align: left;\n",
+ "\t outline: none;\n",
+ "\t font-size: 12px;\n",
+ "\t font-family: arial, sans-serif;\n",
+ "\t}\n",
+ " </style>\n",
+ "\n",
+ " \n",
+ "\n",
+ " <script>\n",
+ " function visualise1(stepNr) {\n",
+ " setAttr(\"visb_debug_messages\",\"text\",\"Step \"+stepNr+\"/1, State ID: 1\");\n",
+ " setAttr(\"circ1\",\"class\",\"normal\");\n",
+ " setAttr(\"circ3\",\"class\",\"normal\");\n",
+ " setAttr(\"circ4\",\"class\",\"normal\");\n",
+ " setAttr(\"circ5\",\"class\",\"normal\");\n",
+ " setAttr(\"circ2\",\"class\",\"selected\");\n",
+ " }\n",
+ " async function runAll(delay) {\n",
+ " visualise1(1);\n",
+ " setAttr(\"visb_debug_messages\",\"text\",\"Step: 1/1, State ID: 1, Event: \");\n",
+ " await sleep(delay);\n",
+ " }\n",
+ " </script>\n",
+ "\n",
+ " <script> function registerHovers() {} </script>\n",
+ " </head>\n",
+ "<body>\n",
+ "\n",
+ "\n",
+ " <button type=\"button\" class=\"collapsible collapsible-style\">SVG Visualisation</button>\n",
+ " <div text-align=\"left\">\n",
+ "<svg xmlns=\"http://www.w3.org/2000/svg\"\n",
+ " width=\"430.0\" height=\"100\" viewBox=\"0 0 430.0 100\" >\n",
+ " <style>\n",
+ " .selected {\n",
+ " stroke : gray;\n",
+ " stroke-width: 2.0;\n",
+ " fill: coral\n",
+ " }\n",
+ " .normal {\n",
+ " stroke : none;\n",
+ " fill : burlywood\n",
+ " }\n",
+ " </style>\n",
+ " <circle id=\"circ1\" class=\"normal\" cx=\"80.0\" cy=\"50\" r=\"10\"></circle>\n",
+ " <circle id=\"circ2\" class=\"normal\" cx=\"160.0\" cy=\"50\" r=\"10\"></circle>\n",
+ " <circle id=\"circ3\" class=\"selected\" cx=\"240.0\" cy=\"50\" r=\"10\"></circle>\n",
+ " <circle id=\"circ4\" class=\"normal\" cx=\"320.0\" cy=\"50\" r=\"10\"></circle>\n",
+ " <circle id=\"circ5\" class=\"normal\" cx=\"400.0\" cy=\"50\" r=\"10\"></circle>\n",
+ "</svg><script>\n",
+ " const svg = document.querySelector(\"svg\");\n",
+ " const svgns = \"http://www.w3.org/2000/svg\";\n",
+ " if(document.getElementById(\"circ1\") == null) {\n",
+ " var new___obj = document.createElementNS(svgns,\"circle\");\n",
+ " new___obj.setAttribute(\"id\",\"circ1\");\n",
+ " new___obj.setAttribute(\"cx\",\"80.0\");\n",
+ " new___obj.setAttribute(\"cy\",\"50\");\n",
+ " new___obj.setAttribute(\"r\",\"25\");\n",
+ " svg.appendChild(new___obj);\n",
+ " }\n",
+ " if(document.getElementById(\"circ2\") == null) {\n",
+ " var new___obj = document.createElementNS(svgns,\"circle\");\n",
+ " new___obj.setAttribute(\"id\",\"circ2\");\n",
+ " new___obj.setAttribute(\"cx\",\"160.0\");\n",
+ " new___obj.setAttribute(\"cy\",\"50\");\n",
+ " new___obj.setAttribute(\"r\",\"25\");\n",
+ " svg.appendChild(new___obj);\n",
+ " }\n",
+ " if(document.getElementById(\"circ3\") == null) {\n",
+ " var new___obj = document.createElementNS(svgns,\"circle\");\n",
+ " new___obj.setAttribute(\"id\",\"circ3\");\n",
+ " new___obj.setAttribute(\"cx\",\"240.0\");\n",
+ " new___obj.setAttribute(\"cy\",\"50\");\n",
+ " new___obj.setAttribute(\"r\",\"25\");\n",
+ " svg.appendChild(new___obj);\n",
+ " }\n",
+ " if(document.getElementById(\"circ4\") == null) {\n",
+ " var new___obj = document.createElementNS(svgns,\"circle\");\n",
+ " new___obj.setAttribute(\"id\",\"circ4\");\n",
+ " new___obj.setAttribute(\"cx\",\"320.0\");\n",
+ " new___obj.setAttribute(\"cy\",\"50\");\n",
+ " new___obj.setAttribute(\"r\",\"25\");\n",
+ " svg.appendChild(new___obj);\n",
+ " }\n",
+ " if(document.getElementById(\"circ5\") == null) {\n",
+ " var new___obj = document.createElementNS(svgns,\"circle\");\n",
+ " new___obj.setAttribute(\"id\",\"circ5\");\n",
+ " new___obj.setAttribute(\"cx\",\"400.0\");\n",
+ " new___obj.setAttribute(\"cy\",\"50\");\n",
+ " new___obj.setAttribute(\"r\",\"25\");\n",
+ " svg.appendChild(new___obj);\n",
+ " }\n",
+ "</script>\n",
+ " </div>\n",
+ " <script> visualise1(1); </script>\n",
+ " </div>\n",
+ " <script> registerHovers() </script>\n",
+ " \n",
+ "<script>\n",
+ "var collapsibles = document.getElementsByClassName(\"collapsible\");\n",
+ "var ii;\n",
+ "\n",
+ "for (ii = 0; ii < collapsibles.length; ii++) {\n",
+ " collapsibles[ii].addEventListener(\"click\", function() {\n",
+ " this.classList.toggle(\"active\");\n",
+ " var content = this.nextElementSibling;\n",
+ " if (content.style.display === \"block\") {\n",
+ " content.style.display = \"none\";\n",
+ " } else {\n",
+ " content.style.display = \"block\";\n",
+ " }\n",
+ " });\n",
+ "}\n",
+ "</script>\n",
+ "\n",
+ "</body>\n",
+ "</html>\n",
+ "\n"
+ ],
+ "text/plain": [
+ "<VisB visualization>"
+ ]
+ },
+ "execution_count": 24,
+ "metadata": {},
+ "output_type": "execute_result"
+ }
+ ],
+ "source": [
+ ":show"
+ ]
},
{
"cell_type": "code",
"execution_count": null,
- "id": "caffd470",
+ "id": "9f6b9ae1",
"metadata": {},
"outputs": [],
"source": []