Puppy Linux Discussion Forum

GTKDIALOG - Make a colored button widget with a simple script
SVG Color Names. There are the 147 color names defined by the Scalable Vector Graphics (SVG) Specification.
You may set named colors like this: stroke="Green" or fill="Red".
Here is the official list of colors available for SVG images
https://www.w3.org/TR/SVG11/types.html#ColorKeywords
Tutorial-
Let's make buttons that have rounded corners and are colored .
Just run this script. It generates an SVG image that can be found in /tmp folder.
There are three variables --> FILL TEXT FONTSIZE
but other changes are possible like stroke width and opacity

#! /bin/sh

FILL=white
TEXT="MY TEXT"
FONTSIZE=15

X1=$(echo "$TEXT"|wc -c)  # number of letters
W=$((${X1}*${FONTSIZE}*6*95/31/20)) # width

DISPLACE=$(($W/6+5)) # vertical value


echo '<svg version="1.1"> 
      <rect
      style="fill:'$FILL';fill-opacity:.7;stroke-width:2;stroke:black;stroke-opacity:1;"
     width='\"$W\"' height="36" rx="10" ry="10" x="1" y="1"/>
           <text style="font-family:DejaVu;font-size:'"$FONTSIZE"';fill-opacity:1"
      x='\"$DISPLACE\"'  y="25" >
'$TEXT'
     </text>
</svg>
'>/tmp/SVG_"$TEXT".svg

You can make a clickable button using the SVG image.
Run this script in terminal.

#! /bin/sh
export MY_SCRIPT='
<window>   
     <button>
        <input file>"'"/tmp/SVG_MY TEXT.svg"'"</input>
        <action>gxmessage here </action>   
   </button>   
</window>'
gtkdialog -p MY_SCRIPT -c
   
exit 0

______________________________________________________
Here's an example of a white button...

Note : FONTSIZE can be anywhere from 10 to 30
and a large amount of text inside of the button is possible.

Here are some possible colors to try out.

Once user @vovchik created and posted txt2svg, a brilliant GUI frontend for creating SVG labels. Basically a single binary.
In the same thread @JakeSFR posted a 64 bit build which, though 8 years old, still works well even in the newest BookwormPup64 10.0.10.

I worry about Vovchik. He is from and his last post here is from December 2021. He certainly has other priorities now, but I hope that he will be back after all this current madness has ended.

Once user @vovchik created and posted txt2svg, a brilliant GUI frontend for creating SVG labels.

I didn't know about this work. Looks good!! However I wrote my script to generate the button while launching the script.
I find it doesn't slow down the launch to generate the buttons in the first lines of the script.
__________________________________________________
I changed the script slightly to center the text better

DISPLACE=$(($W/6)

changed to

DISPLACE=$(($W/6+5))

txt2svg worked in fatdog64 903.

Interesting that I could get nearly same results with a few lines of code.
______________________________________________

Got hug.bac form here
http://www.basic-converter.org/hug.bac
And placed it ousitde the dir.
Installed bacon, and compiled: bacon -o -Os -o -fdata-sections -o -ffunction-sections -o -Wl,--gc-sections txt2svg.bac

But an ERROR:

Converting 'txt2svg.bac'... 4547
Syntax error: variable 'y1' in LOCAL statement at line 4547 in file 'txt2svg.bac' is a C keyword or function!

It doesn't like "y1" used as the local variable name.

After changing all the names of local variable "y1" to "ya" in function RECT_FIT at line 4544 in txt2svg.bac this compiles in Debian bookworm.

' ------------------
FUNCTION RECT_FIT(double r_w, double r_h, double degrees, int mode) TYPE double
' ------------------
	' mode 0 = x_max, mode 1 = y_max
	LOCAL radians, x1, x2, x3, x4, ya, y2, y3, y4 TYPE double
	LOCAL x11, x21, x31, x41, y11, y21, y31, y41 TYPE double
	LOCAL x_min, x_max, y_min, y_max TYPE double
	radians = RAD(degrees)
	x1 = -r_w / 2.0 : x2 = r_w / 2.0 : x3 = r_w / 2.0  : x4 = -r_w / 2.0
	ya =  r_h / 2.0 : y2 = r_h / 2.0 : y3 = -r_h / 2.0 : y4 = -r_h / 2.0
	x11 =  x1 * COS(radians) + ya * SIN(radians)
	y11 = -x1 * SIN(radians) + ya * COS(radians)
	x21 =  x2 * COS(radians) + y2 * SIN(radians)
	y21 = -x2 * SIN(radians) + y2 * COS(radians) 
	x31 =  x3 * COS(radians) + y3 * SIN(radians)
	y31 = -x3 * SIN(radians) + y3 * COS(radians)
	x41 =  x4 * COS(radians) + y4 * SIN(radians)
	y41 = -x4 * SIN(radians) + y4 * COS(radians)
	x_min = MIN(MIN(MIN(x11, x21), x31), x41)
	x_max = MAX(MAX(MAX(x11, x21), x31), x41)
	y_min = MIN(MIN(MIN(y11, y21), y31), y41)
	y_max = MAX(MAX(MAX(y11, y21), y31), y41)
	SELECT mode
		CASE 0
			RETURN (x_max - x_min)
		CASE 1
			RETURN (y_max - y_min)
		DEFAULT
			RETURN 0
	END SELECT
END FUNCTION

It works for now, although I haven't tested much.
Compiled for 64 bit debian bookworm

@superhik I am running txt2svg on KLV-Airedale-sr17 successfully.

rockedge wrote: Thu Mar 06, 2025 11:08 pm

@superhik I am running txt2svg on KLV-Airedale-sr17 successfully.

Is it looking better? Gtk widgets are a bit off, I assume it's because of this gtk theme I use.
This app is compiled with bacon 5.0.1, which was released recently.
https://basic-converter.proboards.com/t ... 1-released

BTW, where are all the people from the old forums?

MochiMoppel wrote: Tue Mar 04, 2025 11:54 am

I worry about Vovchik. He is from and his last post here is from December 2021. He certainly has other priorities now, but I hope that he will be back after all this current madness has ended.

He is till active on the BaCon forum.

He was online there in the last 24 hours:

https://basic-converter.proboards.com/

BTW, where are all the people from the old forums?

Wish we knew.......many still visit but do not post and some have moved on to other projects.

Is it looking better? Gtk widgets are a bit off, I assume it's because of this gtk theme I use.

Yes the generated svg's look really good and the GUI as well.

BarryK wrote: Fri Mar 07, 2025 12:27 am

He is till active on the BaCon forum.

Thanks, good news!

.. and no, above link "button" is not SVG or any other image format. It is just plain text