February 24, 2020, 05:04:55 pm

News:

IonicWind Snippit Manager 2.xx Released!  Install it on a memory stick and take it with you!  With or without IWBasic!


Pictures as BUTTONS DEMO with MOUSEOVER EFFECT

Started by Junner2003, January 15, 2007, 03:30:07 pm

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Junner2003

January 15, 2007, 03:30:07 pm Last Edit: January 15, 2007, 03:44:20 pm by Junner2003
Below is an EBASIC script demonstrating the use of pictures as buttons.
You get a virtual 'ICON ZOOM' while moving the mouse over an image and an event while clicking on it. I hope some of you have use for this ...

Please download the attached zip file. It contains the needed graphics for this demonstration.

Quote' Demonstration of USING PICTURES as BUTTONS
' with MOUSEOVER EFFECT
' EBASIC / IBASIC PRO CODE
' by Junner2003

def headpic:INT
def icon1a:INT
def icon1b:INT
def icon2a:INT
def icon2b:INT
def icon3a:INT
def icon3b:INT
def icon4a:INT
def icon4b:INT

'Define the position and size of the ICON pictures
def X1,Y1,W1,H1:int          :REM This is for picture 1
def X2,Y2,W2,H2:int          :REM This is for picture 2
def X3,Y3,W3,H3:int          :REM This is for picture 3
def X4,Y4,W4,H4:int          :REM This is for picture 4

'Define file name and path of the pictures:
headpic = LoadImage(GetStartPath + "header.jpg", @IMGSCALABLE)
icon1a = LoadImage(GetStartPath + "settings0.jpg", @IMGSCALABLE)
icon1b = LoadImage(GetStartPath + "settings1.jpg", @IMGSCALABLE)
icon2a = LoadImage(GetStartPath + "backup0.jpg", @IMGSCALABLE)
icon2b = LoadImage(GetStartPath + "backup1.jpg", @IMGSCALABLE)
icon3a = LoadImage(GetStartPath + "history0.jpg", @IMGSCALABLE)
icon3b = LoadImage(GetStartPath + "history1.jpg", @IMGSCALABLE)
icon4a = LoadImage(GetStartPath + "delete0.jpg", @IMGSCALABLE)
icon4b = LoadImage(GetStartPath + "delete1.jpg", @IMGSCALABLE)

Const MB_ICONINFORMATION = 64     :REM Used in the MESSAGE BOX at LINE 139

'The window and the default loaded pictures:
DEF w as WINDOW
OPENWINDOW w,0,0,500,260,@CAPTION,0,"KADObytes Backup & Restore",&main
centerwindow w
ShowImage w,headpic,@IMGSCALABLE,0,0,500,35
ShowImage w,icon1a,@IMGSCALABLE,67,152,48,48,1
ShowImage w,icon2a,@IMGSCALABLE,167,152,48,48,2
ShowImage w,icon3a,@IMGSCALABLE,275,160,32,32
ShowImage w,icon4a,@IMGSCALABLE,375,160,32,32

' Set size and position for the pictures for MOUSEOVER
' PICTURE 1
X1=67
Y1=152
W1=48
H1=48
' PICTURE 2
X2=167
Y2=152
W2=48
H2=48
' PICTURE 3
X3=267
Y3=152
W3=48
H3=48
' PICTURE 4
X4=367
Y4=152
W4=48
H4=48

' some static text on the main window:
DRAWMODE w,@TRANSPARENT              :REM make font background transparent
SETFONT w, "Ariel", 24, 700          :REM font name and size
FRONTPEN w,RGB(255,255,255)          :REM font color white
MOVE w,10,0                          :REM Put The font to the right position
PRINT w,"Welcome!"                   :REM header text (overlay on the header pic)

' Frame from lines ORANGE
LINE w, 0, 35, 500, 35, RGB(255,128,0)        :REM a line here used to build a frame (top horizontal)
LINE w, 0, 120, 500, 120, RGB(255,128,0)      :REM a line here used to build a frame (bottom horizontal)
LINE w, 0, 35, 0, 120, RGB(255,128,0)         :REM a line here used to build a frame (left vertical)
LINE w, 493, 35, 493, 120, RGB(255,128,0)     :REM a line here used to build a frame (right vertical)


SETFONT w, "Ariel", 12, 700
FRONTPEN w,RGB(0,64,128)                :REM font color black
MOVE w,10,40
PRINT w,"PICTURES as button DEMO"

LINE w, 10, 60, 480, 60, RGB(0,64,128)   :REM a line here used as a seperator

