Vector GUIs

The main idea proposed in this site is to use basic vector graphics primitives to create Graphics User Interfaces that can be used everywhere, with no or little need of code modification as a way to obtain portability and compatibility among quite different screen resolutions.

After few decenies of experience in vector graphics and observing that these basic primitives look very much alike, the idea that the same design could be very easily converted to other platforms became quite clear. Automatic code generation became also a possibility.

Why vector graphics?

Vector graphics is preferable to pixel graphics in many cases because its image quality is independent of the screen resolution. One of the typical properties of vector graphics is allowing infinite zooming without any quality lost. This property is excellent for GUIs, and using only simple primitives the interfaces can be built practically hardware independent and be portable. Another advantage of using these primitives is that common vector art produced by graphics designers can be used in live interfaces or widgets. This means that interfaces are no longer limited in terms of creativity.

Why to use vector graphics everywhere?

Vector graphics solves the problem of having different and quite disparate displays and screen resolutions, especially in the near future with ultra high resolutions, because it scales appropriately without losing quality. It becomes the ideal technology to construct GUIs in different programming languages as well as on the web as demonstrated in this website. The simplicity of vector primitives also promotes portability across different platforms, OS, and languages. Since they are quite similar in different environments it is easy to automatically convert from one environment to another, or from a common pseudocode to the target system or environment.

Why web technology on desktops is not a good idea?

One could imagine the use of web know-how on a desktop application. The main problem is that web programming became an universe in itself, completely isolated from the rest of the computing world. Thanks to webkit, for example, one could integrate GUI technology used on the web with desktop applications. In this way the application GUI engine is basically like a browser and the GUI like a local web page. This solution is too cumbersome, though, and limited to C/C++ languages as well as only appropriate to desktops and obviously the web. It is not a simple neither a light solution for building GUIs. Another approach is to develop applicationsusing Javascript and Node.js, but this is mostly suitable to develop IDEs (Integrated Development Environments) targeting web development, such as Visual Studio Code or Eclipse Theia. Although desktop applications using Node.js gained popularity lately, probably due the fact that web development became almost ubiquitous, it's still an interpreted language, lacking the performance of compiled languages, even though a huge progress has been done in JavaScript JIT compilers. It's known by experience that vector graphics is computing intensive and that SVG and vector fonts lag on the web, potentially hindering swift interactivity, particularly in animations. But new formats are appearing to solve the problem of vector graphics animations that give some hope of an universal representation of GUIs as seen below.

GUIs in embedded applications

In embedded software development compiled languages are more generally used, although interpreted languages such as Python gained popularity. It is also a reality that embedded applications generally rely on cheaper and less efficient hardware, generally lacking graphics cards. On the other hand, processors used in embedded software, particularly those requiring more sophisticated interfaces, have been offering more and more processing cores, thus increasing the possibilities of better performance through the use of multithreading and parallel processing. Vector graphics can then be used for constructing swift GUIs in embedded applications that need more interactivity, and parallel processing seems to be the way to achive it. Not only that but processors have been also packed with vector SIMD instructions. These instructions are useful to speed up transformations (translations, scaling, and rotations) on a large amount of points, thus, also a good argument in favor of vector graphics in embedded applications. The only problem is that, differently than threads, this kind of paralellism is practically inaccessible through most modern high level languages excepted C/C++, recently in Java and in other languages. Java has been used in embedded applications and provides good support for vector graphics with Graphics2D, but the use of Java in embedded applications has apparently been fading nowadays.

Even with the appearence of new modern languages such as Zig, which is interchangeable with C (and, thus, C++), C still dominates embedded software. C is compilable to WebAssembly but it is not clear if WebAssembly will one day have direct access to the DOM and to web vector primitives any time time soon. Even in this case, the code would still be specific to be used on the web.

Vector GUIs everywhere looks nice. But in which language?

It seems that the dream of having a GUI code that can be compiled everywhere in an universal language seems a little far-fetched, given this environment. It seems that the solution is to define GUIs in a sort of a pseudocode that itself can then be compiled to the target language or environment. Also, given the failure of using vector graphics languages for GUis and Windowing Systems in the past, such as PostScript in Apple's NeXTSTEP and in Sun's NeWS, using a particular language to make this materialize doesn't seem like such a good idea.

On the other hand, other kinds of vector graphics representations have been having a huge succes on the web, but in specific fields such as in animations: Bodymovin, Adobe After Effect file format, or AirBnB's Lottie, both using JSON representation. These formats are being used for animations everywhere besides the web. This is quite encouraging, even though one still lacks a similar representation for defining GUIs. It looks obvious that this is likely to happen, given the need of rich vector graphics in GUIs, including animations, and the urge of an uniform representation that can be easily converted to any system and environment.

What about 3D graphics? Is it vector graphics?

3D graphics and the different 3D frameworks (e.g., OpenGL) are only partially vectorial nowadays. Imagine 2D vector graphics without Bezier curves. That’s what 3D graphics look like because surfaces are defined by polygons. 3D graphics still don’t allow the use of 3D Bezier patches at rendering time. Since 2D Bezier curves are “flattened” as a set of lines to be displayed, it is possible that in the future 3D Bezier patches will be flattened as a set of polygons. 3D surfaces “flatness” should change with depth (levels of detail), whereas in 2D curves it remains constant.