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:

Chapters

  1. Overview
  2. Download
  3. What is LabScript?
  4. Creating a GUI
  5. Example 1: Simple Read GUI
  6. Example 2: Simple Write GUI
  7. Example 3: Using Function Block
  8. Example 4: Using Multiple Reads and Writes
  9. Example 5: Complex GUI
  10. Contact us
  11. 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

    You can Download the latest version from here:

    2.1 Ubuntu Installation

    To install LabScript in Ubunto please follow these steps:
    • 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


    For windows users, please download: LabScript-2.0-Setup.exe from


    After your download is finnished, start the installation, the following window will come up

    Press OK , the following window will come up

    Press Yes , the following window will come up

    Press Next , the following window will come up

    Press Next , the following window will come up

    Press Next , the following window will come up

    Press Next , the following window will come up

    Checkmark as shown , LabScript will start as shown below

    Press Launch , a web-browser will open and you are ready to start. Please Note that LabScript Runs ONLY on Google Chrome 14+

    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

    Notice that the main components of the web page:
    • 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

    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



    to choose a control, drag-and-drop to the workspace. once you drag-and-drop a control to the workspace, you can see a control appear in the workspace as shown below


    notice in this screenshot that you dragged a control of type 'numeric'. the numeric is called 'numeric0'. if you click on the Code button at the top right corner as shown below


    After you click the 'Code' button, you are moved to Code Mode where you see you numeric block 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:

    The componennts in the Code Mode are:
    • 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



    To move a block, right-click on the block, the mouse pointer become a cross. Move the move pointer to the desired location of your block then click and your block will move automatically 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

    To create your GUI there are 4 steps: first you need to drag-n-drop the controls and monitors you need

    • 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
    This sounds a bit abstract at this point, so if you are unpatient, then jump to the example directly. If you are patient then read through this section

    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:

$ 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.

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