Home

Awesome

Fontaudio - icon toolkit for audio developers

[202006] Version 1.1 - fixed icons appearance on windows (and hopefully linux).

[201907] Version 1.0

to leave feedback use issues on this repo, hit @fefanto on twitter, or drop a me a mail

The Problem

You are writing your plugin suite (DSP test, DAW experiment or anything related to audio software) and before committing to a full time UI designer you'd like to avoid the "reinvent-the-UI-wheel" sindrome and use something free and tailored to your needs.

Your first stop is maybe the awesome ... fontawesome, and if you're programming in juce its equally awesome juce wrapper.

Lots of stuff is missing tough: mainstream icons sets may have your media player icons and some more random usable items, but everything super-duper-audio-specific like filters, arpeggiator types, LFO types, DAW toolbar icons are nowhere to be found in a consistent package. Also searching around you see incredible svg icon set projects (e.g. like this) but information is sparse and even your scratch UIs are time consuming to cobble up.

Enter FontAudio

This Icon set wants to be the one-stop-free-toolkit for Audio Software Related icons.

Its goal is:

<h1><img src="https://github.com/fefanto/fontaudio/blob/master/screenshots/fad-screenshot.png?raw=true" alt="FontAudio demo screenshot" width="120%"></h1>

License

Icons — CC BY 4.0 License: applies to all icons packaged as .svg and .js file types.

Fonts — SIL OFL 1.1 License: applies to all icons packaged as web and desktop font files.

Code — MIT License: applies to all non-font and non-icon files.

Attribution : Attribution is required by MIT, SIL OFL, and CC BY licenses. here's a copyright notice you can include in your product licenses file where you list stuff you've used.:


- fontaudio by @fefanto - https://github.com/fefanto/fontaudio
- license : https://github.com/fefanto/fontaudio/blob/master/README.md#license
  (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

NOTE : All logos and brand references are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by fontaudio, nor vice versa. Please do not use brand logos for any purpose except to represent the company, product, or service to which they refer.

NOTE : I tried to design icons myself as much as possible and use logos that could be of interest to the audio developer. If any imagery constituting Your intellectual property or trademark cannot be included here just drop me a line (contacts on top of this file).

Content

Dependencies

Building the font

if you don't have any icons to add, just use the font in ./font or using its wrappers, otherwise...

NOTE: the icon-font-generator node package I'm using does not play nice with svg translations/rotations (not that I think it should ... it's fair to have clean and lean paths before using them): all paths flattened please! 😉

NOTE: currently developed on a mac - please leave feedback if you find trouble using this on windows/linux. Will try to make this truly cross platform.

Building the Juce demo

<h1><img src="https://github.com/fefanto/fontaudio/blob/master/screenshots/fad-screenshot-demo.png?raw=true" alt="FontAudio demo screenshot" width="100%"></h1>

Using the Juce module

Once the Juce FontAudio module is successfully added in your project, the paradigm used comes from Juce's SharedResourcePtr. There's a IconHelper class containing the font in binary code plus all the methods to draw the icons as Juce Images. (Thanks Danlin the class is mostly ported from your code, minus the Singleton thing). All you have to do is to declare a class member in every class that's gonna use the font:

SharedResourcePointer<fontaudio::IconHelper> sharedFontAudio;

Juce SharedResourcePtr will then take care of constructing it only once and refcounting its use across your project

// EXAMPLE I : In a LookAndFeel Class
class FontaudioLookAndFeel : public LookAndFeel_V4
{
private:
  SharedResourcePointer<fontaudio::IconHelper> sharedFontAudio;
public:
  Font getComboBoxFont(ComboBox &) override
  {
    return sharedFontAudio->getFont(defaultFontAudioSize);
  }
  ...
}

// EXAMPLE II : In a button paint() method using drawText

  void paint(Graphics &g) override
  {
    fontaudio::IconName offIcon =fontaudio::RoundswitchOff;
    fontaudio::IconName onIcon = fontaudio::RoundswitchOn;
    g.setFont(sharedFontAudio->getFont(getHeight() * 0.8f));
    g.drawFittedText(getToggleState() ? onIcon : offIcon, getLocalBounds(), Justification::centred, 1, 1);
  }

Contributing

Roadmap::Tooling

Stuff I intend to go forward with goes here - help is welcome.

Roadmap::Next Icons

Icons that I more or less think to be useful and get queued go here

Roadmap::Random Icon Ideas

"maybe" icons go here ... feedback welcome on icons to include and also on how to design them.

NOTE: not sure yet on how wide I want this package to be. E.g.: all analog "spice" blocks (opamps, resistors, diodes) may be considered as audio related since lots of plugins are modeling analog circuitry modeled ... But still I'm not that convinced to include them: too ambiguous and wide a topic, plus those are not for audio only...