fringy drawed text ? - drawing text general

Targets Windows
1

Hi,

I’ve started to make my current project compatible for windows but I don’t know why
drawing text in windows doesn’t looks nice.

I use GDI+ but the drawed text doesn’t look clear and sort of fringy. If you look on the attached image
(especially character “e” or “C”) you can see the text from the OS (button) is clear and the g.drawstring text in the control is not.
I must admitt the image isn’t high res too, but one can see it.

What are the general rules for drawing text under window and how can I get rid of the fringy text ?

2

Is this a listbox or subclass of a listbox?
If so, one mistake I always find I make… Make sure if you are adding code to CELLDRAWTEXT that you return TRUE
other wise YOU draw text, and the LISTBOX draws over it… causing a “fringy” look (I LOVE TECH TALK!!! :smiley: . just kidding)

3

[quote=208715:@Rob Egal]Hi,

I’ve started to make my current project compatible for windows but I don’t know why
drawing text in windows doesn’t looks nice.

I use GDI+ but the drawed text doesn’t look clear and sort of fringy. If you look on the attached image
(especially character “e” or “C”) you can see the text from the OS (button) is clear and the g.drawstring text in the control is not.
I must admitt the image isn’t high res too, but one can see it.

What are the general rules for drawing text under window and how can I get rid of the fringy text ?
[/quote]

What you see is the relatively poor dpi of Xojo graphics (72 dpi) with text, when you may be accustomed to Retina, or to screens with a higher dpi.

Also, there is something wrong in your picture : I have synthesized the issue here. On top, the picture you posted, enlarged so pixels show. The drawing is monochrome. Just below, Drawstring in Paint. And bottom, a label.

Notice how the ClearType Windows antialising augments the contrast by the use of opposite colors on the exterior pixels in the two lower lines, while yours is all grey.

I do not know how you draw text, but something is wrong.

At first I thought you had removed the color information from the picture, but looking at the pixels in the button “Delete all” shows the blue and yellow pixels of ClearType. Kind of faded, but there. And to the eye, it does seem crisper.

4

[quote=208723:@Dave S]Is this a listbox or subclass of a listbox?
If so, one mistake I always find I make… Make sure if you are adding code to CELLDRAWTEXT that you return TRUE
other wise YOU draw text, and the LISTBOX draws over it… causing a “fringy” look (I LOVE TECH TALK!!! :smiley: . just kidding)[/quote]

Hi Dave,

not it’s a custom cavas based listbox/tableview made from scratch. I use stadard pictrue objects and g.drawstring.

5

[quote=208742:@Michel Bujardet]What you see is the relatively poor dpi of Xojo graphics (72 dpi) with text, when you may be accustomed to Retina, or to screens with a higher dpi.

Also, there is something wrong in your picture : I have synthesized the issue here. On top, the picture you posted, enlarged so pixels show. The drawing is monochrome. Just below, Drawstring in Paint. And bottom, a label.

Notice how the ClearType Windows antialising augments the contrast by the use of opposite colors on the exterior pixels in the two lower lines, while yours is all grey.

I do not know how you draw text, but something is wrong.

At first I thought you had removed the color information from the picture, but looking at the pixels in the button “Delete all” shows the blue and yellow pixels of ClearType. Kind of faded, but there. And to the eye, it does seem crisper.

[/quote]

Hi Michel,

I like reading your posts and I you’re always trying to help. Much appreciated!

The screenshot above isn’t a good source to analayse. I made with the window snipping tool. Anyway, I only use
standard xojo objects such as the picture and g.drawstring.

  dim p as new Picture( self.th(col).width, self.ca.rowHeight )
  dim g as Graphics = p.Graphics
  g.TextFont = self.ctrDefaultFont
  g.TextSize = self.ca.fontSize
  g.ForeColor = if(selection, self.ca.selectionTextCol, self.ca.textCol)
  dim y as integer = (g.Height+g.TextAscent)/2 - 1
  g.DrawString s, pad, y, textWidth, self.ca.truncateCellText
  return p

The returned picture is then positioned in the table and drawed. Nothing out of ordinary. I will check the windows settings.
Maybe there’s something wrong with. I’ll post and update for the GridControl 1.0RC4 which is compatible for win,linux,mac.
Maybe then questions will araise again. I have only a win7 system running so I cannot check if this behave on all win systems.

6

[quote=208868:@Rob Egal]The returned picture is then positioned in the table and drawed. Nothing out of ordinary. I will check the windows settings.
Maybe there’s something wrong with. I’ll post and update for the GridControl 1.0RC4 which is compatible for win,linux,mac.
Maybe then questions will araise again. I have only a win7 system running so I cannot check if this behave on all win systems.[/quote]

All Windows imagers are the same. From what I can tell, there is no difference between 7, 8 and 10.

I know what happens. Instead of drawing directly in the cell, you draw into a picture, and then draw that picture.

That is how you lose the color.

See the comparison below. First line is obtained by the indirect method (text drawn into a picture, then picture drawn into paint)
The second line is a label
The third one the string is drawn directly into paint. I believe if you do that, you will have a spectacular gain in apparent sharpness.

7

Instead of using a picture object try with g.Clip.

That way you will be drawing directly to the graphics object rather than the method you are currently using.

This is the way in which I created my sbPrinter classes as I utilised the same way as you do in the beginning. I found, though, that when it actually printed I got fuzzy letters and text. It took a little while to organise as you have to supply the Left and Top properties to g.Clip but it is definitely worth it.

