OASIS CIRCUIT DIAGRAM EDITOR Department of Electrical and Computer ...

fawnhobbiesSoftware and s/w Development

Jul 4, 2012 (4 years and 9 months ago)

413 views

OASIS CIRCUIT DIAGRA
M EDITOR

Eugene Kin Chee Yip

Department of
Electrical and Computer Engineering

University of
Auckland
,
Auckland
,
New Zealand




Abstract

BlueMesh is a
browser based application that allows
its

user
s

to create relational diagrams.

Blue
Mesh can be
used as a stand
-
alone application or it can be embedded
into
a

web

page.
T
his

report

describe
s

the capabilities
of
BlueMesh from a user’s and developer’s standpoint
.

Next
,

the use of BlueMesh in a learning
resource

website called OASIS is exp
lored.

The features of
BlueMesh as a circuit diagram editor are explained.
Finally,
the
implementation issues encountered
and
possible
future

works of BlueMesh are

discussed.

1.

Introduction

BlueMesh is

a software application written from the
ground up in r
esponse to the project goal of creating an
online
interactive
circuit
diagram
editor for a learning
resource website called OASIS. The
design philosophy
of BlueMesh was

to create an application where circuit
editing could be one
of its
purposes
.

1.1.

Attributes of a circui
t
diagram
editor

A circuit

diagram

editor
simply
captures the relationship
between
electrical
components

as drawn by a user on
some sort of grid
.
Components in circuit editors
can

be
represented by their electrical symbol

or as a box with
input and output

terminals
. Each component will have
at least one
terminal; a
place

or site where wires may
connect to.
Circuit editors normally use orthogonal lines
between component terminals to represent wires. In
effect, these wires
relate

component terminals to
ea
ch
other
.

In a circuit editor, a
s in real life circuits,
connections between
component terminals
are

made by
drawing a line between
.

Circuits are

drawn on a large area

and usually
overlaid with
a Cartesian
grid
.
The grid
division
determines

the smallest
distance that a component or
wire can
move along
.
The grid help
s

a

user align
components and wires
to produce

clean looking circuits.
If the grid division is decreased, then the grid’s
resolution increases and vice versa. Once a circuit has
been drawn,
a c
ircuit editor

can capture the layout of
components
and retain the relationships
between each

component
for later use
.

A netlist may be used for
capturing this information.


1.2.

BlueMesh

BlueMesh
(logo shown in Fig. 1)
is a software
application designed to run in a standard web br
owser.
Its purpose is

to be a relational editor

to

facilitate the
diagramming of entities relating to each another
.
This
means for a set of entities, connections can be made
between them. An entity

in BlueMesh
is

represented as
a geometric object, calle
d simply as an

object

.

Entities are defined in a master file called a
library
.

The most important
behaviour

requ
ired
of BlueMesh
is the drag
-
and
-
dropping of objects on a

Cartesian grid.
This required a simple drag
-
and
-
drop prototype to be
built using c
ommon software platforms
available for

building
web
applications
.
The main software platforms
identified were:

JavaScript, Ac
tionScript 2.0,
Adobe
Flex
3
and Java.

The lack of a native drawing library in JavaScript
was a severe weakness
because faux
-
drawi
ng using

bordered

HyperText Markup Language (HTML) boxes
with borders expose
s

BlueMesh

to cross
-
browser
incompatibilities [
1
].

Java Virtual Machine

is

required to run Java
programmes

but is

not included
with

Microsoft
Windows Vista or Windows XP Service Pa
ck 1a and
later due to legal
p
roblems with Sun Microsystems [2
].
Java was therefore not a suitable platform to use.

Adobe Flex is an open
-
source framework aimed at
building web applications
using ActionScript 3.0
. Flex
comes with a library of styled user

interface

elements
and support for accessing data via the internet
.
Applications created with

Flex

require

version 9 of
Flash

P
layer

[3
]
. Adobe Flex is a
suitable

platform to u
se
.

ActionScript 2.0 is a scripting language used for
creating interactive we
b applets with good mouse and
keyboard interfaces, on
-
screen drawing functions and
Figure 1
: BlueMesh logo.

ability to read and write data from internet locations.

Applications written in ActionScript 2.0
also
re
quire
Adobe Flash Player to run
.

I
ts penetration on Windows
computers is very high
[
4
]
and
the most common

version
(six
)
is able to run applications written in ActionScript
2.0. Hence, version 6 of Flash Player is the earliest
version to be
supported.
So in general,

BlueMesh can
be used without installing any software

beforehand
.

For
computers with web browsers lacking Flash Player, it
can be downloaded and installed for free from Adobe.
Flash Player is available

for Microsoft
Internet Exp
lorer,
Safari, Firef
ox and Opera on Microsoft Windo
ws, Apple
Macintosh and Linux [3
].

ActionScript 2.0

was chosen as the preferred
platform because Flash Player “delivers powerful and
consistent user experiences across major operating
systems, browsers, mo
bile phones, and devices” [3
].

1.2.1.

Basic concepts

In BlueMesh, an entity represents
a thing

with at least
one qualitative attribute. Entities include ideas,
concepts, intangible objects, tangible objects, and
spatial
locality.
Multiple copies of an entity ca
n be made and
used and each copy will have its own internal identifier
so BlueMesh can distinguish one from
another
.
Visually,
BlueMesh presents entities as rectangular
objects
[
Fig. 2
]
that can be dragged around

or deleted

and is simply called an “object”
. Th
es
e

