HTML inline images : How ?

Norbert_Klamann · April 27, 2009, 4:36pm

Hello all !

I try to show a piece of HTML stored in a local variable. The text shall
contain pictures and I thought that a simple solution would be to include
the images as a base64-encoded strings in the HTML like below.
My wxPython Frame shows the HTML-Text just fine, but both iewin.HtmlWindow
and html.HtmlWindow give me a broken Image symbol in the display.

Any hints ?

I read the WPIA book and it seems to indicate the the tag in itself is
supported. The wxPython demo shows images taken from a file which I wanted
to avoid to reduce runtime dependencies of the distributed Program

Thanks a lot

Norbert

···

--------
bla bla bla 
<img style="width: 112px; height: 24px;" alt="incredix logo"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAAYCAYAAAAiR3l8AAAABHNCSVQICAgIfAhkiAAAAAlw%0ASFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoA%0AAAXmSURBVGiB7ZppjF5TGMd/T9cpqotqSwnT2Eqri9JSpaZIESW2JmiIoA0qlkZ8ECJU1JIm%0AIghBItRSa6jGrlVdRDsdWls3S2kaaYh2Om2nnb8P53nNmTvnvjPDqzI1T3Jy7332e/7nnvOc%0A874miTZqvdTuv06gjf4ZtQHYyikNoNkpmM3G7LJdnM/uR2aG2Z2YzcFseMndJ9dAsxqgzJ9G%0AIS0od

--

driscollis · April 27, 2009, 5:27pm

Norbert Klamann wrote:

Hello all !

I try to show a piece of HTML stored in a local variable. The text shall
contain pictures and I thought that a simple solution would be to include
the images as a base64-encoded strings in the HTML like below.
My wxPython Frame shows the HTML-Text just fine, but both iewin.HtmlWindow
and html.HtmlWindow give me a broken Image symbol in the display.

Any hints ?

I read the WPIA book and it seems to indicate the the tag in itself is
supported. The wxPython demo shows images taken from a file which I wanted
to avoid to reduce runtime dependencies of the distributed Program

Thanks a lot

Norbert

You're probably looking for the img2py utility.

http://www.wxpython.org/docs/api/wx.tools.img2py-module.html

I have a brief tutorial of it here: http://www.blog.pythonlibrary.org/?p=34

However, I think the newer version's API is a little different. Check the generated py file and change your method calls as needed.

···

-------------------
Mike Driscoll

Blog: http://blog.pythonlibrary.org

Chris_Barker1 · April 27, 2009, 5:34pm

Norbert Klamann wrote:

include
the images as a base64-encoded strings in the HTML like below.
My wxPython Frame shows the HTML-Text just fine, but both iewin.HtmlWindow
and html.HtmlWindow give me a broken Image symbol in the display.

does IE display that html (with the embedded image) Ok if you put it in a file and point the regular old IE at it?

If not, it's not going to work with iewin.

Anyway, some googling seems to have revealed to me that "you can't do that":

Darn, I have a need for it to.

You can do a hack and essentially represent your image as a table with 1-pixel size blocks, but that's not very viable for large images.

With the wxHTMLWindow, you can embed GUI widgets, so you may be able to embed a wx.StaticBitmap.

I read the WPIA book and it seems to indicate the the tag in itself is
supported.

yes, but in HTML, the <img> tag takes a url as the source.

-Chris

···

--
Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Barker@noaa.gov

Kevin_Ollivier2 · April 27, 2009, 6:04pm

Hi Chris,

Norbert Klamann wrote:

include
the images as a base64-encoded strings in the HTML like below.
My wxPython Frame shows the HTML-Text just fine, but both iewin.HtmlWindow
and html.HtmlWindow give me a broken Image symbol in the display.

does IE display that html (with the embedded image) Ok if you put it in a file and point the regular old IE at it?

If not, it's not going to work with iewin.

Anyway, some googling seems to have revealed to me that "you can't do that":

http://www.dotnetjunkies.com/WebLog/warstar/archive/2006/04/17/136830.aspx

Darn, I have a need for it to.

You can do a hack and essentially represent your image as a table with 1-pixel size blocks, but that's not very viable for large images.

Well, if the browser supports overriding link handling, you can actually write code to parse the image, put it into a temporary file (with the right image extension, of course...), and then change the URL to that temp file. In wxWebKit, it would be the EVT_WEBVIEW_BEFORE_LOAD event. I haven't checked how or if iewin supports this, but it's probably somewhere in the API.

