Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

A simple table with all variables is sometimes not enough to test and visualize the behavior of a model. If one programs a big system, such as a railway controller, it might help to see on which track the trains are and how points are set. KViz is used to achieve this by using javascript to manipulate an svg (or html in general).

This is done by generating an html page that is displayed in a browser. Therefore used SVGs and scripts are dependent on the used browser.


Creating a Configuration File

Code Block
languagejs
titleExample KViZ File
image "Lights.svg"

load "some-js-library" // These libraries are copied in a script tag for the corresponding html page that is build.
load "some-other-js-library"
 
init
'
// javascript global variable initialization
// and function definition
// e.g. var hugo = "hugo"
'

handle showLight
in "#theRect"
with (elem, status)
'
// elem is the element referenced via "in"
// status is the value of showLight
elem.style.fill = status === 0 ? "red" : status === 1 ? "yellow" : "green"
'

handle showLight
in "#theRedOne"
with (elem, status)
'
// elem is the element referenced via "in"
// status is the value of showLight
elem.style.opacity = status === 1 || status === 2 ? 0 : 1
'

handle showLight
in "#theRedOne"
with (elem, status)
'
// elem is the element referenced via "in"
// status is the value of showLight
elem.style.opacity = status === 0 || status === 2 ? 0 : 1
'

handle showLight
in "#theRedOne"
with (elem, status)
'
// elem is the element referenced via "in"
// status is the value of showLight
elem.style.opacity = status === 0 || status === 1 ? 0 : 1
'

...

Scripts that are not associated to a specific value

...

value

...

Code Block
languagejs
titleScript example
image "Lights.svg"

script (datapool)
'
// You are able to write to inputs of the model via the datapool.
datapool.onInput = true
'

Scripts can always be associated to a value instead via the handle keyword. Not doing so shows that it is a general script that is invoked every tick and does not depend on the change of a specific value.