objects may
contain an image and also descriptive text so the user
can see

what entity
is represented
. The text can be
modified at anytime while BlueMesh is running.

Positioned around an object are connection sites

[
Fig. 2
]

which specify where connections can be
made to
it.
A

relationship between two objects is made by
activating a connection site on each object and if
successful, a line joining the two sites will appear.

Once
connections are made, they can only be broken if one of
the entities are deleted.

Con
nection sites can be
directional so an object can have input and output
connections with other objects.

To benefit other learning institutions and private
users,
BlueMesh
is to be

re
leased to the public as an
open
-
source project.

The license used to allow

this is
the
GNU (GNU’s Not Unix)
General
Public License
(GPL)

[5]
.

1.3.

BlueMesh

as a circuit
diagram
editor

In accordance
with

its design philosophy
, BlueMesh is
not a circuit
diagram
editor. However, BlueMesh can be
made to behave
as

a circuit editor given its ab
ility to
represent entities as rectangular objects
and form
relationships through the use of connection sites
. Hence,
circuit editing can be seen as one application of
BlueMesh.

1.4.

OASIS

OASIS is an acronym for Online Assessment

System
with Integrated Study
and is
developed by
the
Department of Electrical and Computer Engineering

(ECE)

at the University of Auckland

(UoA)

[6]
.
Its
main purpose is to be an online learning
and assessment
resource
for
its
students. It provides
students with
practice questions for
a

number of
course
s
. Lecturers
are able to administer online tests for their students to
complete

in their own time
. Answers provided to
OASIS are marked instantly
for immediate
feedback

and

includes the student’s answer, correct answer and marks
awarded
for the question

attempted
.

OASIS can only generate close
-
ended questions
because only
answers provided are matched against a
predetermined solution set
.
As a way to

improve the
reuse value of questions, OASIS has the ability to
regenerate questions with
different numerical values.
Therefore, students
can

keep practicing the same
question
.

For

entering answers
to

an OASIS question,
drop
-
down lists, radio buttons and text
-
input boxes can
be used

[6]
.

To complement questions, standard web
med
ia

like pictures or animation

can be used but they
cannot be used to generate answers

for the student.

When an OASIS question is viewed in a web
browser, the

layout of
content
is governed by an HTML
templat
e. In addition to
displaying the question
,
th
e
HTML template provides
a navigation menu at the top
and
a context sensitive menu
along the left
-
hand side
that either displays available courses or questions.
OASIS questions are written in

HTML
so anything that
can be placed on a web page can also be p
laced in a
question

[6]
.

OASIS is accessed
c
ommon web browsers
like

Microsoft
Internet Explorer,
Mozilla
Firefox,
Apple
Safari and Opera can be used.

Questions can be
answered using a standard mouse and keyboard.

For
numerical answ
ers, electrical symbols are not required
as they are usually displayed beside the text
-
input boxes.

1.5.

How can BlueMesh complement OASIS?

OASIS questions present a low l
evel of interactivity
to
students

since each question has only one correct
answer. By pre
senting a “hands on” question where
more than one solution
may exist

a more engaging
experience is brought forth.

Conferring with the project
Figure 2
: An object representing an entity with two
connection sites

to the left
.

goal of providing

OASIS with an interactive
online
circuit diagram editor, an area where open
-
ended
questions ben
efit students is the construction of
electrical circuits that can be marked by OASIS.

2.

Circuit Editor

Having decided to take BlueMesh to build a circuit
editor for OASIS, the next phase of implementation
was

to determine what the requirements
were for an OA
SIS
circuit diagram editor. This was determined from an
OASIS developer and
user

s

perspective of functionality
and
usability
.

2.1.

OASIS requirements

The following list identifies
the
important requirements
of
an OASIS

circuit editor:



A
llow

digital and analog
ue

circuits to

be drawn and
sent for marking.



Contain electrical components
focused on
ECE

Stage One and Two

theories

at the
UoA
.



Easy for Stage One and Two students to use and
during tests
should feel at ease with the editor.



R
equire no software
installations to use
.



A
llow
lecturers to generate circuit questions.



Provide a way for circuits
to be marked by OASIS.



Support the same web browsers as OASIS.



A
ccessible via keyboard, monitor and

mouse.



C
omplement
the open
-
source (GPL) nature of
OASI
S.



E
xecutabl
e on 1 GHz and faster computers and

major operating systems.

Given the requirements

the solution should
:



A
t the minimum,
be accessible via the following
web browsers:
Internet Explorer 6

and 7
;
Firef
ox

2
and 3;

Safari 2
and 3;

Opera 9.1 and above.



Be a small

file size
so it can be downloaded quickly
over the internet.



Optimised for performance and use graphics
animation sparsely.



Developed with

open
-
source tools.



Allow circuits drawn to be expressed as a netlist
that can
be sent back to OASIS for marking.



Have its interface based on
existing schematic
capture programmes used by students
.



Be r
eleased as an open
-
source
.

2.2.

Existing solutions

“Animated Circuit Editor”
[7]

is a

Java applet of an
electrical circ
uit editor
available online with circuit
components that have drag
-
and
-
drop features. It also
has the

ability to simulate the electrical characteristic of
a drawn circuit
.
Unfortunately this solution does not
meet the OASIS circuit editor requirement
s but t
his
applet is a good goal to aim towards.

