Zoom option for Canvas Element in SAPUI5

Hello Everyone,

In this blog post I am going to explain how to display smart form in Canvas tag element and how to Zoom In and Zoom Out for Canvas tag element. To achieve the same we have PDF Viewer, but here we have to display smart form in Tablet and Mobile as well. PDF Viewer is not compatible in Tablet and Mobile. Because of that reason we have used Canvas element for displaying smart form.

Step 1: Create a project in SAP Web IDE

Step 2: We need to create a panel with Zoom In and Zoom Out buttons in view

<mvc:View controllerName="canvasZoomInZoomOut_Canvas.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
	displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<Panel width="auto" class="sapUiResponsiveMargin" accessibleRole="Region" id="canvasElementPanel">
						<Toolbar class="sapUiTinyMarginBottom" height="8rem">
							<ToolbarSpacer/>
							<Button icon="sap-icon://add" press="onZoomIn" type="Emphasized"/>
							<Button icon="sap-icon://less" press="onZoomOut" type="Emphasized"/>
						</Toolbar>
						<content></content>
					</Panel>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

Step 3: Now we need to create a pdf.js file to display the form in canvas element, for that I have created control folder under webapp, after that I have created pdf.js file under control folder

Step 4: For pdf.js code please go through the below link.

https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.min.js

Step 5: Now we have to integrate this pdf.js into our controller

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"canvasZoomInZoomOut_Canvas/control/pdf"
], function(Controller) {
	"use strict";

	return Controller.extend("canvasZoomInZoomOut_Canvas.controller.View1", {

	});
});

Step 6: Now we need to bind the PDF content which is coming from backend(ODATA)

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"canvasZoomInZoomOut_Canvas/control/pdf"
], function(Controller) {
	"use strict";

	var size, pageNumber, decodedPdfContent;

	return Controller.extend("canvasZoomInZoomOut_Canvas.controller.View1", {

		onInit: function() {

			var that = this;

			pageNumber = 1;

			var oModel = that.getOwnerComponent().getModel();
			var filterArray = [];
			var userName = new sap.ui.model.Filter("Uname", "EQ", "TestUser");
			var rosterNo = new sap.ui.model.Filter("RosterNo", "EQ", "12345678");
			var key = new sap.ui.model.Filter("Key", "EQ", "O");
			filterArray.push(userName);
			filterArray.push(rosterNo);
			filterArray.push(key);

			oModel.read("/RostEmpViewSet", {
				filters: filterArray,
				success: function(oData) {

					if (oData.results.length > 0) {

						var sValue = oData.results[0].Base64Value;
						var base64EncodedPDF = sValue;

						//============ Decoding PDF content ====================//
						decodedPdfContent = atob(base64EncodedPDF);
						var byteArray = new Uint8Array(decodedPdfContent.length);
						for (var i = 0; i < decodedPdfContent.length; i++) {
							byteArray[i] = decodedPdfContent.charCodeAt(i);
						}

						//============ Creating Canvas element ====================//
						var html1 = new sap.ui.core.HTML(that.createId("html1"), {
							content: "<canvas id='the-canvas' ></canvas>"
						});
						that.byId("canvasElementPanel").addContent(html1);

						//============ Detecting login device ====================//
						var oDesktopDevice = sap.ui.Device.system.desktop;
						var phone = sap.ui.Device.system.phone;
						var scale;
						if (oDesktopDevice === true) {
							scale = 1.5;
						} else if (phone === true) {
							scale = 0.4;
						} else {
							scale = 0.87;
						}
						that.pdfScale = scale;

						that.pdfDataView(pageNumber, scale, decodedPdfContent);

					}
				},
				error: function(err) {
					alert(err);
				}
			});

		},

		pdfDataView: function(pageNumber, scale, decodedPdfContent) {
			var that = this;
			var pdfjsLib = window['pdfjs-dist/build/pdf'];

			//============ The workerSrc property shall be specified ====================//
			pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';

			//============ Using DocumentInitParameters object to load binary data ====================//
			var loadingTask = pdfjsLib.getDocument({
				data: decodedPdfContent
			});
			loadingTask.promise.then(function(pdf) {
				size = pdf.numPages;
				that.pdf = pdf;
				//============ Fetching first page ====================//
				that.renderPage(scale, pageNumber, pdf, that);
			}, function(reason) {
				// PDF loading error
			});

		},
		renderPage: function(scale, pageNumber, pdf, contxt) {
			var that = contxt;
			pdf.getPage(pageNumber).then(function(page) {
				var viewport = page.getViewport({
					scale: scale
				});

				//============ Prepare canvas using PDF page dimensions ====================//
				var canvas = document.getElementById('the-canvas');
				if (canvas !== null) {
					var context = canvas.getContext('2d');

					canvas.height = viewport.height;
					canvas.width = viewport.width;

					//============ Render PDF page into canvas context ====================//
					var renderContext = {
						canvasContext: context,
						viewport: viewport
					};
					var renderTask = page.render(renderContext);
					renderTask.promise.then(function() {

					});

				}
			});

		}

	});
});

Step 7: Now execute the application and see the output

Step 8: Now the final part is to provide the functionality for Zoom In and Zoom Out to the Canvas content

	onZoomIn: function () {
			if (sap.ui.Device.system.phone) {
				this.pdfScale = this.pdfScale + 0.15;
				this.renderPage(this.pdfScale, 1, this.pdf, this);
			} else {
				this.pdfScale = this.pdfScale + 0.25;
				this.renderPage(this.pdfScale, 1, this.pdf, this);
			}

		},
		onZoomOut: function () {
			if (sap.ui.Device.system.phone) {
				if (this.pdfScale < 0.3) {
					sap.m.MessageToast.show("Zoom out is not possible");
				} else {
					this.pdfScale = this.pdfScale - 0.15;
					this.renderPage(this.pdfScale, 1, this.pdf, this);
				}
			} else {
				if (this.pdfScale < 0.9) {
					sap.m.MessageToast.show("Zoom out is not possible");
				} else {
					this.pdfScale = this.pdfScale - 0.25;
					this.renderPage(this.pdfScale, 1, this.pdf, this);
				}
			}

		}

Step 9: Now execute the application and apply Zoom In and Zoom Out by clicking on ‘+’ and ‘-‘ icons which are at top of the form

Zoom In output:

Zoom Out output:

Conclusion: Finally we achieved Zoom In and Zoom Out for Canvas tag element.

Thank you, hope this blog post helpful.