Application:Vector Icon designer

Share your advanced PureBasic knowledge/code with the community.
collectordave
Addict
Addict
Posts: 1309
Joined: Fri Aug 28, 2015 6:10 pm
Location: Portugal

Application:Vector Icon designer

Post by collectordave »

Inspired by this post http://www.purebasic.fr/english/viewtop ... 12&t=65091 I wondered if it was possible to create a vector icon designer. I now have a programme that uses alomost all vector drawing commands to produce Icon images. Each of these is saved to a database of icons\shapes. I have converted some of the icons in the above topic with a little twist at times such as drawing a five pointed star. The designer will draw a star with a maqny points as you wish.

I think I have covered all the vector drawing commands now, just the help file to finish.

Latest Edit:

Just started again. Link is for a partial app with no interface to get over some of the problems noted below.

3 November 2016

Just updated link with working app See later posts for details

16 November 2016
All basic elements covered for adding and editing. Help file complete for adding and editing elements. Some icon designs completed and included.

1 December 2016
Major rework see last post for details.

20th December

Shape designer code posted here

This needs to be compiled separately and the exe placed in the same folder as the vectoricon designer.

Joined github The whole thing with other projects are available here
https://github.com/collectordave/PureBasic-VectorIcons

cd
Last edited by collectordave on Fri Jan 13, 2017 8:12 am, edited 10 times in total.
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: Vector Icon designer

Post by davido »

@collectordave,

It is a thought that I had some while ago and I do use very crude generation of arcs and lines by clicking on points in a 32 x 32 matrix. Mine only generates the Vector Drawing code, though.

Currently most of my icons are drawn by hand onto a 32 x 32 matrix and then translate to code. Wouldn't it be nice to be able to draw directly on a CanvasGadget and let the machine do the rest!

I look forward to trying this program when you release it.
DE AA EB
User avatar
Andre
PureBasic Team
PureBasic Team
Posts: 2056
Joined: Fri Apr 25, 2003 6:14 pm
Location: Germany (Saxony, Deutscheinsiedel)
Contact:

Re: Vector Icon designer

Post by Andre »

Sounds promising... :D

