Author Topic: Tuning controls  (Read 6185 times)

0 Members and 1 Guest are viewing this topic.

Offline Patrice Terrier

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2382
  • Gender: Male
    • www.zapsolution.com
Tuning controls
« on: June 30, 2014, 06:11:27 PM »
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


...
« Last Edit: July 14, 2014, 10:06:47 AM by Patrice Terrier »
Patrice Terrier
GDImage (advanced graphic addon)
http://www.zapsolution.com

Offline Janne Sikstrom

  • Newbie
  • *
  • Posts: 2
Re: Media tuning control
« Reply #1 on: July 03, 2014, 10:59:46 PM »
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

Offline Patrice Terrier

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2382
  • Gender: Male
    • www.zapsolution.com
Re: Media tuning control
« Reply #2 on: July 04, 2014, 06:57:05 PM »
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
GDImage (advanced graphic addon)
http://www.zapsolution.com

Offline Patrice Terrier

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2382
  • Gender: Male
    • www.zapsolution.com
Tuning controls (updated)
« Reply #3 on: July 13, 2014, 04:53:11 PM »
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
GDImage (advanced graphic addon)
http://www.zapsolution.com

Offline Patrice Terrier

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2382
  • Gender: Male
    • www.zapsolution.com
Tuning controls (LCD clock)
« Reply #4 on: July 17, 2014, 12:31:21 PM »
LCD clock in 4 steps



New const
Code: [Select]
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]
    //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]
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
GDImage (advanced graphic addon)
http://www.zapsolution.com

Offline Patrice Terrier

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2382
  • Gender: Male
    • www.zapsolution.com
Tuning controls (Fly settings)
« Reply #5 on: August 09, 2014, 12:39:51 PM »
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.

...
« Last Edit: August 11, 2014, 07:27:25 PM by Patrice Terrier »
Patrice Terrier
GDImage (advanced graphic addon)
http://www.zapsolution.com

Offline Theo Gottwald

  • Administrator
  • Hero Member
  • *****
  • Posts: 1110
  • Gender: Male
    • it-berater
Re: Tuning controls
« Reply #6 on: August 23, 2014, 11:38:20 AM »
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.

Offline Patrice Terrier

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2382
  • Gender: Male
    • www.zapsolution.com
Re: Tuning controls
« Reply #7 on: August 23, 2014, 12:56:37 PM »
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
GDImage (advanced graphic addon)
http://www.zapsolution.com

Offline Patrice Terrier

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2382
  • Gender: Male
    • www.zapsolution.com
Re: Tuning controls
« Reply #8 on: August 23, 2014, 02:36:16 PM »
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.

...

« Last Edit: August 23, 2014, 02:43:20 PM by Patrice Terrier »
Patrice Terrier
GDImage (advanced graphic addon)
http://www.zapsolution.com

Offline Theo Gottwald

  • Administrator
  • Hero Member
  • *****
  • Posts: 1110
  • Gender: Male
    • it-berater
Re: Tuning controls
« Reply #9 on: September 03, 2014, 09:53:50 PM »
But to design the things a visaul tool would be state of the Art. Something like Firefly ... not?

Offline Patrice Terrier

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 2382
  • Gender: Male
    • www.zapsolution.com
Re: Tuning controls
« Reply #10 on: September 03, 2014, 10:57:45 PM »
Quote
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.

...
« Last Edit: September 03, 2014, 11:11:40 PM by Patrice Terrier »
Patrice Terrier
GDImage (advanced graphic addon)
http://www.zapsolution.com