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 22 Aug 2014, 00:15
All times are UTC - 4
 Forum index » Off-Topic Area » Programming
SVG image buttons
Post new topic   Reply to topic View previous topic :: View next topic
Page 1 of 2 [26 Posts]   Goto page: 1, 2 Next
Author Message
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: 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.



___________________________________________
Freecns-2.0.sh.gz
Description  remove fake gz extension
gz

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

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

 Download 
Filename  button3.sh.gz 
Filesize  22.98 KB 
Downloaded  265 Time(s) 

Last edited by don570 on Thu 19 Sep 2013, 16:48; edited 10 times in total
Back to top
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: 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
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: 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
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: 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
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: 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
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: 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
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: 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
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: 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
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: 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
View user's profile Send private message 
mikeb


Joined: 23 Nov 2006
Posts: 8160

PostPosted: 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
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: Wed 23 Oct 2013, 15:32    Post subject:  

Thanks for tip. I wonder if anchor for textstring is needed.?

_____________________________________________
Back to top
View user's profile Send private message 
mikeb


Joined: 23 Nov 2006
Posts: 8160

PostPosted: 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 Smile

Interesting post on svg usage...I always thought multiple bundles of bitmap icons was a bit clumsy.

mike
Back to top
View user's profile Send private message 
vovchik


Joined: 23 Oct 2006
Posts: 1285
Location: Ukraine

PostPosted: 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
View user's profile Send private message 
don570


Joined: 10 Mar 2010
Posts: 3254
Location: Ontario

PostPosted: Mon 28 Oct 2013, 20:17    Post subject:  

To vovchik...

A really nice collection. Cool

I dragged files into executable path and fortunately
there is help option.

______________________________________
Back to top
View user's profile Send private message 
technosaurus


Joined: 18 May 2008
Posts: 4335

PostPosted: 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
_________________
Web Programming - Pet Packaging 100 & 101
Back to top
View user's profile Send private message 
Display posts from previous:   Sort by:   
Page 1 of 2 [26 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.0928s ][ Queries: 13 (0.0082s) ][ GZIP on ]