clickable image

[plantenkennis]

Hello,
I have a window with 4 tabs. On tab 3 I want to show 1 to 10 images (depending on how much images I have) and when I click on that image I want to show it in a new window on real size. I have looked in the examples, but not all of them are working correctly. The example testsimage gives errors while compiling.
For now I use the ON WINDOW CLICK command, but when tab 4 is active I get to see the result of tab 3. Is there a function that I can check which tab is active/shown, or is there a way to make the image clickable.

Also I want to determine the size of the image to show in the new window, so I can make the window as big as the image. How can I find the sizes of the image?

Code: Select all  Expand view  RUN

DEFINE DIALOG oDlg TITLE "Detailscherm" + STR(nPlantnum) ;
    FROM 0, 0 TO 500, 720

    @ 450, 10 GET oGetNaam VAR cLatijnNaam OF oDlg SIZE 700, 40
   
    oGetNaam:SetFont( "Geneva", 24 )
    oGetNaam:SetColor( OwnClrGreen, OwnClrYellow )
   
    @ 40, 10 FOLDER oFld SIZE 700, 400 OF oDlg ;
        PAGES "Gegevens", "Kenmerken", "Fotos", "Combinaties" ;
           
*first tabblad, gegevens
    @ 0, 0 BROWSE oBrw1 FIELDS "", "" ;
        HEADERS "", "" ;
        OF oFld:aControls[ 1 ] SIZE 680, 350

    oBrw1:SetArray( aGegevens )
    oBrw1:bLine = { | nRow | IF( nRow <= Len( aGegevens ), aGegevens[ nRow ], { "", "" } ) }
    oBrw1:SetColWidth( 1, 150 )
    oBrw1:SetColWidth( 2, 500 )
    oBrw1:SetColor( OwnClrGreen, OwnClrYellow )
    oBrw1:SetFocus()
   
*second tabblad, kenmerken
    @ 0, 0 BROWSE oBrw2 FIELDS "", "" ;
        HEADERS "", "" ;
        OF oFld:aControls[ 2 ] SIZE 680, 350

    oBrw2:SetArray( aKenmerken )
    oBrw2:bLine = { | nRow | If( nRow <= Len( aKenmerken ), aKenmerken[ nRow ], { "", "" } ) }
    oBrw2:SetColWidth( 1, 150 )
    oBrw2:SetColWidth( 2, 500 )
    oBrw2:SetColor( OwnClrGreen, OwnClrYellow )
    oBrw2:SetFocus()

*third tabblad, foto's
    FOR r = 1 TO 3
        FOR k = 1 TO 5
            cImage := aFotoNaam[nFoto]
            IF FILE(cImage)
                @ nRow, nColumn IMAGE oImg FILENAME cImage OF oFld:aControls[ 3 ] SIZE 110, 110
            ENDIF
            nColumn := nColumn + 120
            nFoto++
        NEXT
        nColumn := 10
        nRow := nRow - 120
    NEXT

*fourth tabblad, combinaties

    @ 10, 10 BUTTON "OK" OF oDlg ACTION oDlg:End()
   
   
   
