[APP][3.0+] LectureNotes - custom drawing tool JavaScript codes

acadoid · Jan 14, 2014 at 5:46 PM

As I receive numerous questions and suggestions concerning the custom drawing tool JavaScript interface of LectureNotes and how to implement specific drawing tools, I thought that it might be helpful to collect codes here, which should allow to easily copy them. Please feel invited to post additional ones!

To start, a simple dashed line with longer dashing

Code:

width = LN.getWidth();
height = LN.getHeight();
size = Math.min(width, height);
strokewidth = LN.getStrokeWidth();
dashing1 = 0.01 * size;
dashing2 = (LN.getStrokeCap() == 1) ? dashing1 : dashing1 + 2 * strokewidth;
x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
LN.setDashing(dashing1, dashing2);
LN.drawLine(x1, y1, x2, y2);

or a dashed line for which the dashing is not fixed but depends on pencil width

Code:

strokewidth = LN.getStrokeWidth();
dashing1 = 10 * strokewidth;
dashing2 = (LN.getStrokeCap() == 1) ? dashing1 : dashing1 + 2 * strokewidth;
x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
LN.setDashing(dashing1, dashing2);
LN.drawLine(x1, y1, x2, y2);

mmcnulty · Feb 4, 2013 84 6 0

I dont know how to go about creating these tools, and sadly, at the moment I dont actually have the time to invest in learning any of it. So hopefully, someone here can help.

I'd like to create three drawing tools which are similar to existing ones
The tools I could use are:
-Therefore. As in, ==> Right now there are tools for arrows, I'd pretty must just like two horizontal lines instead of one.
-If and only if. As in, <==>. Right now there are tools for two headed arrow lines. Again, pretty must the same as that but two horizontal lines.
-Coordinate System, but with the addition of preplaced labels for each axis. That is, when giving it things like y min and y max, would it also be possible to have it ask for a text field for labels? So that label would show up, and scale with the rest of it?

If anyone who can tell me what to do, or better yet, provide the code for it, that would be great.

acadoid · Jan 17, 2014 at 9:23 PM

@mmcnulty: Double-lined arrows will come with the next update.

Concerning coordinate system: Text variables are presently not supported, one could only have an integer variable that then maps on a text.

Tintinnuntius · Jan 17, 2014

Here's a script that draws an n-gon centered at the centre of the chosen rectangle and extending all the way across its shortest side. It takes 2 parameters: the number of sides and the angle (in degrees) at which the first point should be positioned (see the attached image for details).

Code:

width = LN.getWidth();
height = LN.getHeight();
pi = 3.1415927;
sides = LN.getParameter(1);
phi = LN.getParameter(2)*2*pi/360;
x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
x0 = (x1+x2)/2;
y0 = (y1+y2)/2;
r = Math.min(x0-x1,y0-y1);
t = LN.getStrokeWidth();
LN.setStrokeWidth(3*t);
LN.drawPoint(x0, y0);
for (i=1 ; i<=sides ; i++){
LN.drawPoint(x0+r*Math.cos(2*pi*i/sides+phi),y0-r*Math.sin(2*pi*i/sides+phi));
}
LN.setStrokeWidth(t);
for (i=1 ; i<=sides ; i++){
LN.drawLine(x0+r*Math.cos(2*pi*i/sides+phi),y0-r*Math.sin(2*pi*i/sides+phi), x0+r*Math.cos(2*pi*(i+1)/sides+phi),y0-r*Math.sin(2*pi*(i+1)/sides+phi));
}

While creating the script I noticed that any error that would cause the script to fail (forgotten ; or any other bad syntax) would break that particular tool until LN was restarted. The rectangular area could still be chosen, but nothing would be drawn inside it. It took me a while to figure this out. At first I thought I had the wrong idea about either the scale or the axis orientation which caused the image to lie outside the bounded area. Just thought I should mention it in case someone else has the same problem. If you are sure your code should work, try restarting.

Tintinnuntius · Aug 21, 2011 105 42 0

Here's another script. This one draws a rainbow coloured pie chart with up to 6 groups of data. Each parameter can take values between 0 and 100, so you can either enter the absolute numbers (if <100 for each group) or percentages. If you don't need all 6 you can set the extras to 0.

Code:

