Project : Programming a Image-viewer with xBrowse

[fraxzi]

Dear Mr. Uwe,

Can you make a BLOB version sample?


Kind Regards,
Frances

[nageswaragunupudi]

Dear Mr. Uwe,

Can you make a BLOB version sample?


Kind Regards,
Frances

Are you reading from ADS or MySql?

If you are reading image buffer from some datasource, please assign oCol:bEditvalue := { || <expression_returning_imagebuffer> } and set oCol:cDataType := 'P'

Try this with a normal browse first. Then we can program any variations like this.

[fraxzi]

Dear Mr. Uwe,

Can you make a BLOB version sample?


Kind Regards,
Frances

Are you reading from ADS or MySql?

If you are reading image buffer from some datasource, please assign oCol:bEditvalue := { || <expression_returning_imagebuffer> } and set oCol:cDataType := 'P'

Try this with a normal browse first. Then we can program any variations like this.

Dear Mr. RAO,

Im using ADS.

I will try your suggestion.

Kind Regards,
Frances

[nageswaragunupudi]

Mr. Frances

To store image buffer, we need not use blob functions.

Using ADSCDX:
<anymemofield> := <cImageBuffer> // Eg. MemoRead( "zzz.jpeg" )
and
<cImageBuffer> := <fieldname>

Using ADSADT:
We can define a field with type "Image". Syntax is same as above.

To browse image fields with XBrowse, you NEED NOT do anything. Simpy browse the table as if it is a normal field. I recommend you assign adequate oBrw:nRowHeight and oCol:nWidth if you like a particular size for the column.

XBrowse automatically detects that the data is Image and displays the image snugly resizing the image to fit the cell dimensions.

Try browsing
wwonders.dbf
flds.adt
in the samples folder.
You need not even tell the xbrowse that the data is binary data containing an image buffer.

[ukoenig]

Mr. Rao,

I have a Question about the Quantum of Columns.
Because Imageviewers dont use horizontal Scrollbars,
I want to show the maximum Quantums of Columns possible in Relation to Cellsize.

maximum Quantums of Columns can be displayed with a given Cellsize :
100 = 8 Columns
120 = 6 Columns
140 and 160 = 5 Columns
180 and 200 = 4 Columns
FULL = 2 Columns





Maybe we can define the Quantum of Columns ( add / delete ) in Function CELL_ADJUST( oBrw2, nOption1 ) ?
My Celladjustment works like :

Code: Select all  Expand view

...
...
@ 10, 300 SELEX nOption1 SIZE 145, 35 PIXEL;
ITEMS "1&00", "1&20", "&1&40", "1&60", "1&80", "2&00", "&Full";
GRADIENT OUTTRACK { { 0.5, 16770250, 16312263 }, ;
                       { 0.5, 16312263, 16770250 } } ;
GRADIENT INTRACK { { 0.5, 8388608, 16312263 }, ;
                      { 0.5, 16312263, 8388608 } } ;
THUMBSIZE 40, 25 ROUNDSIZE 10 ;
COLOR THUMB 14853684 ;
COLORTEXT 128, 32768 ;
TITLE "Cell-Size" TOP ;
FONT oFont1 ;
ACTION( IIF( nOption1 = 1, nCellSize := 100, NIL ), ;
        IIF( nOption1 = 2, nCellSize := 120, NIL ), ;
        IIF( nOption1 = 3, nCellSize := 140, NIL ), ;
        IIF( nOption1 = 4, nCellSize := 150, NIL ), ;
        IIF( nOption1 = 5, nCellSize := 160, NIL ), ;
        IIF( nOption1 = 6, nCellSize := 200, NIL ), ;
        IIF( nOption1 = 7, nCellSize := 400, NIL ), ;
        CELL_ADJUST( oBrw2, nOption1 ) ) ;
COLORTITLE 0
...
...
// ------------------------

FUNCTION CELL_ADJUST( oBrw2, nOption1 )
LOCAL oCol

FOR nCol := 1 to Len( oBrw2:aCols )
     WITH OBJECT oBrw2:aCols[ nCol ]
          :nWidth := nCellSize
          :bPaintText := { | oCol, hDC, cData, aRect, aColors, lHighLite | ;
                     DrawCell( oCol, hDC, cData, aRect, aColors, lHighLite ) }
     END
NEXT
oBrw2:nRowHeight := nCellSize + 20
oBrw2:Refresh()

RETURN( NIL )
 

Best Regards
Uwe

[ukoenig]

Hello,

All wanted Functions are nearly finished.

