Getting started with EB GUIDE Studio

Once you’ve installed EB GUIDE Studio 6, follow the instruction on this page to get started. 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 Studio.

Create a new project

  1. Start EB GUIDE Studio.
  2. Click the NEW tab.
  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 also 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 and then click the green drag point and drag it to View state 2.
  5. 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 panel.
  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 state 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. In the Properties component, under Widget feature properties, set the touchPolicy to Press then react (=0). This causes the button to react when touched.
  7. Next to touchShortReleased, click Edit. This allows you to set which event is fired and how long after touch it is initiated.
  8. Enter the following script:
    function (v:touchId::int, v:x::int, v:y::int, v:fingerId::int)
    fire_delayed 500, ev:Event 1()
  9. Click Accept. Now, when the rectangle is touched, Event 1 is fired after 500 milliseconds.
  10. In the navigation component, under View state 2 double-click View 2.
  11. Repeat steps 2 through 6 to create another button for this view state and place it in a different location.
  12. Next to touchShortReleased, click Edit and enter the following script:
    function (v:touchId::int, v:x::int, v:y::int, v:fingerId::int)
    fire_delayed 500, ev:Event 2()
  13. Click Accept.
  14. Select a different fill color for the button in the fillColor property.

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 watch some of our tutorial videos and to read the user documentation. You can find them on the Resources page.