x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
x0 = (x1+x2)/2;
y0 = (y1+y2)/2;
r = Math.min(x0-x1,y0-y1);
q1 = LN.getParameter(1);
q2 = LN.getParameter(2);
q3 = LN.getParameter(3);
q4 = LN.getParameter(4);
q5 = LN.getParameter(5);
q6 = LN.getParameter(6);
s = q1+q2+q3+q4+q5+q6;
pi = 3.1415927;
phi1 = 2*pi*q1/s;
phi2 = 2*pi*(q1+q2)/s;
phi3 = 2*pi*(q1+q2+q3)/s;
phi4 = 2*pi*(q1+q2+q3+q4)/s;
phi5 = 2*pi*(q1+q2+q3+q4+q5)/s;
phi6 = 2*pi;
LN.setColor(1,0,0);
LN.setAlpha(0.3);
LN.drawFilledArc(x0,y0,r,0,-phi1);
LN.setColor(1,0.5,0);
LN.setAlpha(0.3);
LN.drawFilledArc(x0,y0,r,-phi1,-phi2+phi1);
LN.setColor(1,1,0);
LN.setAlpha(0.3);
LN.drawFilledArc(x0,y0,r,-phi2,-phi3+phi2);
LN.setColor(0,1,0);
LN.setAlpha(0.3);
LN.drawFilledArc(x0,y0,r,-phi3,-phi4+phi3);
LN.setColor(0,0,1);
LN.setAlpha(0.3);
LN.drawFilledArc(x0,y0,r,-phi4,-phi5+phi4);
LN.setColor(1,0,1);
LN.setAlpha(0.3);
LN.drawFilledArc(x0,y0,r,-phi5,-phi6+phi5);
LN.setAlpha(1);
LN.setColor(0,0,0);
LN.drawCircle(x0,y0,r);
LN.drawLine(x0,y0,x0+r,y0);
LN.drawLine(x0,y0,x0+r*Math.cos(phi1),y0-r*Math.sin(phi1));
LN.drawLine(x0,y0,x0+r*Math.cos(phi2),y0-r*Math.sin(phi2));
LN.drawLine(x0,y0,x0+r*Math.cos(phi3),y0-r*Math.sin(phi3));
LN.drawLine(x0,y0,x0+r*Math.cos(phi4),y0-r*Math.sin(phi4));
LN.drawLine(x0,y0,x0+r*Math.cos(phi5),y0-r*Math.sin(phi5));

Tintinnuntius · Jan 18, 2014 at 1:54 PM

And one more. This one draws the pie chart in monochrome. The colour used to fill the area is the same as the colour of the currently active pencil. Opacity is inversely proportional to the square root of the percentage, so smaller areas are more opaque and larger areas are less opaque (giving the impression that the same amount of colour is spread over areas of different sizes).

Code:

x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
x0 = (x1+x2)/2;
y0 = (y1+y2)/2;
r = Math.min(x0-x1,y0-y1);
q1 = LN.getParameter(1);
q2 = LN.getParameter(2);
q3 = LN.getParameter(3);
q4 = LN.getParameter(4);
q5 = LN.getParameter(5);
q6 = LN.getParameter(6);
s = q1+q2+q3+q4+q5+q6;
pi = 3.1415927;
phi1 = 2*pi*q1/s;
phi2 = 2*pi*(q1+q2)/s;
phi3 = 2*pi*(q1+q2+q3)/s;
phi4 = 2*pi*(q1+q2+q3+q4)/s;
phi5 = 2*pi*(q1+q2+q3+q4+q5)/s;
phi6 = 2*pi;
LN.setAlpha(1-Math.sqrt(q1/s));
LN.drawFilledArc(x0,y0,r,0,-phi1);
LN.setAlpha(1-Math.sqrt(q2/s));
LN.drawFilledArc(x0,y0,r,-phi1,-phi2+phi1);
LN.setAlpha(1-Math.sqrt(q3/s));
LN.drawFilledArc(x0,y0,r,-phi2,-phi3+phi2);
LN.setAlpha(1-Math.sqrt(q4/s));
LN.drawFilledArc(x0,y0,r,-phi3,-phi4+phi3);
LN.setAlpha(1-Math.sqrt(q5/s));
LN.drawFilledArc(x0,y0,r,-phi4,-phi5+phi4);
LN.setAlpha(1-Math.sqrt(q6/s));
LN.drawFilledArc(x0,y0,r,-phi5,-phi6+phi5);
LN.setAlpha(1);
LN.setColor(0,0,0);
LN.drawCircle(x0,y0,r);
LN.drawLine(x0,y0,x0+r,y0);
LN.drawLine(x0,y0,x0+r*Math.cos(phi1),y0-r*Math.sin(phi1));
LN.drawLine(x0,y0,x0+r*Math.cos(phi2),y0-r*Math.sin(phi2));
LN.drawLine(x0,y0,x0+r*Math.cos(phi3),y0-r*Math.sin(phi3));
LN.drawLine(x0,y0,x0+r*Math.cos(phi4),y0-r*Math.sin(phi4));
LN.drawLine(x0,y0,x0+r*Math.cos(phi5),y0-r*Math.sin(phi5));

