Panel Gadget Tab Images

Windows specific forum
IdeasVacuum
Always Here
Always Here
Posts: 6425
Joined: Fri Oct 23, 2009 2:33 am
Location: Wales, UK
Contact:

Panel Gadget Tab Images

Post by IdeasVacuum »

We can define the tab size:

Code: Select all

If OpenWindow(0,0,0,500,250,"Window",#PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  PanelGadget(1,10,10,480,230)
    For a=1 To 5
      AddGadgetItem(1,-1,"Paneltab " + Str(a),0,0)
    Next
  CloseGadgetList()
  
  PokeW(@lparam+2,38) ;TAB HEIGHT 38pix
  SendMessage_(GadgetID(1),#TCM_SETITEMSIZE,0,lparam)
  SetGadgetState(1,0)
Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
EndIf
.... and we can have just an image (no text) on a tab:

Code: Select all

AddGadgetItem(#Panel, -1, "", ImageID(My_Image))
.... but how can we force the image size to fit the tab (standard image size of 16 x 16 is way too small!)? I would like to use images that are 44 pix wide, 38 pix high, as per a related Android App.
IdeasVacuum
If it sounds simple, you have not grasped the complexity.
IdeasVacuum
Always Here
Always Here
Posts: 6425
Joined: Fri Oct 23, 2009 2:33 am
Location: Wales, UK
Contact:

Re: Panel Gadget Tab Images

Post by IdeasVacuum »

Hmm, I can fake it with Container Gadgets (Or Canvas as a Container) and Canvas 'tabs'
IdeasVacuum
If it sounds simple, you have not grasped the complexity.
User avatar
ChrisR
Addict
Addict
Posts: 1127
Joined: Sun Jan 08, 2017 10:27 pm
Location: France

Re: Panel Gadget Tab Images

Post by ChrisR »

You should be able to do it quite easily using the great TabBarGadet, by adapting it a little for the image size.

Code: Select all

; StarGate tabbargadget: https://www.unionbytes.de/libs/tabbargadget/ 
; In TabBarGadget.pbi change at line 332: \ImageSize = 36 
; If Width<>Height: in lines 925,927,931 (and 883,885) change TabBarGadgetInclude\ImageSize, TabBarGadgetInclude\ImageSize => 48, 36.
; Better To implement TabBarGadgetInclude\ImageWidth, TabBarGadgetInclude\ImageHeight to avoid any hard coded
XIncludeFile "TabBarGadget.pbi"

Enumeration
  #Window
  #Gadget
  #Cont_0
  #Txt_0
  #Cont_1
  #Txt_1
  #Imag
EndEnumeration

;#TBGItemColor_Default = $F0F0F0
;#TBGItemColor_Selected = $C8C8C8

UsePNGImageDecoder()
CatchImage(#Imag, ?Eyes_png_start, ?Eyes_png_end - ?Eyes_png_start)

OpenWindow(#Window, 0, 0, 400, 200, "TabBarGadget", #PB_Window_MinimizeGadget|#PB_Window_ScreenCentered)
TabBarGadget(#Gadget, 10, 10, WindowWidth(#Window)-20, 36, #TabBarGadget_NoTabMoving|#TabBarGadget_BottomLine, #Window)

AddTabBarGadgetItem(#Gadget, 0, "Tab_0", ImageID(#Imag))
;SetTabBarGadgetItemColor(#Gadget, 0, #PB_Gadget_BackColor, #TBGItemColor_Selected)
ContainerGadget(#Cont_0, 10, 46, WindowWidth(#Window)-20, 140, #PB_Container_Raised)
TextGadget(#Txt_0, 20, 20, 100, 22, "Text Tab_0")
CloseGadgetList()   ; #Cont_0

AddTabBarGadgetItem(#Gadget, 1, "Tab_1", ImageID(#Imag))
;SetTabBarGadgetItemColor(#Gadget, 1, #PB_Gadget_BackColor, #TBGItemColor_Default)
ContainerGadget(#Cont_1, 10, 46, WindowWidth(#Window)-20, 140, #PB_Container_Raised)
TextGadget(#Txt_1, 20, 20, 100, 22, "Text Tab_1")
CloseGadgetList()   ; #Cont_1
HideGadget(#Cont_1, #True)
SetTabBarGadgetItemState(#Gadget, 0, #TabBarGadget_Selected)

Repeat
  Select WaitWindowEvent()
      
    Case #PB_Event_CloseWindow
      End
      
    Case #PB_Event_Gadget
      Select EventGadget()
        Case #Gadget
          Select EventType()
            Case #TabBarGadget_EventType_Change
              Debug "Tab "+Str(GetTabBarGadgetItemPosition(#Gadget, #TabBarGadgetItem_Event))+" is active."
              Select GetTabBarGadgetItemPosition(#Gadget, #TabBarGadgetItem_Event)
                Case 0
                  HideGadget(#Cont_1, #True) : HideGadget(#Cont_0, #False)
                  ;SetTabBarGadgetItemColor(#Gadget, 0, #PB_Gadget_BackColor, #TBGItemColor_Selected) : SetTabBarGadgetItemColor(#Gadget, 1, #PB_Gadget_BackColor, #TBGItemColor_Default)
                Case 1
                  HideGadget(#Cont_0, #True) : HideGadget(#Cont_1, #False)
                  ;SetTabBarGadgetItemColor(#Gadget, 0, #PB_Gadget_BackColor, #TBGItemColor_Default) : SetTabBarGadgetItemColor(#Gadget, 1, #PB_Gadget_BackColor, #TBGItemColor_Selected)
               EndSelect
          EndSelect
      EndSelect
      
  EndSelect
ForEver

DataSection
  Eyes_png_start:
    Data.q $0A1A0A0D474E5089,$524448490D000000,$2400000024000000,$9800E10000000608,$4752730100000098
    Data.q $0000E91CCEAE0042,$0000414D41670400,$00000561FC0B8FB1,$0000735948700900,$C701C30E0000C30E
    Data.q $494307000064A86F,$6D96ED4758544144,$DCF3CFC71567548C,$3BB6F3B9DEE77BF7,$D0897128A5D0EFB0
    Data.q $5356D0D0AC1696B2,$312F8D687E8C496D,$A4D536B49B56C486,$BF135A86B131B589,$2D2D144D6B46C1F8
    Data.q $80974B29A143428A,$B17616AE94AE9BAC,$E67733B0ECECCEFB,$71B201D8678F3FBE,$9326FEE0FC1FA8A1
    Data.q $739FFCE7BDCDCEE7,$B32CCB32C0CE73CE,$A7C9AF58D218FFCC,$36DCAA54ADB9789F,$761880C372427E72
    Data.q $056ABDD0F2BA3A02,$4A80A53E41CAEDAC,$A1F63F3B93004839,$74149663FED78D23,$C9DD9082303FC3DF
    Data.q $B2A5BD2A1B877A88,$4CB222494CF4FB7F,$B358569ACC515B9A,$0102A8164D6D032A,$14DB4984D490C581
    Data.q $771BC88C2142108F,$8B7FB98685E3A47F,$3354C7E47A1E8245,$6263FFF74717B48D,$17C563755299C1EA
    Data.q $74CC1462201F5512,$A42A59604DCD321A,$E03C73C1C8AA0A2D,$41CA848042760061,$D84BD2B15E6875D7
    Data.q $E8958BA76352A729,$BEF42FD9E8A2CA31,$FCFA09165D7370DD,$20423B082234E7AE,$5C2B1FAE29989ADF
    Data.q $5460119F10265DD4,$2046120880D54902,$006951C088A8C006,$2814240C0B200584,$695330397264122B
    Data.q $378A0C99B20B0D50,$EFEE7A133EAC86AB,$4B770D33DED5F87F,$C56DDE5F03D048B2,$45C2F27B11B9760C
    Data.q $020423C077985927,$914BC5A7C5011C74,$B11EA020E23CAFAA,$0384BF086847816E,$141924400A9628E3
    Data.q $2B2D5D053A7480CD,$3A7252AE56AAED61,$C9FB9B5BA16DA20A,$1A118BAF05B277E3,$18A2823DEDFC3C2B
    Data.q $4ADE87CF36DAA079,$83125F17547C942D,$50C51CDFC624462B,$B017DE0273470122,$05041146383FEBA0
    Data.q $8448A20959F15538,$942B983C54E02220,$BC0C4882085D77C0,$F73F7BC20A594ADA,$70D065F87FA3E9A5
    Data.q $49081802EEDC057F,$64566F30D36EE591,$10A5E2A538D11443,$DE3867F5C745224A,$7A120890851587AB
    Data.q $423A309A6024A90C,$AE8A1F51C2EB778C,$A0C246E3CDD696A7,$CEC6C6E76715CF16,$0BD5ABEB43A3A346
    Data.q $3179E0B73FEE718F,$9DF5B3F5BBD42257,$189ED0186B4A848B,$5A2C43F0FAC7C1CB,$C372209A4C628E82
    Data.q $D91129A0A8A6B8B0,$8605DADDB70CD3D8,$F58F817831A2B189,$49162C250FC2D185,$CC292658F148A134
    Data.q $2A3229329FF25367,$7071E6C762CD8A90,$E8F9AD35F7EDA6EB,$6435123F1EBFBEE6,$F36CB7EFA274155C
    Data.q $D93469FF70F21E27,$1DF5C10CA160D583,$D528A20E22AF5274,$54C4555D29A6B972,$DF6E43D5DCF7CA92
    Data.q $61BA06DDD35861F4,$8E491E2A81CE7140,$D2EFC024AE894261,$DAC83D56A6E7B096,$CAA28FEF2D94C9F2
    Data.q $5997D0B10CE7A15B,$FFBB7E192816AE18,$E1D594D5C64358F0,$0E44B2FD75318A78,$28C91E6557190AA8
    Data.q $9B029CBC5EA62B19,$A13C70F02C3C3886,$8297318D8F35AC8A,$EA6B8586D02DEDD5,$966C73B17AA4F606
    Data.q $3C9F2BB461642510,$C624CF903D35BAB1,$0492DE04A61E590D,$62563297F5D2D07A,$DF3BFD7EF789A93A
    Data.q $D3FCF4162C24344F,$FC4A27BE95248A9F,$5CE4A86E7EC28AA7,$E22E81AE96E09936,$D0B9D10CAAF43671
    Data.q $E6C6A6CB9A8294AB,$9D4EA7C58CEFBBD8,$1954E4C3CE06A7E5,$411606F989631F7C,$2768A942E17139EC
    Data.q $686D94F50D263FD4,$73B9BC2F7D1FBEEE,$87BC0DE3B3BBA975,$D4C95EAE84E9E43E,$DF15FE1FF4CB8B95
    Data.q $B166F628E533F5B0,$805E79D7CE7074C9,$499266E6CB90A31B,$36820B2A3AEFB8EB,$FC7F799CEFBB1AAF
    Data.q $2A4FBF99D2B3C9F8,$1240AC30123DE717,$BE9BE12257234283,$77D9FB9D22880DEB,$E8A545EC0EC77977
    Data.q $111DF6F8F87ED0E3,$D4A508C8CC19FD8B,$28B4754BC1FAFA39,$2BC14872C3099742,$51558D12AACC12A8
    Data.q $6D2CAB13B1104504,$EE3AE839CD7E539A,$709F1B7FB3FBF8C8,$AE2F3D37C2E614F6,$8B09FB148245DD60
    Data.q $894DCDB3894D7356,$61B16B5B1D16F6F1,$F4FE35FA3D4F2AF9,$4F33F4D051548FE3,$50897F81776B037C
    Data.q $0FDDEB61FB63C19D,$8FC0BAC2E7134888,$CC9E9D264F4F08AD,$4A323F3F9DAF53A6,$96D9261C15966C40
    Data.q $869A6DBA8380EC01,$2D3673F9C8C357AD,$2A6B5AF723B3A5FF,$0CAF198630CE691A,$743D1E11B25B1DF6
    Data.q $6CEA8292C0B571B0,$2F02162E0433B1D9,$54F38CE79B8EAA56,$9A9E1ECA6B97D92A,$F6586C74CC268C29
    Data.q $691CDB49ED271C36,$C432D6DAD53D6AE9,$F3BAFB8E5315F763,$1AFF1E156CC867B6,$A395E8F470333205
    Data.q $3EF0FFA829AE3D7D,$CDEAAD4EFDF361BE,$C601185124A50162,$73932274FD0C345E,$697B7E06E85CB953
    Data.q $B95EF395ADDEB4BE,$B135E7CE52C2B038,$A3DDEFB175A38B53,$9F3A76DB39AE566B,$5338D7EFB4389F6B
    Data.q $170232E86B25983E,$9FD93B69935A6D99,$0F0DAF9FD8E1C4D0,$E796C341F9F0AEBD,$FC5CEAB57E5781CA
    Data.q $24CB57E438BE654D,$BA9B634F384039A8,$2469C5128DC51145,$7307E2C36669A06B,$3B17B7D939D508CD
    Data.q $F428A256E6B0CEF8,$75BAF3187BF000EE,$F8857AD2EA60D943,$EB9E633E7F52FB14,$4082C38B2AB1DBCC
    Data.q $82ED0CB25A1533DE,$44941E496447A9AE,$D7AB0D8BEF607AB1,$C2D9EDACEA82BAE7,$9515662AAA857671
    Data.q $4DA4335DBC6945DC,$99769C55A96EEC38,$2B4CB69ADB39B3B9,$AAEA2864309F2894,$CF914D09F2A9A234
    Data.q $9793F17E8F6BBA62,$B5C7EFE8B08DFB8E,$6B5B2C179F37CAF8,$44DAE67152D82CE1,$F650B16787015385
    Data.q $95C18D51577E20C2,$3F77F5F4E3CD376D,$21B946E9A792E0F9,$79EA0BFDDA9E7541,$F1D9380ACF2E5AAE
    Data.q $1E028F3285B3023D,$AFFD9E17E5FF3AA1,$00A7FF32CCB32C84,$1B40AA308E6813FC,$454900000000F37C
    Data.b $4E,$44,$AE,$42,$60,$82
  Eyes_png_end:
EndDataSection
IdeasVacuum
Always Here
Always Here
Posts: 6425
Joined: Fri Oct 23, 2009 2:33 am
Location: Wales, UK
Contact:

Re: Panel Gadget Tab Images

Post by IdeasVacuum »

Thanks ChrisR

The Tabbargadget is impressive (download currently not working).

I have however gone for using the Canvas approach as I can in fact then use the same tab images used in the Android version of the program.
IdeasVacuum
If it sounds simple, you have not grasped the complexity.
RASHAD
PureBasic Expert
PureBasic Expert
Posts: 4635
Joined: Sun Apr 12, 2009 6:27 am

Re: Panel Gadget Tab Images

Post by RASHAD »

Hi

Code: Select all


CreateImage(0,64,32)                           
  StartDrawing(ImageOutput(0))
  DrawingMode(#PB_2DDrawing_Gradient)     
  BackColor($1EFDFD)
  FrontColor($7878FE)
  BoxedGradient(0, 0, 64, 26)               
  Box(0,0,64,32)
  DrawingMode(#PB_2DDrawing_Transparent)                         
  DrawText(4, 8, "Panel 1",#Red)                     
StopDrawing()

CreateImage(1,64,32)                           
  StartDrawing(ImageOutput(1))           
  Box(0,0,64,32,$BDFEBA)
  DrawingMode(#PB_2DDrawing_Transparent)                         
  DrawText(4, 8, "Panel 2",#Black)                           
StopDrawing()

Imlist = ImageList_Create_(64,32,#ILC_COLOR32,2,10)   
ImageList_Add_(Imlist,ImageID(0),0)                   
ImageList_Add_(Imlist,ImageID(1),0)

Procedure sizeCB()
  ResizeGadget(0,10,10,WindowWidth(0)-20,WindowHeight(0)-20)
EndProcedure                   

OpenWindow(0,0,0,400,300,"Full Control Color Panel Gadget",#PB_Window_SystemMenu| #PB_Window_SizeGadget| #PB_Window_ScreenCentered)
SetWindowColor(0,$000000)
WindowBounds(0,400,300,#PB_Default,#PB_Default)

PanelGadget(0,10,10,380,280)
SendMessage_(GadgetID(0),#TCM_SETPADDING,0,1|2<<16)   
SendMessage_(GadgetID(0),#TCM_SETIMAGELIST,0,Imlist)
  AddGadgetItem(0,0,"")
  ButtonGadget(2, 10, 15, 80, 30,"Tab 1 Button 1")
  ButtonGadget(3, 95, 15, 80, 30,"Tab 1 Button 2")
  AddGadgetItem(0,1,"")
  ButtonGadget(4, 10, 15, 80, 30,"Tab 2 Button 3")
  ButtonGadget(5, 95, 15, 80, 30,"Tab 2 Button 4")
CloseGadgetList()

t.TC_ITEM
t\mask = #TCIF_IMAGE
t\iImage = 0
SendMessage_(GadgetID(0),#TCM_SETITEM, 0, @t)
t\iImage = 1
SendMessage_(GadgetID(0),#TCM_SETITEM, 1, @t)

BindEvent(#PB_Event_SizeWindow,@sizeCB())

Repeat
  Select WaitWindowEvent()     
    Case #PB_Event_CloseWindow
      Quit = 1
      
  EndSelect
Until Quit = 1
Egypt my love
Mindphazer
Enthusiast
Enthusiast
Posts: 340
Joined: Mon Sep 10, 2012 10:41 am
Location: Savoie

Re: Panel Gadget Tab Images

Post by Mindphazer »

Hi RASHAD,
i'm using your tip to have different colors for my panel tabs, but do you think it could be possible to adapt each tab's width to the text ?
With your example, each tab's width is the same, no matter of the text...

Thank you !
MacBook Pro 14" M1 Pro - 16 Gb - MacOS 14 - Iphone 15 Pro Max - iPad at home
...and unfortunately... Windows at work...
Post Reply