cancel
Showing results for 
Search instead for 
Did you mean: 

SAP Community Code Challenge - Learn, share and discuss!

lauraschmitz
Moderator
Moderator

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! 

34 REPLIES 34

FredericGirod
Member

Hi Laura,

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, ...   

 

Best Regards

Fred

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.

I suspect that some may even turn it into an ABAP code challenge. Who wants to try to port the SVG image manipulation to ABAP?  IGS (Internet Graphics Server) would be a key piece of that I bet. 

qmacro
Employee
Employee

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!

☞ https://www.youtube.com/watch?v=CRUa3Ndp4aU 

EPISODEIMAGE.png

nicogeburek
Employee
Employee

Hi everyone,

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

nils-lutz
Member

Hi,

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.

  • switched to yarn as package/dependency manager
  • added missing Typescript types via awesome DefinitelyTyped (@types) project
  • enhanced yarn scripts
  • added Prettier for code formatting
  • fixed typo in border.png filename
  • moved UI translation texts to app i18n files
  • fixed UI namespace
  • ported UI from JavaScript to Typescript
  • removed unnecessary console.log() occurrences
  • switched to SAP Horizon theme

You can find the commits and my thoughts about what else is missing here. Always fun these challenges 😄

My People Profile

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?

craigcmehil
Employee
Employee

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.

 

Was that the Sharp module?  Do you have an M1 Mac?  Sharp does have some native libraries but they are supposed to work on the M1.  We tested in multiple Linux environments, Windows and on a non-M1 Mac and didn't hit any issues.  So curious if this is specific to the M1.

@thomas_jung it was @sap/logging actually and yes M1 MAC

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. 

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....

nicogeburek
Employee
Employee

Hi everyone,

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:
Screenshot 2022-02-16 at 21.28.48.png

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 🙂

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 😄

Thanks Nils, appreciate it!

I'll have to admit the current crypto/NFT hype did have something to do with the idea 😉

Brings back good memories of Lucasarts SCUMM games like Day of the Tentacle or Monkey Island.

day_of_tentacle.pngimage (10).png

jerryjanda
Moderator
Moderator

Done! (Although, OK, maybe I had a little bit of help...) https://people.sap.com/jerry.janda

You did a great job! GitHub, Command Line, Node, MD files, installing and running the code. 

I second @jerryjanda! Participated in the challenge with a "tiny little bit" of help by lovely Developer Advocate @nicogeburek - thanks Nico and High Five to you! 

Vinay-S
Member

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?

Enjoy learning!

Here it is using the Appgyver, unfortunately with some limitations listed below.

  • the web preview does not open the image editor flow function. It works only on mobiles
  • on the iOS, the image editor gives only option to crop. Also, the file explorer shows only the public storage in the mobile (iCloud drive or the iPhone) due to some restrictions on iPhone. In other words it does not give access straight away to the photo library or the album
  • I would have loved to share the QR code to preview the app on the "SAP Appgyver" mobile application but it shows profile data and my other projects. Hence could show only screenshots
  • the trail account does not give options to collaborate using git or any other platform

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.

1. landing page.jpg

Enter the SAP profile ID which is later used to open the public profile page

2. input field.jpg

 Step-1:

To process image step-by-step select the button (which is actually a drop down) and pick first option to browse and preview image

3. drop down options.jpg

 After selecting browse image, pick an image from the file explorer to process further

3.1. browsed image.jpg

Step-2:

For enhancing image, select step-2: Enhance Image option and it is going to open the selected image on the image editor

4. image editor.jpg

Step-3:

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.

5. edited image preview.jpg

6. sae image.jpg7. profile.jpg

Technically, the flow function below for reference.

flow function.jpg

Happy learning !

thecodester
Employee
Employee

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:

  • Added support for several other languages, including RTL (Hebrew),.
  • Added toolbar button to change the language.
  • Fixed bug where you can click Save As even when no image is loaded.
  • Spaced out the toolbar, using CSS classes.

Hoping to make additional features, and see what Vinay is doing with AppGyver, but wanted to join the party 😃

UpdatedApp.png

AlexFrank
Member

Added the SAP community badges of the entered community name to the enhanced picture and some minor stuff.

PR: https://github.com/SAP-samples/sap-community-code-challenge/pull/5

AlexFrank_6-1645651665877.png

AlexFrank_7-1645651669709.png

AlexFrank_8-1645651674462.png

Pixel person "borrowed" from @nicogeburek 😉

https://people.sap.com/alexfrank

WOW! If I could give like 10 kudos I would - very cool idea!

Nice. I expanded on what you did, adding a chatbot that includes the ability to add the community avatar from a chatbot conversation.

codechallenge.gif 

huseyindereli
Member

I really wanted to participate. Finally I had time to add a tiny little feature which allows you to import your github profile picture.

https://github.com/SAP-samples/sap-community-code-challenge/pull/6

Step 1.

huseyindereli_0-1646348503119.png

Step 2.

huseyindereli_1-1646348635934.png

Step 3.

huseyindereli_2-1646348656824.png

It's was nice to explore the project and thanks!

☮️☮️☮️

 

GaborToth
Member

Hello Members!

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.

GaborToth_0-1647036082142.png
To create a new tab, it is necessary to do some deep javascript investigation, but the result worth it all! With a few lines of code, we can add new buttons, and this only the edge of the iceberg, because a full new layout can be added (if you are familiar with javascript views).

My other goal was to add new filters. The already existing filters are really cool, but the best would be if users could implement our own filters. Now this is though task, as the ImageEditor control has a dedicated javascript file to handle the methods, to be able to add new filters, it is needed to add the filter rules to the canvas, preview, and downloaded items.

For this challenge I added four new filters, three of them are colour channel related, one is my own „Euphoria” mode.

GaborToth_1-1647036082245.png

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:

GaborToth_2-1647036082315.png


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.

Conclusion:
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-

Excellent work Gabor. Please can you let us have your SAP Community Profile URL? Thanks! 

Hello qmacro, my SAP Community Profile URL is the following:
https://people.sap.com/gabortoth05

askarpov1
Member

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

askarpov1_0-1647949379933.png

 

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.
BR, Nico

Hi @nicogeburek 

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?

Correct.