Create graph paper with mtpaint

How to do things, solutions, recipes, tutorials
Message
Author
User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

Create graph paper with mtpaint

#1 Post by don570 »

Mtpaint - Tutorial graph paper

In this tutorial graph paper is created ---> 10 points by 10 points

1) Select RGB or indexed color document ---> any size

2) View > Show dock should be chosen

3) Right click on Place Gradient to create a custom gradient.
Click 'Edit Custom'.
There should be 10 points. 9 white and the last one black.
Click OK to close 'Custom' window.See image...

Image


4) Choose 'Linear' and 'Repeat' ---> a repeat length of 9 rather than 10
gives better results. See image....

Image

5) Click Apply and OK


6) Click in settings dock for gradient mode to be active

7) Click 'Place gradient' icon and place the gradient. Be careful to observe
numbers at bottom of window to make the gradient vertical and a length of 10 points.
Tip: Hold down Shift or CTRL-shift keys to achieve 90 degree angles

8 ) Colors

A ----> white
B ----> black

9) Right click on Flood fill icon. Set the Flood fill ----> to highest number .
'Gradient driven' can be set on or off.

Image


10) Click in document with Flood fill. See results.

Image




11) Make a new upper layer
Transparent color 7
Show all layers

Image


12) In the upper layer, click on the Place Gradient.
place horizontally a distance of 10 points for the vertical lines

13) Make sure Gradient mode is active and do a flood fill

Image

14) Save the result to your hard disk by
Layers > Save Composite image

Transparency set to -1

_______________________________________________

wjaguar
Posts: 359
Joined: Wed 21 Jun 2006, 14:16

Re: Create graph paper with mtpaint

#2 Post by wjaguar »

Some steps can be done easier.
don570 wrote:10 points. 9 white and the last one black.
11 points, 9 white and 2 black, with last 3 set to "constant", work better: no halftones can appear.
Right click on Flood fill icon. Set the Flood fill ----> to highest number .
Make a new upper layer
No need of floodfill and layers here.
For first step, Select all - Fill selection.
Then rotate gradient placement 90 degrees.
Then mask the color black in palette window.
And again, Select all - Fill selection.

Or another way: copy the first step image (lines), rotate clipboard and paste back - either with masking (protecting) black in image, or you can mask (ignore) white on clipboard instead.

Or instead of masking, use "Darken" blend mode for the second step (with either gradient or clipboard).

Or the simplest way of them all: just make an image of a single grid cell, and Resize Canvas (Tile) it into any size you want. :-)

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#3 Post by don570 »

I should have realised that I can rotate the image 90 degrees
and then make the lines again. :oops:

... or just use the clipboard to paste a copy to a top layer and
rotate there.

That would have speeded up the work since the placing of the gradient
is the hard part.
___________________________________________________________

User avatar
vovchik
Posts: 1507
Joined: Tue 24 Oct 2006, 00:02
Location: Ukraine

#4 Post by vovchik »

Dear all,

I know this might be off-topic a bit, but not really, I think. This is an svg way of doing it:

Code: Select all

<svg width="500" height="500">
<style type="text/css">.blue {fill:none;stroke:lightblue;}
    .maingridx {stroke-dasharray:0.5,49,0.5,0;stroke-width:500;}
    .maingridy {stroke-dasharray:0.5,49,0.5,0;stroke-width:500;}
    .gridx {stroke-dasharray:0.2,9.6,0.2,0;stroke-width:500;}
    .gridy {stroke-dasharray:0.2,9.6,0.2,0;stroke-width:500;}
    #labels {font-size:10px;fill:gray;font-family:Sans;}
    .center {text-anchor:middle;}
    .rj {text-anchor:end;}</style>
