Original Image Size

[rbraddy]

Hi,

I'm developing a drag and drop editor (trial user at this point) and learning to use SmartClient (I'm very impressed so far).

Having an issue with my "dropped" image, though. I drag the original "thumbnail" object over my drop area, then interecept the "drop" event to create a new dropped object, which is sub-classed from Img like this:

isc.defineClass("DropPiece", "Img").addProperties({
    appImgDir: "library/",
    canDragReposition:true,
    canDrag:true,
    canDrop:true,
    dragAppearance:"target"
})


isc.defineClass("DropBox", "Canvas").addProperties({
    width:800, height:500, overflow:"hidden",
    edgeSize: 6,
    showEdges:true,
    membersMargin:5,  layoutMargin:5,
    canAcceptDrop:true,
    animateMembers:true,
    dropLineThickness:4,
    drop: function () {
        var dropSrc = isc.Event.getDragTarget().src;
        this.addChild(isc.DropPiece.create({
            src: isc.Event.getDragTarget().src,
            left: this.getOffsetX()-15-this.edgeSize,
            top: this.getOffsetY()-15-this.edgeSize
        }))
    }

It all works great, except the dropped image is 100 x 100 pixels square in size, not the actual image's size. I have tried forcing the DropPiece height and width, which can be used to set the dropped image size; however, what I need is the original image (as stored on disk) size.

I haven't been able to figure out why my DropPiece images want to be 100 x 100 instead of the image size stored on disk.

Any help greatly appreciated.

Thanks

Rick

[Isomorphic]

The Img.imageType attribute should give you what you need. Let us know if you can't get it working

[rbraddy]

Yes, help would be appreciated

Yes, I could use some help with this. I have tried a number of things, including modifying the imageType, to no avail.

When I set imageType to "normal", the newly-created dropped image becomes very tiny and cannot be resized (can only be dragged/moved).

When I set the imageType to "stretch" or don't set it at all (default), the image size is always 100 x 100 in size, instead of the actual PNG or JPG image size stored in the file the image was read from.

Thanks

Rick

[rbraddy]

More details...

So, just discovered this line of code creates what appears to be an "icon" that's 16 x 16 (instead of reading the image from the file and retaining the original file image's size):

isc.Img.create({src:"library/slideBG.png", imageType:"normal"}),

Without the imageType property, the default image appears "stretched" to fill the available vertical space.

What's the recommended best-practice to simply read an image from a file and display that image in it's native size (the size that it exists in that file)?

Thanks

Rick

[Isomorphic]

Hi Rick
Aha - it appears there's a bug in 6.5.1 whereby .png files have this problem in IE only. You can see how it should work here:
http://www.smartclient.com/#img

We'll make sure we get a fix for this into our next release.

Is this issue going to be a blocker for your development? In the short term, you can workaround this by using .gif images rather than .png's, or by explicitly sizing your Img components.
If this won't cut it for you let us know and we can put a 6.5.1 patch together for this issue.

[rbraddy]

I would much prefer to use .JPG instead of .PNG anyway, but I used .PNG because the examples were using it and it appeared to be required for proper drag appearance (is that correct?)

A fix would be nice, but I suppose the urgency depends on the answer to the above. If I can drag/drop .JPG or .GIF just as readily and they don't have an issue, I'll just switch file types - no big deal at this prototype stage (now's a great time to find this out, actually).

Thanks
Rick

P.S. I'll recode and try .JPG and .GIF.

[rbraddy]

I just tried switching over to .JPG instead of .PNG. Simple display of a .JPG using an Img class straight up works as expected - proper image size is indeed displayed.

However, using my DropPiece class (derived from Img), my dropped objects continue to be stuck at 100 x 100 pixels (in both IE7 and Firefox 2) when dropped in their "DropBox" class (as shown in this original posts's code).

I'd be happy to have someone in Support take a look at my code and prototype to reproduce the issue, if that's helpful at all.

So yes, a quick resolution to this issue would be greatly appreciated.

Thanks

Rick

[Isomorphic]

Hi Rick
The Img object will be 100x100 by default but the image inside it should be rendering at it's native size when imageType is set to normal.

You can leverage overflow to ensure the widget exactly fits the rendered image size - set overflow to "visible" and specify size to be small (1x1 px for example)

If this isn't what you need, please do put together a code snippet demonstrating the problem (or a complete standalone example which you could send to support@isomorphic.com) and we'll take a look

Thanks

[rbraddy]

That fixed the issue - very strange...

I would think the default would be to allow images to be displayed "normal" and for Layouts to display them "visible". It's not obvious to the uninitiated that we need to hold our mouth like this to get a normal image to display properly.

Nevertheless, thanks for the help. My dropped images now look right.

Case closed.

Thanks.

Rick

[CI-CUBE]

Sorry for re-opening this thread...

Am using TileGrid, DataSourceImageField and DataSource.

The problem I have: PNGs are scaled down to 16x16, JPEGs and GIFs appear 1:1.

Bug? Feature? Any hint? TIA

Ekki

SmartGWT 1.2, GWT 1.7, App Engine 1.2.2, Eclipse 3.5, JRE 1.6.0_13

CI-CUBE.BIZ feat. CubeBrowser.AppSpot.com

[CI-CUBE]

Maybe this is a non-issue as it happens only in the Hosted Mode.