Author |
Message |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Wed 11 Sep 2013, 20:22 Post subject:
SVG image buttons |
|
I've been testing SVG image format for button images.
The main browsers will now load svg images
(see list)
Method: 'echo' command is used to create the svg image.
You should track down the svg image in /tmp to study how it's created.
The button is created by using an input file (the usual method).
Don't use the height and width tags of button widget. There are several
other methods to control the height and width of button widget
such as size of svg image itself.
Here is how a standard button widget is created ...
Code: | <button yes no ok cancel help tag_attr="value"...>
<label>text</label>
<variable>varname</variable>
<height>value</height>
<width>value</width>
<input file>filename</input>
<input file icon="image"></input>
<input file stock="gtk-image"></input>
<sensitive>state</sensitive>
<action>activity</action>...
<action signal="type">activity</action>...
<action function="type">parameter</action>...
</button> |
The button looks different if a different gtk theme is used.
I used 'Shallow thought'.
In most case the width of svg image and width of rectangle
(creating shadow effect) should be approx. equal. This is set with the
tag options.
___________________________________________
Description |
remove fake gz extension
|

Download |
Filename |
Freecns-2.0.sh.gz |
Filesize |
9.84 KB |
Downloaded |
429 Time(s) |
Description |
remove fake gz extension
|

Download |
Filename |
android-icons.sh.gz |
Filesize |
25.86 KB |
Downloaded |
445 Time(s) |
Description |
remove fake gz extension
|

Download |
Filename |
button3.sh.gz |
Filesize |
22.98 KB |
Downloaded |
451 Time(s) |
Last edited by don570 on Thu 19 Sep 2013, 16:48; edited 10 times in total
|
Back to top
|
|
 |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Thu 12 Sep 2013, 19:32 Post subject:
|
|
I have begun adding a fifth top row of useful buttons.
Note that a white rectangle (only partially opaque 0.4)
gives a nice shading effect in some themes.
__________________________________________________
Note that in most situations the programmer will keep the width of
the image and the width of the rectangle the same. Here's an example:
_____________________________________________
|
Back to top
|
|
 |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Thu 12 Sep 2013, 19:42 Post subject:
|
|
To use a simple stock svg image for a button input file:
(See top fifth row of example for camera svg image)
1) Download a page of free svg icons such as android-native-final
(Chrome browser will save the page in SVG format)
and open with inkscape lite
2) Select one icon and copy to clipboard
3) paste in new inkscape document
4) ctrl-a 'Select all'
5) Drag on corner to resize
6) use magnifier to zoom in
7) Drag icon to upper left corner of document
(document outline is shown by rectangle )
8 ) Save to disk , then open with text editor
9) use clipboard to copy relevant svg description.
Height should be somewhere 20 to 30 .
Make width option just wide enough to show icon.
An svg image can have text as an extra option. Add text if
you wish but width of svg image will have to adjusted as well
as x value in text tag
For Example:
Code: | <text style="fill:black;stroke:none;font-family:DejaVu;font-style:normal;font-weight:medium;font-size:24;fill-opacity:1;text-anchor:end;writing-mode:lr;"
x="75" y="20">
'Text string'
</text>
|
10) make an echo command , so script will create an svg image
11) make a button that has an input file.
The input file is the svg image that you created with 'echo' command.
Example:
Code: | <input file>/tmp/SVG43.svg</input>
|
Test button in gtkdialog script.
______________________________
|
Back to top
|
|
 |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Sat 14 Sep 2013, 15:09 Post subject:
|
|
New button 3
Improvements:
1) yes.svg and no.svg added to top row
2) countdown button created for timers
3) I changed another button so that it has two rectangles in different colors
(red and white). This gives an interesting effect. (see third row)
4) Bug in third row height was fixed by changing rectangle's y value
______________________________________________________
|
Back to top
|
|
 |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Sat 14 Sep 2013, 15:39 Post subject:
