Category: GUI

What? Rats WebGL Hit a Snag?

When your code hits a snag, there has to be a solution.  If you’ve discovered the “Rats WebGL Hit a Snag” notification, here are some articles we’ve discovered to both enlighten you and provide potential fixes.

It’s important to be aware of the potential problems your application may encounter, especially those that are beyond your control.  In this same respect, it is important to consider the tools and/or API’s you choose to use in your application.

Simply an FYI …


Until Next Time, STAY lean!



Lean Code – Web Graphics

Graphics and Animation


Over the past few weeks, I’ve been working on an application to simulate multiple production processes working in tandem and decided to re-introduce myself to the world of animation.  In its present state, the application is working quite well using just the core HTML5, CSS3, and JavaScript web languages.

The HTML5 canvas makes it easy to render graphics where CSS3 and JavaScript are used to manage and manipulate various animation effects.  Aside from the canvas element, OpenGL, WebGL / WebGL 2.0, SVG (Scalable Vector Graphics) and SMIL (Synchronized Multimedia Integration Language) or VML (Vector Markup Language) are also options to render graphics to your web page.

While HTML canvas is relatively easy to understand, working with SVG can be a little more complicated.  Fortunately, a number of packages exist that can be used to create our shapes and several JavaScript libraries are available to work with the generated SVG files.

Creating Vector Graphics

Adobe Illustrator is a great product but also demands a monthly subscription fee which, unless you’re a professional web developer, isn’t something too many of us want to add to our monthly budget.

An SVG Editor (by henoc) is available for Microsoft’s Visual Studio Code that can simplify the task of working with SVG.  You may also wish to consider using:

  • Vectr, a free cross-platform vector graphics editor, that allows you to create scalable vector graphics in 2D.   You can use the online version or download a copy of the application for your operating system (Windows, Mac, Linux, or Chromebook).
  • Inkscape a professional vector graphics editor for Windows, Mac OSx and Linux.  Free and open source.
  • Gravit Designer is a very capable and powerful design tool.  You can use the online version or download a copy of the application for your platform (Mac OSx, Windows, Linux, and Chrome OS).
  • There are also a number of online SVG editors – easily found with a simple Google search –  where you can create simple 2D SVG files online and save them locally to your machine.
  • It is also worth noting that the WebStorm IDE by JetBrains, our IDE of choice for web-based applications, also provides a level of support for working with SVG files.

JavaScript Libraries for SVG

While we can manipulate and work with SVG data directly using CSS and native JavaScript, a number of libraries are available that provide significantly enhanced functionality and effects.  Some commonly used libraries for working with SVG data include:

JavaScript libraries will save you a tremendous amount of time and effort so you can focus on your application.  It is also possible to render 3D models using SVG with more highly capable JavaScript libraries.

Browser Support and Local Files

Browsers provide varying degrees of support for today’s web technologies and knowing what is or is not supported will determine whether your application will run as intended.  IE (Internet Explorer) is one browser that is typically lacking in support for capabilities such as CSS transforms on SVG elements.

Remember:  Browsers are NOT created equal.


Some browsers like Chrome do not permit access to files or data on your local drive and you may receive an error similar to the one pictured above if you make the attempt.  Fortunately, I’m using the WebStorm IDE by JetBrains and have the option to run code either as a local file or using the built-in server.

Use a local server if you are using Chrome or another browser that does not provide access to data files that are local to your machine.

Responsive Websites

A responsive website is one of the more significant and noteworthy advantages of using SVG for your graphic elements.  Scaling your site to accommodate devices of all shapes and sizes is less of a challenge with SVG.   Images retain their original quality regardless of scale, can be created or edited with any text editor, and can be manipulated or enhanced using CSS and JavaScript.  These reasons alone make learning SVG that much more rewarding for you and your visitors.

The options for animating your website are many and limited only by your imagination.  As I’ve said many times before, “There’s always a better way and more one solution.”  Working with SVG’s and the number of API’s available to animate them proves this statement to be true yet again.

Until Next Time – STAY lean!


Related Articles and Resources:



GUI’s, wxPack, and wxWidgets

The official wxPython logo
The official wxPython logo (Photo credit: Wikipedia)

wxWidgets and GUI’s

In our post “Where’s the Graphics? Learning from our Roots (Tcl / Tk)” we focused on Tcl/Tk as a primary GUI development language.  We also mentioned QT as a viable alternative.  QT provides a more powerful GUI development API when compared to Tcl/Tk, however, the licensing schema for QT is also more complex.

