Newbie questions about Pliant

Newbie questions about Pliant

Line drawing (graphics)

Message posted by marcus on 2004/06/09 17:57:54
I wonder if you have an of-the-shelf Pliant function which draws a line connecting
two pointss (xi,yi) (xf, yf) in an image.

I need this badly.
Message posted by hubert.tonneau on 2004/06/09 18:17:06
You can try something like this:


module "/pliant/language/unsafe.pli"
module "/pliant/graphic/draw/prototype.pli"
module "/pliant/graphic/vector/stroke.pli"
module "/pliant/math/curve.pli"
module "/pliant/math/transform.pli"
module "/pliant/math/point.pli"

method d line p q width color
  oarg_rw DrawPrototype d ; arg Point2 p q ; arg Float width ; arg Address color
  (var Array:Curve c) size := 1
  c:0 angle p:x p:y
  c:0 angle q:x q:y
  c:0 compute standard
  d stroke c width "" transform color

export '. line'
Message posted by marcus on 2004/06/09 18:59:59
I have created my image prototype via

var Link:ImagePixmap img :> new ImagePixmap
img setup (image_prototype minX-frameW maxY+frameH maxX+frameW minY-frameH canvasW canvasH color_gamut:"rgb") ""

But how do I create the DrawPrototype object? To pass it to the 'line' method.
Message posted by hubert.tonneau on 2004/06/09 19:08:49
Something like:

module "/pliant/graphic/draw/image.pli"

var Link:DrawImage draw :> new DrawImage
draw bind img ""
Message posted by marcus on 2004/06/10 18:54:32
I can't get 'line' to work... 

Here is my code


  var Link:ImagePixmap img :> new ImagePixmap
  img setup (image_prototype 0 200 24 -80 400 200 color_gamut:"rgb") ""
  var Link:DrawImage draw :> new DrawImage
  draw bind img ""
  var ColorRGB888 c := (color rgb 250 250 250)
  for (var Int y) 0 199
    for (var Int x) 0 399
      (img pixel x y) map ColorRGB888 := color rgb 0 0 0
  var Point2 p q
  p:x := 3; p:y := 0; q:x := 20; q:y := 30
  # I assume p and q must obey the system of coordinates (0, 200, 24, -80)
  # defined in the image prototype
  draw line p q 1.0 addressof:c
  draw img position 
    selected (var Float x0) (var Float y0) (var Float x1) (var Float y1)
    reload_page

I get only the black rectangle, with no line in it.

What am I doing wrong?
Message posted by hubert.tonneau on 2004/06/10 20:05:48
image_prototype 0 200 24 -80 400 200 color_gamut:"rgb"

The current code will not work if the left coordinate of the image is not smaller
than the right one, or the top coordinate of the image is not smaller than the
bottom one.
Message posted by marcus on 2004/06/10 21:05:15
I see.

In that geophysical Web application that I mentioned to you, there is a graph 
drawing tool which I am implementing for the geophysicists to analyse satellite
data. Currently, it only plots points. In the future, I would like to connect 
these points with lines (for a nicer-looking graph).

Since the visualization of the coordinates of the points in the graph are 
important for these space cientists, I tried to capitalize on the fact that the 
the method 'draw' makes the browser show the coordinates of the mouse cursor when
the cursor is over the image. Hence, I would avoid plotting the scale of the axes
(numbers) on the graph (something that I don't know how to do in Pliant).

If I had swapped those coordinates, to make the origin of the x,y
locate on the top-left corner of the image, and thus be able to use the 'line'
method, I wouldn't be able to view (on the browser window) the correct coordinates
of a given point on the graph. A high price to pay.

What do you suggest? 

Do you have plans of making the 'line' method work with swapped system of 
coordinates, soon? That would great. Specially for those interested in using the 
browser coordinates to view the the location of points in a image.

Message posted by marcus on 2004/06/18 14:28:33
That line-drawing function you have provided has proved quite handy.

However, for some reason, depending on the coordinates of the extreme points of 
the line, the function draws the line with a thicker width then the one I have
provided (I have set the width to 0.1, always).

You can see an example at

http://playground.scs.ryerson.ca:8081/ionstorm_test/drift/database/datavisual.html

Click on 1971/March/26 and you will see a graph plotted with a thicker line than
the one plotted when you click on 1071/March/25

Any idea why that happens?
Message posted by marcus on 2004/06/18 14:29:48
Sorry, instead of March, it is May.
Message posted by hubert.tonneau on 2004/06/18 14:52:45
If you want high quality drawing, you need antialiasing.
Try something like this:

module "/pliant/graphic/image/antialiasing.pli"

img setup (image_prototype 0 0 100 100 75*4 75*4 4 4 image_adust_extend color_gamut:"rgb") ""
...
var Link:ImageAntiaAliasing aa :> new ImageAntiAliasing
aa bind img 4 4
draw aa position
  ...

Here we use a 100x100 mm image, at 75 dpi, with 4 times oversampling.
Message posted by marcus on 2004/06/18 15:57:09
I have added what you suggest to the test program below. But now, Pliant complains
about the 'line' method.


module "/pliant/graphic/image/antialiasing.pli"
                                                                                                 
module "/pliant/language/unsafe.pli"
module "/pliant/graphic/draw/prototype.pli"
module "/pliant/graphic/draw/image.pli"
module "/pliant/graphic/vector/stroke.pli"
module "/pliant/math/curve.pli"
module "/pliant/math/transform.pli"
module "/pliant/math/point.pli"
                                                                                                 
module "/pliant/graphic/image/pixmap.pli"
module "/pliant/graphic/color/gamut.pli"
module "/pliant/graphic/color/color.pli"
module "/pliant/protocol/http/style/draw.pli"
                                                                                                 
method d line p q width color
  oarg_rw DrawPrototype d ; arg Point2 p q ; arg Float width ; arg Address color
  (var Array:Curve c) size := 1
  c:0 angle p:x p:y
  c:0 angle q:x q:y
  c:0 compute standard
  d stroke c width "" transform color

var Link:ImagePixmap img :> new ImagePixmap
img setup (image_prototype 0 0 100 100 75*4 75*4 4 4 image_adjust_extend color_gamut:"rgb") ""
var Link:ImageAntiAliasing draw :> new ImageAntiAliasing
draw bind img 4 4
var ColorRGB888 c := (color rgb 250 250 250)
var Point2 p q
p:x := 3; p:y := 0; q:x := 20; q:y := 30
draw line p q 1.0 addressof:c
draw img position
  selected (var Float x0) (var Float y0) (var Float x1) (var Float y1)
  reload_page
Message posted by hubert.tonneau on 2004/06/18 16:08:15
Don't change the draw variable.

Just change the 'img setup' line,

and
  draw img positon
with
  var Link:ImageAntiaAliasing aa :> new ImageAntiAliasing
  aa bind img 4 4
  draw aa position