|
|
The size of inkscape lite document doesn't matter since there are ways
to set width and height in 'echo' command, however I have found
it useful to set the size in inkscape. Here's an example of the size
being set. The icon has been dragged to upper left hand corner of
document.
_________________________________________________
|
Back to top
|
|
 |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Thu 19 Sep 2013, 17:04 Post subject:
|
|
I made some sample 32x32 icons from a large collection of
freeware svg icons that I got from http://d.pr/f/qkDD/download
See first posting for script to download.
Here is what a few look like when i put them in a script.
__________________________________________
|
Back to top
|
|
 |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Thu 19 Sep 2013, 17:20 Post subject:
|
|
From a collection of Android svg icons I made a script to test
32x32 buttons I got from here.
The script is available in the first posting. Here is a few of the buttons.
___________________________________________________________
|
Back to top
|
|
 |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Thu 19 Sep 2013, 17:25 Post subject:
|
|
I noticed if you are using an older version of gtkdialog i.e. gtkdialoag 3
then you must avoid using the following tags in button widget.
The tags are ignored. The script still runs.
Code: |
<height>value</height>
<width>value</width> |
The solution is to use inkscape lite to scale the svg image,
then such tags are not needed.
_____________________________________________________
|
Back to top
|
|
 |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Wed 23 Oct 2013, 15:17 Post subject:
|
|
I have found a simple method of generating an attractive color button
http://murga-linux.com/puppy/viewtopic.php?p=732417#732417
_________________________________________________________
Last edited by don570 on Wed 23 Oct 2013, 15:58; edited 1 time in total
|
Back to top
|
|
 |
mikeb

Joined: 23 Nov 2006 Posts: 11110
|
Posted: Wed 23 Oct 2013, 15:28 Post subject:
|
|
You might be interested in scour
http://www.codedread.com/scour/
ok its a python script but I was amazed by how much it reduced the size of some svg graphics I tested. Worth a shot if you have a pile of them.
mike
|
Back to top
|
|
 |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Wed 23 Oct 2013, 15:32 Post subject:
|
|
Thanks for tip. I wonder if anchor for textstring is needed.?
_____________________________________________
|
Back to top
|
|
 |
mikeb

Joined: 23 Nov 2006 Posts: 11110
|
Posted: Wed 23 Oct 2013, 15:47 Post subject:
|
|
Good question but I am a big dummie when it comes to svg so I just grabbed and ran it though it does seem to have a lot of inkscape options
Interesting post on svg usage...I always thought multiple bundles of bitmap icons was a bit clumsy.
mike
|
Back to top
|
|
 |
vovchik

Joined: 23 Oct 2006 Posts: 1447 Location: Ukraine
|
Posted: Thu 24 Oct 2013, 04:10 Post subject:
|
|
Dear puppians,
To generate heaps of custom tiny svgs, check out my svg factory on the page below. Use the latest (bsvg-0.1d.tar.gz), I think
With kind regards,
vovchik
http://208.109.22.214/puppy/viewtopic.php?t=76431&start=45&sid=a7c2f5af55bf2f49e3cbab48757465d5
|
Back to top
|
|
 |
don570

Joined: 10 Mar 2010 Posts: 4989 Location: Ontario
|
Posted: Mon 28 Oct 2013, 20:17 Post subject:
|
|
To vovchik...
A really nice collection.
I dragged files into executable path and fortunately
there is help option.
______________________________________
|
Back to top
|
|
 |
technosaurus

Joined: 18 May 2008 Posts: 4787 Location: Kingwood, TX
|
Posted: Mon 28 Oct 2013, 23:58 Post subject:
|
|
I have a collection of scriptable svg icons built into a shell script for use with SIT (Simple Icon Tray), they are MIT licensed derivatives of the ones from raphael.js
_________________ Check out my github repositories. I may eventually get around to updating my blogspot.
|
Back to top
|
|
 |
|