To paraphrase the description from the wxWidgets website, wxWidgets is a C++ library that includes bindings for C++, Python and other languages to create cross-platform applications for Windows, Mac OS X, Linux, and more.

wxWidgets is available free of charge and offers a comprehensive collection of widgets that make it ideally suited for advanced GUI intensive applications. By using the native platform API, wxWidgets provides a native look and feel to your applications.

The latest version of wxWidgets is 3.0.2 as announced in the latest news release dated October 6, 2014.


Thanks to wxPack, we’ve expanded our list of cross-platform GUI’s to include wxWidgets.  wxPack greatly simplifies the task of installing and setting up wxWidgets on your machine.  wxPack is a full wxWidgets Development Kit, complete with wxWidgets source and binaries, wxFormBuilder (RAD Tool), and more.  Without wxPack, installing wxWidgets is a task best left to more seasoned developers.


From a development perspective, wxFormBuilder is the tool that ultimately caught our attention.  More specifically, wxFormBuilder offers the following features that are ideally suited to our language base and development environments:

  • Visual design of wxWidgets dialogs, frames, panels, toolbars and menubars
  • Source code generation for C++, Python, PHP, Lua and XRC
  • Support for wxWidgets 3.0 widgets (wxRibbonBar, wxPropertyGrid, wxDataViewCtrl, …)
Python and Qt
Python and Qt (Photo credit: Wikipedia)

Selecting Your GUI Tool Kit

The wealth of information available to learn and implement Qt suggests it is one of the better supported GUI tool kits in general. TKinter (Tcl/Tk) is also well supported due to it’s inclusion with the standard Python distribution.  Regardless of the tool kit chosen, the initial learning curve can be rather steep for more complex applications.  The number of widgets and options available with each package only add to the challenge of which package to choose.

Keeping it Lean

Too many options can make for more complicated interfaces than are necessary to meet the needs of the application and it’s end users.  For Python, TKinter provides a minimal widget set that serves the majority of our requirements.  That it’s already included with the standard Python distribution makes TKinter an even more convenient and attractive option.

There are times where a higher level of complexity and sophistication is necessary.  Of course, to learn every GUI kit available isn’t an option available to everyone.  The wealth of information and code samples available for QT make it a highly regarded option.

wxWidgets may just be the Goldilocks solution, falling somewhere between simplicity and sophistication where the tools available make it “just right” to get the job done.  A quick review of the wxWidgets Class List suggests there are more than enough features to develop a robust GUI for your application.

Ultimately, the right choice is the tool kit that is both effective and efficient for the given application.  Simplicity serves the purpose best especially during rapid development cycles and iterations.

Your feedback matters

If you have any comments, questions, or topics you would like us to address, please feel free to leave your comment in the space below or email us at or  We look forward to hearing from you and thank you for visiting.

Until Next Time – STAY lean

Vergence Analytics

ActiveState Tcl

Tkinter demo: many widgets
Tkinter demo: many widgets (Photo Leancredit: Wikipedia)

It’s hard to believe that one day after we published “Where’s the Graphics?” ActiveState released Tcl  Though the link to the download page remains the same, we updated the context of our post to reflect the latest version number.

Visit the ActiveState Tcl 8.6 page for more detailed information.  ActiveState’s ActiveTcl Community Edition is a free, ready-to-install distribution for Windows, Linux, and Max OSx.

Though other GUI options exist, Tcl/Tk is a proven technology that has persisted for more than 25 years.  The latest release offers features that continue to keep Tcl/Tk relevant and at the top of our GUI toolkit.

In addition to the numerous resources listed in our “Where’s the Graphics” post, a wealth of information can also be found at

Your feedback matters

If you have any comments, questions, or topics you would like us to address, please feel free to leave your comment in the space below or email us at or  We look forward to hearing from you and thank you for visiting.

Until Next Time – STAY lean

Vergence Analytics

Where’s the Graphics? Learning from our Roots (Tcl / Tk)

Tkinter demo: many widgets
Tkinter demo: many widgets (Photo Leancredit: Wikipedia)

One of our “side bar” challenges is developing software solutions (applications) for our clients.  Simple or complex, they all have one element in common, a Graphical User Interface or GUI.

Imagine the surprise and disappointment on the faces of many beginning programmers and developers when they discover that powerful languages like Assembler, C, C++, and even Python start by teaching you how to write software from the command prompt!

