Getting Started with LabScript

Getting Started with LabScript: Your Web-Based GUI Builder and Interface tool

This guide covers getting up and running with LabScript. After reading it, you should be familiar with:

Installing LabScript in you PC/Server
Build a GUI with LabScript from within your Web Browser (Only Google Chrome 14+ is supported)
Use your web-based GUI to Interface your Microcontroller, FPGA ,Lab Instrument or any other device
The basic principles of LabScript Design Flow
How to quickly generate an application to control your Device using Serial, I2C or TCP

Chapters

Overview
Download
- Ubuntu Installation
- Windows Installation
What is LabScript?
Creating a GUI
Example 1: Simple Read GUI
Example 2: Simple Write GUI
Example 3: Using Function Block
Example 4: Using Multiple Reads and Writes
Example 5: Complex GUI
Contact us

1 Overview

There are many software tools that allow a device to communicate with PC. The communication can be done through serial, ethernet, usb, etc ... Most available software tools are command based terminals like tera term, putty, hyperterminal....etc. All these tools will allow the user to communicate with their device by sending ascii commands to the device and receiving ascii response from the device. However, these tools are not your friend if you are trying some of the following tasks:

What if you want to repetitively send commands to your device? do you have to manually type these commands everytime? kinda tedious
What if you want to send many different commands to your device? type manually every time, copy and paste? kinda inneficient
What if you want to send some special commands by configuring each bit? do you need to figure out the binary to decimal conversion everytime? kinda difficult
What if you want if you want to read a specific bit value from the response of your device? decimal to binary conversion...sounds fun
Most Programmer will use Processing, C# or VB to create a GUI but it takes time sometimes a lot of time. what we are proposing is a drag-n-drop method where you select the blocks you want says buttons, LEDs, string, etc from the Browser....

2 Download

2.1 Ubuntu Installation

Download LabScript-2.0.tar.gz from this link
Extract file
Open Readme file and follow the instructions
If everything goes well, you should see a LabScript icon on your desktop as shown below
Double-Click on the icon to Launch LabScript or from terminal type: wine "C:\Program Files\LabScript\LabScriptDriver_v2.exe" as shown below

2.2 Windows Installation

windows

Yes

Next

shown

Launch

ONLY

3 What is LabScript?

LabScript is an automation tool that allows the user to build a web-based GUI to communicate with their device. LabScript supports Serial and TCP/IP communication

LabScript has two components: Driver and Web Interface. the Driver contains all low-level driver needed to communicate with your device. The Web Interface uses HTML5 features such as WebSockets, SVG and canvas to let the user design the GUI

The user needs to download the driver and install in the PC that is connected to their device. once the driver is installed, you run it and a small GUI will appear and the screen. To get started, press 'launch' and a web browser will open. Please Note: that LabScript works only with Google Chrome 14+ once the web application is up, press 'Create New Testcase' as shown below

After you press 'Create New Testcase', a new web page open up as shown below

On the Left side: Drop down Menu that contains controls, Monitors and cosmetics. This the drop down menu where you will drag-and-drop the controls and monitors
On Top left side: Toolbar with a number of button that we can cover later in this tutorial
On Top right side: Modes: There are 3 modes Edit mode, View Mode and Code Mode. the Edit Mode is where you choose your controls and monitors. the Code mode is where you do the wiring of the different controls, monitors and other blocks. the view mode allow you to see how would your final GUI looks like
the central space represent the workspace where you can drag-and-drop you controls and monitors

2.1 Drop Down Meunu

To see the components of the drop down menu, you need to click on the 'Controls' , 'Monitors' and 'Cosmetics'. after the click you can all the controls as shown below

You switch between the Code mode, Edit mode and View mode by pressing the red button on the top right corner
Each control or monitor in the Edit Mode has a corresponding block in the Code Mode
You can drag-n-drop any control or monitor into the workspace

2.2 The Components of LabScript

The design flow in LabScript is based on the simple process that you have a device and that you want to send/receive information from your device. To Send information to your device, you need to choose a control that contains the value or text you want to send. The control can be of type 'numeric', 'string' etc .... depending on your application In order to receive information from your device you need a monitor. The monitor would display the data received from your device. In the Programming mode there a more components that allow you to add more features to your application as shown in figure below:

Communication
- Send Block: Drag-n-drop this block is you want to send data to your device and wait for the device's response
- Send Block: Drag-n-drop this block is you want to send data to your device without waiting for device response
- Login Block: this is an advanced block that you need if your device requires a login and password
Logic
- Function Block: Drag-n-drop this block is you want to format the data to be send to your device and process the data received from the device This block allow you also to connect more that one control together and process the received data

After you drag-n-drop the block, you can rename it, resize it, move it or delete it. To change the attributes of the block, double click on the block. A configuration menu will popup. As shown below

2.3 Connection the Components

