This is the first version that I consider useable to make a real program with, as it now contains basic button and textbox controls. For those of you that don't know what PngSkin is, it's a series of progressively more complex examples for the UpdateLayeredWindow API that was introduced in Windows 2000 / XP. It allows partially transparent windows.

Besides the changes mentioned below, it's now much easier to create your own controls as most of the generic code has been moved out of the control's WndProcs and into skin.asm where it belongs. If you need help with handling WM_SIZE messages I guess I can post some extra info on that.

Comments from PngSkin.asm:


; Thanks to:
; Eoin - for his excellent GUI backbuffer tutorials
; Thomas - for PNGlib (and many other things...)
; Iblis - for coding some very useful HSL routines
; bitRAKE - for his 1337 optimization skillz :)
; gladiator - for helping me see the listbox bug
; Hiroshimator - for maintaining the excellent forums at win32asmcommunity.net
;
; New in this version:
; This new version supports 8-bit greyscale masks as part of the skin for a control.
; This means the FadeEdges proc is now obsolete; the fading edges in the listbox are now done by
; setting a gradient mask. The texbox uses the mask for text clipping. The button control also
; contains the code for an experimental new feature - alpha-based hit testing. Basically it sends
; mousclicks to the correct control based on the control's skin and mask. This means that when
; you press the button and then drag the mouse off the button's rounded edges, the button pops
; back up!



You can download the program with source from http://www20.brinkster.com/qweerdy/

Screenshot showing the listbox, button, and texbox controls:

Posted on 2003-03-04 09:26:43 by Qweerdy
wow sweet :alright:
Posted on 2003-03-04 10:11:22 by Hiroshimator
Looks like someone has better follow through than me. :)
Great continued work Qweerdy - much respect.

Can't seem to move the window by clicking on the text, "Main Window" - is that a feature?

Maybe, you could work for these guys:
http://www.skinux.com/index.php
Posted on 2003-03-04 19:58:13 by bitRAKE
bitRAKE - Yes there are still some features :)

This one I don't really understand though - shouldn't setting WS_EX_TRANSPARENT on the label send all mouse clicks to the main window?

Ok, I looked it up in the Platform SDK. The behavior I described above only applies to WS_EX_LAYERED windows, it seems. I guess I'll add some code to make it apply to my controls as well :)

I fixed it by adding the following code to the WM_NCHITTEST handler in LayeredControlProc:



invoke GetWindowLong,hControl,GWL_EXSTYLE
.if eax & WS_EX_TRANSPARENT
mov eax,HTTRANSPARENT
ret
.endif


For the sake of speed I hope GetWindowLong is not much more than some param checking and a mov :(
Posted on 2003-03-05 02:27:01 by Qweerdy
bitRake - and thanks for pointing that website out to me, as this product is basically where I saw this program going in the future. However, from what I've seen on their website I don't think I'll ever be able to compete with this (their layout engine in particular is years of work ahead of what I have). As for working for them, that's kind of hard when you're still in school.


Skinux employs a highly sophisticated imaging model based on a 32-bit alpha-blending model for compositing user interface controls. The compositing engine and alpha blending functions are highly optimized for the Intel MMX and AMD Athlon processors for fast image processing that supports interactive speeds at the user interface level.

Our layered image compositing, procedural imaging, sub-pixel positioning, scaleable controls, built-in animation model, and layered windows create translucent, photo-realistic, non-rectangular interfaces that have a 3-D appearance.


Sub-pixel positioning sounds interesting, and was one of my ideas for improving the scrollbar. Sounds like fun? ;)
Posted on 2003-03-05 02:43:31 by Qweerdy
Posted on 2003-03-12 17:39:35 by bitRAKE
Qweerdy, very nice. This is how windows should be. :alright:
Posted on 2003-03-12 21:33:31 by iblis
Qweerdy, very nice.

btw where is 'macros.asm' to recompile app?
It's not the same of masm32.


tnx amigo
Posted on 2003-03-13 11:27:33 by amigo
It just contains some general macro's, nothing special. In fact the only ones you seem to need are m2m and CTEXT. These are definately somewhere in Masm32, though perhaps not in the includes.



CTEXT MACRO y:VARARG
LOCAL sym

CONST segment
IFIDNI <y>,<>
sym db 0
ELSE
sym db y,0
ENDIF
CONST ends

EXITM <OFFSET sym>
ENDM

m2m MACRO M1, M2
push M2
pop M1
ENDM
Posted on 2003-03-13 12:24:14 by Qweerdy
Wow, that's really cool. :)

