HTMLViewer Image Manipulation

HI all.

I have waveforms for audio files stored on AWS as PNGs and their URLs are stored in a field on our MySQL database. I’m displaying them in the desktop app I’m building (OSX only) using an HTMLViewer and that’s all fine and dandy - works just fine (and I have a rather cool ‘click on the waveform and playback jumps to that point’ thing going on which is really sweet).

I’m just wondering if there’s an easy way to manipulate their colours - they’re just a white backround with a grey waveform at the moment and it might be nice if I could invert them for example or otherwise change the grey and white to other colours. It’s no show stopper - I’m just curious as to what I can and can’t do and how I’d go about it.

Thanks in advance

The waveforms are in the HTML? You can always check out the CSS to see if the grey is being set in there, and if it is, then you can just modify the CSS (in your code) and make them whatever colour you want… The white background should just be a simple change of the body background colour (or a div depending on how it is created)…

Ah - sorry - you misunderstand. We have music tracks in our DB and the waveform URL is stored in one of the tables, such as this: http://lemoncake-upload.s3.amazonaws.com/ed/d6c16034ef11e4aa8ec52e28a42c7f/Freshly_Squeezed-30SEC-RBrown.png

(They’re there as part of an existing website (www.lemoncake.com) built by someone else but managed by myself - I’m just trying to make use of this data for an internal admin app)

An HTML viewer was the easiest way to display these I thought.

That may be, but to manipulate the image you would have to download it.

Use a HTTPSocket to download it, and a Canvas to display it, you can manipulate colors and such with the Canvas.Paint event. You are probably going to have to re-create your click to scrub code in Xojo.

[quote=158787:@Tim Parnell]That may be, but to manipulate the image you would have to download it.

Use a HTTPSocket to download it, and a Canvas to display it, you can manipulate colors and such with the Canvas.Paint event. You are probably going to have to re-create your click to scrub code in Xojo.[/quote]

Oh OK. Probably no biggie as my click to scrub code is just a blank, transparent Canvas sat on top of the HTMLViewer so I could get the MouseUp co-ordinates. Thanks.

You can use the Transform method of the picture’s RGBSurface to change colors.

http://stackoverflow.com/questions/9163283/change-png-color-using-javascript-jquery-and-css

You can change it in the HTMLViewer, just need to modify up that code and inject it to your code (or if you’re just grabbing the PNG file from the URL, you could just write the HTML code without having to inject anything)