HTML Canvas snippet, please

27 views
Skip to first unread message

NAV

unread,
Nov 26, 2010, 2:12:54 PM11/26/10
to O3D-discuss
Hi everyone,
I finally started my work porting my plugin code to the webgl version,
and immediately encountered a problem with Canvas - it's not supported
in the webgl version of O3D. The only thing that I needed from the
plugins' Canvas was text drawing. I.e., I used to create an XYQuad
(canvasLib.createXYQuad) and then just called
XYQuad.canvas.drawText(...) (appended with XYQuad.updateTexture()).
Could anyone please provide here a little snippet on how to draw text
on an O3D view with HTML Canvas (or with something else)?
Thanks in advance,

Alexander :o)

Dave

unread,
Dec 2, 2010, 11:53:22 PM12/2/10
to O3D-discuss
Hi,

The forums had been really quiet these days.

Not sure why would you want to do that since you can overlay HTML divs
on 3D view now, I got some good result using this method in my
annotation prototype. The prototype itself is unfinished and there are
a lot of features yet to be implement. But it is quite easy to overlay
HTML text on 3D object now.

You can have a look an see what I meant (currently only works in
Chrome, remember to zoom out after the model is loaded)
http://maenad-yu.cloud.itee.uq.edu.au/3dsa/service.html?modelID=0007_Head&res=low


Regards,
Dave

NAV

unread,
Dec 7, 2010, 8:58:55 PM12/7/10
to O3D-discuss
Thanks, Dave,
Wow! That's a cool application you have there!

Answering your question: I have special requirements - my O3D view
must occupy entire window/screen (screen estate is very important).
I.e. I cannot just dedicate some vertical or/and horizontal panels for
a number of different info messages, labels, buttons and other UI
elements, they must be overlayed on top of the O3D view. With plugin I
used to place a number of transparent Canvas objects over some areas
of screen and used drawText to output my text messages there. And
since the plugin-Canvas object was indifferent to the mouse events, I
could mouse-interact with my underlying 3D model through those areas.
With HTML Canvas everything is different: it absorbs all mouse events,
so users will be very confused finding that some areas (far from the
text) of the scene can be controlled with mouse, but some (around the
text) cannot.

Do you know how to pass mouse events down to the underlying view?

Thanks,
Alexander :o)


On Dec 2, 11:53 pm, Dave <doomtemp...@yahoo.com.tw> wrote:
> Hi,
>
> The forums had been really quiet these days.
>
> Not sure why would you want to do that since you can overlay HTML divs
> on 3D view now, I got some good result using this method in my
> annotation prototype. The prototype itself is unfinished and there are
> a lot of features yet to be implement. But it is quite easy to overlay
> HTML text on 3D object now.
>
> You can have a look an see what I meant (currently only works in
> Chrome, remember to zoom out after the model is loaded)http://maenad-yu.cloud.itee.uq.edu.au/3dsa/service.html?modelID=0007_...

Nicolas Kassis

unread,
Dec 8, 2010, 10:19:11 AM12/8/10
to o3d-d...@googlegroups.com
The click event issue is something that was introduced a few months
back in the code. You can prevent O3D from taking over the mouse
events by I believe giving selectable as an optional feature to the
makeClient function or change line 268-269 of o3djs/webgl.js.

canvas.onselectstart = returnFalse;
canvas.onmousedown = returnFalse;

You can just comment them out.

Nic

> --
> You received this message because you are subscribed to the Google Groups "O3D-discuss" group.
> To post to this group, send email to o3d-d...@googlegroups.com.
> To unsubscribe from this group, send email to o3d-discuss...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/o3d-discuss?hl=en.
>
>

--
-----------------
Nicolas Kassis

NAV

unread,
Dec 9, 2010, 11:12:46 AM12/9/10
to O3D-discuss
Hi Nicolas,
I tried the suggested changes (commenting out the 2 lines in o3djs/
webgl.js) and found them not working properly (it actually works in a
very weird way scrolling entire O3D view with my mouse down+move!).
The only thing that I found - in my version of the o3djs/webgl.js file
(from Aug 29, -> http://code.google.com/p/o3d/source/browse/trunk/samples_webgl/o3djs/webgl.js)
I have only 237 lines in this file, and the two lines that you
mentioned as numbers 268-269 are actually numbers 227-228 here. This
suggests you use different version of the file (and the webgl
library).

Could you please send me the latest version of the WebGL library (via
email or - even better - make it available via SVN)?

Thanks in advance,

Yours,
Alexander :o)
> > For more options, visit this group athttp://groups.google.com/group/o3d-discuss?hl=en.
>
> --
> -----------------
> Nicolas Kassis

NAV

unread,
Dec 10, 2010, 12:55:17 PM12/10/10
to O3D-discuss
OK, guys, I finally figured out how to make your HTML Canvas
transparent for mouse events.
Here is a little code snippet from a constructor function of my class
responsible for text output.

this.canvas = document.createElement('canvas');

function propagateEvent(eventParams, eventName) {
var handlerSet = g_clientElement.o3d_eventRegistry[eventName];
if (handlerSet) {
for (var indx in handlerSet) {
var handler = handlerSet[indx];
handler(eventParams);
}
}
return false;
}

function MouseDown(event) {
return propagateEvent(event, 'mousedown');
}

function MouseUp(event) {
return propagateEvent(event, 'mouseup');
}

function MouseMove(event) {
return propagateEvent(event, 'mousemove');
}

this.canvas.onmousedown = MouseDown;
this.canvas.onmouseup = MouseUp;
this.canvas.onmousemove = MouseMove;

g_clientElement is the one that you get as a parameter in your
initStep2 function.

Alexander :o)


On Dec 9, 11:12 am, NAV <alexanderneshmo...@gmail.com> wrote:
> Hi Nicolas,
> I tried the suggested changes (commenting out the 2 lines in o3djs/
> webgl.js) and found them not working properly (it actually works in a
> very weird way scrolling entire O3D view with my mouse down+move!).
> The only thing that I found - in my version of the o3djs/webgl.js file
> (from Aug 29, ->http://code.google.com/p/o3d/source/browse/trunk/samples_webgl/o3djs/...)
Reply all
Reply to author
Forward
0 new messages