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.
...
Patrice,
it's possible upload any *.car files for testing purpose ?
greets
Emil
a ".car" file (acronym for custom arrangement) is a specific format to be used altogether with the "Fly Worship" WinDev application.
It makes sense only for music players accustomed to play with a band.
If you are yourself a musician you can get the free version from this link
http://www.flyworship.com/UK/
So far more than 2000 group bands are using it world wide, for their worship services.
There is also a version to be used with standard audio, to supply the missing instruments from a band.
"Fly Worship" is a very powerful GDImage/WinDev project that was a success story.
Flyworship has it own audio studio to produce song tracks, recorded by professional musicians, using the proprietary .fly audio format.
I have download it and the Archiv is without *car or *.fly Files for testing
and i want testing it with Settings ;)
Thanks.
greets
I did try to attach a zip file with one audio-track example, however because of the 32 Mb limitation of this forum i was unable to do it (the attachment is 51 550 Kb).
A custom arrangement is song specific, thus without all the audio tracks it could not be used.
A Fly audio song is made of multiple audio tracks, each one matching a specific instrument, recorded in high studio quality.
We are very far from mp3 there, because this is to provide the same quality than you can get when playing live instruments.
Anyway i don't know how you could figure to use it, without knowing first the in/out of Flyworship.
QuoteI did try to attach a zip file with one audio-track example, however because of the 32 Mb limitation of this forum i was unable to do it (the attachment is 51 550 Kb).
Thanks for the try..
greets
if your want Change any in Settings then please Change
gP.prevangle to Array for better handling the Knobs.
prevangle(5) AS LONG 'for 6 knobs
gP.prevangle(gP.focusID - %ID_GAUGE_FRONT)
the same Trouble appears in MTC32\MTC64
and other fix
GDImageCallBack..
CASE %WM_LBUTTONDOWN, %WM_LBUTTONDBLCLK
ELSEIF (IsGAUGE(nID)) THEN
gP.seedangle = ZD_ComputeObjectAngleFromPoint(nID, nMouseX, nMouseY)
gP.prevangle(nID - %ID_GAUGE_FRONT) = ZD_GetObjectAngle(nID)
gP.focusID = nID
so your has the right Value from selected Knob (nID - %ID_GAUGE_FRONT)
greets
Here is an example of stollen work, there is not a word to give the credit to the author of the original GUI.
And no permission request for using the graphic asset components i have created with PhotoShop.
This is how some guys (hopefully few) reward you for posting your source code here and there, taking all merits for themselves just because they translated the code to another language.
...
Let me add just for clarification that the Stefan Midegaal false identity that's been haunting this thread for a fairly long time and the E(mil) Weiss that's signed the above screenshot as the (alleged) original code author, --
are one and the same aggressive physical person, an evil troll, and a shameless code and asset thief.