Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 3 Next »

Overview

TODO idea: Use js to manipulate svg


Creating a Configuration File

Example KViZ File
image "Lights.svg"
 
init
'
// javascript global variable initialization
// 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
'


Simulation Interaction

Interaction example
image "Lights.svg"
 
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"
'

event "click" 
on "#theRect"
step simulation
set showLight
'
if (bellmagic < 3) {
    bellmagic++
}
return bellmagic
' 
perform on click from theRect {
  showLight = 1
  step simulation
} if showLight != 1
  • No labels