ASNA Mobile RPG® Reference Manual

5250 Terminal Resizing

<script type="text/javascript">
   WingsTerminal.render({"width": 960,"height": 720});
</script>

The WingsTerminal.render function takes one parameter, which can be either:

1. An object with two properties: width and height (see fixed size below). These properties have numeric values (in pixels) representing the size of the <div> where the 5250 screen will be presented. Given the size in pixels, an appropriate font height will be selected to show exactly the number of rows contained in the 5250 screen (24 or 27, depending on the Terminal's screen size).
   Or,
2. A function that will be called by the Emulator's rendering engine whenever the current size is required to paint the page.

Setting a Fixed Size

Setting the Terminal Emulation window to a static size is quite simple: If the WingsTerminal.Render function is passed an unnamed object, by simply listing the height and width properties using the JavaScript syntax, the render will dynamically create an object, like in the following example:

WingsTerminal.render({"width": 960, "height": 720});

To figure out the pixel dimensions of the <div> where you want the Terminal to be rendered, you can either use the Internet Explorer's Developer tools "ruler" feature and measure the width and height visually, or use JavaScript code to compute the dimensions. If you are using jQuery (available for free), you may use the width() method to get the width of the <div>, and use a width-to-height ratio factor to compute the height. For example, assuming that the<div> in your Master Page where the Terminal wll be rendered is named "content", the following parameter may be passed:

WingsTerminal.Render( { "width": $("#content").width(), "height": $("#content").width() * 0.75 } ); // 4:3 ratio

Setting an Adjustable Size

To configure the display size to change with the size of the Browser's Window size, you can pass a function to the Render function, so that it is called each time the size of the Browser's Window changes.

For example, assuming that you are using jQuery library, you may want to compute a new size such that the Terminal DIV grows or shrinks as the Browser Window resizes. This confuguration will change the font height to adjust according to the available real-state that the Browser provides as it changes size. A full-screen Browser Window will give you a very nice font size making it easy to read text.

Assume that you want to preserve a 4:3 ratio, giving you the propertions of the IBM Terminal.

Lastly, assume that the name of the <div> container is "content".

The technique used consists of computing the design-time width proportions in relation to the Browser's Window width measurement, and as the size changes, maintain those proportions, given the illusion that the user is actually changing the size of the Terminal, to change the text font height. As for the DIV's height, the proportion maintained from the start is 75% of its width (or 4:3 ratio).

First, compute the current width of the Browser's window:

var browserWidth = $(window).width();

Next, set the proportion of the design-time width of the terminal in relation to the current Browser's width:

window.resizeWidthPercent = ( $("#content").width() * 100.0 ) / browserWidth;

The computed width and height will always be:

var newWidth  = (window.resizeWidthPercent * browserWidth) / 100.0;
var newHeight = newWidth  * 0.75; // 4:3 ratio.

To put it all together:

WingsTerminal.Render( function () {
            var browserWidth = $(window).width();

            if (typeof (window.resizeWidthPercent) === 'undefined') { // First time (design-time proportion)
                window.resizeWidthPercent = ($("#content").width() * 100.0) / browserWidth;
            }

            var newWidth = (window.resizeWidthPercent * browserWidth) / 100.0;

            $("#content").width(newWidth); // Adjust width of container(s) - avoid clipping

            return { "width": newWidth, "height": newWidth * 0.75 };
        });

These settings can be further tweaked to improve user experience. for example by setting a minimum size for the Terminal window, to prevent using font sizes that are too small to read. You can do so by adding code similar to:

        if ( newWidth < 200 ) {
           newWidth = 200;
        }

immediately before adjusting the width of the object. The complete call would look like:

       WingsTerminal.Render(function () {
            var browserWidth = $(window).width();

            if (typeof (window.resizeWidthPercent) === 'undefined') { // First time (design-time proprtion)
                window.resizeWidthPercent = ($("#content").width() * 100.0) / browserWidth;
            }
            var newWidth = (window.resizeWidthPercent * browserWidth) / 100.0;

            if (newWidth < 200) {
                newWidth = 200;
            }
            $("#content").width(newWidth); // Adjust width of container(s) - avoid clipping
            return { "width": newWidth, "height": newWidth * 0.75 };
        });

See Also

Keyboard Mapping

Keyboard Macros

Customizing the Terminal Branding

Terminal Error Codes

Terminal Menus