Regards.

Kevin

···

On Apr 27, 2009, at 10:34 AM, Christopher Barker wrote:

With the wxHTMLWindow, you can embed GUI widgets, so you may be able to embed a wx.StaticBitmap.

I read the WPIA book and it seems to indicate the the tag in itself is
supported.

yes, but in HTML, the <img> tag takes a url as the source.

-Chris

--
Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Barker@noaa.gov
_______________________________________________
wxpython-users mailing list
wxpython-users@lists.wxwidgets.org
http://lists.wxwidgets.org/mailman/listinfo/wxpython-users

Norbert_Klamann · April 27, 2009, 6:19pm

Christopher Barker schrieb:

Norbert Klamann wrote:

include
the images as a base64-encoded strings in the HTML like below.
My wxPython Frame shows the HTML-Text just fine, but both iewin.HtmlWindow
and html.HtmlWindow give me a broken Image symbol in the display.

does IE display that html (with the embedded image) Ok if you put it in a file and point the regular old IE at it?

If not, it's not going to work with iewin.

Darn, you are right. It shows up in FF though.

Anyway, some googling seems to have revealed to me that "you can't do that":

http://www.dotnetjunkies.com/WebLog/warstar/archive/2006/04/17/136830.aspx

That is bad news.

Darn, I have a need for it to.

You can do a hack and essentially represent your image as a table with 1-pixel size blocks, but that's not very viable for large images.

With the wxHTMLWindow, you can embed GUI widgets, so you may be able to embed a wx.StaticBitmap.

I read the WPIA book and it seems to indicate the the tag in itself is
supported.

yes, but in HTML, the <img> tag takes a url as the source.

or 'data' and that works fine in FF

···

-Chris

Norbert_Klamann · April 27, 2009, 6:25pm

Mike Driscoll schrieb:

Norbert Klamann wrote:

Hello all !

I try to show a piece of HTML stored in a local variable. The text shall
contain pictures and I thought that a simple solution would be to include
the images as a base64-encoded strings in the HTML like below.
My wxPython Frame shows the HTML-Text just fine, but both iewin.HtmlWindow
and html.HtmlWindow give me a broken Image symbol in the display.

Any hints ?

I read the WPIA book and it seems to indicate the the tag in itself is
supported. The wxPython demo shows images taken from a file which I wanted
to avoid to reduce runtime dependencies of the distributed Program

Thanks a lot

Norbert

You're probably looking for the img2py utility.

http://www.wxpython.org/docs/api/wx.tools.img2py-module.html

I am aware of this tool and use it to build some bitmaps

I have a brief tutorial of it here: http://www.blog.pythonlibrary.org/?p=34

I did read that but I don't see the connection to HTML presentation.

I could generate an image at development time, write it to a file at runtime and reference it then. Do you think along these lines ?

···

However, I think the newer version's API is a little different. Check the generated py file and change your method calls as needed.

-------------------
Mike Driscoll

Blog: http://blog.pythonlibrary.org

_______________________________________________
wxpython-users mailing list
wxpython-users@lists.wxwidgets.org
http://lists.wxwidgets.org/mailman/listinfo/wxpython-users

driscollis · April 27, 2009, 7:00pm

Norbert Klamann wrote:

Mike Driscoll schrieb:

Norbert Klamann wrote:

Hello all !

I try to show a piece of HTML stored in a local variable. The text shall
contain pictures and I thought that a simple solution would be to include
the images as a base64-encoded strings in the HTML like below.
My wxPython Frame shows the HTML-Text just fine, but both iewin.HtmlWindow
and html.HtmlWindow give me a broken Image symbol in the display.

Any hints ?

I read the WPIA book and it seems to indicate the the tag in itself is
supported. The wxPython demo shows images taken from a file which I wanted
to avoid to reduce runtime dependencies of the distributed Program

Thanks a lot

Norbert

You're probably looking for the img2py utility.

http://www.wxpython.org/docs/api/wx.tools.img2py-module.html

I am aware of this tool and use it to build some bitmaps

I have a brief tutorial of it here: http://www.blog.pythonlibrary.org/?p=34

I did read that but I don't see the connection to HTML presentation.

I could generate an image at development time, write it to a file at runtime and reference it then. Do you think along these lines ?

Just ignore me. I saw the mention of the frame object and thought you wanted to display a picture in that as well. I just read your post too quickly. The other guys make more sense.

Mike

Chris_Barker1 · April 27, 2009, 8:55pm

