EB GUIDE 6 Tutorial – Creating your first model

EB GUIDE 6 Tutorial – Creating your first model


Hello and welcome to another EB GUIDE video tutorial.
This video tutorial shows you
how to create your first EB GUIDE model
using EB GUIDE Studio 6.
To reproduce the tutorial you need:
A standard Windows PC with an installed
EB GUIDE Studio in version 6 or later and
resources for the “Creating a first EB GUIDE model”
video tutorial from the EB GUIDE 6 microsite.
Please check the link in the text description below.
In this tutorial a graphical user interface is modeled.
The interface contains two screens.
The first screen has a button, which reacts on user input.
By touching the button, the appearance changes.
After releasing, the button disappears and
a text is displayed instead
Start EB GUIDE Studio 6.
In the “Navigation area” click the “New” tab.
Enter a project name and select a location.
In this tutorial the folder “Elektrobit”
and the name “Hello World” is used.
Click the “Create” button.
Now you add an image file to the EB GUIDE Studio project folder.
Any additional resources like fonts and images
are located in this folder.
Later in the tutorial the image is used for the graphical
representation of the button.
Download the file “EB_button.png” from our EB GUIDE 6 microsite,
located in the “Learn / Resources” section.
Start the Windows Explorer.
Navigate to the folder where
you saved the image file “EB_Button.png”.
Copy the image file.
Navigate to the previously created EB GUIDE Studio project folder.
Paste the image file to the project subfolder “resources”.
Return to EB GUIDE Studio.
In EB GUIDE Studio views represent screens.
A view is a container displaying a set of graphical elements.
These elements are called widgets.
Let’s first create a view.
Drag a “View state” from the “Toolbox” to
the “Content area”.
Along with the view state, a view is added to the EB GUIDE model.
To activate “View state 1” add an initial state.
Drag an “Initial state” from the “Toolbox” to the “Content area”.
Select the “Initial state”.
Select the green dot and move your mouse to “View state 1”.
Once “View state 1” changes its border color to green
release your mouse button.
In the following step you open a view
to add a button which uses an image
as its graphical representation.
To add an image widget to a view, double-click “View state 1”.
An image widget places a picture into the view.
Drag an image widget from the “Toolbox” to the view.
In the “Properties panel” select “EB_button.png”
from the image drop-down list box.
Currently the image is bigger than the image widget.
To adjust the size of the image, enter “400”
in both “width” and “height” text box.
Finally position the image widget in the middle of the view.
To define the x-coordinate of the widget
enter “200” in the “X” text box.
To define the y-coordinate of the widget
enter “40” in the “Y” text box.
The next step is to add touch support.
To indicate a touch input, add an event.
In the navigation area point to “Events”.
Click the “+” button.
In the “Content area” select the image widget.
In the “Properties panel” add the
following widget features properties:
In “Input handling” check the widget features
“Touch pressed” and
“Touch released”
In “Transformation” check the widget feature “Pivot”.
Click to close the widget feature editor.
To use the middle of the button as pivot point for scaling,
enter the value “200,00”
for the properties “pivotX” and “pivotY”.
To scale the button to 80% of the
original size when it is touched, edit
the property “touchPressed”.
Insert the two lines:
“v:this.scalingX=80.0”
“v:this.scalingY=80.0”
Click “Accept”.
To scale the button to 100% of the
original size when it is released, edit
the property “touchShortReleased”.
Insert:
“v:this.scalingX=100.0”
“v:this.scalingY=100.0”
“fire_delayed 300, ev:”Event 1″()”
Don’t forget the parenthesis.
The last line fires the event called “Event 1”.
after waiting 300 milliseconds.
Click “Accept”.
The next step shows you how to
use the previously created “Event 1”
to switch from one view to another.
In the navigation area double-click the “Main” state machine.
Drag a “View state” from the “Toolbox”
to the “Content area”.
Select “View state 1” and create a transition to “View state 2”.
In the properties panel select “Event 1”
from the “Trigger” drop-down list box.
Remember, if the button in
the first view is released it throws the “Event 1”.
Now the event triggers a state change
from “View state 1” to “View state 2”.
And of course, the second state
should have a totally different graphical representation.
In the content area double-click “View state 2”.
To add a gray background color,
drag a “Rectangle” widget
from the “Toolbox” to the “Content area”.
In the “Properties panel” adjust the properties:
“width” is “800”
“height” is “480 “
“x” and “y” are both “0”.
To customize the color, select “fillColor” property.
Click “More Colors”.
In the dialog select “Custom” and “RGB”.
Enter the value “108” for red, green and blue.
Confirm with “OK”.
To add a text, add a new “Label” widget.
Adjust “height” to be “225”,
“width” to be “290”,
“x”=”270” and “y”=”134”.
Customize the “textColor” property.
The “RGB” values are “0”, “235” and “0”.
Change the font size to “50”.
Click on “Add/remove Widget feature properties”,
open the “Common” widget feature group
and check the “Multi Line” properties.
And finally for “text” property insert
“HellonEB GUIDE6nworld!”
The backslash followed by an end character
indicates a line break.
Change both “horizontalAlign”
and “verticalAlign” to “centered”.
To execute the EB GUIDE model, click on
the “Start simulation” button.
The EB GUIDE model starts.
If you press the button, the size of the button
shrinks to 80% of its original size.
If you release the button, the size of the
button scales back to 100%.
Finally after 300 milliseconds
the second screen with the text appears.
Thank you for watching !

Leave a Reply

Your email address will not be published. Required fields are marked *