<g transform="translate(0) scale(1)">
<line class="blue gridx" y1="250" y2="250" x2="500"/>
<line class="blue gridy" x1="250" y2="500" x2="250"/>
<line class="blue maingridx" y1="250" y2="250" x2="500"/>
<line class="blue maingridy" x1="250" y2="500" x2="250"/>
<g id="labels">
<g class="center" transform="translate(0,261)">
<text x="50" y="0" id="x1">-20</text>
<text x="100" y="0" id="x2">-15</text>
<text x="150" y="0" id="x3">-10</text>
<text x="200" y="0" id="x4">-5</text>
<text x="250" y="0" id="x5">0</text>
<text x="300" y="0" id="x6">5</text>
<text x="350" y="0" id="x7">10</text>
<text x="400" y="0" id="x8">15</text>
<text x="450" y="0" id="x9">20</text>
</g>
<g class="rj" transform="translate(246,4)">
<text x="0" y="450" id="y1">-20</text>
<text x="0" y="400" id="y2">-15</text>
<text x="0" y="350" id="y3">-10</text>
<text x="0" y="300" id="y4">-5</text>
<text x="0" y="250" id="y5">0</text>
<text x="0" y="200" id="y6">5</text>
<text x="0" y="150" id="y7">10</text>
<text x="0" y="100" id="y8">15</text>
<text x="0" y="50" id="y9">20</text>
</g>
</g>
</g>
</svg>
With kind regards,
vovchik

User avatar
don570
Posts: 5528
Joined: Wed 10 Mar 2010, 19:58
Location: Ontario

#5 Post by don570 »

Interesting 8)

A BASH script could generate the SVG image.

____________________________________________

User avatar
vovchik
Posts: 1507
Joined: Tue 24 Oct 2006, 00:02
Location: Ukraine

#6 Post by vovchik »

Dear Don,

I was also thinking exactly along those lines - and all very small and tidy .... :)

With kind regards,
vovchik

gcmartin

#7 Post by gcmartin »

could someone offer a script. And if so, could the very first post, which I think is presented in an excellent fashion, reference the script and other method as alternative(s). This could be done via links to the internal posts from the opening post.

Thanks @Don570 for authoring this thread.

wjaguar
Posts: 359
Joined: Wed 21 Jun 2006, 14:16

#8 Post by wjaguar »

don570 wrote:A BASH script could generate the SVG image.
Speaking of scripts - a Bash script could generate an XPM image of same thing, and do it about 50 times simpler than SVG. :-)

User avatar
vovchik
Posts: 1507
Joined: Tue 24 Oct 2006, 00:02
Location: Ukraine

#9 Post by vovchik »

Dear wjaguar,

Just thinking out loud. Xpms are raster representations and do not scale readily - although you can do that with plain ASCII chars, I know, so bash could do them easily. However, the SVG is intrinsically much smaller - and if the grid text and superfluous "id=" are thrown out, the svg file is really tiny. Also, a graph can be generated easily using a path, without having to calculate all the pixel positions that you would have to do with xpm...and bash ain't great at or fast with arithmetic, as we all know. If you have a decent example, please post.... :)

With kind regards,
vovchik

User avatar
rcrsn51
Posts: 13096
Joined: Tue 05 Sep 2006, 13:50
Location: Stratford, Ontario

#10 Post by rcrsn51 »

The key issue here is the final destination of the graphic. Is it to be printed on a sheet of paper?

wjaguar
Posts: 359
Joined: Wed 21 Jun 2006, 14:16

#11 Post by wjaguar »

vovchik wrote:However, the SVG is intrinsically much smaller - and if the grid text and superfluous "id=" are thrown out, the svg file is really tiny. Also, a graph can be generated easily using a path, without having to calculate all the pixel positions that you would have to do with xpm...
What these nice words do in fact mean, is that you need to learn programming in SVG language to do anything worthwhile with SVGs.
And thing is, if programming it is, I can fire up my Perl, load Postscript::Simple, and with it produce a scalable and directly printable file in a tiny fraction of time. ;-)
SVG is frequently a solution in search of problem.
and bash ain't great at or fast with arithmetic, as we all know. If you have a decent example, please post.... :)
Here it is! :lol:

Code: Select all

#!/bin/sh
perl -MGD::Graph -e ....
http://gdgraph.com/samples.html

gcmartin

Uses for graph paper

#12 Post by gcmartin »

This could become a Watermark in printing or a form used in printing. Of course, there are other creative uses not to mention its uses in Geometry and Trigonometry or guide for placing nails in wall or slices in a board or ???

Just some not so fancy uses.

