Display base64 encoded picture in SAPGUI

[EnnoWulff]

Today I stumbled upon an old test report where I tried to display a base64 encoded picture in a container.

This is how it looks

This is how it works

BASE64 encoding is a mehtod to store binary data with codepage undependend readable ASCII characters. Readable characters can be stored in an ABAP report which makes it possible to store a picture in a source code.

To encode a picture to BASE64 you will need to have a converter. There are many converters online avaible, e.g. this one: https://www.base64encode.net/base64-image-encoder

For demonstration I used a very small picture. I found one in the 8-bit-retro-Excel-racing-simulation galoppsim by marco.krapf in the last Galoppsim corona cup. If you do not know Galoppsim.racing so far, I recommend to visit https://galoppsim.racing/ as soon as possible,

I chose Rennpony as suitable candiate for my demonstration. Even though the marvelous graphics are in 8bit-mode I still had to concert them to a very small size. The displayed picture has a size of 21x19 pixels.

So I uploaded the smal graphic to the base64-encoding website and got the following string:

R0lGODlhFQATADMAACH5BAAAAAAALAAAAAAVABMAg////19qcHaPjo6ij5XL/p3Mx6rR3

qTS+LPUksPessjcysvl+ufbrvrclPfv1Or0+wSMEMg5F1mY6g0eztzmNA3TKEu4LYaptI

2jShbBMIahlDNwXCwDYcdQeQ6HwEDxOyiKmyNhKhj8pobYBjkl6K5TokZRKBe+3enhRnE

g3u/EbwH2aiWJfB6hfjzAa3d6ewYHDzRpWQ0SCoMJBoc0gCYOMo15hho1aiaLAAqgkRR/

aYE9iKVQPZtppwCsXREAOw==

This string has to be decoded into an xstring.

The xstring has to be converted to an xstring table.

This xstring table can be passed to function module DP_CREATE_URL which returns a pointer (url) to these bytes. It then can be used in CL_GUI_PICTURE control to display the data.

The code

REPORT.



CLASS demo DEFINITION.

  PUBLIC SECTION.

    TYPES _url TYPE c LENGTH 200.

    TYPES: BEGIN OF _graphic_row,

             line(255) TYPE x,

           END OF _graphic_row,

           _graphic_tab TYPE STANDARD TABLE OF _graphic_row WITH DEFAULT KEY.

    METHODS show.

  PRIVATE SECTION.

    METHODS get_image_url

      RETURNING

        VALUE(url) TYPE url.

    METHODS convert_xstring_to_table

      IMPORTING

        xstr       TYPE xstring

      RETURNING

        VALUE(tab) TYPE _graphic_tab.



    DATA picture TYPE REF TO cl_gui_picture.

    DATA container TYPE REF TO cl_gui_docking_container.



ENDCLASS.



CLASS demo IMPLEMENTATION.

  METHOD show.



    DATA: graphic_size TYPE i.



    CREATE OBJECT container

      EXPORTING

        extension               = 300

        no_autodef_progid_dynnr = 'X'.



    CREATE OBJECT picture

      EXPORTING

        parent = container.



    picture->load_picture_from_url( url = get_image_url( ) ).

    picture->set_display_mode( cl_gui_picture=>display_mode_fit ).



  ENDMETHOD.



  METHOD get_image_url.

    DEFINE a.

      CONCATENATE graphic_str &1 INTO graphic_str.

    END-OF-DEFINITION.



    DATA graphic_xstr TYPE xstring.

    DATA graphic_x    TYPE x.

    DATA graphic_str  TYPE string.

    DATA graphic_size TYPE i.

    DATA graphic_table TYPE _graphic_tab.





    TYPES ty_char160 TYPE c LENGTH 160.

    DATA local_pic TYPE STANDARD TABLE OF ty_char160.



    "GIF rennpony 16 colors

    a 'R0lGODlhFQATADMAACH5BAAAAAAALAAAAAAVABMAg////19qcHaP'.

    a 'jo6ij5XL/p3Mx6rR3qTS+LPUksPessjcysvl+ufbrvrclPfv1Or0'.

    a '+wSMEMg5F1mY6g0eztzmNA3TKEu4LYaptI2jShbBMIahlDNwXCwD'.

    a 'YcdQeQ6HwEDxOyiKmyNhKhj8pobYBjkl6K5TokZRKBe+3enhRnEg'.

    a '3u/EbwH2aiWJfB6hfjzAa3d6ewYHDzRpWQ0SCoMJBoc0gCYOMo15'.

    a 'hho1aiaLAAqgkRR/aYE9iKVQPZtppwCsXREAOw=='.



    CALL FUNCTION 'SSFC_BASE64_DECODE'

      EXPORTING

        b64data = graphic_str

      IMPORTING

        bindata = graphic_xstr

      EXCEPTIONS

        OTHERS  = 8.





    graphic_table = convert_xstring_to_table( graphic_xstr ).



    CALL FUNCTION 'DP_CREATE_URL'

      EXPORTING

        type     = 'image'                                    "#EC NOTEXT

        subtype  = 'gif'

        lifetime = cndp_lifetime_transaction  "'T'

      TABLES

        data     = graphic_table

      CHANGING

        url      = url.



  ENDMETHOD.



  METHOD convert_xstring_to_table.



    DATA conv TYPE i.



    DATA offs TYPE i.

    DATA size TYPE i.

    DATA row TYPE _graphic_row.



    size = xstrlen( xstr ).

    CHECK size > 0.



    conv = size.

    offs = 0.



    WHILE conv > 255.

      row-line = xstr+offs(255).

      APPEND row TO tab.

      offs = offs + 255.

      conv = conv - 255.

    ENDWHILE.



    row-line = xstr+offs(conv).

    APPEND row TO tab.



  ENDMETHOD.

ENDCLASS.





PARAMETERS p_test.



INITIALIZATION.

  NEW demo( )->show( ).