cis_handout_2

8/7/2019 cis_handout_2

http://slidepdf.com/reader/full/cishandout2 1/24

To all our customers

Information regarding change of names mentionedwithin this document, to Renesas Technology Corp.

On April 1st 2003 the following semiconductor operations were transferred toRenesas Technology Corporation: operations covering microcomputer, logic,analog and discrete devices, and memory chips other than DRAMs (flashmemory, SRAMs etc.).

Accordingly, although Hitachi, Hitachi, Ltd., Hitachi Semiconductors, and other Hitachi brand names are mentioned in the document, these names have allbeen changed to Renesas Technology Corporation.Except for our corporate trademark, logo and corporate statement, nochanges whatsoever have been made to the contents of the document, andthese changes do not constitute any alteration to the contents of thedocument itself.Thank you for your understanding.

Renesas Technology Home Page: www.renesas.com

Renesas Technology Corp.April 1, 2003

Renesas Technology Corp.



Hitachi Micro Systems Europe Ltd.Embedded OS and Middleware Group

Car Information Systems ProjectIan Hawkes

Senior Design EngineerHMSE Ltd.

An introduction and tutorial for developing a GUI for the HD64404

This is document 2 in a set of 3. The other documents are listed below: -

Document 1: An introduction and tutorial for vxWorks on the SystemH platform.

Document 3: CIS Project - Operating Systems: vxWorks User Boot Procedure.



Introduction

Developing a GUI for an embedded system can create risks to a project for

companies. Often a company will not have the in house experience to create a GUI

using graphics devices in embedded applications. The development of a GUI and the

engineering behind getting the display to screen is usually split between two sets of people, artistic graphics designers for the MMI and electronics/software engineers for

implementation.

With limited resources and a dramatic downturn in the semiconductor industry

companies are concentrating on generating the in house skills in preference to costly

contractors and consultancies. Development times are forever decreasing; as a

consequence the importance of CASE tools is increasing. The CIS project at HMSE

has been investigating new technologies in the engineering process. The aim is to help

their customers decrease the turn around times along with NRE’s so that they are able

to use Hitachi devices in their products in a much more timely and cost effective

manner.

In order to demonstrate how this can be applied to the HD64404 device, HMSE Ltd.

have developed a GUI based demonstration application to run under the vxWorks

RTOS. As an outcome of the work performed this article was written to highlight how

the use of the correct tools can relieve some of the difficulties involved in producing

an event based GUI for the HD64404 device.

The GUI makes use of a mouse and keyboard to enable the user to make use of the IP

modules Hitachi has designed into the HD64404 device.

This article shows just how easy HMSE have found it can be to develop a GUI driven

embedded system given the right tools.

In the case of this project, the right tool has been found to be Altia’s Design Editor in

collaboration with the DeepScreen code generator.

1

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.

1Both 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

Or contact Hitachi Europe Ltd. (Details given in Appendix A).

SoftwareSoftware 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 WindMLgraphics library.

http://superh.hitachi-eu.com/

http://superh.hitachi-eu.com/



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.

Using Altia Editor to develop a simple GUI

This tutorial is NOT going to have you developing a GUI along the lines of Microsoft

Windows. That would take a whole article and project to itself. The GUI we shall

develop will be very simple but allow you to use the mouse to perform actions on

screen. It is also not an intention of this tutorial to teach you how to use the Altia tool.

There are going to be certain steps that you need to take to produce the GUI. Each onewill be described to you in detail so that you know exactly what you need to do.

However, if you wish to produce a more complex GUI it is advisable that you contact

your regional Altia representative.

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 lineswhilst the right square will make it use the background colour with foreground lines.

1. Palette: Allows you to change the foreground and backgrouncolours of the selected object.

2. Patterns: Allows you to choose from a selection of fill patterns.3. Brushes: Allows you to choose from a selection of line styles.4. Fonts: Allows you to choose from a selection of fonts (expandable).



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 foregroundcolour.



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.

Now you can draw your first artefact on screen.

The first artefact we shall draw shall be the square. Draw a square on top of therectangle. 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.

This is the tool selection youneed for the first object you

are going to create to interactwith in your GUI.

This is the tool selection youneed for the second objectyou are going to create tointeract with in your GUI.



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.

Now change the colours of your square.

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.

We now need to animate the circle.

Select the circle and you will see that the animation editor has become blank. As with

the square enter an animation name, this time circle. Then press on define. Change the

colours of the circle, type 1 into the State: entry and click on define. Once again use

the arrows to change the animation state to see your circle changing colours.

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 thefollowing dialogue: -

On entry stimuli.

On exit stimuli.

Left mouse button 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.

So go back into Edit mode.

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. Alsoevery 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 phaseof 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.

Right enough talk, let's get on with it.

1. Open your .DSN file that you generated in steps 1 through to 3.

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.

6. Click on Generate and let the tool do its work.

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.





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 timeinstead 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 built 4.

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

Remember to add a space between each declaration.

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".

Reboot your system and start a shell.

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 havecreated for your bootable project.

This is simply a case of right clicking on the workspace and adding a project to the

current workspace.

The projects you need to add are altiaApilib.wpj and altiaWinLib.wpj.

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.

Changing the Build properties for the projects

Ok, so from under the Builds tab, highlight the first Altia project - altiaApilib. Right

click on the project and click on New Build.

In the Name box type - altiaApiLib.

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 thesimulator. Just right click and delete.

Open the build specification for altiaApiLib. And change the following properties: -

Under Rules, change the rule to archive.

Under C/C++ compiler add the following: -

-IC:/usr/altia/lib/vxworks -IC:/usr/altia/usercode/vxworks -DVXWORKS

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.

So, find the file called altiaUtils.c.

Go to the routine with the prototype : -

int TargetAltiaLoop(ALTIA_CHAR *chosenPort);

where the routine: -

TargetAltiaInitialize();

Is called is where the graphics library and display device is initialised.

Underneath this routine add the call to this function: -

CursorInit();

Underneath this add the call to this function: -

AtMainLoop();

Save the file.

We now need to get the GUI aware of the events generated by the mouse. This

includes mouse movement as well as button clicks.

So open the file altiaInput.c.

In the routine: -

altiaHandleWinEvent

add the code from Appendix B.

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: -

/* printf(" Button change 0x%x, state 0x%x\n",buttonChange, buttonState); */

The code you need to replace is directly after this and handles the event handling from

the mouse.

You can now build the altiaWinLib archive.

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);

extern UGL_DEVICE_ID devId;

/* 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;

void CursorInit (void){

UGL_CDIB pointerDib;

/* bitmap of cursor image */static UGL_UINT8 pointerData[] =

{#define T UGL_CURSOR_COLOR_TRANSPARENT,#define B 0,#define W 1,

B T T T T T T T T T TB B T T T T T T T T TB W B T T T T T T T TB W W B T T T T T T TB W W W B T T T T T T

B W W W W B T T T T TB W W W W W B T T T TB W W W W W W B T T TB W W W W W W W B T TB W W W W W W W W B TB W W W W W B B B B BB W W B W W B T T T TB W B T B W W B T T TB B T T B W W B T T TB T T T T B W W B T TT T T T T B W W B T TT T T T T T B W W B TT T T T T T B W W B TT T T T T T T B B T T

#undef T#undef B#undef W

};

uglDriverFind (UGL_DISPLAY_TYPE, 0, (UGL_UINT32 *)&devId);



uglCursorInit(devId, 20, 20, 320, 240);

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;

pointerImage = uglCursorBitmapCreate (devId, &pointerDib);

uglCursorImageSet (devId, pointerImage);

uglCursorOn (devId);

return;}





Appendix C - Points of contact and reference

Hitachi Europe Contact Information

http://www.hitachi-eu.com/contact/index.jsp

Altia / SCL Contact Information

http://www.scl.com/contact/index.html

Wind River Contact Information

http://europe.windriver.com/contact/







cis_handout_2

Documents