[SDK] 11 - Introducing ZSK file ["Business class" SKIN]

[Patrice Terrier]

THIS IS ANOTHER MAJOR RELEASE
introducing the new ZSK file format that stores custom SKIN parameters

Example: BUSI.ZKS ("Business class" SKIN)

Code Select Expand


'AUTHOR section -------------------------------------------------------------
"AUTHOR,Business class|Skin design: <Patrice Terrier> E-mail: pterrier@zapsolution.com"

'SIZE & COORDINATES section -------------------------------------------------
"CXSYSBUT,            10"          ' Sys buttons X offset from right side.
"CYSYSBUT,            02"          ' Sys buttons Y offset from top side.

"CXSYSICON,           16"          ' Icon X offset from left side.
"CYSYSICON,           09"          ' Icon Y offset from top side.

"CXCAPTEXT,           40"          ' Caption text X offset from left side.
"CYCAPTEXT,           09"          ' Caption text Y offset from top side.

"CXSYSLED,            53"          ' Led X offset from right side.
"CYSYSLED,            24"          ' Led Y offset from top side.
                                   
"BTN_FIX_X,           07"          ' Horizontal non stretched button border
"BTN_FIX_Y,           05"          ' Vertical non stretched button border

'BITMAP section -------------------------------------------------------------
"CENTER,              @PATH@Busi\FORM_Center.jpg"
"TOP_LEFT,            @PATH@Busi\FORM_TopLeft.png"
"TOP_MID,             @PATH@Busi\FORM_TopMid.png"
"TOP_RIGHT,           @PATH@Busi\FORM_TopRight.png"
"SIDE_LEFT,           @PATH@Busi\FORM_SideLeft.png"
"SIDE_RIGHT,          @PATH@Busi\FORM_SideRight.png"
"BOTTOM_LEFT,         @PATH@Busi\FORM_BottomLeft.png"
"BOTTOM_MID,          @PATH@Busi\FORM_BottomMid.png"
"BOTTOM_RIGHT,        @PATH@Busi\FORM_BottomRight.png"
"LED,                 @PATH@Busi\BTN_Led.png"

"PUSHBUT,             @PATH@Busi\BTN_Crystal.png"
"CHECKBUT,            @PATH@Busi\BTN_Check.png"
                                   
'COLOR section --------------------------------------------------------------
"ACTIVECAPTION,       255,253,245,178" ' Active caption text color.
"INACTIVECAPTION,     255,131,83,61"   ' Inactive caption text color.
"TEXTCOLOR,           255,110,109,113" ' Default ARGB color.
"BTNTEXTCOLOR,        255,255,255,255" ' Push button ARGB text color.

"POPMENUTEXT,         255,16,16,16"    ' PopMenu and Status text ARGB color.
"POPMENUHILITE,       255,196,196,196" ' PopMenu hilite ARGB color.
"ACTIVEMENUBAR,       255,16,16,16"    ' Active menu bar ARGB text color.
"INACTIVEMENUBAR,     255,133,138,133" ' Inactive menu bar ARGB text color.

"CAPTION_FONT,        Trebuchet MS"    ' Caption font
"CAPTION_FONT_HEIGHT, 20"              ' Caption font size
"PUSHBUT_FONT_SIZE,   14"              ' Push button font size
"ICON_SIZE,           24"              ' Icon size
"TRACK_HICOLOR,       255,237,176,71"  ' Track bar hilight color
"PAINT_BORDER,        1"               ' 0 = %PAINT_TILING_MODE, 1 = %PAINT_STRETCH_MODE
"PAINT_BACKGROUND,    1"               ' 0 = %PAINT_TILING_MODE, 1 = %PAINT_STRETCH_MODE


@PATH@ is a macro that means, use current EXE's folder name as root path to the SKIN subfolder.

Using ZSK file and its corresponding SKIN subfolder, allows you to create custom SKIN without editing the source code of the EXE. And with little extra work it is even possible to change the whole SKIN on the fly!

The "Business class" SKIN is using an original design and a complete graphic color chart that must be used with any new controls to keep good looking.

Here is a screen shot of the result




The zInitSkin is the main function to decode the ZSK file, altogether with the zskin.inc file. It must be called just after the creation of the main window and before the creation of any child controls.

Code Select Expand


