WebUI

Ikaros contains an integrated web server, which allows a browser to connect to Ikaros to view what is going on during execution. The interface uses SVG together with JavaScript to render controls, images and graphs. The following types of view objects are available in version 1.1:

Running Ikaros with WebUI

Start Ikaros with the command:

   IKAROS -w8000 network.ikc

The option -w turns on the web interface and 8000 specifies the port used to connect to Ikaros. Since 8000 is the default port this would be equivalend to just specifyingg -w without the number. To connect to the running Ikaros process from the computer where Ikaros is running use the following URI in the web brower:

   http://127.0.0.1:8000/

or alternatively

   http://localhost:8000/

This connects to Ikaros on the local computer (i.e. 127.0.0.1). To connect to an Ikaros process running on another computer, use the IP address of that computer instead. Beware that the web interface is inherently insecure since it can potentially access any file of the user that started Ikaros. Future versions of Ikaros may be more secure.

If your are running a firewall it may be necessary to allow access to port 8000 (or whatever port you are using) for the WebUI to operate.

A demo of the different graphical objects is available in

   Examples/web_ui_objects.ikc

The Controls

When using the WebUI, Ikaros is controlled by the buttons in the left top corner and the view menu to the right.

Stop The stop button stops the execution of Ikaros. Once the stop button has been pressed it is necessary to restart Ikaros before the WebUI can be used again.

Pause The pause button pauses the execution of Ikaros.

Step The step button executes a single tick and updates the view.

Run The run button starts ccontinuous execution of Ikaros. The view is updated between each tick.

Fast Forward The fast forward button executes ticks continuously but does not update the view.

Real Time The real time button executes Ikaros in real-time mode if it is set during start up. The view is updated every other second. If Ikaros is not running in real time mode, ticks are executed as fast as possible.

It is possible to change between different views by pressing the buttons to te right if multiple views have been defined in the IKC file. These buttons can also be used to update a view during real-time mode.

Specifying a View

The user interface elements can be specified in the IKC file. Here is a simple example that shows the basic use of the different view objects:

<?xml version="1.0"?>
<group title="My Example">
  .
  .
    <view name="My View">
      <object class="BarGraph" module="R" source="OUTPUT" x="0" y="0" />
      <object class="GrayImage" module="R2" source="OUTPUT" x="2" y="1" />
      <object class="Vector" module="R2" source="OUTPUT" x="1" y="1" />
      <object class="Grid" module="R2" source="OUTPUT" x="0" y="1" />
    </view>
  .
  .
</group>

The group is given the title "My Example". This title will be shown at the top of all views. The view is called "My View" and this will be the name of the button in the interface that shows this view.

This example defines four view objects. The type of object is set by the class attribute. Their positions (x, y) and size (h, w) are set with the corresponding attributes. The coordinates and sizes are given as integers in a coordinate system with (0,0) in the upper left corner. One unit int this coordinate system corresponds to a predefined size of a view object. The default size is (1,1).

Most view objects also use the attributes module and source to specify from where to read its data. Ojects can also have other attributes that sets various properties. These attributes are documented together with each object.

Automatic Transparency

It is possible to place several objects on top of each other. This will automatically make the background trasparent for all object except the one in the back. This feature can for example be used to draw markers such as circles, lines or crosses on top of an image or a grid.

The example below shows how automatic transparency can be used to draw a cirle in the center on top of an image:

  <view name="My View">
    <object class="Image" module="R" source="OUTPUT" x="0" y="0" />
    <object class="Circle" x="0" y="0" />
  </view>

Specifying Colors

Version 1.1 introduces a new unified may to specify colors of WebUI object. Colors can be be specified in the different ways summarized in the following table:

Type	Example
Named color	"red"
Transparent	"none"
Hexadecimal color	"#f00"
Hexadecimal color	"#ff0000"
List of colors	"#00d, green, #ef0, yellow"
Color look up table	"LUT_Spectrum"

The available look up tables are LUT_gray, LUT_fire, and LUT_spectrum.

When a list of colors is specified, the list is repeated until all elements have been assigned a color. For example, setting the colors of a bar graph to "red, green" will alternate red and green colors for all the bars.

Compatibility

The aim is to comply with the W3C standards, but since this would mean that there would not be a single browser that would work with Ikaros, the current aim is to be compatible with FireFox and Adobe SVG 3.0 Plug-in (because they exist on most platforms). The WebUI also runs with Safari 3.0 and later on OS X and Windows and which is the fastest browser for the WebUI for these platforms. This will change in the future as more browsers begin to comply with the standards, but is not the aim to be compatible with all browsers.

Browser Compatibility Ikaros 1.1 WebUI
OS	Browser	Plug-in	Status
OS X	Safari 4	internal	OK, fastest
OS X	Safari 3	internal	OK
OS X	WebKit	Internal	OK.
OS X	Camino 2.0	Adobe SVG 3.0	OK
OS X	FireFox 1.5	internal	OK.
OS X	Sguiggle with Batik 1.7beta	internal	OK, some namespace problems
OS X	Opera 9.5	internal	OK
OS X	Safari 2.0	Adobe SVG 3.0	OK
Windows	Safari 3	internal	OK
Windows	Safari 4	internal	OK, fastest
Windows	Internet Explorer 7	Adobe SVG 3.0	OK
Windows	FireFox 3	internal	OK
Linux	FireFox 3	internal	OK

Files

WebUI.h
WebUI.cc
UI/*.*