galería de imágenes

[José Luis Sánchez]

Hola,
En primer lugar quiero desearos a todos un feliz año 2021 y que vayamos retomando la vida anterior al pasado año.

Me gustaría saber si con FWH es posible hacer una galería de imágenes tipo Goodreads, como la imagen que acompaño. Quiero hacer algo similar para mi Cuaderno de Bitácora y no se por donde empezar.



Saludos,
José Luis

[AngelSalom]

Hola José Luis, feliz año igualmente.
Un buen inicio podría partir de xbrimag3.prg en el directorio samples de Fivewin.

Code: Select all  Expand view  RUN

#include "fivewin.ch"

function Main()

   local oWnd, oBrw, oFont, oBold

   USE WWONDERS NEW

   DEFINE FONT oFont NAME "TAHOMA"  SIZE 0,-12
   DEFINE FONT oBold NAME "VERDANA" SIZE 0,-13 BOLD

   DEFINE WINDOW oWnd TITLE "Image and Text in same cell"
   oWnd:SetFont( oFont )

   @ 0,0 XBROWSE oBrw OF oWnd DATASOURCE "WWONDERS" ;
      COLUMNS "NAME","DETAILS" COLSIZES 200, 250 ;
      LINES NOBORDER

   WITH OBJECT oBrw
      :nRowHeight := 200
      WITH OBJECT :aCols[ 1 ]
         :bStrImage     := { || FIELD->IMAGE }
         :oDataFont     := oBold
         :nDataStrAlign := AL_CENTER + AL_BOTTOM
         :nDataBmpAlign := AL_CENTER
         :aImgRect      := { nil, nil, -40, nil }
      END
      //
      :CreateFromCode()
   END
   oWnd:oClient   := oBrw

   oWnd:nHeight   := 700


   ACTIVATE WINDOW oWnd CENTERED
   RELEASE FONT oFont, oBold

return nil

 

[José Luis Sánchez]

Hola Angel,
gracias por contestar, lo que me propones es un principio pero esperaba que hubiera algún control más parecido a lo que busco.

Saludos,
José Luis

[Antonio Linares]

José Luis,

Estamos preparándote un ejemplo

[José Luis Sánchez]

¡ Muchas gracias Antonio !

Saludos,

[nageswaragunupudi]

Sample:

Code: Select all  Expand view  RUN

#include "fivewin.ch"

//----------------------------------------------------------------------------//

function Main()

   local aImages := nil
   local cLog := cFileSetExt( ExeName(), "log" )

   FERASE( cLog )

   aImages  := ImageArray()
   TAlbum():New( aImages ):Activate()

   if File( cLog )
      WinExec( "notepad.exe " + cLog )
   endif


return nil

//----------------------------------------------------------------------------//

static function ImageArray()

   local aDir

   aDir  := DirectoryRecurse( "c:\fwh\bitmaps\*.*" )
   ASort( aDir, nil, nil, { |x,y| x[ 2 ] > y[ 2 ] } )
   ASize( aDir, 200 )

return aDir

//----------------------------------------------------------------------------//

CLASS TAlbum

   DATA aPhotos
   DATA oWnd

   DATA nWndWidth  INIT 800
   DATA nWndHeight INIT 800
   DATA nImgWidth  INIT 210
   DATA nGutter    INIT 30
   DATA nImgCols PROTECTED
   DATA nOffset    INIT 0 PROTECTED
   DATA nHeight

   ACCESS oVScroll INLINE ::oWnd:oVScroll

   METHOD New( aPhotos ) CONSTRUCTOR
   METHOD Activate()

PROTECTED:
   METHOD CreateWindow()
   METHOD CreateControls()
   METHOD SetVScroll()
   METHOD GoUp()
   METHOD GoDown()
   METHOD ThumbPos( nPos )
   METHOD MouseWheel()
   METHOD VSetPos() INLINE ::oWnd:oVScroll:SetPos( -::nOffSet )
   METHOD GoTop()
   METHOD GoBottom()
   METHOD KeyDown( nKey )
   METHOD ScrollWnd( nPixels )
   METHOD Resize( nType, nWidth, nHeight )

