Cis Handout 2
Cis Handout 2
Cis Handout 2
Written as a tutorial, the steps given here can have a simple event driven GUI running
on the HD64404 using vxWorks, WindML and the Altia graphics development tools.
1
Both these tools are available from Scientific Computing Limited under evaluation licenses.
See http://www.SCL.com for more details.
The Demonstration Platform
Hardware
The hardware platform referred to in this article is the Hitachi SystemH platform with
the SH4 SystemEngine and the HD64404 based ASB card.
The SystemH reference platform is an ATX form factor platform with a Rev2.2
specification 3.3V PCI bus running at 33MHz.
The ASB is a 3.3V PCI card that has an HD64404 device with 64Mb of RAM and
various line drivers connected to the HD64404 such as RS232, HCAN, SPDIF and an
AC97 device. The ASB card also has a Video In connection and a VGA output
allowing video to be streamed to a standard PC monitor. For mass storage the ASB
card has an ATAPI interface allowing connection to CD-ROM, DVD-ROM or IDE
HDD drives. Other external devices can be connected via the USB connectors or the
MOST fibre optic interface. This is just a selection of the available IP blocks on the
HD64404. For a full description of the device see the HD64404 manuals.
For processing power, the SH4 SystemEngine is using a revision R SH4 running at
191Mhz. Further expansion of the SH4 family will aim at 400MHx devices.
The SystemH platform is capable of having an article all to itself, so only a brief
introduction is given here. For more information on any of the hardware mentioned,
refer to the following web page: -
http://superh.hitachi-eu.com
Software
Software development for this article is in C for the Wind River Inc. RTOS vxWorks.
Device drivers for the HD64404 are also available from Wind River Inc. including the
WindML graphics library.2 Other RTOS's with respective device drivers are available,
again contact Hitachi Europe Ltd. for availability.
Development Tools
To aid in the creation of a GUI quickly and easily the Altia Design Editor tool was
used. The .DSN file created by the Altia Editor tool was then passed to the Altia
DeepScreen code generator. This produces the source code for the user interface you
generate.
The source code is then added as projects to a workspace in the Wind River Inc.
Tornado 2 IDE where it is compiled and downloaded to the target.
2
Please refer to the Wind River web site for information about the vxWorks RTOS or the WindML
graphics library.
Developing a GUI using Altia Editor and DeepScreen
OK, so we have covered the platform. Assuming you have read the other documents
in this set, or are already familiar with the Tornado 2 tool chain, the next step is to use
the Altia tools to generate a GUI for your first project.
If the assumption above is incorrect it is strongly advised that you familiarise yourself
with the Tornado tool chain before attempting the steps outlined in this document set.
Right so you know Tornado, now we must get familiar with the Altia tool.
So, start Altia Editor. The WindML library we shall be using in this tutorial is built to
use a monitor running at 60 Hz with a screen resolution of 640 x 480 pixels.
Step 1 - Setting up the GUI
Step 1 of getting the GUI started is to create an area for your screen. This is simple all
we need to do is draw a rectangle on screen with a width of 640 and a height of 480.
You will be presented with the screen below.
The size of the rectangle you have drawn is the blue text across the top of the drawing
area. Being as we want this to be our background we need to tell the tool what the
properties of this rectangle are. So, now we have a rectangle selected in the drawing
area, we can tell the tool to use it as our background plane.
To do this look at the top left of the screen. Here you will see an area that looks like: -
Imposed onto the image above are the options this area of the tool gives you.
In order to do what we want we need to have the rectangle selected, now go to
window 2 - Patterns. In the bottom left of the window you will see two squares. The
left square will make the object use the foreground colour with background lines
whilst the right square will make it use the background colour with foreground lines.
Click on the right hand square and the rectangle you selected will now be your
background pane. You will note the difference in colours of the squares. This shows
the currently selected colour for each of your panes. This can be changed using the
first window. If you look at the image above you will see Fg and Bg (selected
Foreground colour and selected Background colour). Right clicking on a colour in the
palette will change the background colour whilst left clicking changes the foreground
colour.
Step 2 - Drawing our Artefacts
Ok, we have a background plane to work on. We now want to put something in the
foreground that we are going to interact with. For the first part of this tutorial we will
simply draw 2 shapes. Lets make one a square and one a circle. Not for any particular
reason other than we can. The drawing tools for these shapes are on the bottom left of
your screen. If they are greyed out check that you are in edit mode not run mode.
What, haven't we covered that? Well now may be a good time. The Altia tool allows
you to check the GUI you have designed whilst in the tool. This means that as you
make additions to your GUI you can test how they look without having to build any
code, making designing and testing your GUI quick and easy. How to do this shall be
explained in detail later. Before drawing our first shape we need to change a couple of
drawing properties. Make sure your background rectangle isn't selected. If it is just
click anywhere on the drawing screen that isn't part of the rectangle. Now select the
colours that you wish to use for your square's foreground and background. Now click
on the palette tool so that you are on screen 2, Patterns. In this area you will have the
2nd square on the left selected, you need to select the square on the far left. The image
below shows you which square you need to select.
The first artefact we shall draw shall be the square. Draw a square on top of the
rectangle. Try changing the colour of the square by clicking on one of the colours in
the palette. Click with both the left and the right mouse button to see the differences.
As you right click on a colour you will see the Bg colour change but the square itself
may not. Go to the patterns window and select a fill pattern for your square. Now try
changing the colours. See the change?
Now draw a circle on the screen. Again try changing the colour. This time the circle
has already got the same properties as the square. We don't want that, so in the
patterns window select the box shown in the diagram below: -
You will now see that the circle has an outline the same as the Fg colour. You can
change these colours so that they are different to the square.
Ok, so know we have a drawing much like this: -
Step 3 - Animating our Artefacts
Now that we have two objects on screen that we want to use we can create animations
for them.
Firstly select the square and then click on the Animate button. This will bring up a
dialogue box for the square.
You need to give the animation a name so that the GUI knows what to call the
animation.
Simply type the name square into the name box and click define. This will create an
animation state for the square defined as animation state 0. Below is an example of
what you should see.
Where you see State: type into the entry box 1 and click on define. You will see that
the Low : High has changed to 0 : 1. These are the defined animation states for the
square. Using the up down arrows change through the animation states and you will
see your square changing between the 2 sets of colours you defined.
You can now close the animation editor window as we have finished defining the
animation states for our artefacts. The next thing we need to do is add some
stimulation to our GUI.
Select the circle and click on the Stimulate button. You will be presented with the
following dialogue: -
On entry stimuli.
On exit stimuli.
This dialogue box allows you to add stimuli to your animations. Click on the On
Entry stimuli. Where there is an entry box labelled as "AND THE ENABLE
CONDITION:" type circle. In the box below "THEN EXECUTE:" it also type circle.
Next click on Whole meaning the active area is the whole of the circle and then click
on define.
Now click on the On exit stimuli. This time where you see: -
Circle = 0
Change the 0 to a 1.
Also in the box below where you see circle State: 1 change the state number to 0.
Again click on Whole followed by define.
Do you remember a brief discussion earlier regarding Altia allowing you to test your
GUI from within the tool? Well now is the time to try it.
Select the Run mode diamond and move your mouse pointer over the circle in your
GUI. You should see the circle changing colours as your mouse pointer enters and
leaves the circumference of the circle.
Finally for this stage we are going to make it possible to change the animation state of
the square by clicking on the circle.
With the circle selected and the Stimulus editor window open, click on the Left
Mouse button stimuli. You should see that the box containing the description of the
stimulus type now says, "LeftDown".
This time in the "AND THE ENABLE CONDITION:" box type square and make the
condition = 1. Also type square into the "THEN EXECUTE:" box and make the state
= 0. Finally click on define.
Now change the enable condition to 0 and the state to 1. Click on define again. Go
back to Run mode now and try moving the mouse pointer over the circle and clicking
the left mouse button around the screen.
You shall see that every time you enter the circle it changes the circle colours. Also
every time you click with the left mouse button when the pointer is in the circle the
square alternates its colours.
!!!Congratulations!!!
You have created a simple GUI in Altia Editor. The next stage is to have the GUI
running, not on your workstation, but on the SystemH platform and the HD64404
under vxWorks.
Before moving on to the next stage save your GUI and have a rest. By this time I
think you have earned it.
Step 4 - Generating Code with DeepScreen
We now have a simple GUI using a mouse to stimulate events. The next step we want
to perform is to translate that GUI into source code that can be compiled for the target
system we are developing for. Normally this is the time consuming technical bit that
requires highly experienced engineers. It also is usually a very time consuming phase
of the project.
Using the DeepScreen tool from Altia in collaboration with the Altia Editor tool the
process is now simply a case of clicking on a few buttons and letting the tool do its
job.
2. You now need to select all the objects on the screen that you wish to generate
code for. The easiest way to do this is to click on the screen and drag the cursor so
that the rectangle envelops all the objects. When you have done this you will see
that all the desired objects have their selection handles visible. If you have
accidentally included an object that you did not intend to then you can de-select
the object by pressing and holding the shift key whilst clicking the unwanted
object.
3. Once you have all the objects selected that you wish to generate code for the next
step is to start the code generation process. So, click on File->Generate Code. This
will present you with the following screen: -
4. In this screen you will need to select the operating system you are going to
generate the code for. In this case you need to select vxWorks.
5. Finally select all of the options labelled as Code Gen Options EXCEPT for Full
Screen Mode.
7. When the screen says done you can click on Done. If you look at the directory
where your .DSN file was saved you will see 4 Tornado .WPJ files: altia.wpj,
altiaAPIlib.wpj, altiaAPIlibfloat.wpj and altiaWinLib.wpj.
8. The files we shall use in this demo are the altiaApilib.wpj and the altiaWinLib.wpj
files. The altiaApilib project contains the code for generating the API library used
by your GUI. The altiaWinLib project contains the source code for generating
your artefacts within your GUI.
Linking it all together: Building your application for the target.
Now that we have the projects and source code generated for our GUI we need to get
the target system configured.
At this stage it is assumed that you have performed the steps outlined in document of
this set - An Introduction and tutorial for vxWorks on the SystemH platform. Going
through this document generates a bootable and a downloadable project. We are going
to use these projects to continue this process.
Ok, so open your bootable project. In document 1, you were introduced to the
Tornado workspace window. If you again look at this window you shall see the 3
tabs: -
Files
VxWorks
Builds
Document 1 explained what these tabs were for. Here we are going to start using them
to configure our system to a more interesting user driven system. After all at the end
of document 1 we had a system that was completely self contained with no user
interaction. By the end of this document we shall have a system that allows you as a
user to see a response - much more fun!
Right so the first changes we need to make are to the VxWorks tab. The diagram
below shows this tab in all its glory. You can see from the diagram that there is a lot
that can be configured in this section. We are not going to cover all the options that
are available to you through this window. That would take a long time and large,
difficult to read document and Wind River covers the whole topic extensively in their
training courses3.
3
For information regarding the range of training courses available from Wind River please contact
your local WRS representative. You can see the available courses @ www.windriver.com/training/
Now we need to expand the WindML components dropdown to add the elements
required. Expand all the elements and add the following BOLD by double clicking
the required element and clicking OK. Don't worry about the size information for
now. The elements not in bold are either alternatives or unnecessary. In either case do
NOT add them. If the text turns red you have a conflict, simply follow the red
elements until you find the problem: -
WindML Components
-2D graphics
--2D graphics
--Link options
---select 2D layer objects
----complete 2D library
----necessary 2D library
-Audio components
--AU file support
--Wav file support
-WindML Devices
--Keyboard
--Mouse
--WindML Graphics Devices
---Standard PCI Graphics DEvice
Now add these elements following the same rules as for above: -
hardware
-buses
--PCI configuration
--PCMCIA
--VME configuration
--Virtual PCI I/O
--Virtual non-prefetch PCI memory
hardware
-memory
--BSP Memory Configuration
--cache support
--enable caches
--MMU
---write-protect program text
---write-protect vector table
---MMU Mode
----basic MMU support
----full MMU support
That is all the library components added. Now we need to add the device drivers for
the HD64404 device.
Again the same rules apply for adding the components into the configuration as
above. This time if you add them all you will definitely get a red component. Add the
components indicated below and follow the red indicators to find and correct the
problem: -
hardware
-peripherals
--AMANDA
---init libraries
---inConnect()
---buses
----PCI
When you get to the drivers stop as we are going to do something different. This time
instead of double clicking the element and selecting OK try right clicking on the
drivers element and click on 'include' drivers.
You will see a screen now that allows you to add the components you require. Select
all the drivers and click OK.
Did you get a warning? Click on OK. Do you see that "drivers" has turned red?
Expand drivers and follow the path to the red element. This will be "ssi #2" that you
need to remove. You see Tornado has information regarding the device drivers that
guarantee's that certain device drivers cannot be included with others. In this case it is
because the HD64404 device (AMANDA) uses "ssi #2" for the CD-ROM block
decoder path in the device.
If you have any red elements go through the tree correcting the problems as prompted
by Tornado.
Now that there are no errors we can proceed to getting our target built4.
Finally we can now add it all together in the build and have the target ready to work
with the GUI. This final stage requires that we make some additions to our build
process. This is not as complex as it sounds.
Remember that third tab, Builds. This is where that tab starts to get useful.
Ok, so go to the builds tab. Dropdown your bootable project and you will see that you
have a build specification underneath. Double click on this build specification and you
will get a window showing you the configuration of your build.
4
You should also got rid of the MIM device drivers from the configuration.
Go to the C/C++ compiler tab and in the window add the following: -
-IC:/usr/altia/lib/vxworks
-DVXWORKS
Now go to the MACROS tab. Select EXTRA_MODULES and add the following: -
e:\tornado\target\lib\libSH7750gnuleamanda.a
e:\tornado\target\lib\uglSH7750gnule.o
e:\Demonstration_Development\Projects\AltiaWinLib\altiaWinLib.a
e:\Demonstration_Development\Projects\AltiaApiLib\altiaAPIlib.a
Remember to change the paths to locations of your files keeping a space between each
declaration.
Finally click on Add/Set followed by Apply and then OK. It is very important that
you do click on Add/Set then Apply before OK as this makes changes to the include
macros in your makefile.
Now rebuild your bootable image by right clicking on your bootable project and
selecting "Rebuild all vxWorks".
At the command prompt type "devs" and you shall now see a list of all the devices
included in your build.
We are now ready to proceed to the final stages of getting the GUI running on the
platform. At this point it may be advisable to have a rest and perhaps go over what
you have done so far.
Adding the Altia projects into your workspace
When we used the DeepScreen code generator it created 4 projects for us. We are now
going to use 2 of these projects to get the GUI onto the platform.
The first stage of this process is to get the Altia projects into the workspace you have
created for your bootable project.
This is simply a case of right clicking on the workspace and adding a project to the
current workspace.
Once you have added these projects you will need to create new build properties for
these projects as the project properties generated by Altia are for the vxSimulator.
Do you know how to create new build properties? If not then go the following steps
and you'll see how easy it is.
If you already know, just scan the next section for the properties you need to change.
Select the radio button for Default for tool chain and select SH7750gnule.
Click on OK and you now have a new build set ready to modify for building your
archive.
Do the same for the altiaWinLib project, this time call the build altiaWinLib and again
default the build spec for the SH7750gnule tool chain.
Remember changing the build spec for your bootable project? Well you need to make
some changes to these new build specifications, but they are very simple.
Firstly so that things don't get confusing delete the build specification for the
simulator. Just right click and delete.
Open the build specification for altiaApiLib. And change the following properties: -
Click on Apply followed by OK and you are ready to build the archive, just right click
on the project select Build and away it goes.
Now open the Build specification for the altiaWinLib build.
Change the same parameters as above but this time don't build the archive straight
away as you need to perform some work in the next section to get things working
smoothly.
We need a mouse pointer so that we can interact with our GUI. The code for creating
and installing a mouse into the GUI is given in Appendix A.
You need to create a file in the altiaWinLib project and call it mouse.c.
Insert the code from Appendix A into mouse.c and save the file.
Now we need to get the mouse pointer created on the system at GUI initialisation. To
do this we need to edit one of the files in the altiaWinLib project.
TargetAltiaInitialize();
CursorInit();
AtMainLoop();
We now need to get the GUI aware of the events generated by the mouse. This
includes mouse movement as well as button clicks.
In the routine: -
altiaHandleWinEvent
When you look at the routine you will see the code to replace.
If you are having problems finding the code to replace look for the following: -
if (pEvent->header.type == EGL_EVENT_TYPE_POINTER)
In this conditional statement you will find the following commented out code: -
The code you need to replace is directly after this and handles the event handling from
the mouse.
When you have built both the archives, rebuild your bootable vxWorks project and
restart your target.
Well done!
You shall now see your GUI the screen of the display device attached to your target
platform. Move the mouse around and you shall see that this GUI behaves in exactly
the same way as the GUI you produced in the Altia Editor tool.
Now wasn't that simple. Now that you have performed the procedure once it gets
easier so why not try playing with a more complex GUI and build that for your target.
Appendix A - mouse.c
/* filename: mouse.c
*
* Author: Ian Hawkes
*
* Description:
* Creates a mouse pointer using the WindML GL for Wind River Inc.
*
* Results:
* An arrow shaped pointer shall appear in screen that moves with the mouse.
*/
#include "vxWorks.h"
#include "altia.h"
#include <os_Wrapper.h>
#include <stdio.h>
#include <ugl/ugl.h>
#include <ugl/uglfont.h>
#include <ugl/uglevent.h>
#include <ugl/uglinput.h>
#include <ugl/ugldib.h>
void cursorInit(void);
/* color of cursor */
static UGL_ARGB cursorClut[] =
{
UGL_MAKE_ARGB (0xff,0x00, 0x00, 0x00),
UGL_MAKE_ARGB (0xff,0xFF, 0xFF, 0xFF)
};
UGL_CDDB_ID pointerImage;
UGL_CDIB pointerDib;
pointerDib.width = 11;
pointerDib.stride = 11;
pointerDib.height = 19;
pointerDib.hotSpot.x = 0;
pointerDib.hotSpot.y = 0;
pointerDib.pClut = cursorClut;
pointerDib.clutSize = 2;
pointerDib.pImage = pointerData;
uglCursorOn (devId);
return;
}
Appendix B - altiaInput.c additional code
if (buttonChange == 0 && buttonState == 0)
{
/* printf(" POINTER DRAG\n"); */
event.eventType = ALTIA_MOTION_EVENT_TYPE;
uglCursorMove( ( ((AltiaDevInfo *) altiaLibGetDevInfo())->devId ),
event.x, pInputEvent->y);
}
else if (buttonChange & EGL_POINTER_BUTTON1)
{
event.button = ALTIA_LEFTMOUSE_BUTTON;
http://www.hitachi-eu.com/contact/index.jsp
http://www.scl.com/contact/index.html
http://europe.windriver.com/contact/