'// Load SKIN components and create SYS buttons
SUB zInitSkin (BYVAL hMain AS LONG, zConfigFile AS ASCIIZ)
    LOCAL rc AS RECT
    LOCAL hBut, imgW, imgH, MinSizeX, StartX, StartY, x, y, Done AS LONG
    LOCAL zTip AS ASCIIZ * 20
    LOCAL zImageFile AS ASCIIZ * %MAX_PATH
    LOCAL sExePath, sSkinPath AS STRING

    LOCAL Item, S1, S2, S3, MiC, nProp, xLed, yLed AS LONG
    LOCAL sParam, sBF AS STRING

    IF IsWindow(hMain) THEN
       CALL GetClientRect(hMain, rc)

       CALL zSplitN(zExeName(), sExePath, "")

       Item = 0
       DO WHILE Done = 0
          sBF = LTRIM$(zBufin(zConfigFile, Done))
          IF Done = 0 THEN
             IF ASC(LTRIM$(sBF)) = 39 THEN sBF = "" ' "'"
             S1 = INSTR(sBF, "`")
             S2 = INSTR(-1, sBF, CHR$(34))
             IF S1 = 0 THEN
                S3 = INSTR(-1, sBF, "'"): IF S3 > S2 THEN S1 = S3
             END IF
             IF S1 THEN sBF = RTRIM$(LEFT$(sBF, S1 - 1))
             S1 = INSTR(sBF, CHR$(34))
             IF S1 AND S1 < S2 THEN
                MiC = ASC(sBF, LEN(sBF))
                sBF = UCASE$(MID$(sBF, S1 + 1, S2 - S1 - 1))
                INCR Item
                ON Item GOSUB AUTHOR,CXSYSBUT,CYSYSBUT,CXSYSICON,CYSYSICON,CXCAPTEXT,CYCAPTEXT,CXSYSLED,CYSYSLED, _
                              BTN_FIX_X,BTN_FIX_Y,CENTER,TOP_LEFT,TOP_MID,TOP_RIGHT,SIDE_LEFT,SIDE_RIGHT,BOTTOM_LEFT,BOTTOM_MID,BOTTOM_RIGHT,LED,PUSHBUT,CHECKBUT, _
                              ACTIVECAPTION,INACTIVECAPTION,TEXTCOLOR,BTNTEXTCOLOR,POPMENUTEXT,POPMENUHILITE,ACTIVEMENUBAR,INACTIVEMENUBAR, _
                              CAPTIONFONT,CAPTIONFONTHEIGHT,PUSHBUTFONTSIZE,ICONSIZE,TRACKHICOLOR,PAINT_BORDER,PAINT_BACKGROUND

             END IF
          END IF
       LOOP

       zImageFile = sSkinPath + "BTN_Close.png"
       hBut = zButImage(hMain, zImageFile, -100, -100, %ID_CLOSE)
       CALL zGetImageSize(zGetButImageProperty(hBut), imgW, imgH): imgW = imgW \ 5
       MinSizeX = MinSizeX + imgW
       x = rc.nRight - imgW - StartX: y = StartY: CALL MoveWindow(hBut, x, y, imgW, imgH, %TRUE)
       CALL zSetAnchorMode(hBut, %ANCHOR_RIGHT)
       IF IsFrench() THEN zTip = "Fermer" ELSE zTip = "Close"
       CALL zCreateToolTip(hBut, zTip)

       zImageFile = sSkinPath + "BTN_Restore.png"
       hBut = zButImage(hMain, zImageFile, -100, -100, %ID_RESTORE)
       CALL ShowWindow(hBut, %SW_HIDE)
       CALL zGetImageSize(zGetButImageProperty(hBut), imgW, imgH): imgW = imgW \ 5
       MinSizeX = MinSizeX + imgW
       x = x - imgW: CALL MoveWindow(hBut, x, y, imgW, imgH, %FALSE)
       CALL zSetAnchorMode(hBut, %ANCHOR_RIGHT)
       IF IsFrench() THEN zTip = "Niveau inférieur" ELSE zTip = "Restore"
       CALL zCreateToolTip(hBut, zTip)

       zImageFile = sSkinPath + "BTN_Maximize.png"
       hBut = zButImage(hMain, zImageFile, -100, -100, %ID_MAXIMIZE)
       CALL zGetImageSize(zGetButImageProperty(hBut), imgW, imgH): imgW = imgW \ 5
       CALL MoveWindow(hBut, x, y, imgW, imgH, %TRUE)
       CALL zSetAnchorMode(hBut, %ANCHOR_RIGHT)
       IF IsFrench() THEN zTip = "Agrandir" ELSE zTip = "Maximize"
       CALL zCreateToolTip(hBut, zTip)

       zImageFile = sSkinPath + "BTN_Minimize.png"
       hBut = zButImage(hMain, zImageFile, -100, -100, %ID_MINIMIZE)
       CALL zGetImageSize(zGetButImageProperty(hBut), imgW, imgH): imgW = imgW \ 5
       MinSizeX = MinSizeX + imgW
       x = x - imgW: CALL MoveWindow(hBut, x, y, imgW, imgH, %TRUE)
       CALL zSetAnchorMode(hBut, %ANCHOR_RIGHT)
       IF IsFrench() THEN zTip = "Reduire" ELSE zTip = "Iconize"
       CALL zCreateToolTip(hBut, zTip)