“Mark’s Web Circuits”
[
9
]
is another circuit editor
using JavaScript. An area of the web page is used as the
circuit area that has been split up into a grid of squares.
Each component occupies one square and w
ires are
drawn one square at a time.

Unfortunately there is only
room for one piece of wire for each side of a component.
There is an option to save and load circuits but this
feature does not appear to work.
The

circuit saving
feature

would have been a good model to use.

2.3.

Solution

The proposed solution
was

to take BlueMesh and apply
it as a circuit editor. As described in section 1.3 of this
report, BlueMesh has the capabilities
to be a circuit
editor
and features can be tailored to be

more specific
and

more

appropriate jargon

can be used

for the user
interface
.

Each type of electrical component is
represented as an entity and as many replicas can be
made. Values can be assigned by the user and this
is

used for setting electrical valu
es.

Apart from the
inability to mark analogue circuits, the
requirements of
an OASIS circuit editor are

met.

2.4.

The advantages of BlueMesh

Since Adobe Flash player is required to run BlueMesh,
it is h
ighly portable between different web browsers and
is indep
endent of the Operating System platform
. This
is because it is in the best interest of Adobe to maintain
cross
-
platform compatibility so that developers can rely
on Flash Player to target a very wide audience
.

BlueMesh has been tested as working in the
fo
llowing web browsers: Internet Explorer 6 and 7;
Firefox 2 and 3; Safari 3; Opera 9.5.

At this time, Apple
Safari 2 and Opera versions before 9.5 were unavailable
for testing.

Analogue and digital circuits
are easily drawn with
BlueMesh and the user inter
face of BlueMesh is based
on common

schematic capture programmes.

Circuits drawn can be saved and loaded back into
BlueMesh at a later time. This
allows the user to use
BlueMesh in different environments
.

2.5.

Disadvantages of BlueMesh

As a consequence of bein
g

just

a graphical relational
ed
itor, BlueMesh is unable to check
the validity of
electrical

circuits drawn. The circuit
has

to be saved and
given to another application that can
check the circuit.

The

library of
electrical

components is limited

so
additional types
need

to be manually created before they
can be used in BlueMesh.

For now, electrical
components cannot be rotated or reflected because of
fairly difficult without using additional images that have
been rotated and reflected. Adding more
images
would

increase the file size of BlueMesh

and

increase
the time
to

download

it from the internet
.

3.

Graphical User Interface

The Graphical User Interface (GUI) is what users see
when they use BlueMesh.
Keeping in perspective of a
circuit editor,
Fig. 3

shows the GUI of BlueMesh as a
design concept and as
an implementation
. There are
four main areas to the GUI: the
toolbar
, toolbox, circuit
grid area
,

and information box. Other user interface
elements

include buttons, input text boxes, tabbed panels

and popup
alerts and input text boxes
.

3.1.

Toolbar

The toolbar is a
strip

that appears along the top of
BlueMesh

and contains tools or options available to the
user at all times
.

Examples include saving, clearing the
grid area, turning on the editing mode an
d loading a
previously saved circuit.

3.2.

Toolbox

The toolbox is a rectangular box that appears underneath
the
toolbar

and aligned to the right
-
hand side of
BlueMesh
. The
toolbox

uses a tabbed interface where
each tab
contains buttons for creating different
e
lectrical

componen
ts for use on the grid area. Buttons are
arranged in a categorical manner among the tabs so
searches for
electrical

components are fast.

3.3.

I
nformation box

The information box is another rectangular box and
appears underneath the
toolbox

an
d is used by
BlueMesh to communicate with the user by displaying
various messages
to user

events.

3.4.

Circuit grid area

The circuit grid area occupies the remaining space.
Since this area is used to for drawing circuits, as much
space should be made availabl
e

to the user
.

3.5.

Types of circuit

components

BlueMesh only comes with basic
types of
electrical
components

for building analogue or digital circuits.
Analogue components include: voltage source, current
source, resistor
, capacitor, diode, field
-
effect trans
istor,
operational amplifier and ground terminal. Digital
components include:
AND gate, OR gate, NOT gate and
input / output ports.

Electrical

components available for
use will appear as a button
, labelled after the component,

in the
toolbox
. When
such

button is pressed, the
corresponding
electrical

component will appear on the
circuit grid
area
ready for use.

3.6.

Making a circuit

The easiest way to build a circuit is to start with the

electrical components. From the toolbox, create as
many
electrical

compo
nents as needed
.

Arrange the
components on the grid as desired. Then create
1
DRAW
LOAD
SAVE
EDIT
CLEAR
2
3
INFORMATION
VOLTAGE
CURRENT
RESISTOR
R
1
+
-
Toolbar
button
Toolbar
Toolbox
Information box
Grid
Figure 3
: Design (left) and implementation (right) of BlueMesh

s gr慰h楣慬ius敲 楮瑥tf慣攮

connections between the
terminals

of each component
by clicking the target connection site of each component.

The connection site(s) of a component is (are)

located around
its ed
ges and appear as semi
-
transparent
squares
. These sites correspond to the terminals as
suggested

by a
component’s

image. When the mouse
hovers over these sites,
the

square will
appear

opaque

and the user activates the site by clicking it
. Clicking
anoth
er site will cause

a

wire to be automatically

routed
between the two sites.

3.7.

Editing a pre
-
made circuit

Circuits loaded into BlueMesh
are no different than a
circuit that had

been drawn
by the user
. BlueMesh takes
in the XML string and parses it. After th
e components
and
connections

have been
extracted, the components
are placed one by one onto the circuit grid area