IAdded some new Options :
1. Image-Filter ( is needed, otherwise selecting a Directory with mixed data, You will get a Error )
2. Counting Columns in Relation to selected Image-size and Browser-width.
3. Browser-brush
4. Line-switch ON / OFF
5. Fontsize adjusted in Relation to Cell-size.
6. Zoom-function

To receive the Image-name from the Matrix ( left Click on any Image ), You can use :
oBrw:bLClicked := { | nRow, nCol | msgalert( oBrw:aArrayData[ oBrw:nArrayAt, oBrw:nColSel ] ) }



Still I want to add Autodetection of a selected Image after Cell-resizing to show it on Top of the Browser.
Sample : a Image with 8 Colums used, is shown as 1. Image in Row 2.
After changing the Cell-size to 4 Columns, the same Image will move to Row 3
The Browser-rebuild will show Row 3 on Top as first Row with the selected Image.

A Zoom-function for a selected Image ( Cell-click and resize the Preview-window).



The new Options :



A Question :

The Function cGetDir( "Select a directory", CurDrive() + ":\" + GetCurDir() ) + "\"
opens the Dialog just somewhere on Screen.
Is it possible to define a fixed Position ?



Best Regards
Uwe

[nageswaragunupudi]

Is it possible to define a fixed Position ?

Can you find the window handle and then use MoveWindow() function?

[ukoenig]

Mr. Rao,
For the Moment I Couldn't find a Solution, for moving the Dialog.

Code: Select all  Expand view

@ 30, 15 BTNBMP oBtn0 OF oDlg1  ;
SIZE 100, 40 ;
PROMPT "   &Select " + CRLF + "   Directory" FILE c_path + "\Bitmaps\Preview.bmp" 2007 ;                
FONT oTxtfont LEFT ;
ACTION ( cSUBDIR := cGetDir( "Select a directory",;
     CurDrive() + ":\" + GetCurDir() ) + "\", ;
     oSUBDIR:Refresh() , ;
     aImg := ReadImages( cSUBDIR ), oBrw2:End(), SHOW_BROW(oDlg1) )

In the meantime, I added the Copy-function ( defined Image-click with double-function ).
How it works :
With the Selector, You can define the Action on Cell-click, to be performed.
1. Image-zoom
2. Image-copy
3. No Action ( default ).
The Destination-directory is defined in a INI-file, the User can create / change on different-computers.
Just click on a Image ( if Copy-function is selected ) and the Image will be stored in the defined Directory.



Changing Col-numbers and showing the new calculated Row-position of the old Image on Browser-top,
is tested and works as well.



Changing from 5 to 4 Columns, the selected Image moves from Row 4/ Col 3
to a new Position Row 5 / Col 2.
The selected Image with this new Row, is shown on Top after the Column-number-change.
( The MsgAlert is used, to explain the Logic )



New :

Working with a INI-file
The Images from the last selected Directory are shown at Startup.
Images are automaticly stored to the defined Directory ( Copy-mode on cell-click )




Best Regards
Uwe

[ukoenig]

I added fixed Zoom-factors from 100 % to 500 %
The Dialogsize is calculated from < Image-zize * Zoom-factor >
Once the Zoom-factor is selected, click on any Image.
The Dialog is automatically closed, as soon You select another Image.
Is it maybe possible, to Support Alphachannels ?

The Function :

Code: Select all  Expand view

...
@ 75, 120 SELEX oSelex5 VAR nOption5 SIZE 175, 30 PIXEL;
ITEMS "&100%", "&150%", "&200%", "&400%", "&500%", "&Copy", "&Disabl." ;
GRADIENT OUTTRACK { { 0.5, 16770250, 16312263 }, ;
                       { 0.5, 16312263, 16770250 } } ;
GRADIENT INTRACK { { 0.5, 8388608, 16312263 }, ;
                      { 0.5, 16312263, 8388608 } } ;
THUMBSIZE 40, 25 ROUNDSIZE 10 ;
COLOR THUMB 14853684 ;
COLORTEXT 128, 32768 ;
TITLE "Image-Action on left Click" TOP ;
FONT oTxtfont ;
ACTION ( IIF( nOption5 = 6, MsgAlert( "Image-copy selected","Attention " ), NIL ), ;
         IIF( nOption5 = 7, MsgAlert( "Cell-function disabled","Attention " ), NIL ) ) ;
COLORTITLE 0
...
...
FUNCTION IMG_ZOOM()
LOCAL oDlg, oImage, oBrush, nWidth, nHeight, cFactor

DEFINE IMAGE oImage FILE cImgname
// DEFINE BRUSH oBrush FILE c_path + "\Bitmaps\STONE.BMP"

IF nOption5 = 1
    nWidth := oImage:nWidth()
    nHeight := oImage:nHeight()
    cFactor := "100 %"
ENDIF
IF nOption5 = 2
    nWidth := oImage:nWidth() * 1.5
    nHeight := oImage:nHeight() * 1.5
    cFactor := "150 %"
ENDIF
IF nOption5 = 3
    nWidth := oImage:nWidth() * 2
    nHeight := oImage:nHeight() * 2
    cFactor := "200 %"
ENDIF
IF nOption5 = 4
    nWidth := oImage:nWidth() * 4
    nHeight := oImage:nHeight() * 4
    cFactor := "400 %"
ENDIF
IF nOption5 = 5
    nWidth := oImage:nWidth() * 5
    nHeight := oImage:nHeight() * 5
    cFactor := "500 %"
ENDIF

DEFINE DIALOG oDlg TITLE cFactor FROM 50, 50 TO nHeight + 50, nWidth + 50 PIXEL // TRANSPARENT
oBrush := TBrush():new( ,,,, ResizeBmp( oImage:hBitmap, nWidth, nHeight, .T. ) )
oDlg:Setbrush( oBrush )

ACTIVATE DIALOG oDlg

oImage:End()

RETURN( NIL )
 

Best Regards
Uwe

[ukoenig]

Added some new Functions :

1. Now You can switch between the Preview-directory and Destination-directory ( Image-copy )
2. The Preview of a selected Background-image will be oversized to show on Screen.
Now a Test is included : If You try to load a oversized Image, it will be resized with a Factor of -10 % or -20 % until it fits the Screen. A message shows the used -%.



GIF-Support added !



Added File-functions



Added Info-dialog



Best Regards
Uwe

[ukoenig]

With the Image-viewer it is possible, to detect Painting-errors.
To make unclean painted Images visible( Alpha-channel ),I added another Brush ( dark )
A transparent PNG doesn't mean also Alphachannel ( like the Screenshot shows ).
Converting such a Image ( PNG ) to Alphablended BMP with Pixelformer, the Result is OK.

Now the Preview-dialog ( Zoom ) uses the selected Brush from xBrowse.

Added a Image-sort-button.





PIXELFORMER is added, because no Install needed..
Select a Image from the Browser and Click the Paint-button.
Pixelformer loads the selected Image.



Added Arrows to the Directory-names
The activated Directory is marked with a green Arrow



Best Regards
Uwe

[ukoenig]

How to repair a Image with
< unclean painted ( transp. Background ) >, using the Imageviewer :

Using some PNG- or BMP images, You maybe will have Problems with the transparent Background.
xBrowse shows these Problems with different painted transparent Background-areas.
The following Steps are showing, how to fix these Problems :

1. Select FULL Size ( xBrowse will switch to the biggest Cellsize, using only 2 Colums )
2. Select Blue Brush to detect Image-transparent-Errors
3. Search for the bad Image
.. ( You can see, parts are not clean transparent painted )
4. Select the new Button < Zoom >, to adjust small Images to Cellsize.
5. Select Paint to start < Pixelformer >


6. Check => Image => Properties for Alphachannel


7. Select => File => export
8. After selecting the Destination-directory
9. Activate inside the Box < Premultiplied alpha >


10. With the Viewer select the Destination-directory
11. The browser shows the < repainted / cleaned > Image


Another Sample with different transparent Background :



With Pixelformer, You can make it visible selecting from Menue => View => only Colors
Black is used, to show transparent Background
You can see the white Parts between black.


Best regards
Uwe

[Andrés González]

Owe, do you think if is possible to do similar program to read TIFF files.
http://es.wikipedia.org/wiki/TIFF
http://en.wikipedia.org/wiki/Tagged_Image_File_Format

Is a file that you put all pictures (jpg) in one file in multipage mode. Now I use a comercial program to store and view that files http://www.tiffedit.com/tiffeditor.shtml?clickfrom=tiffeditor_3.1.6.16, but I want to do with my own code.

[ukoenig]

Andres,

TIF is supported by FREEIMAGE no Problem to use this Imageviewer.
I can add still another Editor to work on a selected Image like I have done with PIXELFORMER.
Pixelformer is only used, to make it easy to work on Alphachannels.





Best Regards
Uwe

[Andrés González]

I don't know how to do it, but I wanted to show de images from a TIFF file in the browse, like you do with the zoom. I have a multiple tiff files in a directori and when I choice the file it must to show all the images in a view mode not edit mode.

Also how you disegn the bottoms like the readfiles, zoom, .... and how do you do the type filter JPF, BMP,TIFF.... please?