Tcl/tk: SVG widgets. Buttons, frames, menus. Part 2 

By clicking on the button, an interactive demo is displayed in a new browser tab using CloudTk.

This article is written by Vladimir Orlov.
 

We already know that SVG widgets are based on the functionality of the tkpath (you can use the tko package instead) and treectrl packages. To develop a GUI using SVG widgets, you need to install the svgwidgets package, which you can download here. If you plan to use SVG files (SVG images) based on XML code, you will also need to install the svg2can package, which you can download here.

The svgwidgets project on GitHub contains a version of the tclexecomp graphical interpreter for Linux64 (folder tclexexcomp902), built from the tcl/tk-9.0.2 source code, as well as a version based on tcl/tk-8.6 for Linux64 and Win64 platforms (folder tclexecomp200).

For testing, we suggest using the TkCon cloud console from the demo example, which can be launched in a browser by clicking the "SVG-demo and TkConsole" button at the beginning of the article. After launching the demo, click the "TkCon console" button, and when the console appears, run the command "package require svgwidgets":

As a reminder, SVG widgets can be created individually on a separate canvas and then displayed using one of the layout managers (pack, grid, place), or all or a group of widgets can be created on the same canvas. When placing multiple SVG widgets on a single canvas, layout managers are not used; their placement on the canvas is controlled by the -x and -y options. Naturally, one of the layout managers is used to position the canvas containing the SVG widgets.

So, after loading the svgwidgets package, we create a «.win» window, say, 7 cm by 9 cm:

toplevel .win -bg yellow
wm geometry .win [winfo pixels .win 7c]x[winfo pixels .win 9c]

As a reminder, the accuracy of the window's dimensions relative to the specified width and height depends on the tk scaling factor, which on the CloudTk server at the time of writing was 1.33333.

The example code can be taken directly from this article and pasted into the TkCon console for execution. Copying and pasting code from the article into the TkCon console is a three-step process.

The first step is to copy the highlighted code (Ctrl-C) from the article to the shared clipboard:

In the second step, go to the tab where the TkCon console is running and paste (Ctrl-V) the copied code into the shared clipboard in the noVNC clipboard (accessible through the CloudTk control tab in the sidebar):

The copied code is immediately added to the shared clipboard of the server running the demo. Furthermore, the code in the clipboard can be edited.

In the third step, all that's left is to paste (Ctrl-V) the code from the clipboard into the TkCon console, where it will immediately execute (a .win window with a yellow fill appears in the left corner of the screenshot):

This algorithm should work in reverse as well.

Following this recommendation, let's start by creating an SVG frame with the ID frame1 on the SVG canvas .win.fr1 and place it in the newly created .win window:

#Creating a frame (-type frame) based on the cbutton class
cbutton create frame1 .win.fr1 -type frame -strokewidth 1m -stroke cyan -rx 0 -fillnormal white 
#You can create an SVG frame using the cframe class:
#cframe create frame1 .win.fr1 -type frame  -strokewidth 1m -stroke cyan -rx 0 -fillnormal white 
#Placing an SVG frame in a window
pack [frame1 canvas] -in {.win}  -fill both -expand 1
#Or
#pack .win.fr1 -fill both -expand 1

You can also create an SVG frame with a title instead of a regular SVG frame, after first destroying the existing frame frame1:

frame1 destroy
cframe create frame1 .win.fr1 -type clframe -text {Фрейм с заголовком} -strokewidth 2m -stroke cyan -rx 0 -fillnormal white -fillbox cyan -fontsize 5m
#Styling a frame's title (boxtext method) (default color: -fillbox)
frame1 boxtext –ipadx 1m –ipady 1m –stroke chocolate –strokewidth 1 -rx 2

If you set the -rx option to 0 (zero) when creating a frame, the frame will be rectangular. If you don't want a border for the SVG frame, you can simply set the options "-stroke {} -strokewidth 0." The fill of the SVG widget is determined by the -fillnormal option. The fill of the SVG frame "frame1" can be a solid color, a gradient, or transparent (frame1 config -fillnormal {}).

