icon library

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:

[img]http://abload.de/img/sds2ouwx.png[/img]

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

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!

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)

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

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 ...

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

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

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

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.

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

And you CAN make scripts with user defined variables

Lemur user guide page 69 and one more example at the end of page 85

yea, you make them when you make the script. So if you made a script called circle(). instead of just typing circle and pressing enter/ok, type in circle(x,y,r) or whatever variables you want. Then those will be ready to use inside the script itself.
This is separate from the custom expression button which creates variables outside of the script.

ndivuyo wrote:yea, you make them when you make the script. So if you made a script called circle(). instead of just typing circle and pressing enter/ok, type in circle(x,y,r) or whatever variables you want. Then those will be ready to use inside the script itself.
This is separate from the custom expression button which creates variables outside of the script.

Thanks for the clarification!

I thought it was only expressions that could do that and that you had to set script arguments by selecting a type such as OSC, Touch Down, Touch Up, etc. I was confused because expressions and scripts presented different ways of interfacing to arguments, I didn't realize they shared a common one as well.

Looks like you need to have another read of the manual . . ..
You can also do single line functions with defined arguments by entering function_name(args) when creating an expression . . .

Also, posted to Facebook . . .

Library organisation is important, and best worked out before too much other work gets done. There is lots I would do differently. Am working on some examples but it requires some thought and all that. It also depends on use case etc.

Problems I see are implicit linking of icons to canvas size, weird resizing etc. I would probably have args for context,location, size and rotation i.e. icon(ctx,x,y,size,rot), have icon drawn at nominal size and size, rotation transforms applied. Further considerations are whether you want all functions to be separate paths,separately stroked or as compoundable paths that can then be all stroked together; or different functions for both cases? Do you leave all drawing attributes (color,width) etc to the calling scope or have them as arguments to the functions? Have to have a bit of a think...

Also is this ultimately meant to be a library that integrates with standard lemur guy objects or as part of canvas-based guy object system with interactive icons and or objects??

personally i want to use them only with canvas objects, since with a custom canvas background-color all other non canvas library objects are optically useless because of the black background.

see here, that doesn't look too good, having a transparent option for all non canvas objects would be quite helpful actualy:
[img]https://dl.dropboxusercontent.com/u/85191333/modules.png[/img]

Also stacking another canvas object ontop of the non canvas objects is not a good option imho, because then i double the amount of objects (performance) and also i cannot see an underliying multiball, fadercap or icon.
So i would need to add that on the canvas anyway..

cheers

Depends on complexity and size of project but stacking canvas on top of standard objects is an easy way to re-skin them, and saves you having to implement all the cars and features in scripts ....
The idea is that you don't see the generic objects but instead a custom graphic controlled by it ....