Advanced Web Terminal Programming

by Green Screens Ltd.

This time we will show you some interesting tips to play with and to tickle your imagination.

Get terminal screen for offline use

Every 5250 Web Terminal screen can be extracted and reused later for offline use.

To do that open browser developer console at active terminal by focusing on address bar and pressing F12.

In developer console execute following

JSON.stringify(Array.from(Tn5250.Application.getScreen()));

Copy printed text, part between apostrophes.

Now, one can open blank offline terminal with following URL...

http://localhost:9080/lite?d=0&k=0

From developer console render saved screen data

var x = [17,2,24,80,6,17,1,0,0,0,0,0,53,69,65,68,70,49,67,48,69,49,70,57,54,69,51,57,69,65,52,70,55,53,69,54,49,55,54,51,49,69,57,51,55,52,49,66,65,53,51,65,54,55,51,53,50,52,56,49,56,51,66,67,48,53,52,57,52,57,67,69,50,52,54,66,53,50,69,50,56,50,55,69,69,56,53,50,65,53,56,54,8,0,16,32,1,1,160,0,1,0,16,0,5,0,30,0,30,0,16,0,1,1,240,0,2,0,16,0,6,0,30,0,30,0,16,0,1,2,64,0,3,0,16,0,7,0,30,0,30,0,16,0,1,2,144,0,4,0,16,0,8,0,30,0,30,0,16,0,1,2,224,0,5,0,16,0,9,0,30,0,30,0,16,0,1,3,48,0,6,0,16,0,10,0,30,0,30,0,16,0,1,3,128,0,7,0,16,0,11,0,30,0,30,0,16,0,1,3,208,0,8,0,16,0,12,0,30,0,30,0,32,0,84,0,79,0,77,0,32,0,32,0,32,0,32,0,32,0,32,0,32,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,50,0,68,0,69,0,77,0,79,0,32,0,83,0,67,0,82,0,69,0,69,0,78,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,51,0,48,0,47,0,49,0,49,0,47,0,49,0,55,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,49,0,55,0,58,0,48,0,55,0,58,0,51,0,57,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,70,0,73,0,69,0,76,0,68,0,49,0,32,0,0,0,0,0,0,0,32,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,79,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,70,0,73,0,69,0,76,0,68,0,50,0,32,0,0,0,0,0,0,0,32,0,54,0,54,0,54,0,54,0,54,0,54,0,54,0,54,0,54,0,54,0,54,0,54,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,70,0,73,0,69,0,76,0,68,0,51,0,32,0,0,0,0,0,0,0,36,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,70,0,73,0,69,0,76,0,68,0,52,0,32,0,0,0,0,0,0,0,36,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,70,0,73,0,69,0,76,0,68,0,53,0,32,0,0,0,0,0,0,0,36,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,70,0,73,0,69,0,76,0,68,0,54,0,32,0,0,0,0,0,0,0,36,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,70,0,73,0,69,0,76,0,68,0,55,0,32,0,0,0,0,0,0,0,36,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,70,0,73,0,69,0,76,0,68,0,56,0,32,0,0,0,0,0,0,0,36,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,70,0,73,0,69,0,76,0,68,0,57,0,32,0,0,0,0,0,0,0,36,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,32,0,70,0,73,0,69,0,76,0,68,0,65,0,32,0,0,0,0,0,0,0,36,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,66,0,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,48,0,0,0,11,0,33,0,45,0,69,0,78,0,149,0,158,0,244,0,251,0,255,1,20,1,68,1,75,1,79,1,92,1,148,1,155,1,159,1,190,1,228,1,235,1,239,2,14,2,52,2,59,2,63,2,94,2,132,2,139,2,143,2,174,2,212,2,219,2,223,2,254,3,36,3,43,3,47,3,78,3,116,3,123,3,127,3,158,3,196,3,203,3,207,3,238];

Tn5250.Application.test(x);

And now you can play with offline screens.
This can be used to create tutorial or demo screens like we did for our Teaser Demo here

Click here to open demo playground.

Advanced Screen Styling

Standard 5250 Terminal is limited in many ways. One of them is basic colors and blinking statuses available only for red fields. With 5250 Web Terminal we can overcome this easily.

If you executed previous sample in offline mode or within our playground environment, you should see Terminal demo screen.

Now, let's change some colors and add some blinks.

// clear color - will reset to mono (default is green)
Tn5250.GUI.toggleClass(4, 69, 10, 'turq-cs');

// set text color to white
Tn5250.GUI.toggleClass(4, 69, 10, 'white');

// reset to initial state in one strike
Tn5250.GUI.toggleClass(4, 69, 10, 'turq-cs white');

// convert text to white text, red blinking background 
Tn5250.GUI.toggleClass(4, 69, 10, 'turq-cs white red-hi-rv blink');

// repeat last to reset to inital state
Tn5250.GUI.toggleClass(4, 69, 10, 'turq-cs white red-hi-rv blink');

// set blue reverse blinking
Tn5250.GUI.toggleClass(4, 69, 10, 'turq-cs blue-rv blink');

// change teme to grayscale 
Tn5250.Application.setTheme('theme-gray');

// to hide text from screen
Tn5250.GUI.toggleClass(4, 69, 10, 'nondisp');

// to remove all classes on all cells
Tn5250.GUI.toggleClass(null);

// to remove all classes on row,col,length
Tn5250.GUI.toggleClass(4, 69, 10, null);

For more advanced examples one can use popular jQuery which is more cryptic but also more powerful.

$('.tngrid tr:nth-child(2) td[class~="turq-cs"]').addClass('blink');

Now, the question is how to do that from IBM I?

Solution is simple, use STRPCCMD command which will send special command to the terminal. STRPCCMD can be called from CL or RPG.

Here is an example to call remote JavaScript inside active Web Terminal from terminal command line or CL program.

STRPCO
STRPCCMD ('script:Tn5250.GUI.toggleClass(4, 69, 10, "turq-cs white red-hi-rv blink");')

Need more advanced example?

Create JavaScript function and add it through Web Admin Console.
NOTE: code must be wrapped inside < script > </ script > tags.

Then call your function which will execute more complex actions.

Conclusion

Combining CL/STRPCCMD and JavaScript/CSS on our Web Terminal we can do various advanced coloring and signaling to improve user experience or just to use those features for screen design testing.

Even those demos are simple and basic, this is just introduction to what can be done. From adding image previews directly inside terminal to various kind of integrations with other online services.

For the end, here is the list of all available color attributes you can check out in terminal playground. Of course, we can create custom ones as it is just plain CSS.

black
blue
blue-rv
blue-rv-ul
blue-ul
green
green-rv
green-rv-ul
green-ul
nondisp
pink
pink-rv
pink-rv-ul
pink-ul
red
red-hi
red-hi-rv
red-rv
red-ul
red-ul-hi
red-ul-hi-rv
turq
turq-cs
turq-rv
turq-rv-ul
turq-ul
white
white-rv
white-ul
yellow
yellow-rv
yellow-ul