SVG widgets Part 1
)
By clicking on the button, an interactive demo is displayed in a new browser tab using CloudTk.
This article is written by Vladimir Orlov.
Few people do not recognize the convenience of tcl/tk in gui development. Moreover, it is tk called Tkinter, and not something else, that is directly integrated into Python, and into many other languages. But as soon as you show an application in which the gui is developed in tk, you can immediately hear - again, this poor, primitive, at best outdated interface. And here I agree with these critics. There have been many attempts to improve the presentability of tk widgets (in addition to ttk widgets), some of which can be viewed here. But even they look a little pale against the background of the user interface on mobile phones, qt or gtk.
My expectations related to the release of tcl/tk-9.0 were also not fulfilled in terms of the appearance of the widgets.
And since I'm a tcl/tk fan, I really want to fix this situation. It is clear that this problem can be solved by using SVG-graphics. Support for SVG-graphics in tcl/tk is implemented through the tkpath package, authored by Mats Bengtsson:
But when I wanted to learn more about this man, I was met with the sad news that Mats Bengtsson, the author of the tkpath project, had left our mortal world on November 29, 2008. That's what his friend Mari Lundberg (https://thecoccinella.org/node/312.html#comments) wrote about him:
Mats Bengtsson, the founder of Coccinella, passed away on November 29, 2008. He was born in 1959 and had a very successful career in academics and specifically in his field of interest, theoretical physics. Early in school he distinguished himself particularly in mathematics and he even produced his own math books in primary school when his teachers were not able to help him further on. He graduated at Lund university as an engineer, continued as a research student in theoretical physics and presented his doctoral thesis, ”Parton showers in a phenomenological context”, at the age of 28 years. He spent a post-doc period in Germany (Aachen), but previously he had also been at the Cern laboratory.
After his exams he started to work at ABB for a short period of time, before he ended up in Linköping where he received a research position at FOI, the Swedish Defence Research Agency. In Linköping he and his partner Mari stayed for quite a few years. During his entire life Mats had several hobbies such as gliding and model railroading. Unfortunately, Mats was struck by a chronic condition during the last 15 years of his life, but was able to work hard in periods on his special project, the Coccinella program which is an interactive communicative Internet program. He initiated and developed this computer program and released it as open-source on the Net so others may contribute to the program’s development and refinement over time. Hopefully Coccinella will remain and be continuously upgraded in Mats’ spirit and visions.
It was the disease that led Mats Bengtsson from particle physics to programming. This is how his colleague (https://coccinella.im/comment/654.html#comment-654) at the FOI (Swedish Defense Research Agency) wrote about it:
Nowadays, I rarely look into the world of Tcl, but in fact, it was I who introduced Mats to Tcl/Tk one day by lending him my Ousterhoot book. I used to be Mats' work partner at FOI. It was at a time when he was already experiencing severe pain and tension in his neck, and no doctor could help him. His research in mathematics and physics was extremely theoretical and demanding. So he took up programming, which until then had been just a tool for him.
I have to admit that I was skeptical when he talked about his idea of shared and distributed boards. There was no way this could be implemented by a single novice programmer. But it happened.
And this can only be explained by Mats' extraordinary talent.
Surprisingly, the fact is that the author of tcl/tk, John Ousterhout, also came to programming from physics, from quantum physics. Ousterhout himself recalled:
"… after half a year of contemplating the equations of quantum physics running from page to page, I realized that the only attraction in this science for me was the opportunity to tinker with computers in the laboratory...".
Look at how similar they are in their cheerfulness.
I tested the capabilities of this package when embedding vector graphics in the tksvgpaint editor. With this experience behind me, I decided to develop SVG-widgets for tcl/tk. In addition to the tkpath package, the project also needed the treectrl package, which has the loupe function. This feature allows you to take a picture of any part of the screen, and if desired, to scale it. Hence the name of the function - loupe. It is on this function that the fon method is implemented for each class of svg-widgets. The role of this method will be discussed later. I would really like to have a function similar to loupe's in the tcl/tk core.
As a result, a pet project and the svgwidgets package were born (https://github.com/a513/TkSVGwidgets ). You can explore the capabilities of the svgidgets package by going to the demo page here or by clicking the "SVG demo and TkConsole" button at the beginning of the article:
The demo is based on CloudTk technology.
Just a cursory glance at the computer or tablet screen or at the screenshot shown here is enough to see a more presentable appearance of svg-widgets compared to regular tk-widgets. This includes a variety of button shapes, a drop-down menu shape, simple frames, and much more. I must say right away that svg widgets do not replace, but only complement the standard tk widgets. For example, click on the house, and an information window will appear in the form of a callout:
To change the font in the running line ("Tcl/Tk.SVG-widgets. Examples") click the "Change font" button and select the font you like (just remember that these are vector fonts):
When choosing a font, pay attention to the "fill over stroke" option, not forgetting the others too. After selecting the font, click on the "Accept" button and the font in the running line will change. If there is a line, just click on it and it will run:
To change the overall background, use the "Change background" button.
If you want to resize the main window, use the "Window resize" check-button and resize the window as you normally do. Along with the size of the window, the size of the svg widgets will also change. Yes, most of the icons in the demo are svg icons (.svg), not bitmap images (.jpg, .png, etc).
To change the interface language, click either on the flag of the country in which the interface will be displayed or on the corresponding radio button (Russian/English).
We'll leave the "TkCon console" button for last.
If you click on the "Examples" button, a drop-down menu will appear in which there will be a list of examples with svg widgets.
First, go through all the examples, starting with «SVGbutton»:
Pay special attention to the second «SVGcanvas» example, in which all svg widgets are placed on the same canvas
Clicking the «Update gradient» button will launch the «::gengrad::generateGradient» utility, which can be used to create a new gradient fill and change the fill in the foreground of the example
Let's take a look at the SVGtkmenu example, which demonstrates a menu using the svgwidgets package:
Now that we've reviewed the examples, it's time to return to the main window and use the "TkCon console" button:
And the first command that we will execute in the tkcon console will be the svgwidgets package download command:
%package require svgwidgets
After that, we will create a window .firstlesson, in which we will place svg-widgets:
%toplevel .firstlesson -bg yellow -width 300 -height 150
Now you can create the first svg-widget and place it in the created window:
%set but [cbutton new .firstlesson.b1 -type round -text "first widget"
%pack [$but canvas] -in .firstlesson -padx 2c -pady 1c -fill both -expand 1
Let's see what gradient fills are on the canvas of the created button:
%[$but canvas] gradient names
gradient2 gradient0 gradient1
Let's select one of these gradient fills to set it as the fill of the created button in its normal state ($but config -fillnormal gradient2):
Oh, and look at how the button behaves when resizing the window .firstlesson.
That's all for now. The next part will explain in more detail how to use the svgwidgets package.
But before you close the console, destroy all the svg widgets and the window you created .firstlesson:
%$but destroy
%destroy .first.lesson
See you soon.
P.S. And if you hover the cursor over the running line and right-click, the "About" context menu will appear and you can get a little help about the author:
