Creating an image with Javascript

[bwucke]

I need a way to create a picture with Javascript. I know the default
answer is "impossible", but I also know there are hacks and
workarounds, and I'm interested in these.

The particular situation is very specific:
an embedded device is to export screenshots of its own screen:
240x128px in 1-bit "color depth".
The device communicates using AJAX with JSON, it's up to me to choose
what content the JSON is to contain.
The client is to receive the data and display it (then send a click
event to the device, but I can do that)
It doesn't have to be extremely cross-platform (we can get the
operator to use a specific browser and specify minimum system
requirements, though we'd prefer not to).
Due to the number and variety of information that may appear on the
screen, implementing it as HTML replacement to the original
touchscreen interface is not entirely plausible.

I think there was some way to create XBMs on the fly, and there's
always the data: URIs, and if everything else fails, I can create a
240x128 HTML table with 1px cells and change background colors or
place absolute-positioned DIVs.

What are your suggestions? BTW, could you recommend some documentation
of that XBM trick?

 

[David Mark]

I need a way to create a picture with Javascript. I know the default
answer is "impossible", but I also know there are hacks and
workarounds, and I'm interested in these.

You can do virtually anything with Javascript.

The particular situation is very specific:
an embedded device is to export screenshots of its own screen:
240x128px in 1-bit "color depth".
The device communicates using AJAX with JSON, it's up to me to choose
what content the JSON is to contain.
Okay.

The client is to receive the data and display it (then send a click
event to the device, but I can do that)

I don't follow this at all. What is "the client?"

It doesn't have to be extremely cross-platform (we can get the
operator to use a specific browser and specify minimum system
requirements, though we'd prefer not to).

So there is a browser involved. It doesn't sound as if you
necessarily need one though.

Due to the number and variety of information that may appear on the
screen, implementing it as HTML replacement to the original
touchscreen interface is not entirely plausible.

The device exports screen shots of a touch screen interface?

I think there was some way to create XBMs on the fly, and there's

Yes. But I am not sure how that helps you here.

always the data: URIs, and if everything else fails, I can create a
240x128 HTML table with 1px cells and change background colors or
place absolute-positioned DIVs.

That doesn't make any sense. Is your question how to serialize an
image in JSON?

What are your suggestions? BTW, could you recommend some documentation
of that XBM trick?

Try Google. There are examples out there. IIRC, one is a 3-D maze
game.

 

[bwucke]

You can do virtually anything with Javascript.

try UDP communication or reading the value of a pixel of an image in
the page.
Javascript is heavily sandboxed. There's a lot of things impossible
simply due to lacks of API.

I don't follow this at all.  What is "the client?"

In this context, a web browser. There will be a dedicated application
too, separately, but that's beyond the scope of this question.

So there is a browser involved.  It doesn't sound as if you
necessarily need one though.

Not really - the purposes of the two are different - same JSON API,
but the app is used to drive and synchronize multiple devices working
as a network, lots of communication, running 24/7, and unlikely to use
the "access to touchscreen" feature. The browser is to monitor and
change operation parameters of individual devices by an operator, by
hand (once a week or so.)

The device exports screen shots of a touch screen interface?

Yes, amongst all. It also exports a lot of other data and provides
quite a bit of control over AJAX, but the touchscreen UI is to be
accessible over the net as well. Not only replicating all the
functions and interfaces in HTML would be hell (due to sheer amount of
them), it's a marketing thing as well.

That doesn't make any sense.  Is your question how to serialize an
image in JSON?

....or I can send raw data through JSON and create the image client-
side.
The devices have quite enough work of their own, converting data to
some advanced, computationally heavy image format on them is not
really welcome, while they will be getting quite a bit of bandwidth,
so I'd prefer to move all unnecessary work onto the client side.

Try Google.  There are examples out there.  IIRC, one is a 3-D maze
game.

That was Canvas. Yet another option for discussion.

 

[David Mark]

try UDP communication or reading the value of a pixel of an image in
the page.

No problem.

Javascript is heavily sandboxed. There's a lot of things impossible
simply due to lacks of API.

You are confusing the language with the host environment. In IE, for
example, you can instantiate ActiveX objects, start programs, etc., so
you can do anything you want. You can do the same with WSH.

In this context, a web browser. There will be a dedicated application
too, separately, but that's beyond the scope of this question.
Okay.


Not really - the purposes of the two are different - same JSON API,
but the app is used to drive and synchronize multiple devices working
as a network, lots of communication, running 24/7, and unlikely to use
the "access to touchscreen" feature. The browser is to monitor and
change operation parameters of individual devices by an operator, by
hand (once a week or so.)

I'm not sure I follow what you are doing.

Yes, amongst all. It also exports a lot of other data and provides
quite a bit of control over AJAX, but the touchscreen UI is to be
accessible over the net as well. Not only replicating all the
functions and interfaces in HTML would be hell (due to sheer amount of
them), it's a marketing thing as well.
Okay.


...or I can send raw data through JSON and create the image client-
side.

Sounds like a better option.

The devices have quite enough work of their own, converting data to
some advanced, computationally heavy image format on them is not
really welcome, while they will be getting quite a bit of bandwidth,
so I'd prefer to move all unnecessary work onto the client side.
Okay.


That was Canvas. Yet another option for discussion.

No. The one I am thinking of was not done with Canvas. It generated
bitmaps. Regardless, I would use an ActiveX object (or command line
program) to create the images.

 

[Jorge]

I think there was some way to create XBMs on the fly, and there's
always the data: URIs, and if everything else fails, I can create a
240x128 HTML table with 1px cells and change background colors or
place absolute-positioned DIVs.

How often does it have to refresh the image ?
Because updating a table so big (240*128= 30720 cells) isn't blazingly
fast, not even at 128*64= 8192 cells.
But it looks pretty nice: <http://jorgechamorro.com/cljs/028/>

 

[JR]

Hi,
This code really creates a gif on browser screen using only javascript
(works with FF 3):

http://shiftingpixel.com/downloads/greasedlightbox.user.js

Take a close look to line that begins with:

var loadingGif = document.createElement('img');
loadingGif.src = "data:image/gif,GIF89a%80%00%80%00%A2%00%00%FF%FF%FF
%DD%DD%DD%BB%BB%BB%99%99%99%00%00%FF%00%00%00%00%00%00%00%00%00!%FF
%0BNETSCAPE2."+
etc.

Joao Rodrigues

 

[Jorge]

Hi,
This code really creates a gif on browser screen using only javascript
(works with FF 3):

http://shiftingpixel.com/downloads/greasedlightbox.user.js

Take a close look to line that begins with:

var loadingGif = document.createElement('img');
loadingGif.src = "data:image/gif,GIF89a%80%00%80%00%A2%00%00%FF%FF%FF
%DD%DD%DD%BB%BB%BB%99%99%99%00%00%FF%00%00%00%00%00%00%00%00%00!%FF
%0BNETSCAPE2."+
etc.

Are you sure ? All I see there is a (spinner) gif encoded as a
data:URI.

<http://software.hixie.ch/utilities/cgi/data/data>

 

[JR]

Hi Jorge,
The code actually does not create - not in the literal sense -, but
indeed assigns the image binaries to the 'src' attribute of the img
element. In a figurative sense, the code "creates" an image "on the
fly". This possibility in FF3 was unknown for me until recently.
Unfortunately, that kind of assignment doesn't work on IE 7 and
therefore is very specific for some user's need.

Kind regards and Happy New Year,
Joao Rodrigues