[pmwiki-users] displaying coordinates of mouse click

Mark Lee mark.lee.phd at gmail.com
Tue Jun 18 10:17:46 CDT 2013


I got the javascript and form working for the map application using the map
of my garden. You can see how it works on this test page:
http://ediblelandscape.org/pmwiki.php?n=Test.MapPointedAt

I pasted the code below in local/config.php. I have a custom markup called
(:canvas:) that I can put on any page.

I didn't use pmwiki forms because I don't understand how to. Maybe someone
could coach me. One thing I would like to do is this:

I am hoping to generate a list of pages corresponding to the area clicked
on the map.
1. Position the cursor over a map location, then capture the x,y
coordinates of the mouse click location (it is working!)
2. Using markup, pass the form values form_x.value and form_y.value or the
variable pos_x and pos_y to the standard Pagelist pmwiki markup. (need help)


#------javascript for canvas-------
$HTMLHeaderFmt[] = '<script language="JavaScript">
function point_it(event){
pos_x =
event.offsetX?(event.offsetX):event.pageX-document.getElementById("myCanvas").offsetLeft;
pos_y =
event.offsetY?(event.offsetY):event.pageY-document.getElementById("myCanvas").offsetTop;

document.pointform.form_x.value = pos_x;
document.pointform.form_y.value = pos_y;

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

ctx.strokeStyle="#FF0000";
ctx.clearRect(0,0,672,233);
ctx.fillStyle = "rgba(255,100,100,0.4)";
ctx.fillRect(document.pointform.form_x.value-10,document.pointform.form_y.value-10,20,20);
}
</script>';

Markup('canvas', 'directives',
  '/\\(:canvas:\\)/e',
  'Canvas($pagename)');

function Canvas($pagename)
{
$out="<form name=\"pointform\" method=\"post\">";
$out=$out."You pointed on x = <input type=\"text\" name=\"form_x\"
size=\"4\" /> , and y = <input type=\"text\" name=\"form_y\" size=\"4\" />";
$out=$out."</form>";
$out=$out."<canvas id=\"myCanvas\" onclick=\"point_it(event)\"
width=\"672\" height=\"233\" style=\"border:1px solid #c3c3c3;
background-image:url('
http://ediblelandscape.org/images/other/PaintDotNetMap05.jpg');\">";
$out=$out."</canvas>";
return Keep($out);
}
#---------------------------------


On Thu, Jun 13, 2013 at 8:55 AM, Petko Yotov <5ko at 5ko.fr> wrote:

> Mark Lee writes:
>
>> Does the $HTMLHeadFmt go into config.php or skin.tmpl?
>>
>
> It goes into local/config.php to enable it on the whole wiki, or into
> local/YourGroup.php or into local/YourGroup.YourPage.php to enable it on a
> single group or page. See
>
>    http://www.pmwiki.org/wiki/**PmWiki/LocalCustomizations<http://www.pmwiki.org/wiki/PmWiki/LocalCustomizations>
>    http://www.pmwiki.org/wiki/**PmWiki/GroupCustomizations<http://www.pmwiki.org/wiki/PmWiki/GroupCustomizations>
>
> What you add into this variable will be automatically placed in the skin
> template at the place of the directive <!--HTMLHeader--> so you don't need
> to modify the skin. This is good if you use a skin made by someone else,
> you can install a new version without having to re-edit the skin template
> to add your stuff.
>
> About the forms, see http://www.pmwiki.org/wiki/**PmWiki/Forms<http://www.pmwiki.org/wiki/PmWiki/Forms>.
>
>
> Petko
>
> ______________________________**_________________
> pmwiki-users mailing list
> pmwiki-users at pmichaud.com
> http://www.pmichaud.com/**mailman/listinfo/pmwiki-users<http://www.pmichaud.com/mailman/listinfo/pmwiki-users>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.pmichaud.com/pipermail/pmwiki-users/attachments/20130618/113660be/attachment.html>


More information about the pmwiki-users mailing list