When using pgdn/pgup to run through the items in the listbox, the window displays the correct part but doesn't change the selected item accordingly. I'm not sure if you wanted it like that, but it's a minor detail.
Posted on 2003-03-13 14:34:08 by Miko
Qweerdy,
the image of ur pngskin on top cannot be seen.

Nice work, btw.

I will be getting down to converting it again in a couple of days, so hopefully it would be over by the end of the week.

bitrake,
Qweerdy, oh so real looking...


All those skins there, the complement should i guess be given to the artist for painting it rather than skinux for allowing it to be displayed.

Plus, i heard that winamp is going to release a library for its skin interface so we can use it in our apps.
I guess its gonna be free and it even allows anti-aliasing of skins.

The curved skins in skinux are pretty jagged.
Posted on 2003-03-14 00:38:56 by clippy

When using pgdn/pgup to run through the items in the listbox, the window displays the correct part but doesn't change the selected item accordingly. I'm not sure if you wanted it like that, but it's a minor detail.


I actually did that on purpose. I figured when you use PgDn/PgUp, you usually just want to scroll down, not select the item at the bottom of the page. Thinking about it again, I think I'll do it the other way since people may want to use the arrow keys directly after PgDn/Up :)

So yes, this will be fixed.



Qweerdy,
the image of ur pngskin on top cannot be seen.


Let's try that again...
Posted on 2003-03-14 08:18:55 by Qweerdy
Qweerdy,
I am having a problem.

When i try to compile pngskin, it gives me an error saying

'Cannot find macros.asm'?

Where is it supposed to be?
I dont find it in your pngskin directory?
Posted on 2003-03-17 04:24:08 by clippy
gladiator, look 5 posts above you :).

Thomas
Posted on 2003-03-17 05:23:14 by Thomas
Oh yeah.

Thanks :grin:
Posted on 2003-03-17 05:44:21 by clippy
Hi Qweerdy,
I am on with the conversion again. Should finish very soon. :)

But there are a few things which are still mysterious to me-

1. - In WinMain, you call LoadPng before creating a window. But the PNG_CreateBitmap function takes a handle to a window as one of its args. But as that time no window is created, who does it assign the bitmap to?

2. - In scrollbar.asm - ScrollBarProc, WM_LBUTTONDOWN handler, how does it work?




mov eax,lParam
shr eax,16 ; We don't need the x position, y is enough
.if eax<rc.right ; Up arrow clicked

How does comparing the y pos of the cursor with the width of the window work?

It would really help if you could comment your code a bit.
Posted on 2003-03-22 04:05:14 by clippy
1. - In WinMain, you call LoadPng before creating a window. But the PNG_CreateBitmap function takes a handle to a window as one of its args. But as that time no window is created, who does it assign the bitmap to?


I must say I hadn't noticed this before, but I can explain why it works :)

In the PNGlib documentation, I found this description for the hWndCompatible parameter: "Window handle that will be used to get a device context the bitmap handle will be compatible with. ". So probably it does something like:
hDC = CreateCompatibleDC(GetDC(hWndCompatible))

Since GetDC(0) returns the screen DC, it ends up creating a DC that is compatible with the screen.

2. - In scrollbar.asm - ScrollBarProc, WM_LBUTTONDOWN handler, how does it work?


Sorry about that, that's exactly one of the quick hacks that I should have documented but didn't. Currently the code assumes the arrow buttons and the slider are square, so the height of the buttons is equal to the width of the scrollbar.
Posted on 2003-03-22 04:40:58 by Qweerdy
Originally posted by Qweerdy
I must say I hadn't noticed this before, but I can explain why it works :)

In the PNGlib documentation, I found this description for the hWndCompatible parameter: "Window handle that will be used to get a device context the bitmap handle will be compatible with. ". So probably it does something like:
hDC = CreateCompatibleDC(GetDC(hWndCompatible))

It's CreateDIBSection and CreateDIBitmap it needs a DC for so it just uses GetDC(hWndCompatible) and supplies the result to those functions.
The PSDK isn't very clear on what it uses it for exactly. CreateDIBSection says:
hdc
Handle to a device context. If the value of iUsage is DIB_PAL_COLORS, the function uses this device context's logical palette to initialize the DIB colors.

That makes sense, but the only documentation about the hDC parameter for CreateDIBitmap is:
hdc
Handle to a device context.

That's all.. :rolleyes:

Thomas
Posted on 2003-03-22 05:07:34 by Thomas
Thank you for clearing that out guys :)

I should finish with it very soon.
Posted on 2003-03-24 07:27:13 by clippy
I apologize for waking the dead in such an old thread
I cannot locate the pngskin5 download, anywhere
Any help ?
Posted on 2012-06-03 12:02:30 by DednDave