Introduction

For one of my projects, I had the requirement to show images with the possibility to zoom and rotate the image. I couldn’t find any out-of-the-box UI5 control that could fit this need. Therefore, I search for a library on the internet that could do this. The library that I found for this was, Viewer.js:

• Github: https://github.com/fengyuanchen/viewerjs
• Example: https://fengyuanchen.github.io/viewerjs/

Like you can see in the example, it has a lot of functionalities but also some that I didn’t need. I optimized the library to my requirements and wrapped it into a UI5 control.

Image Viewer Control

Trigger the image viewer from a button or after uploading an image, just like you would call a popover/dialog with an image. It will gray out the background and show the image in front.

Beneath the image there are a few buttons:

• Zooming buttons to zoom in and out (the mouse scroll can also be used for zooming)
• Rotate buttons to rotate an image

The image can be closed with the close button in the upper right corner or using the “esc” button.

How can you use it?

You can find the control in a library of UI5Lab:

https://ui5lab.io/browser/index.html#/Samples/ui5lab.wl.img/Sample/ui5lab.wl.img.imageviewer.ImageViewer

Get the library and deploy it to SCP or ABAP system like described here:

https://blogs.sap.com/2018/04/06/consume-libraries-from-ui5lab/

This library contains a grunt file to build directly in the SAP Web IDE. You can just import it from git and build it 🙂

In that same blog is described how you can include the library into your project.

Load the library into your project and call it in the controller after a button click or an image upload. The image viewer control requires a base64 uri of an image as value.

me.imageViewer = new ImageViewer({
                src: oEvent.target.result
});
me.imageViewer.open();

It works the same as a dialog or popover.

Demo

As already mentioned, you can find it on UI5Lab with documentation, code on github and demo. You can also find a full demo here:

https://htmlpreview.github.io/?https://github.com/lemaiwo/UI5LabLibraryImageViewer/blob/master/test/ui5lab/wl/img/demo/index.html

Find more custom UI5 controls at UI5Lab: http://ui5lab.io

This is also the place to share your own controls with the community!