[Sugar-devel] Web activities canvas element

[laurent bernabe]

Hello Manuel,

thanks for your answer,
I forgot that javascript also can control width and height of the page,
behind the scene.

What I tried in my LearnChess activity (which I started as a web activity
and finally went on with a GTK one), is to reuse one the predefined screen
css media (inside a folder like lib/sugar-web/css), but without screen size
limitation. Maybe that is an horrible practise, but this is what I tried.

Regards


2013/10/17 Manuel Quiñones <manuq at laptop.org>

> 2013/10/10 laurent bernabe <laurent.bernabe at gmail.com>:
> > Hello,
> >
> > 2013/10/10 Manuel Quiñones <manuq at laptop.org>
> >>
> >> 2013/10/9 laurent bernabe <laurent.bernabe at gmail.com>:
> >> > Hello,
> >> >
> >> > *) I am wondering whether I can safely replace, in an index.html file
> of
> >> > a
> >> > web activity, the <div id="canvas></div> with <canvas
> >> > id="canvas"></canvas>
> >> > ?
> >> >
> >> > Because the library I am using need a real canvas element.
> >>
> >> You just put your <canvas> inside that <div>.
> >
> >
> > I've put my canvas element inside the #canvas div and it worked.
> >
> >>
> >>
> >> > *) Also, if I can use a real canvas element, how can set its size to
> the
> >> > remaining size of the screen ? (As my laptop has a wider screen than
> XO
> >> > ones).
> >>
> >> It's possible by connecting to the window resize event in JS.  You can
> >> see an example in Clock Web activity.
> >>
> >> https://github.com/manuq/clock-web
> >> http://manuq.github.io/clock-web
> >
> >
> >
> > Wouldn't be simpler to use CSS instead ? I've seen that there are two css
> > media added in the index.html, which seem to do what I am waiting for
> > (#canvas => width:100%, overflow-y: auto, and top: 75px), but it seem
> that
> > none are used. (Canvas lays at top = 0 px and left = 0px, width is about
> > 300px ...)
>
> I just tried changing Clock Web to make the canvas element fill the
> available space.  It didn't work.  Althrough the CSS effectively makes
> the canvas fill the space, the width and height values are fixed if
> you read them from JavaScript.  And in Clock all drawn elements depend
> on that size.  Like the hands, the face, etc.
>
> > Regards
>
>
>
> --
> .. manuq ..
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sugarlabs.org/archive/sugar-devel/attachments/20131017/0aeb4ac9/attachment.html>