icon library

Canvas specific discussion
Suloo
Newbie
Posts:17
Joined:06 Jul 2012 22:39
icon library

Post by Suloo » 12 Apr 2015 07:30

Hey there,

currently i'm working on recreating my Bitwig template with canvas.
Basically what i'm now looking for is a simple icon (shape) library, for play/pause cycle etc.
All what is available fur custom buttons for example, just made with canvas.
While simple shapes might be not that problematic to do, i wonder if anyone has already recreated those standard icons and would like to share them.
I'm not too skilled with maths, so it would take a lot of time for me, wich i would like to spend on functionality instead.

I found this generator, wich does look quite useful, what do you think?. https://canvas-designer.appspot.com/

Maybe we could make an example, how to translate that generated code to be usable within Lemur.

lets say for a simple play button, that would be a great help for me and i guess all other beginners as well, to exercise this example code to see what can be used, or what needs to be changed.

Here is a simple play shape from that canvas designer:

Image

Code: Select all

var x = 603, y = 240;

context.beginPath();
context.moveTo(x y);
context.lineTo(x, y + 68);
strokeOrFill("2", "#6c96c8", "transparent", "1", "source-over", "butt", "miter");

context.beginPath();
context.moveTo(x + 1, y + 2);
context.lineTo(x + 71, y + 35);
strokeOrFill();

context.beginPath();
context.moveTo(x + 1, y + 67);
context.lineTo(x + 70, y + 35);
strokeOrFill();

function strokeOrFill(lineWidth, strokeStyle, fillStyle, globalAlpha, globalCompositeOperation, lineCap, lineJoin) {
    if(lineWidth) {
            context.globalAlpha = globalAlpha;
            context.globalCompositeOperation = globalCompositeOperation;
            context.lineCap = lineCap;
            context.lineJoin = lineJoin;
            context.lineWidth = lineWidth;
            context.strokeStyle = strokeStyle;
            context.fillStyle = fillStyle;
    }
    context.stroke();
    context.fill();

}

thx for any help!
cheers

ndivuyo
Regular
Posts:279
Joined:23 May 2014 00:24

Re: icon library

Post by ndivuyo » 12 Apr 2015 19:27

Ok yea, I commented on your other post, but looks like you have an idea already on how to apply coordinates to canvas from another source. I know some people mentioned other tools they've used to translate the xy points, not sure what they are though but if you do a search you can find them!
I'd love an easy symbol library to access the points for and draw it in lemur, that would be a great module too!

ndivuyo
Regular
Posts:279
Joined:23 May 2014 00:24

Re: icon library

Post by ndivuyo » 12 Apr 2015 19:31

you would just use the canvas commands available in lemur to recreate the code you posted:

context.beginPath();
context.moveTo(x y);
context.lineTo(x, y + 68);

would be like

canvas_beginPath();
canvas_moveTo(x y);
canvas_lineTo(x, y + 68);
blah blah blah, there are better ways to organize the coordinates too, especially for more complex shapes (you would use an array or 2 and a for loop)

Suloo
Newbie
Posts:17
Joined:06 Jul 2012 22:39

Re: icon library

Post by Suloo » 12 Apr 2015 19:59

ok well, in that designer it's also possible to shorten the code, wich gives a for loop and the single points. Will try that.
It does not really make the code shorter btw, lol.

But atleast there is smth i can draw with, should help for now.

cheers

Macciza
Regular
Posts:1325
Joined:07 Dec 2011 04:57
Location:Sydney, Australia.

Re: icon library

Post by Macciza » 13 Apr 2015 02:47

The 'library' part is really the most valuable thing here imho, maybe because I have mucked around with the idea myself...
This can create an easily usable and reusable system to achieve results quickly and easily..
It does however require some thought to come up with a good system approach at the start.

First is to start defining your scope for what might be achieved and looking at ways to implement it, then breaking it down into various layers and working out how they all interelate .... Often there are lots of ways to do it .... I did a bit of this based on stuff that others had done for html canvas, but it's on a disk that I can't access currently. I guess I could look back into it at some point ...
iMac 2.8G i7 12G 10.6.8/10.7.2, Legacy Dexter/Lemur, Liine Lemur/iPad2, KMI SoftStep, 12Step & QuNeo , B-Controls, Mackie C4 etc
MaxMSP, Live Suite, Native Instrument stuff, etc Modified Virtual Guitar System etc All Projects/Modules © CC-BY-NC-SA[*][/b]

ndivuyo
Regular
Posts:279
Joined:23 May 2014 00:24

Re: icon library

Post by ndivuyo » 13 Apr 2015 03:47

yea it wouldn't really make that code shorter, but if you have a long list of xy points...
It would be cool if multiple people could contribute to the 'library' but we had some guidelines for organizing entries so it could be more consistent and organized

Voice303
Newbie
Posts:15
Joined:04 Apr 2015 18:50

Re: icon library

Post by Voice303 » 14 Apr 2015 16:34

Macciza wrote:The 'library' part is really the most valuable thing here imho, maybe because I have mucked around with the idea myself...
This can create an easily usable and reusable system to achieve results quickly and easily..
It does however require some thought to come up with a good system approach at the start.

First is to start defining your scope for what might be achieved and looking at ways to implement it, then breaking it down into various layers and working out how they all interelate .... Often there are lots of ways to do it .... I did a bit of this based on stuff that others had done for html canvas, but it's on a disk that I can't access currently. I guess I could look back into it at some point ...
I think one of the problems with a system like this is Lemur does not allow you to create scripts with user defined arguments AFAIK. So now you not only have to import someones script and call it, you must also create variables to emulate a calling convention for every single script you import.

If only we could create a single script with multiple functions defined with user defined arguments. Its one of those things like Lemur's syntax highlighting where you ask yourself "what were they thinking" :lol:. Not to discount or write off all the awesome things about Lemur and how it makes creating interfaces quick and easy in many ways ;)

ndivuyo
Regular
Posts:279
Joined:23 May 2014 00:24

Re: icon library

Post by ndivuyo » 14 Apr 2015 17:46

you CAN make user defined arguments for scripts.. (maybe you are talking about something else though)?
like this: myShape(x,y,w,h)
I think a library is totally possible with scripts like this. Like the one softcore started on the facebook page, you could just grab those shape's scripts with the arguments on them and quickly add them to your current canvas drawing, no problem.

If you want more arguments, remaking a script with more is a copy and paste away

Voice303
Newbie
Posts:15
Joined:04 Apr 2015 18:50

Re: icon library

Post by Voice303 » 14 Apr 2015 19:03

ndivuyo wrote:you CAN make user defined arguments for scripts.. (maybe you are talking about something else though)?
like this: myShape(x,y,w,h)
I think a library is totally possible with scripts like this. Like the one softcore started on the facebook page, you could just grab those shape's scripts with the arguments on them and quickly add them to your current canvas drawing, no problem.

If you want more arguments, remaking a script with more is a copy and paste away
I don't see any option for that after adding a script in the drop down above it. Are you talking about expressions? I may just be missing something entirely obvious.

Softcore
Regular
Posts:1639
Joined:04 Nov 2012 08:34

Re: icon library

Post by Softcore » 14 Apr 2015 19:26

yes expressions......variables in lemur language are called expressions! ;)

Post Reply