Getting started with EB GUIDE Studio

Once you’ve installed EB GUIDE Studio 6, follow this tutorial to get started. This tutorial will show you how to create a simple model and you will find out about the basic functionality of EB GUIDE Studio. In the end of the tutorial you will see a simulation of the model that you created.


Create a new project

  1. Start EB GUIDE Studio.
  2. Click NEW.
  3. To set the location click BROWSE and navigate to a directory, such as C:\temp.
  4. Enter the Project name MyProject.
  5. Click CREATE.

The project editor opens and displays an empty project. The Main state machine is added by default and displayed in the content area.


Add states to your model

States determine the status and behavior of a state machine. The initial state defines the starting point of the state machine. View states display a view, by default. The final state terminates the state machine.

Let’s add some states to the model.

  1. Drag a View state from the toolbox to the content area. View state 1 appears in the content area.
  2. Repeat step 1.
    You see two view states in the content area. They are also listed in the navigation component on the left under the Main state machine.
  3. In the toolbox, click Initial state and drag it to the content area.
  4. Drag a Final state into the content area.

The Initial state, View state 1, View state 2, and Final state are displayed in the content area and in the navigation component under the Main state machine.


Add transitions to the model

Transitions connect states and trigger state changes. In this example, we’re going to change from the Initial state to View state 1, from there to View state 2, and then to the Final state.

  1. In the content area select the Initial state, click the green drag point and keep the mouse button pressed.
  2. Drag the green point to the target state View state 1.
  3. When the target state is highlighted green, release the mouse button. A transition is created and appears as a green arrow.
  4. Click View state 1 . The state border is highlighted green.
  5. Hover over the highlighted state border. A green drag point is displayed.
  6. Click the green drag point and drag it to View state 2.
  7. Repeat the steps to connect View state 2 with the Final state.


Add an event-triggered transition

  1. In the content area, click the transition between View state 1 and View state 2.
  2. Go to the Properties component.
  3. In the Trigger combo box, enter Event 1 and click Add event "Event 1".

    EB GUIDE Studio adds an event called Event 1 as a transition trigger. Whenever Event 1 is fired, the transition is executed.
  4. Repeat the steps to add Event 2 as a trigger for the transition between View state 2 and the Final state.


Create a button that changes the view when touched

  1. In the content area, double-click View 1. The content area displays the corresponding view and the toolbox changes to show relevant tools.
  2. In the toolbox, under Basic widgets, select and drag a rectangle to the content area.
  3. In the Properties component, next to Widget feature properties, click Add/Remove.
  4. Click Common to expand the category, and then select Touched.
  5. Scroll down and click Input handling to expand that category. Then select Touch released and click Accept.
  6. Next to touchShortReleased, click . This allows you to set which event is fired and how long after touch it is initiated.
  7. Enter the following script:
    function(v:touchId::int, v:x::int, v:y::int, v:fingerId::int)
    fire_delayed 500, ev:"Event 1"()
  8. Click Accept. Now, when Rectangle 1 is touched, Event 1 is fired after 500 milliseconds.
  9. In the Navigation component, under View state 2 double-click View 2.
  10. Repeat steps 2 through 6 to create another button for this view state and place it in a different location.
  11. Select Rectangle 2.
  12. In the Properties component, set the fillColor to red.
  13. Next to touchShortReleased, click .
  14. Enter the following script:
    function(v:touchId::int, v:x::int, v:y::int, v:fingerId::int)
    fire_delayed 500, ev:"Event 2"()
  15. Click Accept.


Simulate the model you’ve created

  1. In the command area, click the start button . The simulation starts and the EB GUIDE Monitor opens.
  2. Click the rectangle that appears. The UI changes to show View 2. Notice that the location of the button changes. This is because Event 1 is fired.
  3. Click the button in View 2. Although nothing has changed visually, the simulation now shows the Final state.
  4. Close the window to stop the simulation.


Where to go from here

Now you’ve created a basic model and gotten a sense of how EB GUIDE Studio works. We recommend you to watch some of the tutorial videos and to read the user documentation.