Offline web terminal example usage

In this blog we will show how to use Green Screens Web Terminal in offline mode. The main question is why would we use terminal in offline mode?

Actually, there is more than one answer...

• to create web terminal software showcase and publish it online
• to create interactive terminal software tutorial
• to create terminal software online documentation
• to use for offline testing of A-HLL automation tasks like screen recognition etc...

Before we can use offline web terminal, we have to get terminal screen data somehow. We can prepare screen data for offline use manually or through A-HLL API. This time we will describe manual mode through browser debug console.

Basic steps are:

• Open active web terminal
• Open browser development console
• Store active screen data with Tn5250.Commander.appendScreen();
• When all desired screens are cached, get screen data with Tn5250.Commander.getCache();
• Save cached data locally as a JSON document
• Create page with IFRAME embedded web terminal at specific URL address http://[YOUR_SERVER]/lite/?d=0&k=0
• Load cached screen data with AJAX or embed it into web page / JavaScript file.
• Render single screen with Tn5250.Application.updateUI(data);
• Attach keypress events to handle screen requests to enable navigation between other cached screens data.

Commands to handle screen cache data:

• Tn5250.Commander.appendScreen(); - store current screen
• Tn5250.Commander.getCache(); - get cached screen data
• Tn5250.Commander.clearCache(); - clear all cached screens

In order to use web terminal without backend connection initialization use web terminal URL address with zeroed URL parameters.

http://[YOUR_SERVER]/lite/?d=0&k=0

For example: http://localhost:8080/lite/?d=0&k=0

When handling offline data, raw binary array from stored JSON have to be converted into Uint8Array. Here is an example...

var data = new Uint8Array([...]);
Tn5250.Application.updateUI(data);
Tn5250.Application.updateUI(data);
console.clear();

Here is real offline demo Teaser embedded in this page and code we used to render web terminal.

$(document).ready(function () {

   // here goes raw screen data
   var raw = [
     [...],
     [...]
   ];

    // parse URL hashtag to get proper screen data array index
    var el = parseInt(location.hash.slice(1));
    if (!(typeof el === 'number' && el < raw.length)) {
      el = 1;
    }
    
    // render screen data
    var data = new Uint8Array(raw[el]);
    Tn5250.Application.updateUI(data);
    Tn5250.Application.updateUI(data);
   
});

To see it in full screen, open our offline demoTeaser or to switch to another screen by index try this one.