Arbitrary image placement

[wrussell]

Hi,

Could you tell me how I would go about placing an image at an arbitrary location inside another image's coordinate space? This must be dynamic (ie, I click somewhere within the "container" image, and the "child" image is removed from its current location and redisplayed where I clicked). I also need to know how to clip the child image to the container image's boundaries (because the "click" position will be the centre of the child image, not the top-left).

It may help to understand what I am trying to achieve here: I am writing a full-spectrum Colour Picker component, modelled on the Windows colour selection dialog. Thus, I need to show a crosshair image inside a colour swatch image, clipped at the edges.

Thanks for help,

Wayne

[wrussell]

Also (sorry, should have mentioned this in the OP)...

I need a component which has a smoothly-graded background colour, from light to dark. This cannot be a pre-defined image, as the tone of the intermediate colours will vary depending on the hue and saturation chosen in the colour swatch I mention in the previous post. I had thought of implementing this as maybe 32 very small Canvas's, each with a slightly darker shade of background colour, stacked on top of one another, with a Slider next to them to allow the user to select.

Is this a good way to go, or can you suggest a better way to do it?

Thanks again,

Wayne

[Isomorphic]

If you just add a child via either the canvas.children Array or via the addChild() API, it's left and top coordinated will be relative to it's parent.

The drop reticle in the Extending Drag and Drop example demonstrates this.

Setting overflow:"hidden" on the parent will accomplish clipping.

If you complete a reusable color picker component it would be great if you shared sample code.

[wrussell]

Just bumping this as your reply crossed over with my second post and I'd hate to think you missed it!

And yes, if people are interested, it is my intention to make this component available to others when it's complete. Is there a formal mechanism in place for code sharing?

Wayne

[Isomorphic]

You might be able to get away with a static spectrum image and a second Canvas superimposed on it, with black color and varying opacity. Otherwise, using a Canvas for each color swatches is probably the way to go.

For a standalone component the best way to share it is to post it here - that also gives people the option of using it before it's rolled into SmartClient as an officially component. Thanks in advance for contributing!

[wrussell]

Hi,

The overlaid semi-transparent canvas idea won't work because I need to shade from white, through increasingly darker shades of the selected colour, to black. Good suggestion though - it would have looked great if I'd just wanted brighter shades of the same colour.

I'm having difficulty implementing the idea of a stack of Canvases. There seems to be an (undocumented?) minimum height of about 15px for a Canvas. Is this true, and if so can you suggest a workaround?

Thanks,

Wayne

[Isomorphic]

That apparent minimum is created because a Canvas is by default overflow:"visible", meaning it will size to reveal its contents, and has default contents of " ". 15px happens to be the CSS minimum height for one line of text in whatever font that Canvas is using. To avoid hitting this minimum, just set overflow:"hidden".

[wrussell]

Thanks - as always, the support on this forum is excellent.

[wrussell]

I am trying to use a Slider control, and getting all kinds of bizarre results. If I define the Slider like this:

this.lumSlider = isc.Slider.create({
	minValue: 0,
	maxValue: 240,
	numValues: 240,
	margin: 5,
	length: 150,
	width: 20,
	showTitle: false,
	showValue: false,
	flipValues: true
});

everything works OK, but I have no interactivity. As soon as I add a "valueChanged" attribute, weird stuff starts happening. In the simple case (where I add a valueChanged string function), one of my images suddenly gets stretched to 100px wide - this is consistent and can be fixed by removing the valueChanged reference.

I have tried other things - for example, doing this:

this.observe(this.lumSlider, "valueChanged", "this.setPickedLum(this.lumSlider.getValue)");

and I just get a many-repeated error from the ISC runtime that "this.lumSlider has no properties". Of course, this.lumSlider has already been created, and it does indeed have some properties. Also, the "setPickedLum" method is already being called sucessfully from several other places in the same component.

I haven't posted the full source here as it's over 500 lines (and all working perfectly without this particular problem). If that would help, I'm happy to post it...

Thanks,

Wayne

[Isomorphic]

Hi wrussel,

A quick attempt at using your Slider code shows normal interactivity. In your application, perhaps it's been placed underneath something transparent. You might try checking the extents of the Slider and of other components using the Watch tab in the Developer Console.

On observation - "this" isn't going to be defined in the expression you provide to observe(), but "observer" means the same thing.

[wrussell]

Strange IE difference

I have now completed this component, but I have a very strange problem that only shows itself in Internet Explorer - it doesn't happen in Firefox, Opera or Safari.

When the component is first shown, the crosshair image on the colour swatch is displayed a long way out of position - it appears far too high and far too far to the left. If I change the colour, wither by clicking on the swatch or changing one of the RGB or HSL values, the crosshair image moves to the correct position in the y-plane, but it is now far too far to the right of where it should be. If I now change the colour again (by whatever means), the crosshair begins to track the colour accurately - as far as I can tell, it will now behave itself for ever.

The numbers it is using internally to place the image are correct (and exactly the same as the numbers calculated in the other browsers). The crosshair is defined as a child of the swatch image, and positioned using the crosshair's setLeft() and setTop() methods. I think this is the correct thing to do - certainly, it works in all the other browsers (and indeed in IE, after the first two colour settings).

Any suggestions?

Thanks,

Wayne

[Isomorphic]

We will probably need to see the code to comment intelligently, but as a wild guess, you might be initializing the crosshair's coordinates with something like "20px" instead of just 20.

[wrussell]

No, I'm just providing numbers with no "px" suffix.

I have tried to create a cut-down version of the code that shows the problem, but I keep having to add more and more of the original code back into it to make the thing work, so I've given up for now.

I'm happy to post the whole lot if you're happy to look at it. What's the best way to do this? We're talking two .js files, three images and a little JSP to bootstrap it - and the main source file is 800 lines long.

If seeing the behaviour without the code would be helpful (or if you want to grab the code with Fiddler or something similar), I can put this up on my public webserver for you to look at?

Thanks,

Wayne

[Isomorphic]

Hi Wayne,

The best thing is to create an example that can be dropped into an unmodified SDK and run.

On this particular error, I think it's going to be fine not to make it too minimal, so long as it runs in an unmodified SDK.

[wrussell]

Fine, but how should I provide the files? I suppose I can just paste JS text into a message (though it would be a big message!) but what about the images? One of them, at least, is fundamental.