GTKDIALOG - Make a colored button

For discussions about programming, and for programming questions and advice


Moderator: Forum moderators

Post Reply
User avatar
don570
Posts: 770
Joined: Sat Nov 21, 2020 4:43 pm
Has thanked: 5 times
Been thanked: 144 times

GTKDIALOG - Make a colored button

Post by don570 »

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

Code: Select all

#! /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.

Code: Select all

#! /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...

button.png
button.png (5.58 KiB) Viewed 960 times

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

Last edited by don570 on Tue Mar 04, 2025 11:50 pm, edited 1 time in total.
User avatar
don570
Posts: 770
Joined: Sat Nov 21, 2020 4:43 pm
Has thanked: 5 times
Been thanked: 144 times

SVG colors

Post by don570 »

Here are some possible colors to try out.

Screenshot 2025-03-03 14.21.49.png
Screenshot 2025-03-03 14.21.49.png (151.73 KiB) Viewed 958 times
User avatar
MochiMoppel
Posts: 1343
Joined: Mon Jun 15, 2020 6:25 am
Location: Japan
Has thanked: 22 times
Been thanked: 521 times

Re: GTKDIALOG - Make a colored button

Post by MochiMoppel »

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.
Image

User avatar
don570
Posts: 770
Joined: Sat Nov 21, 2020 4:43 pm
Has thanked: 5 times
Been thanked: 144 times

Re: GTKDIALOG - Make a colored button

Post by don570 »

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

Code: Select all

DISPLACE=$(($W/6)

changed to

Code: Select all

DISPLACE=$(($W/6+5))
User avatar
don570
Posts: 770
Joined: Sat Nov 21, 2020 4:43 pm
Has thanked: 5 times
Been thanked: 144 times

Re: GTKDIALOG - Make a colored button

Post by don570 »

txt2svg worked in fatdog64 903.

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

superhik
Posts: 63
Joined: Mon Jun 19, 2023 7:56 pm
Has thanked: 6 times
Been thanked: 26 times

Re: GTKDIALOG - Make a colored button

Post by superhik »

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:

Code: Select all

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.

Code: Select all

' ------------------
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

txt2svg.7z
(126.68 KiB) Downloaded 7 times
Attachments
txt2svg.png
txt2svg.png (118.71 KiB) Viewed 410 times
User avatar
rockedge
Site Admin
Posts: 7021
Joined: Mon Dec 02, 2019 1:38 am
Location: Connecticut,U.S.A.
Has thanked: 3147 times
Been thanked: 2933 times
Contact:

Re: GTKDIALOG - Make a colored button

Post by rockedge »

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

superhik
Posts: 63
Joined: Mon Jun 19, 2023 7:56 pm
Has thanked: 6 times
Been thanked: 26 times

Re: GTKDIALOG - Make a colored button

Post by superhik »

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?

User avatar
BarryK
Posts: 2959
Joined: Tue Dec 24, 2019 1:04 pm
Has thanked: 158 times
Been thanked: 819 times

Re: GTKDIALOG - Make a colored button

Post by BarryK »

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/

User avatar
rockedge
Site Admin
Posts: 7021
Joined: Mon Dec 02, 2019 1:38 am
Location: Connecticut,U.S.A.
Has thanked: 3147 times
Been thanked: 2933 times
Contact:

Re: GTKDIALOG - Make a colored button

Post by rockedge »

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.

Screenshot_2025-03-06_19-44-03.jpg
Screenshot_2025-03-06_19-44-03.jpg (61.67 KiB) Viewed 252 times
Screenshot_2025-03-06_19-39-31-700px.jpg
Screenshot_2025-03-06_19-39-31-700px.jpg (56.4 KiB) Viewed 254 times
User avatar
MochiMoppel
Posts: 1343
Joined: Mon Jun 15, 2020 6:25 am
Location: Japan
Has thanked: 22 times
Been thanked: 521 times

Re: GTKDIALOG - Make a colored button

Post by MochiMoppel »

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 ;)

Post Reply

Return to “Programming”