'      // Create GDIPLUS image from file
       CALL zDrawBackground()

       CALL zMinTrackSizeX(rc.nRight)  ' MinSizeX
       CALL zMinTrackSizeY(rc.nBottom) ' MAX&(imgH, 22)

    END IF

EXIT SUB

AUTHOR:
CALL zSkinAuthor(PARSE$(sBF, 2))
RETURN

CXSYSBUT:
StartX = VAL(PARSE$(sBF, 2))
RETURN

CYSYSBUT:
StartY = VAL(PARSE$(sBF, 2))
RETURN

CXSYSICON:
CALL zCXSYSICON(VAL(PARSE$(sBF, 2)), 1)
RETURN

CYSYSICON:
CALL zCYSYSICON(VAL(PARSE$(sBF, 2)), 1)
RETURN

CXCAPTEXT:
CALL zCXCAPTEXT(VAL(PARSE$(sBF, 2)), 1)
RETURN

CYCAPTEXT:
CALL zCYCAPTEXT(VAL(PARSE$(sBF, 2)), 1)
RETURN

CXSYSLED:
xLed = rc.nRight - VAL(PARSE$(sBF, 2))
RETURN

CYSYSLED:
yLed = VAL(PARSE$(sBF, 2))
RETURN

BTN_FIX_X:
CALL zBTNFIXX(VAL(PARSE$(sBF, 2)), 1)
RETURN

BTN_FIX_Y:
CALL zBTNFIXY(VAL(PARSE$(sBF, 2)), 1)
RETURN

CENTER:
CALL zSetProperty(hMain, %FORM_Center, zCreateImageFromFile((zSkinPath(sBF, sExePath))))
CALL zSplitN(zSkinPath(sBF, sExePath), sSkinPath, "")
CALL zFOLDER(sSkinPath,1)
RETURN

TOP_LEFT:
CALL zSetProperty(hMain, %FORM_TopLeft, zCreateImageFromFile((zSkinPath(sBF, sExePath))))
RETURN

TOP_MID:
CALL zSetProperty(hMain, %FORM_TopMid, zCreateImageFromFile((zSkinPath(sBF, sExePath))))
RETURN

TOP_RIGHT:
CALL zSetProperty(hMain, %FORM_TopRight, zCreateImageFromFile((zSkinPath(sBF, sExePath))))
RETURN

SIDE_LEFT:
CALL zSetProperty(hMain, %FORM_SideLeft, zCreateImageFromFile((zSkinPath(sBF, sExePath))))
RETURN

SIDE_RIGHT:
CALL zSetProperty(hMain, %FORM_SideRight, zCreateImageFromFile((zSkinPath(sBF, sExePath))))
RETURN

BOTTOM_LEFT:
CALL zSetProperty(hMain, %FORM_BottomLeft, zCreateImageFromFile((zSkinPath(sBF, sExePath))))
RETURN

BOTTOM_MID:
CALL zSetProperty(hMain, %FORM_BottomMid, zCreateImageFromFile((zSkinPath(sBF, sExePath))))
RETURN

BOTTOM_RIGHT:
CALL zSetProperty(hMain, %FORM_BottomRight, zCreateImageFromFile((zSkinPath(sBF, sExePath))))
RETURN

LED:
hBut = zButImage(hMain, (zSkinPath(sBF, sExePath)), xLed, yLed, %ID_LED)
CALL zSetAnchorMode(hBut, %ANCHOR_RIGHT)
RETURN

PUSHBUT:
'zCreateImageFromFile((zSkinPath(sBF, sExePath)))
RETURN

CHECKBUT:
'zCreateImageFromFile((zSkinPath(sBF, sExePath)))
RETURN

ACTIVECAPTION:
CALL zACTIVECAPTION(zSkinARGB(sBF), 1)
RETURN

INACTIVECAPTION:
CALL zINACTIVECAPTION(zSkinARGB(sBF), 1)
RETURN

TEXTCOLOR:
CALL zTEXTCOLOR(zSkinARGB(sBF), 1)
RETURN

BTNTEXTCOLOR:
CALL zBTNTEXTCOLOR(zSkinARGB(sBF), 1)
RETURN

