Bilder in Listicons?

[RSBasic]

@Kiffi
Danke für dein Beispielcode und für deine Mühe. Sieht zwar ganz gut aus, aber dennoch finde ich das nicht so sinnvoll, wenn man es so macht, wie du in deinem Beispielcode gezeigt hast.
1. Denn, da du sowieso WinAPI-Konstanten verwendest (#SS_CENTERIMAGE, #SS_NOTIFY), kann man gleich komplett mit WinAPI machen.
2. Außerdem finde ich das unpraktisch, wenn für jeden Eintrag drei Gadgets erstellt werden müssen. Bei 100 Einträgen sind es schon 300 Gadgets, die zusätzlich erstellt werden müssen.
3. Und wie sieht es mit AutoResize aus? Wenn man sowas einbauen würde, dann gibt es nur Flacker-Probleme und das sieht dann nicht so schön aus. Man kann zwar versuchen, dass die Größe der Gadgets erst nach Abschluss der Fenstergrößenänderung angepasst wird, aber dennoch finde ich die Anzahl der Gadgets einfach zu viel für eine einfache Liste.
4. Und mit WinAPIs ginge es deutlich einfacher und hättest kaum Aufwand und Probleme.

Aber trotzdem danke für deine Mühe.

[RSBasic]

@NicTheQuick
SS_CENTERIMAGE sorgt dafür, dass der Text vertikal zentriert wird. Und SS_NOTIFY ist notwendig für die Markierung, wenn man raufklicken möchte. Sonst bekommt man keinen Event, wenn man raufklickt.

[Kiffi]

danke für die Rückmeldung und die vielen Verbesserungsvorschläge.

Zu meiner Verteidigung muss ich anmerken, dass ich Delle keine
Komplettlösung präsentieren wollte, sondern nur einen kleinen
So-Geht-Es-Auch - Code. Wie bereits geschrieben habe ich nicht
allzuviel Zeit in die Erstellung des Schnippsels gesteckt.

Deswegen möge man mir auch verzeihen, dass ich einen absoluten Pfad
verwendet habe (und nicht die #PB_Compiler_Home - Konstante,
die -- eben weil es ein Beispielcode ist -- hier ohnehin im produktiven
Code fehl am Platze wäre).

Und dass es beim Resizen flackern könnte und auch nicht für die
Darstellung von vielen Items geeignet ist, wird Delle schon merken,
wenn er damit arbeitet. Mea culpa!

WolltIchNurMalGesachtHamm ... Kiffi

[Danilo]

Wenn das ScrollBarGadget Änderungen live updaten könnte, hätte man es selbst zeichnen
und gestalten können. Da muß wohl wieder ein WindowCallback her für die Scrollbar-Nachrichten.

Code: Alles auswählen

Structure MeinGadgetItem
    image.i
    text.s
EndStructure

Global NewList items.MeinGadgetItem()
Global Dim background(1)

background(0) = RGB(255,255,255)
background(1) = RGB(200,200,200)

Procedure AddItem(image.i, text.s)
    AddElement(items())
    items()\image = image
    items()\text  = text
    SetGadgetAttribute(1,#PB_ScrollBar_Maximum,ListSize(items())*20)
EndProcedure

Procedure Draw(start)
    h = GadgetHeight(0)
    If start > ListSize(items())*20-h*20
        start - h
    EndIf
    If start
        firstItem = start/20
        offset    = start%20
    EndIf
    If StartDrawing(CanvasOutput(0))
        bck=firstItem&1
        ;Box(0,0,GadgetWidth(0),h,$FFFFFF)
        i=0
        ForEach items()
            i+1
            If i<=firstItem
                Continue
            EndIf
            Box(0,y-offset,GadgetWidth(0),20,background(bck))
            bck!1
            DrawingMode(#PB_2DDrawing_Transparent)
            DrawingFont(GetGadgetFont(#PB_Default))
            DrawText(25,y+3-offset,items()\text,0)
            If items()\image
                DrawImage(ImageID(items()\image),2,y+2-offset,16,16)
            EndIf
            y+20
            If y-offset >= h : Break : EndIf
        Next
        StopDrawing()
    EndIf
EndProcedure

If OpenWindow(0, 0, 0, 320, 220, "CanvasGadget", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    CanvasGadget(0, 10, 10, 280, 200)
    ScrollBarGadget(1,290,10,16,200,0,1,1,#PB_ScrollBar_Vertical)
    SetGadgetAttribute(1,#PB_ScrollBar_PageLength,GadgetHeight(0));/20)
    
    img = LoadImage(#PB_Any, #PB_Compiler_Home + "examples/sources/Data/Drive.bmp")
    For i = 0 To 1500
        AddItem(img,"CIMG"+RSet(Str(i),5,"0"))
    Next i
    
    Draw(0)
    
    Repeat
      Event = WaitWindowEvent()

      If Event = #PB_Event_Gadget And EventGadget() = 1
        Draw(GetGadgetState(1))
      EndIf    
      
    Until Event = #PB_Event_CloseWindow
  EndIf

Das ist auch nur ein Prototyp.

[Delle]

Zu meiner Verteidigung muss ich anmerken, dass ich Delle keine
Komplettlösung präsentieren wollte, sondern nur einen kleinen
So-Geht-Es-Auch - Code.

Eben! Und genau in die Richtung hab ich ja auch gedacht (ScrollGadget + manuelles draufzeichnen der Bilder).

Und ich hab maximal 20 Items... macht gesamt vielleicht 100 Gadgets, stört mich jetzt weniger...

Und dass es beim Resizen flackern könnte und auch nicht für die
Darstellung von vielen Items geeignet ist, wird Delle schon merken,
wenn er damit arbeitet. Mea culpa!

Resizing von was eigentlich? Dem Fenster? Brauch ich doch gar nicht

Das einzige "Problem" was ich jetzt noch habe, ist das sortieren/löschen/hinzufügen von Items der "Liste".

Da muss natürlich dann neu gezeichnet werden... möglichst ohne die (bereits vorhandenen) Bilder nochmals reinzuladen.

[RSBasic]

Das einzige "Problem" was ich jetzt noch habe, ist das sortieren/löschen/hinzufügen von Items der "Liste".

Das Hinzufügen wäre kein Problem. Aber Löschen und/oder Sortieren...
Mal angenommen, du hättest 50 Einträge, wie im Beispiel vorgegeben, dann hättest du ja 150 Gadgets. Wenn Jemand nun ein Eintrag (beispielsweise 1. Eintrag) löschen möchte, dann müssen dann alle nachfolgenden Gadgets (147) neu positioniert und neu eingefärbt werden. Die Bilder brauchen ja nicht neu gesetzt werden. Aber wenn jedesmal ein Eintrag entfernt wird, würde das ja ewig dauern (1-5 Sekunden?), bis alle 147 Gadgets neu positioniert und neu eingefärbt wurden. Ich habs zwar nicht gemessen, wie lange das ungefähr dauert, aber ich kann mir schon vorstellen, dass das Entfernen eines einzelnen Eintrages in dieser Form ziemlich "lange" dauern würde. Naja, du kannst es ja mal ausprobieren, wenn der Code fürs Entfernen veröffentlicht wird (oder du versuchs selber, so einen Code zu schreiben), und selbst entscheiden, ob das auch dann für dich i.O. ist. Ansonsten gibt es Alternativen zur Genüge.

[Delle]

Mal angenommen, du hättest 50 Einträge, wie im Beispiel vorgegeben, dann hättest du ja 150 Gadgets. Wenn Jemand nun ein Eintrag (beispielsweise 1. Eintrag) löschen möchte, dann müssen dann alle nachfolgenden Gadgets (147) neu positioniert und neu eingefärbt werden. Die Bilder brauchen ja nicht neu gesetzt werden. Aber wenn jedesmal ein Eintrag entfernt wird, würde das ja ewig dauern (1-5 Sekunden?), bis alle 147 Gadgets neu positioniert und neu eingefärbt wurden. Ich habs zwar nicht gemessen, wie lange das ungefähr dauert, aber ich kann mir schon vorstellen, dass das Entfernen eines einzelnen Eintrages in dieser Form ziemlich "lange" dauern würde. Naja, du kannst es ja mal ausprobieren, wenn der Code fürs Entfernen veröffentlicht wird (oder du versuchs selber, so einen Code zu schreiben), und selbst entscheiden, ob das auch dann für dich i.O. ist.

Du vergisst aber das man immer nur ~10 Items in dem ScrollGadget sieht... und die ersten 10 sind sicher schnell gezeichnet... wobei ich eben eher von maximal 20 Items ausgehe... nicht gleich 50. Denk mal das wird nicht länger als 1 Sekunde dauern...

Aber ohne Freegadget() und neuzeichnen geht es wohl nicht...

Ich mein bei Grafikprogrammen gehen doch schließlich solche "Thumbnail-Browser" auch ziemlich fix:

Ansonsten gibt es Alternativen zur Genüge.

Ja aber die sind allesamt hässlich

[RSBasic]

Du vergisst aber das man immer nur ~10 Items in dem ScrollGadget sieht... und die ersten 10 sind sicher schnell gezeichnet...

Ja das stimmt schon, aber so lange die Liste nicht fertig gezeichnet/erstellt wurde, kannst du die Liste nicht verwenden. Du musst erst warten, bis der Vorgang vollständig abgeschlossen ist, erst dann kannst du raufklicken, scrollen u.ä.
Wenn man das umgehen möchte, müsste man das dann im Thread durchführen, aber das wäre dann noch langsamer, was aber sowieso keine gute Idee ist, wenn man aus dem Thread heraus auf die Gadgets zugreift.

Ich mein bei Grafikprogrammen gehen doch schließlich solche "Thumbnail-Browser" auch ziemlich fix:

Da wurde es auch ganz anders entwickelt, als die Version von Kiffi. In solchen Programmen sind bestimmt keine 100 Sub-Controls (oder von mir aus 60 für 20 Einträge ) vorhanden, die jedesmal neu positioniert werden müssen, sondern nur 1 Control.
Im ersten Screenshot sieht es nach einem normalen ExplorerListGadget aus. Da wurde nur die Bild-Größe der jeweiligen Items auf 64x64 oder 128x128 vergrößert.
Im zweiten Screenshot kann man es zwar nicht so gut erkennen, aber es sieht auch so aus, dass das ein ExplorerGadget oder ListIconGadget ist.

[mk-soft]

Ich finde man muss nicht immer alle Gadgets die Farben neu setzen. Es reicht ja die zu letzt selektierte Zeile die zu aktualliesieren.

@Kiffi
sehr gutes Beispiel...

Code: Alles auswählen

EnableExplicit

Define newX, newY, newW, newH
Define SampleImage, Counter, WWE
Define SelectedRowIndex = -1

Structure sRow
  ImageGadget.i
  TextGadget1.i
  TextGadget2.i
EndStructure

Global NewList Row.sRow()

#Window = 0
#ScrollAreaGadget = 0

OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 200, 600, "")

ScrollAreaGadget(#ScrollAreaGadget, 0, 0, WindowWidth(#Window), WindowHeight(#Window), WindowWidth(#Window) - 32, WindowHeight(#Window))

newH = 20

SampleImage = LoadImage(#PB_Any, #PB_Compiler_Home + "\Examples\Sources\Data\Drive.bmp")

For Counter = 0 To 50
 
  AddElement(Row())
 
  Row()\ImageGadget = ImageGadget(#PB_Any,   0, newY,  30, newH, ImageID(SampleImage), #PB_Image_Border)
  Row()\TextGadget1 = TextGadget (#PB_Any,  30, newY, 100, newH, " Dies ist Zeile " + Str(Counter), #SS_CENTERIMAGE | #SS_NOTIFY)
  Row()\TextGadget2 = TextGadget (#PB_Any, 131, newY,  50, newH, " holla", #SS_CENTERIMAGE | #SS_NOTIFY)
 
  newY + newH + 1
 
  If ListIndex(Row()) % 2 = 0
    SetGadgetColor(Row()\TextGadget1, #PB_Gadget_BackColor, #White)
    SetGadgetColor(Row()\TextGadget2, #PB_Gadget_BackColor, #White)
  Else
    SetGadgetColor(Row()\TextGadget1, #PB_Gadget_BackColor, #Gray)
    SetGadgetColor(Row()\TextGadget2, #PB_Gadget_BackColor, #Gray)
  EndIf
 
 
Next

CloseGadgetList()

SetGadgetAttribute(#ScrollAreaGadget, #PB_ScrollArea_InnerHeight, newY)

Repeat
 
  WWE = WaitWindowEvent()
 
  Select WWE
     
    Case #PB_Event_Gadget
      
      If SelectedRowIndex >= 0
        SelectElement(Row(), SelectedRowIndex)
          If ListIndex(Row()) % 2 <> 0
            SetGadgetColor(Row()\TextGadget1, #PB_Gadget_BackColor, #Gray)
            SetGadgetColor(Row()\TextGadget2, #PB_Gadget_BackColor, #Gray)
          Else
            SetGadgetColor(Row()\TextGadget1, #PB_Gadget_BackColor, #White)
            SetGadgetColor(Row()\TextGadget2, #PB_Gadget_BackColor, #White)
          EndIf
         
          SetGadgetColor(Row()\TextGadget1, #PB_Gadget_FrontColor, #Black)
          SetGadgetColor(Row()\TextGadget2, #PB_Gadget_FrontColor, #Black)
        EndIf
        
      ForEach Row()
       
        If EventGadget()=Row()\TextGadget1 Or EventGadget()=Row()\TextGadget2
          
          SelectedRowIndex = ListIndex(Row())
         
          SetGadgetColor(Row()\TextGadget1, #PB_Gadget_BackColor, #Blue)
          SetGadgetColor(Row()\TextGadget2, #PB_Gadget_BackColor, #Blue)
         
          SetGadgetColor(Row()\TextGadget1, #PB_Gadget_FrontColor, #White)
          SetGadgetColor(Row()\TextGadget2, #PB_Gadget_FrontColor, #White)
          Break
         
        EndIf
       
      Next
     
  EndSelect
 
Until WWE = #PB_Event_CloseWindow