Re: [Sugar-devel] Web activities canvas element
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 > 2013/10/10 laurent bernabe : > > Hello, > > > > 2013/10/10 Manuel Quiñones > >> > >> 2013/10/9 laurent bernabe : > >> > Hello, > >> > > >> > *) I am wondering whether I can safely replace, in an index.html file > of > >> > a > >> > web activity, the > >> > ? > >> > > >> > Because the library I am using need a real canvas element. > >> > >> You just put your inside that . > > > > > > 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 .. > ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] Web activities canvas element
2013/10/10 laurent bernabe : > Hello, > > 2013/10/10 Manuel Quiñones >> >> 2013/10/9 laurent bernabe : >> > Hello, >> > >> > *) I am wondering whether I can safely replace, in an index.html file of >> > a >> > web activity, the >> > ? >> > >> > Because the library I am using need a real canvas element. >> >> You just put your inside that . > > > 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 .. ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] Web activities canvas element
I've checked at my screen size : it is a 16/9 1366x766.
Maybe that is why the width has not changed (and I was wrong, height was a
little less with my new json file).
Though, the XO-1 has a height of 900.
So, I don't know yet what could be the best "compromise" in my case.
Maybe trying with a resolution like 934x700
Regards
2013/10/10 laurent bernabe
> I've changed the prefs.json file, in order to set a resolution of 1200x900
> on HDMI1, but it does not seem to have changed anything.
>
> {
> "output": "HDMI1",
> "resolution": "1200x900"
> }
>
> Width still takes the whole screen width.
> Same for height.
>
> (I've stopped and restarted osbuild shell).
>
>
> 2013/10/10 laurent bernabe
>
>> Are you talking about options from this page :
>> http://developer.sugarlabs.org/dev-environment.md.html ?
>>
>> Regards
>>
>>
>> 2013/10/10 Daniel Narvaez
>>
>>> It might be helpful to change the sugar-runner window size, see the dev
>>> environment documentation on developer.sugarlabs.org
>>>
>>> On Thursday, 10 October 2013, laurent bernabe wrote:
>>>
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
> Hello,
>
> 2013/10/10 Manuel Quiñones
>
>> 2013/10/9 laurent bernabe :
>> > Hello,
>> >
>> > *) I am wondering whether I can safely replace, in an index.html
>> file of a
>> > web activity, the
>> > ?
>> >
>> > Because the library I am using need a real canvas element.
>>
>> You just put your inside that .
>>
>
> 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
>
>>>
>>> --
>>> Daniel Narvaez
>>>
>>>
>>
>
___
Sugar-devel mailing list
Sugar-devel@lists.sugarlabs.org
http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] Web activities canvas element
Yeah the resolution option. On Thursday, 10 October 2013, laurent bernabe wrote: > Are you talking about options from this page : > http://developer.sugarlabs.org/dev-environment.md.html ? > > Regards > > > 2013/10/10 Daniel Narvaez 'dwnarv...@gmail.com');>> > >> It might be helpful to change the sugar-runner window size, see the dev >> environment documentation on developer.sugarlabs.org >> >> On Thursday, 10 October 2013, laurent bernabe wrote: >> >>> 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 >>> Hello, 2013/10/10 Manuel Quiñones > 2013/10/9 laurent bernabe : > > Hello, > > > > *) I am wondering whether I can safely replace, in an index.html > file of a > > web activity, the > > ? > > > > Because the library I am using need a real canvas element. > > You just put your inside that . > 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 >>> >>> >> >> -- >> Daniel Narvaez >> >> > -- Daniel Narvaez ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] Web activities canvas element
I've changed the prefs.json file, in order to set a resolution of 1200x900
on HDMI1, but it does not seem to have changed anything.
{
"output": "HDMI1",
"resolution": "1200x900"
}
Width still takes the whole screen width.
Same for height.
(I've stopped and restarted osbuild shell).
2013/10/10 laurent bernabe
> Are you talking about options from this page :
> http://developer.sugarlabs.org/dev-environment.md.html ?
>
> Regards
>
>
> 2013/10/10 Daniel Narvaez
>
>> It might be helpful to change the sugar-runner window size, see the dev
>> environment documentation on developer.sugarlabs.org
>>
>> On Thursday, 10 October 2013, laurent bernabe wrote:
>>
>>> 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
>>>
Hello,
2013/10/10 Manuel Quiñones
> 2013/10/9 laurent bernabe :
> > Hello,
> >
> > *) I am wondering whether I can safely replace, in an index.html
> file of a
> > web activity, the
> > ?
> >
> > Because the library I am using need a real canvas element.
>
> You just put your inside that .
>
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
>>>
>>>
>>
>> --
>> Daniel Narvaez
>>
>>
>
___
Sugar-devel mailing list
Sugar-devel@lists.sugarlabs.org
http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] Web activities canvas element
Are you talking about options from this page : http://developer.sugarlabs.org/dev-environment.md.html ? Regards 2013/10/10 Daniel Narvaez > It might be helpful to change the sugar-runner window size, see the dev > environment documentation on developer.sugarlabs.org > > On Thursday, 10 October 2013, laurent bernabe wrote: > >> 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 >> >>> Hello, >>> >>> 2013/10/10 Manuel Quiñones >>> 2013/10/9 laurent bernabe : > Hello, > > *) I am wondering whether I can safely replace, in an index.html file of a > web activity, the > ? > > Because the library I am using need a real canvas element. You just put your inside that . >>> >>> 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 >>> >> >> > > -- > Daniel Narvaez > > ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] Web activities canvas element
It might be helpful to change the sugar-runner window size, see the dev environment documentation on developer.sugarlabs.org On Thursday, 10 October 2013, laurent bernabe wrote: > 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 'cvml', 'laurent.bern...@gmail.com');>> > >> Hello, >> >> 2013/10/10 Manuel Quiñones > 'ma...@laptop.org');>> >> >>> 2013/10/9 laurent bernabe >> 'cvml', 'laurent.bern...@gmail.com');>>: >>> > Hello, >>> > >>> > *) I am wondering whether I can safely replace, in an index.html file >>> of a >>> > web activity, the >>> > ? >>> > >>> > Because the library I am using need a real canvas element. >>> >>> You just put your inside that . >>> >> >> 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 >> > > -- Daniel Narvaez ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] Web activities canvas element
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 > Hello, > > 2013/10/10 Manuel Quiñones > >> 2013/10/9 laurent bernabe : >> > Hello, >> > >> > *) I am wondering whether I can safely replace, in an index.html file >> of a >> > web activity, the >> > ? >> > >> > Because the library I am using need a real canvas element. >> >> You just put your inside that . >> > > 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 > ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] Web activities canvas element
Hello, 2013/10/10 Manuel Quiñones > 2013/10/9 laurent bernabe : > > Hello, > > > > *) I am wondering whether I can safely replace, in an index.html file of > a > > web activity, the > > ? > > > > Because the library I am using need a real canvas element. > > You just put your inside that . > 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 ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] Web activities canvas element
Thanks, I'll watch at ClockWeb activity. Regards 2013/10/10 Manuel Quiñones > 2013/10/9 laurent bernabe : > > Hello, > > > > *) I am wondering whether I can safely replace, in an index.html file of > a > > web activity, the > > ? > > > > Because the library I am using need a real canvas element. > > You just put your inside that . > > > *) 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/ > > -- > .. manuq .. > ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
Re: [Sugar-devel] Web activities canvas element
2013/10/9 laurent bernabe : > Hello, > > *) I am wondering whether I can safely replace, in an index.html file of a > web activity, the > ? > > Because the library I am using need a real canvas element. You just put your inside that . > *) 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/ -- .. manuq .. ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
[Sugar-devel] Web activities canvas element
Hello, *) I am wondering whether I can safely replace, in an index.html file of a web activity, the ? Because the library I am using need a real canvas element. *) 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). Regards ___ Sugar-devel mailing list Sugar-devel@lists.sugarlabs.org http://lists.sugarlabs.org/listinfo/sugar-devel
