Togglebutton with SVG images

For discussions about programming, programming questions/advice, and projects that don't really have anything to do with Puppy.
Post Reply
Message
Author
User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

Togglebutton with SVG images

#1 Post by don570 »

Here is an example of a togglebutton using 2 SVG images. Each image
corresponds to different data ---> a list widget is filled with data

One button is used and the label text changes.

The two svg images are renamed to make programming the togglebutton
easier

Code: Select all

cp /tmp/SVG_Description.svg /tmp/true.svg
cp /tmp/SVG_Cities.svg /tmp/false.svg
...since true and false is the variables output.

There is a third svg image created in /tmp/ ---> SVG_Function.svg

This is for a simple button that is hidden when the script is first launched,
then it becomes the 'Function' button.

Note that

Code: Select all

<action>clear:LIST</action>
is needed to stop the list from
growing.

Image

Code: Select all

#!/bin/bash
# make two svg images - labeled Cities and Description
for LABEL in 1 2 3 ;do
[  $LABEL -eq 1 ] && TEXT="Cities List" 
[  $LABEL -eq 2 ] && TEXT="Description" 
[  $LABEL -eq 3 ] && TEXT="Function" 

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

echo '<svg version="1.1">  
      <rect 
      style="fill:white;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:24;fill-opacity:1"
		x='\"$DISPLACE\"'  y="26" >
'$TEXT'
	  </text>

</svg>
'>/tmp/SVG_$TEXT.svg

done

cp /tmp/SVG_Description.svg /tmp/true.svg
cp /tmp/"SVG_Cities List.svg" /tmp/false.svg

#ln -sf /tmp/SVG_Description.svg /tmp/togglebutton.svg


mkdir -p /tmp/cities
echo 'High crime rate 
Dirty
Skyscrappers' > /tmp/cities/"New York"
cp -f /tmp/cities/"New York" /tmp/cities/default
echo 'Windy 
Cold
Sausage factories' > /tmp/cities/Chicago
echo 'Sunny 
Dry
Hollywood' > /tmp/cities/"Los Angeles"
echo 'New York 
Chicago
Los Angeles' > /tmp/cities/CITY_LIST
echo CITY_LIST > /tmp/cities/city

function function_switch {
	
	if [ "$(cat /tmp/cities/city)" = CITY_LIST ];then
	echo "New York" > /tmp/cities/city 
	else
	echo CITY_LIST > /tmp/cities/city
	fi
}
export -f function_switch

function function_switch2 {
	
	if [ "$LIST" = "NEW York" ];then
	echo "New York" > /tmp/cities/city 
	cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default
	fi
	
	if [ "$LIST" = "Chicago" ];then
	echo "Chicago" > /tmp/cities/city 
	cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default
	fi
	
	if [ "$LIST" = "Los Angeles" ];then
	echo "Los Angeles" > /tmp/cities/city 
	cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default
	fi
}
export -f function_switch2

export MAIN_DIALOG='
<window title="Toggle text" border-width="20">
	<vbox>	
	         <list selected-row="0">
				<variable>LIST</variable>
				<height>200</height>
				<width>250</width>				
				<input file>/tmp/cities/default</input>										   
			</list>	
		<hbox>	
		
		        <button>
		               <variable>BUTTON</variable>
		               <input file>/tmp/SVG_Function.svg</input>
		               <action>xmessage  "You clicked a button - $LIST" &</action>
		        </button>				
				
                <togglebutton active="true">
                       <variable>togglebutton</variable>					  	
					   <action>ln -sf /tmp/"$togglebutton".svg /tmp/togglebutton.svg</action>
					   <action>function_switch2</action>					   
					   <action>cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default</action>					   
					   <action>function_switch</action>
					   	<action>if true hide:BUTTON</action>
					   	<action>if false show:BUTTON</action>				   					  
					   <action>clear:LIST</action>
					   <action>refresh:LIST</action>
					   <action>refresh:togglebutton</action>					   					   
					   <input file>/tmp/togglebutton.svg</input>
				</togglebutton>
		</hbox>
		
	</vbox>
	<variable>MAIN_DIALOG</variable>
</window>'

gtkdialog --program=MAIN_DIALOG 


Last edited by don570 on Sat 15 Feb 2014, 19:00, edited 1 time in total.

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

Re: Togglebutton with SVG images

#2 Post by L18L »

I am thinking about

Code: Select all

