VGDD:Visual Graphics Display Designer

From VirtualFabWiki
Jump to: navigation, search

What's new?

VGDD sources have been released! Having reached the end as commercial software, VGDD now becomes VGDD Open.

See the Downloads Page to download the full working binary or to get to the GitHub repository

Previous News


Go to the Downloads Page

What is VGDD?

Visual Graphics Display Designer is a powerful tool which enables you to easily and effortlessly design your application's GUI letting you to concentrate on the main program.


  • an IDE for developing complex User Interfaces for embedded projects based on Microchip's GOL (Graphics Object Library) widgets for all supported PIC(tm) families: PIC24 and PIC32
  • a framework for easing repetitive tasks such as laying out the switch structure to handle messages coming from GOL widgets
  • a tool for converting pictures (and fonts) into suitable form to be used into MPLAB(X) projects

It is based on the power of Visual Studio(c) DesignSurface, and this alone gives it - and you - a very big designing power. It adds then a lot of features making developing a Human Machine Interface (HMI) a breeze.

It has a builtin GOL (Graphics Object Library) Toolbox with all the standard widgets:

and GPL objects:



plus a series of Custom Widgets:

  • SegDisplay, a big-font 7-segment simulator that uses a vector font and uses a very small amount of memory
  • Grid
  • DigitalMeter


VGDD is fully compatible with all the various versions of Microchip Graphics Library:


To see Licensing details, go to the Features page

Supported Hardware

VGDD is Hardware-agnostic. This means that it generates C code suitable for any hardware supported by the Microchip Graphics Libraries (MLA, formerly MAL). This surely includes your custom developed board provided that it has the right PIC24/dsPIC33/PIC32 MCU on board with the needed amount of FLASH memory and RAM.

If you have to develop an HMI for your application and want to speed-up the development of a working prototype, a number of Microchip Development Boards are directly supported by the Wizard, which lets you start from scratch with your idea in mind and see it running in minutes.

See the Tested Hardware Configuration page to see which combinations of Development Board and Display Boards are supported by VGDD Wizard out-of-the-box.

How does it work?

Basic Usage

VGDD lets you create an unlimited number of Screens, put in them how many widgets you want, keep all that stuff toghether organized as a VGDD project and, when you click on the "Generate Code" button, it generates

  • a single .c file containing the code to be compiled into your project
  • a single .h file with the necessary headers for the other modules to access your GUI

Simply add screens to your VGDD project and in every screen visually draw buttons, labels, bitmaps and so on.

Then click on the "Generate Code" button to have all that tedious work done in seconds!

The code generated by VGDD is intended to be included in an existing MPLAB/MPLABX project in which only slight modifications are needed for it to work with the VGDD-generated GUI.


VGDD relies on a standard "screenState" logic, as used in Microchip's GOL Demo: in its main loop simply call VGDD_<ProjectName>_MsgCallBack and VGDD_<ProjectName>_DrawCallBack function to integrate it.

For a step-by-step guide to its first use, see the How to use VGDD page.

Advanced Usage

Automatic Event Handling

The past:

When using GOL widgets, you had to write a lot of code to handle the message-pumping loop messages.

And you had to do it manually.

In other words, for each screen you created you had to write a switch structure, always the same.

Then for each widget you placed on each screen you had to create a switch structure, to detect which widget has sent a message.

And finally, for each possible message you wanted to handle, you could then write your code that "does something"!

All this repetitive task should be performed by you and by hand.

And should be mantained, also! Trying to locate the particular code behind a pressed button could take more time and efforts than modifying the code itself!

What a waste of time and most of all what a boring task!

Now, VGDD:

In VGDD every widget (button, slider, and so on) exposes its events (i.e. for the button widget, the PRESSED event).

You can write your C code directly into the widget itself staying in VGDD.

You simply click the widget, and then choose the event you want to write code for in the Events window.


This way that code remains bound to the object at VGDD level and thus it will be copied along with the widget when you reuse it on other screens/projects.

When you use this feature, VGDD automatically generates the complex switch/if structure for all widgets of all your screens in your project.

You can forget of hand writing code to handle widget interactions in your applications: VGDD does it for you.

You only have to write specific code you want to be executed when the widget has been touched (for example), and thus you are free to concentrate on the main program: the GUI is done!

Is this a complete replacement of hand-wrote code? No: this feature is only a (big) aid when it comes to write GUIs for the embedded world. You remain free to hand-write code, mixing it with the automatically generated VGDD code. No limitations at all, only benefits.

See the Automatic Event Handling section for details

