02-14-2022 5:49 AM - edited 02-14-2022 5:51 AM
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!
02-14-2022 6:04 AM
you should specify this is a Fiori code challenge.
It could be nice to have Code challenge by category : Oo Challenge, Fiori Challenge, AbapUnit Challenge, ...
02-14-2022 6:18 AM - edited 02-14-2022 6:39 AM
Hey Fred, this is more than a Fiori code challenge, it includes UI5 components, Node.js, Express based web serving, and also, for those who are more graphically inclined, it is also about graphic design and ideas.
02-14-2022 6:47 AM
02-14-2022 6:42 AM
I'll be covering the technical detail around the starter project for this challenge in this week's Hands-on SAP Dev live stream episode. It's on Fri 18 Feb at 0800 GMT (UK) and everyone's welcome!
02-14-2022 7:59 AM
I gave it a shot (pull request) and added a new image as well as a new "feature": When enhancing the picture a random image will be selected as the border. I know it's not a lot but now I know how the Image Editor and the upload works. That's my learning for today 👍🏻
My People Profile
02-14-2022 1:56 PM - edited 02-14-2022 2:08 PM
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 😄
02-14-2022 2:21 PM
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?
02-15-2022 12:59 AM - edited 02-15-2022 1:07 AM
One slight issue for me running it locally but it worked in the end 🙂
One of the modules from npm were not installed with the npm install command so it was a manual install.
02-15-2022 6:42 AM
02-15-2022 7:38 AM
02-15-2022 8:12 AM
Interesting. I figured it was the M1 that caused the snag but a little surprised that it was the @SAP/logging. I would have guessed it was Sharp just because it contains some native libraries. But if you got it working that's what counts.
02-15-2022 1:03 PM
I thought of doing a pull request to say it then wondered if it may be that I've not done a lot of SAP coding lately and it might have been unique to me....
02-16-2022 12:47 PM - edited 02-16-2022 1:02 PM
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 🙂
02-16-2022 12:56 PM
man it is hard to keep up with that good contributions 🙂 rly have to dig deep to come up with something which could beat that 😛 I'm just thinking out loud now that a separate SAP Community NFT could be built on top of this 😛 like we get our own community related crypto assets 😄
02-16-2022 1:01 PM
Thanks Nils, appreciate it!
I'll have to admit the current crypto/NFT hype did have something to do with the idea 😉
02-16-2022 1:48 PM
02-18-2022 7:34 AM
02-19-2022 12:44 AM
You did a great job! GitHub, Command Line, Node, MD files, installing and running the code.
02-22-2022 2:33 AM
I second @jerryjanda! Participated in the challenge with a "tiny little bit" of help by lovely Developer Advocate @nicoschoenteich - thanks Nico and High Five to you!
02-19-2022 7:27 PM
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?
03-01-2022 4:00 AM
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 !
02-20-2022 7:31 AM - edited 02-20-2022 9:06 AM
Created a few additions to the current SAPUI5 app, and learned a lot about translation ... mostly the pitfalls 😮.
My PR is at: https://github.com/SAP-samples/sap-community-code-challenge/pull/4
I did the following:
Hoping to make additional features, and see what Vinay is doing with AppGyver, but wanted to join the party 😃
02-23-2022 1:29 PM - edited 02-23-2022 1:31 PM
Added the SAP community badges of the entered community name to the enhanced picture and some minor stuff.
Pixel person "borrowed" from @nicoschoenteich 😉
02-24-2022 1:39 AM
WOW! If I could give like 10 kudos I would - very cool idea!
02-27-2022 4:25 AM - edited 02-27-2022 5:07 AM
03-03-2022 3:05 PM
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!
03-11-2022 2:25 PM
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-
03-15-2022 5:44 AM
Excellent work Gabor. Please can you let us have your SAP Community Profile URL? Thanks!
03-16-2022 1:11 AM
03-22-2022 4:52 AM
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
03-22-2022 4:54 AM
03-25-2022 12:44 AM - edited 03-25-2022 12:45 AM
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.
03-25-2022 12:54 AM
Thanks for idea. And I have one question for understanding. ui5.yaml is a part of ui5tooling? It is not a part of classical sapui5 application?
03-25-2022 12:56 AM