[Sugar-devel] Web activities canvas element

[laurent bernabe]

Otherwise,

I thought, as my laptop may have wider screen than OLPC, I can try to
restrict the activity zone (toolbar + canvas zone) with css (even if that
task can be hard) and have it centered on my screen. And maybe add a bit of
Javascript in order to restrict mouse interaction to the "emulated zone".

Maybe that can be silly, but at least, I will "have a screen" close to the
real XO, and a more realistic result.

Regards


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 ...)
>
> Regards
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sugarlabs.org/archive/sugar-devel/attachments/20131010/358a8b13/attachment.html>