Watch out the VGDD-EventsDemo video to see how much powerful this new feature is!

Direct Bitmap and Font conversion and embedding

VGDD automatically creates for you Microchip's Graphics Resource Converter (GRC) projects with your bitmaps and fonts and runs it transparently in the background to convert them automatically into C arrays and/or bin files, ready to be compiled or copied to your FLASH memories.

No more need to manually launch GRC and to create separate GRC projects for internal/external/bin bitmaps and fonts. Simply use the bitmaps and fonts you want, in any format you want (not only .bmp and .jpg) and change their type from the default "FLASH" to "VGDD_FLASH". That's it. See the GRC Integration page for details

The Font Filter feature, used to reduce the font memory size, with full Unicode charset support is automatically handled, and VGDD adds to this its exclusive SmartCharset feature.

Unlimited Graphics

Thanks to its PutImageFromSD Framework, by simply adding (if not yet present) an SD/MMC socket to your existing project design, you can achieve an unlimited graphics GUI, with as many background pictures and slides as you want. Every limited-flash PIC device can have its own rich GUI without having to redesign everything. In fact, if you change the bitmap's type to "BINBMP_ON_SDFAT" VGDD will take care of converting it to .bin format and copying the resulting file to a folder. Then you only have to copy those files to an SD memory card (FAT16 supported, so a limit there is but it's 2GB and so it can be considered "unlimited" :-), build the project and enjoy! See the PutImageFromSD page for details


VGDD handles bitmaps transparency while designing the GUI.

You can design beautiful screens with the desired background and draw transparent buttons on it for an impressive final result.

See the Transparency page for details.

Custom Colours

VGDD saves and restores along with the project all Custom Colours defined by users in the ColorDialog (the color chooser).

This feature is particulary needed when working with controllers that use the hardware indexing feature.

See the Custom Colours Support page for details. {{{frame}}}

Custom Widgets

VGDD lets you handle on screen every custom control you or someone else has developed! See the Custom Widgets page for details.

GUI Simulation

The Player feature lets you simulate your GUI while you develop it, playing with buttons and see your interface in action.

This feature allows you to ship your GUI to someone else, may be the graphic expert, for him to see the GUI in action before you develop the actual application.

Actually, with VGDD, GUI and main application development are conceptually separated, giving you the opportunity to outsource the graphics part and concentrate on the main application.


VGDD can integrate its generated code in your existing MPLABX project. See the MPLABX Wizard page to see how simple it is. Not a plugin, but not less productive.

With the Wizard and a supported Microchip Development Board you can build your GUI from scratch in minutes.

External Widgets plug-ins

Due to its open architecture, VGDD is capable of using external plug-ins which deliver ready-made complex Widgets to be used out of the box.

It comes with a "preinstalled" VirtualWidgets library, and can accomodate also third-party Libraries. See the External Widgets page for further explanations.

Master Screens

This is a major feature.

Are you developing a complex GUI with many screens on which some Widget should be "static"? The new VGDD's feature, Master Screens, lets you overlay such Widgets in an extremely easy way.

Migrate Projects

Do you want to see how your GUI looks on a bigger display?

Or are you moving your existing application to a cheaper and smaller display for mass production?

That would mean reposition and resize each and every Widget throughout the entire project, one screen after the other!

But don't worry: VGDD does it for you: simply change the default screen size in Project Settings and click on the Migrate button: everything will be proportionally expanded (or shrinked).

A quick tour into the Wizard just to tell VGDD which display to use and you're ready to go.

Bitmaps Scaling

A long awaited feature is Bitmaps Scaling which enables a new level of freedom while designing GUIs

Screen grouping

Big projects need some form of optimization, and so now you can give a Screen a Group property to keep them grouped and better handle them without scrolling all day in the Project Explorer.

Project Load Optimization

VGDD now handles project loading in a much better way, and it's FAST!

Working with Palettes

VGDD natively supports working with indexed graphics modes (8BPP, 4BPP) to gain memory while offering good graphic results. See the dedicated page for details.

Other feaures

Custom Hardware - User Templates

Now it's easy to add VGDD Wizard support to your custom board. See the VGDD:User Templates page for details.

HTML Editor

VGDD integrates an HTML source code editor with a built-in preview functionality. This allows you to develop embedded web sites with ease and to upload the final version to the target hardware.

See the HTML Editor page for more details.

Multi-Language Support

VGDD Now support designing GUIs with multiple languages. see the Multi-Language page for details

Demo Videos

For a demo of what you can do with VGDD and how to do it, see the VGDD Video page!


Take a look at the ScreenShots page to see what can be done with this tool.