GUI Tool User Manual for TW8823

Gui Tool Document GUI_TOOL User ManualFor TW8823Techwell Shanghai9M&9N, Cross Region Plaza,No.899, Lingling Road, Xuhui DistrictURL 2010-4-12List1、Requirement of Hardware and software (2)2、Setup (2)3、Step (2)1、Requirement of Hardware and software.Winxp/vista OS.256M RAM2、SetupTBD3、Step1、Click “Gui_Tool.exe”startup software。

2、Initial UI（Picture 1）（Picture 1）3、Operation(1)New project:Click Menu: File->new，show below picture（picture 2 ~ picture 4）（Picture2 ）（picture3）（Picture 4）new project windowYou can edit four items:(1) Project File Name (2)Project Path (3)Please Select CPU Type(4)flash address (5) TW2883 data output format selection. (6) touch screen onoff . Then clock OK, new project has built。

（as picture5）（picture 5） Groups ，select add group （see picture6~picture8）（二）New Group ：Right click mouse on（picture6）（picture7）Click OK to new group，click Cancel if not。

You can add many groups as this;Click OK（picture 8）（picture 8）（3）new PageMouse right click Group0 select Add Page（picture 9）（picture 10）You can select the page type in this UI. The page will show as sub page if you check the “Sub Window”. The page’s position and size is setting in relative canvas id. You can change it by selecting Canvas id. Active Ctrl is the first focus ctrl when you enter this page. The tool will select one if you do not select it.Sub Page Note in TW8823:1、The hardware id in the relative canvas id must be 0 if you check the “Sub Window”;2、The memory of the canvas with hardware id 1 will reference the one with canvas 0;3、The width of canvas id must be alignment by 4;4、The user can set the sub-page position by changing ScreenX and ScreenY in canvas id.5、The remote left key and exit key support sub page exit. The left key without navigationinformation can exit current sub page.Click OK，Add Page as below（picture 11）Click page_0，as picture 12（picture 12）You can add many pages as this;（四）Load BitmapMouse right click BMPS（picture 13），（picture 13）Select BMPS->8bits(or 16bits or 24 bits)->Load Bitmap(Overwrite)（as picture 14）， this item will overwrite exist bitmap in project if name is same; Select BMPS->8bits(or 16bits or 24bits)->Load Bitmap(Omit) , this item will omit new bitmap if bitmap exist;Then you can select bitmap file you want to load; click open（as picture 15）（picture 15）ctrls useAfter pag ilt ，we can add ctrls by clicking button (new text, new button, new scrollbar, tton in toolbar ，down and up ，move mouse to page areak mouse as picture 16，（五） e was bu new progress bar, new animate, new image ）in toolbar 。

（1） TextctrlClick new text buClic（picture 16）You can edit the text by selecting string id or set the attribute by clicking the AttributeButton in this UI. You can also edit it by clicking edit button then it will navigate to text string edit UI. You can change the fore color or background color in this UI. You need to reselect these colors when the LUT is built.（picture 17）（2） Button ctrlClick button “New button” button in toolbar, down then up，move mouse to page area picture18，then click mouse, the button edit UI show:（picture 18）You can select focus image/unfocus image/invalid image in this UI. You can also select the relative text(focus text/unfocus text/invalid text) in it. Other set: all selected images’ attribute, all selected texts’ attribute, all selected texts’ colors, all selected texts’ content and font; you can also select navigation information for button including focus information , page’s information and mouse information for TW2880.（3） Progressbar ctrlUse New progress bar button in toolbar to add progress bar; You can select track image and potimage in progress bar edit UI;(picture 19)Click OK，Progress bar is add。

The add button is use to add progress and sub progress;（4）Scrollbar ctrlUse New scrollbar button in toolbar to add scrollbar bar; You can select track image ,pot image , curser image, add button images and sub button image in scrollbar bar edit UI(picture 20); style is use to select the direction of scrollbar; current is used to adjust initial value; navigation area issame with button ctrl;Picture 20 （5）Image ctrlUse I button in toolbar to add image ctrl; picture 21（6）Animator ctrlUse A button in toolbar to add animator ctrl; picture 22; you can add maximum is 7 images; the start id and interval also need to be selected.Picture 22(8)、scratch page addYou can right click scratch item in left resource area to select “Add Scratch Page”, then picture 23 show; here you should adjust the scratch page not to cover other scratch page and canvas area in sdrom; you can select type item to let the scratch page contain ICON or FONT;Auto place font and icon: you can auto place the font and icon on scratch page by clicking the sub-menu “Auto Image Set”;Picture 23You can add one icon scratch page and one font scratch page; after make scratch bitmap and font(you can do this after you add all groups, pages, ctrls), the bitmap and font need to scratch will show below at scratch page;How to add bitmap to scratch page? You can click one icon type scratch page, expand its sub items, select one items, move mouse to right canvas area, then bitmap frame will move with mouse, place it by clicking mouse; then the bitmap will show on scratch page; add bitmap one by one to scratch page;How to add font to scratch page? The operation will be use except of different scratch page type and font item;An icon scratch page show on picture 24, A font scratch page show on picture 25;Picture 24Picture 25(9) canvas, two default canvas loaded;(10) build:You can build code after you have complete all ctrls, page,group,scratch page design. Before Build the code, you must click Create scratch bitmap and scratch font and place scratch component rightly, after that Click menu build|build, the code will be create in code folder in project path;(11) Replace all code in core1 project then build, get core1.mot to flash in board.Replace all code in core1 project then build, get core1.mot to flash in board.Replace files gui_canvas_data.c, gui_font_data.c, gui_icon_data.c, gui_palette_data.c, gui_scratch_data.c ，zdfl_app_ctrl.c ，User_handle.h in folder core1\OSD.For TW2880 project, copy all the generated *.c and *.h file to the directory OSG.(12) multi-language textLoad strings: Click menu tool->load text after you created new project or loaded old project.Tool will show picture 26; you can load strings by clicking button “Load Text File”; the tool can load the Unicode format text file; there are two columns in this type file: the first column is string id and second is the unicode string contents in some language. The two column are separated by char tab(0x09) in every line and the line end is 0x000d0x000a. You can browse every string by click it in left resource window. String setting: you can select the font type and style and size for all strings in some language type then click set button. The tool will load all text data to tool. You can exit after you set all language type. Youcannot exit if there are some language type is not loaded.Picture 26(13)Edit some string idYou can click the menu tool->text rditor to edit some string to have different font type(size, style……). Reference picture 27.Picture 27You cannot change the string id font in load string dialog (picture 35) if you have edit it in picture 36. You also cannot change the string id in picture 36 if you enter dialog throw ctrl edit UI.You can add new string in this UI by clicking New String button and edit it.(14) Simulator fileYou can get the simulator file in project folder/code; its name is “gui_demo.sim”. you can use the simulator program to open this file tosimulate UI.How to simulate? You can open the simulate program “simulatePro.exe” in a separate folder as picture 28; Click open file button to select the file “gui_demo.sim” generated by GUI TOOL. Then you will get Picture 29:You can click left、right、enter、up、down to navigate the UI.You can use the mouse to navigate the UI when you word on TW2880 project.Picture 28Picture 29(15) Flash mode open/closeYou can set flash mode when new project or open project properties UI: Menu FIlE-> Properties; You can get data array mode when flash address equals to 0xffffffff and you can get flash mode when flash address equalsits actual value;（16） ctrl navigationto move ctrls on page; The white frame will show The tool support keyboardaround the ctrl if one ctrl is selected. Then you can pressup/down/left/right key to move the ctrl by one pixe. The focus ctrl willdisappear if you click blank area.(17) Gridee display grid modes in tool: Grid off and Grid as Background h Screen” to set CPU work There are thr and Grid as Foreground. You can align your ctrl by the grid line. There are grid value pixels between two grid lines. This value can be set by menu: “tool->grid value”. Menu “Tool->Grid off” can close gird mode. Menu “Tool->Grid as foreground” and “tool->Grid as background” can open grid mode. There are three buttons to operate gird open/close in toolbar. The grid status can be gotten from the GUI TOOL status bar.（18）Touch screen mode or remote key modeFor TW8823, there is one checkbox “Use Touc mode in project new or project properties UI. In touch screen mode, one macro “USED_TOUCH_SCREEN” is defined and there is no focus in the page just displayed. In remote key mode, the macro “USED_REMOTE_KEY” isdefined and the focus will show on the displaying page.。