We’ve been there too!  When we decided to learn Python – a powerful, high-level, dynamic interpreted scripting language that is quickly becoming the language of choice for new developers – we were just as surprised to be writing and running programs from the command line (C:\).  Even Python’s Interactive Development Environment (IDLE) uses a “prompt” driven interface.

Basic Fundamentals

Our journey with Python originated with our interest in learning C++.  When we discovered that Python is written in C++, we were curious to see how C++ could be used to create an even more powerful dynamic language.

Learning a language and creating a GUI are related but they are not necessarily the same.  Developing an application requires a solid understanding of the core language itself including its capabilities and constraints.  A GUI “simply” serves as a means of interacting with the core application without concern for how the program actually functions or performs internally.

By way of analogy, driving a car does not require us to understand the intricate functions of the engine and powertrain.  As drivers, we use a key to turn the engine on or off, a gear selector, the accelerator and brake pedals, and the  instrument panel – all of which are the equivalent of a GUI in terms of function – to control and monitor the vehicle.  As developers, however, we are more concerned with ensuring that the engine and powertrain function as expected.  In other words, the GUI can wait but it should still be a consideration during the development process.

Where’s the Graphics?

The result
The result (Photo credit: Wikipedia)

Is writing applications with a nice, clean, graphical interface a mystery that only professional programmers can master?  This answer may surprise you.  Anyone can create a GUI and there is yet another language for doing just that:  Tcl/Tkinter. Tcl is a general purpose scripting language developed by John Ousterhout in 1988 and was designed to enable communication between applications.   Tkinter is a cross platform toolkit that provides a variety of widgets for building GUI’s in many languages.

Most introductory books on Python are concerned with teaching the core fundamentals of the Python language itself, though some may provide a brief introduction to Tkinter.  It is significant that Tkinter is included as part of the Python distributions that are freely available for download from the website.  Including Tkinter in the Python distribution enables the development of simple to complex GUI’s for your application.

Back to the Beginning

Although other packages such as wxWidgets and PyQt are available, that Tkinter is included in the standard Python distribution makes it much easier to integrate and explore.

To fully understand the Tcl/Tk programming language, we decided to search for more information.  We discovered an excellent Tcl/Tk Tutorial at where we are served with a wealth of information for both Tcl and Tk.  This is certainly enough to whet your appetite for more.

The TutorialsPoint Tcl/Tk  Tutorial describes several features of Tcl and this is one that caught our attention:

 “You can easily extend existing applications with Tcl. Also, it is possible to include Tcl in C, C++ or Java to Tcl or vice versa.”

What seems like an overly extended tangent from our original pursuit of C++ has become a worthwhile journey.  One of our greatest frustrations while learning C (and C++) was the lack of information for developing a graphical interface for our applications.  It looks like we may have discovered something that will help us along the way for a variety of languages.

Tcl/Tkinter Resources:

If you are using an Apple computer, Tk and Python are already installed on your system as part of the OSx.  The versions installed depend on the version of OSx you are running on your computer.

We recommend visiting and searching for the term “Tcl/Tk”, without the quotes, using the site’s search box.  You will be presented with the latest version of Tcl (8.6.2) and variety of other related tools including several Tcl extension packages and IDE’s.

To get the latest copy of ActiveState‘s version ( of Tcl/Tk for your system (Windows, Linux, Mac OSx) visit the download page.  The community version is free and will be more than sufficient to get you started.  Click here to see some interesting code snippets or “recipes” on the ActiveState site that demonstrate some of the key features of Tcl/Tk.

We already suggested that TutorialsPoint offers an excellent introduction to Tcl/Tk Programming, however, we have also discovered several books that are worth mentioning to get you started:

Python and Tkinter GUI:

Python and Other GUI’s:

C++ and Qt:

English: Screenshot Qt Designer Русский: Скрин...
English: Screenshot Qt Designer Русский: Скриншот Qt Designer (Photo credit: Wikipedia)

While some are comfortable to accept the tools at face value, we found it helpful to delve into the core of Tkinter and Tcl to fully appreciate and understand the underlying language and tools that are available to us.


As Operating Systems continue to compete for market share, it is good to know that we have cross platform GUI options that will allow us to write applications that will work on all of them.  To this end, we’re less concerned about “who wins” and more concerned about writing efficient and effective applications for our clients.

Your feedback matters

If you have any comments, questions, or topics you would like us to address, please feel free to leave your comment in the space below or email us at or  We look forward to hearing from you and thank you for visiting.

Until Next Time – STAY lean

Vergence Analytics