4. What's MiniGUI
Previous Home Next
4.11. Being More Graphical (Picture Buttons)

DESCRIPTION:
  In the previous article - about the "easy button" (Button) - mentioned, I remember, including "...or with a picture...". Many people are interested: "How's that?"... So face it. All elementary, Watson! Just in button definition instead of
  CAPTION "la-la-la"
we write, for example
  PICTURE "La-la-la.BMP"
(where "La-la-la.BMP" - file name of file with a picture; you can use .BMP, .ICO, .GIF, .PNG and .JPG-files... perhaps some have forgotten; if path [absolute or relative] to the file is not specified - it should be in the folder where the program will be in at run time). And more preferably (but not necessarily) to indicate clearly the height and width of the button (they are - ideally and for the best display - should coincide with the height and width of the image, or - that it is not distorted - even if the proportions should be consistent with the proportions of the image).

So, let's write, for example, this command:
   @ 40, 40 BUTTON Pic_But_1 ;
             PICTURE "edit_print.bmp" ;
             WIDTH 40 ;
             HEIGHT 40
And on the screen we will see quite a nice button:

proga_11

I took a file EDIT_PRINT.BMP from a folder MiniGUI\RESOURCES (image size - 32 by 32 pixels, but - to frame the buttons are not "clamped" edge of the image - I took "on allowance" from the edges still on 4 pixels, thereby increasing the size of a button to 40 to 40). Incidentally, I tried not to specify WIDTH and HEIGHT (when I made a screenshot of this button) - the button did not showed at all!.. That's it... Didn't know. :)