8

Addendum : If I create the picture with color depth

p = new picture (500, 200,32) p.graphics.drawstring ("Pencil", 10, 20)

The color antialiasing shows fine with the indirect method. This means probably when you simply go new picture (500, 200) you get the Alpha channel but color depth is only 8 bits or something.

You can probably use the indirect method, but you will need to fill the background of the picture with the same color as the cell before you draw the string.

9

[quote=208875:@Michel Bujardet]Addendum : If I create the picture with color depth

p = new picture (500, 200,32) p.graphics.drawstring ("Pencil", 10, 20)

The color antialiasing shows fine with the indirect method. This means probably when you simply go new picture (500, 200) you get the Alpha channel but color depth is only 8 bits or something.

You can probably use the indirect method, but you will need to fill the background of the picture with the same color as the cell before you draw the string.[/quote]

I have checked it too and yes, you’re right. Creating the picture with the color depth works fine but I can’t use it as the background
is drawed sparatetely. I definitely need a transparent cell. There’s no other way.

10

[quote=209022:@Rob Egal]I have checked it too and yes, you’re right. Creating the picture with the color depth works fine but I can’t use it as the background
is drawed sparatetely. I definitely need a transparent cell. There’s no other way.[/quote]

Oh, but there are at least 2 ways :

  • Use Picture.Transparent = True before you draw,
  • Fillrect the picture with the same color as the background before you draw.
11

[quote=208874:@Simon Berridge]Instead of using a picture object try with g.Clip.

That way you will be drawing directly to the graphics object rather than the method you are currently using.

This is the way in which I created my sbPrinter classes as I utilised the same way as you do in the beginning. I found, though, that when it actually printed I got fuzzy letters and text. It took a little while to organise as you have to supply the Left and Top properties to g.Clip but it is definitely worth it.[/quote]

Thanks for your suggestion. Sounds reasonable too. However, the base code relys on caching picture objects and then draw
it when it comes to the offset. I am not baleto provide “g” in all methods (e.g. for updating cache ect.). This would mean rewirteethe complette code I think.

12

Oops. Transparent takes an Integer.

This works :

dim p as new picture(me.width,me.height, 32) p.transparent = 1

13

[quote=209034:@Michel Bujardet]Oops. Transparent takes an Integer.

This works :

dim p as new picture(me.width,me.height, 32) p.transparent = 1[/quote]

Hi Michel,

Thanks a lot for you’re lead. I could achive goods result when using the indirect picture object although I don’t understand
the reasons for a different approach for Windows since MacOS work fine with the direct picture object.

I finally ended up putting the text into a separate picture object on windows for all text based drawing. This way I can cache
it. The only thing worrying me is if you use another color than straight black, the drawed text doesn’t look good - hence the change for the selection to a direct picture. I really don’t get it. Why is that ?

#if TargetWin32 then dim txt as Picture if selection then txt = new Picture(g.Width,g.Height) txt.Graphics.Bold = true else txt = new Picture(g.Width,g.Height, 32) txt.Transparent = 1 end if txt.Graphics.TextFont = self.ctrDefaultFont txt.Graphics.TextSize = self.ca.fontSize txt.Graphics.ForeColor = if(selection, self.ca.selectionTextCol, self.ca.textCol) txt.Graphics.DrawString s, pad, y, textWidth, self.ca.truncateCellText g.drawpicture txt, 0, 0 #else g.DrawString s, pad, y, textWidth, self.ca.truncateCellText if selection then g.DrawString s, pad, y, textWidth, self.ca.truncateCellText #endif

14

[quote=209088:@Rob Egal] could achive goods result when using the indirect picture object although I don’t understand
the reasons for a different approach for Windows since MacOS work fine with the direct picture object.[/quote]

In spite of all the efforts of Xojo, you should never be lured into believing Mac OS X and Windows are the same thing. There are deep differences between them, in particular in the way the screen is addressed. Or in the way pictures are treated. Or fonts.

[quote]I finally ended up putting the text into a separate picture object on windows for all text based drawing. This way I can cache
it. The only thing worrying me is if you use another color than straight black, the drawed text doesn’t look good - hence the change for the selection to a direct picture. I really don’t get it. Why is that ?[/quote]

Probably because the font imager is drastically different between the two systems. I would take a pragmatic approach, and simply do what renders best on each with some conditional code.

15

[quote=209093:@Michel Bujardet]In spite of all the efforts of Xojo, you should never be lured into believing Mac OS X and Windows are the same thing. There are deep differences between them, in particular in the way the screen is addressed. Or in the way pictures are treated. Or fonts.

Probably because the font imager is drastically different between the two systems. I would take a pragmatic approach, and simply do what renders best on each with some conditional code.[/quote]

Yeah think so too even though it means disabling custom text colors windows.

I had no experience with windows programming and honestly it’s hard to find goods sources for
in the internet. I was under the impression both are sort of equal or at least Xojo will handle it correctly or give us a better documentation for that. Yeas, I was lured and got trapped. :slight_smile:
Anyway, big kudos for you.

16

In my experience, Windows can indeed do pretty much the same as Mac, but OS X has so much tools built in that it is way easier to do certain things. In particular, CoreText is way more powerful than the Windows framework to manipulate text.

It is also a question of habit.

As for sources, you will probably find the best advice here, where mainly/solely Windows Xojo developers will be glad to help. I also regularly look into StackOverflow to see if things are possible, before searching the forum, and finally ask a question when I have already researched the issue.