[pmwiki-users] displaying coordinates of mouse click

Mark Lee mark.lee.phd at gmail.com
Wed Jun 12 12:03:06 CDT 2013


Petko,
Does the $HTMLHeadFmt go into config.php or skin.tmpl?

I haven't used forms before in pmwiki, and I haven't created the custom
markup yet, but I did try out something that got this function working. I
will need to do what you described to have a clean look and feel, but the
following hack shows that the basic function works. Here is what I
experimented with.

In my skin.tmpl file for the blix skin, I inserted the following at the top
of the file:
1. I had these already in the file...
<!--HTMLHeader-->
</head>

2. I changed it to this...
<!--HTMLHeader-->

<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,100,100);

ctx.fillStyle = 'rgba(255,100,100,.4)';
ctx.fillRect(document.pointform.form_x.value-20,document.pointform.form_y.value-20,40,40);
}
</script>
</head>

3. I already had this farther down the file...
<!--PageText-->
<!--markup:

4. I changed it to this...
<!--PageText-->

<form name="pointform" method="post">
You pointed on x = <input type="text" name="form_x" size="4" /> , and y =
<input type="text" name="form_y" size="4" />
</form>

<canvas id="myCanvas" onclick="point_it(event)" width="100" height="100"
style="border:1px solid #c3c3c3;
background-image:url('/local--files/test3:23/flemish2.jpg');">
Your browser does not support the canvas element.
</canvas>
<!--markup:

5. I uploaded this modified skin.tmpl file to my server.
6. When I click on the "canvas" image, it places a transparent colored
square at the cursor position and sets the form text to the x and y
coordinates of that were clicked. It works.

Too easy! I'm glad that I got this script working. Now to do the other
steps you suggested.
-Mark


On Fri, Jun 7, 2013 at 8:48 AM, Petko Yotov <5ko at 5ko.fr> wrote:

> Petko Yotov writes:
>
>> To insert stuff in the HTML <head>...</head> section, add the stuff as an
>> element to the $HTMLHeaderFmt, something like:
>>
>> $HTMHHeaderFmt['my-recipe'] = <<<EOF
>> <script type="text/javascript">
>> // your javascript here
>> </script>
>> EOF;
>>
>> -or-
>>
>> $HTMHHeaderFmt['my-recipe'] = '<script type="text/javascript"
>> src="$PubDirUrl/your-script.**js"></script>';
>>
>
> I now see I made a typo: it should be $HTMLHeaderFmt and NOT
> $HTMHHeaderFmt, see http://www.pmwiki.org/wiki/**PmWiki/LayoutVariables#**
> HTMLHeaderFmt<http://www.pmwiki.org/wiki/PmWiki/LayoutVariables#HTMLHeaderFmt>
>
> Sorry.
>
>
> 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/20130612/c10b7d2b/attachment.html>


More information about the pmwiki-users mailing list