The design flow with LabScript is intuitive. You have the following steps:

Step 1: drag-n-drop the controls, then configure them
Step 2: drag-n-drop the monitors, then configure them
Step 3: Swtich to Code Mode
Step 4: drag-n-drop you function block one or more, then configure them
Step 3: drag-n-drop a send block or a write block
Step 5: Once all the blocks are selected, then you can wire them up. The wiring is done by clicking on the port of a source block then click on a sink block then a wire will appear as shown below

3 Creating GUI

Step 1: drag-n-drop the controls, monitors, Function and communication blocks
Step 2: Wire the blocks
Step 3: Configure the blocks
Step 4: Execute your GUI, meaning that your application will be ready to run

3.1 Drag-and-Drop

In this step you drag-n-drop your blocks from the horizontal drop-down menu in both the Edit mode and the Code Mode

3.2 Wiring

In This step you wire you blocks by clicking on the ports of the source and sink

$ You can delete wires by clicking then red square at the center of the wire then press 'Delete' key on your keyboard

3.3 Block Configuration

In this step, you double click each block for configuring the attributes

4.4 Execution

After your done with the steps above and you are happy with the way the GUI looks, you need to do two things:

Press on 'Network' and select the communication mode: TCP or Serial and complete the configuration
Once the Network Configuration is done, press 'SAVE' to keep your work then press 'Execute' to get your application

$ Note: if you do not Save your work and you refresh the browser, you will lose your work. please save it!!!

5 Example 1: Simple Read GUI

Let's start with a simple example. Let assume you have you Arduino, AVR, PIC , TI , or another board connected to your PC Let's say you want to send a command to you device and read the reply back. Let's assume you want to send a string

Then let's go step by step on how to create a GUI to do that.

Go to where you have downloaded your LabScript and Double Click on 'LabScript' to start it
Press 'Launch', a Browser will open and you should see this on the URL: http://sguiversion1.appspot.com/WelcomeWindow
Press 'Create New Testcase', you should see this on the URL: http://sguiversion1.appspot.com/ProgrammingWindow
We said that we want to send a string to our device and receive the reply back
on the left side, click on 'Controls', you will see a number of blocks, drag and drop the String to the Workspace (i.e the white space)

now you have your string named 'string0', I will show later how to change the name if you want to
Now, on the left side, click on 'Monitors' and drag and drop the Display to the workspace as shown below

Now you will see a display called 'display1' along side the 'string0'
This step is optional, now we want to move the 'display1' to align horizontally. Right click on the 'display1' then the cursor will become a cross + move the cross to be next to the 'string0' and aligned with it as shown below
Let's now create the read operation, to do that click the red button Code on the top right corner as shown below
Now you should see two blocks as shown here
Click on 'Communication' then drag and drop 'Send' block to the green workspace as shown below

after you drag and drop, you should see a new block show up
At this point, you have all the blocks that you need.
Let's line them up, right click each block and move them around until you get this line up
Now we will do the wiring, First thing, click on the port (i.e.the green circle) on the string0 block. once you click on it, its color change to red as shown below

now click on the left port (i.e. the green circle) of the 'Send2' block. A wire will appear as shown below

now click on the right port of the 'Send2' block, its color will turn red as shown below

now click on the port of the 'display1' block, a wire will appear as shown below
At this point, you are done with wiring. Press 'Save' button on the toolbar. You will be asked to Choose a Testcase name, type: 'SimpleRead' and press 'OK' a number of alerts will show up, just press 'ok' and don't worry about them for now
At this point, you testcase is permanently saved. even if you refresh the browser, the data will persist
Click 'Network' button, and select the communication type

if your device is connected through ethernet then press 'TCP' and you will get this menu
then put it the IP and Port but leave the timeout as the default then press 'Apply' when done
if your device is connected through serial then press 'Serial' then press 'Set' and you will get this menu

then press 'Apply' when done
Click on Edit red button at the top right corner
You will notice that a button with name 'Send2' appeared on the Edit Mode as shown below

This is the button you need to click later to send your data to your device
Click on 'Execute' on the top left corner as shown in image above
After you Click 'Execute', you will directed to a new URL: http://sguiversion1.appspot.com/LabScript as shown below
If everything is Ok, you should see a green light next to 'Appengine Status' LED as shown in image above
Click on the Connect button at the top left corner of the toolbar to connect to your device
Now you should see a green light next to the 'Connection Status' LED as shown in image below
At this Point, you are can communicate with your device. type anything in the string then click outside to update the string and press send to send you data to the device as shown below
This first simple tutorial is done! Remember this is just a trivial example...LabScript allows you to do way more than this!

6 Example 2: Simple Write GUI

7 Example 3: Using Function Block

8 Example 4: Using Multiple Reads

9 Example 5: Complex GUI

10 Contact us

E-mail
Support