How to determine xscale and yscale programmatically in openlaszlo for different aspect ratios?

Question

I had some problem with stretching the views so finally i used xscale and yscale to scale the view. This problem is solved in my machine which has a resolution

canvas.width -1280
canvas.height - 1023

in a full screen mode.

But when i check the same in my friends machine whose

canvas.width -1280
canvas.height - 697

in full screen mode part of the screen is getting cut.

The current scaling factor i have given is xscale = 1.33 and yscale = 1.33. The yscale should be changed in order to fit the second system. How to determine this factor programmatically.

Answer 1

Here is an example code which shows you how to scale a view based on a ratio. The ratio is defined by the unscaledwidth and unscaledheight attributes. There is no implementation for minimum width or minimum height, but it's easy to add that, if you need it.

The disadvantage of this approach is that all the resources will be scaled. In the SWF runtime the resources for the default components are vector based, in the DHTML runtime they are converted to PNG files, and wont look very crisp when scaled. I'd normally not scale the existing OpenLaszlo components, but that's your decision:

<canvas width="100%" height="100%">
<!-- OpenLaszlo scaled view example by Raju Bitter -->

    <class name="scaledview">
        <attribute name="unscaledwidth" type="number" value="400"/>
        <attribute name="unscaledheight" type="number" value="300"/>
        <attribute name="wratio" type="number" value="${this.unscaledwidth/this.unscaledheight}"/>

        <handler name="oninit">
            this.setAttribute("width", this.unscaledwidth)
            this.setAttribute("height", this.unscaledheight)
            this._setSize();
        </handler>
        <handler name="onwidth" reference="canvas">
            this._setSize();
        </handler>
        <handler name="onheight" reference="canvas">
            this._setSize();
        </handler>
        <method name="_setSize">
            var scale = 1.0;
            if (canvas.width/canvas.height > this.wratio) {
                scale = canvas.height / this.unscaledheight;
                this.setAttribute("x", Math.round((canvas.width-this.width*scale) / 2));
                this.setAttribute("y", 0);
            } else {
                scale = canvas.width / this.unscaledwidth;
                this.setAttribute("x", 0);
                this.setAttribute("y", Math.round((canvas.height-this.height*scale) / 2));
            }
            this.setAttribute("xscale", scale);
            this.setAttribute("yscale", scale);
        </method>
    </class>

    <scaledview id="sv" bgcolor="red">
       <window width="200" height="100" title="Just a window!" align="center" valign="middle"/>
    </scaledview>

    <view>
        <simplelayout axis="y" />
        <text fontsize="12"
              text="${'canvas: ' + canvas.width + ' * ' + canvas.height + '  ratio=' + (canvas.width/canvas.height)}"/>
        <text fontsize="12"
              text="${'scaledview: ' + sv.width + ' * ' + sv.height + '  ratio=' + sv.wratio}" />
        <text fontsize="12"
              text="${'scaledview: xscale=' + sv.xscale + ' / yscale=' + sv.yscale}" />
    </view>

</canvas>

Check the screenshot of the application, where you can see the red <scaledview> scaled based on the ratio defined. The window component will grow and shrink in size with increasing or decreasing canvas resolution.