Now, on the same .win.fr1 canvas, which already contains the SVG frame frame1, let's create several SVG widgets of the cbutton class, arranged vertically.

 In this case (when placing multiple svg widgets on the same canvas), you will need to use the -x and -y options to specify the location of each svg widget on the canvas:

#Vertical spacing between widgets is 15 millimeters
set y0 [winfo pixel .win.fr1 15m]
#Vertical coordinate for the first button
set y1 [winfo pixel .win.fr1 5m]
#Let's create five SVG buttons: "rect, round, ellipse, square, circle"
#Clicking a button prints its ID.
foreach tbut "rect round ellipse square circle " {
        cbutton create b$tbut .win.fr1 -type $tbut -x 2c -y $y1 -text "ID:b$tbut" -fontsize 4m -command "puts \"The b$tbut button is pressed \""
        incr y1 $y0
}

The result of our actions will be displayed in the upper left corner:

Note that when placing an svg widget on a separate canvas, the -x and -y parameters are ignored. However, in this case, you will need to use one of the window layout managers (pack, grid, or place), for example:

#deleting the created buttons:
foreach tbut "rect round ellipse square circle " {
b$tbut destroy
}
#Creating five buttons ("rect round ellipse square circle") 
#each button is created on its own canvas
foreach tbut "rect round ellipse square circle " {
cbutton create b$tbut .win.fr1.$tbut -type $tbut -text "ID:b$tbut" -fontsize 4m  -bg white -command "puts \"The b$tbut button is pressed \""
b$tbut pack -padx 2c -pady "0.5c "}

In this example, we used the pack method to place the svg widget in the window. Similarly, you can use the grid and place methods, which are similar to the corresponding layout managers for standard widgets.

This is the right place to talk about the structure of svg widgets. The svgwidgets package implements object-oriented classes of svg widgets based on svg canvases supported by the tkpath (tkp::canvas) or tko (tko::path) packages.

What the user sees on the computer or smartphone screen can be imagined as a layered pie, which, depending on the filling, can have four or five layers:

SVG widgets (the topmost layer, as they say, the cherry on top) are placed on the canvas over the SVG-image layer (if present) or the SVG-fill layer.

Both of these layers are svg rectangles that match the size of the SVG-canvas. The SVG-canvas is created by the corresponding class constructor without any borders (-borderwidth 0 and -highlightthickness 0).

The appearance of the SVG-fill layer is caused by the fact that the fill (-background) of the SVG-canvas can only be single-colored. The introduction of the SVG-fill layer eliminates this drawback. Now, the fill of the canvas can be not only single-colored, but also gradient. Moreover, this layer can also be transparent (-background {}), in which case the native fill of the SVG-canvas will be visible. The SVG-image layer appears when we place an SVG widget created on a separate SVG-canvas on top of any other widgets. In this case, a screenshot of the area where it will be placed is taken, and this screenshot forms the SVG-image layer. For this purpose, each class has a fon method. Typically, this is done automatically when the place method is called, windows are resized, or the gradient fill or transparency properties of SVG widgets are set. The presence of the fon method ensures the transparency of SVG-canvases.  

All widgets in the svgwidgets package are grouped into five classes: cbutton, ibutton, mbutton, cmenu, and cframe. Now, after some time has passed, we can say that there are either too many or too few classes, but for now, this is the case. As time goes on, things may change. For example, it is already evident that some classes actually duplicate each other. However, we will not touch them for now. The name of the canvas for an svg widget is formed in a similar way to how it is done for classic Tk widgets, and it always starts with a dot.

Creating svg widgets is almost identical to creating classic widgets in tcl/tk. If we recall how objects of a particular class are created in object-oriented programming in tcl/tk, we will find that there are two methods. The difference between these methods lies in the fact that in the first method, the identifier of the created object is assigned by the class constructor:

