Improving my GUI

Blitz3D Forums/Blitz3D Programming/Improving my GUI

OwlEpicurus (Posted 2009) [#1]

Any suggestions on how to improve this GUI? Mainly I am looking for ways to make it more effecient or to make it shorter (if possible). There are two main areas of concern: 1) CheckMouse function -- The way the code is currently structured, the program would check all GUI items to see if the mouse is over anything at all. It then, over the course of several other functions, checks all of the items again. The purpose of this was to make sure MouseHit() and MouseDown() would only be counted if the user actually clicked on something. Is there a better way to do this? How? 2) Color and Image functions -- Towards the end of the code are four functions used to determine the color and background image of the window/button/etc. Would it be better to combine them into one function that alters global variables, or keep them as four seperate functions that return a value? Any other comments are also welcome. Const ESCKEY = 1 Const LMOUSEKEY = 1 Const MAX_WINDOWS = 99 ;maximum number of windows per menu Const MAX_BUTTONS = 99,MAX_LISTS = 4,MAX_SLIDERS = 9 ;maximum number of buttons, lists, and sliders per window Const MAX_ENTRIES = 99 ;maximum number of entries per list Const MAX_TEXT = 3 ;maximum number of lines in an entry's description Const MAX_RGB = 255 Const RGB_INCREMENT = 20 ;amount the rgb values are increased/decreased when dealing with borders or buttons Const TEXT_R = 1,TEXT_G = 1,TEXT_B = 1 ;text color Const LETTER_HEIGHT = 14,LETTER_WIDTH = 8 ;heigt and width of a line of text Const MARGIN = 16,LIST_MARGIN = 10 Const CLASS_BASE = 100 Const DARKER_CLASS = 1 Const LIGHTER_CLASS = 2 Const FRAME_CLASS = 3 Global Old_MouseX,Old_MouseY,Current_MouseX,Current_MouseY,Mouse_Click,Mouse_Hold Type Menu ;;;;;;;;; ;; General framework for keeping track of loading and deleting windows ;; These are global variables which are declared at the beginning of the program; they are loaded with a function called through LoadMenu() ;;;;;;;;; Field ID Field windows Field w.window[MAX_WINDOWS] End Type Type Window ;;;;;;;;; ;; Image and framework for holding buttons, lists, and sliders ;;;;;;;;; Field ID,class Field x,y Field image Field show Field buttons,lists,sliders Field b.button[MAX_BUTTONS],l.list[MAX_LISTS],s.slider[MAX_SLIDERS] End Type Type Button ;;;;;;;;; ;; Image that, when clicked, can toggle a value on and off or return a value ;;;;;;;;; Field ID Field x,y Field image[2] Field toggle,mouse End Type Type List ;;;;;;;;; ;; Image for displaying and holding multiple text items ;;;;;;;;; Field ID Field x,y Field image,barImage,boxImage Field size,start,barY Field e.entry[MAX_ENTRIES] End Type Type Entry ;;;;;;;;; ;; Text item in a list ;;;;;;;;; Field ID Field selected Field name$ Field description$[MAX_TEXT] End Type Type Slider ;;;;;;;;; ;; Image with a bar that can slide back and forth to alter a value ;;;;;;;;; Field ID Field x,y Field image,barImage Field min,max,value Field incrementSize End Type ;__________________________________________________________FUNCTIONS__________________________________________________________; ;--------------------------------------------GENERAL Function DrawGUI() For w.window = Each window If w\show DrawImage w\image,w\x,w\y For i = 0 To w\buttons-1 If w\b[i]\mouse image = 1 ElseIf w\b[i]\toggle image = 2 EndIf DrawImage w\b[i]\image[image],w\b[i]\x,w\b[i]\y Next For i = 0 To w\lists-1 DrawImage w\l[i]\image,w\l[i]\x,w\l[i]\y DrawImage w\l[i]\barImage,w\l[i]\x+ImageWidth(w\l[i]\image)-ImageWidth(w\l[i]\barImage),w\l[i]\barY If w\l[i]\boxImage > 0 DrawImage w\l[i]\boxImage,w\l[i]\x,w\l[i]\y+ImageHeight(w\l[i]\image)+LIST_MARGIN EndIf UpdateList(w\l[i],w) Next For i = 0 To w\sliders-1 DrawImage w\s[i]\image,w\s[i]\x,w\s[i]\y DrawImage w\s[i]\barImage,w\s[i]\x+(w\s[i]\value-w\s[i]\min)*w\s[i]\incrementSize-ImageWidth(w\s[i]\barImage)/2,w\s[i]\y-ImageHeight(w\s[i]\barImage)/2+ImageHeight(w\s[i]\image)/2 Color TEXT_R,TEXT_G,TEXT_B Text w\s[i]\x+ImageWidth(w\s[i]\image)/2,w\s[i]\y-ImageHeight(w\s[i]\barImage)/2-MARGIN,w\s[i]\value,1,1 UpdateSlider(w\s[i]) Next EndIf Next End Function ;--------------------------------------------Create the GUI Function CreateMenu.menu(windows) For o.menu = Each menu old = old +1 Next If old > 0 l.menu = Last menu EndIf m.menu = New menu If windows > MAX_WINDOWS+1 windows = MAX_WINDOWS+1 EndIf m\windows = windows-1 For i = 0 To windows-1 m\w.window[i] = NewWindow() Next If old = 0 m\ID = 1 Else m\ID = l\ID+1 EndIf Return m End Function Function LoadMenu(m.menu) Select m\ID Case TestMenu\ID LoadTestMenu() Default RuntimeError "No function for loading menu "+m\ID End Select End Function Function NewWindow.window() For o.window = Each window old = old+1 Next If old > 0 l.window = Last window EndIf w.window = New window If old = 0 w\ID = 1 Else w\ID = l\ID+1 EndIf Return w End Function Function NewButton.button() For o.button = Each button old = old +1 Next If old > 0 l.button = Last button EndIf b.button = New button If old = 0 b\ID = 1 Else b\ID = l\ID+1 EndIf Return b End Function Function NewList.list() For o.list= Each list old = old+1 Next If old > 0 ll.list = Last list EndIf l.list = New list If old = 0 l\ID = 1 Else l\ID = ll\ID+1 EndIf Return l End Function Function NewSlider.slider() For o.slider = Each slider old = old+1 Next If old > 0 l.slider = Last slider EndIf s.slider = New slider If old = 0 s\ID = 1 Else s\ID = l\ID+1 EndIf Return s End Function Function AddEntry(l.list,name$,description$,description1$ = " ",description2$ = " ") ;;;;;;;;; ;; Parameters: list the entry will be added to, entry name, description to display below ;;;;;;;;; For o.entry = Each entry entries = entries+1 Next l\size = l\size+1 l\start = l\size l\e.entry[l\size] = New entry l\e[l\size]\name$ = name$ l\e[l\size]\description$[0] = description$ l\e[l\size]\description$[1] = description1$ l\e[l\size]\description$[2] = description2$ If Not entries l\e[l\size]\ID = ID Else ll.entry = Last entry l\e[l\size]\ID = ll\ID+1 EndIf End Function Function DeleteEntry(e.entry,l.list) Delete e l\size = l\size-1 End Function ;--------------------------------------------Set up the GUI Function DefineWindow(w.window,x,y,width,height,class,buttons = 0,lists = 0,sliders = 0,center = 0) w\class = class w\image = CreateBox(width,height,class,True) If center w\x = x-ImageWidth(w\image)/2::w\y = y-ImageHeight(w\image)/2 Else w\x = x::w\y = y EndIf If buttons > MAX_BUTTONS+1 buttons = MAX_BUTTONS+1 RuntimeError "Too many buttons assigned to window "+w\ID EndIf w\buttons = buttons If buttons > 0 For i = 0 To buttons-1 w\b.button[i] = NewButton() Next EndIf If lists > MAX_LISTS+1 lists = MAX_LISTS+1 RuntimeError "Too many lists assigned to window "+w\ID EndIf w\lists = lists If lists > 0 For i = 0 To lists-1 w\l.list[i] = NewList() Next EndIf If sliders > MAX_SLIDERS+1 sliders = MAX_SLIDERS+1 RuntimeError "Too many sliders assigned to window "+w\ID EndIf w\sliders = sliders If sliders > 0 For i = 0 To sliders-1 w\s.slider[i] = NewSlider() Next EndIf End Function Function DefineButton(b.button,x,y,name$,class,center = 0) For i = 0 To 2 b\image[i] = CreateBox(StringWidth(name$)+MARGIN,StringHeight(name$)+MARGIN,class+100*i) Color TEXT_R,TEXT_G,TEXT_B Text ImageWidth(b\image[i])/2,ImageHeight(b\image[i])/2,name$,1,1 Next If center b\x = x-ImageWidth(b\image[0])/2 b\y = y-ImageHeight(b\image[0])/2 Else b\x = x b\y = y EndIf End Function Function DefineList(l.list,w.window,x,y,width,height,class,description = 1,center = 0) If description = 1 If height < LETTER_HEIGHT*(MAX_TEXT+1)+MARGIN+LIST_MARGIN+LETTER_HEIGHT+2*MARGIN height = LETTER_HEIGHT*(MAX_TEXT+1)+MARGIN+LIST_MARGIN+LETTER_HEIGHT+2*MARGIN EndIf l\boxImage = CreateBox(width,LETTER_HEIGHT*(MAX_TEXT+1)+2*MARGIN,class) l\image = CreateBox(width,height-ImageHeight(l\boxImage)-LIST_MARGIN,class) Else If height < LETTER_HEIGHT+2*MARGIN height = LETTER_HEIGHT+2*MARGIN EndIf l\image = CreateBox(width,height,class) l\boxImage = 0 EndIf If center l\x = x-ImageWidth(l\image)/2 l\y = y-(ImageHeight(l\image)+LIST_MARGIN+ImageHeight(l\boxImage))/2 Else l\x = x l\y = y EndIf UpdateList(l,w) End Function Function DefineSlider(s.slider,x,y,min,max,incrementSize,class,center = 0) ;;;;;;;;; ;; Parameters: slider being defined, x and y coordinates, minimum and maximum values, ;; size in pixels of increments, appearance, is it centered? s\min = min::s\max = max s\incrementSize = incrementSize s\value = s\min s\image = CreateBox((s\max-s\min)*s\incrementSize,5,class) s\barImage = CreateBox(MARGIN,30,class+200) If center s\x = x-ImageWidth(s\image)/2 s\y = y+ImageHeight(s\image)/2 Else s\x = x s\y = y+ImageHeight(s\barImage)/2 EndIf End Function ;--------------------------------------------Update the GUI and Act Function UpdateMouse() Old_MouseX = Current_MouseX Old_MouseY = Current_MouseY Current_MouseX = MouseX() Current_MouseY = MouseY() End Function Function CheckMouse() ;;;;;;;;; ;; Checks to see if the mouse has been clicked or being held down, ;; and, if it is, if it is over a button or other clickable item ;; -- Note: Is there a more efficient way to achieve the same effect? ;; (i.e. the computer will not respond when the mouse is clicked over nothing ;; and is then moved over something) ;;;;;;;;; UpdateMouse() Mouse_Click = False If MouseHit(LMOUSEKEY) For w.window = Each window If w\show For b = 0 To w\buttons-1 If Current_MouseX > w\b[b]\x And Current_MouseY > w\b[b]\y And Current_MouseX < w\b[b]\x+ImageWidth(w\b[b]\image[0]) And Current_MouseY < w\b[b]\y+ImageHeight(w\b[b]\image[0]) Mouse_Click = True EndIf Next For l = 0 To w\lists-1 If Current_MouseX > w\l[l]\x And Current_MouseY > w\l[l]\y And Current_MouseX < w\l[l]\x+ImageWidth(w\l[l]\image) And Current_MouseY < w\l[l]\y+ImageHeight(w\l[l]\image) Mouse_Click = True EndIf Next For s = 0 To w\sliders-1 If Current_MouseY > w\s[s]\y-ImageHeight(w\s[s]\barImage)/2 And Current_MouseY < w\s[s]\y+ImageHeight(w\s[s]\barImage)/2 Mouse_Click = True EndIf Next EndIf Next EndIf If MouseDown(LMOUSEKEY) For w.window = Each window If w\show And Mouse_Hold = False And Mouse_Click = True For b = 0 To w\buttons-1 If Current_MouseX > w\b[b]\x And Current_MouseY > w\b[b]\y And Current_MouseX < w\b[b]\x+ImageWidth(w\b[b]\image[0]) And Current_MouseY < w\b[b]\y+ImageHeight(w\b[b]\image[0]) Mouse_Hold = True EndIf Next For l = 0 To w\lists-1 If Current_MouseX > w\l[l]\x And Current_MouseY > w\l[l]\y And Current_MouseX < w\l[l]\x+ImageWidth(w\l[l]\image) And Current_MouseY < w\l[l]\y+ImageHeight(w\l[l]\image) Mouse_Hold = True EndIf Next For s = 0 To w\sliders-1 If Current_MouseY > w\s[s]\y-ImageHeight(w\s[s]\barImage)/2 And Current_MouseY < w\s[s]\y+ImageHeight(w\s[s]\barImage)/2 Mouse_Hold = True EndIf Next EndIf Next Else Mouse_Hold = False EndIf End Function Function UpdateList(l.list,w.window) ;;;;;;;;; ;; Checks to see if the user has scrolled up or down or if s/he has clicked on an entry ;;;;;;;;; If l\start > 0 y = MARGIN/2 height = ImageHeight(l\image)/LETTER_HEIGHT Color TEXT_R,TEXT_G,TEXT_B If l\size >= l\start+height-1 Then lEnd = l\start+height-2 Else lEnd = l\size For e = l\start To lEnd If l\e[e]\selected Color MAX_RGB-200,MAX_RGB-200,MAX_RGB-200 Rect l\x+1,l\y+y,ImageWidth(l\image)-ImageWidth(l\barImage)-1,LETTER_HEIGHT Color TEXT_R,TEXT_G,TEXT_B For d = 0 To MAX_TEXT If Not l\e[e]\description$[d] = " " Text l\x+MARGIN,l\y+ImageHeight(l\image)+LIST_MARGIN+MARGIN+dy,l\e[e]\description$[d] dy = dy+LETTER_HEIGHT EndIf Next EndIf Text l\x+MARGIN,l\y+y,l\e[e]\name$ y = y+LETTER_HEIGHT::dy = 0 If Mouse_Click If Current_MouseX > l\x And Current_MouseY > l\y+(e-l\start)*LETTER_HEIGHT+MARGIN/2 And Current_MouseX < l\x+ImageWidth(l\image)-ImageWidth(l\barImage) And Current_MouseY < l\y+(e-l\start+1)*LETTER_HEIGHT+MARGIN/2 l\e[e]\selected = 1-l\e[e]\selected For i = 1 To l\size If Not e = i Then l\e[i]\selected = False Next EndIf EndIf Next If Mouse_Hold And Current_MouseX > l\x+ImageWidth(l\image)-ImageWidth(l\barImage) And Current_MouseY > l\barY And Current_MouseX < l\x+ImageWidth(l\image) And Current_MouseY < l\barY+ImageHeight(l\barImage) If Current_MouseY > Old_MouseY l\barY = l\barY+ImageHeight(l\barImage)::l\start = l\start+1 If l\barY > l\y+ImageHeight(l\image)-ImageHeight(l\barImage) l\barY = l\y+ImageHeight(l\image)-ImageHeight(l\barImage) l\start = l\start-1 EndIf ElseIf Current_MouseY < Old_MouseY l\barY = l\barY-ImageHeight(l\barImage)::l\start = l\start-1 If l\barY < l\y Then l\barY = l\y If l\start < 1 Then l\start = 1 EndIf EndIf EndIf End Function Function UpdateSlider(s.slider) If Mouse_Hold And Current_MouseX > s\x+(s\value-s\min)*s\incrementSize-ImageWidth(s\barImage)/2 And Current_MouseY > s\y-ImageHeight(s\barImage)/2 And Current_MouseX < s\x+(s\value-s\min)*s\incrementSize+ImageWidth(s\barImage)/2 And Current_MouseY < s\y+ImageHeight(s\barImage)/2 If Current_MouseX > Old_MouseX s\value = s\value+1 ElseIf Current_MouseX < Old_MouseX s\value = s\value-1 EndIf If s\value < s\min Then s\value = s\min If s\value > s\max Then s\value = s\max EndIf End Function Function UpdateButtons(w.window) For i = 0 To w\buttons-1 If Current_MouseX > w\b[i]\x And Current_MouseY > w\b[i]\y And Current_MouseX < w\b[i]\x+ImageWidth(w\b[i]\image[0]) And Current_MouseY < w\b[i]\y+ImageHeight(w\b[i]\image[0]) w\b[i]\mouse = 1 If Mouse_Click Then Return w\b[i]\ID Else w\b[i]\mouse = 0 EndIf Next End Function Function ResetList(l.list,w.window) ;;;;;;;;; ;; Resets certain values on a list; must be called after Add/DeleteEntry! ;;;;;;;;; l\start = 1 height = ImageHeight(l\image)/LETTER_HEIGHT-1 If l\size-height > 0 l\barImage = CreateBox(MARGIN,ImageHeight(l\image)/(l\size-height+1),w\class) Else l\barImage = CreateBox(MARGIN,ImageHeight(l\image),w\class) EndIf l\barY = l\y End Function ;--------------------------------------------Delete the GUI Function FreeMenu(m.menu) ;;;;;;;;; ;; Frees all of the individual components of a menu, though the menu itself stays intact ;;;;;;;;; For w = 0 To m\windows FreeImage m\w[w]\image For b = 0 To m\w[w]\buttons For i = 0 To 2 FreeImage m\w[w]\b[b]\image[i] Next Delete m\w[w]\b[b] Next For l = 0 To m\w[w]\lists For e = 0 To m\w[w]\l[l]\size Delete m\w[w]\l[l]\e[e] Next FreeImage m\w[w]\l[l]\image::FreeImage m\w[w]\l[l]\barImage::FreeImage m\w[w]\l[l]\boxImage Delete m\w[w]\l[l] Next For s = 0 To m\w[w]\sliders FreeImage m\w[w]\s[s]\image::FreeImage m\w[w]\s[s]\barImage Delete m\w[w]\s[s] Next Delete m\w[w] Next End Function ;--------------------------------------------Images Function CreateBox(width,height,class,frame = False) ;;;;;;;;; ;; Creates an image that can be used as a window, a button, etc. ;;;;;;;;; red = DetermineRed(class)::green = DetermineGreen(class)::blue = DetermineBlue(class)::image = DetermineImage(class) box = CreateImage(width,height) If frame CreateFrame(box,class) mainbox = CreateImage(width-2*MARGIN,height-2*MARGIN) SetBuffer ImageBuffer(mainbox) Else SetBuffer ImageBuffer(box) EndIf If Not image Color red,green,blue Rect 0,0,width,height Else TileImage image EndIf If frame SetBuffer ImageBuffer(box) DrawImage mainbox,MARGIN,MARGIN Else If red+RGB_INCREMENT> MAX_RGB Then r0 = MAX_RGB Else r0 = red+RGB_INCREMENT If red-RGB_INCREMENT< 0 Then r1 = 0 Else r1 = red-RGB_INCREMENT If green+RGB_INCREMENT> MAX_RGB Then g0 = MAX_RGB Else g0 = green+RGB_INCREMENT If green-RGB_INCREMENT< 0 Then g1 = 0 Else g1 = green-RGB_INCREMENT If blue+RGB_INCREMENT> MAX_RGB Then b0 = MAX_RGB Else b0 = blue+RGB_INCREMENT If blue-RGB_INCREMENT< 0 Then b1 = 0 Else b1 = blue-RGB_INCREMENT Color r0,g0,b0 Line 0,0,width,0 Line 0,0,0,height Color r1,g1,b1 Line width-1,height,width-1,0 Line width,height-1,0,height-1 EndIf Return box End Function Function CreateFrame(box,class) class = CLASS_BASE*FRAME_CLASS red = DetermineRed(class)::green = DetermineGreen(class)::blue = DetermineBlue(class)::image = DetermineImage(class) frame = CreateImage(ImageWidth(box)+2*MARGIN,ImageHeight(box)+2*MARGIN) SetBuffer ImageBuffer(frame) If image > 0 TileImage image Else Color red,green,blue Rect 0,0,ImageWidth(box),ImageHeight(box) EndIf If red+RGB_INCREMENT> MAX_RGB Then r0 = MAX_RGB Else r0 = red+RGB_INCREMENT If red-RGB_INCREMENT< 0 Then r1 = 0 Else r1 = red-RGB_INCREMENT If green+RGB_INCREMENT> MAX_RGB Then g0 = MAX_RGB Else g0 = green+RGB_INCREMENT If green-RGB_INCREMENT< 0 Then g1 = 0 Else g1 = green-RGB_INCREMENT If blue+RGB_INCREMENT> MAX_RGB Then b0 = MAX_RGB Else b0 = blue+RGB_INCREMENT If blue-RGB_INCREMENT< 0 Then b1 = 0 Else b1 = blue-RGB_INCREMENT Color r0,g0,b0 Line 0,0,ImageWidth(box),0 Line 0,0,0,ImageHeight(box) Line MARGIN,ImageHeight(box)-MARGIN,ImageWidth(box)-MARGIN,ImageHeight(box)-MARGIN Line ImageWidth(box)-MARGIN,MARGIN,ImageWidth(box)-MARGIN,ImageHeight(box)-MARGIN Color r1,g1,b1 Line ImageWidth(box)-1,ImageHeight(box),ImageWidth(box)-1,0 Line ImageWidth(box),ImageHeight(box)-1,0,ImageHeight(box)-1 Line MARGIN,MARGIN,ImageWidth(box)-MARGIN,MARGIN Line MARGIN,MARGIN,MARGIN,ImageHeight(box)-MARGIN SetBuffer ImageBuffer(box) DrawImage frame,0,0 End Function Function DetermineRed(class) If class >= 100 base = class/100 class = class-100*base EndIf Select class Default If base = 3 Then red = 100 Else red = MAX_RGB-50 End Select If base = 1 red = red+RGB_INCREMENT If red > MAX_RGB Then red = MAX_RGB ElseIf base = 2 red = red-RGB_INCREMENT If red < 0 Then red = 0 EndIf Return red End Function Function DetermineGreen(class) If class >= 100 base = class/100 class = class-100*base EndIf Select class Default If base = 3 Then green = 100 Else green = MAX_RGB-50 End Select If base = 1 green = green+RGB_INCREMENT If green > MAX_RGB Then green = MAX_RGB ElseIf base = 2 green = green-RGB_INCREMENT If green < 0 Then green = 0 EndIf Return green End Function Function DetermineBlue(class) If class >= 100 base = class/100 class = class-100*base EndIf Select class Default If base = 3 Then blue = 100 Else blue = MAX_RGB-50 End Select If base = 1 blue = blue+RGB_INCREMENT If blue > MAX_RGB Then blue = MAX_RGB ElseIf base = 2 blue = blue-RGB_INCREMENT If blue < 0 Then blue = 0 EndIf Return blue End Function Function DetermineImage(class) If class >= 100 base = class/100 class = class-100*base EndIf Select class Default If base = 3 Then image = LoadImage("GUIback_0.png") Else image = 0 End Select Return image End Function By itself the code won't run. To see a sample window, include this code: Graphics 800,600,16,2 Global TestMenu.menu = CreateMenu(1) LoadMenu(TestMenu) SetBuffer BackBuffer() While Not KeyHit(ESCKEY) DrawGUI() CheckMouse() For w.window = Each window If w\show hit = UpdateButtons(w) EndIf Next If hit = 1 TestMenu\w[0]\b[0]\toggle = 1-TestMenu\w[0]\b[0]\toggle EndIf Flip Cls Wend End Function LoadTestMenu() DefineWindow(TestMenu\w[0],100,100,400,200,0,1,1,1) DefineButton(TestMenu\w[0]\b[0],TestMenu\w[0]\x+30,TestMenu\w[0]\y+35,"Test",TestMenu\w[0]\class) DefineList(TestMenu\w[0]\l[0],TestMenu\w[0],TestMenu\w[0]\x+150,TestMenu\w[0]\y+35,200,LETTER_HEIGHT+3*MARGIN,TestMenu\w[0]\class) DefineSlider(TestMenu\w[0]\s[0],TestMenu\w[0]\x+40,TestMenu\w[0]\y+120,10,19,10,TestMenu\w[0]\class) For i = 0 To 4 AddEntry(TestMenu\w[0]\l[0],"Test "+i,"Testing, testing") Next ResetList(TestMenu\w[0]\l[0],TestMenu\w[0]) TestMenu\w[0]\show = 1 End Function Note that the colors can be changed by altering the values in the functions DetermineRed(), DetermineBlue(), and DetermineGreen(), and that one can add a background image or texture to the GUI by loading an image in the function DeterminImage(). Thanks in advance for your help.