Skip to main content

Has anyone built a new logo for an add-in for the new MyGeotab UI?

FleetNavSystems-1081
Original Poster

Hey, Everybody!

 

I'm working on building new logos for a couple of custom add-ins for when MyGeotab officially switches over to the new UI.

 

I'm familiar with this document:

New Designs Specifications for MyGeotab Add-In Icons

 

I'm pretty decent with Photoshop and I have Adobe Illustrator for this project (although I'm a little bit of a n00b with the latter); I'm just not really sure how to get it so that my designs match the specs required here. When I try to design at only 24 pixels, everything is fuzzy, even when I have it so that my design is snap-to-grid.

 

So, anyway, I think I'm missing something here.

 

Admittedly, I'm quite a bit of a newbie when it comes to logo-design stuff.

 

Has anyone already built one of these? If so, would you be able/willing to share how to take an existing .ai file and make it match the required specs? Alternatively, just knowing the general formatting anyone else has used would certainly help me out a lot here.

 

Thanks in advance for your help! :)

 

Best,

Joy @FleetNavSystems-1081

Join the conversation

You need to be logged in to reply to this post and participate in the Geotab Community discussions.

Top Answers

FleetNavSystems-1081
Original Poster

UPDATE: Something was wrong with my Illustrator settings. I got some help elsewhere and was able to change my icons from being in points to pixels, and to get them working on my artboard without getting all fuzzy.

I'm good here, thank you all for your help and all the info you shared here! 😃

21 Replies

Genevieve-1051
Community Administrator

Hi @jjake-8255​ !

 

I was hoping @LPPapillon-1145​ , or @TuckerBA-1087​ , or someone had started experimenting with these - but they are pretty new so it might be a little until other users have some feedback to share.

 

But let's see what I can find internally 😁

 

Warm Regards,

Gen

We haven't started creating them yet, it was my understanding that we couldn't upload the new logos until the next build. Is that correct? If not we'll start working on it internally next week because we really want to get rid of those circle icons next to all of our add-ins as soon as possible.

 

I won't be the one doing it here because I have very little experience in Illustrator or Photoshop, but once we start working on it I'll get our graphics guy to answer the question if no one else has any insight before then.

FleetNavSystems-1081
Original Poster

thank-you-so-much-girl-christmas 

I don't know about when we can do this, was just trying to get ahead of the curve so I could cancel my Illustrator subscription (don't really need it all year--just for this project). 😅

We did a couple, nothing final but we started. The end goal is to produce a SVG file, so Photoshop is not the tool you want to use. It's vector graphics, you'll need a vector tool (like Illustrator). I'm not an Illustrator guru either, but I couldn't figure how to draw paths 2px wide, Illustrator works with pt and not px units.

What bothers me the most is that we have to change the add-in code, we have thousands of clients, some with 15 add-ins, and we have to update the JSON code for each. That is a BIG (HUGE) inconvenience.

FleetNavSystems-1081
Original Poster

So, you can actually work in Illustrator with pixels, but I can't figure out how to make an icon at only 24 px that doesn't look blurry and ugly (and don't get me started on the fact that this method doesn't let me do any rounded edges!!). You can make the icon 2 px, but even when you snap to the grid of the artboard, you get blurry lines if you try to do anything that isn't angular (i.e. rounded edges, lol).

I'm sure I'm just missing something here, but it's definitely been a challenge for me so far. I can do a regular logo as a .ai file, just can't figure out how to format to that tiny without losing the bulk of the resolution/quality. 🤔

Agreed that this is a HUGE inconvenience, @LPPapillon-1145​. Thanks for the extra feedback here. 😎

FleetNavSystems-1081
Original Poster

UPDATE: Something was wrong with my Illustrator settings. I got some help elsewhere and was able to change my icons from being in points to pixels, and to get them working on my artboard without getting all fuzzy.

I'm good here, thank you all for your help and all the info you shared here! 😃

@LPPapillon-1145​ - Help me to understand what changed in your Add-In JSON code? Was it changing your URLs from JPG to SVG? Because I'm unclear of what else has changes n the new file format requirements. Thanks

Lance, we made the choice years ago that it was a better idea to base64-encode the icons and embed the data-URI directly in the add-in JSON code. This avoids having the UI stutter when loading the add-ins initially - we had noticed if we hosted the icons on our cloud and used the URL in the add-in config, it would load the MyGeotab menu first, render the stock icons, then a few ms later load our add-in icon. I hated it. Our workaround worked great and I never regretted it - until now. We have to find all databases where all our add-ins live, and mass update the JSON codes for each of them. We have about 120 different add-ins across thousands of databases... some of them we have on registry and have service accounts to, but some we don't. It'll be hell...

@LPPapillon-1145​ - Ahh. I see totally. Thanks for the Clarification. I forgot about the base64 embedded option. Yea, you're right. That is a major support upgrade headache.

 

One option may be to possible. If there is one Add-in app that most of your customers use that has uses admin privileges, you can write some update code to perform a get.SystemSettings() API call to scan and then update (if required) the JSON code in "customerPages" to modify the ICON URL to use an external SVG URL to your cloud service. That way the first user to run your Add-In, repairs your installation and everything is viewed correctly on the nex MyGeotab page load.

 

