Skip to Content
Author's profile photo Michael Howles

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:

/wp-content/uploads/2015/10/example_804206.png

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:

/wp-content/uploads/2015/10/picto1_804211.png

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:

/wp-content/uploads/2015/10/picto2_804215.png

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?

/wp-content/uploads/2015/10/picto3_804216.png

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.

/wp-content/uploads/2015/10/picto4_804217.png

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.

Assigned Tags

      21 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      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 ?

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      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.

      Author's profile photo Karol Kalisz
      Karol Kalisz

      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!

      scn-com.PNG

      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

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      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.  πŸ™‚

      Author's profile photo David Bargh
      David Bargh

      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!

      Author's profile photo Dirk Mayrock
      Dirk Mayrock

      HI Mike,

      that is a cool one 😎

      cant wait to try it out.

      Cheers

      DIrk

      Author's profile photo Former Member
      Former Member

      Wow Mike, nice work here ... !

      I am eager to use it in my next projects πŸ™‚

      Author's profile photo Former Member
      Former Member

      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 !

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      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

      Author's profile photo arpan gupta
      arpan gupta

      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

      Author's profile photo Maria Daniela Petersen Marichal
      Maria Daniela Petersen Marichal

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

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      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

      Author's profile photo Maria Daniela Petersen Marichal
      Maria Daniela Petersen Marichal

      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 πŸ™ pictogram_decimals.PNG

      Thanks again!

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      Would adding a decimal precision property be helpful?  I can maybe add that, too.

      Author's profile photo Maria Daniela Petersen Marichal
      Maria Daniela Petersen Marichal

      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

      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      Would this work?  See different treatment for whole numbers (20) and your percentage questions.  Screenshot with properties shown for reference.

      /wp-content/uploads/2015/12/rounding_842908.png

      Author's profile photo Maria Daniela Petersen Marichal
      Maria Daniela Petersen Marichal

      Hi Mike!

      It looks awesome!

      When the next release will be available for download?

      Thanks

      Author's profile photo arpan gupta
      arpan gupta

      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

      Author's profile photo Karol Kalisz
      Karol Kalisz

      Hi Arpan,

      in the PDF print component we use one Open Source conversion. Output (screen of PDF):

      ori1.PNG

      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

      Author's profile photo Former Member
      Former Member

      Great extension ! The rendering is really nice πŸ™‚

      For more flexibility, it could be interesting to have a little bit more scripting functions, such as :

      • PICTOGRAM.setKpi()
      • PICTOGRAM.setMaxKpi()
      Author's profile photo Michael Howles
      Michael Howles
      Blog Post Author

      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! Β πŸ˜€