Sent from my GT-N8010 using Tapatalk

Tintinnuntius · Jan 18, 2014 at 5:50 PM

A couple of scripts for people who, like me, draw graphs first and the marks the axes later

The axes are drawn in black and the colour of the "curve" is the same as the currently selected pen.

You can see that the graphs are made up of a lot of dots if the y-axis is much taller than the x-axis, but I kinda like the effect

Bell curve (no parameters):

Code:

strokewidth = LN.getStrokeWidth();
head = 5*strokewidth;
open = 0.4;
headcos = head * Math.cos(open);
headsin = head * Math.sin(open);
x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
red = LN.getRed();
green = LN.getGreen();
blue = LN.getBlue();
xmin = Math.min(x1, x2);
ymin = Math.min(y1, y2);
xmax = Math.max(x1, x2);
ymax = Math.max(y1, y2);
xavail = Math.max(0, xmax - xmin - headsin - 2 * headcos);
yavail = Math.max(0, ymax - ymin - headsin - 2 * headcos);
xorigin = headsin;
yorigin = headsin;
LN.setColor(0,0,0);
LN.drawLine((xmin + xmax)/2, ymin + headcos, (xmin + xmax)/2 , ymax);
LN.drawFilledTriangle( (xmin + xmax)/2 - headsin, ymin + headcos, (xmin + xmax)/2 , ymin, (xmin + xmax)/2 + headsin, ymin + headcos);
a = 0.8*(ymax-ymin);
b = (xmin + xmax)/2;
c = 0.8*(1/6)*(xmax-xmin);
d = ymax-yorigin;
LN.setStrokeWidth(1.2*strokewidth);
n = Math.floor((xmax-xmin)/2);
LN.setColor(red,green,blue);
for (i=0 ; i<=n-5 ; i++){
LN.drawPoint(b+i, -a*Math.exp(-i*i/(2*c*c))+d);
LN.drawPoint(b-i, -a*Math.exp(-i*i/(2*c*c))+d);
}
LN.setStrokeWidth(strokewidth);
LN.setColor(0,0,0);
LN.drawLine(xmin, ymax - yorigin, xmax - headcos, ymax - yorigin);
LN.drawFilledTriangle(xmax - headcos, ymax - yorigin + headsin, xmax, ymax - yorigin, xmax - headcos, ymax - yorigin - headsin);

Quadratic parabola (again, no parameters):

Code:

strokewidth = LN.getStrokeWidth();
head = 5*strokewidth;
open = 0.4;
headcos = head * Math.cos(open);
headsin = head * Math.sin(open);
x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
red = LN.getRed();
green = LN.getGreen();
blue = LN.getBlue();
xmin = Math.min(x1, x2);
ymin = Math.min(y1, y2);
xmax = Math.max(x1, x2);
ymax = Math.max(y1, y2);
xavail = Math.max(0, xmax - xmin - headsin - 2 * headcos);
yavail = Math.max(0, ymax - ymin - headsin - 2 * headcos);
xorigin = headsin;
yorigin = headsin;
LN.setColor(0,0,0);
LN.drawLine(xmin, ymax - yorigin, xmax - headcos, ymax - yorigin);
LN.drawLine((xmin + xmax)/2, ymin + headcos, (xmin + xmax)/2 , ymax);
LN.drawFilledTriangle(xmax - headcos, ymax - yorigin + headsin, xmax, ymax - yorigin, xmax - headcos, ymax - yorigin - headsin);
LN.drawFilledTriangle( (xmin + xmax)/2 - headsin, ymin + headcos, (xmin + xmax)/2 , ymin, (xmin + xmax)/2 + headsin, ymin + headcos);
a = 4*(ymax-ymin);
b = (xmin + xmax)/2;
d = ymax-yorigin;
LN.setStrokeWidth(1.2*strokewidth);
n = Math.floor((xmax-xmin)/2);
c = (xmax-xmin);
LN.setColor(red,green,blue);
for (i=0 ; i<=n ; i++){
LN.drawPoint(b+i,-a*(i/c)*(i/c)+d);
LN.drawPoint(b-i,-a*(i/c)*(i/c)+d);
}
LN.setStrokeWidth(strokewidth);