after
which

connections are made
. This


replaying


is
performed

by

programmatically “click
ing
” the
appropriate buttons

and “dragging” compone
nts to their
correct place on the grid
.

3.8.

Interface for students

Students will have access to the toolbar, toolbox,
information area and circuit area and all the
functionality described in above. For students, the
circuit area may be initialised with a part
ial circuit or a
selection of circuit
components

that

must be used for a
given question. If certain symbols are limited by
quantity, the information area
may

be used to display
the available quantity.

Submission of the circuit for marking
is

performed
by
clicking
the “Mark Now!” button. When this
button
is pressed,
a JavaScript
calls is made

to
BlueMesh to
save the netlist into a hidden answer field which is sent
back to OASIS for marking.

3.9.

Interface for
lecturers

This will be an extension
of

the student i
nterface. The
idea is to allow
lecturers

to be

familiar with what
students
are using to answer circuit questions
. The
following features described
are intended to

be
unavailable to students.

For the circuit area,
lecturer
s may draw a partial
circuit
as a

starting point to help

students complete

a
circuit question
.

A partial circuit can be saved as a
netlist and automatically loaded into BlueMesh at the
start of a question attempt.

Currently, t
he information area
is

used to display
debugging information f
or
software developer’s
interest. When a symbol is selected in the circuit area,
it is hoped that the information area will display the
components

connected to it or
list
any floating nodes.

4.

System Architecture

Using BlueMesh as a circuit editor for OASIS

requires a
method of communication so that BlueMesh and OASIS
can work together to p
rovide a coherent web service.
BlueMesh is delivered over the internet through the
HTML of an OASIS question and a web browser is used
to render the HTML
. External media

may

also
be
retrieved by the web browser
if

specified by the HTML.

4.1.

Client
-
side HyperText Mark
up Language

BlueMesh
is
embedded into OASIS questions
using

the
OASIS “raw editor” as it allows
a
question to be written
directly as HTML code

[6]
.

In addition to wh
at is
required for writing normal questions, HTML code is
required to specify the location of BlueMesh on the
question page.
Hidden
answer fields may exist on a
question page for passing netlists back to OASIS
.

JavaScript
to
handle
OASIS
-
BlueMesh
communi
cation
is

inserted

into the HTML as well. This is a fairly
manual process and it is hoped that the OASIS guided
question generator called “qedit” could be extended to
include easy generation of circuit editing questions.

4.2.

JavaScript

For circuits drawn in B
lueMesh to be sent back to
OASIS for marking, a communication protocol is
needed. JavaScript is
used

to implement
this
message
passing

because Flash applications can only interact with
HTML elements via JavaScript
. The text being passed
around
is in

a sp
ecific format so BlueMesh can easily

and consistently

interpret the data.

Extensible Markup
Language (XML) was chosen as the desired format
because of its

human readable structure
. Also
,

an open
-
source utility

written in ActionScript 2.0 that parsed and
generated
XML
was found

[9]

and this reduced
implementation time
.

When
a student clicks the “Save” button in
BlueMesh
,
a netlist in XML is generated and
inserted
into a hidden answer field
i
n
the question page
.
The

JavaScript function
required
accept
s

an XML
string for
insertion into
a

hidden answer field.

Once

the
“Mark
Now!” button
is clicked t
he answer field
is
sent back to
OASIS

for marking
like

e
xisting questions
.

Circuits saved as a valid XML string can be loaded
back into BlueMes
h, again through the use of
JavaScript. When the “Load” button in the toolbar of
BlueMesh is clicked, a JavaScript function call is made
to present the user

with a text box to enter an XML
string. Once entered, JavaScript is used again to pass
the XML st
ring back into BlueMesh. The circuit is then
redrawn onto the circuit grid area without needing to
refresh the web page it is on.
Through the use of the
Asynchronous JavaScript and XML (AJAX) technique,
marked circuits can be loaded back into BlueMesh
wi
thout the need to load a new web page to display the
marking results. This would make question retries more
productive because the student does not have to go from
the question page to the result page and then back to the
question page. Bandwi
dth is also

saved because only
the netlist XML

be transferred between OASIS and
the
student’s web browser.

Microsoft Internet Explorer web browsers require the

use of Visual Basic

Script

(VBScript)
for interaction
with

Flash applications

[10]
. Hence, a small
VBScript

scr
ipt is used to pass
BlueMesh interactions

to

the usual
JavaScript functions previously described.

4.3.

Server
-
side

On the server
-
side is the OASIS system that serves
question
s

to students,
allow

lecturers

to generate
question
s

and the
ability

to mark answers su
pplied by
students.

For OASIS to generate a web page with a
question, it needs to
retrieve the correct question

HTML
template
,
random
values
to use

and any
multi
media
required
. With regards to questions using BlueMesh,
the netlist used to

describe a circuit is retrieved and
also
included with

the question HTML. When a student
views the question, BlueMesh interprets the netlist and
loads the circuit back on to the circuit grid area.

Because circuits are loaded into BlueMesh as
netlists, o
n
ly one version of BlueMesh
is
required for
displaying different circuit

questions. This allows
BlueMesh to be cached on the client
-
side to allow low
bandwidth serving of circuit questions.

Once OASIS receives the netlist submitted by
a

student, a Python

script is
executed to take the netlist
and check
the

circuit
structure

and whether the
attributes of
each
component
are correct.

4.4.

Development tools