SETFONT w, "Arial", 8, 500
FRONTPEN w,RGB(95,95,95)             :REM font color black
MOVE w,10,65
PRINT w,"Below you see 4 JPG IMAGES. Move your mouse over the pictures and see what this SCRIPT"
MOVE w,10,80
PRINT w, "DEMONSTRATION does: While moving the mouse over an ICON it will virtually 'zoom', and when"
MOVE w,10,95
PRINT "clicking on one of them it will do something ..."

run = 1

WAITUNTIL run = 0
CLOSEWINDOW w
END

'----------------------------------------------------------------------------------
SUB main
select @CLASS
       case @IDMOUSEMOVE
       ' PICTURE 1
            if ((@mousex>X1) & (@mousex<(X1+W1)) & (@mousey>Y1) & (@mousey<(Y1+H1)))
               ShowImage w,icon1b,@IMGSCALABLE,67,152,48,48,1
            else
               ShowImage w,icon1a,@IMGSCALABLE,67,152,48,48,1
           endif
       ' PICTURE 2
            if ((@mousex>X2) & (@mousex<(X2+W2)) & (@mousey>Y2) & (@mousey<(Y2+H2)))
               ShowImage w,icon2b,@IMGSCALABLE,167,152,48,48,2
            else
               ShowImage w,icon2a,@IMGSCALABLE,167,152,48,48,2
           endif
       ' PICTURE 3
            if ((@mousex>X3) & (@mousex<(X3+W3)) & (@mousey>Y3) & (@mousey<(Y3+H3)))
               ShowImage w,icon3b,@IMGSCALABLE,267,152,48,48,3
            else
               ShowImage w,icon3a,@IMGSCALABLE,267,152,48,48,3
           endif
       ' PICTURE 4
            if ((@mousex>X4) & (@mousex<(X4+W4)) & (@mousey>Y4) & (@mousey<(Y4+H4)))
               ShowImage w,icon4b,@IMGSCALABLE,367,152,48,48,4
            else
               ShowImage w,icon4a,@IMGSCALABLE,367,152,48,48,4
           endif

       case @IDLBUTTONDN
            ' Event PICTURE 1
            if ((@mousex>X1) & (@mousex<(X1+W1)) & (@mousey>Y1) & (@mousey<(Y1+H1)))
                System "http://www.msn.com"
                ShowImage w,icon1a,@IMGSCALABLE,67,152,48,48,1
            ENDIF
            ' Event PICTURE 2
            if ((@mousex>X2) & (@mousex<(X2+W2)) & (@mousey>Y2) & (@mousey<(Y2+H2)))
                Messagebox 0, "You pressed PICTURE BUTTON number 2! Respect!\n :-)", "Click on #2", MB_ICONINFORMATION
                ShowImage w,icon2a,@IMGSCALABLE,167,152,48,48,2
            ENDIF
            ' Event PICTURE 3
            if ((@mousex>X3) & (@mousex<(X3+W3)) & (@mousey>Y3) & (@mousey<(Y3+H3)))
                System "http://www.aol.com"
                ShowImage w,icon3a,@IMGSCALABLE,267,152,48,48,3
            ENDIF
            ' Event PICTURE 4
            if ((@mousex>X4) & (@mousex<(X4+W4)) & (@mousey>Y4) & (@mousey<(Y4+H4)))
                run = 0
            ENDIF
     CASE @IDCLOSEWINDOW
                run = 0
ENDSELECT
RETURN
ENDSUB

mrainey

Software For Metalworking
http://closetolerancesoftware.com

Junner2003

Yep,
but I would not have been able to do it without your post at coding monkeys: http://www.codingmonkeys.com/index.php?topic=948.0
Basically I took that IBASIC STD script and modified it to this one ...

Dennisc

Hey nice one Junner - well done. Tried to reply on coding monkeys but looks like the server is timing out...

Regards
Dennis
Failure is only the opportunity to begin again more intelligently
www.denniscomninos.com

Pip1957

January 16, 2007, 03:49:17 am #4 Last Edit: January 16, 2007, 11:26:12 am by Pip1957
Hi Junner2003 played with your code a bit and used PtInRect for the buttons have attached the modified zip hope you don't mind and welcome to the board.

Junner2003

At least it works as good as mine :)
You saved a few lines by using PtInRect and here am I sitting ... haven't even heard of PtInRect before ... :)
In fact is EBASIC / IBASIC PRO the first programming language I am trying to learn. Theefore your changes are more than welcome! :)

Junner2003

Does anybody have an idea how also to integrate a tooltip on mouseover  ???

