Icon in List Control - How to show Image Thumbnails

questions
1

Even though this is an old thread, I hope someone can help me:

In the “After opening the Window” embed, I have the following code:

loop n = 1 to records(Queue:Browse:1)
      ?Browse:1{prop:iconlist,n} = DBS:Profile
END

In the Browse on Database using ?Browse:1/PrimeRecord embed, I have the following code:

Queue:Browse:1.DBS:Profile_Icon = DBS:Number

This should actually make it possible to display thumbnails from a large database. The ‘Database’ table has more than 11,000 entries, but that shouldn’t be a problem.

Have I just forgotten something, or am I completely off base?

Best regards,

Volker

2

This is a bit mixed here. The whole point of prop:iconlist is to create a list of icons that are then “available” to the browse rows. But you’re looping through a snapshot of the queue after the window opens - which seems a bit weird.

And then you’re assigning from DBS:Profile - which isn’t a queue field. So I think you might be confusing things a bit here. Perhaps explain a bit more what you have in mind here.

The correct place to set the queue field is in the .SetQueueRecord method.

3

Hi Bruce,

I’m still trying to get a browse box to display thumbnails. No one can say I’m not persistent…

It has to be possible. It is possible to display images in a browse box. But for some reason, you can’t display images from an image database. That’s completely crazy.

There’s a link to Litreum in the thread. If you follow it, you’ll find a question and an answer:

Question
How can I create a browse box that displays images? Is it possible? I want to display all the pictures for a client on their record using a browse list. Then, clicking “Browse/Change” should allow editing or expanding.

The pictures are stored in a table, so browsing it works fine, but how can I display the actual image in the browse list?

Comment
The “icon” attribute for a column supports more than just icons! If you have thumbnails of the images you want to display, you can set the line height of the browse list and view the images by scrolling through it.
From some testing I did a while back, the “icon” attribute works with all image formats supported by Clarion.

Since Clarion 12, even the Grid Control no longer works (using Build 13999 or 14000). It was never really good to begin with (slow and unreliable), but at least it helped a little.

My idea was to use a loop to create a list of thumbnails and then display them based on a sequential number.

So basically, a table of thumbnails that, when clicked, opens the image in its original size.

It’s enough to drive you crazy, and it made me switch from Clarion to Windev for a while, until their business practices went completely off the rails.

4

Displaying the images (not icons) in list rows is possible but quite tricky and requires extensive win api usage. I have made a class that facilitates this job,

5

Hi Mike,

That looks really good. $200 – if it finally solves this annoying problem after so many years (since Clarion for Windows entered the market in 199x!) – is no big deal. Is it quick and stable? Are there any instructions or a demo app for it? :slight_smile:

I’m an amateur programmer and I only write applications. I’ve never worked with APIs or template programming, and at 61, I’m too old for that now.

Best regards,

Volker

6

Well, it is quick for me, below is a students list with thumbnails, and 2 class methods to draw photos. If you are able to use the example code and apply it to your case then it is ok for you too.

The package contains handcoded project (clw).

image
image646×474 75.2 KB

lstStudents2.BeforeDrawCell   PROCEDURE(LONG pColumn, LONG pRow, LONG pBackColor, LONG pTextColor, | 
                                      *TLogicalFont pFont, *STRING pText, *STRING pPicture, |
                                      *TRect pCellRect, *TRect pTextRect, *LONG pFormat, *LONG pCodePage)
  CODE
  IF pColumn = 4  !- Photo
    SELF.DrawPhoto(pRow, pCellRect)   !- draw photo
    RETURN FALSE                      !- FALSE means don't draw the cell text
  END
  
  RETURN TRUE

