This project is showing the use of custom graphic controls, based on the linking of several sprite objects altogether to create Widget.
They mimic what could be done with custom owner-drawn controls, with a high level of sophistication:
buttons, circular gauges, trackbars, switches, tickers, and listbox.
This allow the creation of amazing UI, looking like real objects.
The non client area is skinned with WinLIFT to look even more realistic.
And a zTrace window is used to display the message flow, for tutorial purpose.
(http://www.zapsolution.com/pictures/mtc6.png)
The attached project comprises both the PowerBASIC 32-bit (MTC32.zip) and the C++ 64-bit version (MTC64.zip).
PowerBASIC uses GDImage version 6.54, and C++ uses GDImage version 7.00
...
Patrice you have been endowed with a graphic eye and technical skills that are outstanding. Really impressive what you can do with PowerBASIC, really magic.
And many, many thanks for all graphic beauties you show and share with us
Janne--
Thanks.
I have translated the code to 64-bit, and my plan is to maintain the two versions in //.
I am currently cleaning the code to let them look alike.
...
The first post of this thread has been updated with a brand new version, with more controls, and standard WndProc messages to process the widget notifications.
Widget = Several graphic sprite objects linked together to act as a single entity, and mimic the behavior of a custom drawn control.
...
LCD clock in 4 steps
(http://www.zapsolution.com/pictures/mtc-lcd.png)
New constconst int ID_TIME_BACK = 9;
const int ID_TIME_SHADOW = 10;
const int ID_TIME_FRONT = 11;
const int ID_TIME_FRAME = 12;
The 4 steps transposed into source code
//Create LCD clock control
x = nLeftX; y = 94, w = 130, h = 40;
ZD_DrawRectangleToCtrl(gP.imagectrl, x, y, w, h, ZD_ARGB(255, 0,0,0), 1, ID_TIME_BACK, ZS_VISIBLE, ZD_DRAW_FILLED, 0);
ZD_SetObjectAnchorMode(ID_TIME_BACK, ANCHOR_CENTER);
// Here we are using a private font (no need to register it first)
PathCombine(gP.szresource, EXEresource(), L"lcd.ttf");
ZD_DrawTextToCtrlEx(gP.imagectrl, L"88:88:88", x, y+3, w, h, ZD_ARGB(255, 0,24,48), gP.szresource, 30, ID_TIME_SHADOW,
ZS_VISIBLE, 0, StringAlignmentCenter);
ZD_SetObjectAnchorMode(ID_TIME_SHADOW, ANCHOR_CENTER);
ZD_DrawTextToCtrlEx(gP.imagectrl, wzTIME(), x, y+3, w, h, ZD_ARGB(255, 3,123,250), gP.szresource, 30, ID_TIME_FRONT,
ZS_VISIBLE, 0, StringAlignmentCenter);
ZD_SetObjectAnchorMode(ID_TIME_FRONT, ANCHOR_CENTER);
PathCombine(gP.szresource, EXEresource(), L"time.png");
hBitmap = ZI_CreateBitmapFromFile(gP.szresource, bmW, bmH);
if (hBitmap) {
nID = ID_TIME_FRAME;
ZD_DrawBitmapToCtrl(gP.imagectrl, x, y, hBitmap, ZD_ColorARGB(255, 0), nID, ZS_VISIBLE);
ZD_SetObjectAnchorMode(nID, ANCHOR_CENTER);
ZD_SetObjectLocked(nID, TRUE);
}
And the animation source code to update the clockvoid RenderAnimation() {
static DWORD nSecond;
DWORD nTick = GetTickCount();
if (nSecond == 0) { nSecond = nTick + 1000; }
if (IsPowerOn()) {
long nFrame = ZD_GetObjectFrameToUse(ID_PULSE) + 1;
long ShowIt = TRUE; if (nSecond == 0) { ShowIt = FALSE; }
if (nFrame > ZD_GetObjectFrameCount(ID_PULSE)) { nFrame = 1; }
if (ZD_IsObjectVisible(ID_PULSE) == FALSE) {
ZD_SetObjectFrameToUse(ID_PULSE, 1, FALSE);
ZD_ShowObject(ID_PULSE, ShowIt);
} else {
ZD_SetObjectFrameToUse(ID_PULSE, nFrame, ShowIt);
}
} else if (ZD_IsObjectVisible(ID_PULSE)) {
ZD_ShowObject(ID_PULSE, FALSE);
}
if (nTick > nSecond) {
nSecond = 0;
ZD_SetObjectTextEx(ID_TIME_FRONT, wzTIME(), TRUE);
}
}
This is a mockup of the new song settings popup, i am using in "Fly worship" version 5.5.
(http://www.zapsolution.com/pictures/settings.png)
The point is that there is absolutly no Windows controls, everything is embedded inside of the GDImage graphic container that covers the whole client area.
However each of the sprite widget acts exactly like the regular Windows controls they mimic, posting the appropriate messages to be processed inside of the main message queue.
This allows me to easily customize everything, through the use of distinct graphic components and multiple transparent PNG layers stored inside of the "resource" folder. Even ALL the texts being used are embedded onto a specific transparent layer (and we just need to provide the correct layer, to have a Portugese or German version, no more need to recompile the code to support multiple languages, and even Mandarin, Cyrillic or Katakana).
Each widget is using specific sound FX, to give the illusion of a real control, and they have been designed to be used with either mouse or touch screen.
I am using Photoshop to create all the controls, and i use it to retrieve the correct alignment to setup the X,Y location for each widget inside of GDImage.
...
I'd like to have such Controls for the Firefly Visual Designer .... of course with Options for the Background.
That would make PB able to generate state-of-the-art surfaces.
Theo
They are not Windows controls, but GDImage widget acting like regular Windows controls.
No need for FireFly or anything else.
Just one single GDImage control that fits the whole client area.
...
Theo--
Settings.zip is attached to this post, altogether with its PowerBASIC source code.
To let you have a sneak preview of this very advanced GDImage project.
I have also enclosed the Photoshop mockup that i am using to perform the widget alignment.
It will be part of a larger WinDev commercial audio project that i am writing for a UK company as their R&D manager.
Added:
Turn the audio speaker on, if you want to hear the sounds associated to each specific controls.
On each side there is a auto/hide arrow to change the background being used.
...
But to design the things a visaul tool would be state of the Art. Something like Firefly ... not?
QuoteBut to design the things a visaul tool would be state of the Art. Something like Firefly ... not?
NO, because indeed there is already everything into GDImage to do it.
And my
Gmap2 project, with its built-in
drag and drop, would be a perfect candidate to do it.
There is no difference between displaying sprite markers on a map, and sprite buttons/gauges on an image background that covers the whole client area ;)
Here is a screen shot of the WinDev
Gmap2 GDImage project:
(http://www.zapsolution.com/preview/Gmap2.jpg)
This project is able to save the coordinates of all the sprites into a script file, to later rebuild the whole map on demand.
...