Tintinnuntius · Jan 18, 2014 at 6:01 PM

And the final ones for today, these two scripts compute the probabilities for two well-known discrete probability distributions and draw a schematic representation.

Poisson: parameters are lambda = the expected value (and arbitrary positive real number) and k = the maximum value for which P(X=i) should be calculated and ploted (a positive integer).

Code:

strokewidth = LN.getStrokeWidth();
head = 5*strokewidth;
open = 0.4;
headcos = head * Math.cos(open);
headsin = head * Math.sin(open);
x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
red = LN.getRed();
green = LN.getGreen();
blue = LN.getBlue();
xmin = Math.min(x1, x2);
ymin = Math.min(y1, y2);
xmax = Math.max(x1, x2);
ymax = Math.max(y1, y2);
xavail = Math.max(0, xmax - xmin - headsin - 2 * headcos);
yavail = Math.max(0, ymax - ymin - headsin - 2 * headcos);
xorigin = headsin;
yorigin = headsin;
l = LN.getParameter(1);
k = LN.getParameter(2);
a = 0.9*(ymax-ymin);
b = xmin + xorigin;
d = ymax-yorigin;
n = (xmax-xmin)*0.9/k;
c = (xmax-xmin);
LN.setStrokeWidth(3*strokewidth);
fac = 1;
for (i=1; i<=k ; i++){
fac = fac*i;
LN.drawLine(b+i*n,d-strokewidth,b+i*n,-a*(Math.pow(l,i)*Math.exp(-l)/fac)+d+strokewidth);
}
LN.setStrokeWidth(strokewidth);
LN.setColor(0,0,0);
LN.drawLine(xmin+xorigin, ymin + headcos, xmin +xorigin , ymax);
LN.drawFilledTriangle(xmax - headcos, ymax - yorigin + headsin, xmax, ymax - yorigin, xmax - headcos, ymax - yorigin - headsin);
LN.drawFilledTriangle( xmin + xorigin - headsin, ymin + headcos, xmin + xorigin , ymin, xmin + xorigin + headsin, ymin + headcos);
LN.setStrokeWidth(3*strokewidth);
LN.setColor(red,green,blue);
LN.drawLine(b,d-strokewidth,b,-a*Math.exp(-l)+d+strokewidth);
LN.drawPoint(b,d-a);
LN.setColor(0,0,0);
LN.setTextSize(16);
LN.drawText(1,b+10,d-a+6);
LN.drawText(Math.exp(-l),(xmin+xmax)/2,-a+d+6);
fac = 1;
for (i=1; i<=k ; i++){
fac = fac*i;
LN.drawText(Math.pow(l,i)*Math.exp(-l)/fac,(xmin+xmax)/2,-a+d+6+18*i);
}
LN.setStrokeWidth(strokewidth);
LN.drawLine(xmin, ymax - yorigin, xmax - headcos, ymax - yorigin);

Geometric: parameters are p = the probability of a certain event occuring in one trial (a real between 0 and 1) and k = the maximum value for which P(X=i) should be calculated and ploted (a positive integer).

Code:

