Puppy Linux Discussion Forum Forum Index Puppy Linux Discussion Forum
Puppy HOME page : puppylinux.com
"THE" alternative forum : puppylinux.info
 
 FAQFAQ   SearchSearch   MemberlistMemberlist   UsergroupsUsergroups   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 

The time now is Fri 04 Sep 2015, 21:12
All times are UTC - 4
 Forum index » Off-Topic Area » Programming
Togglebutton with SVG images
Post new topic   Reply to topic View previous topic :: View next topic
Page 1 of 2 [18 Posts]   Goto page: 1, 2 Next
Author Message
don570


Joined: 10 Mar 2010
Posts: 3839
Location: Ontario

PostPosted: Wed 12 Feb 2014, 19:41    Post subject:  Togglebutton with SVG images  

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:

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:
<action>clear:LIST</action>

is needed to stop the list from
growing.



Code:

#!/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, 15:00; edited 1 time in total
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2990
Location: www.eussenheim.de/

PostPosted: Thu 13 Feb 2014, 04:42    Post subject: Re: Togglebutton with SVG images  

I am thinking about
Code:
for LABEL in $(gettext 'Cities')  $(gettext('Description') $(gettext 'Function');do
now Cool

that is really useful.

Thank you don570
Back to top
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3839
Location: Ontario

PostPosted: Sat 15 Feb 2014, 15:10    Post subject:  

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

Code:
#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:

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:
'>/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:
for LABEL in $(gettext 'Cities')  $(gettext('Description') $(gettext 'Function');do
Back to top
View user's profile Send private message 
L18L

Joined: 19 Jun 2010
Posts: 2990
Location: www.eussenheim.de/

PostPosted: Sun 16 Feb 2014, 07:57    Post subject:  

don570 wrote:
Apparently whitespace in the variable LABEL isn't
important when looping?
Code:
for LABEL in $(gettext 'Cities')  $(gettext('Description') $(gettext 'Function');do


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

I have been playing with your script:
Code:
#!/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.
togglebuttons.png
 Description   Quiz: which city?
 Filesize   5.02 KB
 Viewed   428 Time(s)

togglebuttons.png

Back to top
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3839
Location: Ontario

PostPosted: Tue 18 Feb 2014, 16:23    Post subject:  

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


Code:

#!/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, 16:32; edited 1 time in total
Back to top
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3839
Location: Ontario

PostPosted: Tue 18 Feb 2014, 16:29    Post subject:  

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:

#!/bin/sh
for file in "$(ls)";do
echo  "file = $file"
done
Back to top
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3839
Location: Ontario

PostPosted: Thu 20 Feb 2014, 21:22    Post subject: unit conversion  

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.php?p=760041#760041

_________________________________________________
Back to top
View user's profile Send private message 
mavrothal


Joined: 24 Aug 2009
Posts: 2287

PostPosted: Wed 04 Feb 2015, 09:55    Post subject:  

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.

_________________
Kids all over the world go around with an XO laptop. They deserve one puppy (or many) too Very Happy
Back to top
View user's profile Send private message 
MochiMoppel


Joined: 26 Jan 2011
Posts: 765
Location: Japan

PostPosted: Wed 04 Feb 2015, 10:13    Post subject:  

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.
Back to top
View user's profile Send private message 
mavrothal


Joined: 24 Aug 2009
Posts: 2287

PostPosted: Wed 04 Feb 2015, 10:22    Post subject:  

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.

_________________
Kids all over the world go around with an XO laptop. They deserve one puppy (or many) too Very Happy
Back to top
View user's profile Send private message 
zigbert


Joined: 29 Mar 2006
Posts: 6042
Location: Valåmoen, Norway

PostPosted: Wed 04 Feb 2015, 10:41    Post subject:  

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

_________________
Stardust resources
Back to top
View user's profile Send private message Visit poster's website 
mavrothal


Joined: 24 Aug 2009
Posts: 2287

PostPosted: Wed 04 Feb 2015, 10:50    Post subject:  

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? Shocked
Forget it.

_________________
Kids all over the world go around with an XO laptop. They deserve one puppy (or many) too Very Happy
Back to top
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3839
Location: Ontario

PostPosted: Thu 05 Feb 2015, 20:40    Post subject:  

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

Available HERE

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

_____________________________________________________________
Back to top
View user's profile Send private message 
mavrothal


Joined: 24 Aug 2009
Posts: 2287

PostPosted: Fri 06 Feb 2015, 04:08    Post subject:  

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 Very Happy
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:
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 Confused )

Any hints on that?
Thanks

_________________
Kids all over the world go around with an XO laptop. They deserve one puppy (or many) too Very Happy
Back to top
View user's profile Send private message 
zigbert


Joined: 29 Mar 2006
Posts: 6042
Location: Valåmoen, Norway

PostPosted: Fri 06 Feb 2015, 04:46    Post subject:  

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)

_________________
Stardust resources
Back to top
View user's profile Send private message Visit poster's website 
Display posts from previous:   Sort by:   
Page 1 of 2 [18 Posts]   Goto page: 1, 2 Next
Post new topic   Reply to topic View previous topic :: View next topic
 Forum index » Off-Topic Area » Programming
Jump to:  

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


Powered by phpBB © 2001, 2005 phpBB Group
[ Time: 0.2833s ][ Queries: 13 (0.0134s) ][ GZIP on ]