We have a new code challenge for you, where we can learn together and have a bit of fun relating to SAP Community profile pictures. If you haven't already, have a look at the SAP Community Code Challenge blog post for a quick overview. You're in the right place in this thread to find out more, share what you're doing, discuss with other Code Challenge participants and to generally hang out with us and have a good time!
@qmacro (DJ) and I will be here in this thread throughout the challenge to answer any question that you might have, technical or non-technical. We are very excited to see what you'll come up with!
Are you taking part? Have you got the starter project up and running yet? What ideas do you have for making the project even better? Let us know!
I have also tried to optimise the project, but more from a technical point of view. So here is what i've done so far.
You can find the commits and my thoughts about what else is missing here. Always fun these challenges 😄
I figured someone would try Typescript. Nice job.
I'm curious about the SAP Horizon switch - did you test that on Mobile (iOS)? I had the baseline version on SAP Horizon early on but had some rendering issues with the ImageEditor control not sizing correctly on mobile. Therefore, I fell back to Fiori 3 theme. More out of my own curiosity than anything, but did you find a solution to that issue?
I gave the challenge another go. I came up with a new feature that let's you generate an avatar as a "pixel person" instead of uploading a picture from your local file system:
You can check out the pull request to see all the details, but I'll try to sum it up:
You can click "Generate Pixel Person" to open a dialog and input your preferred colors for the pixel avatar. You also have switches for things like beard, glasses or a watch. When clicking "Generate" a request is sent to the express server. The server then grabs predefined layers, fills them with the specified colors, and sends the configuration back to the client. On the client-side a native html <canvas /> is used to create the image. The canvas is then turned into a data uri and inserted into the file uploader control.
Please note: I am sorry to not have included any other body types, hair styles, etc. It was simply too much implementation effort for now. I will make sure to include these functionalities as soon as I find the time.
Let me know in case you have any questions 🙂
I am trying to implement this on the SAP Appgyver using the pick files and image editor flow functions. And it works on Android and not so smoothly on iOS right now. The modal component also does not open on the web.
Currently we do not have the option to work with third party libraries but it is a good LCNC offering.
Anyone else trying this challenge using Appgyver?
Here it is using the Appgyver, unfortunately with some limitations listed below.
So, let us deep dive into the application and towards the end is the flow logic tree.
Application landing page on Android mobile - carefully note that since this does not have an auth attached, the SAP profile ID is explicitly taken from the user.
Enter the SAP profile ID which is later used to open the public profile page
To process image step-by-step select the button (which is actually a drop down) and pick first option to browse and preview image
After selecting browse image, pick an image from the file explorer to process further
For enhancing image, select step-2: Enhance Image option and it is going to open the selected image on the image editor
The edited image is now visible in the landing screen and in this step we can save the image locally. Also, automatically opens the public profile page of the profile provided in the input field.
Technically, the flow function below for reference.
Happy learning !
Created a few additions to the current SAPUI5 app, and learned a lot about translation ... mostly the pitfalls 😮.
I did the following:
Hoping to make additional features, and see what Vinay is doing with AppGyver, but wanted to join the party 😃
Added the SAP community badges of the entered community name to the enhanced picture and some minor stuff.
Pixel person "borrowed" from @nicoschoenteich 😉
I really wanted to participate. Finally I had time to add a tiny little feature which allows you to import your github profile picture.
It's was nice to explore the project and thanks!
Unfortunately I saw this post a bit late, but in the last two weeks I tried to do as much as I can.
For me this challenge was not only a good practice, but a great opportunity to see where are the „borders” of the ImageEditor control.
Some years ago, I started a small project by myself to create an image editor with jQuery, but as soon as I saw the ImageEditor control by SAPUI5, I started to think about the new possibilities.
At first I had no real goal, just to check what I could do with this control, but after that I had a wild idea „Inherit, inherit them all…”
So I did!
Long story short, here are the point what I did:
- inherited (extended) the ImageEditor control, and the standard list of filters
- add a new control to handle layers
The customToolbarControl has a lot of possibilities, but I was more into to add a new button to the „left side area”
For this I followed the usual way to inherit a control, and add my own code to be able to have a new tab, for the layers.
For this challenge I added four new filters, three of them are colour channel related, one is my own „Euphoria” mode.
You might have the question, why did I choose to implement colour channel but I had an old desire to process Hubble, and sky survey data (Sloan Digital Survey) so part of the process it is needed to have different distributions of colour channels, and also a way to merge the data.
Here it comes the layer feature, to be able to merge different channels, we need layers to be merged.
Currently my application has numerous of bugs, but let me show you the final processs result of the Andromeda galaxy:
As you can see the „Layers” panel has a new layout with the binding of the created layers. In the footerbar the blend button triggers the Screen blending mode (same in Photoshop), other buttons are not yet implemented.
This challenge was fantastic in many terms, hopefully you can see the point of this post, and give the chance me to show more.
„Unfortunately, no one can be told what „Image Editor” is. You'll have to see it for yourself.”
-Inherited from Morpheus-
Hi community, hi @qmacro .
The main idea of my revision is to change standard UI5 control with npm open source image editor.
Thank Peter Muessig for his blog https://blogs.sap.com/2021/11/15/using-npm-packages-in-ui5-without-shims/ and his npm module ui5-tooling-modules
But I have one question, how to add ui5.yaml to the @thomas_jung for the converting standard NPM module to the UI5 format.
I added pull request https://github.com/SAP-samples/sap-community-code-challenge/pull/7
Hi @askarpov1 ,
looks like you got it running by pasting the source code of the npm package into a local folder. Clever work around. As you said, it would be better to get the package von directly npm (with `npm install tui-image-editor`) and work with a ui5.yaml.
My idea on how to realize that with the existing project: You could split the project up into two parts and run the frontend and backend a separate node.js applications. You could create a new package.json, ui5.yaml and xs-app.json in the app folder and run the app with the ui5-tooling. You could then create a destination in the xs-app.json and ui5.yaml that points to your backend application (running on another localhost port) to avoid any CORS issues.
You can check this playlist (episode 4 and 5) to learn more about destinations, the ui5.yaml, and xs-app.json.
Hope this helps.