Getting started with EB GUIDE Studio

Once you’ve installed EB GUIDE Studio 6, follow the instruction on this page to get started with the product. You’ll create a very basic model so you can learn the product and how to work in it. Then you’ll simulate the model, using EB GUIDE.

Create a new project

  1. Start EB GUIDE Studio.
  2. Click the NEW tab.
  3. In the project center, navigate to a directory, such as C:\temp.
  4. Under Project Name, enter MyProject.
  5. Click the CREATE button in the lower-right corner.

Creating a project automatically adds a state machine. The content area displays the Main state machine.

gt-my-project-start

Add states to your model

States determine the status and behavior of a state machine. Let’s add some states to the model.

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.

  1. In the toolbox on the right, click View state and drag the 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 under the Main state machine in the navigation area on the left.
  3. In the toolbox, click Initial state and drag it to the content area.
  4. Repeat step 3 to add a Final state.

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

EB-GUIDE-GS-4-States

Add transitions to the model

Transitions connect states and trigger state changes. In this case, 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. Select the Initial state in the content area, then click the green drag point  and keep the mouse button pressed.
  2. Drag a line 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. Repeat steps 1 through 3 to connect View state 1 with View state 2. And then again 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 to View state 2.
  2. In the Properties panel, in the Trigger combo box, enter Event 1 and then click Add event “Event 1”.
AddEvent

EB GUIDE Studio adds an event called Event 1 as a transition trigger. Whenever Event 1 is fired, the transition is executed.

Follow the steps in the last procedure to add Event 2 as a trigger for the transition between View state 2 and the Final state.

EB-GUIDE-GS-2-transitions

Create a button that changes the view when touched

  1. In the content area, double-click View state 1. The content area displays a box and the toolbox changes to show relevant tools.
  2. In the toolbox, under Basic widgets, select and drag the rectangle widget to the content area.
  3. In the Properties panel on the right, next to Widget feature properties, click Add/Remove.
  4. Click Common to expand the category, and then select State touched. (Scroll down, if necessary.)
  5. Scroll down further and then click Input handling to expand that category. Then select Touch released.
  6. Click the rectangle in the content area. The Properties panel appears.
  7. In the Properties panel, under Widget feature properties, set touchPolicy to 0. This causes the button to react when touched.
  8. Under touchshortRelease, click Edit. This allows you to set what event is fired and how long after touch it is initiated.
  9. After the opening curly bracket, enter fire_delayed 500, ev:"Event 1"(), and then click Accept. Now, when someone touches the rectangle, Event 1 is fired after 500 milliseconds.
  10. In the navigation area, under Main, double-click View state 2.
  11. Using steps 2 through 9, create a button for this view state in a different location on the screen. Add Event 2 using this code fire_delayed 500, ev:"Event 2"(). Try to give the button a different look by changing the fillColor property.
  12. Click Accept.

Simulate the model you’ve created

  1. Above the navigation area, click the start button . The simulation starts.
  2. Use your mouse button to simulate touching the UI buttons. 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. Click the button in View 2. Although nothing has changed visually, the UI is now showing the Final state.
  3. Close the window to stop the simulation.
EB-GUIDE-GS-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 watch some of our tutorial videos and/or read our documentation, next. You can find them on the Resources page.