<!DOCTYPE html>
<html>
<head>
<!-- html file generated by ProB from a VisB visualization -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function setAttr(id, attribute, value){
var obj = document.getElementById(id);
if (obj == null) {
if (id != "visb_debug_messages") {
console.error("Unknown SVG id " + id + " for attribute " + attribute);
}
} else if(attribute=="text") {
obj.textContent = value;
} else {
obj.setAttribute(attribute, value);
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
var lastSelectedRow = 0;
function highlightRow(id) {
if (lastSelectedRow>0) {setAttr("row"+lastSelectedRow,"bgcolor","")};
setAttr("row"+id,"bgcolor","yellow");
lastSelectedRow = id;
}
function backStep() {
if (lastSelectedRow>1) {
var prev = lastSelectedRow-1;
document.getElementById("row"+prev).click();
}
}
function forwardStep() {
if (lastSelectedRow>0) {
var nxt = lastSelectedRow+1;
var row = document.getElementById("row"+(nxt));
if (row != null) { row.click() };
}
}
</script>
<style>
table {
font-family: arial, sans-serif;
font-size: 11px;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 2px;
}
/*
tr:nth-child(even) {
background-color: #dddddd;
}
*/
</style>
<style>
.collapsible {
cursor: pointer;
}
.collapsible-style {
background-color: #777;
color: white;
padding: 6px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 12px;
}
.active, .collapsible:hover {
background-color: #555;
}
.collapsible:after {
content: '\002B';
color: white;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.coll-content-hid {
padding: 0 12px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
.coll-content-vis {
padding: 0 12px;
display: block;
overflow: hidden;
background-color: #f1f1f1;
}
</style>
<script>
function visualise1(stepNr) {
setAttr("visb_debug_messages","text","Step "+stepNr+"/1, State ID: 1");
setAttr("train_polygon","points","0.0,3.0 6.451612903225806,3.0 5.451612903225806,0 0.0,0 0.0,3.0 ");
setAttr("train_info_text","x","0.0");
setAttr("train_info_text","text","Train1: 0..2");
setAttr("track_polyline","points","0.0,0 0.0,0.5 0.0,-0.5 0.0,0 3.225806451612903,0 3.225806451612903,0.5 3.225806451612903,-0.5 3.225806451612903,0 6.451612903225806,0 6.451612903225806,0.5 6.451612903225806,-0.5 6.451612903225806,0 9.677419354838708,0 9.677419354838708,0.5 9.677419354838708,-0.5 9.677419354838708,0 12.903225806451612,0 12.903225806451612,0.5 12.903225806451612,-0.5 12.903225806451612,0 16.129032258064516,0 16.129032258064516,0.5 16.129032258064516,-0.5 16.129032258064516,0 19.354838709677416,0 19.354838709677416,0.5 19.354838709677416,-0.5 19.354838709677416,0 22.58064516129032,0 22.58064516129032,0.5 22.58064516129032,-0.5 22.58064516129032,0 25.806451612903224,0 25.806451612903224,0.5 25.806451612903224,-0.5 25.806451612903224,0 29.032258064516128,0 29.032258064516128,0.5 29.032258064516128,-0.5 29.032258064516128,0 32.25806451612903,0 32.25806451612903,0.5 32.25806451612903,-0.5 32.25806451612903,0 35.483870967741936,0 35.483870967741936,0.5 35.483870967741936,-0.5 35.483870967741936,0 38.70967741935483,0 38.70967741935483,0.5 38.70967741935483,-0.5 38.70967741935483,0 41.93548387096774,0 41.93548387096774,0.5 41.93548387096774,-0.5 41.93548387096774,0 45.16129032258064,0 45.16129032258064,0.5 45.16129032258064,-0.5 45.16129032258064,0 48.387096774193544,0 48.387096774193544,0.5 48.387096774193544,-0.5 48.387096774193544,0 51.61290322580645,0 51.61290322580645,0.5 51.61290322580645,-0.5 51.61290322580645,0 54.83870967741935,0 54.83870967741935,0.5 54.83870967741935,-0.5 54.83870967741935,0 58.064516129032256,0 58.064516129032256,0.5 58.064516129032256,-0.5 58.064516129032256,0 61.29032258064516,0 61.29032258064516,0.5 61.29032258064516,-0.5 61.29032258064516,0 64.51612903225806,0 64.51612903225806,0.5 64.51612903225806,-0.5 64.51612903225806,0 67.74193548387096,0 67.74193548387096,0.5 67.74193548387096,-0.5 67.74193548387096,0 70.96774193548387,0 70.96774193548387,0.5 70.96774193548387,-0.5 70.96774193548387,0 74.19354838709677,0 74.19354838709677,0.5 74.19354838709677,-0.5 74.19354838709677,0 77.41935483870967,0 77.41935483870967,0.5 77.41935483870967,-0.5 77.41935483870967,0 80.64516129032258,0 80.64516129032258,0.5 80.64516129032258,-0.5 80.64516129032258,0 83.87096774193547,0 83.87096774193547,0.5 83.87096774193547,-0.5 83.87096774193547,0 87.09677419354838,0 87.09677419354838,0.5 87.09677419354838,-0.5 87.09677419354838,0 90.32258064516128,0 90.32258064516128,0.5 90.32258064516128,-0.5 90.32258064516128,0 93.54838709677419,0 93.54838709677419,0.5 93.54838709677419,-0.5 93.54838709677419,0 96.77419354838709,0 96.77419354838709,0.5 96.77419354838709,-0.5 96.77419354838709,0 100.0,0 100.0,0.5 100.0,-0.5 100.0,0 100.0,0 ");
setAttr("ttd_polyline","points","0.0,0 0.0,1.0 0.0,-1.0 0.0,0 35.483870967741936,0 35.483870967741936,1.0 35.483870967741936,-1.0 35.483870967741936,0 83.87096774193547,0 83.87096774193547,1.0 83.87096774193547,-1.0 83.87096774193547,0 100.0,0 100.0,1.0 100.0,-1.0 100.0,0 100.0,0 ");
setAttr("occupied_ttd_polygon","points","100.0,0 ");
setAttr("cleared_ttd_polygon","points","0.0,0 0.0,2.0 100.0,2.0 100.0,0 100.0,0 ");
highlightRow(stepNr);
}
async function runAll(delay) {
visualise1(1);
setAttr("visb_debug_messages","text","Step: 1/1, State ID: 1, Event: ");
await sleep(delay);
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function registerHovers() {
$("#occupied_ttd_polygon").off("click hover");
$("#occupied_ttd_polygon").hover(function(ev){
setAttr("occupied_ttd_polygon","stroke","black")
setAttr("occupied_ttd_polygon","opacity","0.5")
},
function(){
setAttr("occupied_ttd_polygon","stroke","none")
setAttr("occupied_ttd_polygon","opacity","1.0")
});
$("#cleared_ttd_polygon").off("click hover");
$("#cleared_ttd_polygon").hover(function(ev){
setAttr("cleared_ttd_polygon","stroke","black")
setAttr("cleared_ttd_polygon","opacity","0.5")
},
function(){
setAttr("cleared_ttd_polygon","stroke","none")
setAttr("cleared_ttd_polygon","opacity","1.0")
});
$("#train_polygon").off("click hover");
$("#train_polygon").hover(function(ev){
setAttr("train_polygon","class","train-hover")
setAttr("train_info_text","visibility","visible")
},
function(){
setAttr("train_polygon","class","train-normal")
setAttr("train_info_text","visibility","hidden")
});
}
</script>
</head>
<body>
<button type="button" class="collapsible collapsible-style">SVG Visualisation</button>
<div text-align="left">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="900"
height="400"
viewBox="5 15 150 30"
version="1.1"
id="svg5154">
<style id="style_ttd_ts_mp">
.ttd {
stroke : none;
stroke-width: 0.2;
opacity: 1.0
}
.red-occupied-ttd {
fill : red
}
.blue-cleared-ttd {
fill : blue
}
.train-normal {
stroke-width: 0.25;
stroke : black;
fill : lightgray
}
.train-hover {
fill : red;
stroke-width: 0.5;
stroke : black;
}
</style>
<polygon id = "train_polygon"
points="0,0 100,0"
class="train-normal"
transform="translate(10,16.8)" />
<g transform="translate(10,16.8)">
<text text-align="left" x="0" y="-2"
font-size ="2" fill="gray" font-family="sans-serif ">
<tspan x="3" id="train_info_text" visibility="hidden">Train 1</tspan>
</text>
</g>
<polygon id = "track_polyline"
points="0,0 1,0, 1,1 1,0 50,0 50,1 50,0 100,0"
style="stroke-width: 0.3"
stroke="black" fill="none"
transform="translate(10,20.5)" />
<polygon id = "ttd_polyline"
points="0,0 100,0"
style="stroke-width: 0.3"
stroke="gray" fill="none"
transform="translate(10,22.5)" />
<rect id = "ttd_rect"
style="stroke-width: 0.1"
width="100" height="2" x="0" y="0"
stroke="black" fill="none"
transform="translate(10,23)" />
<polygon id = "occupied_ttd_polygon"
points="0,0 0,2 10,2 10,0 70,0 70,1 90,1 90,0"
class = "ttd red-occupied-ttd"
transform="translate(10,23)" />
<polygon id = "cleared_ttd_polygon"
points="0,0 10,2 20,2 20,0 90,0 90,1 100,1 100,0"
class = "ttd blue-cleared-ttd"
transform="translate(10,23)" />
<text text-align="left" x="5" y="28"
font-size ="2" fill="gray" font-family="sans-serif">
<tspan x="15" dy = "0.6em" id="visb_debug_messages"> </tspan>
</text>
</svg>
</div>
<button type="button" class="collapsible-style">Trace (length=1)</button>
<div class="coll-content-vis">
<table> <tr> <th>Nr</th> <th>Event</th> <th>Target State ID</th> </tr>
<tr id="row1" onclick="visualise1(1)"><td>1</td><td style="cursor:pointer"></td><td><button onclick="visualise1(1);">State 1</button></td></tr>
</table>
</div>
<button type="button" class="collapsible-style">Info</button>
<div class="coll-content-vis">
Generated on 18/2/2021 at 11:59 using ProB version 1.11.0-nightly
<br> Main specification file: /Users/leuschel/git_root/JAVAPROB/visb-visualisation-examples/Train/SimpleTrainTrack.mch
</table>
</div>
<script> visualise1(1); </script>
</div>
<script> registerHovers() </script>
<script>
var collapsibles = document.getElementsByClassName("collapsible");
var ii;
for (ii = 0; ii < collapsibles.length; ii++) {
collapsibles[ii].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>