helloeeg_adobe_flash_tutorial.txt · Last modified: 2014/05/06 19:55 (external edit)

Hello EEG! Tutorial for Adobe Flash

Features

  • Create an Adobe Flash project
  • Connect to the ThinkGear Connector using Adobe ActionScript 3 in Adobe Flash
  • Retrieve and use eSense from the MindSet

Required Materials

This tutorial requires the following materials:

Recommended Reading

Prerequisite Steps

  • Install Adobe Flash CS4 Professional
  • Install the Bluetooth adapter software and hardware included with your MindSet
  • Install ThinkGear Connector
  • Download and extract as3corelib
  • Pair the MindSet with computer

Please refer to the MindSet Instruction Manual for details on Bluetooth and MindSet installation.

Create a new Flash project

  1. Open Adobe Flash
  2. In the upper right corner, select the Developer workspace
    Developer Workspace Selection
  3. Add as3corelib to the library path. as3corelib will be used for JSON encoding and decoding.
    1. Edit » Preferences (or Flash » Preferences on Mac) and select ActionScript catagory
    2. Click on ActionScript 3.0 Settings…
    3. Click on Browse To Path button in the Library path section
    4. Browse to the folder that contains the as3corelib.swc file
  4. Create a new Flash project in the Project inspector
    Create a new project
    1. Type in the project name “HelloEEG”
    2. Select a folder to save your project
    3. Select ActionScript 3.0 as the ActionScript version and click Create Project
  5. Create a Flash file in the project panel
    Create a new file
    1. Select Flash File as the file type
    2. Use “Display.fla” as the file name
    3. Check Open file after creation and click Create File
    4. In the Project inspector, right click on “Display.fla” and choose Make Default Document
  6. Create a Class file in the project panel
    Create a new class
    1. Type in “DisplayWindow” as the class name and click on Create Class
    2. Double-click on “Display.fla” file in the Project inspector
    3. In the Properties inspector, type in “DisplayWindow” in the Class attribute box

Connecting to ThinkGear Connector

Double-click on the DisplayWindow.as file in the Project panel. The editor window will display code that is automatically created by Flash.

package  {
  public class DisplayWindow {
		
  // Constants:
  // Public Properties:
  // Private Properties:
	
  // Initialization:
  public function DisplayWindow() { 
    }
	
  // Public Methods:
  // Protected Methods:
  }	
}

Add the following packages to the DisplayWindow class

