Page 1 of 2
icon library
Posted: 12 Apr 2015 07:30
by Suloo
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:
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
Re: icon library
Posted: 12 Apr 2015 19:27
by ndivuyo
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!
Re: icon library
Posted: 12 Apr 2015 19:31
by ndivuyo
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)
Re: icon library
Posted: 12 Apr 2015 19:59
by Suloo
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
Re: icon library
Posted: 13 Apr 2015 02:47
by Macciza
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 ...
Re: icon library
Posted: 13 Apr 2015 03:47
by ndivuyo
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
Re: icon library
Posted: 14 Apr 2015 16:34
by Voice303
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"
. Not to discount or write off all the awesome things about Lemur and how it makes creating interfaces quick and easy in many ways
Re: icon library
Posted: 14 Apr 2015 17:46
by ndivuyo
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
Re: icon library
Posted: 14 Apr 2015 19:03
by Voice303
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.
Re: icon library
Posted: 14 Apr 2015 19:26
by Softcore
yes expressions......variables in lemur language are called expressions!