Side on tab view

BlitzMax Forums/MaxGUI Module/Side on tab view

matibee (Posted 2012) [#1]

I need a tall narrow tab view and I don't like the way multiple tabs bunch up and scroll on the standard tab view. So, inspired by this, I've had a go at making my own side tabber.. Source here (it's a first draft so don't expect too much). I'm here to ask for your help in making it window re-size friendly. It's just a collection of panels and I don't seem to be able to use SetGadgetLayout to correctly control the width and height after a re-size. I'm not planning on adding the ability to scroll through the tabs when the window is too small in height, instead I might stick it in a scroll panel for when it reaches a set minimum size. I'm prepared to recalculate all the panel positions if that's what it takes, but this also has the drawback that if it's done on a WINDOW_SIZE message, it will be distorted while the window is being re-sized. Any help greatly appreciated, and the final version will go into the code archives. Cheers Matt

matibee (Posted 2012) [#2]

Quick update. Looking more into JoshK's source, I've added an event hook and adjusting the position of the panels on the fly. It's not finished, but so far so good :)

jsp (Posted 2012) [#3]

For the layout, copy the stuff over I added: SuperStrict Import maxgui.drivers Incbin "incbin//sidetab_leftedge.png" Incbin "incbin//sidetab_rightedge.png" Incbin "incbin//sidetab_topedge.png" Incbin "incbin//sidetab_btmedge.png" Incbin "incbin//sidetab_coltop_active.png" Incbin "incbin//sidetab_coltop_inactive.png" Incbin "incbin//sidetab_colleft_active.png" Incbin "incbin//sidetab_colleft_inactive.png" Incbin "incbin//sidetab_colmidtop_active.png" Incbin "incbin//sidetab_colmidbtm_active.png" Incbin "incbin//sidetab_colmid_inactive.png" Incbin "incbin//sidetab_colbtm_active.png" Incbin "incbin//sidetab_colbtm_inactive.png" Incbin "incbin//sidetab_corner_tl.png" Incbin "incbin//sidetab_corner_tr.png" Incbin "incbin//sidetab_corner_bl.png" Incbin "incbin//sidetab_corner_br.png" '---------------------------------------------------------------------------------------------------------------------- Type sideTabPixmapPair Field activePixmap:TPixmap Field inactivePixmap:TPixmap End Type '---------------------------------------------------------------------------------------------------------------------- Type sideTab Global stImages:TPixmap[17] Global STIC_LEFT_EDGE% = 0 Global STIC_RIGHT_EDGE% = 1 Global STIC_TOP_EDGE% = 2 Global STIC_BTM_EDGE% = 3 Global STIC_COL_TOP_ACTIVE% = 4 Global STIC_COL_TOP_INACTIVE% = 5 Global STIC_COL_LEFT_ACTIVE% = 6 Global STIC_COL_LEFT_INACTIVE% = 7 Global STIC_COL_MID_TOP_ACTIVE% = 8 Global STIC_COL_MID_BTM_ACTIVE% = 9 Global STIC_COL_MID_INACTIVE% = 10 Global STIC_COL_BTM_ACTIVE% = 11 Global STIC_COL_BTM_INACTIVE% = 12 Global STIC_TL_CORNER% = 13 Global STIC_TR_CORNER% = 14 Global STIC_BL_CORNER% = 15 Global STIC_BR_CORNER% = 16 Global borderSize:Int Global tabWidth:Int Field parent:TGadget Field xPos:Int Field yPos:Int Field currentTab:Int = -1 Field leftBorderPanel:TGadget Field tabs:TList Field tabPanels:TList Field tabPixmaps:TList Field client:TGadget '----------------------------------------------------------------------------------------------------------------- Function create:sideTab( parent:TGadget, X:Int, Y:Int, Width:Int, Height:Int, r:Int, g:Int, b:Int ) Local st:sideTab = New sideTab st.parent = parent st.tabs = New TList st.tabPanels = New TList st.tabPixmaps = New TList st.xPos = X st.yPos = Y If ( stImages[0] = Null ) LoadImages() End If Local x2:Int = X + tabWidth ' start of first corner Local x3:Int = x2 + borderSize ' start of client area Local x4:Int = X + Width - bordersize ' end of client area Local y2:Int = Y + borderSize ' start of client area Local y3:Int = Height - bordersize Local cliHeight:Int = Height - bordersize * 2 Local cliWidth:Int = Width - tabWidth - bordersize * 2 Local p:Tgadget = CreatePanel( x2, Y, borderSize, borderSize, parent ) ' top left corner SetGadgetLayout( p, 1,0,1,0 ) SetGadgetPixmap( p, stImages[STIC_TL_CORNER] ) p = CreatePanel( x3, Y, cliWidth, bordersize, parent ) ' top border SetGadgetLayout( p, 1,1,1,0 ) SetGadgetPixmap( p, stImages[STIC_TOP_EDGE] ) p = CreatePanel( x4, Y, bordersize, bordersize, parent ) ' top right corner SetGadgetLayout( p, 0,1,1,0 ) SetGadgetPixmap( p, stImages[STIC_TR_CORNER] ) st.client = CreatePanel( x3, y2, cliWidth, cliHeight, parent ) ' client area SetGadgetLayout( st.client, 1,1,1,1 ) 'SetPanelColor( st.client, r, g, b ) 'SetPanelColor( st.client, 128, 0, 0 ) st.leftBorderPanel = CreatePanel( x2, y2, bordersize, cliHeight, parent ) ' left border SetGadgetLayout( st.leftBorderPanel, 1,0,1,1 ) SetGadgetPixmap( st.leftBorderPanel, stImages[STIC_LEFT_EDGE] ) 'SetPanelColor( st.leftBorderPanel , 128, 0, 0 ) p = CreatePanel( x4, y2, bordersize, cliHeight, parent ) ' rught border SetGadgetLayout( p, 0,1,1,1 ) SetGadgetPixmap( p, stImages[STIC_RIGHT_EDGE] ) p = CreatePanel( x2, y3, bordersize, bordersize, parent ) ' bottom left corner SetGadgetLayout( p, 1,0,0,1 ) SetGadgetPixmap( p, stImages[STIC_BL_CORNER] ) p = CreatePanel( x4, y3, bordersize, bordersize, parent ) ' bottom right corner SetGadgetLayout( p, 0,1,0,1 ) SetGadgetPixmap( p, stImages[STIC_BR_CORNER] ) p = CreatePanel( x3, y3, cliWidth, bordersize, parent ) ' bottom border SetGadgetLayout( p, 1,1,0,1 ) SetGadgetPixmap( p, stImages[STIC_BTM_EDGE] ) Return st End Function '----------------------------------------------------------------------------------------------------------------- Function LoadImages() stImages[STIC_LEFT_EDGE] = LoadPixmap( "incbin::incbin//sidetab_leftedge.png" ) stImages[STIC_RIGHT_EDGE] = LoadPixmap( "incbin::incbin//sidetab_rightedge.png" ) stImages[STIC_TOP_EDGE] = LoadPixmap( "incbin::incbin//sidetab_topedge.png" ) stImages[STIC_BTM_EDGE] = LoadPixmap( "incbin::incbin//sidetab_btmedge.png" ) stImages[STIC_COL_TOP_ACTIVE] = LoadPixmap( "incbin::incbin//sidetab_coltop_active.png" ) stImages[STIC_COL_TOP_INACTIVE] = LoadPixmap( "incbin::incbin//sidetab_coltop_inactive.png" ) stImages[STIC_COL_LEFT_ACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colleft_active.png" ) stImages[STIC_COL_LEFT_INACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colleft_inactive.png" ) stImages[STIC_COL_MID_TOP_ACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colmidtop_active.png" ) stImages[STIC_COL_MID_BTM_ACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colmidbtm_active.png" ) stImages[STIC_COL_MID_INACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colmid_inactive.png" ) stImages[STIC_COL_BTM_ACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colbtm_active.png" ) stImages[STIC_COL_BTM_INACTIVE] = LoadPixmap( "incbin::incbin//sidetab_colbtm_inactive.png" ) stImages[STIC_TL_CORNER] = LoadPixmap( "incbin::incbin//sidetab_corner_tl.png" ) stImages[STIC_TR_CORNER] = LoadPixmap( "incbin::incbin//sidetab_corner_tr.png" ) stImages[STIC_BL_CORNER] = LoadPixmap( "incbin::incbin//sidetab_corner_bl.png" ) stImages[STIC_BR_CORNER] = LoadPixmap( "incbin::incbin//sidetab_corner_br.png" ) borderSize = PixmapWidth( stImages[STIC_TL_CORNER] ) ' borders must be square tabWidth = PixmapWidth( stImages[STIC_COL_BTM_ACTIVE] ) - borderSize End Function '----------------------------------------------------------------------------------------------------------------- Method AddTab( activePixmap:TPixmap, inactivePixmap:TPixmap ) If ( currentTab < 0 ) currentTab = 0 Local p:TGadget Local yStart:Int = yPos + borderSize For Local p:TGadget = EachIn tabPanels yStart :+ GadgetHeight( p ) Next Local yEnd:Int = yStart + borderSize If ( tabPanels.Count() = 0 ) p = CreatePanel( xPos, yStart, tabwidth + borderSize, borderSize, parent ) SetGadgetLayout( p, 1,0,1,0 ) 'SetPanelColor( p , 0, 0, 196 ) tabPanels.AddLast( p ) Else yStart :- borderSize yEnd :- borderSize End If p = CreatePanel( xPos, yStart + bordersize, bordersize, PixmapHeight( activePixmap ), parent ) SetGadgetLayout( p, 1,0,1,10) 'SetPanelColor( p , 0, 0, 196 ) yEnd :+ PixmapHeight( activePixmap ) tabPanels.AddLast( p ) Local pp:sideTabPixmapPair = New sideTabPixmapPair pp.activePixmap = activePixmap pp.inactivePixmap = inactivePixmap tabPixmaps.AddLast( pp ) p = CreatePanel( xpos, yStart + borderSize + PixmapHeight( activePixmap ), tabWidth + borderSize, .. borderSize, parent ) SetGadgetLayout( p, 1,0,1,0 ) '?????????????????????? 'SetPanelColor( p , 0, 0, 196 ) yEnd :+ borderSize tabPanels.AddLast( p ) p = CreatePanel( xpos + borderSize, yStart + borderSize, tabWidth + bordersize, .. PixmapHeight( activePixmap ), parent, PANEL_ACTIVE ) SetGadgetLayout( p, 1,0,1,0 ) 'SetPanelColor( p , 0, 0, 196 ) If ( tabs.Count() = 0 ) SetPanelPixmap( p, activePixmap ) Else SetPanelPixmap( p, activePixmap ) End If tabs.AddLast( p ) SetGadgetShape( leftBorderPanel, xpos + tabWidth, yEnd, borderSize, .. yPos + GadgetHeight( client ) - yEnd + borderSize ) AdjustActiveImages() End Method '----------------------------------------------------------------------------------------------------------------- Method AdjustActiveImages() Local tab:Int = 0 Local c:Int = 0 Local lasttab:Int = tabs.Count() - 1 For Local p:TGadget = EachIn tabPanels Select c Case 0 If tab = 0 If currentTab = tab SetPanelPixmap( p, stImages[STIC_COL_TOP_ACTIVE] ) Else SetPanelPixmap( p, stImages[STIC_COL_TOP_INACTIVE] ) End If End If Case 1 If currentTab = tab SetPanelPixmap( p, stImages[STIC_COL_LEFT_ACTIVE] ) Else SetPanelPixmap( p, stImages[STIC_COL_LEFT_INACTIVE] ) End If Case 2 If currentTab = tab If ( tab = lasttab ) SetPanelPixmap( p, stImages[STIC_COL_BTM_ACTIVE] ) Else SetPanelPixmap( p, stImages[STIC_COL_MID_BTM_ACTIVE] ) End If Else If currentTab = tab + 1 SetPanelPixmap( p, stImages[STIC_COL_MID_TOP_ACTIVE] ) Else If ( tab < lasttab ) SetPanelPixmap( p, stImages[STIC_COL_MID_INACTIVE] ) Else SetPanelPixmap( p, stImages[STIC_COL_BTM_INACTIVE] ) End If End If End Select c :+ 1 If ( c = 3 ) c = 1 tab :+ 1 End If Next Local i:Int = 0 For Local p:TGadget = EachIn tabs If ( currentTab = i ) SetGadgetPixmap( p, sideTabPixmapPair(tabPixmaps.ValueAtIndex( i )).activePixmap ) Else SetGadgetPixmap( p, sideTabPixmapPair(tabPixmaps.ValueAtIndex( i )).inactivePixmap ) End If i :+ 1 Next End Method '----------------------------------------------------------------------------------------------------------------- Method Poll( e:TEvent ) Local i:Int = 0 For Local p:TGadget = EachIn tabs If EventSource() = p Select EventID() Case EVENT_MOUSEDOWN ActivateTab( i ) End Select End If i :+ 1 Next End Method '----------------------------------------------------------------------------------------------------------------- Method ActivateTab( tabID:Int ) currentTab = tabID AdjustActiveImages() Local e:TEvent = New TEvent e.id = EVENT_GADGETACTION e.source = Self e.data = tabID PostEvent( e ) End Method '----------------------------------------------------------------------------------------------------------------- Method ActiveTab:Int( ) Return currentTab End Method '----------------------------------------------------------------------------------------------------------------- Method ClientArea:TGadget() Return client End Method '----------------------------------------------------------------------------------------------------------------- Method AdjustLayout() End Method End Type '---------------------------------------------------------------------------------------------------------------------- ' DEMO '---------------------------------------------------------------------------------------------------------------------- Global window:TGadget = CreateWindow( "Side tab test", 400, 200, 600, 600, Null, .. WINDOW_TITLEBAR | WINDOW_RESIZABLE | WINDOW_CLIENTCOORDS ) SetMinWindowSize( window, 600, 600 ) Global st:sideTab = sideTab.create( window, 4, 4, 290, 550, 255, 255, 255 ) st.AddTab( LoadPixmap( "incbin//sidetab_label_active.png" ), LoadPixmap( "incbin//sidetab_label_inactive.png" ) ) st.AddTab( LoadPixmap( "incbin//sidetab_label_active.png" ), LoadPixmap( "incbin//sidetab_label_inactive.png" ) ) st.AddTab( LoadPixmap( "incbin//sidetab_label_active.png" ), LoadPixmap( "incbin//sidetab_label_inactive.png" ) ) st.AddTab( LoadPixmap( "incbin//sidetab_label_active.png" ), LoadPixmap( "incbin//sidetab_label_inactive.png" ) ) st.AddTab( LoadPixmap( "incbin//sidetab_label_active.png" ), LoadPixmap( "incbin//sidetab_label_inactive.png" ) ) Global tabViews:TGadget[5] Global lbl:Tgadget tabViews[0] = CreatePanel( 0, 0, ClientWidth( st.ClientArea() ), ClientHeight( st.ClientArea() ), st.ClientArea() ) SetGadgetLayout( tabViews[0], 1,1,1,1 ) lbl=CreateLabel( "Tab 1", 0, 0, 40, 20, tabViews[0] ) SetGadgetLayout( lbl, 1,0,1,0 ) tabViews[1] = CreatePanel( 0, 0, ClientWidth( st.ClientArea() ), ClientHeight( st.ClientArea() ), st.ClientArea() ) SetGadgetLayout( tabViews[1], 1,1,1,1 ) lbl=CreateLabel( "Tab 2", 0, 0, 40, 20, tabViews[1] ) SetGadgetLayout( lbl, 1,0,1,0 ) tabViews[2] = CreatePanel( 0, 0, ClientWidth( st.ClientArea() ), ClientHeight( st.ClientArea() ), st.ClientArea() ) SetGadgetLayout( tabViews[2], 1,1,1,1 ) lbl=CreateLabel( "Tab 3", 0, 0, 70, 20, tabViews[2] ) SetGadgetLayout( lbl, 1,0,1,0 ) tabViews[3] = CreatePanel( 0, 0, ClientWidth( st.ClientArea() ), ClientHeight( st.ClientArea() ), st.ClientArea() ) SetGadgetLayout( tabViews[3], 1,1,1,1 ) lbl=CreateLabel( "Tab 4", 0, 0, 40, 20, tabViews[3] ) SetGadgetLayout( lbl, 1,0,1,0 ) tabViews[4] = CreatePanel( 0, 0, ClientWidth( st.ClientArea() ), ClientHeight( st.ClientArea() ), st.ClientArea() ) SetGadgetLayout( tabViews[4], 1,1,1,1 ) lbl=CreateLabel( "Tab 5", 0, 0, 70, 20, tabViews[4] ) SetGadgetLayout( lbl, 1,0,1,0 ) For Local i:Int = 1 To 4 HideGadget( tabViews[i] ) Next Repeat WaitEvent() st.Poll( CurrentEvent ) Select EventID() Case EVENT_GADGETACTION Select EventSource() Case st For Local i:Int = 0 To 4 HideGadget( tabviews[i] ) Next ShowGadget( tabviews[ EventData() ] ) End Select Case EVENT_WINDOWCLOSE End Case event_WINDOWSIZE st.AdjustLayout() EndSelect Forever

matibee (Posted 2012) [#4]

Perfect! And you did it all with SetGadgetLayout? I was convinced that wasn't even possible. Great job, thanks.

jsp (Posted 2012) [#5]

Biggest problem was to figure out which panel was meant, thus some SetGadgetColor inside the code to identify them :)

matibee (Posted 2012) [#6]

Agreed, the code's a bit of a mess, but it was really a proof of concept at that stage. Thanks to you, I'm now making it safe for human consumption ;)

matibee (Posted 2012) [#7]

Okay, everything updated for a final check over before I drop it in the code archives. It now has its own event handler, and managed panels so it acts kind of autonomously (no more Poll() or switching views required). Original image and download overwritten. Thanks again jsp. I really hope this community stays around for a while yet. BMax is a great language but the lack of activity here does worry me. If anyone wants to test on other OS's and post a screen shot I'd be really grateful (the above pic from WinXP). Cheers Matt Last edited 2012

jsp (Posted 2012) [#8]

Works fine here and looks quite cool! Well done.

matibee (Posted 2012) [#9]

Thanks again jsp. A code archive entry submitted, and the download zip now contains the photoshop doc I made and took the sample images from. Looking at your additions I've realised why I was having no luck with setgadgetlayout :/ My experience of setgadgetlayout was limited to using EDGE_ALIGNED on all four sides and I always assumed the arguments were left,top,right,bottom (as in x,y,w,h). Doh!

AdamRedwoods (Posted 2012) [#10]

Very nice! does this also support other orientations (ie horizontal alignment) in a top and bottom arrangement?

matibee (Posted 2012) [#11]

Other orientations?? :) No, I'm afraid not. I simply needed this orientation for my app and wasn't really planning on taking it any further. A mirrored version should be easy enough (ie tabs on the right), but top and bottom tabs would require a bit of work. My biggest fear is that its limitations will quickly become a major PITA if it's taken out of its comfort zone.

matibee (Posted 2012) [#12]

Well... I've just tried this on my fresh Ubuntu install :/ It looks like FLTK requires gadgets to start and end on certain pixel boundaries (say 8x8) or power of 2, so it's stretching all the panels. Does anyone know if that's usual? Going back to windows now with the fltk drivers to see what happens.