Adjust size of field to graphic

[John Robin Dove]

Hi Clifton,

I am trying to use a TB field to display a series of pictures of different sizes. I hoped that setting width and height to auto with pgStyleObject might do it but I guess this if for text only. I need to adapt the size of the field to the size of the picture but also impose maximum width and height.

In my VS VB.NET version it was relatively easy. I first got the dimensions of the picture and then displayed the picture in a picturebox object. Here's the code I used (if that's any help):

Code: Select all

'GET SIZE OF IMAGE & ADAPT IT TO THE SPACE AVAILABLE (making it as big as possible).
            'CHECK THAT FILE IS LOADABLE
            Try
                objImage = System.Drawing.Image.FromFile(FilesHome & NameOfFile)
            Catch ex As Exception
                'Error ...
                ShowRequest(GetText(129), "&OK")
                Me.Cursor = Cursors.Default
                If NewFolder = True Then
                    DeleteExercise(FilesHome)
                End If
                Exit Sub '============>
            End Try
            objImage = System.Drawing.Image.FromFile(FilesHome & NameOfFile)
            'CREATE SIZE VARIABLES
            Dim Vwidth As Integer = objImage.Width
            Dim Vheight As Integer = objImage.Height
            objImage.Dispose()
            Dim VWidth2 As Integer
            Dim VHeight2 As Integer
            Dim Vunit As Decimal
            'RESIZE
            If Vwidth > Vheight Then
                Vunit = 455 / Vwidth
                VWidth2 = 455
                VHeight2 = Vheight * Vunit
                'REVERSE IF IMAGE IS TOO HIGH
                If VHeight2 > 600 Then
                    VHeight2 = 600
                    Vunit = 600 / Vheight
                    VWidth2 = Vwidth * Vunit
                End If
            Else
                VHeight2 = 600
                Vunit = 600 / Vheight
                VWidth2 = Vwidth * Vunit
                'REVERSE IF IMAGE IS TOO WIDE
                If VWidth2 > 455 Then
                    Vunit = 455 / Vwidth
                    VWidth2 = 455
                    VHeight2 = Vheight * Vunit
                End If
            End If
            PictureBox1.Width = VWidth2
            PictureBox1.Height = VHeight2
            PictureBox1.ImageLocation = (FilesHome & NameOfFile)
            PictureBox1.Load()
            'Fill Pdetails
            Total = Total + 1
            Pdetails(Total - 1, 0) = NameOfFile
            Pdetails(Total - 1, 1) = VWidth2 & "," & VHeight2

Can you help please?
John

[Clifton]

What is your method for swapping graphics in the field?
Are you using setHTMLContent()? If so, please post your HTML code.

[John Robin Dove]

Actually I hadn't got as far as that yet. I had in mind to do exactly as you suggest. I was going to use getHTMLContent() to get the relevant HTML, replace the file name with XXXX then use pgReplace() to change XXXX to the required file name. I have done this successfuly once before. However I have just attempted to do this and there is a problem: getHTML content is returning null!

UPDATE: getHTMLContent is still returning null for the field. Is this because I am loading the picture with load page and pgStyleObject? I added a button with a picture and extracted the HTML with getHTMLContent with no problems. I used the code as planned and the system works perfectly. This probably solves my problem because the stretchToFit property is retained and I can use this + the actual size of the picture to calculate what size the button should be.

The only problem left is to obtain the size of the picture before loading it.

[Clifton]

You cannot get the size of an image without loading it somewhere.
Here is a little function which will get the size of an image. I just used this exact same code (XML version) in a recent project.

function _getImageSz(file, tbName) {
    /* Sends user event to [tbName] when image size is available.
        [value] parameter is an array as [0] = x size in pixels; [1] = y size in pixels 
    ***/
    var tmp = new Image();
    tmp.addEventListener( "load", function() {
            var sz = [ tmp.naturalWidth, tmp.naturalHeight ];
            tbfunction_pgTBObjSet( tbName, "user", sz );
        } );
    tmp.src = file;
};

Please note that his is HTML 5 code. Won't work on IE8, but it is time to no longer support older browsers.
Better yet, you could just expand the function to resize the field as part of the eventListener code. That is the way I use it in my XML code.
 

[John Robin Dove]

Thanks Clifton,
I'll look into this tomorrow.

John

UPDATE: All problems now solved! I was not not sure where to put your function so I just added a js file. I also added a function to resize the picture to fit in my page.

Code: Select all

// JavaScript Document
function tbfunction_getImageSize(file, tbName) {
    /* Sends user event to [tbName] when image size is available.
        [value] parameter is an array as [0] = x size in pixels; [1] = y size in pixels
    ***/
    var tmp = new Image();
    tmp.addEventListener( "load", function() {
            var sz = [ tmp.naturalWidth, tmp.naturalHeight ];
            tbfunction_pgTBObjSet( tbName, "user", sz );
        } );
    tmp.src = file;
};
////////////////////////////////////////////////////////////////////
function tbfunction_resizeImage(VWidth,VHeight) {
var VWidth2;
var VHeight2;
var VUnit;
// RESIZE
    if (VWidth > VHeight){
    VUnit = 455 / VWidth;
    VWidth2 = 455;
    VHeight2 = VHeight * VUnit;
    // REVERSE IF IMAGE IS TOO HIGH
        if (VHeight2 > 600){
        VHeight2 = 600;
        VUnit = 600 / VHeight;
        VWidth2 = VWidth * VUnit;
        }
    }
    else{
    VHeight2 = 600;
    VUnit = 600 / VHeight;
    VWidth2 = VWidth * VUnit;
    // REVERSE IF IMAGE IS TOO WIDE
        if (VWidth2 > 455){
        VUnit = 455 / VWidth;
        VWidth2 = 455;
        VHeight2 = VHeight * VUnit;
        }
    }
return VWidth2 + "," + VHeight2
};

I just translated my VB.NET code. All quite painless.
Thank you very much.