for LABEL in $(gettext 'Cities')  $(gettext('Description') $(gettext 'Function');do
now 8)

that is really useful.

Thank you don570

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#3 Post by don570 »

I decided to rewrite the script -----> one line wasn't needed
so I commented it out

Code: Select all

#ln -sf /tmp/SVG_Description.svg /tmp/togglebutton.svg 
and I realised that a small change would allow white space in the
button labels

Code: Select all

for LABEL in 1 2 3 ;do
[  $LABEL -eq 1 ] && TEXT="Cities List" 
[  $LABEL -eq 2 ] && TEXT="Description" 
[  $LABEL -eq 3 ] && TEXT="Function"

The three SVG images are generated in /tmp

Code: Select all

'>/tmp/SVG_$TEXT.svg  

The revised script is available in the first post.

_______________________________

Note to L18L : Apparently whitespace in the variable LABEL isn't
important when looping?? You have more experience in gettext than me.

Code: Select all

for LABEL in $(gettext 'Cities')  $(gettext('Description') $(gettext 'Function');do 

User avatar
L18L
Posts: 3479
Joined: Sat 19 Jun 2010, 18:56
Location: www.eussenheim.de/

#4 Post by L18L »

don570 wrote:Apparently whitespace in the variable LABEL isn't
important when looping?

Code: Select all

for LABEL in $(gettext 'Cities')  $(gettext('Description') $(gettext 'Function');do 

Code: Select all

for LABEL in "$(gettext 'Cities')"  "$(gettext('Description')" "$(gettext 'Function')";do 
should work also for whitespaced items.

I have been playing with your script:

Code: Select all

#!/bin/sh
# make two svg images - labeled Cities and Description
export TEXTDOMAIN=togglebuttons

for LABEL in 1 2 3 ;do
[  $LABEL -eq 1 ] && TEXT="$(gettext 'Cities List')"
[  $LABEL -eq 2 ] && TEXT="$(gettext 'Description')"
[  $LABEL -eq 3 ] && TEXT="$(gettext 'Function')"

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

echo '<svg version="1.1"> 
      <rect
      style="fill:white;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:24;fill-opacity:1"
      x='"$DISPLACE"'  y="26" >
'$TEXT'
     </text>

</svg>
'>/tmp/SVG_$TEXT.svg

done

#cp /tmp/SVG_Description.svg /tmp/true.svg
cp /tmp/SVG_"$(gettext 'Description')".svg /tmp/true.svg
#cp /tmp/"SVG_Cities List.svg" /tmp/false.svg
cp /tmp/SVG_"$(gettext 'Cities List')".svg /tmp/false.svg

#ln -sf /tmp/SVG_Description.svg /tmp/togglebutton.svg


mkdir -p /tmp/cities
echo "$(gettext 'High crime rate
Dirty
Skyscrappers')" > /tmp/cities/"New York"
cp -f /tmp/cities/"New York" /tmp/cities/default
echo "$(gettext 'Windy
Cold
Sausage factories')" > /tmp/cities/Chicago
echo "$(gettext 'Sunny
Dry
Hollywood')" > /tmp/cities/"Los Angeles"
echo 'New York
Chicago
Los Angeles' > /tmp/cities/CITY_LIST
echo CITY_LIST > /tmp/cities/city

function function_switch {
   
   if [ "$(cat /tmp/cities/city)" = CITY_LIST ];then
   echo "New York" > /tmp/cities/city
   else
   echo CITY_LIST > /tmp/cities/city
   fi
}
export -f function_switch

function function_switch2 {
   
   if [ "$LIST" = "NEW York" ];then
   echo "New York" > /tmp/cities/city
   cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default
   fi
   
   if [ "$LIST" = "Chicago" ];then
   echo "Chicago" > /tmp/cities/city
   cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default
   fi
   
   if [ "$LIST" = "Los Angeles" ];then
   echo "Los Angeles" > /tmp/cities/city
   cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default
   fi
}
export -f function_switch2


export MAIN_DIALOG='
<window title="Toggle text" border-width="20">
   <vbox>   
            <list selected-row="0">
            <variable>LIST</variable>
            <height>200</height>
            <width>250</width>            
            <input file>/tmp/cities/default</input>                                 
         </list>   
      <hbox>   
      
              <button>
                     <variable>BUTTON</variable>
                     <input file>/tmp/SVG_'$(gettext 'Function')'.svg</input>
                     <action>MSG="'$(gettext 'You clicked a button')'";xmessage "$MSG - $LIST" &</action>
              </button>            
            
                <togglebutton active="true">
                       <variable>togglebutton</variable>                    
                  <action>ln -sf /tmp/"$togglebutton".svg /tmp/togglebutton.svg</action>
                  <action>function_switch2</action>                  
                  <action>cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default</action>                  
                  <action>function_switch</action>
                     <action>if true hide:BUTTON</action>
                     <action>if false show:BUTTON</action>                               
                  <action>clear:LIST</action>
                  <action>refresh:LIST</action>
                  <action>refresh:togglebutton</action>                                    
                  <input file>/tmp/togglebutton.svg</input>
            </togglebutton>
      </hbox>
      
   </vbox>
   <variable>MAIN_DIALOG</variable>
</window>'

gtkdialog --program=MAIN_DIALOG 
...
fun

changed "Städteliste" to "Liste der Städte" to have some whitespace. It worked using "$(gettext '... ... ...')"

Hope to see your fr_CA localization soon.
Attachments
togglebuttons.png
Quiz: which city?
(5.02 KiB) Downloaded 528 times

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#5 Post by don570 »

I finished the gettext version of script. I made it as general as possible
so that it can be converted to other uses.
Image

Code: Select all

#!/bin/sh
# make two svg images - labeled Cities and Description
export TEXTDOMAIN=Script_togglebutton.sh
export OUTPUT_CHARSET=UTF-8
for LABEL in 1 2 3 ;do
[  $LABEL -eq 1 ] && TEXT="$(gettext 'Cities List')"
[  $LABEL -eq 2 ] && TEXT="$(gettext 'Description')" 
[  $LABEL -eq 3 ] && TEXT="$(gettext 'Function')" 

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

echo '<svg version="1.1">  
      <rect 
      style="fill:white;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:24;fill-opacity:1"
		x='\"$DISPLACE\"'  y="26" >
'$TEXT'
	  </text>

</svg>
'>/tmp/SVG_$TEXT.svg

done

cp /tmp/SVG_"$(gettext 'Description')".svg /tmp/true.svg
cp /tmp/SVG_"$(gettext 'Cities List')".svg /tmp/false.svg

#ln -sf /tmp/SVG_Description.svg /tmp/togglebutton.svg


mkdir -p /tmp/cities
echo "$(gettext 'High crime rate 
Dirty
Skyscrappers')" > /tmp/cities/"$(gettext 'New York')"
cp -f /tmp/cities/"$(gettext 'New York')" /tmp/cities/default
echo "$(gettext 'Windy 
Cold
Sausage factories')" > /tmp/cities/"$(gettext 'Chicago')"
echo "$(gettext 'Sunny 
Dry
Hollywood')" > /tmp/cities/"$(gettext 'Los Angeles')"
echo "$(gettext 'New York') 
$(gettext 'Chicago')
$(gettext 'Los Angeles')" > /tmp/cities/CITY_LIST
echo CITY_LIST > /tmp/cities/city

function function_switch {
	
	if [ "$(cat /tmp/cities/city)" = CITY_LIST ];then
	echo "$(gettext 'New York')" > /tmp/cities/city 
	else
	echo CITY_LIST > /tmp/cities/city
	fi
}
export -f function_switch

function function_switch2 {
	
	if [ "$LIST" = "$(gettext 'New York')" ];then
	echo "$(gettext 'New York')" > /tmp/cities/city 
	cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default
	fi
	
	if [ "$LIST" = "$(gettext 'Chicago')" ];then
	echo "$(gettext 'Chicago')" > /tmp/cities/city 
	cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default
	fi
	
	if [ "$LIST" = "$(gettext 'Los Angeles')" ];then
	echo "$(gettext 'Los Angeles')" > /tmp/cities/city 
	cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default
	fi
}
export -f function_switch2

export MAIN_DIALOG='
<window title="'$(gettext 'Toggle text')'" border-width="20">
	<vbox>	
	         <list selected-row="0">
				<variable>LIST</variable>
				<height>200</height>
				<width>250</width>				
				<input file>/tmp/cities/default</input>										   
			</list>	
		<hbox>	
		
		        <button>
		               <variable>BUTTON</variable>
		               <input file>/tmp/SVG_Function.svg</input>
		               <action>xmessage  "You clicked a button - $LIST" &</action>
		        </button>				
				
                <togglebutton active="true">
                       <variable>togglebutton</variable>					  	
					   <action>ln -sf /tmp/"$togglebutton".svg /tmp/togglebutton.svg</action>
					   <action>function_switch2</action>					   
					   <action>cp -f /tmp/cities/"$(cat /tmp/cities/city)" /tmp/cities/default</action>					   
					   <action>function_switch</action>
					   	<action>if true hide:BUTTON</action>
					   	<action>if false show:BUTTON</action>				   					  
					   <action>clear:LIST</action>
					   <action>refresh:LIST</action>
					   <action>refresh:togglebutton</action>					   					   
					   <input file>/tmp/togglebutton.svg</input>
				</togglebutton>
		</hbox>
		
	</vbox>
	<variable>MAIN_DIALOG</variable>
</window>'

gtkdialog --program=MAIN_DIALOG 


Last edited by don570 on Tue 18 Feb 2014, 20:32, edited 1 time in total.

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#6 Post by don570 »

On the subject of white space....

Put some files with white space in your home folder
and run this script. The double quotes protect the white space.
Apparently it only goes around the loop once.

Afterwards remove the double quotes and try again. It will loop but it will not
show the filenames with white space properly.

Code: Select all

#!/bin/sh 
for file in "$(ls)";do
echo  "file = $file"
done

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

unit conversion

#7 Post by don570 »

I've made a practical script for unit conversion.

It modifies the above script...

You can test it here....

http://murga-linux.com/puppy/viewtopic. ... 041#760041

_________________________________________________

User avatar
mavrothal
Posts: 3096
Joined: Mon 24 Aug 2009, 18:23

#8 Post by mavrothal »

Sorry for reviving a year old thread, but can you have a toggle button refreshing itself? ie
if true, toggle-button-label 1 toggle-button-icon 1, action a, b, c
if false, toggle-button-label 2, toggle-button-icon 2 action d, e, f
where label text and icons are to the standard gtk (open, ok etc) but custom.
Can the <label> and maybe <input file icon=""> definition to be state sensitive?
Thanks
BTW nice gtkdialog tutorial but couldn't find anything on togglebuttons in it.
== [url=http://www.catb.org/esr/faqs/smart-questions.html]Here is how to solve your[/url] [url=https://www.chiark.greenend.org.uk/~sgtatham/bugs.html]Linux problems fast[/url] ==

User avatar
MochiMoppel
Posts: 2084
Joined: Wed 26 Jan 2011, 09:06
Location: Japan

#9 Post by MochiMoppel »

mavrothal wrote:Sorry for reviving a year old thread, but can you have a toggle button refreshing itself?
Don't know if this is what you are looking for.

User avatar
mavrothal
Posts: 3096
Joined: Mon 24 Aug 2009, 18:23

#10 Post by mavrothal »

MochiMoppel wrote:
mavrothal wrote:Sorry for reviving a year old thread, but can you have a toggle button refreshing itself?
Don't know if this is what you are looking for.
That is the functionality I want on the button itself, but using the togglebutton widget rather than overlaying two buttons and play with their visibility.
== [url=http://www.catb.org/esr/faqs/smart-questions.html]Here is how to solve your[/url] [url=https://www.chiark.greenend.org.uk/~sgtatham/bugs.html]Linux problems fast[/url] ==

User avatar
zigbert
Posts: 6621
Joined: Wed 29 Mar 2006, 18:13
Location: Valåmoen, Norway
Contact:

#11 Post by zigbert »

The key to solve this is to use a svg icon containing both the label and the icon.

Note that it's only the <input> tag that can be refreshed for any widget. Before Thunor opened support of togglebuttons, we use the widget <checkbox draw_indicator="false"> which also shows a normal button on/off. But, as the <input> tag for a <checkbox> refreshes the value of its state (true/false), you can not refresh the label/icon. For <togglebutton> the <input> tag refreshes the icon, so the label will be static - else we include this into the icon.

and, yes. The togglebutton can refresh itself.

Sigmund

User avatar
mavrothal
Posts: 3096
Joined: Mon 24 Aug 2009, 18:23

#12 Post by mavrothal »

zigbert wrote:The key to solve this is to use a svg icon containing both the label and the icon.
So basically you need custom icons to toggle the buttons? :shock:
Forget it.
== [url=http://www.catb.org/esr/faqs/smart-questions.html]Here is how to solve your[/url] [url=https://www.chiark.greenend.org.uk/~sgtatham/bugs.html]Linux problems fast[/url] ==

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#13 Post by don570 »

There are lots of examples of 'refreshing' by Thunor.

Available HERE

Some can be difficult to understand because he uses complex functions.

_____________________________________________________________

User avatar
mavrothal
Posts: 3096
Joined: Mon 24 Aug 2009, 18:23

#14 Post by mavrothal »

don570 wrote:There are lots of examples of 'refreshing' by Thunor.

Available HERE

Some can be difficult to understand because he uses complex functions.
That was very helpful and i can actually do the icon toggle :D
However I'm trying to work around Zigbert's code that is using the xpl_button_icon script to insert the icon in the button. so I added in the dialog script:

Code: Select all

OPEN_ICON="`/usr/lib/gtkdialog/xml_button-icon package_remove`"
CLOSE_ICON="`/usr/lib/gtkdialog/xml_button-icon close`"
export OPEN_ICON CLOSE_ICON
ICON="$OPEN_ICON"
change_icon () {
	[ "$ICON" = "$OPEN_ICON" ] && ICON="$CLOSE_ICON" || ICON="$OPEN_ICON"
	export ICON
}
export -f change_icon	

# and change the button code to

        <togglebutton tooltip-text="'$(gettext 'Open/Close the Uninstall packages window')'" space-expand="false" space-fill="false">
          <label>" '$(gettext 'Uninstall')' "</label>
          '${ICON}'
          <variable>BUTTON_UNINSTALL</variable>
          <action>change_icon</action>
          <action>refresh:BUTTON_UNINSTALL</action>
          <action>if true show:VBOX_REMOVE</action>
          <action>if false hide:VBOX_REMOVE</action>
        </togglebutton>
But it fails.
Basically I have no way to export the current ${ICON} from the dialog (action "export" is not recognized) and if I export it from the function as it is written now, does not appear to be taken by the dialog.
(unless the refresh action does not work with the xml_button-icon :? )

Any hints on that?
Thanks
== [url=http://www.catb.org/esr/faqs/smart-questions.html]Here is how to solve your[/url] [url=https://www.chiark.greenend.org.uk/~sgtatham/bugs.html]Linux problems fast[/url] ==

User avatar
zigbert
Posts: 6621
Joined: Wed 29 Mar 2006, 18:13
Location: Valåmoen, Norway
Contact:

#15 Post by zigbert »

You can not refresh the gtkdialog-code itself - this is already executed by gtkdialog. The way to do it is to
- define input: <input file>/tmp/button-icon.svg</input>
- if true: cp /usr/share/pixmaps/puppy/close.svg /tmp/button-icon.svg
- refresh button

Another solution is to hide/show 2 (toggle)buttons with different icons (and labels)

User avatar
mavrothal
Posts: 3096
Joined: Mon 24 Aug 2009, 18:23

#16 Post by mavrothal »

zigbert wrote:You can not refresh the gtkdialog-code itself - this is already executed by gtkdialog. The way to do it is to
- define input: <input file>/tmp/button-icon.svg</input>
- if true: cp /usr/share/pixmaps/puppy/close.svg /tmp/button-icon.svg
- refresh button

Another solution is to hide/show 2 (toggle)buttons with different icons (and labels)
As I mentioned I could do the change with the input file as in don's examples, I was just trying to stick with your code and the buton_icon approach. I did not realise that is impossible this way (would be a nice feature to add if possible).
Thanks for saving me further time.
== [url=http://www.catb.org/esr/faqs/smart-questions.html]Here is how to solve your[/url] [url=https://www.chiark.greenend.org.uk/~sgtatham/bugs.html]Linux problems fast[/url] ==

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#17 Post by don570 »

It is possible to have a togglebutton widget without the need for SVG images
(however svg images are quite powerful)

You can read about my experiences with the togglebutton widget.
Be careful with the bullet character!!

http://murga-linux.com/puppy/viewtopic.php?p=756690

___________________________________________________________

User avatar
technosaurus
Posts: 4853
Joined: Mon 19 May 2008, 01:24
Location: Blue Springs, MO
Contact:

#18 Post by technosaurus »

You can just set the image to auto-refresh and change the image to "toggle" it. ... Pretty simple compared to the methods in this thread
Check out my [url=https://github.com/technosaurus]github repositories[/url]. I may eventually get around to updating my [url=http://bashismal.blogspot.com]blogspot[/url].

Post Reply