[APP][3.0+] LectureNotes - custom pattern JavaScript codes

acadoid · Dec 20, 2012

Another example, an adjustable dotted pattern

Code:

width = LN.getWidth();
height = LN.getHeight();
scale = LN.getScale();
LN.setStrokeWidth(0.002 * width);
step = width / 150 + scale * width / 25;
for(y = step / 2; y < height; y += step) {
  for(x = step / 2; x < width; x += step) {
    LN.drawPoint(x, y);
  }
}

RETIEF · Dec 20, 2012

Thanks

Works well.

Is it possible to create one the horizontal lines and wider spaced lines very light lines at 37.5 degrees. (used for Spencerian caligraphy). Thanks.

acadoid said:

Another example, an adjustable dotted pattern

Code:

width = LN.getWidth();
height = LN.getHeight();
scale = LN.getScale();
LN.setStrokeWidth(0.002 * width);
step = width / 150 + scale * width / 25;
for(y = step / 2; y < height; y += step) {
  for(x = step / 2; x < width; x += step) {
    LN.drawPoint(x, y);
  }
}

acadoid · Dec 20, 2012

@RETIEF: Try

Code:

width = LN.getWidth();
height = LN.getHeight();
scale = LN.getScale();
LN.drawRuledPattern(scale, false);
LN.setStrokeWidth(0.002 * width);
LN.setAlpha(0.5);
step = width / 150 + scale * width / 25;
offset = 0.608761 * height;
for(x = -offset + step / 2; x < width; x += step) {
  LN.drawLine(x, height, x + offset, 0);
}

Adjust line width, alpha, and line distance as needed (note that sin(37.5) approx. 0.608761).

RETIEF · Dec 20, 2012

Thanks again.

This is what I wanted. I made a couple of tweaks, but ended up with perfect Spencerian practice paper.

:good:

acadoid said:
@RETIEF: Try

Code:

width = LN.getWidth(); height = LN.getHeight(); scale = LN.getScale(); LN.drawRuledPattern(scale, false); LN.setStrokeWidth(0.002 * width); LN.setAlpha(0.5); step = width / 150 + scale * width / 25; offset = 0.608761 * height; for(x = -offset + step / 2; x < width; x += step) { LN.drawLine(x, height, x + offset, 0); }

Adjust line width, alpha, and line distance as needed (note that sin(37.5) approx. 0.608761).

acadoid · Dec 20, 2012

@RETIEF: I would be curious to see the final result, feel free to post it here.

junglefish · Dec 20, 2012

Dot pattern isn't working for me. :-/

Thanks for all the code examples, @acadoid.

