Lovely Charts iPad Edition now available on the App Store!

Extending Libraries - 1

One of, if not THE biggest new feature of Lovely Charts V2 (only available as a Desktop app for now), is its extensibility, ie the ability to let you add//create/share/remove not only images nor symbols, but complete libraries!

In the Online Edition, you could import images, JPG or PNG.
In the Desktop app, you can import images, JPG or PNG, either from your filesystem (File > Import… or by drag&drop) or from Iconfinder, but also vector symbols (SWF), meaning those can be resized as needed without ever loosing any quality.
The libraries you create by importing external assets can subsequently be exported as independent files (.lcl), which you can then share among your teams, friends and colleagues.

Because examples are worth a lot more than words, here are a couple libraries you can add today to your installed copy of Lovely Charts:

1. Webalys GUI Library

Webalys GUI Library

This awesome set of GUI vector elements was originally created by Vincent Le Moign of, as an Illustrator library: User Interface Design Framework.
Vincent was kind enough to allow me to convert his library to Lovely Charts, so that’s what I did ^^
If you like it, make sure you pay a visit to Vincent’s website, on top of being the (very) nice guy who designed this lib, he’s also a great freelance UI designer and the author of this absolutely fabulous Icon Library, which I think you should all buy :).

> Download User Interface Design Framework. Once downloaded, simply drag&drop it onto Lovely Charts to install it, or use the File > Import menu option.

2. CISCO Network Topology Icons

CISCO Network Topology Icons

I’ll be the first to admit I know pretty much nothing about computer networks, so I guess it’s only normal that the default Network Diagrams library that comes with Lovely Charts is rather incomplete, to say the least.
Never mind, CISCO provides an exhaustive and “official” symbols library for drawing network topologies, which I took the liberty of converting to Lovely Charts Library format. Cool, no?

> Download CISCO Network Icons. Once downloaded, simply drag&drop it onto Lovely Charts to install it, or use the File > Import menu option.

Creating your own

Now, how do you create your own vector libraries? I’ll dive into the details in a later post, but here’s a quick breakdown:

  • A Lovely Charts symbol is just a Flash library symbol, except it’s been “exported” (ie given a class name) so that it’s accessible from Lovely Charts.
  • Knowing that, the easiest way to create a new library is to 1. create a new Flash file, 2. create your symbols, 3. make sure those symbols get class names (see below), and 4. publish your SWF file
  • The published Flash file must be AS3
  • If you wish to create advanced symbols, using the drawing API, or implementing some custom logic in their own classes, please get in touch, and I’ll provide you with some material to get started, before I find the time to write a proper tutorial.
  • Don’t try to access global properties such as stage or methods of the parenting app, as this will throw errors

Lovely Charts currently allows you to import images (JPG, PNG, or GIF) and SWF files. To import, use the File > Import menu option, or simply drag&drop the file(s) you wish to import onto the app. A dialog will open, where you’ll be able to review and check the list of symbols you will import.
Unchecking a symbol means it won’t be made visible in the library.
When you select a symbol in the list, you can define some options for it, such as its name, and the relative position of the label it’ll get in Lovely Charts.
Once you’re done reviewing, give your new library a name, or import the assets into an existing lib, and press OK!

Leave a comment: