Again about grids (linking a images to a listview).

Just starting out? Need help? Post your questions and find answers here.
Joris
Addict
Addict
Posts: 890
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Again about grids (linking a images to a listview).

Post by Joris »

Hi,

In my work on converting my code from GB32 to PB I'm wondering how I can setup a listview with multiple columns and row (so that it becomes a grid like an excel page) where each cell get's it's own picture. The picture will be build up at runtime as they visualize user data which can change according to his data created.

Maybe it's easier if I sum up what must be possible (like I did in GB32) :
1) 8 or more rows set as default (by the user preferences);
2) multiple columns;
3) cells (items) with a fixed size (like 150 x 100);
4) extra columns 'automaticly' added at runtime when more data is loaded;
5) single cell selections (at every x-y-position, not a complete row);
6) detection of the column-ID and row-ID of that cell (to recover the exact data);
7) react on keyboard commands (go left, right, up, down);
8] scrollbars appearing if more columns (rows) are added.
9) remove, insert, move, copy cells to other x-y-positions;

I suppose most of these must be done with the listview api's, but I'm not sure as PB beginner.
If yes, I can do it, as I did this already in GB32, yet one question will be left then : how to link an ImageGadget to the listview (like an Imagelist in GB32 with the win api's) ?
If NO, then how to ?

When being bussy with listview api's I often thought of creating my own grid, as all those api's windows use for it's listview are incredible extensive. I found already a lot of sources related to creating a gird, also the listview.dll, but a lot of them are out of time (PB version 3 or 4 etc.), bad documented to use and others are much to complicated for my job.
So, if anyone has usefull up to date info or good links on this, all is welcome.

Thanks,

Joris
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
User avatar
einander
Enthusiast
Enthusiast
Posts: 744
Joined: Thu Jun 26, 2003 2:09 am
Location: Spain (Galicia)

Re: Again about grids (linking a images to a listview).

Post by einander »

This example (stripped from a big music project), shows some of the functionalities that you ask for.
Is implemented for ListIconGadget. I don't know if ListViewGadget admits columns.
You can replace the colored boxes with your images.

Code: Select all

EnableExplicit
Define Ev,Fn$
;
Structure FN
  OpFirst.I
  Oplast.I
  Lig.I
  Imglist.I
  SpSiz.I
  Bwi.I
  Bhe.I
  Item.I
  Array Img.I(0)  
EndStructure
;
Define Fn.Fn
Fn\Bwi=80 :Fn\Bhe=60 ;boxes Size
;
Macro GadRGB(Gad,RGB1=#Marfil,RGB2=#Dgreen)
  SetGadgetColor(Gad,1,RGB1)      
  SetGadgetColor(Gad,2,RGB2)    
EndMacro
;
Macro GadgetRight(Gad)  :  GadgetX(Gad)+GadgetWidth(Gad)  : EndMacro
;
Macro MkImgList(Cx,Cy,Siz,Flags=#ILC_COLOR32) 
  ImageList_Create_(Cx,Cy, Flags, 0, Siz) ;Ret Imagelist handle, or NULL si falla
  ;OJO: when finish using Image list, call ImageList_Destroy_(ImgList) ;<<<<<<<<<<<<<<<<<
EndMacro
;
Macro ReDrawGadget(Gad,Flags=#RDW_INVALIDATE|#RDW_UPDATENOW|#RDW_ERASE) 
  RedrawWindow_(GadgetID(Gad), 0, 0, Flags)
EndMacro      
;
Procedure AddLigItem(*Fn.Fn, T$=""); Add Image and Text to \LIG First Column
  With *Fn
    Protected LVI.LVITEM\Mask = #LVIF_IMAGE
    LVI\IItem  = \Item      
    LVI\IImage = \Img(\Item) 
    SendMessage_(GadgetID(\Lig), #LVM_INSERTITEM, 0, @LVI)
    SetGadgetItemText(\Lig,\Item,T$,0)
  EndWith  
EndProcedure
;
Procedure DrawFnShape(*Fn.Fn,Fn$) ; Draw here your Image
  With *Fn
    Protected Img=CreateImage(-1,\BWi,\BHe)
    StartDrawing(ImageOutput(Img))
    Box(0,0,OutputWidth(),OutputHeight(),Random(#White))
    DrawText(\Bwi-20,2,Str(\Item),#Yellow,0)
    StopDrawing()
    ProcedureReturn Img
  EndWith
EndProcedure 
;
Procedure LigImgList(*Fn.Fn,Siz,Flags=#ILC_COLOR24)   ; init ImageList and assign to ListIconGadget
  With *Fn
    If \Imglist:ImageList_Destroy_(\ImgList) : EndIf
    \Imglist=MkImgList(\Bwi,\Bhe,Siz,Flags)
    SendMessage_(GadgetID(\LIG), #LVM_SETIMAGELIST, #LVSIL_SMALL, \ImgList)
  EndWith
EndProcedure 
;
Procedure  MkFn(*Fn.Fn)
  With *Fn
    Protected I,J,A$,Le=GetGadgetState(\SpSiz),Img
    Protected Siz=Pow(2,Le)*2
    ClearGadgetItems(\LIG) ; populate the listicon
    Dim \Img(Siz)
    LigImgList(*Fn,Siz)
    For I=1 To Siz
      A$=""
      For J=0 To Le-1
        If I>>J&1  ;Btst(I,J)
          A$+Str(J+1)
        EndIf  
      Next
      If Len(A$)
        If GetGadgetState(\OpFirst):  A$="0"+A$:  EndIf
        If GetGadgetState(\Oplast) :  A$+"0"   :  EndIf
        Img=Drawfnshape(*Fn,A$)
        ResizeImage(Img,\Bwi,\Bhe)  
        If IsImage(Img)
          \Img(\Item)=ImageList_Add_(\ImgList, ImageID(Img), 0)    
          AddLigitem(*Fn,A$)  
          If \Item<30:ReDrawGadget(\LIG):EndIf ; to prevent flick
          If IsImage(Img):FreeImage(Img):EndIf  
          \Item+1
        EndIf  
      EndIf  
    Next
  EndWith  
EndProcedure
;
Procedure AddZero(*Fn.Fn,First=0)
  With *Fn
    Protected I,A$,Img,OnFirst=GetGadgetState(\OpFirst),OnLast=GetGadgetState(\Oplast)
    For I =0 To CountGadgetItems(\LIG)-1
      A$=GetGadgetItemText(\LIG,I,0)
      If A$
        If First
          If OnFirst :  If Left(A$,1)<>"0" : A$="0"+A$    :  EndIf  
            Else     :  If Left(A$,1)="0"  : A$=Mid(A$,2) :  EndIf  
          EndIf
        Else
          If OnLast  : If Right(A$,1)<>"0" : A$+"0"               :  EndIf  
            Else     : If Right(A$,1)="0"  : A$=Left(A$,Len(A$)-1):  EndIf  
          EndIf
        EndIf
        Img=Drawfnshape(*Fn,A$)
        ImageList_Replace_(\Imglist,I,ImageID(Img),0) ; replace Image
        DeleteObject_(ImageID(Img))  
        FreeImage(Img)
        SetGadgetItemText(\LIG,I,A$,0) 
      EndIf
    Next
  EndWith
EndProcedure
;<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
OpenWindow(0, 100, 100,700,500 ,"", #PB_Window_SystemMenu|#PB_Window_Maximize)
SetWindowColor(0,$22)
Define Wi=WindowWidth(0),He=WindowHeight(0)
With Fn
  \LIG=ListIconGadget(-1, 10, 10, 600, \Bhe*10+16, "Image", 150, 
                      #PB_ListIcon_MultiSelect | #PB_ListIcon_FullRowSelect )
  SetGadgetAttribute(\LIG,  #PB_ListIcon_DisplayMode, #PB_ListIcon_SmallIcon)
  GadRGB(\LIG,$Abcd,$22)
  Define X=GadgetRight(\LIG)+20,Y=GadgetY(\LIG)
  \SpSiz=SpinGadget(-1,X,Y,70,20,1,6,#PB_Spin_Numeric):Y+21
  TextGadget(#PB_Any,X,Y,70,20,"Max Chars"):Y+40
  \OpFirst=CheckBoxGadget(-1,X,Y,120,20,"Add Zero start"):Y+20  
  \OpLast=CheckBoxGadget(-1,X,Y,120,20,"Add Zero end")  
  SetGadgetState(\SpSiz,3)
  LigImgList(Fn,1000) ;maximum items for ImageList
  Mkfn(Fn)
  Repeat
    If GetAsyncKeyState_(27)&$8000 :  Break : EndIf
    EV=WaitWindowEvent()
    Select Ev
      Case #PB_Event_Gadget
        Select EventGadget()
          Case \Lig
            If EventType()=  #PB_EventType_LeftClick
              Fn$=GetGadgetItemText(\Lig,GetGadgetState(\Lig),0)
              SetWindowTitle(0,Fn$)  
            EndIf
          Case \SpSiz
            If  EventType()= #PB_EventType_Change 
              ReDrawGadget(\SpSiz)
              \Item=0
              Mkfn(Fn)
            EndIf
          Case \OpFirst :   AddZero(Fn,#True)
          Case \OpLast  :   AddZero(Fn)
        EndSelect
    EndSelect
  Until EV=#PB_Event_CloseWindow
  ImageList_Destroy_(\ImgList)
EndWith
End 
Joris
Addict
Addict
Posts: 890
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Re: Again about grids (linking a images to a listview).

Post by Joris »

Thanks einander.

Got to figure out some things of this now.
(and still so many other PB-things to go thru too...)
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
User avatar
netmaestro
PureBasic Bullfrog
PureBasic Bullfrog
Posts: 8451
Joined: Wed Jul 06, 2005 5:42 am
Location: Fort Nelson, BC, Canada

Re: Again about grids (linking a images to a listview).

Post by netmaestro »

Check out the ESGrid and EXGrid products from srod. They aren't free but they are very powerful and versatile and the cost is minimal. They are written in PureBasic and iirc if you buy the product you get source with it too. Not 100% sure on the source part but I think so. They are a good deal, that I'm sure of.
BERESHEIT
Joris
Addict
Addict
Posts: 890
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Re: Again about grids (linking a images to a listview).

Post by Joris »

Those ESGrid and EXGrid seems nice but to complicated for my job (now).

I'm still figuring out how to setup the listview as a grid with pictures in PB, like I (succesfully) did in GB32.
At least quit a few sendmessages will be needed, as PB only has minimal properties to set for the listview (sadly).
Yet the more being bussy with PB, I'm thinking of leaving the creation of PB-DLL's for GB32 behind and do all in PB...
It will still be quit a way to go.

Here is a sample explaining what I wont :

...

In this sample the pictures are not created yet, but a imagelist is linked to the listview showing the blue (selected boxes).
For the code I use a few api's mixed with GB32 code.
In PB I don't know how to, probably must figure out all api's for this, unless someone has already done this.
I don't even know if a control like the imagelist exist or can act like one in PB, the ImageGadget ?

The code from einander also needs api's for this, but he uses a ListIconGadget, while in GB32 it is really a Listview...
Last edited by Joris on Thu Mar 17, 2016 10:36 am, edited 1 time in total.
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
Joris
Addict
Addict
Posts: 890
Joined: Fri Oct 16, 2009 10:12 am
Location: BE

Re: Again about grids (linking a images to a listview).

Post by Joris »

My problem on this is solved. In the source above change this rule :

Code: Select all

SetGadgetAttribute(\LIG, #PB_ListIcon_DisplayMode, #PB_ListIcon_SmallIcon)
Into this :

Code: Select all

SetGadgetAttribute(\LIG, #PB_ListIcon_DisplayMode, #PB_ListIcon_List)
and the list become horizontaly filled (what I needed).
(I thought this was the problem because of listicongadget instead of listviewgadget, like I had to use in GB32.)

Thanks again (especially einander).
Yeah I know, but keep in mind ... Leonardo da Vinci was also an autodidact.
Post Reply