• Instructions
  • Devices
  • Reg's
  • Var's

I wrote System Designer JS during my research into helping school and university learners who were new to microcontroller based embedded systems

It helps students design, build and run code

Once the learner understands the nature of an embedded microcontroller system, this tool should be replaced by more commercial system tools. My tool has a single purpose - to help learners, so it has a reduced set of features

The Block Diagram Editor

Drag and drop I/O devices onto the block diagram

Link them to the microcontroller

As you do the program code will automatically be generated to match the I/O device and its connection to the microcontroller pins

  The Code Window

Code can be run or stepped through line by line

The slider changes the speed of the run

T changes Theme and F changes Font size

You can copy code from here into AVR Studio or Arduino Editor and program your device

  The State Machine Editor

I taught school students for many years, and found they struggled to move beyond simple code - I designed this tool to help them - they found it helped them a lot

Click and drag to draw new states

Right click to add actions to states

Click and drag inside a state to draw transistions between states

Add conditions inside [] to transistions by double clicking to edit or right click e.g. [IS_SW_LOW]

Add actions to transitions in the form [conditon]/action e.g. [IS_SW_LOW]/CLR_LED; _delay_ms(DEL);

There is no undo so think (twice) before deleting something

Dr. Bill Collis, University of Auckland, New Zealand

  • Block Diagram
  • State Machine
  • about System Designer JS
PLEASE WAIT FOR EVERYTHING TO LOAD - Note you need to be using Firefox or Chrome to run program code
This page requires a browser that supports HTML 5 Canvas element.
State Machine designer
This page requires a browser that supports HTML 5 Canvas element.

 

This program was designed to help learners who are new to microcontroller based embedded systems

The Block Diagram Editor

Drag and drop I/O devices onto the block diagram

Link them to the microcontroller

As you do the program code will automatically be generated to match the I/O device and its connection to the microcontroller pins

  The Code Window

Code can be run or stepped through line by line

The slider changes the speed of the run

T changes Theme and F changes Font size

  The State Machine Editor

Click and drag to draw new states

Right click to add actions to states

Click and drag inside a state to draw transistions between states

Add conditions inside [] to the transisition by double clciking to edit or right click e.g. [IS_SW_LOW]

Add actions to transitions in the form [conditon]/action e.g. [IS_SW_LOW]/CLR_LED; _delay_ms(DEL);

There is no undo so be careful

You cannot directly open or save files to your local file system (this is blocked in browsers)

However, when you press export, copy the text data from the textarea below into a text file, and save that

and, when you press import you can copy text data into the textarea below and import it

  • Code
codeditor

0