Tuning controls

[Patrice Terrier]

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.




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


...

[Janne Sikstrom]

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

[Patrice Terrier]

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.

...

[Patrice Terrier]

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.

...

[Patrice Terrier]

LCD clock in 4 steps



New const

Code Select Expand

const 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

Code Select Expand


    //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 clock

Code Select Expand

void 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);
    }
}

[Patrice Terrier]

This is a mockup of the new song settings popup, i am using in "Fly worship" version 5.5.



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.

...

[Theo Gottwald]

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.

[Patrice Terrier]

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.

...

[Patrice Terrier]

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.

...

[Theo Gottwald]

But to design the things a visaul tool would be state of the Art. Something like Firefly ... not?

[Patrice Terrier]

But 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:



This project is able to save the coordinates of all the sprites into a script file, to later rebuild the whole map on demand.

...

[Stefan Midegaal]

Patrice,

it's possible upload any *.car files for testing purpose ?

greets

[Patrice Terrier]

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.

[Stefan Midegaal]

I have download it and the Archiv is without *car or *.fly Files for testing
and i want testing it with Settings

Thanks.

greets

[Patrice Terrier]

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.