Its possible the stutter delay has been resolved with a re-prioritization of new MyGeotab UI loading. It would need to be tested and verified, of course...Just a thought.

Thanks for your input. We have used scripts to mass update or deploy add-ins using SystemSettings Get/Set on customerPages before, but I haven't had an add-in self-update its code before, and I haven't had an add-in update sibling add-ins codes 😅. I will definitely have a plan to update the vast majority of our add-ins on a massive scale, but I just KNOW we will miss some of them, and 2 years from now we'll login to a customer database and see the ugly circle icons and go "wait, we missed that one?!" 😥

@jjake-8255​ - Our database is using the new UI Design, so we were forced to re-generate our Add-In icons. Unfortunately our design team created the AI files so I do not have that to share, but they told me that to comply there were significant changes to our SVG files. Here is what they summarized.

 

"The biggest difference is with the uniformity requirements. All icons must be set in one-colour: #66788C and have a uniform line style with a stroke width of exactly 2px with rounded end caps and miters."

 

We replaced the new SVGs on our server and verified it using CURL to confirm the CORS requirements

cors-svg 

But even after clearing our MyGeotab browser cache + removing/re-adding our Add-In JSON in our database

{ "name": "SpartanLync Tools", "supportEmail": "support@spartanlync.com", "version": "1.0.1.02", "items": [{ "url": "https://help.spartansense.com/geotab/spltools/splgeotabtools.html", "path": "", "menuName": { "en": "SpartanLync Tools" }, "icon": "https://help.spartansense.com/geotab/spltools/images/spartanlync-tools-menu.svg" }] }

Our app icons still will not load in the new MyGeotab UI.

new-mygeotab-uiBut they load just fine in the old MyGeotab UI using the new style guidelines

old-mygeotab-uiSo we're not been able to prove the new guidelines work either

FleetNavSystems-1081
Original Poster

Thank you so much for this info, @lmit-1292​! Hopefully it will help someone from Geotab to be able to help us get to the bottom of this faster. 🙂

 

Best,

Joy @FleetNavSystems-1081

I can confirm I am able to test on mypreview which is running on 2101 preview release. If you are testing on a 2004 server, then you will not be able to see the new add-in icons. If you are on mypreview on 2101, and it's still not working, open the Chrome console and you should see errors being logged there. See here, 2 that have not been updated vs 1 that has.Screen Shot 2021-02-08 at 4.39.30 PM

Thanks for feedback @LPPapillon-1145​. But you raise some interesting concerns.

 

We are not using the mypreview version as our products are live with an active customers base.

Our live database (and I may presume) some of our customers databases have been recently updated to the following release with the new UI design, Version: 5.7.2004.1182-release2004-a1d3476

new-myGeotab-releaseI'm presuming the attached screenshot (with our broken default icons) is the 2004 release you are referring to in your post.

 

Are you saying that this release was rolled out without support for properly rendering icons??

That there is no fix for this icon issue until they publish a 2101 release to live?

 

 

 

 

 

 

Correct, though you should take note than in 2004, the user has to have "Feature Preview" enabled to see the new UI, otherwise the default is to show the old UI still. In that release, add-in icons are unsupported, they will all show a hollow circuit when unselected, and a full circle when active. It is unfortunate, as the vast majority of our customers have Feature Preview, and we have lots of add-ins on our typical client database, so that makes the UI VERY confusing right now with lots of add-ins and they all look the same without an icon.

2101 will introduce the new add-in icon functionality, but that only works with flat, single color SVG as per the new guidelines.

FleetNavSystems-1081
Original Poster

Agreed. This would be a lot easier to work with if it were possible to keep the other "Feature Preview" options available and just turn off the UI changes until they are solid. We have customers running Messages and stuff, so turning off the new UI isn't really an option. 🤔

@LPPapillon-1145​ - I am speechless.

Why would Geotab as a strategy, release a software update that intentionally breaks all Add-In icons?

 

Unfortunately, like yourself our suite of Apps uses the feature preview to enable the Deeper Add-In functionality. So using the UI is not a choice for us and our customers. Its not a hidden feature, but a requirement that we've automated to make it easier for our customers to use our products without technicalities.

 

This just does not seem very well thought out on Geotab part. I wonder how long we'll be telling our customers to wait for the new release. Q2 is a long ways away.

@jjake-8255​ and @LPPapillon-1145​ . I guess we're all in this pickle-barrel together.... sandwich between Geotab and our Customers. Does not make for a good presentation for our sales teams though.

FleetNavSystems-1081
Original Poster

I agree. I think a big thing that Geotab needs to improve is the perceived value of its product. We may know from experience that it works better than the competitors' ones, but stuff like this makes it appear to be broken, and not ideal for things like Sales presentations or instilling confidence in current customers that the system is super reliable. I'd really like to see Geotab focus on this, as I think it would make a big difference for resellers and end-users alike in being able to stand behind it as as good a product as it actually is.

Well Said!

FleetNavSystems-1081
Original Poster

An okay work-around for this in the mean time is to have them expand the sidebar. The labels still have the add-in names, which does make it a little more navigable for now.

 

Best,

Joy @FleetNavSystems-1081

Still have questions?