How do I maintain aspect ratio?

[kmccoy]

I have many photos to display, all with different aspect ratios. How do I display them without stretching the pictures to fit the component? Stretching distorts the image.

I would like to display them in letterbox format if they are too wide or tall.

I have tried CSS and ImageCSS, but cannot get it to work correctly.

[Jorge Sousa]

Hello

Did you try with Proportional = True ?

[kmccoy]

Did you try with Proportional = True ?

Yes. The component size is fixed, but the image stretches to match the component.

I use a database connection to display PNG blob records in this component. This works great, but the aspect ratio / stretched pictures looks bad unless the original picture has the same ratio as the component.

[Jorge Sousa]

Hi

Please Kevin, could you send us one or more images that look bad and the size of the image control*.

I also presume that you are changing the images in an ajax/async event, isn't that right?

[kmccoy]

could you send us one or more images that look bad and the size of the edit.

The JQImage is 325x244 (W,H), but the size does not really matter. The image never sizes correctly, unless I am using wrong property values.

I also presume that you are changing the images in an ajax/async event, isn't that right?

Yes. The user enters search criteria and clicks a button. The app reads the editor fields and forms a MySQL query. The query is executed and passes the results to various DB components on my form. I then call RenderRegionAsync(rgnHits) to refresh all the DB components.

The CGJQImage is linked to one of the queries and displays the current blob. The user can use a DB navigator to flip through multiple pictures, if more than one exists for the search hit.

Code: Select all

PROCEDURE TfrmMuSearch.btnDoSearchClick(Sender : TObject; AParams : TStringList);
VAR
    FirstName,
    MiddleName,
    LastName,
    Sex,
    Hair,
    Eye,
    Feet,
    Inches,
    Weight,
    Age,
    AgeRange,
    ReportType,
    Agency :    Variant;
    Birthdate : TDateTime;
    Msg :       STRING;
    I,
    RecCount :  Integer;
BEGIN
    Msg        := '';
    FirstName  := GetEdtVal(edtFirstName, [EAlpha..EPunct]);
    MiddleName := GetEdtVal(edtMiddleName, [EAlpha..EPunct]);
    LastName   := GetEdtVal(edtLastName, [EAlpha..EPunct]);
    Sex        := GetComboVal(cbSex);
    Hair       := GetComboVal(cbHairColor);
    Eye        := GetComboVal(cbEyeColor);
    Feet       := GetComboVal(cbHeightFt);
    BuildRangeMsg(InRange(Feet, 0, 7), Msg, 'Height:Feet');
    Inches     := GetComboVal(cbHeightIn);
    BuildRangeMsg(InRange(Inches, 0, 11), Msg, 'Height:Inches');
    Weight     := GetEdtVal(edtWeight, [ENumeric]);
    BuildRangeMsg(InRange(Weight, 0, 999), Msg, 'Weight');
    BirthDate  := deBirthdate.Date;
    Age        := GetEdtVal(edtAge, [ENumeric]);
    BuildRangeMsg(InRange(Age, 0, 120), Msg, 'Age');
    AgeRange   := GetComboVal(cbAgeRange);
    BuildRangeMsg(InRange(AgeRange, 0, 5), Msg, 'Age:Range');
    ReportType := GetComboVal(cbReportType);
    Agency     := GetComboVal(cbResponsibleAgency);

    IF Msg <> '' THEN BEGIN
        mbCustomize(mtWarning, 'Sorry, there is a problem with the information you entered:<br><br>' + Msg);
        mbAddOK;
        mbShow;
    END;

    InhibitHits := FALSE;

    {Pass field values to UserSession query builder; Get record count}
    RecCount := UserSession.MPSearchHits(FirstName, MiddleName, LastName, sex, Hair, Eye, Feet, Inches, Weight, Age, AgeRange, ReportType, Agency, BirthDate, cbUnidentifiedRemains.Checked);

    RenderRegionAsync(rgnHits);

    {If record count=0 or record count>max hits then pop error dialog - exit}
    IF RecCount > MaxHits THEN BEGIN
        mbCustomize(mtWarning, 'Sorry, Your search returned too many reports.<br><br>Please add more search criteria to narrow your search.' + Msg);
        mbAddOK;
        mbShow;
        EXIT;
    END;

    IF RecCount = 0 THEN BEGIN
        mbCustomize(mtWarning, 'Sorry, Your search returned no reports.<br><br>Please change your search criteria to widen your search.' + Msg);
        mbAddOK;
        mbShow;
        EXIT;
    END;
END;


And the CGJQImage component:

Code: Select all

      object imgUserImage: TIWCGJQImage
        Left = 912
        Top = 87
        Width = 325
        Height = 244
        Hint = 'Click Add Photo button to upload a picture of this person'
        TabOrder = 32
        Version = '1.0'
        BorderOptions.NumericWidth = 3
        BorderOptions.Style = cbsInset
        DataLink.DataSource = IWUserSession.dsMupuImages
        DataLink.FieldName = 'filedata'
      end


Here is a screen shot of the web page. Note the stretched picture:

[Jorge Sousa]

Hello

Thanks for the info, we're checking this now.

Why are you calling RenderRegionAsync(rgnHits) to refresh DB components? Don't they refresh automatically?

[Alexander Bulei]

Hi kmccoy,

Fixed/Implemted in v2.3.0.63.
Thank you.

Best Regards.

[Jorge Sousa]

Hi again

After install the next version that will be released tomorrow morning,

You should set Proportional = True and optionally Center = True

[kmccoy]

Why are you calling RenderRegionAsync(rgnHits) to refresh DB components? Don't they refresh automatically?

No, they weren't. I don't know if it is because I use a parent frame to hold the "search" frame, or that I have multiple regions in the Search frame and the Submit button is on a different region than the DB editors.

Adding RenderRegionAsync fixed the refresh problem, but I am open to other solutions.

[kmccoy]

Hi again

After install the next version that will be released tomorrow morning,

You should set Proportional = True and optionally Center = True

Excellent! You guys rock!