strokewidth = LN.getStrokeWidth();
head = 5*strokewidth;
open = 0.4;
headcos = head * Math.cos(open);
headsin = head * Math.sin(open);
x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
red = LN.getRed();
green = LN.getGreen();
blue = LN.getBlue();
xmin = Math.min(x1, x2);
ymin = Math.min(y1, y2);
xmax = Math.max(x1, x2);
ymax = Math.max(y1, y2);
xavail = Math.max(0, xmax - xmin - headsin - 2 * headcos);
yavail = Math.max(0, ymax - ymin - headsin - 2 * headcos);
xorigin = headsin;
yorigin = headsin;
p = LN.getParameter(1);
k = LN.getParameter(2);
q = 1-p;
a = 0.9*(ymax-ymin);
b = xmin + xorigin;
d = ymax-yorigin;
n = (xmax-xmin)*0.9/k;
c = (xmax-xmin);
LN.setStrokeWidth(3*strokewidth);
for (i=1; i<=k ; i++){
LN.drawLine(b+i*n,d-strokewidth,b+i*n,-a*p*Math.pow(q,i)+d+strokewidth);
}
LN.setStrokeWidth(strokewidth);
LN.setColor(0,0,0);
LN.drawLine(xmin+xorigin, ymin + headcos, xmin +xorigin , ymax);
LN.drawFilledTriangle(xmax - headcos, ymax - yorigin + headsin, xmax, ymax - yorigin, xmax - headcos, ymax - yorigin - headsin);
LN.drawFilledTriangle( xmin + xorigin - headsin, ymin + headcos, xmin + xorigin , ymin, xmin + xorigin + headsin, ymin + headcos);
LN.setStrokeWidth(3*strokewidth);
LN.setColor(red,green,blue);
LN.drawLine(b,d-strokewidth,b,-a*p+d+strokewidth);
LN.drawPoint(b,d-a);
LN.setColor(0,0,0);
LN.setTextSize(16);
LN.drawText(1,b+10,d-a+6);
for (i=0; i<=k ; i++){
LN.drawText(p*Math.pow(q,i),(xmin+xmax)/2,-a+d+6+18*i);
}
LN.setStrokeWidth(strokewidth);
LN.drawLine(xmin, ymax - yorigin, xmax - headcos, ymax - yorigin);

Canguy247 · Feb 25, 2013 21 16 0

A code snippet

Here is my code for a bar graph. Some of the code is based on the standard examples from Acadoid.

It can have up to 6 bars (I guess more could be added). Error checking is limited so follow the following rules:

If you only want 3 bars, enter the first 3 numbers. For the 4th and beyond only use -1. Example:

First: 20
Second: 30
Third: 50
Fourth: -1
Fifth: -1
Sixth: -1

Works but...
First: 20
Second: 30
Third: 50
Fourth: -1
Fifth: -1
Sixth: 30

Doesn't Work as planned since my code makes assumptions.
I have included a picture which show this in action along with some other stuff I will post.
Enjoy!

Code:

width = LN.getWidth();
height = LN.getHeight();
total = 0;
var colours = new Array();
colours[1]= new Array();
colours[1][1]=1;
colours[1][2]=0;
colours[1][3]=0;
colours[2]= new Array();
colours[2][1]=0;
colours[2][2]=0;
colours[2][3]=1;
colours[3]= new Array();
colours[3][1]=0;
colours[3][2]=1;
colours[3][3]=0;
colours[4]= new Array();
colours[4][1]=1;
colours[4][2]=0;
colours[4][3]=1;
colours[5]= new Array();
colours[5][1]=1;
colours[5][2]=1;
colours[5][3]=0;
colours[6]= new Array();
colours[6][1]=0;
colours[6][2]=1;
colours[6][3]=1;
var parameterList=new Array();
totalParams=0;
maxValue=0;
x1 = LN.getX1()+3;
y1 = LN.getY1()+3;
x2 = LN.getX2()-3;
y2 = LN.getY2()-3;
for(i = 1; i <= 6; i++) {
   parameterList[i] = LN.getParameter(i);
   if (parameterList[i] > maxValue) {
      maxValue= parameterList[i];
   }
   if (parameterList[i] >= 0) {
       totalParams+=1;
       total += parameterList[i];
   }
}
curPos=0;
barWidth= Math.abs(x2-x1)/totalParams;
for(i = 1; i <= totalParams; i++) {
    LN.setColor(colours[i][1], colours[i][2], colours[i][3]);
    LN.drawFilledRect(x1+curPos, y2, x1+curPos+barWidth, y2-Math.abs(y2-y1)*(parameterList[i]/maxValue));
    curPos += barWidth;
}
LN.setColor();
LN.drawLine(x1, y1-3, x1, y2+3);
LN.drawLine(x1-3, y2, x2+3, y2);
curPos=0;
for(i = 1; i <= totalParams; i++) {
   LN.drawRect(x1+curPos, y2, x1+curPos+barWidth, y2-Math.abs(y2-y1)*(parameterList[i]/maxValue));
   LN.drawLine( x1+curPos+barWidth , y2, x1+curPos+barWidth , y2+3);
    curPos += barWidth;
}