Open
-
source development tools were chosen to
complement the open
-
source natur
e of BlueMesh and
OASIS. This allows low budget users to
freely
develop
BlueMesh to suit their needs.

FlashDevelop

was chosen as the Integrated
Development Environment (IDE) for this project
because of i
ts open
-
source nature (MIT license)
[11]
. It
support
s ActionScript 2.0 for creating Flash
applications. It also supports ActionScript 3.0, the
latest version, through the Adobe Flex
Software
Development Kit (SDK)
. Different Flash Player
versions can be targeted for compilation and this helps
maintain supp
ort for Flash Player version 6. This level
of future
-
proofing provides future dev
elopers the ability
to port BlueMesh

to ActionScript 3.0
in

the same
environment. One limitation is that FlashDevelop can
only be installed on a Microsoft Windows 2000 / XP
/
Vist
a computer with .NET

and these

are
not open
-
source operating systems
.

VirtualBox

gives

the ability to test
BlueMesh

in
multiple computing environments
using

virtual
machines
one a single computer
. There is support for
rolling back virtual machine s
tates an
d this is useful for
bringing the test environment back
to a predetermined
state.


VirtualBox is an open
-
source (GPL)
[12]

x86
virtualisation product that runs on Linux and Windows.

5.

Adding to the Application Programming
Interface

An

Application Programm
ing Interface
(API)
provides

programmers
a foundation for creating complex
applications
. Creating
a BlueMesh

API allows the
complexity of creating

on
screen objects like
a toolbox
or button

to be hidden from the developer. The API is a
collection of ActionScrip
t 2.0 classes defined in
separate ActionScript files (*.as file extension). Classes
are designed to have a clear cut purpose to the benefit
of developers. Utility and object classes are defined for
the API and its structure is shown in Fig.
4
.

With
Acti
onScript 2.0, a
t least one

MovieClip is used
for
creating

an onscreen object.

5.1.

Utility classes

Utility classes allow its functions to be used without
needing to instantiate the class as an object. These
functions are stateless and are declared as “static”.

As
shown in Fig.
4
, the following utility classes have been
written: GDraw, IO,

McLib, Netlist, PathFinding,
Replay and XMLParser
.

GDraw has functions to perform graphic drawing of
lines, filled shapes, applying an image, and creating text
areas. It is
used for drawing buttons,
shapes, circuit
area grid, and component images
.

IO (input / output
)
has functions to call JavaScript
functions
to display alerts, prompts and confirmation
API
Replay
Shape
Text
Image
Popup
Send Netlist
IO
GDraw
PathFinding
circuitComponentLibrary
Utility Classes
Netlist
buttonFormat
XMLParser
Grid
Bttn
Panel
Wire
DragObject
CircuitComponent
Object Classes
Connector
TabbedPanel
Figure 4: API structure of BlueMesh.

popups. It also has a function for inserting netlists to
text fields on a

web page through a JavaScript call.

McLib has functions to hide the complexity
associated with creating a Flash movieclip from class
definitions and sets class variables at the same time.

Netlist
has

functions to generate
digital and
analogue netlists.

Pa
thFinding has functions to calculate and return the
best path to take between two points without colliding
into existing objects for a given area.

Replay has functions to replay the drawing of a
circuit once a netlist has been loaded into BlueMesh.

XMLPars
er parses XML into an ActionScript object
so the information contained can be used immediately
.

5.2.

Object classes

Object classes describe interactive objects or graphical
containers and are required when states need to be kept
throughout the life of the circ
uit editor. For example,
when an on
-
screen object is
manipulated

BlueMesh
needs to remember the mutation until the user has
finished with the editor. As shown in Fig.
4
, the
following object classes have been wr
itten: Grid, Wire,
Bttn
, DragObject, Circui
tComponent,

Connector,

Panel

and TabbedPanel
.

Grid describes a Cartesian grid for objects to snap
to
. Objects can only be placed on particular points
defined by the grid.

Wire
represents a connection between two
connection sites as a line.

Bttn describes
buttons that respond to mouse events.
On a mouse response, they can generate a signal to
another object to trigger a reaction.

DragObject describes a
MovieClip

that can be
dragged with response to mouse events.

CircuitComponent extends DragObject by allow
ing
circuit symbols to be defined. This includes specifying
symbol images, text overlays, size and the function to
be called when mouse events occur.

Connector describes the connection sites that may
exist around an object.

Panel describes an on
-
screen co
ntainer for objects to
reside in.
Interactive elements

defined in a

panel are
positioned relatively
.
It provides

hierarchy between
similar objects and to separate unrelated objects.

TabbedPanel

are similar to normal panels but with
tabs along the left
-
ha
nd side. These are used for
stacking panels on top of each other with only one
visible at a time. This saves space.

5.3.

Creating new
electrical
components

In BlueMesh,
an electrical component has a defined
width and height and displays

an electrical symbol
w
ith

at least one connection site.

Every entity

is

displayed as a rectangular object
and
all measurements are defined in grid squares.

The
minimum size a component is one grid square. This
methodology
for

defining component dimensions gives
BlueMesh the a
bility to scale the size of each
component

with the

circuit

grid

resolution
.

For BlueMesh to display the component’s electrical
symbol, an image of the symbol has to be supplied.

The

component
to be created

is overlaid

with

this

image
.

Finally, the elect
rical component’s
terminals

are
specified
in a clockwise manner
starting from the top
-
left corner. These
terminals