ENDCLASS

//----------------------------------------------------------------------------//

METHOD New( aPhotos ) CLASS TAlbum

   ::aPhotos := aPhotos

return Self

//----------------------------------------------------------------------------//

METHOD Activate() CLASS TAlbum

   ::CreateWindow()
   ::CreateControls()
   ::SetVScroll()
   ::oWnd:bResized := { |t,w,h| ::Resize( t, w, h ) }

   if ::oWnd:IsKindOf( "MDICHILD" )
      ACTIVATE WINDOW ::oWnd
   else
      ACTIVATE WINDOW ::oWnd CENTERED
   endif

return Self

//----------------------------------------------------------------------------//

METHOD CreateWindow() CLASS TAlbum

   local oMain, x, y

   if ( oMain := WndMain() ) != nil .and. oMain:IsKindOf( "TMDIFRAME" )
      DEFINE WINDOW ::oWnd MDICHILD OF oMain VSCROLL
   else
      x  := Int( ( ScreenWidth() - ::nWndWidth ) / 2 )
      y  := Int( ( ScreenHeight() - ::nWndHeight ) / 2 )
      DEFINE WINDOW ::oWnd FROM y,x TO ::nWndHeight + y, ::nWndWidth + x PIXEL VSCROLL COLOR CLR_BLACK,0xe8e8e8
   endif

return Self

//----------------------------------------------------------------------------//

METHOD CreateControls() CLASS TAlbum

   local nImgWidth   := ::nImgWidth
   local nImgHeight  := Int( nImgWidth * 4 / 3 )
   local nGutter     := ::nGutter
   local nRows, nCols, nRow, nCol, x, y, nImage, xMax, nImages := Len( ::aPhotos )
   local oImage

   nCols    := Int( ( ::oWnd:nWidth - nGutter ) / ( nImgWidth + nGutter ) )
   nRows    := Ceiling( nImages / nCols )
   xMax     := nCols * ( nImgWidth * nGutter )

   y        := nGutter
   nImage   := 1
   do while nImage <= nImages
      x     := nGutter
      nCol  := 1

      do while nCol <= nCols .and. nImage <= nImages

         @ y, x XIMAGE oImage SIZE nImgWidth, nImgHeight OF ::oWnd NOBORDER
         oImage:SetSource( If( HB_ISARRAY( ::aPhotos[ nImage ] ), ::aPhotos[ nImage, 1 ], ::aPhotos[ nImage ] ) )
         oImage:nUserControl := 0
#if FW_VersionNo >= 21010
         oImage:Shadow()
#else
         oImage:bPainted := PaintBlock( oImage )
#endif
         nImage++
         nCol++
         x  += ( nImgWidth + nGutter )
      enddo
      y  += ( nImgHeight + nGutter )
   enddo

   ::nImgCols  := nCols
   ::nHeight   := y

return Self

//----------------------------------------------------------------------------//

METHOD Resize( nType, nWidth, nHeight ) CLASS TAlbum

   local nImgHeight  := Int( ::nImgWidth * 4 / 3 )
   local nRows, nCols, nRow, nCol, x, y, nImage, nImages := Len( ::aPhotos )

   if nWidth == nil
      return nil
   endif

   nCols    := Int( ( ::oWnd:nWidth - ::nGutter ) / ( ::nImgWidth + ::nGutter ) )
   if nCols == ::nImgCols
      return nil
   endif
   nRows    := Ceiling( nImages / nCols )

   y        := ::nGutter
   nImage   := 1
   do while nImage <= nImages
      x     := ::nGutter
      nCol  := 1

      do while nCol <= nCols .and. nImage <= nImages

         WITH OBJECT ::oWnd:aControls[ nImage ]
            :nTop      := y
            :nLeft     := x
         END
         nImage++
         x  += ( ::nImgWidth + ::nGutter )
         nCol++
      enddo
      y  += ( nImgHeight + ::nGutter )
   enddo

   ::nImgCols  := nCols
   ::nHeight   := y
   ::oVScroll:SetRange( 0, ::nHeight - ::oWnd:nHeight )
   ::nOffSet   := 0
   ::VSetPos()