Canguy247 · Feb 25, 2013 21 16 0

List bullets

Here is the code for the bullets seen in my previous post. The snap-to-grid code was stolen from the included examples.

Code:

width = LN.getWidth();
scale = LN.getScale ();
step = width / 150 + scale * width / 25;
x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2() - 10;
y2 = LN.getY2() - 10;
x1g = Math.floor((x1 - (step / 2)) / step + 0.5) * step;
y1g = Math.floor((y1 - (step / 2)) / step + 0.5) * step;
x2g = Math.floor((x2 - (step / 2)) / step + 0.5) * step;
y2g = Math.floor((y2 - (step / 2)) / step + 0.5) * step;
tall = scale * 14;
wide = tall * 2;
LN.setClip(x2g - tall, y2g- tall, x2g + wide, y2g + tall);
LN.drawLine(x2g, y2g, x2g - tall, y2g - tall);
LN.drawLine(x2g, y2g, x2g - tall, y2g + tall);
LN.drawLine(x2g - tall, y2g -tall, x2g + wide, y2g);
LN.drawLine(x2g - tall, y2g + tall, x2g + wide, y2g);

---------- Post added at 04:07 PM ---------- Previous post was at 04:03 PM ----------

And the check boxes. More code borrowing here...

Code:

width = LN.getWidth();
scale = LN.getScale ();
step = width / 150 + scale * width / 25;
x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2() - 10;
y2 = LN.getY2() - 10;
x1g = Math.floor((x1 - (step / 2)) / step + 0.5) * step;
y1g = Math.floor((y1 - (step / 2)) / step + 0.5) * step;
x2g = Math.floor((x2 - (step / 2)) / step + 0.5) * step;
y2g = Math.floor((y2 - (step / 2)) / step + 0.5) * step;
tall = scale * 12;
wide = tall * 2;
LN.setClip( x2g - wide/2, y2g - wide/2, x2g+ wide/2, y2g + wide/2 );
LN.drawRect(x2g - wide/2, y2g - wide/2, x2g+ wide/2, y2g + wide/2);

---------- Post added at 04:12 PM ---------- Previous post was at 04:07 PM ----------

Enjoy and if anyone has a request I am sure someone might help you out... myself included.

Star:

Code:

x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
pi = 3.14159;
r = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
xmin = x1 - r;
ymin = y1 - r;
xmax = x1 + r;
ymax = y1 + r;
scaler = r;
c1 = scaler * (Math.sqrt (5)-1) / 4;
c2 = scaler * (Math.sqrt (5)+1) / 4;
s1 = scaler * Math.sqrt (10 + 2 * Math.sqrt (5)) / 4;
s2 = scaler * Math.sqrt (10 - 2 * Math.sqrt (5)) / 4;
LN.setClip(xmin, ymin, xmax, ymax);
LN.drawLine(x1 + scaler, y1, x1 - c2, y1 + s2);
LN.drawLine(x1 + scaler, y1, x1 - c2, y1 - s2);
LN.drawLine(x1 - c2, y1 + s2, x1 + c1, y1 - s1);
LN.drawLine(x1 - c2, y1 - s2, x1 + c1, y1 + s1);
LN.drawLine(x1 + c1, y1 + s1, x1 + c1, y1 - s1);

Happy face:

Code:

x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
r = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
xmin = x1 - r;
ymin = y1 - r;
xmax = x1 + r;
ymax = y1 + r;
eye = 1+ r/ 12;
LN.setClip(xmin, ymin, xmax, ymax);
LN.drawOval(x1, y1, r, r);
LN.drawFilledOval(x1 + r/ 3, y1 - r/3, eye, eye);
LN.drawFilledOval(x1 - r/ 3, y1 - r/3, eye, eye);
LN.drawArc(x1, y1, r / 1.8, 0, 3.14);