User avatar
vovchik
Posts: 1507
Joined: Tue 24 Oct 2006, 00:02
Location: Ukraine

#13 Post by vovchik »

Dear wjaguar (et al.),

The perl GD module, as far as I know, isn't present in most puppy distributions :( And as for svg, there is no real programming involved, just a few basic concepts relating to syntax (we could also parametrize the grid and scaling here, too, with very little effort, as well as axis annotation). The main thing is to construct the path strings properly, which isn't really hard.

With kind regards,
vovchik

Code: Select all

#!/bin/sh

# ******************
# INIT VARS
# ******************

img_w="500"
img_h="500"
grid_color="lightblue"
line_path="M 10 490 200 350 250 250 350 350 490 490"
line_color="gray"
curve_path="M 10 490 S 200 350 250 250 350 350 490 490"
curve_color="red"
title="WINDOWS USERS WORLDWIDE"
font_name="sans-serif"
font_size="24"
font_weight="900"
font_color="firebrick"
temp_file="/tmp/temp.svg"

# ******************
# MAKE SVG
# ******************

svg="<svg width='$img_w' height='$img_h'>
  <g style='fill:none;stroke:$grid_color;stroke-width:500'>
    <g id='light' stroke-dasharray='0.2,9.6,0.2,0'>
      <line class='sub_x' y1='250' y2='250' x1='0' x2='500'/>
      <line class='sub_y' y1='0' x1='250' y2='500' x2='250'/>
    </g>
    <g id='heavy' stroke-dasharray='0.5,49,0.5,0'>
      <line class='main_x' y1='250' y2='250' x1='0' x2='500'/>
      <line class='main_y' y1='0' x1='250' y2='500' x2='250'/>
    </g>
  </g>
  <g id='windows'>
    <path id='curve' stroke-width='4' stroke='$curve_color' fill='none'
      d='$curve_path'/>
    <path id='line' stroke-width='2' stroke-dasharray='5,5' stroke='$line_color' 
      fill='none' opacity='0.75' d='$line_path'/>
    <text id='title' text-anchor='middle' x='250' y='50' stroke='none' 
      fill='$font_color' font-family='$font_name' 
      font-size='$font_size' font-weight='$font_weight'>$title</text>
  </g>
</svg>"

echo "$svg" > "$temp_file"

defaultimageviewer "$temp_file"

seaside
Posts: 934
Joined: Thu 12 Apr 2007, 00:19

#14 Post by seaside »

Here's a quick 13X10 grid graph paper style svg maker-

Code: Select all

#!/bin/sh
# 13X10 grid

box_size="48"
square_h="13"
square_v="10"

svg_width=$((box_size*square_h))
svg_height=$((box_size*square_v))


svg_grid="<svg  width='$svg_width' height='$svg_height'>
  <defs> 
    <pattern id='grid' width='$box_size' height='$box_size' patternUnits='userSpaceOnUse'>
      <rect fill='white' stroke='black' x='0' y='0' width='$box_size' height='$box_size'/>
    </pattern>
  </defs>
  <rect fill='url(#grid)' stroke='black' x='0' y='0' width='100%' height='100%'/>
</svg>"

echo "$svg_grid" > /tmp/svg_grid

defaultimageviewer /tmp/svg_grid 
You can vary the box size and the number of horizontal and vertical boxes.

Cheers,
s

User avatar
vovchik
Posts: 1507
Joined: Tue 24 Oct 2006, 00:02
Location: Ukraine

#15 Post by vovchik »

Dear all,

What about this? A bit of mine and a bit of seaside?

With kind regards,
vovchik

Code: Select all

#!/bin/sh

box_size="10"
square_h="100"
square_v="70"
units=""
svg_width=$((box_size*square_h))
svg_height=$((box_size*square_v))
maj_grid=$((box_size*5))

