Design Studio SDK – Pictograms
Maybe you want a different way to convey a single KPI in order to draw attention. Perhaps infer a goal without using conditional formatting. Maybe it’s a different way to show a percentage. Maybe you are just bored of KPI tiles.
In SAP Lumira we do see a degree of capability to create Infographics in the form of vector graphics with dynamic texts, etc but I hadn’t yet in Design Studio (nor Lumira at that) seen the ability to create something similar to example like this:
Example taken from https://vis4.net/blog/posts/choose-your-icons-wisely/
(Note: This was the first example I ran across – I’m not agreeing for or against healthcare reform in the US. π )
(Note 2: The author on the page laments that the ‘quality’ of this icon is not meaningful enough, but I’m not that picky, let’s move on to seeing what we can do.)
I googled for D3 pictogram and ran across this good starter page with example code on how I could create a pictogram in D3: Pictogram grid in d3js
I’ve since heavily modified this code to allow for parameterization of properties such as:
- Background Color
- Fill color and empty color of shapes
- Font size/color/family
- Shape (This is the ‘d’ attribute of an SVG path)
- X and Y padding
- Number of Rows and Number of Columns
- Fill direction (forward or backward)
- Partial fill (top to bottom, bottom to top, left to right, right to left)
- Alignment
- Title with placeholders (Example: {value} out of {max}:
- {value} – Databound (or manual) value of a single KPI
- {max} – ‘Target’ or ‘Max’
- {scaledvalue} – Value converted based on number of shapes (rows * columns)
- {scaledmax} – Number of shaped (rows * columns)
- {percent} – Percent of max that the value has
So how does this look at design time? Let us pull in a Pictogram and see the defaults:
Here we see a pictogram similar to the D3 example with a placeholder manual value and a max of 20 set as a default. Also you can see the General cosmetic properties on display.
What if we’d like to do a fancy progress indicator? Let’s mess around with some of the properties:
So a few things I’ve changed. The most important ones were I changed rows to 1, giving a shape/cell count of 10, and I changed a few colors, and the Shape property to be the SVG path of the Windows logo. (Courtesy https://commons.wikimedia.org/wiki/File:Windows_logo_-_2012.svg)
What else? Could we do a single icon representing a slow fill instead of multiples?
Yes, with a few other cosmetic changes, and changing the fill direction to ‘Bottom to Top’ we can achieve that effect.
(Shape for Apple logo courtesy of https://commons.wikimedia.org/wiki/File:Apple_logo_black.svg)
So from here I started playing around a little more just to see the variety and below you can see a compilation of several different pictograms you could send up with.
The source code is available to pull down now or you can view the main important parts on Github here:
sdkpackage/Pictogram.js at master · org-scn-design-studio-community/sdkpackage · GitHub
This one ended up being pretty fun to play with and will be available later this week in the open source SCN Design Studio SDK Development Community download. (Just a few minor things to clean up before then)
As always, feedback or ideas always welcomed.
Great Job ! This will be very useful and helpful.
Thanks for your work !
I have one question concerning this add-in for SDK Community. How can we update this SDK ? Do we have to uninstall/reinstall ? What is the better way ?
If you are downloading the .ZIP and installing based on the archive, you should be able to re-download the .ZIP to the same location and file name and then perform and update in the Help -> About -> Installation Details, select the component and click 'Update...' - It will scan all previous update locations (either URLs or ZIP archives) and try there first.
If that does not work, you can remove the component via the Help Menu, and then reinstall as if it were the first time.
Wow Mike!,
and yesterday I thought that with more than 100 open source, free for use components in the SCN community for Design Studio there is not much to add.
not counting prototypes, now there are 104!
Today I see this post and think my imagination is in freezing stage - perhaps due to the coming winter in Germany π
Now the common infrastructure we have invested in last yer is paying off.
Very nice looking visualizations!
Karol
Thanks, Karol π
I've got a few other ideas rattling around my head. If only there were more time in a day to think through them all!
I'm sure that your "writer's block" will only be temporary. π
It's said that great characters make the book memorable, not the plot. I believe great visuals make the dashboard memorable and you've made a fine contribution here. Thank you!
HI Mike,
that is a cool one π
cant wait to try it out.
Cheers
DIrk
Wow Mike, nice work here ... !
I am eager to use it in my next projects π
Hello,
One question concerning Pictograms. To change image, you said we have to change the Shape. How did it works ?
When i have a SVG like you gave (https://commons.wikimedia.org/wiki/File:Apple_logo_black.svg), how can i update Design Studio to take this image ?
Thank !
Go direct to the SVG in Chrome:
https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg
Right-click - View Page Source.
Find the <path> element in the source.
Copy the contents of the d attribute (leave off the quotes). Paste into the shape property in the Pictorgram.
Example 'd' attribute:
m127.805969,90.003128c0.224838,24.213104 21.241287,32.270615 21.474121,32.373459c-0.177704,0.56826 -3.358078,11.482742 -11.072464,22.756622c-6.668747,9.746841 -13.590027,19.457977 -24.493088,19.659103c-10.713348,0.197403 -14.158287,-6.353043 -26.406677,-6.353043c-12.24469,0 -16.072174,6.151901 -26.213551,6.550446c-10.52422,0.398254 -18.538303,-10.539917 -25.26247,-20.251053c-13.740021,-19.864456 -24.24024,-56.132286 -10.1411,-80.613663c7.004152,-12.157551 19.521101,-19.85622 33.10713,-20.053638c10.334515,-0.197132 20.089069,6.952717 26.406689,6.952717c6.313614,0 18.167473,-8.59832 30.628998,-7.335548c5.21682,0.217129 19.860519,2.1073 29.263641,15.871029c-0.75766,0.469692 -17.472931,10.200527 -17.291229,30.443592m-20.134499,-59.456692c5.587379,-6.7633 9.348007,-16.178439 8.322067,-25.546439c-8.053787,0.32369 -17.792625,5.36682 -23.569427,12.126399c-5.177124,5.985922 -9.711121,15.566772 -8.48777,24.749359c8.976891,0.69453 18.147476,-4.561718 23.73513,-11.329308
Hi Mike,
I am facing problems while converting any image to respective svg code. Tried a couple of online converters but they are not converting as they should do.. π
Tried Vectormagic.com but it didn't worked the way I want. Do you have any reference, How to convert an image / icon to svg attributes.
Also, what can we do in case we have multiple <path> elements in source.
Regards,
Arpan
Hi Mike,
I was trying to follow your example of single icon, but when using {percent} variable on title (as in your example) it doesn't work,
I checked your source code and i didn't find it either, I guess that this is the root of the issue π .
It will very helpful to have this feature as currently there is no method available to set the title via scripting.
Is there anything i can do to make it work?
Thanks!!
Ouch, you are right - My example was a local Git branch that had the {percent} computation which I never committed back in the public branch... I can push that back into the public branch this week. Sorry about that!
FYI - I've added the code - Me or Karol will re-compile the bundle this week.
{percent} placeholder fix for · org-scn-design-studio-community/sdkpackage@7d083f5 · GitHub
Awesome! thanks so much π
Also, is there a way to manage decimals? when using the {scaledvalue} i get this huge amount of decimals (see below) i don't know how to get rid of them π
Thanks again!
Would adding a decimal precision property be helpful? I can maybe add that, too.
Sure! if you can make this property work on this variables will be awesome π because some times you are working with figures that doesn't have sense to have decimals and in other cases with two decimals is enough.
Another question for the percentage, will it be scale? I mean will multiplied by 100?
Thanks
Would this work? See different treatment for whole numbers (20) and your percentage questions. Screenshot with properties shown for reference.
Hi Mike!
It looks awesome!
When the next release will be available for download?
Thanks
Hi Mike,
I am facing problems while converting any image to respective svg code. Tried a couple of online converters but they are not converting as they should do.. π
Tried Vectormagic.com but it didn't worked the way I want. Do you have any reference, How to convert an image / icon to svg attributes.
Also, what can we do in case we have multiple <path> elements in source.
Regards,
Arpan
Hi Arpan,
in the PDF print component we use one Open Source conversion. Output (screen of PDF):
The code is in repository,
sdkpackage/src/org.scn.community.utils/res/PdfPrint at master · org-scn-design-studio-community/sdkpackage · GitHub
used converters:
sdkpackage/src/org.scn.community.utils/os/canvas at master · org-scn-design-studio-community/sdkpackage · GitHub
perhaps this helps you.
Karol
Great extension ! The rendering is really nice π
For more flexibility, it could be interesting to have a little bit more scripting functions, such as :
Agreed, it could do for some script API improvements. Β My time has been limited lately otherwise I'd jump on it! Β However remember it's all open source if you'd like to take a crack at it! Β π