lstStudents2.DrawPhoto        PROCEDURE(LONG pRow, TRect pCellRect)
rcPhoto                         TRect
g                               TGdiPlusGraphics
bm                              TGdiPlusBitmap
  CODE
  !- calc photo rect: width = height*2/3
  rcPhoto.Assign(pCellRect)
  rcPhoto.Width(rcPhoto.Height() * 2 / 3)
  rcPhoto.OffsetRect(2, 0)

  !- load photo from the students table
  tblStudents.Number = students2.Number
  GET(tblStudents, tblStudents:KeyStudentNumber)
  IF NOT ERRORCODE() AND NOT tblStudents:Photograph &= NULL AND tblStudents:Photograph{PROP:Size} > 0
    !- draw photo
    bm.FromString(tblStudents:Photograph[0 : tblStudents:Photograph{PROP:Size}-1])
    g.FromHDC(SELF.dc.GetHandle())
    g.DrawImage(bm, rcPhoto)
  END
7
  1. how are the images stored in your database?
  2. Are you successfully extracting the images from the database into a format that can be displayed?
  3. Can you display the images on the screen - not in a browse.

If you can get to this stage then maybe we can offer better advice?

What is contained in DBS:Profile? And don’t say “an image” :wink:

8

Hi PurpleEdge2214,

DBS:Profile is a string(255) containing the full path to the picture ), e.g. D:\BasePath\Topic1\profile.jpg .
There’s nothing to extract and yes, I can display the images using ?image1{prop:text} = DBS:Profile.

The profiles are always jpeg with a long side of 150 pixels. The filename is always ‘Profile.jpg’.

Kind regards,

Volker

9

Yeah, I had a play around with it, see attached C10 app.

It seems like a clumsy way of assigning images to icons and possibly only suited to a small number of images/icons.

I used a similar technique to you and assigned values to IconList and I suspect for a large number of images you’re going to have problems.

My example stops working properly after scrolling down a few pages, I don’t know why?

Maybe someone knows of a way to set an icon on a row without using IconList? I tried to dynamically set the values for iconlist and it set the icon for every record in the list to the same correct icon, I couldn’t get it to set the icon for each row.

Mikes solution might be worth it if it does what you need.
ImagesBrowse.zip (1.4 MB)

10

Hi PurpleEdge,

Out of curiosity, I’m going to take a look at your example. I bought Mike’s solution and hope it solves a problem that really shouldn’t even occur in such an old programming language.

Good to see, that others fight with this problem as I do.

Kind regards,

Volker

11

I was sure I remembered one of the example apps had a browse with the images of people in it, but I couldn’t find it - if it ever existed?

I’d be interested in seeing a screenshot of what you come up with using Mike’s solution.

12

First of all, I’d like to say: I’m not a trained programmer. By profession, I’m a customs and foreign trade specialist. Many years ago, I stumbled upon programming more or less by chance and started writing applications for friends, my various employers, and myself. I’ve been programming with Clarion almost from the very beginning—I think since CPD 2.1. I never really needed to know how a database works; I was still able to get them to work.

The problem with thumbnails has been with me ever since Clarion for Windows 2.0. I don’t remember exactly when that was—1995? In any case, it’s been over 30 years.

Mike Duglas finally solved this problem with his code. Figuring it out was quite a hurdle for me. I’m not used to working with classes, APIs, and who knows what else. I need templates that tell me what to do, when, and where. And I probably annoyed Mike a bit yesterday. :slight_smile:

But in the end, it actually worked. And in such a way that I can use it in future programs too—regardless of the number of thumbnails displayed in the browser, and incredibly fast. Thank you so, so much! (If I’d had this three years ago, I would’ve been spared that expensive experiment with Windev.)

There is one limitation, though, even if it’s not particularly relevant to me: You have to choose an aspect ratio and an orientation. While both horizontally and vertically oriented thumbnails are displayed, one of the two gets stretched. I solved this by using ImageEx to create a new set of thumbnails that are always square—meaning they have black bars at the top/bottom and left/right. I can live with that. Maybe there’s a more elegant solution. I have no idea.

Ultimately, I can say that I’ve rarely made a better investment than these $200.

Example
Example1112×805 85.3 KB