Come on, let's write an example with a button-image! (and add some trick of course) :)
PROCESS ITSELF:
  1. Create a file (or copy the "basis" from the previously created PROG_10) PROG_11.PRG and change the text to make it so (I will not write in the future "// <- starts here..." and "ends here..." [only when really needed for understanding] - see yourself closely, what has changed; the necessary clarifications - at "debriefing"):

    --------------------- start of PROG_11.PRG -------------
    #include "minigui.ch"
    
    REQUEST HB_CODEPAGE_RU1251, HB_CODEPAGE_RU866
    
    //===============
    
    PROCEDURE Main
    
      private w1r, w1c
    
      SET LANGUAGE TO RUSSIAN
      hb_SetCodepage( "RU1251" )
    
      DEFINE WINDOW Win_1 ;
        AT 0,0 ;
        WIDTH 400 ;
        HEIGHT 200 ;
        TITLE "Button + Picture (Picture Button)... and rubber Window" ;
        MAIN ;
        NOMINIMIZE ;
        NOMAXIMIZE ;
        NOSIZE ;
        ON MOVE Fun_1() ;
        ICON "ICON_CAS.ICO" ;
        FONT "Times New Roman" SIZE 11
    
        @ 40, 40 BUTTON Button_1 ;
                  CAPTION "Press me!" ;
                  TOOLTIP "Description (tooltip) for the button with a text" ;
                  ACTION { || iif( Win_1.Check_1.Value=.T. , ;
                                   MsgInfo( 'You pressed to "Press me!"...' ), ;
                                   Nil ) }
    
       @  40, 200 BUTTON Pic_But_1 ;
                  PICTURE "edit_print.bmp" ;
                  WIDTH 40 HEIGHT 40 ;
                  TOOLTIP "Description (tooltip) for the button with a picture" ;
                  ACTION { || iif( Win_1.Check_1.Value=.T. , ;
                                   MsgInfo( "You pressed to picture..."), ;
                                   Nil ) }
    
       @ 120, 40 CHECKBOX Check_1 ;
                  CAPTION "Buttons acts" ;
                  WIDTH 150 ;
                  TOOLTIP "Permission/prohibition of the buttons (also tooltip)" ;
                  VALUE .F.
    
      END WINDOW
    
      CENTER WINDOW Win_1
    
      w1r := Win_1.Row
      w1c := Win_1.Col
    
      ACTIVATE WINDOW Win_1
    
    RETURN
    
    *--------------------------------------------------------*
    Function Fun_1()
    *--------------------------------------------------------*
    
    /*
     restoration the window coordinates
     specified when the program starts
     when you try to move the window
    */
    
      Win_1.Row := w1r
      Win_1.Col := w1c
    
    Return Nil
    
    --------------------- finish of PROG_11.PRG --------------

  2. In the same folder where you saved this PRG-file, create a batch file to compile the program - COMPILE_11.BAT... but better do the following: create a batch file (call it COMPI.BAT) with the following text:

    --------------------- start of COMPI.BAT -------------
    CALL C:\MiniGUI\Batch\Compile.bat %1
    
    --------------------- finish of COMPI.BAT --------------

    Now we have a universal (well, at least, until we reached some sort of special "perversions", he is all right) batch file to compile our examples - and we will not have to write for each example (or to "copypaste") it's own unique BAT file.

  3. Start compiling this way: appending as a parameter (in space) name of the PRG-file (without a dot and file expansion "prg"):
    C:\where_it_is_into_the_comp>Compi.bat prog_11
    
    Everything happened? It compiled? Yesss... If all goes well - we get our window with buttons and checkbox...

    proga_11a

    I say again - not in a hurry to press buttons or check in the checkbox!.. What are the differences from the previous case who noticed?.. Yes - font changed (and on the text button and a checkbox); this is result of
       FONT "Times New Roman" SIZE 11
    in definition of window Win_1 (default font - seems to be, but I'm not sure - "Arial" size 10; should clarify ... If at window definition font and font size are specified - it is by default operates on all the text strings in all controls inside this window [although almost all controls can be identified their special font - for that control only])... By the way, you can't specify only SIZE - you must write it with a FONT.

    More differences?.. Anyone see anything?.. Let's try (pointing your mouse at the bottom right corner of window [the cursor will change its shape with the two oblique arrows pointed ends], then press and hold the left mouse button) to resize the window (for comparison - in the previous examples it could; after lecture end - try it)... You can't do it? Yeah - that's the result of NOSIZE clause in determining of window (we will not give to user to expand and collapse window - but we don't let the user to change its size).

    Another joke... Rabbit into my pocket? No - but interesting trick too... :) Now carefully spend your mouse on the right side of the window (on the "open field" - not crossed the buttons and checkbox) to its title (the topmost part of the window with a text "Button with a picture..."); let's try (by clicking the left mouse button and hold) to move a window from the center of the screen to the left... release the mouse button... (usually "simple" MS Window's window - what's a "word game"! :) - remains in the position where we drag it, but our window - little sensitive unusual :) )... and - damn! It is - as the "elastic" - returns to its original position... Let's move it to right - the same thing. Up or down - similar to...

    proga_11b

    What's that?.. How it's made?.. We look to the definition of the window - and see
       ON MOVE Fun_1()
    I.e. when the event ON MOVE occurs (attempt to move the window) - our program calls function Fun_1()... Well, well, look at the function; all that is going on there, is:
      Win_1.Row := w1r
      Win_1.Col := w1c
    (the coordinates of the upper left corner of the window are taken from some variables "w1r" and "w1c"). And where do these variables and where they are assigned their values?.. We look at the top (immediately after the beginning of "Main" procedure)... Catch it! Here they are:
      private w1r, w1c
    And where they get values? Look, look... Aha, here - almost at the end of procedure "Main":
      CENTER WINDOW Win_1
    
      w1r := Win_1.Row
      w1c := Win_1.Col
    
      ACTIVATE WINDOW Win_1
    I.e. we have defined this window Win_1, centered it on the screen - but not demonstrated it on screen yet (through ACTIVATE)... But its position is already known for us at this moment - and we can save its coordinates (row and column - in pixels - of left upper corner of window) to variables!.. "And if anyone tries to put his dirty hands on my window with a place to move!.." - he didn't come out! When you try to "touch" the window, function "Fun_1" will calls - and all will recover... The result is "designed to protect against a fool" :) (no dimensions do not change, nor to drag anywhere).

    Now you can play with... "Hey!.. What is there in program text - TOOLTIP's with text?.. What's that?.." "Oh! I just stopped my mouse cursor on a button - and it writes to me something with a little letters on yellowish background... Oops! disappeared..."

    proga_11c

    OK - it's no need to explain (from me). You explained all to each other ourselves... Imagine: we want (as in any "serious", "big-firm-style" program), so if the user rolls on control - to give him a hint ("for what it "or something like that)... So let's write in control definition
      TOOLTIP "text-text-text"
    (here instead of "text-text-text" we write an explanation of our control)... And finally (or is it not necessary to explain?), with marked checkbox buttons acts ("iif( ... )" in their ACTION), and when "empty" - no. Flip, try it!

    Uuufff... That's how many "effects" we made!.. (and they are very useful in some situations). Well, about it - "this is the end..." :) Who knows - from whose song this words are? "Windows"?.. ha-ha!.. No - "Doors"! :)

    In the next article we will cross a Cat and a Rat (and we'll get a terrible "CatRat"!) - from Button and CheckBox we'll get CheckButton.

MiniGUI - © 2003-2008 Roberto Lopez
Extended version - MiniGUI Team (Grigory Filatov, Jacek Kubica, Janusz Pora)
Edited by Janusz Pora
© Alex L. Gustow. Translation and reformatting. 2009