ACTIVATE DIALOG oDlg CENTERED;
ON CLICK RK_FotoGroot( nRow , nCol )[

FUNCTION RK_FotoGroot(nRow, nCol)
*to show a big picture

LOCAL nFoto := 1
LOCAL oWndFoto
LOCAL oFoto

MsgInfo(STR(nTab))

IF nRow < 400 .AND. nRow > 290
    IF nCol > 30 .AND. nCol < 140
        nFoto := 1
    ELSEIF nCol > 150 .AND. nCol < 260
        nFoto := 2
    ELSEIF nCol > 270 .AND. nCol < 380
        nFoto := 3
    ELSEIF nCol > 390 .AND. nCol < 500
        nFoto := 4
    ELSEIF nCol > 510 .AND. nCol < 620
        nFoto := 5
    ENDIF
ELSEIF nRow < 280 .AND. nrow > 170
    IF nCol > 30 .AND. nCol < 140
        nFoto := 6
    ELSEIF nCol > 150 .AND. nCol < 260
        nFoto := 7
    ELSEIF nCol > 270 .AND. nCol < 380
        nFoto := 8
    ELSEIF nCol > 390 .AND. nCol < 500
        nFoto := 9
    ELSEIF nCol > 510 .AND. nCol < 620
        nFoto := 10
    ENDIF
ELSEIF nRow < 160 .AND. nRow > 50
    IF nCol > 30 .AND. nCol < 140
        nFoto := 11
    ELSEIF nCol > 150 .AND. nCol < 260
        nFoto := 12
    ELSEIF nCol > 270 .AND. nCol < 380
        nFoto := 13
    ELSEIF nCol > 390 .AND. nCol < 500
        nFoto := 14
    ELSEIF nCol > 510 .AND. nCol < 620
        nFoto := 15
    ENDIF
ENDIF

IF FILE(aFotoNaam[nFoto])

    DEFINE DIALOG oWndFoto TITLE "grote foto" ;
        FROM 0, 0 TO 800, 1000
       
        @ 10, 10 IMAGE oFoto FILENAME aFotoNaam[nFoto] OF oWndFoto SIZE 710, 950
       
    ACTIVATE DIALOG oWndFoto
   
ENDIF

RETURN NIL

[Antonio Linares]

Rene,

> Is there a function that I can check which tab is active/shown

oTabs:nTab

> is there a way to make the image clickable

oImage:bLButtonUp = { | nRow, nCol | ImageClick() }

> How can I find the sizes of the image?

oImage:nWidth and oImage:nHeight

[Antonio Linares]

Rene,

This is not working yet:

oImage:bLButtonUp = { | nRow, nCol | ImageClick() }

I am implementing it

[Antonio Linares]

Rene,

Already implemented. Here you have a working example:

Code: Select all  Expand view  RUN

#include "FiveMac.ch"

function Main()

   local oWnd, oImg

   DEFINE WINDOW oWnd ;
      FROM 444, 89 TO 689, 500
   
   oWnd:center()
   
   @ 100, 139 IMAGE oImg OF oWnd SIZE 107, 91 FILENAME ImgPath() + "fivetech.gif"

   oImg:bLButtonDown = { || MsgInfo( oImg:nWidth ) }

   @ 69, 95 SAY "(c) FiveTech Software 2007-2012" OF oWnd SIZE 210, 14
   
   @ 22, 150 BUTTON "Ok" OF oWnd ACTION oWnd:End()
   
    @ 22, 250 BUTTON "Frame" OF oWnd ACTION ( MsgInfo( oImg:nWidth ), oImg:setFrame( ) )
   
   ACTIVATE WINDOW oWnd
   
return nil

You can use bLButtonDown or LButtonUp, as you prefer.

I have emailed you the new FiveMac libs already. Many thanks for your feedback

[plantenkennis]

Hello Antonio,

Thanks for the reply and new libs. The oImg:bLButtonDown and the oTabs:nTab works perfect. Only the oImg:nWidth gives the width (and height) of the control, not the width of the real picture.

I want to know the real sizes of the image. When i make an image size 110, 110 and place a picture of 640x480 px on it, the image is shown cropped on the image control. When I click on that control I want to make a window of nWidht+20 and nHeight+60 to show the picture.

[Antonio Linares]

This seems to be the right way to get the image dimensions:

Code: Select all  Expand view  RUN

NSImageRep *rep = [[image representations] objectAtIndex:0];
NSSize imageSize = NSMakeSize(rep.pixelsWide, rep.pixelsHigh);

http://stackoverflow.com/questions/11876963/get-the-correct-image-width-and-height-of-an-nsimage

I am going to test it

[Antonio Linares]

Rene,

Already implemented and working fine. I have sent you the modifed libs already.

Simply do:

MsgInfo( oImage:GetWidth() )

and

MsgInfo( oImage:GetHeight() )

many thanks for your feedback

[plantenkennis]

Hello Antonio,

The nWidth and nHeight gives the sizes of the defined object, not of the picture.
I have a picture of 480 px height and 640 px width. When I place this on my BigPhoto window the sizes given are the sizes I have dementioned. See code:

Code: Select all  Expand view  RUN

FUNCTION RK_BigPhoto(cImage)
*to show a big picture
*the cImage is 480x640 px
LOCAL oWndFoto
LOCAL oFoto

    DEFINE DIALOG oWndFoto TITLE "big picture" ;
        FROM 0, 0 TO 800, 1000
       
        @ 30, 10 IMAGE oFoto FILENAME cImage OF oWndFoto SIZE 710, 950
                oFoto:bLButtonDown = { || MsgInfo( oFoto:nWidth ) }

        @ 10, 250 BUTTON "Frame" OF oWndFoto ACTION ( MsgInfo( oFoto:nHeight ), oFoto:setFrame( ) )
       
    ACTIVATE DIALOG oWndFoto

RETURN NIL
 

Now when I click on the oFoto the width 710 is given( picture is 640 px, when I click on the button the height 950 is given picture is 480px

Can I do this another way?

[Antonio Linares]

Rene,

You have to use oFoto:GetWidth() and oFoto:GetHeight()

[plantenkennis]

Hello Antonio,

Sorry, yes that was the trick. I was forgotten to put the newest lib in the lib-folder. thats why I got an error. I have to work more exact. Tomorrow I will put my newest code on Git, so you can see the progress.

[Antonio Linares]

Rene,

ok, thanks, I will pull and test it

[plantenkennis]

Hello Antonio,

I have put the latest version on git
I have put some comments in the source, so its easier to understand
Rene

[Antonio Linares]

Rene,

I already reviewed it and I sent you an email