Create your own icons for toolbars etc. with PureBasic

Share your advanced PureBasic knowledge/code with the community.
User avatar
holzhacker
Enthusiast
Enthusiast
Posts: 123
Joined: Mon Mar 08, 2010 9:14 pm
Location: "Mens sana in corpore sano"
Contact:

Re: Create your own icons for toolbars etc. with PureBasic

Post by holzhacker »

Hello, congratulations on the wonderful work ... A small contribution, the flag of my poor rich country.
ImageImage

Code: Select all

   NewIcon(Flag_Brazil(file$, img, size, #CSS_Green, #CSS_Yellow, #CSS_Blue))
   ...
   NewIcon(Flag_Brazil(file$, img, size, #CSS_DarkGray, #CSS_LightGray, #CSS_DimGrey))

Code: Select all

    Procedure.i Flag_Brazil(file$, img.i, size.i, color1.i, color2.i, color3.i)
      ; in : file$: name of SVG file which is to be created (only supported on Linux),
      ;             or "" for creating an image in memory
      ;      img   : number of the image which is to be created, or #PB_Any
      ;      size  : width and height (number of pixels)
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0
      ; [org. by Omi]
      Protected ret.i;, I.i
      Protected p.d  = size / 32
      
      ret = StartVectorIconOutput(file$, img, size)
      
      If ret
         VectorSourceColor(#CSS_White)
         MovePathCursor(0,       p * 16- 1)
         AddPathLine   (size- 1, p * 16- 1)
         StrokePath    (p * 20)
         
         VectorSourceColor(color1)
         MovePathCursor(1,    p * 16)
         AddPathLine   (size, p * 16)
         StrokePath    (p * 20)
         
         VectorSourceColor(color2)
         MovePathCursor   (p * 3, p * 16)
         AddPathLine(p * 16,            p *  7)
         AddPathLine   ((p * 14.500)*2, p * 16)
         AddPathLine   (p * 16,         p * 25)
         ClosePath()
         FillPath      ()         

         VectorSourceColor(color3)
         AddPathCircle (p * 16, p * 16, p * 6)
         FillPath      ()
         
         StopVectorDrawing()
      EndIf
      
      ProcedureReturn ret
    EndProcedure
Greetings and thanks!

Romerio Medeiros
romerio@gmail.com
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

holzhacker,

many thanks for your kind words, and for your contribution!

Current changes (2018-06-17)
New
  • "FlagBrazil" by holzhacker
Changed
  • Found 3 Global variables inside a procedure -> changed to Protected variables.
  • Found some unused Protected variables -> removed.
  • Found some unused procedure parameters -> Added comments that can be displayed in PB's issue browser;
    those parameters might be removed in the future.
  • Some tiny cosmetic changes in the code (not affecting the appearance of any icons).
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

Current changes (2018-07-08)
vectoricons.pbi
  • sorted the flag procedures alphabetically
  • added comments in some flag procedures
  • cosmetic changes
vectoriconbrowser.pbi
  • The code was partly rewritten, it's now cleaner and better maintainable.
    (E.g. previously some gadget numbers were constants, while others were created dynamically using #Pb_Any. Now only constants are used for gadget numbers.)
  • Any single icon can now be saved to a PNG image by right-clicking at it.
  • The flag icons are now in a separate tab.
  • I inserted an underscore in all flag names, e.g. FlagAustralia -> Flag_Australia.
  • The order of parameters of the main procedure BrowseIcons() was changed.
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

Current changes (2018-07-15)

More clean-up work in "vectoricons.pbi"
  • Replaced some literal color constants with existing named color constants.
  • In one procedure, I replaced a hard coded color constant with a parameter that was not used.
  • Removed unused and unneeded color parameters in some procedures.
  • Sorted named CSS3, Pantone and self-defined color constants alphabetically.
  • Removed duplicate named color constants.
  • Removed some self-defined color constants that were not used.
  • Added some comments.
  • Corrected "Corea" to "Korea".
  • Some other cosmetic changes.
Added
  • Flag_Bangladesh
  • Flag_Estonia
  • Flag_Europe
  • Flag_Spain
+ some named color constants for these new flags
User avatar
RSBasic
Moderator
Moderator
Posts: 1218
Joined: Thu Dec 31, 2009 11:05 pm
Location: Gernsbach (Germany)
Contact:

Re: Create your own icons for toolbars etc. with PureBasic

Post by RSBasic »

Thanks for your work. :)
Image
Image
Justin
Addict
Addict
Posts: 829
Joined: Sat Apr 26, 2003 2:49 pm

Re: Create your own icons for toolbars etc. with PureBasic

Post by Justin »

Those icons are really great, how are they made? wich program?
I need a standard checkbox/radio inside a rectange to use in html, i modified the checked.svg to make it a little smaller, but i don't know how to put it inside a rectangle, i always get blurry lines, any help?
original:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24pt" height="24pt" viewBox="0 0 24 24" version="1.1">
<g id="surface4113">
<path style="fill:none;stroke-width:4.8;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(13.333333%,54.509804%,13.333333%);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.398438 12 L 12 19.199219 L 21.601562 2.398438 "/>
</g>
</svg>
smaller, changed viewbox, no idea what i'm doing

Code: Select all

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="6pt" height="6pt" viewBox="-6 -6 36 36" version="1.1">
<g id="surface4113">
<path style="fill:none;stroke-width:4.8;stroke-linecap:butt;stroke-linejoin:miter;stroke:rgb(0,0,0);stroke-opacity:1;stroke-miterlimit:10;" d="M 2.398438 12 L 12 19.199219 L 21.601562 2.398438 "/>
</g>
</svg>
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

Justin wrote:Those icons are really great, how are they made? wich program?
:?:

They are made with PureBasic's vector library.
You can read a lot of details in the first post of this thread.
There you'll also find a link for downloading the PureBasic source code for all icons.
Justin
Addict
Addict
Posts: 829
Joined: Sat Apr 26, 2003 2:49 pm

Re: Create your own icons for toolbars etc. with PureBasic

Post by Justin »

So you are saying they are done by hand in pb? with trial/error without any visual tool to draw the lines, etc?

Where does the .svg files come from then?
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

Justin wrote:So you are saying they are done by hand in pb? with trial/error without any visual tool to draw the lines, etc?
It depends. Several different authors have contributed to this icon collection.
And depending on the particular icon, probably different methods have been chosen.
So for instance my DrawStar() macro was created without any tool and not by trial and error, but by knowledge of geometry.
Justin wrote:Where does the .svg files come from then?
Since you have the SVG files, it seems that you have downloaded my ZIP archive from the first post of this thread. It contains a file named "create SVG file.pb".
See also SvgVectorOutput()
Justin
Addict
Addict
Posts: 829
Joined: Sat Apr 26, 2003 2:49 pm

Re: Create your own icons for toolbars etc. with PureBasic

Post by Justin »

Using your procedure i ended with this, i don't know if the offsets i used to get the same rectangle line width are ok and if it will work with any rectangle stroke width.

Code: Select all

EnableExplicit

Procedure DrawTick(_x_.d, _y_.d, _half_.d, _hw_.d)
  ; _x_, _y_: Coordinates of the centre of box containing the tick
  ; _half_  : Half of size (width and height) of containing box
  ; _hw_    : Half of width of the line used for drawing the tick
  ; [by Little John]
  
  MovePathCursor(_x_-_half_+_hw_, _y_)
  AddPathLine   (_x_            , _y_+_half_-2*_hw_)
  AddPathLine   (_x_+_half_-_hw_, _y_-_half_+_hw_)
  StrokePath(2*_hw_)
EndProcedure

Define.i ev
Define.d w, h

OpenWindow(0, 0, 0, 400, 400, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
CanvasGadget(0, 10, 10, 200, 200)

If StartVectorDrawing(CanvasVectorOutput(0, #PB_Unit_Point))
;If StartVectorDrawing(SvgVectorOutput("test.svg", 32, 32, #PB_Unit_Point))
	
	w = VectorOutputWidth()
	h = VectorOutputHeight()
	AddPathBox(1.5, 1.5, w - 3.5, h - 3.5)
	VectorSourceColor(RGBA(0, 0, 0, 255))
	StrokePath(3)
	
	DrawTick(w / 2, h / 2, w / 3, w / 20)
	
	StopVectorDrawing()
EndIf

Repeat
	ev = WaitWindowEvent()
Until ev = #PB_Event_CloseWindow
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

Justin wrote:Using your procedure i ended with this, i don't know if the offsets i used to get the same rectangle line width are ok and if it will work with any rectangle stroke width.
I'm not sure whether I understand the question properly. Of course it will not work with any stroke width for the rectangle. If you replace StrokePath(3) e.g. with StrokePath(70), then you'll see what I mean. The best is, to use a value relative to w or h, as it is done with the other sizes.
When you open the file "vectoricons.pbi" and search for "AddPathBox", you'll find several examples of its usage.
collectordave
Addict
Addict
Posts: 1309
Joined: Fri Aug 28, 2015 6:10 pm
Location: Portugal

Re: Create your own icons for toolbars etc. with PureBasic

Post by collectordave »

Hi LittleJohn

Just programming a Toolbar wizard and looking to make it DPI aware, having some trouble with resizing images.

I noticed before that your approach to using vector drawing to produce the images is great and very scaleable without affecting quality (except on very small unseeable images).

One of the pains is also the availability of icons.

Do you mind if I play around with your code to integrate it into the toolbar wizard?

Kind Regards

CD
Any intelligent fool can make things bigger and more complex. It takes a touch of genius — and a lot of courage to move in the opposite direction.
Little John
Addict
Addict
Posts: 4519
Joined: Thu Jun 07, 2007 3:25 pm
Location: Berlin, Germany

Re: Create your own icons for toolbars etc. with PureBasic

Post by Little John »

collectordave wrote:Do you mind if I play around with your code to integrate it into the toolbar wizard?
Hi,

I cannot answer this question alone, as other people have also contributed substantially to this project.
[u]davido[/u] wrote:Licence what licence!
Other contributors might have different preferences in this regard. Unfortunately, currently we have no general license that determines how the code of this project can be used. I would highly appreciate to have a uniform license for the whole project. Please do not use this code or parts of it (except from code written by davido) in other projects until we have an "official" license for it. Thanks for your understanding.
collectordave
Addict
Addict
Posts: 1309
Joined: Fri Aug 28, 2015 6:10 pm
Location: Portugal

Re: Create your own icons for toolbars etc. with PureBasic

Post by collectordave »

Little John wrote: Please do not use this code or parts of it (except from code written by davido) in other projects until we have an "official" license for it. Thanks for your understanding.
No problem. I will integrate davidos icons. I am modifying the vectoricon designer to export scaleable routines so will wait until I have finished that before taking the toolbar wizard forward.

Please let me know when it can be used.

Kind Regards

Cd
Any intelligent fool can make things bigger and more complex. It takes a touch of genius — and a lot of courage to move in the opposite direction.
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Create your own icons for toolbars etc. with PureBasic

Post by davido »

@Little John,
Thank you for conveying my wishes to collectordave.

I think I made my comments pretty clear in this regard.
However, there is another reason I chose not to mention at that time:
Anything we post on this site is available to both honourable and dishonourable users. I don't actually know of any dishonourable users of this site but they would probably be in the same class as those who would spam this forum.
What I am getting at is this:
Honourable members would not have access to such data whereas the dishonourable wouldn't care.
This seems to me to be rather unfair.
DE AA EB
Post Reply