Examples¶
Timer¶
This example demonstrates the timed behavior of SCCD. It does not have dynamic structure.
We model a clock which prints the current time every 0.05 seconds. Two clocks are printed: the current wall-clock time and the current simulated time. We expect both to (almost) be the same. The user can interrupt the clock by sending an “interrupt” event. The user can resume the clock by sending a “resume” event.
Threads (Python)¶
In this version, the model sends the current times to an output port, on which the user listens, to print out these times. self.getSimulatedTime() and time() return the current time in milliseconds, which we have to convert to seconds.
The SCCD model:
<?xml version="1.0" ?>
<diagram author="Simon Van Mierlo" name="Timer (Threaded Version)">
<top>
from sccd.runtime.accurate_time import time
</top>
<inport name="input" />
<outport name="output" />
<class name="MainApp" default="true">
<scxml initial="running">
<state id="running">
<transition target="." after="0.05">
<raise event="time_update" port="output">
<parameter expr="self.getSimulatedTime()" />
<parameter expr="time()" />
</raise>
</transition>
<transition target="../interrupted" event="interrupt" port="input">
<raise event="time_update" port="output">
<parameter expr="self.getSimulatedTime()" />
<parameter expr="time()" />
</raise>
</transition>
</state>
<state id="interrupted">
<transition target="." event="interrupt" port="input">
<raise event="time_update" port="output">
<parameter expr="self.getSimulatedTime()" />
<parameter expr="time()" />
</raise>
</transition>
<transition target="../running" event="continue" port="input">
<raise event="time_update" port="output">
<parameter expr="self.getSimulatedTime()" />
<parameter expr="time()" />
</raise>
</transition>
</state>
</scxml>
</class>
</diagram>
To compile, save this in a file called timer.xml and run python -m sccd.compiler.sccdc -p threads -l python timer.xml
Then, the following file will run the model:
import timer
from sccd.runtime.statecharts_core import Event
import threading
if __name__ == '__main__':
controller = timer.Controller()
def raw_inputter():
while 1:
controller.addInput(Event(raw_input(), "input", []))
input_thread = threading.Thread(target=raw_inputter)
input_thread.daemon = True
input_thread.start()
output_listener = controller.addOutputListener(["output"])
def outputter():
while 1:
event = output_listener.fetch(-1)
print "SIMTIME: %.2fs" % (event.getParameters()[0] / 1000.0)
print "ACTTIME: %.2fs" % (event.getParameters()[1] / 1000.0)
output_thread = threading.Thread(target=outputter)
output_thread.daemon = True
output_thread.start()
controller.start()
The time will be printed to the console. The user can send events by typing the string “interrupt” or “continue” in the console.
Eventloop (Python)¶
The SCCD model:
<?xml version="1.0" ?>
<diagram author="Simon Van Mierlo" name="Timer (Eventloop Version)">
<top>
from sccd.runtime.libs.ui import ui
from sccd.runtime.accurate_time import time
</top>
<inport name="ui" />
<class name="MainApp" default="true">
<method name="MainApp">
<body>
<![CDATA[
self.canvas = ui.append_canvas(ui.window,100,100,{'background':'#eee'})
self.clock_text = self.canvas.element.create_text(25,25,{'text':'0.0'})
self.actual_clock_text = self.canvas.element.create_text(25,50,{'text':'0.0'})
interrupt_button = ui.append_button(ui.window, 'INTERRUPT');
continue_button = ui.append_button(ui.window, 'CONTINUE');
ui.bind_event(interrupt_button.element, ui.EVENTS.MOUSE_CLICK, self.controller, 'interrupt_clicked');
ui.bind_event(continue_button.element, ui.EVENTS.MOUSE_CLICK, self.controller, 'continue_clicked');
]]>
</body>
</method>
<method name="update_timers">
<body>
self.canvas.element.itemconfigure(self.clock_text, text=str('%.2f' % (self.getSimulatedTime() / 1000.0)))
self.canvas.element.itemconfigure(self.actual_clock_text, text='%.2f' % (time() / 1000.0))
</body>
</method>
<scxml initial="running">
<state id="running">
<transition target="." after="0.05">
<script>
self.update_timers()
</script>
</transition>
<transition target="../interrupted" event="interrupt_clicked" port="ui">
<script>
self.update_timers()
</script>
</transition>
</state>
<state id="interrupted">
<transition target="." event="interrupt_clicked" port="ui">
<script>
self.update_timers()
</script>
</transition>
<transition target="../running" event="continue_clicked" port="ui">
<script>
self.update_timers()
</script>
</transition>
</state>
</scxml>
</class>
</diagram>
To compile, save this in a file called timer.xml and run python -m sccd.compiler.sccdc -p eventloop -l python timer.xml
Then, the following file will run the model:
import Tkinter as tk
import timer
from sccd.runtime.libs.ui import ui
from sccd.runtime.statecharts_core import Event
from sccd.runtime.tkinter_eventloop import *
if __name__ == '__main__':
ui.window = tk.Tk()
controller = timer.Controller(TkEventLoop(ui.window))
controller.start()
ui.window.mainloop()
Eventloop (Javascript)¶
The SCCD model:
<?xml version="1.0" ?>
<diagram author="Simon Van Mierlo" name="Timer">
<inport name="ui" />
<class name="MainApp" default="true">
<method name="MainApp">
<body>
<![CDATA[
this.canvas = ui.append_canvas(ui.window,400,150,{'background':'#eee'})
this.clock_text = this.canvas.add_text(25,25,'0.0')
this.actual_clock_text = this.canvas.add_text(25,50,'0.0')
var interrupt_button = ui.append_button(ui.window, 'INTERRUPT');
var continue_button = ui.append_button(ui.window, 'CONTINUE');
ui.bind_event(interrupt_button.element, ui.EVENTS.MOUSE_CLICK, this.controller, 'interrupt_clicked');
ui.bind_event(continue_button.element, ui.EVENTS.MOUSE_CLICK, this.controller, 'continue_clicked');
]]>
</body>
</method>
<method name="update_timers">
<body>
this.clock_text.set_text((this.getSimulatedTime() / 1000).toFixed(2));
this.actual_clock_text.set_text((this.getSimulatedTime() / 1000).toFixed(2));
</body>
</method>
<scxml initial="running">
<state id="running">
<transition target="." after="0.05">
<script>
this.update_timers();
</script>
</transition>
<transition target="../interrupted" event="interrupt_clicked" port="ui">
<script>
this.update_timers();
</script>
</transition>
</state>
<state id="interrupted">
<transition target="." event="interrupt_clicked" port="ui">
<script>
this.update_timers();
</script>
</transition>
<transition target="../running" event="continue_clicked" port="ui">
<script>
this.update_timers();
</script>
</transition>
</state>
</scxml>
</class>
</diagram>
To compile, save this in a file called timer.xml and run python -m sccd.compiler.sccdc -p eventloop -l javascript timer.xml
Then, the following file will run the model:
<div>
<script src="https://msdl.uantwerpen.be/git/simon/SCCD/raw/v0.9/src/javascript_sccd_runtime/libs/HackTimer.js"></script>
<script src="https://msdl.uantwerpen.be/git/simon/SCCD/raw/v0.9/src/javascript_sccd_runtime/statecharts_core.js"></script>
<script src="https://msdl.uantwerpen.be/git/simon/SCCD/raw/v0.9/src/javascript_sccd_runtime/libs/utils.js"></script>
<script src="https://msdl.uantwerpen.be/git/simon/SCCD/raw/v0.9/src/javascript_sccd_runtime/libs/svg.js"></script>
<script src="https://msdl.uantwerpen.be/git/simon/SCCD/raw/v0.9/src/javascript_sccd_runtime/libs/ui.js"></script>
<script src="timer.js"></script>
<script>
controller = new Timer.Controller(new JsEventLoop());
controller.start();
</script>
</div>
Traffic Lights¶
The traffic lights example demonstrates most functionality of SCCD. There are three lights (green, yellow, and red). The traffic light autonomously switches between them, but also listens for a police interrupt, which will flash the yellow light. When a second interrupt comes in, the light returns to its last configuration (using a history state).
Python¶
The SCCD model:
<?xml version="1.0" ?>
<diagram author="Raphael Mannadiar" name="Traffic_Light_Python_Version">
<top>
from sccd.runtime.libs.ui import ui
</top>
<inport name="ui" />
<class name="MainApp" default="true">
<relationships>
<association name="trafficlight" class="TrafficLight" />
</relationships>
<method name="MainApp">
<body>
<![CDATA[
self.canvas = ui.append_canvas(ui.window,100,310,{'background':'#eee'});
police_button = ui.append_button(ui.window, 'Police interrupt');
quit_button = ui.append_button(ui.window, 'Quit');
ui.bind_event(police_button.element, ui.EVENTS.MOUSE_CLICK, self.controller, 'police_interrupt_clicked');
ui.bind_event(quit_button.element, ui.EVENTS.MOUSE_CLICK, self.controller, 'quit_clicked');
]]>
</body>
</method>
<scxml initial="initializing">
<state id="initializing">
<transition target="../creating">
<raise scope="cd" event="create_instance">
<parameter expr='"trafficlight"' />
<parameter expr='"TrafficLight"' />
<parameter expr="self.canvas" />
</raise>
</transition>
</state>
<state id="creating">
<transition event="instance_created" target="../initialized">
<parameter name="association_name" type="string"/>
<raise scope="cd" event="start_instance">
<parameter expr="association_name" />
</raise>
<raise scope="narrow" event="set_association_name" target="association_name">
<parameter expr="association_name" />
</raise>
</transition>
</state>
<state id="initialized">
</state>
</scxml>
</class>
<class name="TrafficLight">
<relationships>
</relationships>
<method name="TrafficLight">
<parameter name="canvas" />
<body>
<![CDATA[
size = 100;
offset = size+5;
self.RED = 0;
self.YELLOW = 1;
self.GREEN = 2;
self.colors = ['#f00','#ff0','#0f0']
self.lights = [
canvas.add_rectangle(size/2, size/2, size, size, {'fill':'#000'}),
canvas.add_rectangle(size/2, size/2+offset, size, size, {'fill':'#000'}),
canvas.add_rectangle(size/2, size/2+2*offset, size, size, {'fill':'#000'})];
]]>
</body>
</method>
<method name="clear">
<body>
<![CDATA[
self.lights[self.RED].set_color('#000');
self.lights[self.YELLOW].set_color('#000');
self.lights[self.GREEN].set_color('#000');
]]>
</body>
</method>
<method name="setGreen">
<body>
<![CDATA[
self.clear();
self.lights[self.GREEN].set_color(self.colors[self.GREEN]);
]]>
</body>
</method>
<method name="setYellow">
<body>
<![CDATA[
self.clear();
self.lights[self.YELLOW].set_color(self.colors[self.YELLOW]);
]]>
</body>
</method>
<method name="setRed">
<body>
<![CDATA[
self.clear();
self.lights[self.RED].set_color(self.colors[self.RED]);
]]>
</body>
</method>
<scxml initial="on">
<state id="on" initial="normal">
<state id="normal" initial="red">
<state id="red">
<onentry>
<script>
<![CDATA[
self.setRed();
]]>
</script>
</onentry>
<transition after='3' target='../green'/>
</state>
<state id="green">
<onentry>
<script>
<![CDATA[
self.setGreen();
]]>
</script>
</onentry>
<transition after='2' target='../yellow'/>
</state>
<state id="yellow">
<onentry>
<script>
<![CDATA[
self.setYellow();
]]>
</script>
</onentry>
<transition after='1' target='../red'/>
</state>
<transition event='police_interrupt_clicked' port='ui' target='../interrupted'/>
<history id="history"/>
</state>
<state id="interrupted" initial="yellow">
<state id="yellow">
<onentry>
<script>
<![CDATA[
self.setYellow();
]]>
</script>
</onentry>
<transition after='.5' target='../black'/>
</state>
<state id="black">
<onentry>
<script>
<![CDATA[
self.clear();
]]>
</script>
</onentry>
<transition after='.5' target='../yellow'/>
</state>
<transition event='police_interrupt_clicked' port='ui' target='../normal/history'/>
</state>
<transition event='quit_clicked' port='ui' target='../off'/>
</state>
<state id="off">
<onentry>
<script>
<![CDATA[
self.clear();
]]>
</script>
</onentry>
</state>
</scxml>
</class>
</diagram>
To compile, save this in a file called trafficlight.xml and run python -m sccd.compiler.sccdc -p eventloop -l python trafficlight.xml
Then, the following file will run the model:
import Tkinter as tk
import trafficlight
from sccd.runtime.libs.ui import ui
from sccd.runtime.statecharts_core import Event
from sccd.runtime.tkinter_eventloop import *
if __name__ == '__main__':
ui.window = tk.Tk()
controller = trafficlight.Controller(TkEventLoop(ui.window))
controller.start()
ui.window.mainloop()
Javascript¶
The SCCD model:
<?xml version="1.0" ?>
<diagram author="Raphael Mannadiar" name="Traffic_Light_JavaScript_Version">
<inport name="ui" />
<class name="MainApp" default="true">
<relationships>
<association name="trafficlight" class="TrafficLight" />
</relationships>
<method name="MainApp">
<body>
<![CDATA[
this.canvas = ui.append_canvas(ui.window,100,310,{'background':'#eee'});
var police_button = ui.append_button(ui.window, 'Police interrupt');
var quit_button = ui.append_button(ui.window, 'Quit');
ui.bind_event(police_button.element, ui.EVENTS.MOUSE_CLICK, this.controller, 'police_interrupt_clicked');
ui.bind_event(quit_button.element, ui.EVENTS.MOUSE_CLICK, this.controller, 'quit_clicked');
]]>
</body>
</method>
<scxml initial="initializing">
<state id="initializing">
<transition target="../creating">
<raise scope="cd" event="create_instance">
<parameter expr='"trafficlight"' />
<parameter expr='"TrafficLight"' />
<parameter expr="this.canvas" />
</raise>
</transition>
</state>
<state id="creating">
<transition event="instance_created" target="../initialized">
<parameter name="association_name" type="string"/>
<raise scope="cd" event="start_instance">
<parameter expr="association_name" />
</raise>
<raise scope="narrow" event="set_association_name" target="association_name">
<parameter expr="association_name" />
</raise>
</transition>
</state>
<state id="initialized">
</state>
</scxml>
</class>
<class name="TrafficLight">
<relationships>
</relationships>
<method name="TrafficLight">
<parameter name="canvas" />
<body>
<![CDATA[
var size = 100;
var offset = size+5;
this.RED = 0;
this.YELLOW = 1;
this.GREEN = 2;
this.colors = ['#f00','#ff0','#0f0']
this.lights = [canvas.add_rectangle(size/2, size/2, size, size, {'fill':'#000'}),
canvas.add_rectangle(size/2, size/2+offset, size, size, {'fill':'#000'}),
canvas.add_rectangle(size/2, size/2+2*offset, size, size, {'fill':'#000'})];
]]>
</body>
</method>
<method name="clear">
<body>
<![CDATA[
this.lights[this.RED].set_color('#000');
this.lights[this.YELLOW].set_color('#000');
this.lights[this.GREEN].set_color('#000');
]]>
</body>
</method>
<method name="setGreen">
<body>
<![CDATA[
this.clear();
this.lights[this.GREEN].set_color(this.colors[this.GREEN]);
]]>
</body>
</method>
<method name="setYellow">
<body>
<![CDATA[
this.clear();
this.lights[this.YELLOW].set_color(this.colors[this.YELLOW]);
]]>
</body>
</method>
<method name="setRed">
<body>
<![CDATA[
this.clear();
this.lights[this.RED].set_color(this.colors[this.RED]);
]]>
</body>
</method>
<scxml initial="on">
<state id="on" initial="normal">
<state id="normal" initial="red">
<state id="red">
<onentry>
<script>
<![CDATA[
this.setRed();
]]>
</script>
</onentry>
<transition after='3' target='../green'/>
</state>
<state id="green">
<onentry>
<script>
<![CDATA[
this.setGreen();
]]>
</script>
</onentry>
<transition after='2' target='../yellow'/>
</state>
<state id="yellow">
<onentry>
<script>
<![CDATA[
this.setYellow();
]]>
</script>
</onentry>
<transition after='1' target='../red'/>
</state>
<transition event='police_interrupt_clicked' port='ui' target='../interrupted'/>
<history id="history"/>
</state>
<state id="interrupted" initial="yellow">
<state id="yellow">
<onentry>
<script>
<![CDATA[
this.setYellow();
]]>
</script>
</onentry>
<transition after='.5' target='../black'/>
</state>
<state id="black">
<onentry>
<script>
<![CDATA[
this.clear();
]]>
</script>
</onentry>
<transition after='.5' target='../yellow'/>
</state>
<transition event='police_interrupt_clicked' port='ui' target='../normal/history'/>
</state>
<transition event='quit_clicked' port='ui' target='../off'/>
</state>
<state id="off">
<onentry>
<script>
<![CDATA[
this.clear();
]]>
</script>
</onentry>
</state>
</scxml>
</class>
</diagram>
To compile, save this in a file called trafficlight.xml and run python -m sccd.compiler.sccdc -p eventloop -l javascript trafficlight.xml
Then, the following file will run the model:
<div>
<script src="https://msdl.uantwerpen.be/git/simon/SCCD/raw/v0.9/src/javascript_sccd_runtime/libs/HackTimer.js"></script>
<script src="https://msdl.uantwerpen.be/git/simon/SCCD/raw/v0.9/src/javascript_sccd_runtime/statecharts_core.js"></script>
<script src="https://msdl.uantwerpen.be/git/simon/SCCD/raw/v0.9/src/javascript_sccd_runtime/libs/utils.js"></script>
<script src="https://msdl.uantwerpen.be/git/simon/SCCD/raw/v0.9/src/javascript_sccd_runtime/libs/svg.js"></script>
<script src="https://msdl.uantwerpen.be/git/simon/SCCD/raw/v0.9/src/javascript_sccd_runtime/libs/ui.js"></script>
<script src="trafficlight.js"></script>
<script>
controller = new Traffic_Light_JavaScript_Version.Controller(new JsEventLoop());
controller.start();
</script>
</div>