svg_grid="<svg  width='$svg_width$units' height='$svg_height$units'>
  <defs>
    <pattern id='grid' width='$box_size' height='$box_size' patternUnits='userSpaceOnUse'>
      <rect fill='white' stroke-width='0.5' stroke='lightblue' x='0' y='0' width='$box_size' height='$box_size'/>
    </pattern>
    <pattern id='gridbig' width='$maj_grid' height='$maj_grid' patternUnits='userSpaceOnUse'>
      <rect fill='none' stroke-width='0.7' stroke='lightblue' x='0' y='0' width='$maj_grid' height='$maj_grid'/>
    </pattern>
  </defs>
  <rect fill='url(#grid)' stroke='lightblue' x='0' y='0' width='100%' height='100%'/>
  <rect fill='url(#gridbig)' stroke-width='3' stroke='lightblue' x='0' y='0' width='100%' height='100%'/>
</svg>"

echo "$svg_grid" > /tmp/svg_grid2.svg

defaultimageviewer /tmp/svg_grid2.svg

seaside
Posts: 934
Joined: Thu 12 Apr 2007, 00:19

#16 Post by seaside »

vovchik,

Nicely done. (not a two-bit piece of code :D )

One thing I run into when saving these bash files, is that rox shows them with svg icons. The only way I can seem to get around this is to put extra comment lines in the code like

Code: Select all

 # **************** 
so that they show up as a bash file icons.

Regards,
s

gcmartin

#17 Post by gcmartin »

Excellent! This addresses a large range of potential uses.

Can a simple launch screen be set that offers both the current default and allow changes?

Thanks for this demonstration and its solution thus far.

User avatar
vovchik
Posts: 1507
Joined: Tue 24 Oct 2006, 00:02
Location: Ukraine

#18 Post by vovchik »

Dear seaside,
One thing I run into when saving these bash files, is that rox shows them with svg icons
I had the same problem. You solution works, as does adding an ".sh" to the end of the script, i.e.

Code: Select all

mk_grid.sh
Must be some kind of "magic" irregularity. :)

With kind regards,
vovchik

seaside
Posts: 934
Joined: Thu 12 Apr 2007, 00:19

#19 Post by seaside »

gcmartin wrote:Excellent! This addresses a large range of potential uses.

Can a simple launch screen be set that offers both the current default and allow changes?

Thanks for this demonstration and its solution thus far.
gcmartin,

Here's an added Xdialog front end using Vovchik's example

Code: Select all

#!/bin/sh
# 100X70 default minor gridmaker


units=""

SEL=`Xdialog --stdout --separator " " --3inputsbox GridMaker 0 0  "Box Size" 10 "No of Columns" 100 "No of Rows" 70`

aSEL=($SEL)
box_size=${aSEL[0]}
square_h=${aSEL[1]}
square_v=${aSEL[2]}

svg_width=$((box_size*square_h))
svg_height=$((box_size*square_v))
maj_grid=$((box_size*5))


img_grid="<svg  width='$svg_width$units' height='$svg_height$units'>
  <defs>
    <pattern id='grid' width='$box_size' height='$box_size' patternUnits='userSpaceOnUse'>
      <rect fill='white' stroke-width='0.5' stroke='lightblue' x='0' y='0' width='$box_size' height='$box_size'/>
    </pattern>
    <pattern id='gridbig' width='$maj_grid' height='$maj_grid' patternUnits='userSpaceOnUse'>
      <rect fill='none' stroke-width='0.7' stroke='lightblue' x='0' y='0' width='$maj_grid' height='$maj_grid'/>
    </pattern>
  </defs>
  <rect fill='url(#grid)' stroke='lightblue' x='0' y='0' width='100%' height='100%'/>
  <rect fill='url(#gridbig)' stroke-width='3' stroke='lightblue' x='0' y='0' width='100%' height='100%'/>
</svg>"

echo "$img_grid" > /tmp/svg_grid2.svg

defaultimageviewer /tmp/svg_grid2.svg 
Cheers,
s
(In this case it doesn't show as an svg file - I guess the Xdialog code confused rox :D )

User avatar
rcrsn51
Posts: 13096
Joined: Tue 05 Sep 2006, 13:50
Location: Stratford, Ontario

#20 Post by rcrsn51 »

Which brings us back to my previous question.

I now have an SVG graphic that I can look at. But what useful things can I do with it as an SVG? Or must I first convert it into a bitmap, which was Don's original objective?

Post Reply