Windows Experience.

[Rbz]

Clyde, to avoid this flicker problem you need to either draw your plasma effect and buttons in one go or "slice" your window into rectangles that you want to update.

As you can check, I did this in Camouflage music disk, for example update buttons rectangle when mouse is over it, spectrum window have it's own update region too.

My advise for you is to try something more simpler to start, as you need to understand basics about winapi coding, one good idea is to download "win32 programmer's reference"

[Clyde]

Cheers Rbz dude So I've got to think Rectangles.

Obviously this is early days, and you wouldnt really want buttons ontop of the visual fx window.

Muchos Gracias,
Clyde.

[Jim]

Another way of removing the flicker is to stop Windows repainting the background.  It likes to erase the background with the default window background colour before asking you to redraw your stuff, causing flicker
Add

Code: [Select]

Case WM_ERASEBKGND
  Return 1
This tells Windows that you erased the background (even though you didn't )

You might also want to set the background brush to null

Code: [Select]

.hbrBackground = GetStockObject( BLACK_BRUSH )
becomes

Code: [Select]

.hbrBackground = Null

I think that will eliminate all the flicker.

When you say remove the invalidateRgn stuff, I think your meaning this in Case WM_MouseMove

Yes.

is how to use a sound scheme if it is enabled on the pc

You can use PlaySound to trigger the default sfx.
http://msdn.microsoft.com/en-us/library/ms712879.aspx
For instance

Code: [Select]

PlaySound(SND_ALIAS_SYSTEMSTART, Null, SND_ALIAS_ID)
or maybe
PlaySound(Cast(LPCTSTR,SND_ALIAS_SYSTEMSTART), Null, SND_ALIAS_ID)
There are almost certainly more constants than listed on that help page.

You can use LoadCursor and SetCursor
http://msdn.microsoft.com/en-us/library/ms940016.aspx
to change the mouse pointer.  There are dozens built in.

Jim

[Clyde]

Thanks Jim dude!

I tried the WM_ERASEBKGRND in conjuction with .hbrBackground = Null , but im still getting flickering on the button images.

I have: 

Case WM_ERASEBKGND
            Return 1 '( Or Function=1 )

Just before WM_PAINT.

Cheers,
Clyde.

[Jim]

Time to re-post the source now you've worked on it some more

Jim

[Clyde]

Ok dude, here we go:

Code: [Select]

'
' Clyde Gets Into Windows.
' October 2008
' Note: You will need the media files found in the zip to run.
'
Option Explicit
Option Static

#Include Once "Windows.bi"
#Include Once "crt.bi"

#Include Once "media\FaceP.bas"
#Include Once "media\FaceR.bas"

#Include Once "media\Face2P.bas"
#Include Once "media\Face2R.bas"

Const As Single PI=3.14159265
Const As Single D2R=PI/180.0

Const MAXBUTTONS=2
Const XRES=640
Const YRES=480
Const APPNAME  As String="Windows Framework"

Type GfxBuffer
    wwidth As Integer
    height As Integer
    pixels As UInteger pointer
End Type

Type Button
   
    Region  As HRGN
   
    Rect    As RECT
 
    PosX    As Integer
    PosY    As Integer
    Image1  As GFXBuffer Pointer
    Image2  As GFXBuffer Pointer
    State   As Integer

End Type
   

Dim Shared As GfxBuffer Pointer Image1,Image2, ScreenBuffer, Palette1
Dim Shared As Button Pointer Button( 0 To MAXBUTTONS-1 )

Dim Shared As Single Cosine( 0 to 1500 )
Dim Shared As Integer wave1,wave2,wave3

Declare Sub InitializeWindows()

Declare Sub UpdatePlasma( ByVal Dest            As HDC,_
                          ByVal Source          As GFXBuffer Pointer,_
                          ByVal Pal             As GFXBuffer Pointer,_
                          ByVal Val1            As Integer,_
                          ByVal Val2            As Integer,_
                          ByVal Val3            As Integer )

Declare Sub DrawButton  ( ByVal hdc as HDC,_
                          ByVal Buton As Button Pointer )

Declare Sub DrawGFXBuffer( ByVal Dest   As HDC,_
                           ByVal Source As GfxBuffer Pointer,_
                           ByVal PosX   As Integer,_
                           ByVal PosY   As Integer )

Declare Function CreateButton( ByVal Image1 As GFXBuffer Pointer,_
                               ByVal Image2 As GFXBuffer Pointer,_
                               ByVal StartPosX As Integer,_
                               ByVal StartPosY As Integer ) As Button Pointer

Declare Function CreateButtonRegion( ByVal PosX0 As Integer,_
                                     ByVal PosY0 As Integer,_
                                     ByVal PosX1 As Integer,_
                                     ByVal PosY1 As Integer) As HRGN


Declare Function CreateGFXBuffer( Byval WWidth As Integer,_
                                  Byval Height As integer ) As GfxBuffer Pointer
                                 
Declare Function CreatePal( ByVal Val1   As Integer,_
                            ByVal Val2   As Integer,_
                            ByVal Val3   As Integer,_
                            ByVal Divv   As Integer=360) As GFXBuffer Pointer

Declare Function LoadGraphics8Bit( ByVal WWidth As Integer,_
                                   ByVal Height As Integer,_
                                   ByVal Raw    As UByte Pointer,_
                                   ByVal Palet  As UByte Pointer ) As GfxBuffer Pointer

Declare Function WndProc ( ByVal hWnd       As HWND,_
                           ByVal message    As UINT,_
                           ByVal wParam     As WPARAM,_
                           ByVal lParam     As LPARAM ) As LRESULT


Declare Function WinMain ( ByVal hInstance      As HINSTANCE,_
                           ByVal hPrevInstance  As HINSTANCE,_
                           ByRef szCmdLine      As String,_
                           ByVal iCmdShow       As Integer ) As Integer   

WinMain( GetModuleHandle( Null ), Null, Command, SW_NORMAL )
End



Sub UpdatePlasma( ByVal Dest            As HDC,_
                  ByVal Source          As GFXBuffer Pointer,_
                  ByVal Pal             As GFXBuffer Pointer,_
                  ByVal Val1            As Integer,_
                  ByVal Val2            As Integer,_
                  ByVal Val3            As Integer )
   
   
    Dim bmi As BITMAPINFO

    With bmi.bmiheader
   
        .biSize           = SizeOf (BITMAPINFOHEADER)
        .biWidth          =  ScreenBuffer->WWidth
        .biHeight         = -ScreenBuffer->Height
        .biPlanes         = 1
        .biBitCount       = 32
        .biCompression    = BI_RGB
        .biSizeImage      = 0
        .biClrUsed        = 0
        .biClrImportant   = 0
   
    End With
   
    Dim As Integer x,y,d,f
   
    For y = 0 To Source->Height-1

        d = cosine( y + wave2 ) + cosine( y + wave3 )

        For x = 0 To Source->WWidth-1

            f = cosine( x + wave1 ) + cosine( x + y ) + d and 255
               
            Source->Pixels [ x+y*Source->WWidth ]=Pal->Pixels[ f and 255 ]

        Next

    Next

    wave1+=Val1 : If wave1 >= Source->WWidth-1 Then wave1 = wave1 - Source->WWidth
wave2+=Val2 : If wave2 >= Source->WWidth-1 Then wave2 = wave2 - Source->WWidth
    wave3+=Val3 : If wave3 >= Source->WWidth-1 Then wave3 = wave3 - Source->WWidth
   
    SetDIBitsToDevice( Dest,_
                       0,_
                       0,_
                       Source->WWidth,_
                       Source->Height,_
                       0,_
                       0,_
                       0,_
                       Source->Height,_
                       @Source->Pixels[0],_
                       @bmi,_
                       DIB_RGB_COLORS )
   
End Sub


Function CreateButton( ByVal Image1 As GFXBuffer Pointer,_
                       ByVal Image2 As GFXBuffer Pointer,_
                       ByVal StartPosX As Integer,_
                       ByVal StartPosY As Integer ) As Button Pointer
   
    Dim Btn As Button Pointer=Callocate(Len( Button )+Len( UInteger ))
   
    Btn->PosX=StartPosX
    Btn->PosY=StartPosY
   
    Btn->Image1=Image1
    Btn->Image2=Image2
   
    Btn->State=0
    Btn->Region=CreateButtonRegion( StartPosX,_
                                    StartPosY,_
                                    StartPosX+Btn->Image1->WWidth,_
                                    StartPosY+Btn->Image1->Height )
                                   
    Btn->Rect.left  =StartPosX
    Btn->Rect.top   =StartPosY
    Btn->Rect.right =StartPosX+Btn->Image1->WWidth
    Btn->Rect.bottom=StartPosY+Btn->Image1->Height
   

    Function=Btn
   
End Function


Function CreateButtonRegion( ByVal PosX0 As Integer, ByVal PosY0 As Integer, ByVal PosX1 As Integer, ByVal PosY1 As Integer) As HRGN
   
    Dim Region As HRGN
   
    Region=CreateRectRgn( PosX0,_   ' x-coordinate of region's upper-left corner
                          PosY0,_   ' y-coordinate of region's upper-left corner
                          PosX1,_   ' x-coordinate of region's lower-right corner 
                          PosY1 )   ' y-coordinate of region's lower-right corner 
   
    Function=Region
   
End Function


Sub InitializeWindows()
   
    ScreenBuffer = CreateGFXBuffer( XRES, YRES )

    Image1= LoadGraphics8bit(32,32,@facer(0),@facep(0))
    Image2= LoadGraphics8bit(32,32,@facer2(0),@facep2(0))
   
    Button(0)=CreateButton( Image1,_
                            Image2,_
                            100,_
                            100)
                           
    Button(1)=CreateButton( Image1,_
                            Image2,_
                            280,_
                            32)
                           
    Palette1=CreatePal(10,45,90)
   
    Dim As Integer a
   
    For a=0 To 1499
        Cosine( a ) = Cos( (( 115*PI * a ) / ScreenBuffer->WWidth )*D2R ) * 128
    Next
   
End Sub


Sub DrawButton( ByVal hdc as HDC,_
                ByVal Buton As Button Pointer )
     
    Select Case As Const Buton->State
   
        Case 0:
        DrawGFXBuffer( hdc, Buton->Image1, Buton->PosX, Buton->PosY )
       
        Case 1:
        DrawGFXBuffer( hdc, Buton->Image2, Buton->PosX, Buton->PosY )
     
    End Select
   
End Sub


Sub DrawGFXBuffer( ByVal Dest   As HDC,_
                   ByVal Source As GfxBuffer Pointer,_
                   ByVal PosX   As Integer,_
                   ByVal PosY   As Integer )

    Dim bmi As BITMAPINFO

    With bmi.bmiheader
   
        .biSize           = SizeOf (BITMAPINFOHEADER)
        .biWidth          =  Source->WWidth
        .biHeight         = -Source->Height
        .biPlanes         = 1
        .biBitCount       = 32
        .biCompression    = BI_RGB
        .biSizeImage      = 0
        .biClrUsed        = 0
        .biClrImportant   = 0
   
    End With

    SetDIBitsToDevice( Dest,_
                       PosX,_
                       PosY,_
                       Source->WWidth,_
                       Source->Height,_
                       0,_
                       0,_
                       0,_
                       Source->Height,_
                       @Source->Pixels[0],_
                       @bmi,_
                       DIB_RGB_COLORS)

End Sub


Function CreatePal( ByVal Val1   As Integer,_
                    ByVal Val2   As Integer,_
                    ByVal Val3   As Integer,_
                    ByVal Divv   As Integer=360) As GFXBuffer Pointer
   
    Dim As GFXBuffer Pointer Pal=CreateGFXBuffer(1,256)
   
    Dim As Integer a, red, grn, blu
    Dim As Single m

    For a=0 to 255
       
        m = a*(Divv/255)

        red = cos( (m+Val1)*D2R ) *127+127
        grn = cos( (m+Val2)*D2R ) *127+127
        blu = cos( (m+Val3)*D2R ) *127+127

        Pal->Pixels[ a*Pal->WWidth ] = rgb(red,grn,blu) 

    Next

    Return Pal

End Function



Function CreateGFXBuffer( Byval WWidth As Integer,_
                          Byval Height As Integer ) As GfxBuffer Pointer
   
    Dim As GfxBuffer Pointer Buffer=Callocate(Len( GfxBuffer )+Len( UInteger )*WWidth*Height)
   
    Buffer->wwidth=WWidth
    Buffer->height=Height
    Buffer->pixels=Cast( UInteger Pointer, Cast( Byte Pointer, Buffer )+Len( GfxBuffer ))
   
    Function=Buffer
   
End Function


Function WndProc ( ByVal hWnd       As HWND,_
                   ByVal message    As UINT,_
                   ByVal wParam     As WPARAM,_
                   ByVal lParam     As LPARAM ) As LRESULT

    Dim As PAINTSTRUCT SBuffer
    Dim As HDC hDC
   
    Dim As Integer MouseX, MouseY, a
     
    Select Case ( message )
       
        Case WM_CREATE           
           
            InitializeWindows()
            Function=0
       
        Case WM_TIMER
            InvalidateRect(hWnd, NULL, False)
       
        Case WM_ERASEBKGND
            'Function=1
            Return 1
       
        Case WM_PAINT
         
            hDC = BeginPaint( hWnd, @SBuffer )
               
                UpdatePlasma( hdc, ScreenBuffer, Palette1, 2, 4, 2 )
               
                For a=0 To MAXBUTTONS-1
                    DrawButton( hdc, Button(a) )
                Next
           
            EndPaint( hWnd, @SBuffer )
            Function=0
           
           
        case WM_LBUTTONDOWN
           
            'If Button(0)->State=1 Then DoSomething()
       
       
        Case WM_MOUSEMOVE
           
            MouseX = LoWord(lParam)' and &Hffff
            MouseY = HiWord(lParam)' shr 16
           
            For a=0 To MAXBUTTONS-1
           
                If (PtInRegion(Button(a)->Region, MouseX, MouseY) <> 0) then
                    Button(a)->State=1
                Else
                    Button(a)->State=0
                End if
           
            Next
             
        Case WM_KEYDOWN

            Select Case LoByte( wParam )

                Case VK_ESCAPE
                    PostMessage( hWnd, WM_CLOSE, 0, 0 )
                    Function=0
       
            End Select

        Case WM_DESTROY
   
            PostQuitMessage( 0 )
            Function=0
   
    End Select
   
    Function=DefWindowProc( hWnd, message, wParam, lParam )   
   
End function


Function WinMain ( ByVal hInstance      As HINSTANCE,_
                   ByVal hPrevInstance  As HINSTANCE,_
                   ByRef szCmdLine      As String,_
                   ByVal iCmdShow       As Integer ) As Integer   
     
    Dim wMsg        As MSG
    Dim wClass      As WNDCLASS     
    Dim hWnd        As HWND

    With wClass
    .style         = CS_HREDRAW or CS_VREDRAW
      .lpfnWndProc   = @WndProc
      .cbClsExtra    = 0
      .cbWndExtra    = 0
      .hInstance     = hInstance
      .hIcon         = LoadIcon( null, IDI_APPLICATION )
      .hCursor       = LoadCursor( null, IDC_ARROW )
      .hbrBackground = null
      .lpszMenuName  = null
      .lpszClassName = StrPtr( APPNAME )
    end with
     
    If( RegisterClass( @wClass ) = False ) Then
            MessageBox( Null,"Sorry there dude. Unable To Register Class", APPNAME, MB_ICONERROR )
        Exit Function
    End If

    hWnd = CreateWindowEx( 0,_
                           APPNAME,_
                           APPNAME,_
                           WS_OVERLAPPEDWINDOW, _
                           CW_USEDEFAULT,_
                           CW_USEDEFAULT,_
                           XRES,_
                           YRES,_
                           null,_
                           null,_
                           hInstance,_
                           null )
   
    ShowWindow  ( hWnd, iCmdShow )
    UpdateWindow( hWnd )
   
    SetTimer(hWnd,0,1000/60,null)
   
    While ( GetMessage( @wMsg, null, 0, 0 ) <> False )   
        TranslateMessage( @wMsg )
        DispatchMessage ( @wMsg )
    Wend
   
    Function = wMsg.wParam

End Function


Function LoadGraphics8Bit( ByVal WWidth  As Integer,_
                           ByVal Height  As Integer,_
                           ByVal Raw     As UByte Pointer,_
                           ByVal Palet   As UByte Pointer ) As GfxBuffer Pointer
   
    Dim As GfxBuffer Pointer Buffer=CreateGFXBuffer( WWidth, Height )

    Dim As UInteger pal(0 to 255)
    Dim As Integer a,x,y

    '
    ' Retrieve Palette Info.
    '
    For a=0 to 255
        pal(a)=(palet[a*3] Shl 16) Or (palet[a*3+1] Shl 8) Or(palet[a*3+2])
    Next   
   
    '
    ' Make Image Based On Colour Indexing With The Raw values.
    '
    For y=0 to Height-1
        For x=0 to WWidth-1
            Buffer->Pixels[ x+y*WWidth ]=Pal(Raw[x+y*WWidth])
        Next
    Next
   
    Function=Buffer
   
End Function

I have seen some people changing things to a dc and selecting objects. Dont know what thats about, or if its needed.

Cheers and very special thanks,
Clyde.

[DrewPee]

Nice work! that is coming together now! I will be keeping a close eye on this!

[Jim]

Replace

Code: [Select]

    hWnd = CreateWindowEx( 0,_
...
with

Code: [Select]

    hWnd = CreateWindowEx( WS_EX_COMPOSITED,_
...

Jim

[Clyde]

Thanks Jim thats smashing

[Clyde]

Right now it's time to get going with applying a skin.

I can design the image to be used as the skin; obviously without any buttons on. But I need help in applying and using the skin. I think i might need a region for the screen to feature any visuals. Maybe the actual skin itself

Also the skin image will be the same format as before a raw and pal set of byte arrays.

Im also trying to find info on how, to make the mouse cursor change to a hand when there something that can be pressed, and display a tool tip.

Any help would be wonderfull and thankyou - mostly in the adding a skin department!
Clyde.

[Jim]

Code: [Select]

sub SetMyClipRegion(ByVal hWnd As HWND)
dim wr as RECT

GetWindowRect(hWnd, @wr)

dim w as integer
dim h as integer
dim r as integer

w = wr.Right - wr.Left
h = wr.Bottom - wr.Top

if w > h then
r = h
else
r = w
end if

r = r / 2

dim i as integer
dim a as single
dim s as integer
dim astep as single
s = 21
astep = 2*PI/s
a = astep

dim hdc as HDC
hdc = GetDC(hWnd)

BeginPath(hdc)
MoveToEx(hdc, w/2, 0, Null)
for i = 1 to s-1
dim x as integer
dim y as integer

x = w/2+sin(a)*r
y = h/2-cos(a)*r

LineTo(hdc, x, y)

a = a + astep

next
EndPath(hdc)

dim region as HRGN
region = PathToRegion(hdc)

SetWindowRgn(hWnd, region, True)

ReleaseDC(hWnd, hdc)

end sub


Add a call to this function directly after calling ShowWindow.

There may be more efficient ways of doing this these days, but this will work for now.

Jim

[Clyde]

Ok coool, a circular region ( that would also be very cool if using circular buttons

Hows about having a proper "skinned" image?

Im in the process of making some button images, and an image for the skin ( hopefully Im calling it the proper term - Where theres an image ( sometimes with a colour mask ) that acts as a graphical way of making the window look more inviting; where buttons sit and the main visual area goes, etc, etc ) Aim is something like Rbz's - Camouflage, WinAmp / Media Player ( in now playing mode )

Cheers and thanks extremely,
Clyde.

[Jim]

Hows about having a proper "skinned" image?

You need to explain that more.  You can make any region you like, just draw the outline using LineTo.
Are you saying you have a bmp with some areas colour 0 and you'd like to make them transparent if you were to draw that to a window?  If so then you need to look at how to create regions for each of the 0 areas and join them together.

Jim

[Clyde]

Have you ever downloaded a music disc / music player from any demo groups?
Camouflage is one that was a joint venture between Dark Bit Factory ( Roly on Music ) and Gravity ( Rbz on ingenious code ). it's available from Rbraz.com ( with source ), possibly too in the showcase

I dont know if the appropriate term is skinned; ive always called them skinnable applications.

I'll try and give a good discription. theres an image of the player and has areas where the buttons would go and the display area for visual fx / text etc. it's like a carcass / framework that everything else sits on.

Maybe I dont need to do that as a special windows thingy, and just have it as a regular image and have that drawn first. But I was under the impression that was needed for the regions to be applied ( skinned (like skinning a drum ) ) to it

[Jim]

I've seen lots of skinned apps   The question is, what else do you need to make this happen?
You can load the skin image - draw all the buttons on it, or leave blanks where you can print buttons over the top.
You can detect the mouse over a button, or just an area, and change the image.
You've already discovered WM_LBUTTONDOWN which will let you do the click.
You can cut out any shape you like for your window.
The only thing I can see left is that you need some way to define all the images/areas.  I would do that in an .ini file using
GetPrivateProfileString to retrieve the options.
http://msdn.microsoft.com/en-us/library/ms724353(VS.85).aspx

Jim

[Clyde]

Hi,

Here's a new update with an interface graphic. All source and media included in the attachment. Still have yet to make nicer buttons, currently using temporary ones.

My Questions / Help needed are the following ( at time of writting )

1/ The size of the window isnt big enough to support the interface graphic.

2/ I need to get rid of the windows taskbar and edges, so that the interface is the design of the window. This'll mean I also need to know how to make my own minimize and close routines, when pressing the buttons for this. At present there is one for close.

3/ I've realized that black shows up, and isnt transparent, so have added a mask colour of &HFF00FF around any edges etc that arent expected to be seen. Just incase this is needed; as the black area is used for the display screen.

4/ Often the screen display area ( for now called PlasmaBuffer aka the black area ) will flicker now and again.

Cheers and huge thanks,
Clyde

[Hotshot]

impressive clyde...keep going 

[Clyde]

Thanks Hotshot.

I found a command called: SetWindowRgn(hWnd, region, True ) in Rbz's Camouflage source, and which im guessin I need to be using to set the window to the shape of the skin. also there are some bits to remove the taskbar and caption.

Im wondering if a tool is needed or available to make a WindowRegion also button regions out of the edges of images?
If there isnt would someone like to help me in creating one if I started a new topic on this ( or post in this fred )??

At the moment I will try to make it a bog standard rectangle region. Not quite sure on how to disregard the colour mask / make it show the desktop underneath.

Cheers a hugest of thanks,
Clyde.

[Clyde]

Ok here's an update, now with moveable window and close button - as previously with mockup buttons. and testing skin.

Not entirely sure on what the actual style stuff does - as i've borrowed it from the Camouflage Music Disk, will need to look that up, if i can find a place with the info.

And still not sure how to make the mask colour show through the underlying desktop, also the window doesnt start initially in the middle of the screen.

[Jim]

I found a command called: SetWindowRgn(hWnd, region, True ) in Rbz's Camouflage source,

If you notice, that's the last function I call in the last snippet I posted.  It sets the region I created using lines, to be the window's clip region.

If you want to make your window bigger, then change xres, yres that you pass to CreateWindow.
To get rid of all the window icons, status bars, borders, etc, change WS_OVERLAPPEDWINDOW to WS_POPUP in CreateWindow.

To get areas to show through your bitmap, create a rectangular region, then subtract away regions for the transparent colour.  I'd do this by, for each scanline of the image, create a 1 pixel high region for each of the non-seethrough runs of pixels and add it to an empty region using OR.  Repeat for each scanline.

also the window doesnt start initially in the middle of the screen.

In CreateWindow, you used
                           CW_USEDEFAULT,_
                           CW_USEDEFAULT,_
as the x,y position of the window.  That tells Windows it can put the window wherever it wants.

Jim