Unfortunately, the dot-pattern code doesn't work on my Galaxy Note 10.1. When I copy-paste it (after adding in line breaks) it just doesn't put anything on the page. If I copy-paste without adding line breaks, same issue. I scoured through the code and found no errors. (If this sounds familiar, I'm the same guy who was emailing you about a dot pattern.

@RETIEF, can you summarize for me what you did to get it working?

Thanks!

acadoid said:

Another example, an adjustable dotted pattern

Code:

width = LN.getWidth();
height = LN.getHeight();
scale = LN.getScale();
LN.setStrokeWidth(0.002 * width);
step = width / 150 + scale * width / 25;
for(y = step / 2; y < height; y += step) {
  for(x = step / 2; x < width; x += step) {
    LN.drawPoint(x, y);
  }
}

acadoid · Dec 21, 2012

@junglefish: The posted coded should work fine. I guess that RETIEF did not meant that she/he corrected a mistake but rather adjusted step sizes.

RETIEF · Dec 21, 2012

Spencerian

acadoid said:
@junglefish: The posted coded should work fine. I guess that RETIEF did not meant that she/he corrected a mistake but rather adjusted step sizes.

Exactly. I adjust the step size, and line width. I did about a half page of Spencerian writing and it worked well.

The attached PDF is exactly what a practice sheet looks like except it has the characters on it already.

The one here works well and helped me check if I still had my characters at the correct slant and size.

RETIEF · Dec 21, 2012

What I did

Honestly, I just copy and pasted the code from here into the notebook. It resulted in a page of evenly spaced dots. If that was what was intended, it worked well. If something else was intended, it didn't work. I find this kind of page useful because the dots are unobtrusive but can still be used as guides.

junglefish said:
Thanks for all the code examples, @acadoid.

Unfortunately, the dot-pattern code doesn't work on my Galaxy Note 10.1. When I copy-paste it (after adding in line breaks) it just doesn't put anything on the page. If I copy-paste without adding line breaks, same issue. I scoured through the code and found no errors. (If this sounds familiar, I'm the same guy who was emailing you about a dot pattern.

@RETIEF, can you summarize for me what you did to get it working?

Thanks!

junglefish · Dec 21, 2012

Dang.

Yes, the evenly spaced grid of dots is what I was hoping for. I find it very valuable on my print notebook, and was hoping for the same on my electric notebook.

Dang. I'll mess with it some more and see if I can get it to work. Maybe it's copying the text improperly -- using the wrong browser on Android? I'm somewhat new to the Android experience, and might be doing something wrong.

Thanks for the confirmation, though. And for all the support!

JF

RETIEF said:
Honestly, I just copy and pasted the code from here into the notebook. It resulted in a page of evenly spaced dots. If that was what was intended, it worked well. If something else was intended, it didn't work. I find this kind of page useful because the dots are unobtrusive but can still be used as guides.

junglefish · Dec 21, 2012

New paper feature? Thanks!

OH -- maybe the dot-pattern discussion is moot, now. It looks like there's been an update to the app... adding the option of using an IMAGE for the background.

I think this is the perfect solution! I can just make my own dot pattern as an image, and use that. Bim, bam, done. I even fancied it up a bit more by adding a subtle gradient to the edges to make it look like the page of a book.

Thanks @acadoid. You rock! :highfive:

junglefish

acadoid said:
@junglefish: The posted coded should work fine. I guess that RETIEF did not meant that she/he corrected a mistake but rather adjusted step sizes.

acadoid · Dec 21, 2012

@junglefish: You can of course use an image with dots, but note that this will be slower than the JavaScript variant.

RETIEF · Dec 22, 2012

dotted page

junglefish said:
Yes, the evenly spaced grid of dots is what I was hoping for. I find it very valuable on my print notebook, and was hoping for the same on my electric notebook.

Dang. I'll mess with it some more and see if I can get it to work. Maybe it's copying the text improperly -- using the wrong browser on Android? I'm somewhat new to the Android experience, and might be doing something wrong.

Thanks for the confirmation, though. And for all the support!

JF

I found i could not reliably copy from ANY android browser. I use a pc. Make a text file using notebook, and copy that file to the tablet. I open it in a text editor, usually the one in root explorer. Then i select all, copy, hit the home button, open lecture notes, create a notebook, and paste the text. Convoluted, I know, but it works.:cyclops:

ratindahat · Dec 23, 2012

Here is a layout i just made. It is engineering paper, for US letter size. It is for a 1280x1677 resolution. I do not think it will scale well to different resolutions, but here it is if anyone wants it. I'm sure there are some ways to clean it up, but it seems to be working well for me so far.

Code:

width = LN.getWidth(); 
height = LN.getHeight(); 
page = LN.getPage();

pxperin=width/8.5; 
pxperline=pxperin/5; 
lborder=pxperin; rborder=(pxperin*7)+lborder; 
totalgridwidth=pxperin*7;

LN.setColor(.957,.976,.849); 
LN.drawFilledRect(0, 0, width, height);

LN.setColor(.365,.690,.173); 
LN.setStrokeWidth(width/500); 
LN.drawLine(0, pxperin/2, width, pxperin/2); 
LN.drawLine(lborder, 0, lborder, height); 
LN.drawLine(rborder,0,rborder,height); 
LN.drawLine(lborder+(totalgridwidth*.33),0,lborder+(totalgridwidth*.33),pxperin/2); 
LN.drawLine(lborder+(totalgridwidth*.67),0,lborder+(totalgridwidth*.67),pxperin/2);

LN.setStrokeWidth(width/1000); 
LN.setColor(.2,.365,.690,.173); 
for (x = 0; x < 50; x=x+1) 
LN.drawLine(lborder,(pxperin/2)+((x+1)*pxperline) ,rborder,(pxperin/2)+((x+1)*pxperline));

LN.setStrokeWidth(width/500); 
LN.setColor(.3,.365,.690,.173); 
for (x = 0; x <11 ; x=x+1) 
LN.drawLine(lborder,(pxperin/2)+((x+1)*pxperline*5) ,rborder,(pxperin/2)+((x+1)*pxperline*5));

LN.setStrokeWidth(width/1000); 
LN.setColor(.2,.365,.690,.173); 
for (x = 0; x < 35; x=x+1) 
LN.drawLine(((x+1)*pxperline)+lborder,pxperin/2,((x+1)*pxperline)+lborder ,(pxperin/2)+(pxperin*10));

LN.setStrokeWidth(width/500); 
LN.setColor(.3,.365,.690,.173); 
for (x = 0; x < 7; x=x+1) 
LN.drawLine(((x+1)*pxperline*5)+lborder,pxperin/2,((x+1)*pxperline*5)+lborder , (pxperin/2)+(pxperin*10));

LN.setTextSize(0.02 * width); 
LN.setTextAlign(0); 
LN.drawText("Page " + page, 0.05 * width, 0.97 * height); 
LN.drawText("Page " + page, 0.05 * width, 0.02 * height);

acadoid · Dec 24, 2012

Here is a pattern for a story board

Code:

width = LN.getWidth();
height = LN.getHeight();
boardsPerRow = (width < height) ? 3 : 4;
marginPerBoardWidth = 0.1;
extraSpacePerRow = 0.15;
boardWidth = width / (boardsPerRow + (boardsPerRow + 1) * marginPerBoardWidth);
margin = boardWidth * marginPerBoardWidth;
stepX = boardWidth + margin;
boardHeight = boardWidth / 16 * 9;
rows = Math.floor(height / (boardHeight * (1 + extraSpacePerRow) + margin));
stepY = boardHeight + (height - boardHeight * rows - margin * 2) / (rows - 1);
LN.setStrokeWidth(0.002 * width);
for(x = margin; x < width; x += stepX) {
  for(y = margin; y < height; y += stepY) {
    LN.drawRect(x, y, x + boardWidth, y + boardHeight);
  }
}

It places 3 (portrait) or 4 (landscape) rectangles of 16:9 aspect ratio per row, with a 10% (0.1) margin and a 15% (0.15) extra margin per row.

RETIEF · Dec 24, 2012

thanks

ratindahat said:
Here is a layout i just made. It is engineering paper, for US letter size. It is for a 1280x1677 resolution.

Thanks. This one is nice.

ratindahat · Dec 26, 2012

Took me all semester to finally decide to make it. Glad you like it.

junglefish · Dec 27, 2012

acadoid said:
Here is a pattern for a story board

It places 3 (portrait) or 4 (landscape) rectangles of 16:9 aspect ratio per row, with a 10% (0.1) margin and a 15% (0.15) extra margin per row.

Very cool idea! However, I still can't get any code to work, including this. I can't figure out what I'm doing wrong. I saved it into a text file, loaded the file on my tablet, copied and pasted the code from that file into the Custom window, but the notebook doesn't show any pattern, just a blank page.

However, a new facet to the issue is: When I go into the "Notebook overview" for that notebook, the preview of the page DOES have storyboards on it! So something's happening correctly. It's just not getting all the way to the full drawing view.

What do you think could be happening?

JF

acadoid · Dec 28, 2012

@junglefish: This is a bit strange, either the JavaScript works or not. For notebook overview (PDF export, etc). the timing constraint is relaxed, so that the JavaScript code has more time. What you can try to do is to build up the code step by step and see where it fails.

_yupa_ · Jan 3, 2013

My daughter's practice paper (second year italian elementary school), written with portrait 800x1132 resolution (note 10.1- a4) in mind.

Code:

width = LN.getWidth();
height = LN.getHeight();
page = LN.getPage ();
LN.setStrokeWidth(0.001 * width);
LN.setTextSize(0.02*width);
LN.setTextAlign(0);
LN.drawText("Pag. " + page, 0.5* width, 0.95* height);
mleft = 0.05 * width;
mright = 0.95 * width;
mdiff=mright-mleft;
step = 0.01 * height;
for(y = 0.05 * height; y < 0.9 * height; y += 0.087 * height) {
  LN.drawLine(0, y, width, y);
  LN.drawLine(0, y + 3.2 * step, width, y + 3.2 * step);
  LN.drawLine(0, y + 5.5 * step, width, y + 5.5 * step);
  LN.drawLine(0, y + 8.7 * step, width, y + 8.7 * step);
}
for(x = mleft; x< mright; x += 0.25 * mdiff) {
  LN.drawLine(x, 0, x, height);
}
LN.setColor(1, 0, 1);
LN.drawLine(mleft, 0, mleft, height) ;
LN.drawLine(mright, 0, mright, height) ;

[APP][3.0+] LectureNotes - custom pattern JavaScript codes

Senior Member

Senior Member

Senior Member

Senior Member

Senior Member

New member

Senior Member

Senior Member

Senior Member

New member

New member

Senior Member

Senior Member

Senior Member

Attachments

Senior Member

Senior Member

Senior Member

New member

Senior Member

Member

Similar threads

Top Liked Posts