can be specified as
an
input
or output
.
Inputs are red in colour.
T
his
is
useful
for

digital components where
terminals

can be

directional
.

5.4.

Panel and tabbed pane
l

Quite simply, a tabbed panel is a panel with an extra
rectangular area protruding from the left
-
hand side. This
protrusion is called a tab. A tabbed panel exists inside a
panel. A panel may contain multiple tabbed panels but
onl
y one tabbed panel is active at a tim
e. This means
the contents of one

tabbed panel will ever be visible.
The whole tabbed panel can be clicked but since only
its

tab is visible, it would seem that only the tabs are
responsive to mouse clicks.
Once a ta
b has been clicked
and its contents shown on top of the others, the tab
’s
response to
mouse movements

is disabled
.
Inactive
tabbed panels will react to a mouse h
overing over it by
changing the tabs appearance.

Also, i
nactive tabbed
panels
will have their

interactive elements, like buttons
or input text boxes, disabled to prevent
random
activation
options
on

these

tabbed panels.

There is a fair amount of code duplication for adding
buttons onto tabbed panels as similar code exists for
normal panels. Curre
ntly no other method has been
found to allow butt
ons to be independently created and
then attached to either tabbed panels or normal panels.

5.5.

Mouse event problems

With ActionScript 2.0, mouse events are not passed to
child MovieClips by the parent

MovieClip

[13]
. This
means
if a child MovieClip requires information about
the mouse, then
the parent needs to generate pseudo
mouse events for its children. This re
-
generation of
mouse events by the parent consumes computational
resources and can be avoided if Action
Script 2.0
propagated
mouse events to all MovieClips.
ActionScript 3.0 improves this situation by
automatically propagating mouse events to child
MovieClips

[
14
]
. Unfortunately, ActionScript 3.0
requires Flash Player version 9 which is not common
enough among

computers so it does not meet the OASIS
circuit editor requirements.

6.

Different Uses of BlueMesh

BlueMesh has been created to be a generic relational
editor
so it can be applied to a range of
tasks. These
tasks only need to involve the use of entities and

some
need to form relationships between them.

6.1.

Path finding

During the development of BlueMesh, it was envisioned
that connections drawn between two objects would be
automatic. In addition, the connections would route
around existing objects on the drawin
g area through an
A* path finding algorithm. However, this feature was
dropped as the computation required to reposition wires
when objects were repositioned was too much.

Fortunately the A* path finding algorithm is retained
so in future programmers may
use BlueMesh as a path
finding tool. This may include finding the shortest
distance or the path of lowest resistance between two
points on the drawing area.

6.2.

Flow chart editor

Flow charts are used for representing a process or
algorithm in a graphical mann
er. These are built up
connecting geometric shapes, representing states and
decisions, together with arrowed lines.
With BlueMesh,
states and decisions are two entities that can be
represented as objects. A rectangle can be used to
represent a state and

likewise, a diamond can be used to
represent a decision. Once connection sites are
specified around each object, BlueMesh will take care of
the rest to make existing features available. For
example, BlueMesh will provide the ability to make
connections
between connection sites and text
annotation of state and decision objects.

6.3.

Function block design

Software or hardware can be designed in a top
-
down
manner through the use of function blocks. Function
blocks represent components as a rectangular block wit
h
a series of input / output terminals. Function blocks can
be represented in BlueMesh in the same way as circuit
components less the display of a circuit symbol. One
main addition required is the labelling of each input /
output terminal for meaning and

relevance. Again,
BlueMesh will provide drag and drop,
ability to create
connections between each terminal, and the ability to
save what has been drawn.

7.

Implementation Issues

As mentioned in section 6.1 of this report, the ability
of
connection lines

to
route around
other objects was
dropped due to
an

exponential increase in computation
with a linear increase in

connection

length
. Also, the
redrawing of connections after a component is
repositioned would demand high computation especially
if the object h
as more than one connection to it.

As described in section 5.5 of this report, mouse
event problems complicated the use of
tabbed panels.
Interactive elements, like b
uttons or input text boxes
,

on
a tabbed panel
do

not receive information about mouse
even
ts unless
the tabbed panel (parent MovieClip)
continuously

interact
s

with the interactive elements
through function calls.

In terms of ActionScript
2.0
coding, there was an
unexpected behaviour in object creation where member
variables set
during

object
i
nstantiation

altered the same
variable in
existing

objects
of the same class
.
Fortunately this was spotted easily through the help of
the trace() command and the use BlueMesh’s
information box for debugging.

While an object is dragged around the drawing a
rea,
the movement of the object does not snap to the grid.
Instead
it moves

fluidly

across the grid and only snaps
to
the grid after

the object is released. In order to keep the
object snapped to the grid, continuous calculations on
the mouse position ar
e required. Unfortunately
this is
computation
ally expensive

and
would add

to the
computation requirement of BlueMesh.

ActionScript 2.0 does not have implementations for
displaying

an alert or text input box

as a popup

to the
user

in a Flash application
.
These popup boxes

would
need to be created from scratch
. Fortunately, JavaScript
has these user interface elements and BlueMesh makes
use of them by calling a JavaScript function to display
the appropriate popup box to the user. This work
around saved co
nsiderable implementation time but the
compromise is that the visual styling of the popup boxes
is different to that of BlueMesh. This is a visual
compromise
so

functionality

is unaffected
.

7.1.

Architecture limitations

BlueMesh is limited in its reliance on J
avaScript and
VBScript

for communicating