Norbert Klamann wrote:

yes, but in HTML, the <img> tag takes a url as the source.

or 'data' and that works fine in FF

Can you point me to any documentation for that? Anyway, it looks like a firefox extra feature, and not supported by wxHTML, which is what I really want.

-Chris

···

--
Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Barker@noaa.gov

Chris_Barker1 · April 27, 2009, 10:34pm

OK,

I've figured out a way to embed an image in an wxHtmlWindow, using entirely in-line data from the source code -- no external files temporary or otherwise.

What it does is embed a wxStaticBitmap, which is supported like any other wxWindow, using wx.lib.wxpTag.

However, it is pretty klunky: i am getting confused as to what namespace stuff is evaluated in, and I think the biggest issue, when is the "value" tag evaluated as python code, rather than passed in as a string.

This is what it seems I should be able to do:

where I ahve defined, in ImageInHtml:

StaticBitmap = wx.StaticBitmap
ID_ANY = wx.ID_ANY

but then I get:

TypeError: in method 'new_StaticBitmap', expected argument 3 of type 'wxBitmap const &'

which means getsmalltestBitmap() is getting passed as a string, rather than getting evaluated as python.

So instead, I made a custom class that already has the bitmap defined, and included that:

class Bitmap1(wx.StaticBitmap):
     def __init__(self, *args, **kwargs):
         bmp = getsmalltestBitmap()
         kwargs['bitmap'] = bmp
         wx.StaticBitmap.__init__(self, *args, **kwargs)

and in the HTML:

This works, as no parameters need to be passed. But is seems there should be a cleaner way.

test code attached.

-Chris

ImageInHtml.py (28.2 KB)

···

--
Christopher Barker, Ph.D.
Oceanographer

Emergency Response Division
NOAA/NOS/OR&R (206) 526-6959 voice
7600 Sand Point Way NE (206) 526-6329 fax
Seattle, WA 98115 (206) 526-6317 main reception

Chris.Barker@noaa.gov

Robin · April 27, 2009, 10:44pm

Norbert Klamann wrote:

Hello all !

I try to show a piece of HTML stored in a local variable. The text shall
contain pictures and I thought that a simple solution would be to include
the images as a base64-encoded strings in the HTML like below.
My wxPython Frame shows the HTML-Text just fine, but both iewin.HtmlWindow
and html.HtmlWindow give me a broken Image symbol in the display.

Any hints ?

I read the WPIA book and it seems to indicate the the tag in itself is
supported. The wxPython demo shows images taken from a file which I wanted
to avoid to reduce runtime dependencies of the distributed Program

Thanks a lot

Norbert
--------
bla bla bla 
<img style="width: 112px; height: 24px;" alt="incredix logo"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAAAYCAYAAAAiR3l8AAAABHNCSVQICAgIfAhkiAAAAAlw%0ASFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoA%0AAAXmSURBVGiB7ZppjF5TGMd/T9cpqotqSwnT2Eqri9JSpaZIESW2JmiIoA0qlkZ8ECJU1JIm%0AIghBItRSa6jGrlVdRDsdWls3S2kaaYh2Om2nnb8P53nNmTvnvjPDqzI1T3Jy7332e/7nnvOc%0A874miTZqvdTuv06gjf4ZtQHYyikNoNkpmM3G7LJdnM/uR2aG2Z2YzcFseMndJ9dAsxqgzJ9G%0AIS0od

I don't think that wx.html.HtmlWindow supports embedded images. However something that wx.html.HtmlWindow does support is loading things from an in-memory filesystem. Basically you load data into this memory FS giving it a name and then you can access that data from the html document using a "memory://filename" type of URL (if I remember correctly) and it will work exactly the same as if it was loading it from a file:// or http:// URL, since from HtmlWindow's perspective those are just other kinds of filesystem objects. See wx.MemoryFSHandler.AddFile.

···

--
Robin Dunn
Software Craftsman
http://wxPython.org Java give you jitters? Relax with wxPython!

Norbert_Klamann · April 28, 2009, 6:10am

Christopher Barker schrieb:

Norbert Klamann wrote:

yes, but in HTML, the <img> tag takes a url as the source.

or 'data' and that works fine in FF

Can you point me to any documentation for that? Anyway, it looks like a

This in german : Museum/Selfhtml-aktuell – SELFHTML-Wiki

But in principle you are right, the 'data' attribute seems to be nonstandard.

firefox extra feature, and not supported by wxHTML, which is what I really want.

-Chris

Norbert