return nil

//----------------------------------------------------------------------------//

METHOD SetVScroll() CLASS TAlbum

   local oSelf    := Self

   WITH OBJECT ::oWnd:oVScroll
      :SetRange( 0, ::nHeight - ::oWnd:nHeight )
      :bGoUp      := { || oSelf:GoUp() }
      :bGoDown    := { || oSelf:GoDown() }
      :bPos       := { |nPos| oSelf:ThumbPos( nPos ) }
      :bGoTop     := { || oSelf:GoTop() }
      :bGoDown    := { || oSelf:GoDown() }
   END

   ::oWnd:bMouseWheel := ;
      { |k,nDelta| oSelf:MouseWheel( k, nDelta ) }

   ::oWnd:bKeyDown := { |k| oSelf:KeyDown( k ) }

return Self

//----------------------------------------------------------------------------//

METHOD ScrollWnd( nPixels ) CLASS TAlbum

   ScrollWindow( ::oWnd:hWnd, 0,  nPixels, 0, GetClientRect( ::oWnd:hWnd ) )

return Self

//----------------------------------------------------------------------------//

METHOD GoUp() CLASS TAlbum

   local nPixels  := Min( 20, ::oVScroll:nMin - ::nOffset )

   ::ScrollWnd( nPixels )
   ::nOffSet += nPixels
   ::VSetPos()

return Self

//----------------------------------------------------------------------------//

METHOD GoDown() CLASS TAlbum

   local nPixels  := Min( 20, ::oVScroll:nMax + ::nOffSet )

   ::ScrollWnd( -nPixels )
   ::nOffSet -= nPixels
   ::VSetPos()

return Self

//----------------------------------------------------------------------------//

METHOD ThumbPos( nPos ) CLASS TAlbum

   AEval( ::oWnd:aControls, { |o| o:nTop -= ( nPos + ::nOffSet ) } )
   ::nOffSet   := -nPos
   ::VSetPos()

return Self

//----------------------------------------------------------------------------//

METHOD MouseWheel( k, nDelta ) CLASS TAlbum

   if nDelta > 0
      ::GoUp()
   else
      ::GoDown()
   endif
   ::VSetPos()

return Self

//----------------------------------------------------------------------------//

METHOD GoTop() CLASS TAlbum

   AEval( ::oWnd:aControls, { |o| o:nTop -= ::nOffSet } )
   ::nOffSet   := 0
   ::VSetPos()

return Self

//----------------------------------------------------------------------------//

METHOD GoBottom() CLASS TAlbum

   AEval( ::oWnd:aControls, { |o| o:nTop -= ( ::oVScroll:nMax + ::nOffSet ) } )
   ::nOffSet  := -::oVScroll:nMax
   ::VSetPos()

return Self

//----------------------------------------------------------------------------//

METHOD KeyDown( nKey ) CLASS TAlbum

   SWITCH nKey
   case VK_UP
      if GetKeyState( VK_CONTROL )
         ::GoTop()
      else
         ::GoUp()
      endif
      return 0
      EXIT
   case VK_DOWN
      if GetKeyState( VK_CONTROL )
         ::GoBottom()
      else
         ::GoDown()
      endif
      return 0
      EXIT
   case VK_HOME
      ::GoTop()
      return 0
      EXIT
   case VK_END
      ::GoBottom()
      return 0
      EXIT
   END

return nil

//----------------------------------------------------------------------------//