with the OASIS system.
When used locally on a computer,
BlueMesh
may
require

security settings

of
Adobe Flash Player

to be
turned off
since
the communication

is considered a
security risk by default

[15]
. Asking a non
-
technical

user to change their Flash Player settings may be
cumbersome
.

The usability of BlueMesh, in terms of hardware like
keyboard and mouse, is limited by the device that it is
running on
. This is evident when
using a handheld
device or

mobile phone. Here the

user interacts with the
web page through the use of a touch screen in
conjunction with a keypad. The main difference is the
non
-
existence of

mouse hover or mouse move events.
Web browsers on mobile phones usually place the cursor

at locations rather tha
n moving the cursor

continuously

from one point to another.

Since e
ach con
nector occupies one grid square,
the
resulting component may take up a lot of grid space

if
one side contains many connection sites
. This may
result in a high resolution grid being
required and may
require a powerful computer
to run BlueMesh
.

7.2.

Development tool limitations

To satisfy the project requirement for an online circuit
editor that is accessible to as many computers as
possible, version 6 of Flash Player was chosen as the
earl
iest

version that would be supported. The
compromise was that ActionScript 2
.0

was the latest
version
that could be used to
make

BlueMesh
. This
prevented the use of ActionScript 3
.0

with the Adobe
Flex

3

framework

[16]
;
both far better in
their

ability to
cre
ate
web
applications and user interfaces
. Many of the
shortcomings of ActionScript 2
.0

are rectified by
ActionScript 3
.0

and Flex

3
.

8.

Future Goals

BlueMesh in its current state is useable for simple tasks
but is largely a proof
-
of
-
concept to demonstrate th
at it is
possible to create an online circuit editor to complement
OASIS. Given the time constraint to build BlueMesh,
priority was given to functional features over usability
features. Future goals will aim to provide use
rs with
more interactive feature
s.

8.1.

Restriction

of components

To facilitate the types of questions that can be set in
BlueMesh, the ability to lock components onto the
circuit grid would be useful for
imposing
the use of
some circuit structure.
The quantity of circuit
components could be

limited as well to

force student
s

to
think critically about the circuit.

For the toolbox,
lecturers

may choose to limit the
type of circuit
components

and quantity available for
students to use in their ans
wer. This may be useful
when a

lecturer

wants to

enforce the understanding of
specific circuit components or theory.

Lecturers

may choose to place several
components

of the same type with “read
-
only” attributes onto the
circuit grid

and remove that
component

from the
toolbox to create “pick and choose”
questions.

8.2.

BlueMeshes in HTML

It had been planned from that start that multiple circuit
grid
areas could be used for answering circuit questions.
The BlueMesh grid already uses a unique identifier and
every component created gets a reference to the grid
a
rea it was created on. Tabbing between these grids is
possible but has not been implemented to the user
interface. Components should be deactivated and
hidden as each grid is tabbed through
, similar to how
tabbed panels work
.

Additionally, more than one
BlueMesh
could

co
-
exist on one question page. This
requires

each
BlueMesh application

to be identifiable

so that data
from each can be sent to the correct answer
fields
.
Identification

is also required when loading the correct
circuit at the start of eac
h question.

8.3.

Use of Simulation Program with Integrated Circuit
Emphasis

Simulation Program with Integrated Circuit Emphasis
(SPICE) is a programme that allows the simulation of
analogue circuits.
There are open
-
source SPICE
programmes available.
Since a n
etlist can be generated
that contains information about the relationship between
each circuit component and also the values of each
circuit component, it is possible to generate a netlist that
is compatible with a SPICE program for marking.
BlueMesh will
have probe
s as a

component

type so
students can place

probes at
specified

places for SPICE
to take measurements from. The SPICE programme will
simulate the student’s circuit and
measurements

will be
compared to a
lecturer
’s circuit. If the values are wit
hin
an allowable tolerance, then the student’s circuit will be
marked as

correct.

The process of taking
a

student’
s
netlist and passing it to a SPICE programme for marking
and returning the mark to OASIS
could

be done
automatically
. This

is being researc
hed by
a pair of Part
Four students
,

at the Department of
ECE

at the
UoA
,
who are

working on a project titled “
Secure
Environment for Assessing Student Programs
”.

Simulation using a SPICE programme on the OASIS
system is possible but will require the use o
f multiple
serve
rs to share the simulation work
load. A load
balancing technique
could

be used but as
the number of
marking requests increase, the workload
is expected to

increase exponentially.

8.4.

Logic minimisation for digital circuits

BlueMesh currently ha
s its
own

method for generating
Boolean

logic expressions from digital circuits. To
allow

the ability to mark
complicated digital circuits
, it
would be wise to reduce the logic expression before a
truth table is created and compared with
a

lecturer
’s

circ
uit
.
A pair of students, at t
he Department of ECE at
the UoA
, is

implementing

two
-
level logic minimisation
in OASIS for their Part Four project

titled “Two Level
Logic Minimization”

which could be used
.

8.5.

Upgrade to ActionScript 3.0 or Adobe Flex

3

ActionS
cript 3.0 and Adobe Flex
3
are the latest tools

to
create Flash applications
.
ActionScript 3.0 improves on
ActionScript 2.0 in performance, creation of graphics,
improvement in the language semantics
, run
-
time
debugging and event handling

[17]
.

Adobe Flex

3

t
akes
ActionScript 3.0 and focuses on providing developers
the ability build cross platform Rich Internet
Applications (RIA)

