A New Approach for "Icons" in arcplan
Mostly you are offered png files in different resolutions for multiple purposes (transportation, navigation, etc.), sometimes svg files, too. Maybe you used the "Material Design Icons" by google.
In terms of arcplan you cannot use svg files. So you are using png files instead. But sometimes your icon needs to be red, or green, or blue, or ... So you start creating copies of the original and edit these in photoshop or similar apps. Some time later you realize that your picture document contains "billions" of icons and your maintenance / making it reusable efforts are gigantic.
So here is my approach:
Use icon fonts. There are many available for free. I use Font Awesome, but the material design icons are also available as a font.
The main benefits are:
- It is leightweight - only a couple of kB and you have more than 600 icons at hand
- It is vector based - resize it the way you need - it's always brilliant (no pixel trash).
- You can dynamically use it with the arcplan functions - make it bold, red, green, blue or whatever you like
- Your maintenance efforts are much smaller
So let's start implementing ...
Download your favourite icon font. In my example I have an extra folder in the "wwwroot" folder of your arcplan server. Let's call it "font". Paste the Font Awesome (fa) folder (without the version number) into it. So you should have something like this (German Windows Server 2012 system):
As you can see there are sevaral font types in the fonts folder of fa. That's because each browser needs a different type. See more details at: https://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/ ("The cross browser reality").
In order to make IIS work the way you want you need to make some modifications regarding mime types. See more details at: https://weblog.west-wind.com/posts/2016/jan/25/fontawesome-fonts-and-mime-types-in-iis-and-other-web-servers
Now you need to tell arcplan to load the css file. To achieve that you need to have an init apd file which get's started upon application start. Create a text object "[<Mytextobject>]"and paste the following formula into it:
function addCSS(href) { if ($("head link[href*='" + href + "']").length === 0) { $('
').appendTo("head"); } } addCSS("/font/font-awesome/css/font-awesome.min.css");
Create then a button object (this button needs to be executed during application start) with the following formula:
STARTJS ( "eval" ; [<Mytextobject>] )
Now install the TTF font type locally on your machine (each developer should do so).
To properly use fa you can do the following:
Create a single object. Make it the font type "fontawesome" in your formatting dialogue. Pick (select and copy to your clipboard) an icon (only the icon itself) at http://fontawesome.io/cheatsheet/ and paste it into your single object. Unfortunately I did not find a way to tell arcplan to use the unicode string instead. Maybe some other arcplan designer can help out?
Now you see it in the arcplan designer. You can format it the way you like. Finally you can reference this object in any other formula. Here is my set of directional icons in my icon apd file:
In order to print these Icons you have to use the ghostscript printing method (see more in the arcplan administration console documentation). Further infos regarding how-to properly install the ghostscript driver can be found here: https://community.arcplan.com/forums/customerservicetipsandtricks/installing_the_ghostscript_printer_driver
Remember to install fontawesome TTF on your server!
You can pimp your application by creating your own font. If you have your own svg files (e.g. each file represents a division of your company) go to https://icomoon.io and create your own font. Please consider: the used svg files needs to be black/white. So multiple colors are not possible in this approach.
Create a new "addCSS" line in your text object (mentioned above) and apply the same way to your newly created font.
In order to check your implementation use a device where no font is installed locally. Otherwise your broswser will load your locally stored fonts.
I hope you like this "new" apprach, too. Enjoy.
Cheers
Axel
Update 2016-09-26: New (better) link regarding IIS and MIME types, Ghostscript Printer Link
- 2,344 views
- 0 previews
- 8 versions
- 6 replies
- 1 follower
- Posted By:
- Axel Langer
- August 18, 2016
About this forum
- 27,005 views
- 30 topics
- 3 followers
Your forum to share new discoveries, nifty solutions and helpful workarounds
Page Options
6 Replies
Axel, all,
This is indeed very powerful and light. The only thing I found a bit too labor-extensive, was copying and pasting each single icon. I want to be able to use, each and every icon in the set at will, not copy/paste them on an individual basis.
So, I just selected the text on the Cheat Sheet (starting at the fa-500px icon, to the end) and pasted it into a column object. Some entries had a 4.x prefix, so I trimmed them away in another column object. Then used SUBSTRING to create column objects with:
The result is a small apd which anyone can use for reference. Feel free to use.
N.B. If you want to copy the objects, please note that you need to include the objects on Level1.
Attachments
I want to give an update on the fontawesome font:
Unfortunately fa has some major issues regarding Windows 7 and IE 11. Icons are not displayed
Because our client uses exactly this combination we switched to Material Design Icons by google. I used the following ressource (here copy and paste is possible):
http://zavoloklom.github.io/material-design-iconic-font/cheatsheet.html
The approach mentioned above itself has not changed. Only the icon font face.
As it turns out, the font is not really the problem, it seems.
What finally really helped was to obtain the css file via a content delivery network (cdn), not from the IIS itself.
As mentioned above: Only IE 11 makes this trouble, to my knowledge.
Hope this helps!
Thanks, Axel.
I was alreadly (almost) worrying, because FontAwesome does the job really well. :) Said goodbye to Iconfinder and the likes.
I have another update regarding the fonts-no-show problem in IE11.
Well, unfortunately IE11 is a b....! None of the above mentioned solutions worked flawlessly. A little digging showed that the problem is the cache handling of the IE. Without having loaded the font initially everything works fine. After closing and reopening IE with the application the fonts are a no-show (thanks to "automatic cache handling" in IE and some sort of "it's not a bug, it's a feature")!
OK, how to fix this? You need to tweak the cache control behaviour in IIS.
Let's say, you have created that "font" folder in your "wwwroot" folder. Go to the IIS Administration an navigate to "Sites\Default Web Site\font". Open then "HTTP Response Header". Create a custom Header with "Name: Cache-Control" and "Value: No-cache".
That should force IE to NOT cache all fonts used in your application(s). Local loading of the css sources is no longer an issue ...
Would you like to comment?
You must be a member. Sign In if you are already a member.