POPMENUTEXT:
CALL zPOPMENUTEXT(zSkinARGB(sBF), 1)
RETURN

POPMENUHILITE:
CALL zPOPMENUHILITE(zSkinARGB(sBF), 1)
RETURN

ACTIVEMENUBAR:
CALL zACTIVEMENUBAR(zSkinARGB(sBF), 1)
RETURN

INACTIVEMENUBAR:
CALL zINACTIVEMENUBAR(zSkinARGB(sBF), 1)
RETURN

CAPTIONFONT:
CALL zCAPTIONFONT(PARSE$(sBF, 2), 1)
RETURN

CAPTIONFONTHEIGHT:
CALL zCAPTIONFONTHEIGHT(VAL(PARSE$(sBF, 2)), 1)
RETURN

PUSHBUTFONTSIZE:
CALL zPUSHBUTFONTSIZE(VAL(PARSE$(sBF, 2)), 1)
RETURN

ICONSIZE:
CALL zICONSIZE(VAL(PARSE$(sBF, 2)), 1)
RETURN

TRACKHICOLOR:
CALL zTRACKHICOLOR(zSkinARGB(sBF), 1)
RETURN

PAINT_BORDER:
CALL zPAINT_BORDER(VAL(PARSE$(sBF, 2)), 1)
RETURN

PAINT_BACKGROUND:
CALL zPAINT_BACKGROUND(VAL(PARSE$(sBF, 2)), 1)
RETURN

END SUB


All the SKIN properties (functions) are prefixed with "SK_" like these:

Code Select Expand


FUNCTION SK_AUTHOR() AS STRING
    FUNCTION = zSkinAuthor("")
END FUNCTION

FUNCTION SK_FOLDER() AS STRING
    FUNCTION = zFOLDER("", 0)
END FUNCTION

FUNCTION SK_ACTIVECAPTION() AS LONG
    FUNCTION = zACTIVECAPTION(0, 0)
END FUNCTION

FUNCTION SK_INACTIVECAPTION() AS LONG
    FUNCTION = zINACTIVECAPTION(0,0)
END FUNCTION

FUNCTION SK_TEXTCOLOR() AS LONG
    FUNCTION = zTEXTCOLOR(0,0)
END FUNCTION

FUNCTION SK_BTNTEXTCOLOR() AS LONG
    FUNCTION = zBTNTEXTCOLOR(0,0)
END FUNCTION

FUNCTION SK_POPMENUTEXT() AS LONG
    FUNCTION = zPOPMENUTEXT(0,0)
END FUNCTION

FUNCTION SK_POPMENUHILITE() AS LONG
    FUNCTION = zPOPMENUHILITE(0,0)
END FUNCTION

FUNCTION SK_ACTIVEMENUBAR() AS LONG
    FUNCTION = zACTIVEMENUBAR(0,0)
END FUNCTION

FUNCTION SK_INACTIVEMENUBAR() AS LONG
    FUNCTION = zINACTIVEMENUBAR(0,0)
END FUNCTION

FUNCTION SK_CAPTIONFONT() AS STRING
    FUNCTION = zCAPTIONFONT("", 0)
END FUNCTION

FUNCTION SK_CAPTIONFONTHEIGHT() AS LONG
    FUNCTION = zCAPTIONFONTHEIGHT(0,0)
END FUNCTION

FUNCTION SK_PUSHBUTFONTSIZE() AS LONG
    FUNCTION = zPUSHBUTFONTSIZE(0,0)
END FUNCTION

FUNCTION SK_ICONSIZE() AS LONG
    FUNCTION = zICONSIZE(0,0)
END FUNCTION

FUNCTION SK_TRACKHICOLOR() AS LONG
    FUNCTION = zTRACKHICOLOR(0,0)
END FUNCTION

FUNCTION SK_PAINT_BORDER() AS LONG
    FUNCTION = zPAINT_BORDER(0,0)
END FUNCTION

FUNCTION SK_PAINT_BACKGROUND() AS LONG
    FUNCTION = zPAINT_BACKGROUND(0,0)
END FUNCTION


And for the fun I have added an exclusive "Halo button".

Patrice Terrier
www.zapsolution.com

[Kent Sarikaya]

Thanks Patrice. I hope to make skins in the future. Looks like it will be lots of fun. Thanks for the tool set and instructions so far!!

[Patrice Terrier]

Thanks Patrice. I hope to make skins in the future. Looks like it will be lots of fun. Thanks for the tool set and instructions so far!!

I am glad if my post could help a few of the members of this little, but surely, growing community

[Patrice Terrier]

The first post of this thread has been updated, to fix the ZIP file corruption caused by the "Server Collapse".

...