[18]
.
Currently, the best part of the
work on BlueMesh has been creating the user interface
so if ActionScript 3.0 or Flex

3

is used the
n it is
expected that most of
BlueMesh
’s

code base describing
the

behaviour of interactive elements
would

diminish.
Additionally, the focus of development will
shift from
creating user control elements to
functional
ity
.

Hence,
developers
would

concentrat
e on implementing useful
features without having to design and maintain a
consistent look
to go with it
.

9.

Conclusions

For this project, research was
undertaken

to find the best
platform

to
develop a web based

relational editor
for an
online learning resourc
e called OASIS
.
BlueMesh, t
he
solution to the problem presented to us by the project
goal
,

was created as

a generic application where circuit
editing was
one

specific use

of it
. Hence,
BlueMesh

can
be understood by developers who do not have
strong

backg
round knowledge of circuit diagrams.

To move
develop

the solution, a new scripting
language called ActionScript 2.0 had to be learnt.
Fortunately this task was not difficult due to previous
learning experience with other languages like C++,
Java,
JavaScri
pt and Python. The difference was
that

the
purpose of
ActionScript is
to create animation which is
unlike the other programming languages.

In addition,
creating a graphical user interface was a new
design
problem

that had not be
en taught by any ECE
cours
es.

The need to create a web interface for BlueMesh
further expanded
the

programming work to include
HTML, JavaScript, Python and Visual Basic Script.

BlueMesh is a

successful

multipurpose solution that
has immediate use
s. This is attributed to fact that
only
small changes of code

are required to

position BlueMesh
for a specific purpose.

Finally, the
requirements of an OASIS circuit
diagram editor have

been met and

this

concludes the
project as a success.

Acknowledgements

The author would like his project superv
isor, Mr. Colin
Coghill and his second examiner, Dr. Christopher Smaill
and his project partner, Jeffrey Yan for their
contributions towards this project.

10.

References

[1]

Koch, P.
W3C D
OM Compatibility
. Retrieved May
3, 2008, from

http://www.quirksmode.org/dom/w3c_html.html

[2]

Microsoft.
MSJVM Transition FAQ
-

Which
versions of Windows have the MSJVM?
. Retrieved
May 3, 2008, from
http://www.microsoft.com/mscorp/java/faq.mspx

[3]


Adobe Systems

Incorporated
.

Adobe Flash Player
.
Retrieved May 3, 2008, from
http://www.adobe.com/products/flashplayer/

[4]

Ionescu, A. (2008).
Some Stats About Flash Player
and Browsers
. Retrieved 14 September, 2008 from
http://www
.flexer.info/2008/08/01/some
-
stats
-
about
-
flash
-
player
-
and
-
browsers/

[5]

F
ree Software Foundation, Inc. (2007)
.

The GNU
General Public License
.

Retrieved 14 September,
2008 from
http://www.gnu.org/licenses/gpl.html

[6]

Wong, E. and Bigdeli, A.
OASIS User Manual
,
Edition 1. December 2004. The University of
Auckland, Department of Electrical and Computer
Engineering.

[7]

Kleyman, L. And Skarbovsky, E.
Java applet
a
nimator for circuit's simulation
. Retrieved May 3,
2008, from
http://www.cs.technion.ac.il/~wagner/index_files/ck
t_anim/

[8]

Sullivan, M.
Mark’s Web Circuits
. Retrieved 14
September, 2008 from
http://mark.madscientist.ws/cgi
-
bin/circuits.cgi

[9]

Doyle, J. (2008).
XMLParser


Painless XML
Translation
. Retrieved 20 July, 2008 from
ht
tp://blog.greensock.com/xmlparseras2/

[10]

Moock, C.
Your First FS Command
. Retrieved 15
September, 2008 from
http://www.moock.org/webdesign/flash/fscommand/
index.html

[11]

FlashDevelop.
Features


FlashDevelop
. Retrieved
May 3, 2008, from
http://www.flashdevelop.org/wiki
docs/index.php?tit
le=Features
.

[12]

Sun Microsystems, Inc.
Editions


VirtualBox
.

Retrieved 15 September, 2008 from
http://www.virtualbox.org/wiki/Editions

[13]

Lagendijk, T. (2006).
ActionScript Mouse Events
and Delegation
.
Retrieved 13 September, 2008
from
http://theolagendijk.wordpress.com/2006/09/19/acti
onscript
-
mouse
-
events
-
and
-
delegation/

[14]

McCauley, T. (2007).
Introduction to event
handling in ActionScript 3.0
.
Retrieved 13
September, 2008 from
http://www.adobe.com/devn
et/actionscript/articles/e
vent_handling_as3_03.html

[15]

Adobe Systems Incorporated.
What is Flash Player
security for local content?
. Retrieved 15
September, 2008 from
http://www.adobe.com/products/flashplayer/articles/
localcontent/

[16]

Adobe Systems Incorporated
.
Compatibility with
previous versions
. Retrieved May 3, 2008, from
http://livedocs.adobe.com/flex/3/html/help.html?con
tent=01_Introduction_7.html

[17]

Grossman, G. And Huang, E. (2006).
ActionScript
3.0 overview
. Retrieved 13 September, 2008 from
http://www.adobe.com/devnet/actionscript/articles/a
ctionscript3_overview.html

[18]

Adobe Systems Incoporated.
Flex 3
. Retri
eved 15
September, 2008 from
ht
tp://www.adobe.com/products/flex
/