#if FW_VersionNo < 21010

//----------------------------------------------------------------------------//

static function PaintBlock( oImage )
return { || DrawShadow( oImage ) }

//----------------------------------------------------------------------------//

static function DrawShadow( oImage )

   local aRect := { oImage:nTop, oImage:nLeft, oImage:nTop + oImage:nHeight, oImage:nLeft + oImage:nWidth }
   local hDC   := oImage:oWnd:GetDC()
   local n, nColor, hPen, nIncClr, nSize := 10

   n        := Int( ( 0xf0 - 0x48 ) / ( nSize - 1 ) )
   nIncClr  := n + 256 * n + 256 * 256 * n
   nColor   := 0x484848
   for n := 0 to nSize - 1
      hPen     := CreatePen( PS_SOLID, 1, nColor )
      MoveTo( hDC, aRect[ 4 ] + n, aRect[ 1 ] + n )
      LineTo( hDC, aRect[ 4 ] + n, aRect[ 3 ] + n, hPen )
      MoveTo( hDC, aRect[ 2 ] + n, aRect[ 3 ] + n )
      LineTo( hDC, aRect[ 4 ] + n + 1, aRect[ 3 ] + n, hPen )
      DeleteObject( hPen )
      nColor   += nIncClr
   next

   oImage:oWnd:ReleaseDC()

return nil

#endif

//----------------------------------------------------------------------------//
 

The images are re-adjusted if the window is resized.
Window can be scrolled up and down by
1. Using the vertical scrollbar
2. MouseWheel
3. Keys UP,DOWN,HOME,END

We used the bitmaps and images available in fwh\bitmaps folder which are of different sizes. The appearance will look better if we use images of same size and use the same image dimensions in the program.

[elvira]

Excellent work, great functionality.

Would it be possible to add an action by double-clicking on each image, for example to execute a function that opens an individualized URL with the book?

Thank you!

[nageswaragunupudi]

Sure.
Add code something similar to

Code: Select all  Expand view  RUN

        oImage:bLDblClick := { |r,c,f,oImage| HtmlView( oImage:uSource ) }
 

while creating the image control.

[juanjogascem]

Uff. Estupendo.

Se podría añadir texto, tanto a la galería de imágenes, como en la imagen ampliada?.

Saludos
Juan Jose

[José Luis Sánchez]

Thanks a lot !!! It's an incredible Reyes Magos gift !!!

Kind regards,
José Luis

[José Luis Sánchez]

Really nice !!!



How can I add action when doubleclick an image ? I want to call the book edit function when double click the image of any cover.

Regards,

[AngelSalom]

Sure.
Add code something similar to

Code: Select all  Expand view  RUN

        oImage:bLDblClick := { |r,c,f,oImage| HtmlView( oImage:uSource ) }
 

while creating the image control.

[José Luis Sánchez]

Thanks Angel, it works fine.

I have 2 new questions:
1.- I call the TAlbum window from another window but the focus returns to the parent window and the talbum window remains hiden. How can I stop the focus on the talbum window ?
2.- How can I center the talbum window over the parent window ? When I use dialogs I can do odlg:center(owndparent) but with another windows I don't know how tod do it.

I think these questions are FWH 101 but my programming skills are a bit rusty.

Regards,
José Luis

[Antonio Linares]

José Luis,

METHOD CreateWindow() CLASS TAlbum creates a non modal WINDOW.

Please change there DEFINE WINDOW into DEFINE DIALOG ...

also from METHOD Activate() CLASS TAlbum change ACTIVATE WINDOW into ACTIVATE DIALOG

Class TWindow implements Method Center( oWndParent ) so that message can be sent to any object whose class is or inherits from TWindow

[José Luis Sánchez]

Antonio,

If I change the Windows for the Dialog I will loss the VScroll feature that is very important for me.

RPreview is also a non modal window but it remains on top of the screen: How can I do this ?

Regards,