{"id":1461,"date":"2019-09-16T14:28:07","date_gmt":"2019-09-16T21:28:07","guid":{"rendered":"https:\/\/portal.staylinked.com\/sl\/kb\/?post_type=ht_kb&p=1461"},"modified":"2021-07-12T14:59:40","modified_gmt":"2021-07-12T21:59:40","slug":"screen-reformatting-example","status":"publish","type":"ht_kb","link":"https:\/\/portal.staylinked.com\/sl\/kb\/knowledge-base\/screen-reformatting-example\/","title":{"rendered":"Screen Reformatting Example"},"content":{"rendered":"\n

The following is a quick demonstration of the SmartTE reformatting features applied to a simple telnet screen. Each step and alternative options are described in more detail in the respective section of the Administrator.<\/p>\n\n\n\n

Taking this screen Creating this screen <\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n
\"\"<\/figure>\n\n\n\n

The first step is to capture a screen map. Screen maps are a snapshot of the screen you\u2019re looking for. Using a StayLinked client, connect to the server and navigate to the desired screen. Once on the screen, use the Administrator\u2019s Connections list to identify the device. Right click the session and select View > Export Screen Map. Give the map a name to save it to your library of screen maps.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Open your telnet host entry. If you\u2019re not sure which entry to use, check the device group to see which host group is being used. You can see connections \u2018by device group\u2019, right click a device and select Details, or by double clicking a connection to see the connection details. From the host entry, select the Manage pulldown menu and Screen Recognition.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Right click in the list of Managed Screens to add a new entry:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Name your new\nentry, and then right click in the recognition strings to select the screen\nobjects that make this screen unique. If no screen map has been selected, a\ndialogue will appear and then prompt you to select the screen map that\nidentifies this screen recognition event. Once the screen map opens, select\nenough display items to make this event unique.<\/p>\n\n\n\n

When the screen map is closed, the recognition page will display a list of the screen elements you have selected.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Now that the screen will be recognized, you can use the various other tabs to perform your desired actions. In this case, we\u2019ll use the Screen Designer tab to create a new reformatted screen. Select the tab, then right click in the list box to add a new entry. The entry will prompt for the screen dimensions that will use this new reformatting. The connection details dialogue mentioned above is a good place to see the screen size in rows and columns. The standard OIA (brackets along the base of the emulation screen) will consume a display row when enabled, so add one row if the device group includes the OIA. The Graphical OIA configured in the dynamic features does not consume a row of emulation space. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In this example, the screen is set to 15×20, but the emulation space is 14×20 because of the OIA. Once the new entry at 14×20 is created, the designer will display the screen map and new display area in a new window. The example to the right has been slightly trimmed for article space.<\/p>\n\n\n\n

From here, we can\nstart to add new elements.<\/p>\n\n\n\n

Each screen below\nshows an element being added and then the new display of what the screen would\nlook like.<\/p>\n\n\n\n

This example uses a total of 7 elements to reformat the display space. In this example, none of the original screen contents are directly added to the net display. Each of the new elements are a graphical display object used in SmartTE.<\/p>\n\n\n\n

The first element<\/strong> is a \u2018graphical background color\u2019, which is added in the graphical image dialogue. Select the file pulldown from the top of the dialogue and then set background > graphical image. Rather than an actual image, you can use the color picker to select a background color: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This simply sets\nthe background to green. The color picker allows you to enter RGB values, or\nselect from carious color options.<\/p>\n\n\n\n

The second element<\/strong> added is the StayLinked banner across the top of the screen. This example selected an image that has the grey background with the logo on the left edge, setting the image to left alignment, but stretch to fit the area height of two rows and the entire 20 columns wide of the display area:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The third element<\/strong> is a simple label to paint the word Demonstration on the screen: <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

In this example, the width is set for the entire screen, but the alignment is set to centered, allowing the device to position the word in the center of the screen regardless of the device display size.<\/p>\n\n\n\n

The fourth element<\/strong> is an identical label, but with the word application below the previous label:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The fifth element <\/strong>is a continue button, allowing the user to quickly and easily proceed:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The sixth element<\/strong> is a cancel button. This button is similar to the previous button, except that it is positioned lower, has a different caption, and performs a different script when pressed.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The last element is a simple graphical image that sets a color banner along the bottom of the screen to help outline the work area.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Instructional Video – Example of Screen Designer Features<\/strong><\/h3>\n\n\n\n