Re: [qooxdoo-devel] Scaling (but not skewing) Atom image
This is really interesting. I expected the scale property to work exactly like this! Unfortunately, the actual images we'll be displaying are not simple smileys but high-resolution raster images. Thanks regardless, Reed On Tue, Jan 12, 2016 at 7:26 PM, SQville wrote: > I was able to match the functionality by changing the image to an svg file > and scale = true - http://tinyurl.com/z8uy7ne > > Not sure if you are able to go svg vs. png > > > > -- > View this message in context: > http://qooxdoo.678.n2.nabble.com/Scaling-but-not-skewing-Atom-image-tp7587939p7587947.html > Sent from the qooxdoo mailing list archive at Nabble.com. > > > -- > Site24x7 APM Insight: Get Deep Visibility into Application Performance > APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month > Monitor end-to-end web transactions and take corrective actions now > Troubleshoot faster and improve end-user experience. Signup Now! > http://pubads.g.doubleclick.net/gampad/clk?id=267308311&iu=/4140 > ___ > qooxdoo-devel mailing list > [email protected] > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > -- Site24x7 APM Insight: Get Deep Visibility into Application Performance APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month Monitor end-to-end web transactions and take corrective actions now Troubleshoot faster and improve end-user experience. Signup Now! http://pubads.g.doubleclick.net/gampad/clk?id=267308311&iu=/4140___ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Re: [qooxdoo-devel] Scaling (but not skewing) Atom image
I was able to match the functionality by changing the image to an svg file and scale = true - http://tinyurl.com/z8uy7ne Not sure if you are able to go svg vs. png -- View this message in context: http://qooxdoo.678.n2.nabble.com/Scaling-but-not-skewing-Atom-image-tp7587939p7587947.html Sent from the qooxdoo mailing list archive at Nabble.com. -- Site24x7 APM Insight: Get Deep Visibility into Application Performance APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month Monitor end-to-end web transactions and take corrective actions now Troubleshoot faster and improve end-user experience. Signup Now! http://pubads.g.doubleclick.net/gampad/clk?id=267308311&iu=/4140 ___ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Re: [qooxdoo-devel] Scaling (but not skewing) Atom image
Thanks everyone, John, your code does precisely what I need! Look forward to seeing it proposed for core, if possible. Thanks John, Dietrich, and Derrell, Reed On Tue, Jan 12, 2016 at 11:48 AM, Derrell Lipman < [email protected]> wrote: > Thanks, John! This would be a nice contribution to core qooxdoo. > > D > > > On Tue, Jan 12, 2016 at 11:46 AM John Spackman > wrote: > >> No not really, I think it probably should go across just fine but OTOH I >> first wrote it several years ago (e.g. Qx v3.x or maybe even earlier) so >> there could be things that were added to Qx that mine doesn’t have. I’ll >> have a go at comparing them side by side to give you a better answer! >> >> John. >> >> From: Derrell Lipman >> Reply-To: qooxdoo Development >> Date: Tuesday, 12 January 2016 at 13:25 >> To: qooxdoo Development >> Subject: Re: [qooxdoo-devel] Scaling (but not skewing) Atom image >> >> Thanks, John! Do you know if there anything about your Image class that >> would prevent it from directly replacing the native qooxdoo Image class? >> Any known non-backward-compatibilities? As I searched the archives, I found >> that there have been many questions about how to do this over the years... >> >> Derrell >> >> >> On Tue, Jan 12, 2016 at 8:09 AM John Spackman >> wrote: >> >>> The only solution I have for this is to reimplement qx.core.basic.Image, >>> but with added tweaks for scaling. I’ve created a playground demo but it >>> is too large for a shortened URL because out is basically my entire Image >>> class plus the demo code, so here it is in email: >>> >>> >>> /** >>> >>> * Image which preserves the aspect ratio while scaling the image and >>> constrains >>> >>> * the dimensions to stay within the min/max width/height. The image is >>> placed >>> >>> * centrally within the dimensions of the widget. >>> >>> * >>> >>> * Based on the Qooxdoo image >>> >>> */ >>> >>> qx.Class.define("grasshopper.af.ui.image.Image", { >>> >>> extend : qx.ui.core.Widget, >>> >>> >>> /* >>> >>>* >>> >>> >>>* CONSTRUCTOR >>> >>>* >>> >>> >>>*/ >>> >>> >>> /** >>> >>>* @param source >>> >>>* {String?null} The URL of the image to display. >>> >>>*/ >>> >>> construct : function(source) { >>> >>> this.__contentElements = {}; >>> >>> >>> this.base(arguments); >>> >>> >>> if (source) { >>> >>> this.setSource(source); >>> >>> } >>> >>> }, >>> >>> >>> /* >>> >>>* >>> >>> >>>* PROPERTIES >>> >>>* >>> >>> >>>*/ >>> >>> >>> properties : { >>> >>> /** The URL of the image */ >>> >>> source : { >>> >>> check : "String", >>> >>> init : null, >>> >>> nullable : true, >>> >>> event : "changeSource", >>> >>> apply : "_applySource", >>> >>> themeable : true >>> >>> }, >>> >>> >>> >>> /** >>> >>> * Whether the image should be scaled to the given dimensions >>> >>> * >>> >>> * This is disabled by default because it prevents the usage of >>> image >>> >>> * clipping when enabled. >>> >>> */ >>> >>> scale : { >>> >>> check : "Boolean", >>> >>> init : true, >>> >>> themeable : true, >>> >>> apply : "_applyScale" >>> >>> }, >>>
Re: [qooxdoo-devel] Scaling (but not skewing) Atom image
Thanks, John! This would be a nice contribution to core qooxdoo.
D
On Tue, Jan 12, 2016 at 11:46 AM John Spackman
wrote:
> No not really, I think it probably should go across just fine but OTOH I
> first wrote it several years ago (e.g. Qx v3.x or maybe even earlier) so
> there could be things that were added to Qx that mine doesn’t have. I’ll
> have a go at comparing them side by side to give you a better answer!
>
> John.
>
> From: Derrell Lipman
> Reply-To: qooxdoo Development
> Date: Tuesday, 12 January 2016 at 13:25
> To: qooxdoo Development
> Subject: Re: [qooxdoo-devel] Scaling (but not skewing) Atom image
>
> Thanks, John! Do you know if there anything about your Image class that
> would prevent it from directly replacing the native qooxdoo Image class?
> Any known non-backward-compatibilities? As I searched the archives, I found
> that there have been many questions about how to do this over the years...
>
> Derrell
>
>
> On Tue, Jan 12, 2016 at 8:09 AM John Spackman
> wrote:
>
>> The only solution I have for this is to reimplement qx.core.basic.Image,
>> but with added tweaks for scaling. I’ve created a playground demo but it
>> is too large for a shortened URL because out is basically my entire Image
>> class plus the demo code, so here it is in email:
>>
>>
>> /**
>>
>> * Image which preserves the aspect ratio while scaling the image and
>> constrains
>>
>> * the dimensions to stay within the min/max width/height. The image is
>> placed
>>
>> * centrally within the dimensions of the widget.
>>
>> *
>>
>> * Based on the Qooxdoo image
>>
>> */
>>
>> qx.Class.define("grasshopper.af.ui.image.Image", {
>>
>> extend : qx.ui.core.Widget,
>>
>>
>> /*
>>
>>*
>>
>>
>>* CONSTRUCTOR
>>
>>*
>>
>>
>>*/
>>
>>
>> /**
>>
>>* @param source
>>
>>* {String?null} The URL of the image to display.
>>
>>*/
>>
>> construct : function(source) {
>>
>> this.__contentElements = {};
>>
>>
>> this.base(arguments);
>>
>>
>> if (source) {
>>
>> this.setSource(source);
>>
>> }
>>
>> },
>>
>>
>> /*
>>
>>*
>>
>>
>>* PROPERTIES
>>
>>*
>>
>>
>>*/
>>
>>
>> properties : {
>>
>> /** The URL of the image */
>>
>> source : {
>>
>> check : "String",
>>
>> init : null,
>>
>> nullable : true,
>>
>> event : "changeSource",
>>
>> apply : "_applySource",
>>
>> themeable : true
>>
>> },
>>
>>
>>
>> /**
>>
>> * Whether the image should be scaled to the given dimensions
>>
>> *
>>
>> * This is disabled by default because it prevents the usage of image
>>
>> * clipping when enabled.
>>
>> */
>>
>> scale : {
>>
>> check : "Boolean",
>>
>> init : true,
>>
>> themeable : true,
>>
>> apply : "_applyScale"
>>
>> },
>>
>>
>> /**
>>
>> * Whether to preserve the image ratio (ie prevent distortion), and
>> which dimension
>>
>> * to prioritise
>>
>> */
>>
>> forceRatio : {
>>
>> init : 'auto',
>>
>> check : [ 'disabled', 'height', 'width', 'auto' ],
>>
>> apply : '_applyDimension'
>>
>> },
>>
>>
>> /**
>>
>> * Whether to allow scaling the image up
>>
>> */
>>
>> allowScaleUp : {
>>
>> init : false,
>>
>> check : "Boolean",
>>
>> apply : "_applyDimension"
>>
>> },
>>
>>
>> // overridden
>>
>> appearance : {
>>
>> refine : true,
>>
>> i
Re: [qooxdoo-devel] Scaling (but not skewing) Atom image
No not really, I think it probably should go across just fine but OTOH I first
wrote it several years ago (e.g. Qx v3.x or maybe even earlier) so there could
be things that were added to Qx that mine doesn’t have. I’ll have a go at
comparing them side by side to give you a better answer!
John.
From: Derrell Lipman
Reply-To: qooxdoo Development
Date: Tuesday, 12 January 2016 at 13:25
To: qooxdoo Development
Subject: Re: [qooxdoo-devel] Scaling (but not skewing) Atom image
Thanks, John! Do you know if there anything about your Image class that would
prevent it from directly replacing the native qooxdoo Image class? Any known
non-backward-compatibilities? As I searched the archives, I found that there
have been many questions about how to do this over the years...
Derrell
On Tue, Jan 12, 2016 at 8:09 AM John Spackman wrote:
The only solution I have for this is to reimplement qx.core.basic.Image, but
with added tweaks for scaling. I’ve created a playground demo but it is too
large for a shortened URL because out is basically my entire Image class plus
the demo code, so here it is in email:
/**
* Image which preserves the aspect ratio while scaling the image and constrains
* the dimensions to stay within the min/max width/height. The image is placed
* centrally within the dimensions of the widget.
*
* Based on the Qooxdoo image
*/
qx.Class.define("grasshopper.af.ui.image.Image", {
extend : qx.ui.core.Widget,
/*
*
* CONSTRUCTOR
*
*/
/**
* @param source
* {String?null} The URL of the image to display.
*/
construct : function(source) {
this.__contentElements = {};
this.base(arguments);
if (source) {
this.setSource(source);
}
},
/*
*
* PROPERTIES
*
*/
properties : {
/** The URL of the image */
source : {
check : "String",
init : null,
nullable : true,
event : "changeSource",
apply : "_applySource",
themeable : true
},
/**
* Whether the image should be scaled to the given dimensions
*
* This is disabled by default because it prevents the usage of image
* clipping when enabled.
*/
scale : {
check : "Boolean",
init : true,
themeable : true,
apply : "_applyScale"
},
/**
* Whether to preserve the image ratio (ie prevent distortion), and which
dimension
* to prioritise
*/
forceRatio : {
init : 'auto',
check : [ 'disabled', 'height', 'width', 'auto' ],
apply : '_applyDimension'
},
/**
* Whether to allow scaling the image up
*/
allowScaleUp : {
init : false,
check : "Boolean",
apply : "_applyDimension"
},
// overridden
appearance : {
refine : true,
init : "image"
},
// overridden
allowShrinkX : {
refine : true,
init : false
},
// overridden
allowShrinkY : {
refine : true,
init : false
},
// overridden
allowGrowX : {
refine : true,
init : false
},
// overridden
allowGrowY : {
refine : true,
init : false
}
},
/*
*
* EVENTS
*
*/
events : {
/**
* Fired if the image source can not be loaded.
*
* *Attention*: This event is only used for images which are loaded
* externally (aka unmanaged images).
*/
loadingFailed : "qx.event.type.Event",
/**
* Fired if the image has been loaded.
*
* *Attention*: This event is only used for images which are loaded
* externally (aka unmanaged images).
*/
loaded : "qx.event.type.Event"
},
/*
*
* MEMBERS
*
*/
members : {
__width : null,
__height : null,
__mode : null,
__contentElements : null,
__currentContentElement : null,
__wrapper : null,
// overridden
_onChangeTheme : function() {
this.base(arguments);
// restyle source (theme change might have changed t
Re: [qooxdoo-devel] Scaling (but not skewing) Atom image
Thanks, John! Do you know if there anything about your Image class that
would prevent it from directly replacing the native qooxdoo Image class?
Any known non-backward-compatibilities? As I searched the archives, I found
that there have been many questions about how to do this over the years...
Derrell
On Tue, Jan 12, 2016 at 8:09 AM John Spackman
wrote:
> The only solution I have for this is to reimplement qx.core.basic.Image,
> but with added tweaks for scaling. I’ve created a playground demo but it
> is too large for a shortened URL because out is basically my entire Image
> class plus the demo code, so here it is in email:
>
>
> /**
>
> * Image which preserves the aspect ratio while scaling the image and
> constrains
>
> * the dimensions to stay within the min/max width/height. The image is
> placed
>
> * centrally within the dimensions of the widget.
>
> *
>
> * Based on the Qooxdoo image
>
> */
>
> qx.Class.define("grasshopper.af.ui.image.Image", {
>
> extend : qx.ui.core.Widget,
>
>
> /*
>
>*
>
>
>* CONSTRUCTOR
>
>*
>
>
>*/
>
>
> /**
>
>* @param source
>
>* {String?null} The URL of the image to display.
>
>*/
>
> construct : function(source) {
>
> this.__contentElements = {};
>
>
> this.base(arguments);
>
>
> if (source) {
>
> this.setSource(source);
>
> }
>
> },
>
>
> /*
>
>*
>
>
>* PROPERTIES
>
>*
>
>
>*/
>
>
> properties : {
>
> /** The URL of the image */
>
> source : {
>
> check : "String",
>
> init : null,
>
> nullable : true,
>
> event : "changeSource",
>
> apply : "_applySource",
>
> themeable : true
>
> },
>
>
>
> /**
>
> * Whether the image should be scaled to the given dimensions
>
> *
>
> * This is disabled by default because it prevents the usage of image
>
> * clipping when enabled.
>
> */
>
> scale : {
>
> check : "Boolean",
>
> init : true,
>
> themeable : true,
>
> apply : "_applyScale"
>
> },
>
>
> /**
>
> * Whether to preserve the image ratio (ie prevent distortion), and
> which dimension
>
> * to prioritise
>
> */
>
> forceRatio : {
>
> init : 'auto',
>
> check : [ 'disabled', 'height', 'width', 'auto' ],
>
> apply : '_applyDimension'
>
> },
>
>
> /**
>
> * Whether to allow scaling the image up
>
> */
>
> allowScaleUp : {
>
> init : false,
>
> check : "Boolean",
>
> apply : "_applyDimension"
>
> },
>
>
> // overridden
>
> appearance : {
>
> refine : true,
>
> init : "image"
>
> },
>
>
> // overridden
>
> allowShrinkX : {
>
> refine : true,
>
> init : false
>
> },
>
>
> // overridden
>
> allowShrinkY : {
>
> refine : true,
>
> init : false
>
> },
>
>
> // overridden
>
> allowGrowX : {
>
> refine : true,
>
> init : false
>
> },
>
>
> // overridden
>
> allowGrowY : {
>
> refine : true,
>
> init : false
>
> }
>
> },
>
>
> /*
>
>*
>
>
>* EVENTS
>
>*
>
>
>*/
>
>
> events : {
>
> /**
>
> * Fired if the image source can not be loaded.
>
> *
>
> * *Attention*: This event is only used for images which are loaded
>
> * externally (aka unmanaged images).
>
> */
>
> loadingFailed : "qx.event.type.Event",
>
>
> /**
>
> * Fired if the image has been loaded.
>
> *
>
> * *Attention*: This event is only used for images which are loaded
>
> * externally (aka unmanaged images).
>
> */
>
> loaded : "qx.event.type.Event"
>
> },
>
>
> /*
>
>*
>
>
>* MEMBERS
>
>*
>
>
>*/
>
>
> members : {
>
> __width : null,
>
> __height : null,
>
> __mode : null,
>
> __contentElements : null,
>
> __currentContentElement : null,
>
> __wrapper : null,
>
>
> // overridden
>
> _onChangeTheme : function() {
>
> this.base(arguments);
>
> // restyle source (theme change might have changed the resolved url)
>
> this._styleSource();
>
> },
>
>
>
> /*
>
> *
> ---
>
> * WIDGET API
>
> *
> ---
>
>
Re: [qooxdoo-devel] Scaling (but not skewing) Atom image
Reed, you probably have to click Run twice to view this since the image is not initially loaded and doesn't appear initially. Also, I think Dietrich intended max-height vs maxHeight and max-width vs maxWidth in the image. Dietrich, thanks! Unfortunately, this doesn't do what Reed needs and I haven't come up with a good solution either. In your playground example, when the window is reduced in size in one dimension, the image does not shrink to fit so that the image is fully visible. Instead, part of the image is cut off. Reed's goal here is to display an entire image *in its original aspect ratio*, however small as necessary to be fully visible in the provided space. Additional suggestions appreciated! Derrell On Tue, Jan 12, 2016 at 3:17 AM Dietrich Streifert < [email protected]> wrote: > Hi Reed > > qx.ui.basic.Atom is (I think) not intended to be used that way. > > I'll use instead a qx.ui.basic.Label, set the rich property to true which > allows you to use regular html as the label value: > > http://tinyurl.com/jk897lh > > > > Am 11.01.2016 um 21:35 schrieb Reed: > > Hello wonderful community, > > I am unable to effect what I want with an Atom. I have an image which will > be of variable dimensions. I need it to display with the proper proportions > always, but with a maximum width and height. If either the width or height > are above the maximum, the image should scale down to fit, but maintain > proportions. In vanilla HTML/CSS, I would simply set max-width and > max-height, and neither explicit width nor height. See this codepen for an > example of my desired effect: http://codepen.io/reedspool/pen/adwyvB > > With an Atom image, however, I'm unable to make this happen. I've played > with the properties scale, allowShrinkX, allowShrinkY, maxWidth, maxHeight, > allowStretchX, and allowStretchY. None of my experiments has worked. See > this playground link, http://goo.gl/pHcUcE > > As you can see, the best of I've gotten is to maintain proportions by > setting scale to false, but the maxWidth doesn't work as I'd expect (from > experience with vanilla HTML/CSS), and the image is cut off. > > I've also attempted the image manipulation with a `qx.ui.embed.Html()` > element as well, with little success. See this playground link, > http://goo.gl/cZoYdC Here, the image doesn't show at all (I think because > I'm not setting the container height properly. > > Any suggestions appreciated, either to fix my current approaches or offer > a new one. > > Thanks, > Reed > > > > > -- > Site24x7 APM Insight: Get Deep Visibility into Application Performance > APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month > Monitor end-to-end web transactions and take corrective actions now > Troubleshoot faster and improve end-user experience. Signup > Now!http://pubads.g.doubleclick.net/gampad/clk?id=267308311&iu=/4140 > > > > ___ > qooxdoo-devel mailing > [email protected]://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > > > > -- > Site24x7 APM Insight: Get Deep Visibility into Application Performance > APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month > Monitor end-to-end web transactions and take corrective actions now > Troubleshoot faster and improve end-user experience. Signup Now! > http://pubads.g.doubleclick.net/gampad/clk?id=267308311&iu=/4140 > ___ > qooxdoo-devel mailing list > [email protected] > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > -- Site24x7 APM Insight: Get Deep Visibility into Application Performance APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month Monitor end-to-end web transactions and take corrective actions now Troubleshoot faster and improve end-user experience. Signup Now! http://pubads.g.doubleclick.net/gampad/clk?id=267308311&iu=/4140___ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Re: [qooxdoo-devel] Scaling (but not skewing) Atom image
Hi Reed qx.ui.basic.Atom is (I think) not intended to be used that way. I'll use instead a qx.ui.basic.Label, set the rich property to true which allows you to use regular html as the label value: http://tinyurl.com/jk897lh Am 11.01.2016 um 21:35 schrieb Reed: Hello wonderful community, I am unable to effect what I want with an Atom. I have an image which will be of variable dimensions. I need it to display with the proper proportions always, but with a maximum width and height. If either the width or height are above the maximum, the image should scale down to fit, but maintain proportions. In vanilla HTML/CSS, I would simply set max-width and max-height, and neither explicit width nor height. See this codepen for an example of my desired effect: http://codepen.io/reedspool/pen/adwyvB With an Atom image, however, I'm unable to make this happen. I've played with the properties scale, allowShrinkX, allowShrinkY, maxWidth, maxHeight, allowStretchX, and allowStretchY. None of my experiments has worked. See this playground link, http://goo.gl/pHcUcE As you can see, the best of I've gotten is to maintain proportions by setting scale to false, but the maxWidth doesn't work as I'd expect (from experience with vanilla HTML/CSS), and the image is cut off. I've also attempted the image manipulation with a `qx.ui.embed.Html()` element as well, with little success. See this playground link, http://goo.gl/cZoYdC Here, the image doesn't show at all (I think because I'm not setting the container height properly. Any suggestions appreciated, either to fix my current approaches or offer a new one. Thanks, Reed -- Site24x7 APM Insight: Get Deep Visibility into Application Performance APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month Monitor end-to-end web transactions and take corrective actions now Troubleshoot faster and improve end-user experience. Signup Now! http://pubads.g.doubleclick.net/gampad/clk?id=267308311&iu=/4140 ___ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel -- Site24x7 APM Insight: Get Deep Visibility into Application Performance APM + Mobile APM + RUM: Monitor 3 App instances at just $35/Month Monitor end-to-end web transactions and take corrective actions now Troubleshoot faster and improve end-user experience. Signup Now! http://pubads.g.doubleclick.net/gampad/clk?id=267308311&iu=/4140___ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