Junner2003

Sometimes I think too complicate! :)
It is much easier if you change my code above to this:

Delete the sections
Quote'Define the position and size of the ICON pictures
def X1,Y1,W1,H1:int          :REM This is for picture 1
def X2,Y2,W2,H2:int          :REM This is for picture 2
def X3,Y3,W3,H3:int          :REM This is for picture 3
def X4,Y4,W4,H4:int          :REM This is for picture 4

and
Quote' Set size and position for the pictures for MOUSEOVER
' PICTURE 1
X1=67
Y1=152
W1=48
H1=48
' PICTURE 2
X2=167
Y2=152
W2=48
H2=48
' PICTURE 3
X3=267
Y3=152
W3=48
H3=48
' PICTURE 4
X4=367
Y4=152
W4=48
H4=48


Replace in the SUB main the lines for the pictures like shown on the example below:

Example for PICTURE 1:

change
Quoteif ((@mousex>X1) & (@mousex<(X1+W1)) & (@mousey>Y1) & (@mousey<(Y1+H1)))

to
Quoteif ((@mousex>67) & (@mousex<(115)) & (@mousey>152) & (@mousey<(200)))


What I did here was the following:
I deleted the pre-definitions for X,Y,W,H and typed in the values directly. (Explanation below for all non MATHs :))

X1 was the vertical start position, so I typed in the value directly: 67
X1+W1 was the MOUSE-EXIT point calculated from the vertical start position of the picture 67 + the picture width (in this case 48), so, here we need only the end value 115.
Y1 was the horizontal position for the MOUSE ENTRY, in this case 152.
Y1+H1 calculated the EXIT point of the mouse on our graphic. Since our picture was 48 pixels high we have to add it. The final value is 200.

Doing it this way saves codewriting and lines and makes the script shorter, so, it is easier to keep an overview. It just does not make sense to define X/Y/W/H if you only need them once for each picture - therefore it is much better to type it in directly as described above!

But I am still looking for a TOOLTIP or HOVER addition! :)

Pip1957

Junner2003 I have updated the attachment in my other post to include static text boxes  as tooltips

Junner2003

Thanks Pip! :)

This is what I did finally too before I read your post: adding static control text.
I saw a tooltip demo in the code archive at codingmonkeys.com ... if I find some time the next days I will integrate it in this demo - it would make it complete ... :)

Junner2003

Heh Pip1957. I just was gone over your code again and I wonder about something:
You have the following definitions in there:

QuoteDECLARE "user32.dll",PtInRect(pRect:WINRECT, x:INT, y:INT),INT
DECLARE "user32.dll",SetRect(pRect:WINRECT, x1:INT, y1:INT, x2:INT, y2:INT),INT


but in the code itself I do not see any X / Y variables. Instead you wrote the variables directly:

QuoteShowImage w,icon2a,@IMGSCALABLE,167,152,48,48,2


Don't misunderstand me: I just ask because of I just started learning programming language, so, is a definition of those X / Y's really necessary?

Ionic Wind Support Team

January 17, 2007, 09:18:50 pm #11 Last Edit: January 17, 2007, 09:28:28 pm by Paul Turley
It's the name of a parameter for a DLL function.  You can call them orange and green if you wish ;)
Ionic Wind Support Team

Junner2003

Hmmm,
so, it just was added on the end to not to get in conflict with the syntax?

Ionic Wind Support Team

No they are the parameters to an API function.  The names aren't important, just the type.  If it was a local subroutine the parameter names are important of course.  Think of it this way...when you make a DLL and you write a subroutine:

export mydllfunction
global sub mydllfunction(x as int, y as int),int
   return x * y
endsub

And you create mydll.dll with it.  In the dll there aren't any paramter names, just offsets to the parameters, the names are ony for the compiler, and for you so you can better understand what they my be used for.  You could delcare that function in a program that uses the dll like so:

delcare import, mydllfunction(soup as int, nuts as int),int
print mydllfunction( 10, 20)

And it would still work.  The Windows API is just a bunch of DLL's located in the system directory so the principle is the same.  The only information in the DLL is the code of the subroutine and the name of the subroutine.

Paul.
Ionic Wind Support Team

Junner2003

Thanks Paul!

I haven't looked at it that way - was too much fixed on the code in the script, I guess that is a mistake a lot of beginners do ... : just thinking about the VISIBLE part but ignoring the hidden things ... :)

Boris

â€Ã...“haven't even heard of PtInRect beforeâ€Ã,

Your ingenuity has not gone unnoticed.
Thank you for not breeding