diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..b4925b3 Binary files /dev/null and b/.DS_Store differ diff --git a/_i18n/messages.properties b/_i18n/messages.properties index 37ffeec..baff203 100644 --- a/_i18n/messages.properties +++ b/_i18n/messages.properties @@ -7,7 +7,8 @@ appDescription=SAP Community Profile Picture Editor / Enhancer Toolbar1=Choose Selfie Template Toolbar2=Choose Your Picture and Upload Toolbar3=Edit and Download Final Image -Upload=Enhance Your Picture +getPixelPerson = Generate Pixel Person +Enhance=Add Random Border 🍀 placeholder=Choose File for Upload... gui.loading=Processing Picture gui.loadingLong=Please wait ...Processing Picture \ No newline at end of file diff --git a/app/profilePic/profilePic/controller/App.controller.js b/app/profilePic/profilePic/controller/App.controller.js index cb03e21..b411dff 100644 --- a/app/profilePic/profilePic/controller/App.controller.js +++ b/app/profilePic/profilePic/controller/App.controller.js @@ -7,16 +7,22 @@ sap.ui.define([ "sap/ui/core/Core", "sap/ui/model/json/JSONModel", "sap/ui/Device", - "sap/suite/ui/commons/library" + "sap/suite/ui/commons/library", + "sap/m/Dialog", + "sap/m/Button", + "sap/m/ButtonType", + "sap/m/List", + "sap/m/Input", + "sap/m/InputListItem", + "sap/m/ColorPalette", + "sap/m/Switch", ], - function (BaseController, MessageToast, oCore, JSONModel, Device, SuiteLibrary) { + function (BaseController, MessageToast, oCore, JSONModel, Device, SuiteLibrary, Dialog, Button, ButtonType, List, Input, InputListItem, ColorPalette, Switch) { return BaseController.extend("profilePic.controller.App", { onInit: function () { var oImageEditor = this.getView().byId("image"), - oModel = new JSONModel({ - blocked: true - }) + oModel = new JSONModel(sap.ui.require.toUrl("profilePic/pixelPersonConfig.json")) this.getView().setModel(oModel) if (!Device.browser.msie) { @@ -24,11 +30,128 @@ sap.ui.define([ oImageEditor.setCustomShapeSrc(sap.ui.require.toUrl("sap/suite/ui/commons/statusindicator") + "/shapes/bulb.svg") } }, + + openPixelPersonDialog: function () { + if (!this.oDefaultDialog) { + this.oDefaultDialog = new Dialog({ + title: "Generate Pixel Person", + contentWidth: "550px", + contentHeight: "300px", + draggable: true, + content: new List({ + items: { + path: "/pixelPersonConfigArray", + template: new InputListItem ({ + label: "{label}", + content: [ + new Switch ({ + visible: "{switchableProp}", + state: "{isSelected}" + }), + new ColorPalette ({ + colorSelect: function (oEvent) { + this.handleColorSelect(oEvent) + }.bind(this), + colors: "{colors}" + }), + new Input ({ + value: "{selectedColor}" + }) + ] + }).addStyleClass("doubleHeight") + } + }), + //visible="{= ${marketed} === true}" + beginButton: new Button({ + type: ButtonType.Emphasized, + text: "Generate", + press: function () { + this.getPixelPerson() + this.oDefaultDialog.close(); + }.bind(this) + }), + endButton: new Button({ + text: "Close", + press: function () { + this.oDefaultDialog.close(); + }.bind(this) + }) + }); + + this.getView().addDependent(this.oDefaultDialog); + } + + this.oDefaultDialog.open(); + }, + + handleColorSelect: function (oEvent) { + let siblingInput = oEvent.getSource().getParent().getContent()[2] + siblingInput.setValue(oEvent.getParameter("value")) + }, + + getPixelPersonRequestBody: function () { + let dataFromModel = this.getView().getModel().getData().pixelPersonConfigArray + let requestBody = {} + requestBody.colors = {} + requestBody.shapes = {} + for (let i = 0; i < dataFromModel.length; i++) { + requestBody.colors[dataFromModel[i].id] = dataFromModel[i].selectedColor + if (dataFromModel[i].switchableProp) { + requestBody.shapes[dataFromModel[i].id] = dataFromModel[i].isSelected + } + } + return requestBody + }, + + getPixelPerson: function () { + let controller = this + let reqSettings = { + "url": "/get-pixel-person", + "method": "POST", + "timeout": 0, + "headers": { + "Content-Type": "application/json" + }, + "data": JSON.stringify(this.getPixelPersonRequestBody()), + }; + jQuery.ajax(reqSettings).done(function (response) { + + //give native html canvas global ui5 id + let pixelPersonCanvasID = controller.createId("pixelPersonCanvas1"); + let pixelPersonCanvas = document.getElementById(pixelPersonCanvasID) + + //generate pixel person from response + let pixelSize = 10 + let artPadding = 100 + pixelPersonCanvas.width = (response[0].length * pixelSize) + (2 * artPadding) + pixelPersonCanvas.height = (response.length * pixelSize) + (2 * artPadding) + let canvasCtx = pixelPersonCanvas.getContext("2d") + canvasCtx.fillStyle = "#999" + canvasCtx.fillRect(0, 0, pixelPersonCanvas.width, pixelPersonCanvas.height); + for (let i = 0; i < response.length; i++) { + for (let p = 0; p < response[i].length; p++) { + let x = (p * pixelSize) + artPadding + let y = (i * pixelSize) + artPadding + canvasCtx.fillStyle = response[i][p]; + canvasCtx.fillRect(x, y, pixelSize, pixelSize); + } + } + //convert canvas to dataURI and set as source for image editor and file uploader + let dataURI = pixelPersonCanvas.toDataURL() + let oFileUploader = controller.getView().byId("fileToUpload") + oFileUploader.setValue(dataURI) + let artAreaImg = controller.getView().byId("image") + artAreaImg.setSrc(dataURI) + }); + }, + + //enhance uploadPressed: async function (oEvent) { let view = this.getView() let controller = view.getController() let oFileUploader = view.byId("fileToUpload") + console.log(oFileUploader.getValue()) if (!oFileUploader.getValue()) { MessageToast.show("Choose a file first") return @@ -70,8 +193,8 @@ sap.ui.define([ let oImageEditor = view.byId("image") oImageEditor.openSaveDialog() controller.openUrl('https://people.sap.com/', true) - }, + onImageLoaded: async function (oEvent) { let view = this.getView() let oImageEditor = view.byId("image") @@ -79,10 +202,8 @@ sap.ui.define([ oImageEditor.setCropAreaByRatio(1, 1) oImageEditor.setMode(SuiteLibrary.ImageEditorMode.CropEllipse) console.log(oImageEditor.getMode()) - - - }, + onFileChange: async function (oEvent) { var oFile = oEvent.getParameter("files")[0], oImageEditor = this.getView().byId("image") @@ -91,7 +212,6 @@ sap.ui.define([ } this.getView().getModel().setProperty("/blocked", true) await oImageEditor.setSrc(oFile) - } }) } diff --git a/app/profilePic/profilePic/pixelPersonConfig.json b/app/profilePic/profilePic/pixelPersonConfig.json new file mode 100644 index 0000000..e7f1a15 --- /dev/null +++ b/app/profilePic/profilePic/pixelPersonConfig.json @@ -0,0 +1,210 @@ +{ + "pixelPersonConfigArray" : [ + { + "label": "Skin 1", + "id": "skin1", + "switchableProp": false, + "colors": [ + "#eac796", + "#926a2d" + ], + "selectedColor": "#eac796" + }, + { + "label": "Skin 2", + "id": "skin2", + "switchableProp": false, + "colors": [ + "#D2AF7F", + "#6f4f1d" + ], + "selectedColor": "#D2AF7F" + }, + { + "label": "Eyes", + "id": "eyes", + "switchableProp": false, + "colors": [ + "#000", + "#634e34", + "#2e536f", + "#497665" + ], + "selectedColor": "#000" + }, + { + "label": "Glasses", + "id": "glasses", + "switchableProp": true, + "isSelected": true, + "colors": [ + "#000", + "#444" + ], + "selectedColor": "#000" + }, + { + "label": "Shirt 1", + "id": "shirt1", + "switchableProp": false, + "colors": [ + "#323233", + "#F2F2F2", + "#E6E6E6" + ], + "selectedColor": "#F2F2F2" + }, + { + "label": "Shirt 2", + "id": "shirt2", + "switchableProp": false, + "colors": [ + "#000", + "#E6E6E6", + "#D7D7D7" + ], + "selectedColor": "#E6E6E6" + }, + { + "label": "Pants 1", + "id": "pants1", + "switchableProp": false, + "colors": [ + "#467293", + "#467293" + ], + "selectedColor": "#467293" + }, + { + "label": "Pants 2", + "id": "pants2", + "switchableProp": false, + "colors": [ + "#2c4c64", + "#2c4c64" + ], + "selectedColor": "#2c4c64" + }, + { + "label": "Shoes", + "id": "shoes", + "switchableProp": false, + "colors": [ + "#000", + "#D40000" + ], + "selectedColor": "#000" + }, + { + "label": "Laces", + "id": "laces", + "switchableProp": false, + "colors": [ + "#323233", + "#D40000", + "#000" + ], + "selectedColor": "#000" + }, + { + "label": "Shadow", + "id": "shadow", + "switchableProp": false, + "colors": [ + "#66757e", + "#66757e" + ], + "selectedColor": "#66757e" + }, + { + "label": "Hair 1", + "id": "hair1", + "switchableProp": false, + "colors": [ + "#81786E", + "#14100b", + "#eac796" + ], + "selectedColor": "#81786E" + }, + { + "label": "Hair 2", + "id": "hair2", + "switchableProp": false, + "colors": [ + "#605345", + "#2e1e0a", + "#eac796" + ], + "selectedColor": "#605345" + }, + { + "label": "Beard 1", + "id": "beard1", + "switchableProp": true, + "isSelected": false, + "colors": [ + "#81786E", + "#0839F8" + ], + "selectedColor": "#81786E" + }, + { + "label": "Beard 2", + "id": "beard2", + "switchableProp": true, + "isSelected": false, + "colors": [ + "#605345", + "#0839F8" + ], + "selectedColor": "#605345" + }, + { + "label": "Mouth", + "id": "mouth", + "switchableProp": false, + "colors": [ + "#D2AF7F", + "#6f4f1d" + ], + "selectedColor": "#D2AF7F" + }, + { + "label": "Watch", + "id": "watch", + "switchableProp": true, + "isSelected": false, + "colors": [ + "#000", + "#000" + ], + "selectedColor": "#000" + }, + { + "label": "Stripe", + "id": "stripe", + "switchableProp": false, + "isSelected": true, + "colors": [ + "#e6104a", + "#e6104a" + ], + "selectedColor": "#e6104a" + }, + { + "label": "Socks", + "id": "socks", + "switchableProp": false, + "isSelected": true, + "colors": [ + "#FFF", + "#000" + ], + "selectedColor": "#000" + } + ], + "shapesArray": [ + + ] +} \ No newline at end of file diff --git a/app/profilePic/profilePic/view/App.view.xml b/app/profilePic/profilePic/view/App.view.xml index abb2e60..81736a3 100644 --- a/app/profilePic/profilePic/view/App.view.xml +++ b/app/profilePic/profilePic/view/App.view.xml @@ -5,24 +5,33 @@ xmlns:core="sap.ui.core" xmlns:unified="sap.ui.unified" xmlns:e="sap.suite.ui.commons.imageeditor" - xmlns="sap.m"> + xmlns="sap.m" + xmlns:html="http://www.w3.org/1999/xhtml"> - + + - + +