in need of some GUI suggestions.

BlitzMax Forums/MaxGUI Module/in need of some GUI suggestions.

Jesse

(Posted 2011) [#1]

I do't have much experience with Max GUI stuff so I am trying to get the hang of it while crating a project. Some of its functionallity is really obvious but other is way over my head.

this is the Problem
I am trying to create( mostly just convert the one I have to using the GUI) a tile map editor with two window inbeded in the main window, I guess you can call them panels(I don't know). the left window panel will be the map editor itself and the right panel will be where I choose the tiles. I can create the left panel easy by assigning it a canvas. what I am having problems is with the right one. I don't know If I have to have a canvas to display the tiles for selection or can I just put them in a panel with out having to create a new canvas element. I originally did it with two canvas but had problem accessing the correct information from each. maybe it was just that my logic was wrong or is there a better way of tackling that problem. I appreciate any suggestions and or code samples.

Thanks in advance.

jsp	(Posted 2011) [#2]

Two canvasses are ok, I would say, but if it's not needed it does make it may more complicated.
Depending of the tiles, changing a lot, perhaps animated = canvas, if they are more static a panel is easier.
You can add also tiles to a ListBox or a Treeview if they are not tooo big, which would give some more flexibility.
Do you have a screenshot? Or if you like send your editor to my mail address I will have a look.

Jesse

(Posted 2011) [#3]

sorry jsp I don't have anything yet. mostly because I have been trashing every Idea I have tried.
this is the editor I am trying to convert:
http://www.mediafire.com/?3nd3t05utuh2a1z
I am not interested in creating different windows like in that demo. but I would like to have two or maybe even three panels. one for the map, one for tiles and one for the object creation through tiles combinations. if you are still in need to see the source code for the editor(which is a bit more advanced than this demo) let me know and I will email it to you. I warn you, I think only I understand it.

JoshK

(Posted 2011) [#4]

You don't have to create a new graphics context every time the window changes size. To make it so the NSOpenGLContext resizes when your window changes size, you must do the following:
1) Make your OpenGL view class derived from NSOpenGLView, not NSView.

2) Add these methods to your OpenGL view class:

- (void)update
{
    if ([glcontext view] == self) {
        [glcontext update];
    }
}

- (void) _surfaceNeedsUpdate:(NSNotification*)notification
{
    [self update];
}

Last edited 2011

Jesse

(Posted 2011) [#5]

thanks Josh! I had not even considered that possible problem yet. I'll keep that in mind.

jsp	(Posted 2011) [#6]

Looking at the old editor I would go with two canvasses (or one big - all things integrated). You have several tiles which go together as a big tile, this can easily selected in a canvas, but not in a panel nor a listbox. Although in the old editor there I don't see how to select several tiles in one go in the tiles section.
May put a splitter between both to better share the space and make the window resizable.
The old editor updates all the time the graphics, but at least in the sprite.png I chose there was no animation, that consumes more power than needed. If there is no animation needed I would use a fully event based update without timer (updates only when needed).
When using more then one canvas don't forget to use also GLShareContexts() and initialize and flip every Canvas on it's own.

Jesse

(Posted 2011) [#7]

Although in the old editor there I don't see how to select several tiles in one go in the tiles section.

sorry, not documented at all. I am not sure any more how it is in windows but in the Mac version I have to hold down the shift and press the mouse button and drag the mouse to select the tiles. I am almost sure it's the same way.

May put a splitter between both to better share the space and make the window resizable.

I tried to use a splitter with a tabber for the tiles and tile objects but for some reason I couldn't get the right pane to work with canvas. I tried to attach a canvas to the pane window but gave me an error when executing. Do I need to attach a panel to the pane than a canvas to the panel? I kind of guess that it wasn't possible from your previous post. Excuse me if I misinterpreted.

I guess if I can't figure it out, I will have to integrate the whole thing into one big canvas which I don't like because I want to be able to use a slider to be able to see the large number of tiles and a tabber to be able to switch between tiles and tile groups.

When using more then one canvas don't forget to use also GLShareContexts() and initialize and flip every Canvas on it's own.

yea, I read about it doing search for possible samples that would help me figure it out.

Thanks for taking your time to help me

Last edited 2011

skn3	(Posted 2011) [#8]

I would highly recomend not using glsharecontexts as you will have compatibility issue on certain computers. I highly recommend creating two copies of each image you use on the canvas or tile canvas. Eg each canvas gadget uses a unique copy of the image. This doubles the memory usage but ensures it will be compatible. Glsharecontexts uses a method to share video memory (images) across two canvas. As far as i am aware, it create a third hidden "canvas" (context) and all images belong to it. The canvas in your app will request to share graphics from this hidden context. When two canvas try to use the same image at the same time there can be issues. As you can imagine, certain graphics cards don't like this and you will get visual corruption!

I wrote a module for my current project which acts as a cache system for images. It will duplicate images for you or share context based on the current mode you have set. It seems to work well!

http://www.blitzbasic.com/codearcs/codearcs.php?code=2897

Last edited 2011

shinkiro1

(Posted 2011) [#9]

Hey,

I tested your app and thought about how you could integrate that into a maxgui app. Here is what I came up with:

Two canvases as said, are ok. For the menu use the native menu (via CreateMenu). All the other windows you had before in your editor can be implemented as Tool Windows (look at the style flags of CreateWindow) because you don't need their functionality all the time (I think so ^^).

Jesse

(Posted 2011) [#10]

@ skn3[ac]

Thanks for the heads up. I will implement the double canvas with duplicate tiles.

@Shinkiro1

looks awesome! I don't think I could have figured it out any better myself. Thanks.

All the other windows you had before in your editor can be implemented as Tool Windows (look at the style flags of CreateWindow) because you don't need their functionality all the time (I think so ^^).

thanks I had all that figured out already.
one question though. would both of the canvas be attached to the main window or would I need to attach each to a separate panel? I am guessing directly to the window.

I will give it a try and post progress.

shinkiro1

(Posted 2011) [#11]

Using panels will give you more flexibility. I would use 2 panels: left and right, so if you later change your mind about Gadget position you just have to change the position of the panel.

Jesse

(Posted 2011) [#12]

thanks shinkiro for your suggestions. I haven't worked on it much because I have been busy doing other things but lately I started messing with it again. So far this is what I have:


Import MaxGui.Drivers

SuperStrict
Global mouse_x:Int
Global mouse_y:Int
Function CreateDocument:TGadget(tabber:TGadget)
	Local	panel:TGadget
	panel=CreatePanel(0,0,ClientWidth(tabber),ClientHeight(tabber),tabber)
	SetGadgetLayout panel,1,1,1,1
	HideGadget panel
	Return panel
End Function

Type TSprites
	Field images:TImage
	
	Method update() Abstract
	Method render(canvas:TGadget) Abstract
	Method setActive() Abstract
	Method getActive:Int()Abstract
End Type

Type TSingular Extends TSprites
	Field tilesAcross		:Int
	Field tilesDown		:Int
	
	Field viewWidth		:Int
	Field viewHeight		:Int
	
	Field totalTiles		:Int
	Field offsetY			:Int
	Field maxOffsetY		:Int

	Field tileWidth		:Int
	Field tileHeight		:Int

	Field inTilex			:Int
	Field inTiley			:Int

	Field tileIndex		:Int
	Field activeIndex		:Int

	Field canvas			:TGadget
	Function Create:Tsingular(image:TImage,canvas:TGadget Var)
		Local s:TSingular = New TSingular
		Local w:Int = GadgetWidth(canvas)
		Local h:Int = GadgetHeight(canvas)
		s.totalTiles = image.frames.length
		s.images = image
		s.tileWidth = image.width
		s.tileHeight = image.height
		s.canvas = canvas
		w = w/image.width
		h = h/image.height
		If w > s.totalTiles Then 
			s.tilesAcross = s.totalTiles

			s.tilesDown = 1
		ElseIf w*h > s.totalTiles
			Local n:Int = Ceil(Float(s.totalTiles)/w)
			If n < h Then 
				s.tilesdown  = n
			Else
				s.tilesDown = h
			EndIf
			s.tilesAcross = w
		EndIf
		s.viewWidth = s.tilesAcross*s.tileWidth
		s.viewHeight= s.tilesDown*s.tileHeight
		s.offsety = 0
		Return s
	End Function
	
	Method update()
		Local x:Int = mouse_X
		Local y:Int = mouse_Y
		If x < viewWidth And y < viewHeight
			x = x/32
			y = y/32
			inTileX = x
			inTileY = y
			tileIndex = inTileY*tilesAcross+inTileX
			If tileIndex >= totalTiles tileIndex = -1
		Else	
			tileIndex = -1
		EndIf
	End Method
	
	Method setActive()
		Local x:Int = mouse_X
		Local y:Int = mouse_Y
		If x < viewWidth And y < viewHeight
			x = x/32
			y = y/32
			inTileX = x
			inTileY = y
			Local i:Int = inTileY*tilesAcross+inTileX
			If i < totalTiles activeIndex = i
		EndIf
	End Method
	
	Method getActive:Int()
		Return activeIndex
	End Method
	
	Method render(canvas:TGadget)
		SetGraphics CanvasGraphics(canvas)
		Cls()
		For Local y:Int = offsety Until tilesDown+offsety
			For Local x:Int = 0 Until tilesAcross
				Local i:Int = y*tilesAcross+x
				If i >= totalTiles Exit
				DrawImage images,x*tileWidth,y*tileHeight,i
			Next
		Next
		If tileIndex <> -1
			Local x:Int = inTileX * tileWidth
			Local y:Int = inTiley * tileHeight
			SetColor 128,128,0
			DrawLine x,y,x+tileWidth,y
			SetColor 255,0,255
			DrawLine x,y+1,x+tileWIdth,y+1
			DrawLine x+tileWidth,y,x+tileWidth,y+tileHeight
			SetColor 128,128,0
			DrawLine x+tileWidth-1,y,x+tileWidth-1,y+tileHeight
			DrawLine x,y+tileHeight,x+tileWidth,y+tileHeight
			SetColor 255,0,255
			DrawLine x,y+tileHeight-1,x+tileWidth,y+tileHeight-1
			DrawLine x,y,x,y+tileHeight
			SetColor 128,128,0
			DrawLine x+1,y,x+1,y+tileHeight
			SetColor 255,255,255
		EndIf
		Flip()
	End Method

End Type

Type TGroup Extends TSprites
	Field canvas			:TGadget
	Function Create:Tgroup(canvas:TGadget Var)
		Local g:TGroup = New TGroup
		g.canvas = canvas
		Return g
	End Function
	
	Method update()
	
	End Method
	
	Method setActive()
		
	End Method
	
	Method getActive:Int()
		
	End Method
	
	Method render(canvas:TGadget)
		SetGraphics CanvasGraphics(canvas)
		Cls()
		Flip()
	End Method

End Type


Type TSection
	Field width:Int
	Field height:Int
	Field canvas:TGadget
	Field canvasWidth:Int
	Field canvasHeight:Int
	
	Method Update:Int() Abstract
	Method Render:Int() Abstract
	Method setActive() Abstract
	Method getActive:Int() Abstract
End Type

Type TTiles Extends TSection
	Field sprites:TSingular
	Field objects:TGroup 
	Field currentTab:TSprites
	Field hSlider:TGadget
	Field vSlider:TGadget
	Field inTilex:Int
	Field intiley:Int
	
	Function Create:TTiles(tilesTabber:TGadget,tiles:TImage,obj:TImage)
		Local t:TTiles = New TTiles
		Local cw:Int = ClientWidth(tilesTabber)
		Local ch:Int = ClientHeight(tilesTabber)
		Local tw:Int = (cw - 16)/tiles.width*tiles.Width
		Local th:Int = (ch - 16)/tiles.height*tiles.height
		Local sx:Int = (cw - (tw+16)) / 2 
		Local sy:Int = (ch - (th+16)) / 2
		t.canvas = CreateCanvas(sx,sy,tw,th/2,tilesTabber)
		t.canvasWidth = GadgetWidth(t.canvas)
		t.canvasHeight = GadgetHeight(t.canvas)
		t.VSlider=CreateSlider(sx+t.canvasWidth,sy,16,t.canvasHeight,tilesTabber,SLIDER_VERTICAL)
		SetGadgetSensitivity(t.VSlider,EVENT_MOUSEMOVE|EVENT_MOUSEDOWN)
		t.sprites = TSingular.Create(tiles,t.canvas)
		t.objects = Tgroup.Create(t.canvas)
		t.currentTab = t.sprites
		Return t
	End Function
	
	Method update:Int()
		currentTab.update()
	End Method
	
	Method SetActive()
		currentTab.setActive()
	End Method
	
	Method getActive:Int()
	
	End Method
	
	Method selectTab()
		Select EventData()
			Case 0
				currentTab = sprites
			Case 1
				currentTab = objects
		End Select
	End Method
	
	Method Render:Int()
		currentTab.render(canvas)
	End Method
End Type

Type TMaze Extends TSection
	Field hSlider			:TGadget
	Field vSlider			:TGadget
	
	Field images			:TImage
	
	Field array			:Byte[][]
	
	Field ViewAcross		:Int
	Field ViewDown		:Int
	
	Field tileWidth		:Int
	Field tileHeight		:Int
	
	Field tileX			:Int
	Field tileY			:Int
	
	Field posX			:Int
	Field posY			:Int
	
	Function Create:TMaze(mapPanel:TGadget,tiles:TImage)
		Local m:TMaze = New TMaze
		Local cw:Int = ClientWidth(mapPanel)
		Local ch:Int = ClientHeight(mapPanel)
		Local mw:Int = (cw-16)/tiles.width*tiles.width
		Local mh:Int = (ch-16)/tiles.height*tiles.height
		Local sx:Int = (cw-(mw+16))/2
		Local sy:Int = (ch-(mh+16))/2
		m.canvas = CreateCanvas(sx,sy,mw,mh,mapPanel)
		m.canvasWidth = GadgetWidth(m.canvas)
		m.canvasHeight = GadgetHeight(m.canvas)
		m.vSlider=CreateSlider(sx+m.canvasWidth,sy,16,m.canvasHeight,mapPanel,SLIDER_VERTICAL)
		m.vslider=CreateSlider(sx,sy+m.canvasHeight,m.canvasWidth,16,mapPanel,SLIDER_HORIZONTAL)
		m.images = tiles
		m.tileWidth = tiles.width
		m.tileHeight = tiles.height
		m.ViewAcross = m.canvasWidth/m.tileWidth * m.tileWidth
		m.ViewDown = m.canvasHeight/m.tileHeight * m.tileHeight
		Return m
	End Function
	
	Method update:Int()
		Local x:Int = mouse_X
		Local y:Int = mouse_Y
		If x < viewAcross And y < viewDown
			posX = x/tileWidth
			posY = y/tileHeight
		EndIf
	End Method
	
	Method setActive()
	
	End Method
	
	Method getActive:Int()
	
	End Method
	
	Method Render()
		SetGraphics CanvasGraphics(canvas)
		SetOrigin canvasWidth/2,canvasHeight/2
		SetLineWidth 5
		SetClsColor 0,0,0
		Cls()
		Local t:Int=MilliSecs()
		DrawLine 0,0,120*Cos(t),120*Sin(t)
		DrawLine 0,0,80*Cos(t/60),80*Sin(t/60)
		Local x:Int = posx * tileWidth
		Local y:Int = posy * tileHeight
		SetOrigin 0,0
		SetLineWidth 1
		DrawLine x,y,x+tileWidth,y
		DrawLine x+tileWidth,y,x+tileWidth,y+tileHeight
		DrawLine x,y+tileHeight,x+tileWidth,y+tileHeight
		DrawLine x,y,x,y+tileHeight
		Flip()	
	End Method
End Type

Type Tmap
	Field tiles:TTiles
	Field maze:Tmaze
	Field currentSection:Tsection
	
	Function Create:Tmap(tilestabber:TGadget,mapPanel:TGadget)
		Local m:Tmap = New Tmap
		m.tiles = TTiles.Create(tilesTabber,LoadAnimImage("gfx/tiles2.png",32,32,0,92),LoadAnimImage("gfx/tiles2.png",32,32,6,5))
		m.maze = Tmaze.Create(mapPanel,LoadAnimImage("gfx/tiles2.png",32,32,0,92))
		m.currentSection = m.maze
		Return m
	End Function
	
	Method activateMapSection()
		currentSection = maze	
	End Method
	
	Method activateTileSection()
		currentSection = tiles
	End Method
	
	Method selectTileTab()
		tiles.selectTab()
	End Method

	Method update()
		currentSection.update()
	End Method
	
	Method setActive()
		currentSection.setActive()
	End Method
	
	Method getActive:Int()
		Return currentSection.getActive()
	End Method
	
	
	Method Render()
		currentSection.render()
	End Method
	
End Type

Type TApplication
	
	Field mainWindow			:TGadget
	Field toolbar				:TGadget
	
	Field tilesTabber			:TGadget
	Field mapPanel			:TGadget
	
	Field activeSection		:TSection
	
	Field fileMenu			:TGadget
	Field editMenu			:TGadget
	Field helpMenu			:TGadget
		
	Field mainWidth			:Int
	Field mainHeight			:Int
	
	Field tilesWidth			:Int
	Field tilesHeight			:Int
	
	Field mapWidth			:Int
	Field mapHeight			:Int
	Field tilesIndex			:Int
	
	
	Field map					:Tmap
	
	Const MENU_FILE			:Int = 100
	Const MENU_NEW			:Int = 120 
	Const MENU_OPEN			:Int = 130
	Const MENU_SAVE			:Int = 140
	Const MENU_CLOSE			:Int = 150
	Const MENU_EXIT			:Int = 160
	
	Const MENU_EDIT			:Int = 200
	Const MENU_CUT			:Int = 210
	Const MENU_COPY			:Int = 220
	Const MENU_PASTE			:Int = 230
	
	Const MENU_UNDO			:Int = 240
	Const MENU_REDO			:Int = 250
	
	Const MENU_HELP			:Int = 300
	Const MENU_ABOUT			:Int = 310
	
	
	Function Create:TApplication()
		Local a:TApplication = New TApplication
		a.buildMainWindow()
		a.buildFileMenu()
		a.buildEditMenu()
		a.buildHelpMenu()
		a.buildTilesSection()
		a.buildMazeSection()
		a.map = Tmap.Create(a.tilesTabber,a.mapPanel)
		a.map.tiles.render()
		a.map.maze.render()
		Return a
	End Function

	Method buildMainWindow()
		MainWindow = CreateWindow("Tile Map Editor",0,0,DesktopWidth(),DesktopHeight(),Null,WINDOW_TITLEBAR | WINDOW_RESIZABLE | WINDOW_MENU | WINDOW_STATUS)
		toolbar = CreateToolbar("gfx\icons.png",0,0,24,24,mainWindow)
		SetToolbarTips(toolbar,["New","Open","Close","Save","","Cut","Copy","Paste","","Undo","Redo"])
		mainWidth = ClientWidth(mainWindow)
		mainHeight = ClientHeight(mainWindow)
	End Method

	Method buildFileMenu()
		fileMenu = CreateMenu("&File",MENU_FILE,mainWindow,KEY_F,MODIFIER_COMMAND)
		CreateMenu("New",MENU_NEW,fileMenu,KEY_N,MODIFIER_COMMAND)
		CreateMenu("Open",MENU_OPEN,fileMenu,KEY_O,MODIFIER_COMMAND)
		CreateMenu("Save",MENU_SAVE,fileMenu,KEY_S,MODIFIER_COMMAND)
		CreateMenu("Close",MENU_CLOSE,fileMenu,KEY_W,MODIFIER_COMMAND)
		CreateMenu("",0,fileMenu)
		CreateMenu("Quit",MENU_EXIT,fileMenu,KEY_Q,MODIFIER_COMMAND)
	End Method
	
	Method buildEditMenu()
		editMenu = CreateMenu("&Edit",MENU_EDIT,mainWindow,KEY_E,MODIFIER_COMMAND)
		CreateMenu("Cut",MENU_CUT,editMenu,KEY_X,MODIFIER_COMMAND)
		CreateMenu("Copy",MENU_COPY,editMenu,KEY_C,MODIFIER_COMMAND)
		CreateMenu("Paste",MENU_PASTE,editMenu,KEY_V,MODIFIER_COMMAND)
		CreateMenu("",0,editMenu)
		CreateMenu("Undo",MENU_UNDO,editMenu,KEY_Z,MODIFIER_COMMAND)
		CreateMenu("Redo",MENU_REDO,editMenu,KEY_Z,MODIFIER_COMMAND|MODIFIER_SHIFT)
	End Method
	
	Method buildHelpMenu()
		helpMenu = CreateMenu("&Help",MENU_HELP,mainWindow,KEY_H,MODIFIER_COMMAND)
		CreateMenu("About",MENU_ABOUT,helpMenu,KEY_A,MODIFIER_COMMAND)
	End Method
	
	Method buildTilesSection()
		tilesTabber = CreateTabber(4,0,mainWidth/3,mainHeight-3,mainWindow)
		SetGadgetLayout tilesTabber,1,1,1,1
		AddGadgetItem(tilesTabber,"Tiles",False,-1)
		AddGadgetItem(tilesTabber,"Objects",False,-1)
	End Method
	
	Method buildMazeSection()
		mapPanel = CreatePanel(mainWidth/3,0,mainWidth/3*2,mainHeight,mainWindow,PANEL_GROUP,"Map")
		SetGadgetLayout mapPanel,1,1,1,1
	End Method

	Method process()
		WaitEvent()
		Select EventID()
			Case EVENT_WINDOWCLOSE,EVENT_APPTERMINATE
				End
			Case EVENT_MENUACTION
			
			Case EVENT_GADGETPAINT
				'RedrawGadget(activeSection.canvas)				
			Case EVENT_GADGETACTION
				Select EventSource() 
					Case mapPanel
						Print "MAP"
					Case tilesTabber
						map.selectTileTab()
					Default
						Print CurrentEvent.ToString() '"invalid button pressed"
				End Select
			Case EVENT_MOUSEENTER
				Select EventSource()
					Case map.Maze.canvas
						map.activateMapSection()
					Case map.tiles.canvas
						map.activateTileSection()
				End Select
			Case EVENT_MOUSEMOVE
				mouse_X = CurrentEvent.x
				mouse_Y = CurrentEvent.y
			Case EVENT_MOUSEDOWN
				map.setActive()
				If TTiles(map.currentSection)
					Local t:TTiles = TTiles(map.currentSection)
					If t
						Local s:Tsingular = TSingular(t.currentTab)
						If s 
							tilesIndex = s.getActive()
						EndIf
					EndIf
				ElseIf TMaze(map.CurrentSection)
					Local m:TMaze = Tmaze(map.CurrentSection)
					If m
						Print "put in maze"
					EndIf 
				EndIf
			Default	
		End Select
		map.update()
		map.render()
		
	End Method
	
End Type



Local app:Tapplication = Tapplication.Create()
Repeat
	app.process()
Forever

this is just a rough draft to see how I am going to integrate everything and to get an idea how maxGUI works.

I do have one problem I am trying to implement the slider. but I don't like the way it works.
I want it to be able to slide the map while I am moving the the thumb on the slider but the event handler only sends an event after I release the button. I tried to add "EVENT_MOUSEMOVE" SetGadgetAction but still doesn't work. Is there any way to do that? Or am I stuck with the limited way of managing the slider?

by the way these are the images if anybody want's to test it put them in "\gfx" subfolder.
save as "tiles2.png"

save as "icons.png"

Last edited 2011

Jesse

(Posted 2011) [#13]

Ok, I decided to do a search and found out that the solution is to use hooks. Great!