As I receive numerous questions concerning the custom pattern JavaScript interface of LectureNotes and how to implement specific patterns, I thought that it might be helpful to post my replies here, which should allow to easily copy them. Please feel invited to post additional ones!
First, a so-called isometric pattern that is quoted at the app's help page (where the code lines are commented)
Code:
width = LN.getWidth();
height = LN.getHeight();
scale = LN.getScale();
step = width / 150 + scale * width / 25;
LN.setStrokeWidth(width / 1000);
for (x = 0; x < width; x += step)
LN.drawLine(x, 0, x, height);
stepX = 2 * step;
stepY = 1.1547 * step;
x1 = 0; y1 = step;
x2 = stepX; y2 = 0;
while ((x1 < width) && (y2 < height)) {
LN.drawLine(x1, y1, x2, y2);
if (y1 < height)
y1 += stepY;
else
x1 += stepX;
if (x2 < width)
x2 += stepX;
else
y2 += stepY;
}
x1 = x2 - stepX; y1 = 0;
y2 = step;
while ((x2 > 0) && (y1 < height)) {
LN.drawLine(x1, y1, x2, y2);
if (x1 > 0)
x1 -= stepX;
else
y1 += stepY;
if (y2 < height)
y2 += stepY;
else
x2 -= stepX;
}
and a simple additional one that places a page number centered at the page bottom
Code:
width = LN.getWidth();
height = LN.getHeight();
page = LN.getPage();
LN.setTextSize(0.02 * width);
LN.setTextAlign(0);
LN.drawText("Page " + page, 0.5 * width, 0.95 * height);
Some more, an eternal calender, one month per page, starting January 2012
Code:
year = 2012;
months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
monthdays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
month = LN.getPage() - 1;
year += Math.floor(month / 12);
month2 = month % 12;
month = month + 1;
days = monthdays[month2];
if ((month == 2) && (year % 4 == 0) && ((year % 100 != 0) || (year % 400 == 0)))
days++;
if (month <= 2)
year2 = year - 1;
else
year2 = year;
c = Math.floor(year2 / 100);
y = year2 % 100;
m = ((month + 9) % 12) + 1;
w = (1 + Math.floor(2.6 * m - 0.2) + y +
Math.floor(y / 4) + Math.floor(c / 4) - 2 * c + 7 * 100) % 7;
width = LN.getWidth();
height = LN.getHeight();
size = Math.min(width, height);
stepx = width / 8;
stepy = height / 8;
LN.setTextSize(0.025 * size);
for (d = 0; d < 7; d++)
LN.drawText(weekdays[d], (d + 0.6) * stepx, 1.4 * stepy);
LN.setTextSize(0.05 * size);
LN.setTextAlign(-1);
LN.drawText(months[month2] + " " + year, 7.5 * stepx, 0.25 * stepy + 0.05 * size);
LN.setTextAlign(1);
l = 0;
for (d = 1; d <= days; d++) {
LN.drawText(d, stepx * (w + 0.6), stepy * (l + 2.4));
if ((++w == 7) && (d != days)) {
w = 0;
l++;
}
}
for (x = 0.5 * stepx; x < width; x += stepx)
LN.drawLine(x, 1.5 * stepy, x, (l + 2.5) * stepy);
for (y = 1.5 * stepy; y < (l + 3) * stepy; y += stepy)
LN.drawLine(0.5 * stepx, y, 7.5 * stepx, y);
and another simple one, a checkered pattern in which every fifth line is thicker
Code:
width = LN.getWidth();
height = LN.getHeight();
scale = LN.getScale();
LN.drawCheckeredPattern(scale, false);
LN.setStrokeWidth(0.002 * width);
step = width / 150 + scale * width / 25;
for(y = step / 2; y < height; y += 5 * step) {
LN.drawLine(0, y, width, y);
}
for(x = step / 2; x < width; x += 5 * step) {
LN.drawLine(x, 0, x, height);
}
Today two examples for writing music, a simple one
Code:
width = LN.getWidth();
height = LN.getHeight();
LN.setStrokeWidth(0.001 * width);
left = 0.05 * width;
right = 0.95 * width;
step = 0.005 * height;
for(y = 0.05 * height; y < 0.95 * height; y += 0.05 * height) {
LN.drawLine(left, y, right, y);
LN.drawLine(left, y + step, right, y + step);
LN.drawLine(left, y + 2 * step, right, y + 2 * step);
LN.drawLine(left, y + 3 * step, right, y + 3 * step);
LN.drawLine(left, y + 4 * step, right, y + 4 * step);
LN.drawLine(left, y, left, y + 4 * step);
LN.drawLine(right, y, right, y + 4 * step);
}
and a double one
Code:
width = LN.getWidth();
height = LN.getHeight();
LN.setStrokeWidth(0.001 * width);
left = 0.05 * width;
right = 0.95 * width;
step = 0.005 * height;
for(y = 0.05 * height; y < 0.9 * height; y += 0.1 * height) {
LN.drawLine(left, y, right, y);
LN.drawLine(left, y + step, right, y + step);
LN.drawLine(left, y + 2 * step, right, y + 2 * step);
LN.drawLine(left, y + 3 * step, right, y + 3 * step);
LN.drawLine(left, y + 4 * step, right, y + 4 * step);
LN.drawLine(left, y + 9 * step, right, y + 9 * step);
LN.drawLine(left, y + 10 * step, right, y + 10 * step);
LN.drawLine(left, y + 11 * step, right, y + 11 * step);
LN.drawLine(left, y + 12 * step, right, y + 12 * step);
LN.drawLine(left, y + 13 * step, right, y + 13 * step);
LN.drawLine(left, y, left, y + 13 * step);
LN.drawLine(right, y, right, y + 4 * step);
LN.drawLine(right, y + 9 * step, right, y + 13 * step);
}
(step size etc. can easily be adjusted).
Since v1.16.13, there is an additional JavaScript command LN.setColor(r, g, b) that allows to use colors other then the one chosen in the dialog. This allows now, for instance, a ruled pattern with a red line on the left side
Code:
width = LN.getWidth();
height = LN.getHeight();
LN.drawRuledPattern(LN.getScale(), false);
LN.setStrokeWidth(0.002 * width);
LN.setColor(1, 0, 0);
LN.drawLine(0.05 * width, 0, 0.05 * width, height);
isometric problems
acadoid said:
As I receive numerous questions concerning the custom pattern JavaScript interface of LectureNotes and how to implement specific patterns, I thought that it might be helpful to post my replies here, which should allow to easily copy them. Please fell invited to post additional on;
Click to expand...
Click to collapse
I love this app. I am using it on a Galaxy Note 10.1. The isometric script give an error message that it takes too long and aborts. Thought you would want to know.
By the way, I tested it three times using cut ans paste. Once from the help page, and twice from here.
Keep up the good work.
@RETIEF: To double-check, I copied and paste the content shown in this thread, and it works. Note, however, that on my Samsung Galaxy Note 10.1 (for instance in difference to my Lenovo ThinkPad Tablet), the copy/paste converts a `new line´ into nothing (instead of a space), this causes problems, for instance `else y1´ becomes `elsey1´, which is wrong. Please check whether this is causing the problem in your case.
Attempt to fix calendar
acadoid said:
@RETIEF: To double-check, I copied and paste the content shown in this thread, and it works. Note, however, that on my Samsung Galaxy Note 10.1 (for instance in difference to my Lenovo ThinkPad Tablet), the copy/paste converts a `new line´ into nothing (instead of a space), this causes problems, for instance `else y1´ becomes `elsey1´, which is wrong. Please check whether this is causing the problem in your case.
Click to expand...
Click to collapse
I didn't have that exact problem, but the if else structures left out lines in the paste so that that all read if (xxxxx); else ;next line.
I manually edited the script to match exactly what was posted here and I still get the same error message. This is for the isometric code.
On the calendar code, if I use a task killer (I use the factory Samsung one), I can get the code to load and execute if I stopped on January. But if I left the document later in the year, I get the same error message.
I'm no coder (at least not since the Fortran G and Turbo Pascal days), but I wounder if extending the process time a second would solve the problem.
Like I said. I'm no coder.
In any case, I appreciate your help. I'm sure you have better things to do.
@RETIEF: All the posted codes work fine on my Samsung Galaxy Note 10.1. I can increase the maximal time, but I do not think that this is the problem. Have you tried to share such page or export it to PDF? In these cases, the maximal waiting time is ten times longer (these operations are not time critical), so if you get an abort message there, then something is wrong in your code.
If you drop me an email, I can send the code as email attachment to you, this will exclude all possible sources of error.
PMed you with address. Didn't now your address.
acadoid said:
@RETIEF: All the posted codes work fine on my Samsung Galaxy Note 10.1. I can increase the maximal time, but I do not think that this is the problem. Have you tried to share such page or export it to PDF? In these cases, the maximal waiting time is ten times longer (these operations are not time critical), so if you get an abort message there, then something is wrong in your code.
If you drop me an email, I can send the code as email attachment to you, this will exclude all possible sources of error.
Click to expand...
Click to collapse
see the PM
Edit. I get a partial rendering in landscape mode before abort. I get horizontal lines, and one diagonal in the upper left.
Isometric paper
Thanks for the e-mail. It works like a champ. I've talked with a lot of developers in my time, but you are the most responsive and responsible I have ever had the pleasure to know. Thanks.
@RETIEF: Curious, the text in the post above is copied and pasted from the same file. In any case, glad that it works.
Heye acadoid. Really dig the app, but im looking for something with type capabilities as well. Are you thinking about implementng this at all?
I am familiar with other apps, but some offer too much and have strange and annoying options (freenote) or great simple user and user friendly text environments with no drawing capabilities(jotterpad hd).
@jewnersey: LectureNotes has a text drawing tool for typed text, but this is intended for a keyword or a small phrase, not for longer text. To improve in this respect is on my agenda.
Note that this is not quite the right thread, there are several general threads on LectureNotes, this one is specific for custom paper pattern.
Week-by-week calendar
Below is a calendar which shows one week at a time. The width of the paper should be twice the height for this calendar to look right.
Editable parameters:
line 1 through 3: Starting date of the calendar
line 9 through 19: text sizes, margins, size of free space on weekdays, start and end hour of weekdays, a few colors
I made this for myself, and thought I might as well share it in case someone else can make use of it. I also uploaded a couple of screenshots.
Thanks for giving us the opportunity of making custom backgrounds!
Code:
year = 2012;
month = 11;
day = 20;
relativeWeek = LN.getPage()-1;
width = LN.getWidth();
height = LN.getHeight();
headertext = height * 0.05;
headerheight = height * 0.10;
toplineheight = headerheight + headertext;
leftmargin = height * 0.1;
rightmargin = leftmargin;
noteSpace = height * 0.2;
startHour = 7;
endHour = 17;
defaultColor = [150,150,150];
headlineColor = [0,0,0];
weekColors = [[208,0,250],[0,200,240],[92,255,1],[255,255,0],[255,146,1],[255,9,32],[255,25,145]];
monthdays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
weekdays = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
if ((year % 4 == 0) && ((year % 100 != 0) || (year % 400 == 0)))
monthdays[1] = 29;
/* calculate what date the first monday is */
year2 = year;
if (month <= 2)
--year2;
c = Math.floor(year2 / 100);
y = year2 % 100;
m = ((month + 9) % 12) + 1;
firstweekday = (Math.floor(2.6 * m - 0.2) + y + Math.floor(y / 4) + Math.floor(c / 4) - 2 * c + 7 * 100) % 7;
/* 0 is monday */
firstmonday = (7 - firstweekday) % 7 + 1;
/* convert day and month so that they represent the monday of the user inputted week */
if (day < firstmonday) {
--month;
if (month == 0) {
month = 12;
--year;
monthdays[1] = 28;
if ((year % 4 == 0) && ((year % 100 != 0) || (year % 400 == 0)))
monthdays[1] = 29;
}
day = monthdays[month-1] + firstmonday - 7;
} else {
day = firstmonday + 7*Math.floor((day-firstmonday)/7);
}
/* work out the year, month, day and week of the current sheet */
day += 7*relativeWeek;
while (day > monthdays[month-1]) {
day -= monthdays[month-1];
++month;
if (month == 13) {
month = 1;
++year;
monthdays[1] = 28;
if ((year % 4 == 0) && ((year % 100 != 0) || (year % 400 == 0)))
monthdays[1] = 29;
}
}
/* calculate the week number of user input */
totalDays = day;
for (i = 0; i < month-1; ++i)
totalDays += monthdays[i];
week = Math.ceil(totalDays/7);
/* Make colors for each day */
stepx = (width-leftmargin-rightmargin)/6;
i = 0;
for (x = leftmargin; x-leftmargin <= 5.5*stepx; x += stepx) {
/* create lines for each half hour */
if (x-leftmargin < 4.5*stepx) {
y = toplineheight+headertext*1.1;
LN.setColor( weekColors[i][0]/255, weekColors[i][1]/255, weekColors[i][2]/255 );
LN.drawFilledRect( x, toplineheight, x+stepx, y );
} else {
y1 = toplineheight+headertext*1.1;
y2 = (toplineheight+height)/2+headertext*1.1;
LN.setColor( weekColors[i][0]/255, weekColors[i][1]/255, weekColors[i][2]/255 );
LN.drawFilledRect( x, toplineheight, x+stepx, y1 );
++i;
LN.setColor( weekColors[i][0]/255, weekColors[i][1]/255, weekColors[i][2]/255 );
LN.drawFilledRect( x, (toplineheight+height)/2, x+stepx, y2 );
}
LN.setStrokeWidth(4);
++i;
}
/* Reset color */
LN.setColor( defaultColor[0]/255, defaultColor[1]/255, defaultColor[2]/255 );
/* Drawing the main lines */
stepx = (width-leftmargin-rightmargin)/6;
stepy = (height-toplineheight-headertext*1.01-noteSpace)/(2+endHour-startHour);
LN.setTextAlign(1);
LN.setTextSize(stepy*0.9);
for (x = leftmargin; x-leftmargin < 6.5*stepx; x += stepx) {
LN.drawLine(x, toplineheight, x, height);
if (x-leftmargin < 5.5*stepx) {
/* create lines for each half hour */
LN.setStrokeWidth(1);
if (x-leftmargin < 4.5*stepx) {
i = -2;
for (y = toplineheight+headertext*1.1; y < height-noteSpace; y += stepy) {
LN.drawLine(x, y, x+stepx, y);
if (++i > 0) {
LN.drawText(startHour+i-1, x, y-stepy*0.05);
LN.drawLine(x+LN.getTextWidth(startHour+i-1), y-stepy/2, x+stepx, y-stepy/2);
}
}
} else {
LN.drawLine(x, toplineheight+headertext*1.1, x+stepx, toplineheight+headertext*1.1);
LN.drawLine(x, (toplineheight+height)/2+headertext*1.1, x+stepx, (toplineheight+height)/2+headertext*1.1);
}
LN.setStrokeWidth(4);
}
}
LN.drawLine(leftmargin, toplineheight, width-rightmargin, toplineheight);
LN.drawLine(leftmargin+5*stepx, (toplineheight+height)/2, width-rightmargin, (toplineheight+height)/2);
/* Write which week it is */
LN.setTextSize(headertext);
LN.setColor( headlineColor[0]/255, headlineColor[1]/255, headlineColor[2]/255 );
LN.setTextAlign(-1);
LN.drawText("Week " + week, width-rightmargin, headerheight);
oldMonth = month;
oldYear = year;
LN.setTextAlign(0);
for (i = 0; i < 7; ++i){
if (day > monthdays[month-1]) {
day -= monthdays[month-1];
++month;
if (month == 13) {
month = 1;
++year;
monthdays[1] = 28;
if ((year % 4 == 0) && ((year % 100 != 0) || (year % 400 == 0)))
monthdays[1] = 29;
}
}
if (i < 6) {
LN.drawText(day + " " + weekdays[i], leftmargin + stepx * (i + 0.5), toplineheight+headertext );
} else {
LN.drawText(day + " " + weekdays[i], leftmargin + stepx * (i - 0.5), (toplineheight+height)/2+headertext );
}
++day;
}
LN.setTextAlign(1);
if (oldMonth == month)
LN.drawText(months[month-1], leftmargin, headerheight );
else {
LN.drawText(months[oldMonth-1] + " / " + months[month-1], leftmargin, headerheight );
}
LN.setTextAlign(0);
if (oldYear == year)
LN.drawText(year, leftmargin+(width-leftmargin-rightmargin)/2, headerheight );
else {
LN.drawText(oldYear + " / " + year, leftmargin+(width-leftmargin-rightmargin)/2, headerheight );
}
Thanks for the Weekly Calendar
Thanks for this post. It took a couple of edits to get it perfect on my note 10.1, but I like it. Thanks for your work and sharing.:good:
Egenskaper said:
Below is a calendar which shows one week at a time. The width of the paper should be twice the height for this calendar to look right.
Editable parameters:
Click to expand...
Click to collapse
RETIEF said:
Thanks for this post. It took a couple of edits to get it perfect on my note 10.1, but I like it. Thanks for your work and sharing.:good:
Click to expand...
Click to collapse
Just turned on to LectureNotes and this Forum will make me appreciate it all the more.
page x of y
The programmer added the funtion LNgetNumberOfPages();
My custom pattern is checkered and shoes the number of pages (page x of y) at the bottom:
width = LN.getWidth();
height = LN.getHeight();
page = LN.getPage ();
pages = LN.getNumberOfPages();
scale = LN.getScale ();
LN.drawCheckeredPattern (scale, false);
LN.setColor (1, 1, 1);
LN.drawFilledRect(width/2-0.07*width, height-0.025*height, width/2+0.07*width, height);
LN.setColor (0.4, 0.4,0.4);
LN.setTextSize (0.02 * width);
LN.setTextAlign (0);
LN.drawText("Seite " + page + " von " + pages , 0.5*width, 0.99*height);
Hope you like it as well.
Thanks
Thanks. This works well. Anyone skilled enough to make one that is checkered with every fifth line bold or red?
tech.towan said:
The programmer added the funtion LNgetNumberOfPages();
My custom pattern is checkered and shoes the number of pages (page x of y) at the bottom:
width = LN.getWidth();
height = LN.getHeight();
page = LN.getPage ();
pages = LN.getNumberOfPages();
scale = LN.getScale ();
LN.drawCheckeredPattern (scale, false);
LN.setColor (1, 1, 1);
LN.drawFilledRect(width/2-0.07*width, height-0.025*height, width/2+0.07*width, height);
LN.setColor (0.4, 0.4,0.4);
LN.setTextSize (0.02 * width);
LN.setTextAlign (0);
LN.drawText("Seite " + page + " von " + pages , 0.5*width, 0.99*height);
Hope you like it as well.
Click to expand...
Click to collapse
@RETIEF: Try
Code:
width = LN.getWidth();
height = LN.getHeight();
scale = LN.getScale();
LN.drawCheckeredPattern(scale, false);
LN.setStrokeWidth(0.002 * width);
step = width / 150 + scale * width / 25;
for(y = step / 2; y < height; y += 5 * step) {
LN.drawLine(0, y, width, y);
}
for(x = step / 2; x < width; x += 5 * step) {
LN.drawLine(x, 0, x, height);
}
This draws a thicker line every fifth line, the scale of the pattern is controlled by the slider in the notebook settings dialog. To get red lines, add a
Code:
LN.setColor(1, 0, 0);
after the LN.setStrokeWidth.
thanks
this is perfect. Thanks.
acadoid said:
@RETIEF: Try
Code:
width = LN.getWidth();
height = LN.getHeight();
scale = LN.getScale();
LN.drawCheckeredPattern(scale, false);
LN.setStrokeWidth(0.002 * width);
step = width / 150 + scale * width / 25;
for(y = step / 2; y < height; y += 5 * step) {
LN.drawLine(0, y, width, y);
}
for(x = step / 2; x < width; x += 5 * step) {
LN.drawLine(x, 0, x, height);
}
This draws a thicker line every fifth line, the scale of the pattern is controlled by the slider in the notebook settings dialog. To get red lines, add a
Code:
LN.setColor(1, 0, 0);
after the LN.setStrokeWidth.
Click to expand...
Click to collapse