Just some thoughts from me:
- make the drawing area as big as possible/senseful, and then scale down to the required icon sizes (16x16 and 32x32, maybe 64x64 and 128x128 too)
- support automatic saving of all designed icons (maybe only the selected ones, by offering a selectable list of all) in different formats
- include localization of the GUI, which ideally is resizable (e.g. PureLust's great DynamicDialogs)
Bye,
...André
(PureBasicTeam::Docs & Support - PureArea.net | Order:: PureBasic | PureVisionXP)
collectordave
Addict
Addict
Posts: 1309
Joined: Fri Aug 28, 2015 6:10 pm
Location: Portugal

Re: Vector Icon designer

Post by collectordave »

Hi

Thanks for the replies.

The idea for the programme is to have a single file i.e. database with all the icons in not hundreds of files all over my disc. This of course becomes very unwieldy very quickly if attempting to store images in a database. The vector drawing commands are the saviour, so no images are stored just the commands to draw the image. An added benefit is the same quality is ensured each time an image is created and allows easy manipulation of the imaqe.

The programme so far has a drawing area 640X640 pixels (5X128) and allows selection of a single icon or shape from the database to edit.

I have all the vector drawing commands done with the exception of addpatharc and a drawpath routine. The drawing commands include a draw star rotine whi ch allows stars of any number of points to be drawn, filled or outline as well as regular polygons. Each with a selectable colour i.e. each drawn object can be a different colour. The colours are selectable withadjustable transparency as well.

Just at the stage of looking at saving icons as .png files and have added an icon view facility so when enabled icons at 128,64,48,32 and 16 are displayed as you draw so you can see how it will look at the various sizes. This allows yoy to select the sizes required and save as PNG or other format(not done yet).

I have looked at auto saving but find it hard to grasp how to know when a user has finished drawing. Slowly settling for a change monitor so if any changes are made then the user is prompted to save before closing allthough using my desktop (no UPS) during a powerfailure caused me to grit my teeth so maybe some form of temporary save would be good.

Now having only just started with PB (August 2015) and having no drawing or graphic design skills I find a little help would be appreciated. Someone with real programming experience to test the programme and suggest improvements and someone to draw icons would be ideal.

Hope this helps?

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.
collectordave
Addict
Addict
Posts: 1309
Joined: Fri Aug 28, 2015 6:10 pm
Location: Portugal

Re: Vector Icon designer

Post by collectordave »

Ok

I now have the bare bones of the programme version 0.0.0001 an Alpha test release. It can be downloaded from here:https://www.dropbox.com/s/yeklejboiakzt ... r.zip?dl=0 again no exe in download just PB source files. I am using PB5.42LTS on windows 7. Not had chance to test on the MAC or Linux as yet.

It has:-
1.Draw Line
2.Draw Arc
3. Draw Curve
4. Draw Circle
5. Draw Box
6. Draw Polygon
7. draw Star
8. Draw Text

All elements of which have editable widths, colours, transparency and fill or no fill where applicable. Each element in an icon\shape can have different colours and thicknesses etc and can be edited individually when reloaded.

You select to view icons as you draw in sizes of 128 X 128, 64 X 64, 48 X 48, 32 X 32 and 16 X 16. Each size can be chosen to be saved or not as you prefer. When saved they are saved in an ICONS folder with 128 X 128 etc sub folders under the folder where the programme is run.

Still need to add.

1. Path draw routine
2. Ellipse draw routine
3. Vector arc draw routine
4. Help system
5. Other save image formats.

All added now 17/05/2016

Looking for anyone to test and inform me of any bugs to be fixed or improvements which could be added.

Released now see first post

Maybe of use to a few.
Last edited by collectordave on Tue May 17, 2016 5:50 am, edited 2 times in total.
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.
collectordave
Addict
Addict
Posts: 1309
Joined: Fri Aug 28, 2015 6:10 pm
Location: Portugal

Re: Application:Vector Icon designer

Post by collectordave »

Just a bit of news and a question.

Drawpath, vector arc and ellipse etc now done just working on the rotation of ellipses.

Icons can now be saved as .ico files (thanks to netmaestro). The vectorarc is the procedure explained after the bug was reported (little John).

Help coming along will post when done.

In the mean time here is a little question. Is it possible to use fillpath to fill a created path with rounded corners such as you can with strokepath?

Here is a little code to help.

Code: Select all

  If OpenWindow(0, 0, 0, 200, 150, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
    CanvasGadget(0, 0, 0, 200, 150)

    If StartVectorDrawing(CanvasVectorOutput(0))
      
      ;Fill this with round corners?
      MovePathCursor(10,10)
      AddPathLine(50,10)
      AddPathLine(50,50)      
      AddPathLine(10,50) 
      ClosePath()

      VectorSourceColor(RGBA(0, 0, 255, 255))
      FillPath()
    
      StopVectorDrawing()
    EndIf
    
    Repeat
      Event = WaitWindowEvent()
    Until Event = #PB_Event_CloseWindow
  EndIf
If possible fillpath roundcorners. I can get the effect with two bites of the cherry i.e. draw one path then use strokepath draw the path again using fillpath with the same colour just wondering if it is possible with just one attempt?
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.
Oma
Enthusiast
Enthusiast
Posts: 312
Joined: Thu Jun 26, 2014 9:17 am
Location: Germany

Re: Application:Vector Icon designer

Post by Oma »

Hello Dave,

I am looking forward to your App :D

I think there are various methods to reach filled boxes with round corners.
At the moment i'm doing it this way (to keep the outside dimensions):

Code: Select all

If OpenWindow(0, 0, 0, 200, 150, "VectorDrawing", #PB_Window_SystemMenu | #PB_Window_ScreenCentered)
	CanvasGadget(0, 0, 0, 200, 150)
	
	If StartVectorDrawing(CanvasVectorOutput(0))
		vLW = 30;        line width (bigger width = bigger radius)
		vLW2= vLW * 0.5; half line width
		
		;Fill this with round corners?
		MovePathCursor(20 + vLW2, 20 + vLW2)
		AddPathLine   (60 - vLW2, 20 + vLW2)
		AddPathLine   (60 - vLW2, 60 - vLW2)     
		AddPathLine   (20 + vLW2, 60 - vLW2)
		ClosePath     ()
		
		VectorSourceColor(RGBA(0, 0, 255, 255))
		;/*
		FillPath(#PB_Path_Preserve)
		StrokePath(vLW, #PB_Path_RoundCorner)
		;*/
		
		;Outlined-CheckBox ;)
		VectorSourceColor(RGBA(0, 0, 0, 255))
		AddPathBox(18, 18, 44, 44)
		StrokePath(1)
		
		StopVectorDrawing()
	EndIf
	
	Repeat
		Event = WaitWindowEvent()
	Until Event = #PB_Event_CloseWindow
EndIf
Best regards, Charly
PureBasic 5.4-5.7, Linux: (X/L/K)Ubuntus+Mint - Windows XP (32Bit)
PureBasic Linux-API-Library & Viewer: http://www.chabba.de
davido
Addict
Addict
Posts: 1890
Joined: Fri Nov 09, 2012 11:04 pm
Location: Uttoxeter, UK

Re: Application:Vector Icon designer

Post by davido »

@oma,
A useful technique, thank you for sharing.

@collectordave,
I'm looking forward to your to your app, too.
DE AA EB
collectordave
Addict
Addict
Posts: 1309
Joined: Fri Aug 28, 2015 6:10 pm
Location: Portugal

Re: Application:Vector Icon designer

Post by collectordave »

@oma,@davido

Lovely, I will look for ways of integrating this into the app.

In the meantime, I have started to write the help file, only got as far as basic line,s adding more each morning. You can download the raw PDF here:- No Longer available


It may give you an idea where I am going with this.

As well if you do mind testing the raw application I can post it. I have, I believe, achieved Version 1.0.0 as it has all the basic features now including some icons converted from @little johns post. Any help greatly appreciated.

Regards

CD
Last edited by collectordave on Sat Sep 24, 2016 6:42 am, edited 1 time in total.
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.
collectordave
Addict
Addict
Posts: 1309
Joined: Fri Aug 28, 2015 6:10 pm
Location: Portugal

Re: Application:Vector Icon designer

Post by collectordave »

Now released.

Just adding the round corners for paths etc.

See first post.
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.
infratec
Always Here
Always Here
Posts: 6817
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: Application:Vector Icon designer

Post by infratec »

Hi,

just tested 1.0.0

start the program
'Shapes'->'View Icons' (Don't know waht it do, I see only some checkboxes)
Mark one checkbox and press 'Save'
-> Error in Line 130 Image is not initialized

Also you have no chance to leave the window without 'Save' -> not good.


'Shapes'->'New'->'Shape'
Select a group
Input a name
Press 'Ok'
And then ....
I can do nothing. Is this normal?


Bernd
collectordave
Addict
Addict
Posts: 1309
Joined: Fri Aug 28, 2015 6:10 pm
Location: Portugal

Re: Application:Vector Icon designer

Post by collectordave »

Hi Thanks for pointing out that little bug.

The View Icons window is simply initialized and shown when you click the menu "View Icons". Move it to the side out of the way of the main screen. Then on the main window goto the right hand pane and select a Group from the combo. After selecting a group select a shape from the next combo down. The selected shape will then be displayed in the main drawing area and if the "view icons" window is in view it will also be displayed in all the sizes shown. The check boxes allow you to choose which sizes to save. Once an image is displayed clicking save will save all the sizes checked as .png and .ico.

To remove the View Icons window simply go back to the menu and select again this will close the window.

When adding groups or shapes you are simply enetering a title and group for the shape. Once you have entered the new shape title it is then available in the main screen Group and Shape combo boxes. Select the group then select the new shape. Of course nothing will happen as with a new shape no vectors are defined. You can then Add new vector drawing elements.

I suggest first that you ignore the menu select a group and a shape and get them to display then use the Add and edit buttons.

I will disable the view icons in next release as it can be confusing when no shape\icon is selected and causes the error you show.

I will also look at making it a little clearer on the main screen.

Hope this helps

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.
infratec
Always Here
Always Here
Posts: 6817
Joined: Sun Sep 07, 2008 12:45 pm
Location: Germany

Re: Application:Vector Icon designer

Post by infratec »

Hi,

I just tried that,

I selected 'General'
I selected 'Doodle3'
I pressed 'Edit'
I click on the green box - error in line 55 Image is not initialized

I also tried some other stuff. It ended always in an error at different locations :cry:


Btw. why you don't open the 'View' window beside the main window?
collectordave
Addict
Addict
Posts: 1309
Joined: Fri Aug 28, 2015 6:10 pm
Location: Portugal

Re: Application:Vector Icon designer

Post by collectordave »

Damn another one I have missed!

Ok.

Selected Group General the shape doodle 3

Green box is shown.

I click edit and all ok.

Click green box and error. I have not disabled the canvas gadget at this point. Will sort that and repost.

Once you get the green box displayed notice that the buttons etc etc under the shape combo are enabled and show "Box" in the status lable. Once you click "Edit" the edit controls for a "Box" are displayed below this. Until I sort out the Canvas enabling do not click on the canvas. Select a new colour or transparency or change the other options shown then click "Start" and the Box will be updated to show your changes. The box is "filled" when displayed so Thickness has no effect select outline to see the effect of changing thickness values.

Should also mention here that there are two save routines. The first is the database save routine which saves the drawing actions for the shape into the database the other is the icon save routine which saves actual images made from the drawing actions. I kept them separate with the view icons window to keep them separate.

Two things are becoming apparent. the first is the need for the save to database to be automatic so for example when editing a shape you click "Done" and at that point I will add the auto save to database routine. The second is the icon views. I had thought of adding them to the main screen which may be a little easier but a little more thought also leads me to think that the user could then also select target icon sizes which could then be displayed instead of all or nothing on the viewer window. This could also be a way to allow custom icon sizes.

Open to all thoughts at the moment.

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.
#NULL
Addict
Addict
Posts: 1440
Joined: Thu Aug 30, 2007 11:54 pm
Location: right here

Re: Application:Vector Icon designer

Post by #NULL »

the three dropbox links seem to not be working here.
Post Reply