[Sugar-devel] WebActivity : Resizing a canvas object to the screen size ?

[laurent bernabe]

I've solved my problem by integrating JQuery, thanks to the Shim section of
RequireJS, and by calling it in activity.js

=> loader.js

__________________________________
shim: {
        ...
        jquery: {
            exports: 'jquery'
        }
    },
    paths: {
        ...
        jquery: 'jquery'
    }
__________________________________


activity.js

______________________________
...
var $ = require('jquery');
...
var canvas = doc.getElementById('gameZone'), // gameZone is a canvas
element inside the canvas dim, without any dimension set
            stage = new createjs.Stage(canvas),
            toolbar_height = $('.toolbar').height(),
            win_dim = new Array($(window).width(), $(window).height()),
            gameZone_dim = new Array(win_dim[0], win_dim[1]-toolbar_height);

        $("#canvas").css("overflow", "hidden");
        $("#gameZone").width(gameZone_dim[0]);
        $("#gameZone").height(gameZone_dim[1]);
_______________________________

Regards.


2014-01-26 laurent bernabe <laurent.bernabe at gmail.com>

> Hello everyone,
>
> Some times ago, I've asked how to deal with the fact that my laptop screen
> size is rather 16/9 than a 4/3 size. And I was, among other advises,
> advised to adapt the game size to the screen size.
> I am conviced that it the way to do : but how to get the client size from
> inside my activity.js ? (Client size : I mean, in the height dimension,
> when we remove the toolbar, of course)
>
> Indeed, this involve computing the toolbar height, which is different for
> each version of the activity css file, and of course the whole screen size.
> But, for both task, I don't know how to do.
>
> Could someone point me to a good article/tutorial :
>
>    - in order to fetch a css property (Maybe should I add minified JQuery
>    to the libs, so that it can be easier) ?
>    - in order to compute screen size ?
>
> Regards
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.sugarlabs.org/archive/sugar-devel/attachments/20140126/1b0dc333/attachment.html>