package  {
  import flash.display.*;
  import flash.events.*;                      //for event handling
  import flash.net.Socket;                    //Sockets
  import com.adobe.serialization.json.*   ;   //as3corelib JSON support

  public class DisplayWindow {

Since the DisplayWindow class is linked to a movie clip symbol, it will need to inherit from the Sprite class.

  public class DisplayWindow extends Sprite {

Declare the following variables to store information coming from the MindSet

  // Public Properties:
  public var attention:uint;
  public var meditation:uint;
  public var poorSignal:uint;

attention will contain the user's measured attention level, measured on the scale from 1 to 100 where 1 is the lowest and 100 is the highest level of attention. meditation will contain the user's measured mediation level on the same scale as attention. poorSignal will contain the signal strength on a scale of 0 to 200. A poorSignal value of 200 indicates that the MindSet is off the user's head and a poorSignal value of 0 indicated the MindSet is getting good signal. Now create a socket object.

  // Private Properties:
  private var thinkGearSocket : Socket;

The thinkGearSocket object will connect to the ThinkGear Connector. Your code should now look like this:

package  {
  import flash.display.*;
  import flash.events.*;
  import flash.net.Socket;
  import com.adobe.serialization.json.JSON;
	
  public class DisplayWindow extends Sprite {
		
    // Constants:
    // Public Properties:
    public var attention:uint;
    public var meditation:uint;
    public var poorSignal:uint;
    // Private Properties:
    private var thinkGearSocket : Socket;

    // Initialization:
    public function DisplayWindow() { 
      }
    // Public Methods:
    // Protected Methods:
  }	
}

Save DisplayWindow.as and double-click on Display.fla. Now a blank Stage is displayed.

Blank Stage

Use the Text Tool to create a text field in the middle of the stage. Type in “Disconnected”. You may set font and style if you so choose.

Add a text field

In the Properties inspector, select Dynamic Text and enter in “label1” in the “<Instance name>” field.

Text Field Instance

Save Display.fla and double-click on DisplayWindow.as. In the DisplayWindow() initialization method, initialize the thinkGearSocket and add an event listener.

    public function DisplayWindow() {          
      thinkGearSocket = new Socket();		
      thinkGearSocket.addEventListener(ProgressEvent.SOCKET_DATA, dataHandler);		
    }

thinkGearSocket handles all the communication between your flash program and the ThinkGear Connector. By adding an event listener, thinkGearSocket does not need to be polled constantly for new data. Next, open the socket connection by calling the connect function.

      thinkGearSocket.connect("127.0.0.1", 13854);

By default, the ThinkGear Connector sends data in a binary packet format. To change the output to JSON format, add the following code.

      var configuration : Object = new Object();
      configuration["enableRawOutput"] = false;
      configuration["format"] = "Json";	  
      thinkGearSocket.writeUTFBytes(JSON.encode(configuration));

Your DisplayWindow() function should now look like this:

    public function DisplayWindow() {
         
      thinkGearSocket = new Socket();		
      thinkGearSocket.addEventListener(ProgressEvent.SOCKET_DATA, dataHandler);
      thinkGearSocket.connect("127.0.0.1", 13854);
		  
      var configuration : Object = new Object();
      configuration["enableRawOutput"] = false;
      configuration["format"] = "Json";	  
      thinkGearSocket.writeUTFBytes(JSON.encode(configuration));
    }

Note that the event listener added has dataHanlder as a listener function. The event listener will call dataHandler whenever the socket receives data. This function must accept an Event object as its only parameter and must return nothing. Add this function under the DisplayWindow() function.

    public function DisplayWindow() {
    ...
    }

    // Protected Methods:
    private function dataHandler(e : ProgressEvent){
    }

When the application is connected to the ThinkGear Connector, this function will retrieve and handle all data from the MindSet. The attention, meditation, and poorSignal variables will be constantly updated through this function.

First, read the packet into memory.

      var packetString : String = thinkGearSocket.readUTFBytes(thinkGearSocket.bytesAvailable);
      thinkGearSocket.flush();

The ThinkGear Connector will send JSON objects delimited by a carriage return character (\r). The packet string can be split up by using the split() function.

      var packets : Array = packetString.split(/\r/);

Now iterate through the packets array

      var data:Object;                                
      for each (var packet:String in packets){        
        if(packet != "") {                            
          try {	  
            data = JSON.decode(packet);
          } catch (jError:JSONParseError) {
            //do error handling here
          }     
	  if(data["poorSignalLevel"] != null) {       
	    poorSignal = data["poorSignalLevel"];     
	    if(poorSignal == 0) {
              attention = data["eSense"]["attention"];
	      meditation = data["eSense"]["meditation"];			
	      trace(attention);
            }
            else {
              if(poorSignal == 200) {
                attention = 0;
                meditation = 0;
              }
            }
	  }
        }
        data = null;
      }

With valid data, update the text label with eSense data

        label1.text = "Attention: " + attention.toString() + "\nMeditation: " + meditation.toString() + "\nPoor Signal: " + poorSignal.toString();

Your dataHandler function should now look like this

    private function dataHandler(e : ProgressEvent){

      var packetString : String = thinkGearSocket.readUTFBytes(thinkGearSocket.bytesAvailable);
      thinkGearSocket.flush();

      var packets : Array = packetString.split(/\r/);
      var data:Object;                                    //temporary data
      for each (var packet:String in packets){            //iterate through each element
        if(packet != "") {                                //sometimes the line is blank so skip the line
          try {	  
            data = JSON.decode(packet);
//decode the data to an array       
          } catch (jError:JSONParseError) {
            //do error handling here
          }                     
	  if(data["poorSignalLevel"] != null) {           //checking to see if the ''poorSignalLevel' key exists
	    poorSignal = data["poorSignalLevel"];         
	    if(poorSignal == 0) {
              attention = data["eSense"]["attention"];    //assigning data to variables
	      meditation = data["eSense"]["meditation"];						
	      trace(attention);			          //output attention data to debug
            }
            else {
              if(poorSignal == 200) {
                attention = 0;
                meditation = 0;
              }
            }
	  }
        }
        data = null;
	label1.text = "Attention: " + attention.toString() + "\nMeditation: " + meditation.toString()
			              + "\nPoor Signal: " + poorSignal.toString();
      } /*for each*/
    } /*function dataHandler*/

Save DisplayWindow.as. If you have the ThinkGear Connector running, click the Test Project button in the Project inspector and test out your program. If your application compiles correctly and is connected to a MindSet, you should see something like this:

Appendix

Running a local SWF file

In order to run the HelloEEG SWF file locally, you must change Adobe Flash's Global Security Settings. Open the Global Security Settings panel here. Click on the Edit locations… drop-down box and select Add location… Choose Browse for folder… and select your HelloEEG project folder.