<class name> new <canvas name> [object parameters]

In the second method, the object identifier is explicitly assigned by the programmer:

<class name> create <object ID> <canvas name> [object options]

In both cases, the constructor returns the ID of the created object.

When creating an SVG widget, the constructor checks whether the SVG canvas has been created before.

If the canvas has not been created yet, the SVG-fill layer is created immediately after the canvas is created.

The SVG widget itself is always created on top of the SVG-fill layer.

The destroy method is used to destroy an object:

<object ID> destroy

When an object is destroyed, the canvas on which the svg widget was created is also deleted.

In our example, we created svg widgets of the cbutton class.

The appearance of an svg widget of the cbutton class is specified by the -type option.

There are three groups of buttons in the cbutton class (don't blame me, it just happened this way). The first group consists of classic buttons of three types (option -type <widget type>):

-type rect – create a rectangular widget (default);
-type round – create a widget with a narrow side that has semi-circular ends;
-type ellipse – an ellipse-shaped widget.

These three types of cbutton widgets are shown in the screenshot above.

If we want to create a rectangular widget with rounded corners, we can specify the rect type and set the corner radius using the -rx option.

A frame can also be created as a cbutton object with the frame type (see the example):

cbutton create frame1 .win.fr1 –type frame –rx 5m

The second group includes buttons that are identical to the first group in terms of functionality, but have a slightly different appearance (the last two widgets in the screenshot):

-type circle – create a round button 
-type square – create a square button

The third group includes radio and check buttons:

-type radio – create a radio button
-type check – create a check button

These buttons have an additional -variable option, which sets the name of the variable that is associated with the button (similar to the classic radiobutton and checkbutton). Naturally, radio buttons have an -value option that sets the value for the variable when the button is selected (clicked).

Now you can use your mouse to navigate through the widgets and even click on them. You can see which widgets respond to the mouse cursor and mouse clicks, while others ignore the mouse.

To get a list of objects of a specific class (for example, cbutton), use the following command:

Each object has a specific set of properties that can be obtained or modified by calling the config method:

When the config method is called without parameters, a list of all parameters with their current values is returned. When the config method is called with a parameter, the current value of that parameter is returned. To change the value of a parameter, you can call the config method with the parameter and its new value.

You can get a list of methods that each object has by running the following command:  

Let's return to the "layer cake" to see the layers of the svg widget. We will dissect the svg widget with the frame1 identifier located on the .win.fr1 canvas.

It should be noted that layer 3 (SVG-image) is not present in this example. We will discuss its appearance later.

For clarity, let's make the color of the .win.fr1 canvas red:

Note. If you use the CloudTk clipboard, don't forget to clean it. 

So, the .win window (this is Layer 0) was created with a yellow background (-background yellow), and to confirm this, we will change the placement of the .win.fr1 canvas by adding padding on the top, bottom, left, and right sides (left screenshot in the illustration below):

Now, make the fill of the frame1 svg widget (Layer 4) transparent (the second screenshot from the left in the illustration below), and the fill of Layer 2 (SVG-fill) will become visible:

Uncolor the SVG-fill (Layer 2) and the native canvas fill will become visible (third screenshot from the left in the illustration below):

 Let's return the Layer 2 fill to its original state:

The fill of the frame1 (Layer 4) svg widget itself will be replaced from transparent to gradient (see the left screenshot in the illustration below):

You can get a list of gradient fills available on the frame1 widget canvas by running the following command:

Now let's make rounded corners with a radius of 10 millimeters for the frame1 widget (option -rx) (see the left screenshot in the illustration below):

After that, we will make the svg canvas fill for the frame1 svg widget transparent (-background option):

You can also add partial transparency (or rather opacity) to the fill of the frame1 widget:

Looking at the two right-hand screenshots, it becomes clear why the SVG-image and SVG-fill layers are needed. Their role is to coordinate the color scheme when combining svg widgets placed on different canvases.