Author Topic: Picture icons in a listbox have a gray background  (Read 3398 times)

Graeme

  • Senior Community Member
  • Posts: 2793
  • Hero Points: 347
Picture icons in a listbox have a gray background
« on: September 11, 2017, 10:21:29 AM »
I have a macro that displays a list of files/ folders using a listbox with an icon/picture at the start   -  _lbadd_item(skey,20,pic_index_col1_active_file).  For some reason, in beta 3, there is a grey background with each picture.  e.g. in V21 (and beta 1 I think) I have a png (attached) that has a purple arrow shape with a white background.  In beta 3, the white background shows as gray and the purple color appears as a darker shade of purple than it is in the png file.  Is somehow the dark theme spilling over into my listbox and darkening my icons?  (I'm not using the dark theme).
« Last Edit: September 12, 2017, 11:42:44 AM by Graeme »

Dennis

  • Senior Community Member
  • Posts: 3954
  • Hero Points: 515
Re: Picture icons in a listbox have a gray background
« Reply #1 on: September 11, 2017, 02:19:14 PM »
Do your bitmaps use transparency, or just a white background that happened to match the background in v21 and earlier versions?

Dennis

  • Senior Community Member
  • Posts: 3954
  • Hero Points: 515
Re: Picture icons in a listbox have a gray background
« Reply #2 on: September 11, 2017, 02:25:53 PM »
You could also try replacing your bitmap with this (_graemes_arrow.svg).

Code: [Select]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1024px" height="1024px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="nonzero" clip-rule="evenodd" viewBox="0 0 10240 10240" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>arrow_right icon</title>
<path id="curve0" fill="#5356FF" d="M4422 7716l1647 -1647 -5120 0c-176,0 -320,-144 -320,-320l0 -1280c0,-176 144,-320 320,-320l5120 0 -1647 -1647c-47,-47 -60,-113 -35,-174 26,-61 82,-99 148,-99l2064 0c176,0 328,63 452,187l2467 2467c124,124 124,328 0,452l-2467 2466c-124,125 -276,188 -452,188l-2064 0c-66,0 -122,-38 -148,-99 -25,-61 -12,-128 35,-174z"/>
</svg>

Graeme

  • Senior Community Member
  • Posts: 2793
  • Hero Points: 347
Re: Picture icons in a listbox have a gray background
« Reply #3 on: September 12, 2017, 11:50:24 AM »
Thanks.  I accidentally posted the bmp version, now I've attached the png file.  I used to use bmp files but something changed in slick a few years ago and I had to switch to png.  It's seems difficult to determine whether a png has any transparency but I'm fairly sure it won't because I converted it from a bmp and I would have no reason to add transparency.  I have another macro that is using bmp files in a listbox without this problem so I'll try bmp again, otherwise I'll make some svg icons.

Dennis

  • Senior Community Member
  • Posts: 3954
  • Hero Points: 515
Re: Picture icons in a listbox have a gray background
« Reply #4 on: September 12, 2017, 02:09:29 PM »
Quick tip, if you create an SVG, name your icon with the prefix "_f_" so that SlickEdit can select the size that you have configured for the tree.  On macOS, I use iVinci Express to draw SVG files.  There are lot of vector graphic drawing programs out there, but that one is particularly simple to use.

Graeme

  • Senior Community Member
  • Posts: 2793
  • Hero Points: 347
Re: Picture icons in a listbox have a gray background
« Reply #5 on: October 01, 2017, 10:19:17 AM »
Hi Dennis

This problem seems to be gone in RC2.  Was anything changed to fix this or is it just good luck?

I tried creating an SVG icon but it didn't work.  I made a rectangle 7 pixels by 3 but slick more than doubled the size of it when I put it in a listbox - with or without _f_ prefix.  I'm trying to use a listbox as a scrollbar with markup similar to the document overview thing so I have the text size as small as it will go and the height of each item in the listbox is 5 pixels.  Took me over half an hour using Inkscape to figure out how to make a 7 by 3 pixel svg icon!

Dennis

  • Senior Community Member
  • Posts: 3954
  • Hero Points: 515
Re: Picture icons in a listbox have a gray background
« Reply #6 on: October 02, 2017, 02:20:53 PM »
Nothing changed, but if you fixed the transparency on your PNG image, that would have taken care of it.

When SlickEdit loads an SVG, it scales it to the size that it expects the icon to be.  An icon with the _f_ prefix will use the tree icon size.  Keep in mind that SVG is a scalable format, so 7x3 doesn't mean anything, that is merely the icon's coordinate system.

If you use a .bmp or .png image, it will not be scaled, so for your application you might be better doing that.

You might want to consider using a read-only editor control instead of a list box.  You could use the left-margin area (I call it the gutter) and stream markers to put tiny icons in the margin.  SlickEdit will scale SVG left-margin icons down to as small as 2x2 pixels.  See _LineMarkerAdd() or _StreamMarkerAdd().

Yes, Inkscape is difficult to use.  On macOS, iVinci Express is a great free SVG drawing tool.  Limited capabilities, but simple and intuitive to use, and for what icons need, that's worth it.  And a big plus is it saves drawing natively as SVG, so there is no ugly extra step to export as SVG as with other drawing programs I tried.

It's also pretty easy to construct an SVG by hand, since it is XML after all.  There are drawing primitives like <rect> <circle> <ellipse> that make things even easier.

Graeme

  • Senior Community Member
  • Posts: 2793
  • Hero Points: 347
Re: Picture icons in a listbox have a gray background
« Reply #7 on: October 02, 2017, 08:08:51 PM »
Thanks.  Do you mean that there's transparency in the _GFM_fileview_col1_active_file.png file.  How do I tell that and how do I get rid of it?  Should bmp files work?  I had to change from bmp to png a few years ago when something changed in slickedit.

I'm using bmp files for my latest macro and slickedit is definitely applying grey shading to all of them.  There's no transparency in a bmp and white bmps give me light gray and red/blue bitmaps are darker than the actual bitmap  - in beta 3.  In RC2 the bitmaps are their normal colours.  I do have a transparent png overlayed over the top of them all to allow me to pick up mouse move events.

Thanks for the idea about the edit control.  I'll have to think about it.  Is the gutter width global to all edit controls?  I might prefer the white background of a listbox to the grey colour of the gutter.

Looks like I need to learn something about svg icons.