Create your own icons for toolbars etc. with PureBasic

VB6_to_PBx · Post by **VB6_to_PBx** » Wed May 18, 2016 4:20 am

@VB6_to_PBx ,

Did you have any particular 'Weather' icons in mind?
Perhaps the icon above, "The Sun" might be a good start?

thanks davido,
i got your Sun icon to work !

Sun = Clear= like you Posted code for
along with Partly Cloudy Icon, Chance of Rain, Rain, Rain + Lightnening, Moon phases , etc would be nice also

anyone thought about adding 3D depth shadows to Icons ? ( Shadow offset to right and down a few Pixels )

Little John · Post by **Little John** » Wed May 18, 2016 10:19 am

VB6_to_PBx wrote:Little John ,

This is a great thing you created

Thank you.
Of course, what we currently see here could only come into being by the additional work of other creative and industrious people, mainly davido and Oma.

Hi davido,
now the sun is shining on the icon collection.

davido wrote:Having seen some code by oma which used #PB_Path_Preserve. It occurred to me that I could remove some duplicated code in a few of the 'Chess' icons.
It is probably of no matter, but I could re-post if you wish.

I leave that entirely to you. Please feel free to post modified versions of as much of your icons as you want.

Little John · Post by **Little John** » Wed May 18, 2016 5:09 pm

Current changes

Added internal macro "DrawMoon"
Added icon "Night"

davido · Post by **davido** » Wed May 18, 2016 9:18 pm

Hi Little John,

Very nice "Night" icon, and I'm sure the Moon Macro will come in useful at some stage.

I have 5 more icons to add: "Mute", "Good Luck", "Telephone", "BlueTooth", "Broadcast", "Speaker"

Code: Select all

Declare.i Mute (file$, img.i, size.i, color1.i, color2.i)
Declare.i GoodLuck (file$, img.i, size.i, color1.i, color2.i)
Declare.i Telephone (file$, img.i, size.i, color1.i, color2.i)
Declare.i BlueTooth (file$, img.i, size.i, color.i)
Declare.i Broadcast (file$, img.i, size.i, color.i)
Declare.i Speaker (file$, img.i, size.i, color.i)


Procedure.i Mute (file$, img.i, size.i, color1.i, color2.i)
     ; file$: name of SVG file which is to be created (only supported on Linux),
     ;        or "" for creating an image in memory
     ; in : img   : number of the image which is to be created, or #PB_Any
     ;      size  : width and height (number of pixels)
      ;      color1: foreground color #1
      ;      color2: foreground color #2
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0

      ; [by davido]
      Protected ret.i, p.d

      ret = StartVectorIconOutput(file$, img, size)

      p = size / 32.0

      If ret
         VectorSourceColor(color1)
         MovePathCursor(p,12*p)
         AddPathLine(p,21*p)
         AddPathLine(8*p,21*p)
         AddPathLine(14*p,26*p)
         AddPathLine(14*p,7*p)
         AddPathLine(8*p,12*p)
         ClosePath()
         FillPath()
         VectorSourceColor(color2)
         RotateCoordinates(23*p,16*p,45)
         DrawPlus(23*p,16*p,8*p,2*p)
         StopVectorDrawing()
      EndIf

      ProcedureReturn ret
    EndProcedure
    
Procedure.i GoodLuck (file$, img.i, size.i, color1.i, color2.i)
     ; file$: name of SVG file which is to be created (only supported on Linux),
     ;        or "" for creating an image in memory
     ; in : img   : number of the image which is to be created, or #PB_Any
     ;      size  : width and height (number of pixels)
      ;      color1: foreground color #1
      ;      color2: foreground color #2
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0

      ; [by davido]
      Protected ret.i, p.d, M.i

      ret = StartVectorIconOutput(file$, img, size)

      p = size / 32.0

      If ret
        VectorSourceColor(color1)
        VectorSourceColor(color2)
        MovePathCursor(14*p,16*p)
        AddPathLine(17*p,31*p)
        StrokePath(2*p)
        VectorSourceColor(color1)
        For M = 1 To 12
          RotateCoordinates(16*p,16*p,30)
          If M % 3 <> 0
            AddPathEllipse(16*p,8.5*p,4.5*p,7.5*p)
            FillPath()
          EndIf
        Next M
         StopVectorDrawing()
      EndIf

      ProcedureReturn ret
   EndProcedure