Tintinnuntius · Aug 21, 2011 105 42 0

@acadoid: Any chance we will be able to use more than 6 parameters in the future? I'm planning on making a script that takes your sample and returns its average and sample standard deviation. If it were possible to go up to at least 10 parameters that would be great.

Canguy247 · Feb 25, 2013 21 16 0

Fat arrows

This one draws a large, hollow arrow, using acadoid's snap-to-grid code:

Code:

width = LN.getWidth();
height = LN.getHeight();
scale = LN.getScale();
step = width / 150 + scale * width / 25;
x1 = LN.getX1();
y1 = LN.getY1();
x2 = LN.getX2();
y2 = LN.getY2();
x1g = (step / 2) + Math.floor((x1 - (step / 2)) / step + 0.5) * step;
y1g = (step / 2) + Math.floor((y1 - (step / 2)) / step + 0.5) * step;
x2g = (step / 2) + Math.floor((x2 - (step / 2)) / step + 0.5) * step;
y2g = (step / 2) + Math.floor((y2 - (step / 2)) / step + 0.5) * step;

arrowLength=Math.sqrt((x2g-x1g)*(x2g-x1g)+(y2g-y1g)*(y2g-y1g));
theta=Math.atan((y2g-y1g)/(x2g-x1g));
if (x2g>=x1g) {
   xa=-0.2* arrowLength*Math.sin(theta)+x1g;
   ya=0.2*arrowLength*Math.cos(theta)+y1g;
   xb=0.2* arrowLength*Math.sin(theta)+x1g;
   yb=-0.2*arrowLength*Math.cos(theta)+y1g;
   xc=0.6*arrowLength*Math.cos(theta)+0.2* arrowLength*Math.sin(theta)+x1g;
   yc=0.6*arrowLength*Math.sin(theta)-0.2*arrowLength*Math.cos(theta)+y1g;
   xd=0.6*arrowLength*Math.cos(theta)+0.4* arrowLength*Math.sin(theta)+x1g;
   yd=0.6*arrowLength*Math.sin(theta)-0.4*arrowLength*Math.cos(theta)+y1g;
   xe=arrowLength*Math.cos(theta)+x1g;
   ye=arrowLength*Math.sin(theta)+y1g;
   xf=0.6*arrowLength*Math.cos(theta)-0.4* arrowLength*Math.sin(theta)+x1g;
   yf=0.6*arrowLength*Math.sin(theta)+0.4*arrowLength*Math.cos(theta)+y1g;
   xg=0.6*arrowLength*Math.cos(theta)-0.2* arrowLength*Math.sin(theta)+x1g;
   yg=0.6*arrowLength*Math.sin(theta)+0.2*arrowLength*Math.cos(theta)+y1g;
}
else {
   xa=x1g-(-0.2* arrowLength*Math.sin(theta));
   ya=y1g-(0.2*arrowLength*Math.cos(theta));
   xb=x1g-(0.2* arrowLength*Math.sin(theta));
   yb=y1g-(-0.2*arrowLength*Math.cos(theta));
   xc=x1g-(0.6*arrowLength*Math.cos(theta)+0.2* arrowLength*Math.sin(theta));
   yc=y1g-(0.6*arrowLength*Math.sin(theta)-0.2*arrowLength*Math.cos(theta));
   xd=x1g-(0.6*arrowLength*Math.cos(theta)+0.4* arrowLength*Math.sin(theta));
   yd=y1g-(0.6*arrowLength*Math.sin(theta)-0.4*arrowLength*Math.cos(theta));
   xe=x1g-(arrowLength*Math.cos(theta));
   ye=y1g-(arrowLength*Math.sin(theta));
   xf=x1g-(0.6*arrowLength*Math.cos(theta)-0.4* arrowLength*Math.sin(theta));
   yf=y1g-(0.6*arrowLength*Math.sin(theta)+0.4*arrowLength*Math.cos(theta));
   xg=x1g-(0.6*arrowLength*Math.cos(theta)-0.2* arrowLength*Math.sin(theta));
   yg=y1g-(0.6*arrowLength*Math.sin(theta)+0.2*arrowLength*Math.cos(theta));
}
xmin = Math.min(xa, xb, xc, xd, xe, xf, xg);
ymin = Math.min(ya, yb, yc, yd, ye, yf, yg);
xmax = Math.max(xa, xb, xc, xd, xe, xf, xg);
ymax = Math.max(ya, yb, yc, yd, ye, yf, yg);
LN.setClip(xmin, ymin, xmax, ymax);
LN.drawLine(xa, ya, xb, yb);
LN.drawLine(xc, yc, xb, yb);
LN.drawLine(xc, yc, xd, yd);
LN.drawLine(xe, ye, xd, yd);
LN.drawLine(xe, ye, xf, yf);
LN.drawLine(xf, yf, xg, yg);
LN.drawLine(xg, yg, xa, ya);

