Auto scale (up and or down)

Is there a way to code an auto scale up and or down feature for different screen sizes on a mobile device? I have tried

function windowResized() { resizeCanvas(windowWidth, windowHeight); }

doesn't seem to work.

I am building in Visual Studio 2015 with Cordova

Answers

  • None of these discussions are really getting at what I'm looking for. Thanks though.

  • Not exactly a trivial question and one that has been asked before (recently)...

    I'll see if I can throw a demo together.

  • Thanks. I look forward to it. Meanwhile I have been manipulating the device controls. I will post a solution if I find one.

  • Mess around with the integers till it feels right. This seems to do it combined with using displayWidth, displayHeight. Now I just need to figure out how to lock the canvas in landscape.

    Create AndroidManifest.xml in res/native/android

    <?xml version="1.0" encoding="utf-8"?>
    <manifest>
    <supports-screens android.resizeable="true"
                      android.smallScreens="true"
                      android.normalScreens="true"
                      android.largeScreens="true"
                      android.xlargeScreens="true"
                      android.anyDensity="true"
                      android.requiresSmallestWidthDp="1"
                      android.compatibleWidthLimitDp="2000"
                      android.largestWidthLimitDp="100"/>
    </manifest>
    
  • edited February 2016

    @0c00L - here's an initial proof of concept...

    Note this currently has a dependency on viewportSize. You'll have to manually paste in the source above the following demo code.

    I have some ideas of how this could be wrapped up into a helper script that would make it more useful; for e.g.:

    • pass baseWidth/Height as parameters (& store these in the function for later use)
    • when size changes also return the ratio between the previous and new size: you'll be wanting that to adjust any variables you need to keep relative to the sketch dimensions.
    • embed/incorporate any dependencies
        // include viewportSize dependency here...
        
        (function(n){
            n.getDim=function() {
            var baseWidth = 600;
            var baseHeight = 400;
            var ratioW2H = baseHeight/baseWidth;
        
            var windowWidth = viewportSize.getWidth();
            var windowHeight = viewportSize.getHeight();
        
            var adjustedHeight = windowWidth * ratioW2H;
        
            if(adjustedHeight > windowHeight) {
                adjustedHeight = windowHeight;
                windowWidth = windowHeight /ratioW2H;
            }
        
            return { w: windowWidth, h: adjustedHeight}
        }})(this);
        
        
        
        // sketch (instance mode)
        window.P$ = new p5(function (p) {
        
            var dim = getDim();
        
            p.setup = function () {
                p.createCanvas(dim.w, dim.h);
            };
        
            p.draw = function () {
                // just to shoe that something is happening
                p.background('#39d');
                // note that position and size are relative to the sketch dimensions
                p.ellipse(p.width/2, p.height/2, p.width/3,p.width/3);
            };
        
            p.windowResized = function() {
                dim = getDim();
                p.resizeCanvas(dim.w, dim.h);
            }
        
        }, "sketch01");
    
  • edited February 2016 Answer ✓

    Updated demo with some additional bells and whistles :)

    // copy paste dependency from :https://raw.githubusercontent.com/tysonmatanich/viewportSize/master/viewportSize-min.js
    
    // attach function to global context - normally window...
    (function(w){
        w.getDim = function(inputWidth, inputHeight) {
        // Store the initial values as properties of the function so it
        // can be called again without having to repeat the parameters.
        // Also provide option to change the aspect ratio...
        this.storedWidth = inputWidth || this.storedWidth;
        this.storedHeight = inputHeight || this.storedHeight;
    
        var update = (function() {
            // the stored value defines the desired ratio for the sketch
            var ratioW2H = this.storedHeight/this.storedWidth;
            // get current window dimensions
            //TODO: either remove or incorporate the viewportSize dependency into the code
            var windowWidth = viewportSize.getWidth();
            var windowHeight = viewportSize.getHeight();
            // calculate height based on window width and the desired ratio
            var adjustedHeight = windowWidth * ratioW2H;
            // check that the height fits within the window and adjust if necessary
            if(adjustedHeight > windowHeight) {
                adjustedHeight = windowHeight;
                windowWidth = windowHeight /ratioW2H;
            }
            // calculate the ratio compared to the original window size
            var    resizedRatio = windowWidth/this.storedWidth;
    
            return { w: windowWidth, h: adjustedHeight, ratio: resizedRatio};
        })();
    
        return update;
    }})(this);
    // - - - - - - - - - - - - - - - - - - - - - - //
    
    
    // sketch (instance mode)
    window.P$ = new p5(function (p) {
    
        // Set initial sketch size - this will of course be resized; but will
        // set the aspect ratio for the sketch.
        var dim = getDim(600, 400);
    
        // define variables so they're available globally within the sketch
        var diameter;
    
        // initialise these in a function so they can be reset on resize
        var initSketch = function() {
            diameter = 200 * dim.ratio;
        };
    
    
        p.setup = function () {
            p.createCanvas(dim.w, dim.h);
            initSketch();
        };
    
        p.draw = function () {
            p.background('#9d0');
            p.ellipse(p.width/2, p.height/2, diameter, diameter);
        };
    
        p.windowResized = function() {
            dim = getDim();
            // reset variables relative to the new size
            initSketch();
            p.resizeCanvas(dim.w, dim.h);
        };
    
    }, "sketch01");
    
  • Thanks @blindfish. I'll study this for fluency but as I started becoming more comfortable with Cordova, I found that it has many ways to mitigate problems such as screen size with ease. Visual Studio 2015 + Cordova = Unlimited power.

Sign In or Register to comment.