Procedure.i Telephone (file$, img.i, size.i, color1.i, color2.i)
     ; file$: name of SVG file which is to be created (only supported on Linux),
     ;        or "" for creating an image in memory
     ; in : img   : number of the image which is to be created, or #PB_Any
     ;      size  : width and height (number of pixels)
      ;      color1: foreground color #1
      ;      color2: foreground color #2
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0

      ; [by davido]
      Protected ret.i, p.d

      ret = StartVectorIconOutput(file$, img, size)

      p = size / 32.0

      If ret
        VectorSourceColor($fff0ffff)
        FillVectorOutput()
        VectorSourceColor(color1)
        ;Receiver
        MovePathCursor(4*p,5*p)
        AddPathLine(28*p,5*p)
        AddPathLine(28*p,8*p)
        AddPathLine(26*p,8*p)
        AddPathLine(26*p,5*p)
        AddPathLine(7*p,5*p)
        AddPathLine(7*p,8*p)
        AddPathLine(4*p,8*p)
        ClosePath()
        
        ;Body
         MovePathCursor(12*p,16*p)
         AddPathLine(4*p,25*p)
         AddPathLine(4*p,28*p)
         AddPathLine(28*p,28*p)
         AddPathLine(28*p,25*p)
         AddPathLine(20*p,16*p)
         ClosePath()
         FillPath(#PB_Path_Preserve)
         StrokePath(7*p,#PB_Path_RoundCorner)
         MovePathCursor(12.5*p,11*p)
         AddPathLine(12.5*p,16*p)
         SaveVectorState()
         FlipCoordinatesX(15.75*p)
         MovePathCursor(12*p,11*p)
         AddPathLine(12*p,16.5*p)
         StrokePath(3*p,#PB_Path_RoundEnd)
         ;Keys
         RestoreVectorState()
         VectorSourceColor(color2)
         AddPathBox(9*p,16.5*p,2.5*p,1.25*p)
         AddPathBox(14.5*p,16.5*p,2.5*p,1.25*p)
         AddPathBox(20*p,16.5*p,2.5*p,1.25*p)
         AddPathBox(9*p,21.5*p,2.5*p,1.25*p)
         AddPathBox(14.5*p,21.5*p,2.5*p,1.25*p)
         AddPathBox(20*p,21.5*p,2.5*p,1.25*p)
         AddPathBox(9*p,26.5*p,2.5*p,1.25*p)
         AddPathBox(14.5*p,26.5*p,2.5*p,1.25*p)
         AddPathBox(20*p,26.5*p,2.5*p,1.25*p)
         FillPath(#PB_Path_Preserve)
         StrokePath(2*p,#PB_Path_RoundCorner)
         
         StopVectorDrawing()
      EndIf

      ProcedureReturn ret
   EndProcedure

Procedure.i BlueTooth (file$, img.i, size.i, color.i)
     ; file$: name of SVG file which is to be created (only supported on Linux),
     ;        or "" for creating an image in memory
     ; in : img   : number of the image which is to be created, or #PB_Any
     ;      size  : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0

      ; [by davido]
      Protected ret.i, p.d

      ret = StartVectorIconOutput(file$, img, size)

      p = size / 32.0

      If ret
         VectorSourceColor(color)
         MovePathCursor(7*p,23*p)
         AddPathLine(25*p,9*p)
         AddPathLine(16*p,2*p)
         AddPathLine(16*p,30*p)
         AddPathLine(25*p,23*p)
         AddPathLine(7*p,9*p)
         StrokePath(2*p)
         StopVectorDrawing()
      EndIf

      ProcedureReturn ret
   EndProcedure

Procedure.i Broadcast (file$, img.i, size.i, color.i)
     ; file$: name of SVG file which is to be created (only supported on Linux),
     ;        or "" for creating an image in memory
     ; in : img   : number of the image which is to be created, or #PB_Any
     ;      size  : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0

      ; [by davido]
      Protected ret.i, p.d

      ret = StartVectorIconOutput(file$, img, size)

      p = size / 32.0

      If ret
         VectorSourceColor(color)
         MovePathCursor(9*p,29*p)
         AddPathLine(23*p,29*p)
         StrokePath(3*p,#PB_Path_RoundEnd)
         MovePathCursor(16*p,8*p)
         AddPathLine(13*p,29*P)
         AddPathLine(19*p,29*p)
         ClosePath()
         FillPath()
         StrokePath(3*p,#PB_Path_RoundEnd)
         AddPathCircle(16*p,8*p,3*p)
         FillPath()
         AddPathCircle(16*p,8*p,6*p,330,30)
         AddPathCircle(16*p,8*p,10*p,330,30)
         AddPathCircle(16*p,8*p,14*p,330,30)
         FlipCoordinatesX(16*p)
         AddPathCircle(16*p,8*p,6*p,330,30)
         AddPathCircle(16*p,8*p,10*p,330,30)
         AddPathCircle(16*p,8*p,14*p,330,30)
         StrokePath(2*p)
         StopVectorDrawing()
      EndIf

      ProcedureReturn ret
   EndProcedure

Procedure.i Speaker (file$, img.i, size.i, color.i)
     ; file$: name of SVG file which is to be created (only supported on Linux),
     ;        or "" for creating an image in memory
     ; in : img   : number of the image which is to be created, or #PB_Any
     ;      size  : width and height (number of pixels)
      ;      color: foreground color
      ; out: return value: if img = #Pb_Any => number of the created image,
      ;                    error => 0

      ; [by davido]
      Protected ret.i, p.d

      ret = StartVectorIconOutput(file$, img, size)

      p = size / 32.0

      If ret
         VectorSourceColor(color)
         MovePathCursor(p,12*p)
         AddPathLine(p,21*p)
         AddPathLine(8*p,21*p)
         AddPathLine(14*p,26*p)
         AddPathLine(14*p,7*p)
         AddPathLine(8*p,12*p)
         ClosePath()
         FillPath()
         AddPathCircle(8*p,16*p,13*p,320,40)
         AddPathCircle(8*p,16*p,18*p,320,40)
         AddPathCircle(8*p,16*p,23*p,320,40)
         StrokePath(2*p)
         StopVectorDrawing()
      EndIf

      ProcedureReturn ret
    EndProcedure
    
    
    "Mute", "Good Luck", "Telephone", "BlueTooth", "Broadcast", "Speaker"
    
NewIcon( Mute (file$, img.i, size.i, #CSS_Black, #CSS_Red))
NewIcon( GoodLuck (file$, img.i, size.i, #CSS_LimeGreen, #CSS_DarkGreen))
NewIcon( Telephone (file$, img.i, size.i, #CSS_Black, #CSS_BurlyWood))
NewIcon( BlueTooth (file$, img.i, size.i, #CSS_Black))
NewIcon( Broadcast (file$, img.i, size.i, #CSS_Black))
NewIcon( Speaker (file$, img.i, size.i, #CSS_Black))

NewIcon( Mute (file$, img.i, size.i, #CSS_Silver, #CSS_Silver))
NewIcon( GoodLuck (file$, img.i, size.i, #CSS_DarkGrey, #CSS_Silver))
NewIcon( Telephone (file$, img.i, size.i, #CSS_Silver, #CSS_Silver))
NewIcon( BlueTooth (file$, img.i, size.i, #CSS_Silver))
NewIcon( Broadcast (file$, img.i, size.i, #CSS_Silver))
NewIcon( Speaker (file$, img.i, size.i, #CSS_Silver))

ozzie · Post by **ozzie** » Thu May 19, 2016 1:46 am

This collection and the concept behind it could be very useful in many projects. I'd like to see this topic be made 'sticky'.

Post by **idle** » Thu May 19, 2016 8:30 am

ozzie wrote:This collection and the concept behind it could be very useful in many projects. I'd like to see this topic be made 'sticky'.

It sticks!

Little John · Post by **Little John** » Fri May 20, 2016 9:01 am

Hi davido,

thank you for both your kind words and your new icons.
Up to now, you have contributed more than 80 icons

That's incredible!
I found this picture on the internet. Is that you?

idle wrote:
ozzie wrote:This collection and the concept behind it could be very useful in many projects. I'd like to see this topic be made 'sticky'.
It sticks!

Cool.

Thanks to both of you!

Current changes

Added icons "Good Luck", "Telephone", "BlueTooth", "Broadcast", "Speaker", and "Mute" by davido

Little John · Post by **Little John** » Fri May 20, 2016 4:41 pm

Current changes

Fixed a bug in the "DrawMoon" macro
Small internal changes

Oma · Post by **Oma** » Sat May 21, 2016 6:07 am

Hi!
This time, I've allowed myself to steal a little, e.g. from magnifying glass and fill-icons. I hope this doesn't annoying you.

First of all a big compliment to the latest davido-icons

, especially the chess-icon-details. Great!

The next thing that should be mentioned is, (after integrating the new icons for a test-run) the collection + browser now has 14400 lines. We soon will kill Fred's server.

Except the following icons, the new icons have more a "spatial" design ...
- FindAndReplace,
- FindFile,
- WritingPad,
- Pen_Flat
- Brush_Flat
- Pipette_Flat
- Fill_Flat
- Spray_Flat
- Eraser_Flat
- ColorPalette_Flat
- Paint_Flat

If "spatial" sounds bad for native english speakers please say it, so we can find a adequate name. I wanted to reserve the term "3D" for still "more" true 3D icons.

Perhaps we also should rename the icons
- FirstAid_Convex
- NoEntry_Convex
- Stop3_Convex
- Download2_Convex
- Notes_Curved
to
- FirstAid_Spatial
- NoEntry_Spatial
- Stop3_Spatial
- Download2_Spatial
- Notes_Spatial
to harmonize the names?

I don't know, if John wants to place this 'spatial' named icons in a new Library, to create a flat and spatial set.
This way i think it would be much easier to create a flat set (for Windows 8+ - Fans and better recognizability of smaller icon sizes) and a arched set for "design"-fans and bigger sizes.

The DrawV ... and SetV ... - symbols are displayed by default with a shadow and a background, (slightly different to distinguish the 'Draw' and 'Set'-icons) but both "supplements" can be disabled by setting the shadow color to '0' (penultimate argument), or omitting the last argument (background).
I think the most of this 'vector-drawing'-icons are suitable for a flat and arched icon set.

At the moment the following parts are 'outsourced' to a macro.
- Pen (flat & spatial)
- Brush (flat & spatial)
- Pipette (flat & spatial)
- RotateDirection (spatial) Rotate 1 Direction
- RotateDimension (spatial) Rotate 2 Directions
- CartonEmpty (spatial) to add text
- RingBinder (spatial) benefit ???
- ColorBoard (flat & spatial)
- MousePointer

They got no size-arguments! To reuse and manipulate them, you can use the PB commands ...
- RotateCoordinates(); rotate it
- TranslateCoordinates(); move it
- ScaleCoordinates(); scale it
- SkewCoordinates(); skew it
- FlipCoordinatesX(); mirrors hor.
- FlipCoordinatesY(); mirrors vert.

Changed Icons, due to new pen-icons ...
EditDocument (file$, img.i, size.i, color1.i, color2.i, color3.i);chg
Notes (file$, img.i, size.i, color1.i, color2.i, color3.i, color4.i, color5.i);chg
Notes_Spatial (file$, img.i, size.i, color1.i, color2.i, colorM1.i, colorM2.i, colorM3.i, colorM4.i, colorM5.i);chg
(= previous Notes_Curved)

All new icons ...
; for miscellaneous use ...
- FindAndReplace (flat)
- Open1_Spatial
- Open2_Spatial
- Open3_Spatial
- FindFile_Spatial
- FindFile (flat)

- RotateDown_Spatial
- RotateUp_Spatial
- RotateVert_Spatial
- RotateLeft_Spatial
- RotateRight_Spatial
- RotateHor_Spatial
- RotateCcw_Spatial
- RotateCw_Spatial

- Writingpad (flat)
- Writingpad_Spatial
- Calculate_Spatial
- Calendar_Spatial

; for paintings, drawings ...
- Ruler_Spatial
- RulerTriangle_Spatial
- Carton_Spatial
- BookKeeping_Spatial
- Pen_Spatial
- Pen_Flat (flat)
- Brush_Spatial
- BrushFlat (flat)
- Pipette_Spatial
- Pipette_Flat (flat)
- Fill_Spatial
- Fill_Flat (flat)
- Spray_Spatial
- Spray_Flat (flat)
- Eraser_Spatial
- Eraser_Flat (flat)
- ColorPalette_Spatial
- ColorPalette_Flat (flat)
- Paint_Spatial
- Paint_Flat (flat)

; for vector drawing ...
- DrawVText
- DrawVLine
- DrawVBox
- DrawVRoundedBox
- DrawVPolygonBox
- DrawVCircle
- DrawVCircleSegment
- DrawVEllipse
- DrawVEllipseSegment (placeholder till the radius is fixed)
- DrawVCurve
- DrawVArc
- DrawVLinePath

; for vector-draw-settings ...
- SetVSelectionRange
- SetVLineStyle
- SetVLineWidth
- SetVLineCap
- SetVLineJoin
- SetVColorSelect
- SetVColorBoardSelect
- SetVFlipX
- SetVFlipY
- SetVRotate
- SetVMove
- SetVCopy
- SetVScale
- SetVTrimSegment
- SetVExtendSegment
- SetVCatchGrid
- SetVLinearGradient
- SetVCircularGradient
- SetVChangeCoord
- SetVDelete
- SetVFill
- SetVLayer

As there are over 5000 lines this time, I've stored it again for download ...
http://www.chabba.de/temp/VectorIcon_up ... -18.pb.zip

Best regards, Charly

ps:
A small overview until they are integrated
[Image is deleted, Icons are integrated]

Little John · Post by **Little John** » Sun May 22, 2016 11:12 am

Hi Charly,

many thanks for the new icons! They are awesome, and take the project to a new level

As soon as I have time, I'll apply all your changes and the new icons.
I'll also extend the icon browser, so that it can display and save your new icons in a separate group.

At the moment, I've got only one question:
What exactly are "CSS3 colors"? Are there 2 different color tables, one named "CSS colors", and another one named "CSS3 colors"?

Oma · Post by **Oma** » Mon May 23, 2016 7:24 pm

Hello John!
And thank you for your efforts!

What exactly are "CSS3 colors"? Are there 2 different color tables, one named "CSS colors", and another one named "CSS3 colors"?

YESS!
I've found a short and a large list with named CSS-colors. The short one is now included in the VectorIconBrowser, the larger one has the same named colors with attached numbers for darker shaded variations (about 550 items, but too much for the browser, i think

).
To distinguish both lists i've decided to give the larger list the prefix 'CSS3_'.
Now both lists are included in the originally posted link with X11/CSS-color-definitions for PureBasic http://www.chabba.de/temp/X11+CSS-Colors.pb

Best regards, Charly

davido · Post by **davido** » Thu May 26, 2016 9:34 pm

Hi Little John,
I've written an uppercase font which I find useful.
Do you have any problem with there being an extra parameter in the procedure?

Little John · Post by **Little John** » Fri May 27, 2016 9:38 am

Hi davido,

that's no problem at all.

Little John · Post by **Little John** » Fri May 27, 2016 10:58 pm

Hi Charly,

I hope I implemented all your changes and new icons correctly.
The icon browser now has 2 tabs, named "Iconset 1" and "Iconset 2".
I did not name them "Flat icons" and "Spatial icons", because in the 1st set there are some icons with "spatial" in their name, and in the 2nd set there are some icons with "flat" in their name. However, I am open for suggestions. E.g. I can move icons from one group to the other, if you want.

Another possibility would be to create seoparate icon sets by author (at least for davido and Oma, because both of you contributed so many icons).

These are the current changes:

Changes by Oma

Renamed icons
"FirstAidConvex" -> "FirstAidSpatial"
"NoEntryConvex" -> "NoEntrySpatial"
"Stop3Convex" -> "Stop3Spatial"
"Download2Convex" -> "Download2Spatial"
"NotesCurved" -> "NotesSpatial"

Changed icons
"EditDocument", "Notes, "NotesSpatial"

New icons
"FindAndReplace", "Open1Spatial", "Open2Spatial", "Open3Spatial", "FindFileSpatial", "FindFile"
"RotateDownSpatial", "RotateUpSpatial", "RotateVerticalSpatial", "RotateLeftSpatial", "RotateRightSpatial", "RotateHorizontalSpatial"
"RotateCounterClockwiseSpatial", "RotateClockwiseSpatial", "WritingPad", "WritingPadSpatial", "CalculateSpatial", "CalendarSpatial"
"RulerSpatial", "RulerTriangleSpatial", "CartonSpatial", "BookKeepingSpatial", "PenSpatial", "PenFlat", "BrushSpatial", "BrushFlat"
"PipetteSpatial", "PipetteFlat", "FillSpatial", "FillFlat", "SpraySpatial", "SprayFlat", "EraserSpatial", "EraserFlat"
"ColorPaletteSpatial", "ColorPaletteFlat", "PaintSpatial", "PaintFlat", "DrawVText", "DrawVLine", "DrawVBox", "DrawVRoundedBox", "DrawVPolygonBox"
"DrawVCircle", "DrawVCircleSegment", "DrawVEllipse", "DrawVEllipseSegment", "DrawVCurve(Spline)", "DrawVArc", "DrawVLinePath"
"SetVSelectRange", "SetVLineStyle", "SetVLineWidth", "SetVLineCap", "SetVLineJoin", "SetVColorSelect", "SetVColorBoardSelect"
"SetVFlipX", "SetVFlipY", "SetVRotate", "SetVMove", "SetVCopy", "SetVScale", "SetVTrimSegment", "SetVExtendSegment"
"SetVCatchGrid", "SetVLinearGradient", "SetVCircularGradient", "SetVChangeCoord", "SetVDelete", "SetVFill", "SetVLayer"

Changes by me
Moved the code for displaying and saving the icons to a separate file ("vectoriconbrowser.pb").
Changed that code, so that groups of icons are displayed on separate tabs, and are saved to separate overview pictures and separate subfolders.

Keya · Post by **Keya** » Fri May 27, 2016 11:10 pm

guys those icons are freaking amazing and very professional, there's some seriously talented artists here!

PureBasic Forums - English

Create your own icons for toolbars etc. with PureBasic

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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