acadoid · Jan 19, 2014 at 10:55 AM

@Tintinnuntius & Canguy247: Many thanks for posting the codes!
@Tintinnuntius: I actually thought that nobody would use all six parameters... More parameters can be added, I will increase the maximal number to ten. Anticipating your question: There has to be a maximal number of parameters due to the Android dialog resources.

Canguy247 · Feb 25, 2013 21 16 0

Many thanks and a request/suggestion

First I want to say THANK-YOU to acadoid for this wonderful addition. It has surpassed my expectations.

Next, I would like to make a suggestion. These tools open the possibility for libraries (which I think You were considering in the other thread). My suggestion is to adjust the interface to allow 2 libraries to be loaded at a time with a simple dropdown or arrows to switch between installed libraries. That would allow someone to load a library, which can be customized by picking tools from other libraries, which does all of the most comkon things they need such as bullets and boxes. They could then have the second library which they can switch depending on their task. This way we could build libraries of schematic symbols for electronics, or flowchart symbols, or pukps and valves and the user could switch depending on their use at the time.

Also, it would be great if the custom tools were represented by pictures instead of numbers, but I see the difficulty in making this practical.

Finally, is it possible to have a small status bar as part of the floating tool widget which tells the user what tool/library is selected?

And thanks again!

Tintinnuntius · Jan 19, 2014 at 5:12 PM

Canguy247 said:
Also, it would be great if the custom tools were represented by pictures instead of numbers, but I see the difficulty in making this practical.

How about at least replacing numbers by a 2-letter code (that would still fit in the small window and be easily legible). The code is something one could specify while scripting the tool (just an extra input next to the box that lets you name the tool) and it would be easier to remember. For example:

- T for a table,
- Pn for a polygon on n vertices,
- sd for a tool that calculates the standard deviation of given data,
- ...

instead of

- 1 for a table,
- 13 for a polygon on n vertices,
- 5 for a tool that calculates the standard deviation of given data,
- ...

The toolbox would then look like a tiny periodic table

acadoid · Jan 19, 2014 at 5:43 PM

@Canguy247: You are not the first to suggest container/groups/libraries for custom drawing tools. I have that on my to-do-list.

I am also considering to allow small icons. The problem is not the icons of the custom drawing tools that LectureNotes ships with, but the custom drawing tools that users define. Note that there is also a drawing tools menu in which you can select drawing tools and custom drawing tools by name.
@Tintinnuntius: Letters or double-letters might be an option, but I guess that a small icon is better, isn't it?

Tintinnuntius · Jan 19, 2014 at 8:37 PM

acadoid said:
@Tintinnuntius: Letters or double-letters might be an option, but I guess that a small icon is better, isn't it?

An icon is better, of course. Would we be able to design and import our own? Or even better, just cut it from LN notebook.

acadoid · Jan 19, 2014 at 8:46 PM

@Tintinnuntius: The question of how to handle the icons is what makes adding these icons a bit complicated.

claytonjn · Jan 19, 2014 at 9:01 PM

acadoid said:
@Tintinnuntius: The question of how to handle the icons is what makes adding these icons a bit complicated.

I don't know if this would work or not, but could you just develop an algorithm to use the javascript code for each tool to generate the icons for that tool automatically?

Tintinnuntius · Jan 19, 2014 at 9:50 PM

I've come across a funny bug in the pencil toolbox. If both the standard and custom tools are shown, the numbers for custom tools are nice and thin, but if the standard tools are removed, the numbers for custom tools get all fat

[APP][3.0+] LectureNotes - custom drawing tool JavaScript codes

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Member

Attachments

Member

Senior Member

Member

Attachments

Senior Member

Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member