addin button image

[NachoShaw]

Hey

what is everyone using to make good quality images? Seems that no matter what i try, i get a crappy pixelated image on the ribbon. Is there any lit of recommended size, file type, method?

Thanks

[matt_jlt]

Hi Nachito, I have the same problem when i use any of the methods that derive a button from an image file. The only way i have managed to get clear icons is by using .ico files with multiple size formats in each one (16x16,24x24,32x32)

If you / anyone else knows a way to get nice high quality transparent images it would be great if they can share a method for it.

Here is my snippet for creating the images from an ico file

https://github.com/mattjlt/Inventor-Code-Library/blob/master/Snippets/GEN_CreateButtonImage

[NachoShaw]

Hey

There isnt much lit on icons. For now i have added a white background but id prefer a real transparent one that doesnt have a crabby silhouette edge around it.

Thanks

[matt_jlt]

lit as in literature?

You have a few options to create the icons.

* Easiest way is to get an icon creating program.

* Can try using an online free icon converting program (i havent had the best results using these)

* You can use the free visual studio community built-in icon editor - i have used this a lot.

* Download already done icons online.

Apart from creating my own from scratch, I found downloading png / svg icons to be the best for creating them.

[HideoYamada]

Hi,

I'm using Affinity Designer.

The icons are once created as vector data and then converted to bitmap 16x16 and 32x32.

If you want to support the dark theme perfectly, you should create icons for the dark theme and replace with them if the theme is changed.

I have posted about the icons and the dark theme before. (But it is in Japanese, sorry.)

https://qiita.com/yamarah/items/b1153186bccb15f68177

[NachoShaw]

Hey

yes lit as in literature.

I have tried an icon creation program but prefer illustrator as i know that. It doesnt matter though what image a create, they are always poor quality & pixilated. I did wonder if the ribbon supported svg icons but i cant find anything about that. As of right now, no matter whot icon size or quality i create and how simple or complex, transparency has this white silhouette around the icon and its identifiable..

Cheers

[HideoYamada]

Hi,

Inventor treats the translucent pixels of the icon as having a white background, therefore, edge pixels must be baked as non-transparent.

[matt_jlt]

Yes, i get the same thing when you try to scale it. I dont think it supports partial transparency like a png file does (i could be wrong) but that is what the outlines could be.

And if you dont make an icon for each size,  the resizing is of very poor quality when trying to just use programmatic scaling.

I suggest making a .ico file with a the different sizes you need and check each one is clear in the preview / visual studio icon editor and you will have no problems.

[Maxim-CADman77]

I wonder whether you finally found the way to get clear Icon for Add-In button within Dark Theme?

I've played around a bit and discovered that same (16x16) PNG that looks blurry as Add-In button Icon ... looks clear when used as iLogic rule Icon:

PS:
I've also tried "Button Constructor" (subject-related Add-In by @JelteDeJong) but got the same "blurry" result.

PPS:
For all interested in improving custom button icon behavior in Inventor - Please vote for related Inventor Idea I've created - Icon Customization for external iLogic rule ribbon

[Maxim-CADman77]

@HideoYamada 
I wonder If I understand you correct:
You suggest escape using images with transparent background at all and Create/Using six images for each button:
 - Small-Current
 - Small-White
 - Small-Dark

 - Large-Current

 - Large-White
 - Large-Dark

... and overwrite Small-Current (with either Small-White or Small-Dark) and 

Large-Current (with Large-White or Large-Dark)

on Add-In load and on each Theme change event?

[NachoShaw]

That's how I read it too. While I understand that method may work, it's a bit of work. 

[HideoYamada]

I prepare four images (Large-Light, Large-Dark, Small-Light and Small-Dark) and my framework switches Light/Dark icons on ApplicationOptionChange event.

private void ApplicationEvents_OnApplicationOptionChange(EventTimingEnum BeforeOrAfter, NameValueMap Context, out HandlingCodeEnum HandlingCode)
{
    if (BeforeOrAfter == EventTimingEnum.kAfter)
    {
        if (IsThemeUsable)
        {
            var lastThemeName = ActiveThemeType;
            UpdateActiveThemeType();
            if (ActiveThemeType != lastThemeName)
            {
                // Theme has been changed.
                foreach (var addInModule in LoadedAddInModules)
                {
                    addInModule.OnThemeChanged();
                }
            }
        }
    }
    HandlingCode = HandlingCodeEnum.kEventNotHandled;
}

public virtual void OnThemeChanged()
{
    UpdateControlDefinitionIcons();
}

protected virtual void UpdateControlDefinitionIcons()
{
    if (!IsDarkThemeIconUsable) return;
    if (AddInServer.ActiveThemeType != InventorTypes.Themes.DarkTheme)
    {
        ThisDefinition.StandardIcon = StandardIcon;
        ThisDefinition.LargeIcon = LargeIcon;
    }
    else
    {
        ThisDefinition.StandardIcon = DarkStandardIcon;
        ThisDefinition.LargeIcon = DarkLargeIcon;
    }
}

[Maxim-CADman77]

@HideoYamada  
Thank you for the attempt to minimize the work for those who is willing to try this workaround.

But let we voice its another drawback:
Using icon with solid background disables MouseHover-interactivity.

Background of inactive standard button matches ribbon color (kind of dark gray for dark theme) and it changes (true black for Dark Theme) on button activation i.e. when mouse pointer touches it.
This wouldn't work if icon has solid background...