jamiew · January 15, 2010 08:35
diff --git a/webmarker-0.4.html b/webmarker-0.4.html
 <html><head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

 <style type="text/css"></style>
 <script type="text/javascript">
 // Global Vars
 var last_memory_data = new Date().getTime(); // letzter speicher wert
 var testx = 0;
 var testy = 0;
 var timeSeconds = 0;
 var wm_stroke_size = 10;
 var wm_color = '#FF00FF'; // Webmarker Color
 var wm_dripping = 0;
 var wm_location = window.location;
 var wm_username = "TestUser";
 var points = "<GML spec='0.1b'><tag><header><client><name>Webmarker.me</name><version>0.4b</version><username>" + wm_username + "</username><keywords>All your Interwebs are belong to Us</keywords></client></header><environment></environment><drawing><location>" + wm_location + "</location><stroke>"; // String for post, to be send to 000000book.com
 var points_reset_backup = "<GML spec='0.1b'><tag><header><client><name>Webmarker.me</name><version>0.4b</version><username>" + wm_username + "</username><keywords>All your Interwebs are belong to Us</keywords></client></header><environment></environment><drawing><location>" + wm_location + "</location><stroke>";

 // add the GML data to the form in the upload page (requires pageload)
 // need to add GET to blackbook in order to ajaxify
 function appendGMLToForm()
 {
 	form = document.getElementsByTagName('form')[0]; //todo find it by id etc
 	var m = document.createElement('input'); 
 	m.setAttribute('type', 'hidden'); 
 	m.setAttribute('name', 'gml'); 
 	m.setAttribute('value', points); 
 	form.appendChild(m);
 	
 	// we return false from the onclick() so we can call here
 	form.submit();
 }

 // after GET upload is added to 000book we can send things ajax-styles by appending a <script>
 function blackbookUpload()
 {
 	var s=document.createElement('script');
 	s.setAttribute('src','http://000000book.com/data/upload?application=webmarker&gml='+escape(points));
 	document.getElementsByTagName('body')[0].appendChild(s);
 }

 /*
 function sendData()
 {
  $.post('index.php','data='+points);
 }
 */

 // Draw Code is a mod of F. Parmadi's "dynamic canvas above html page" http://www.permadi.com , 2009
 var myCanvas;

 function createCanvasOverlay(color, canvasContainer) // don't look at this function - boring.
 {
    //if (!myCanvas) // Without this if everytime you draw, it creates a new canvas. Necessary to simply change colors.
    //{
      if (!canvasContainer)
      {
        canvasContainer = document.createElement('div'); 
        document.body.appendChild(canvasContainer);
        canvasContainer.style.position="absolute";
        canvasContainer.style.left="0px";
        canvasContainer.style.top="0px";
        canvasContainer.style.width="100%";
        canvasContainer.style.height="100%";
        canvasContainer.style.zIndex="999";
        superContainer=document.body;
      }
      else
        superContainer=canvasContainer;
      // Part of block below is inspired by code from Google excanvas.js
      {
      myCanvas = document.createElement('canvas');    
      myCanvas.style.width = superContainer.scrollWidth+"px";
      myCanvas.style.height = superContainer.scrollHeight+"px";
      myCanvas.width=superContainer.scrollWidth; // otherwise the canvas will be streethed to fit the container
      myCanvas.height=superContainer.scrollHeight;    
      //surfaceElement.style.width=window.innerWidth; 
      myCanvas.style.overflow = 'visible';
      myCanvas.style.position = 'absolute';
      }

      var context=myCanvas.getContext('2d');
      context.fillStyle = color;
      context.fillRect(0,0, myCanvas.width, myCanvas.height);
      canvasContainer.appendChild(myCanvas);

      context.strokeStyle=wm_color;
      context.lineWidth=wm_stroke_size;    
      myCanvas.parentNode.addEventListener('mousemove', onMouseMoveOnMyCanvas, false); 
      myCanvas.parentNode.addEventListener('mousedown', onMouseClickOnMyCanvas, false);
      myCanvas.parentNode.addEventListener('mouseup', onMouseClickOnMyCanvas, false);  // TBX added this
      //alert(myCanvas);
    //}
    //else
      //myCanvas.parentNode.style.visibility='visible';    
 }

 function onMouseMoveOnMyCanvas(event)
  {
    if (myCanvas.drawing) // Wenn "Zeichnen" aktiviert ist
    {  
      var mouseX=event.layerX;  
      var mouseY=event.layerY;
      var context = myCanvas.getContext("2d");
 	  testx = mouseX;
 	  testy = mouseY;

        // Wenn die Linie noch nicht gezeichnet wird, dann aktiviere Linie zeichnen
        if (myCanvas.pathBegun==false) 
        {
 			context.beginPath();
 			myCanvas.pathBegun=true; // aktiviere sie
 			points = points + "</stroke><stroke><color>" + wm_color + "</color><stroke_size>" + wm_stroke_size + "</stroke_size><dripping>" + wm_dripping + "</dripping>";  // Tag Seperator for <stroke></stroke>
 		}
 		else // Wenn Linie aktiviert ist, zeichne Linie
 		{
 			timestamp = new Date().getTime(); // aktuellen timestamp erstellen
 			if((timestamp - last_memory_data) > 100) { // if last saved value is older than 100ms, store new value in "points"
 				// momentane punkte + timestamp an liste points 
 				// anhängen
 				points = points + "<pt><x>" + mouseX + "</x><y>" + mouseY + "</y><time>" + timestamp + "</time></pt>";
 				last_memory_data = timestamp;
 			}	
 			context.lineTo(mouseX, mouseY);
 			context.stroke();
 		}
 	}
 }

 function onMouseClickOnMyCanvas(event)
 {
    myCanvas.drawing=!myCanvas.drawing;
    if (myCanvas.drawing) // reset the path when starting over
 	{// if drawing is active
      myCanvas.pathBegun=false; 
    }
 }
 /* 
 function hideCanvas() // Hide last drawn Canvas. Kind of like "undo", but only visually, doesn't remove info in array
 {
    if (myCanvas)
    {
      myCanvas.parentNode.style.visibility='hidden';
    }
 }
 */

 function wm_delete_all() // Deletes all my canvas + empty points variable
 {
    if (myCanvas)
    {
      var all_canvases=document.getElementsByTagName('canvas');//[0].style.visibility='hidden';
 	  for (var i = 0; i < all_canvases.length; i++) {all_canvases[i].width=all_canvases[i].width;}
 	  points = points_reset_backup; // Empty the variable that gets posted
 	  //alert(points);
    }
 }

 function wm_change_color (new_color) 
 {
 	//alert('Color SET to '+ new_color);
 	wm_color = new_color;
 }

 function testAusgabe()
 {
    alert(points + "</drawing></tag></GML>");   
 }


 function change_marker_size(size) 
 {
 	wm_stroke_size = size;
 	alert("width set to" + wm_stroke_size);
 }
 </script>


 </head><div FirebugVersion="1.4.5" style="display: none;" id="_firebugConsole"></div><body>
 <!-- Dynamic Version, for later
 <script type='text/javascript'>
 // Control Panel
 control_panelCode = '<div><h1>Webmarker</br> Control Panel</h1><p><a href="javascript:createCanvasOverlay(\'rgba(0,0,0,0)\');">START</a></p><p><a href="javascript:hideCanvas();">DONE</a></p></div>';

 var control_panel;
      control_panel = document.createElement('div');
      control_panel.innerHTML = control_panelCode;  //control_panelCode is a string of HTML
      control_panel.setAttribute("style","position:absolute;z-index:1000;top:5px;right:5px;background:yellow");
      document.getElementsByTagName("body")[0].appendChild(control_panel);
 // div popup stuff end
 </script>
 -->
 <!-- result of Dynamic Version, but easier to code like this -->
 <div id="control_panel" style="background: yellow none repeat scroll 0% 0%; position: absolute; z-index: 1000; top: 5px; right: 5px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
 <div>
 <h1>Webmarker<br>Control Panel</h1>
 <!--<p><a href="javascript:createCanvasOverlay('rgba(0,0,0,0)');">START</a></p>-->
 <!--<p><a href="javascript:hideCanvas();">Undo (Hide last)</a></p>-->


 <style>
 .color-select { border:2px solid; border-color:#000000; margin:3px; float:left; width:25px; height:25px; }
 </style>
 <table>
 	<tbody><tr>
 		<td>
 			Select Color To Start:
 		</td>
 	</tr>
 	<tr>
 		<td> <!-- TBX's Color-Picker -->
 		<a href="javascript:wm_change_color('#FF00FF');createCanvasOverlay('rgba(0,0,0,0)')" alt="" click="" to="" select="" this="" color=""><div class="color-select" id="webmarker_pink" style="background-color: rgb(255, 0, 255);"></div></a>
 		<a href="javascript:wm_change_color('#FFFF00');createCanvasOverlay('rgba(0,0,0,0)')" alt="" click="" to="" select="" this="" color=""><div class="color-select" id="webmarker_yellow" style="background-color: rgb(255, 255, 0);"></div></a>
 		<a href="javascript:wm_change_color('#000000');createCanvasOverlay('rgba(0,0,0,0)')" alt="" click="" to="" select="" this="" color=""><div class="color-select" id="webmarker_black" style="background-color: rgb(0, 0, 0);"></div></a>
 		<a href="javascript:wm_change_color('#FFFFFF');createCanvasOverlay('rgba(0,0,0,0)')" alt="" click="" to="" select="" this="" color=""><div class="color-select" id="webmarker_white" style="background-color: rgb(255, 255, 255);"></div></a>
 		</td>
 	</tr>	
 	<tr>
 		<td>
 			Size:
 		</td>
 	</tr>
 	<tr>
 		<td> <!-- TBX's Size-Picker -->
 			<input name="wb_marker_size" onclick="change_marker_size('5');createCanvasOverlay('rgba(0,0,0,0)')" type="radio">1
 			<input name="wb_marker_size" onclick="change_marker_size('10');createCanvasOverlay('rgba(0,0,0,0)')" checked="checked" type="radio">2
 			<input name="wb_marker_size" onclick="change_marker_size('17');createCanvasOverlay('rgba(0,0,0,0)')" type="radio">3
 			<input name="wb_marker_size" onclick="change_marker_size('30');createCanvasOverlay('rgba(0,0,0,0)')" type="radio">4
 		</td>
 	</tr>
 	<tr>
 		<td> 
 			<p><button onclick="testAusgabe()">Show Array</button></p>
 			<form action="http://000000book.com/data" method="POST" id="upload" onclick="appendGMLToForm();">
 				<p><input type="submit" value="Publish" />
 					<input type="hidden" name="application" value="webmarker" />
 			</form>
 				
 				<button onclick="javascript:wm_delete_all();">Delete</button></p>
 		</td>
 	</tr>
 </tbody></table>

 </div>
 </div>

 <h1>Testpage, to activate Webmarker select color</h1>
 <p>ajfkf fwafe fjfowejfwefwj weajp g jaopfjo ff e wpog gojpiaje fp
 ipofejpioajewfj jpajjfpo jo fopjwea fpoewj ajfkf fwafe fjfowejfwefwj
 weajp g jaopfjo ff e wpog gojpiaje fp ipofejpioajewfj jpajjfpo jo
 fopjwea fpoewj ajfkf fwafe fjfowejfwefwj weajp g jaopfjo ff e wpog
 gojpiaje fp ipofejpioajewfj jpajjfpo jo fopjwea fpoewj ajfkf fwafe
 fjfowejfwefwj weajp g jaopfjo ff e wpog gojpiaje fp ipofejpioajewfj
 jpajjfpo jo fopjwea fpoewj ajfkf fwafe fjfowejfwefwj weajp g jaopfjo ff
 e wpog gojpiaje fp ipofejpioajewfj jpajjfpo jo fopjwea fpoewj ajfkf
 fwafe fjfowejfwefwj weajp g jaopfjo ff e wpog gojpiaje fp
 ipofejpioajewfj jpajjfpo jo fopjwea fpoewj ajfkf fwafe fjfowejfwefwj
 weajp g jaopfjo ff e wpog gojpiaje fp ipofejpioajewfj jpajjfpo jo
 fopjwea fpoewj ajfkf fwafe fjfowejfwefwj weajp g jaopfjo ff e wpog
 gojpiaje fp ipofejpioajewfj jpajjfpo jo fopjwea fpoewj ajfkf fwafe
 fjfowejfwefwj weajp </p>

 </body></html>
	<html><head>
	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

	<style type="text/css"></style>
	<script type="text/javascript">
	// Global Vars
	var last_memory_data = new Date().getTime(); // letzter speicher wert
	var testx = 0;
	var testy = 0;
	var timeSeconds = 0;
	var wm_stroke_size = 10;
	var wm_color = '#FF00FF'; // Webmarker Color
	var wm_dripping = 0;
	var wm_location = window.location;
	var wm_username = "TestUser";
	var points = "<GML spec='0.1b'><tag><header><client><name>Webmarker.me</name><version>0.4b</version><username>" + wm_username + "</username><keywords>All your Interwebs are belong to Us</keywords></client></header><environment></environment><drawing><location>" + wm_location + "</location><stroke>"; // String for post, to be send to 000000book.com
	var points_reset_backup = "<GML spec='0.1b'><tag><header><client><name>Webmarker.me</name><version>0.4b</version><username>" + wm_username + "</username><keywords>All your Interwebs are belong to Us</keywords></client></header><environment></environment><drawing><location>" + wm_location + "</location><stroke>";

	// add the GML data to the form in the upload page (requires pageload)
	// need to add GET to blackbook in order to ajaxify
	function appendGMLToForm()
	{
	form = document.getElementsByTagName('form')[0]; //todo find it by id etc
	var m = document.createElement('input');
	m.setAttribute('type', 'hidden');
	m.setAttribute('name', 'gml');
	m.setAttribute('value', points);
	form.appendChild(m);

	// we return false from the onclick() so we can call here
	form.submit();
	}

	// after GET upload is added to 000book we can send things ajax-styles by appending a <script>
	function blackbookUpload()
	{
	var s=document.createElement('script');
	s.setAttribute('src','http://000000book.com/data/upload?application=webmarker&gml='+escape(points));
	document.getElementsByTagName('body')[0].appendChild(s);
	}

	/*
	function sendData()
	{
	$.post('index.php','data='+points);
	}
	*/

	// Draw Code is a mod of F. Parmadi's "dynamic canvas above html page" http://www.permadi.com , 2009
	var myCanvas;

	function createCanvasOverlay(color, canvasContainer) // don't look at this function - boring.
	{
	//if (!myCanvas) // Without this if everytime you draw, it creates a new canvas. Necessary to simply change colors.
	//{
	if (!canvasContainer)
	{
	canvasContainer = document.createElement('div');
	document.body.appendChild(canvasContainer);
	canvasContainer.style.position="absolute";
	canvasContainer.style.left="0px";
	canvasContainer.style.top="0px";
	canvasContainer.style.width="100%";
	canvasContainer.style.height="100%";
	canvasContainer.style.zIndex="999";
	superContainer=document.body;
	}
	else
	superContainer=canvasContainer;
	// Part of block below is inspired by code from Google excanvas.js
	{
	myCanvas = document.createElement('canvas');
	myCanvas.style.width = superContainer.scrollWidth+"px";
	myCanvas.style.height = superContainer.scrollHeight+"px";
	myCanvas.width=superContainer.scrollWidth; // otherwise the canvas will be streethed to fit the container
	myCanvas.height=superContainer.scrollHeight;
	//surfaceElement.style.width=window.innerWidth;
	myCanvas.style.overflow = 'visible';
	myCanvas.style.position = 'absolute';
	}

	var context=myCanvas.getContext('2d');
	context.fillStyle = color;
	context.fillRect(0,0, myCanvas.width, myCanvas.height);
	canvasContainer.appendChild(myCanvas);

	context.strokeStyle=wm_color;
	context.lineWidth=wm_stroke_size;
	myCanvas.parentNode.addEventListener('mousemove', onMouseMoveOnMyCanvas, false);
	myCanvas.parentNode.addEventListener('mousedown', onMouseClickOnMyCanvas, false);
	myCanvas.parentNode.addEventListener('mouseup', onMouseClickOnMyCanvas, false); // TBX added this
	//alert(myCanvas);
	//}
	//else
	//myCanvas.parentNode.style.visibility='visible';
	}

	function onMouseMoveOnMyCanvas(event)
	{
	if (myCanvas.drawing) // Wenn "Zeichnen" aktiviert ist
	{
	var mouseX=event.layerX;
	var mouseY=event.layerY;
	var context = myCanvas.getContext("2d");
	testx = mouseX;
	testy = mouseY;

	// Wenn die Linie noch nicht gezeichnet wird, dann aktiviere Linie zeichnen
	if (myCanvas.pathBegun==false)
	{
	context.beginPath();
	myCanvas.pathBegun=true; // aktiviere sie
	points = points + "</stroke><stroke><color>" + wm_color + "</color><stroke_size>" + wm_stroke_size + "</stroke_size><dripping>" + wm_dripping + "</dripping>"; // Tag Seperator for <stroke></stroke>
	}
	else // Wenn Linie aktiviert ist, zeichne Linie
	{
	timestamp = new Date().getTime(); // aktuellen timestamp erstellen
	if((timestamp - last_memory_data) > 100) { // if last saved value is older than 100ms, store new value in "points"
	// momentane punkte + timestamp an liste points
	// anhängen
	points = points + "<pt><x>" + mouseX + "</x><y>" + mouseY + "</y><time>" + timestamp + "</time></pt>";
	last_memory_data = timestamp;
	}
	context.lineTo(mouseX, mouseY);
	context.stroke();
	}
	}
	}

	function onMouseClickOnMyCanvas(event)
	{
	myCanvas.drawing=!myCanvas.drawing;
	if (myCanvas.drawing) // reset the path when starting over
	{// if drawing is active
	myCanvas.pathBegun=false;
	}
	}
	/*
	function hideCanvas() // Hide last drawn Canvas. Kind of like "undo", but only visually, doesn't remove info in array
	{
	if (myCanvas)
	{
	myCanvas.parentNode.style.visibility='hidden';
	}
	}
	*/

	function wm_delete_all() // Deletes all my canvas + empty points variable
	{
	if (myCanvas)
	{
	var all_canvases=document.getElementsByTagName('canvas');//[0].style.visibility='hidden';
	for (var i = 0; i < all_canvases.length; i++) {all_canvases[i].width=all_canvases[i].width;}
	points = points_reset_backup; // Empty the variable that gets posted
	//alert(points);
	}
	}

	function wm_change_color (new_color)
	{
	//alert('Color SET to '+ new_color);
	wm_color = new_color;
	}

	function testAusgabe()
	{
	alert(points + "</drawing></tag></GML>");
	}


	function change_marker_size(size)
	{
	wm_stroke_size = size;
	alert("width set to" + wm_stroke_size);
	}
	</script>


	</head><div FirebugVersion="1.4.5" style="display: none;" id="_firebugConsole"></div><body>
	<!-- Dynamic Version, for later
	<script type='text/javascript'>
	// Control Panel
	control_panelCode = '<div><h1>Webmarker</br> Control Panel</h1><p><a href="javascript:createCanvasOverlay(\'rgba(0,0,0,0)\');">START</a></p><p><a href="javascript:hideCanvas();">DONE</a></p></div>';

	var control_panel;
	control_panel = document.createElement('div');
	control_panel.innerHTML = control_panelCode; //control_panelCode is a string of HTML
	control_panel.setAttribute("style","position:absolute;z-index:1000;top:5px;right:5px;background:yellow");
	document.getElementsByTagName("body")[0].appendChild(control_panel);
	// div popup stuff end
	</script>
	-->
	<!-- result of Dynamic Version, but easier to code like this -->
	<div id="control_panel" style="background: yellow none repeat scroll 0% 0%; position: absolute; z-index: 1000; top: 5px; right: 5px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
	<div>
	<h1>Webmarker<br>Control Panel</h1>
	<!--<p><a href="javascript:createCanvasOverlay('rgba(0,0,0,0)');">START</a></p>-->
	<!--<p><a href="javascript:hideCanvas();">Undo (Hide last)</a></p>-->


	<style>
	.color-select { border:2px solid; border-color:#000000; margin:3px; float:left; width:25px; height:25px; }
	</style>
	<table>
	<tbody><tr>
	<td>
	Select Color To Start:
	</td>
	</tr>
	<tr>
	<td> <!-- TBX's Color-Picker -->
	<a href="javascript:wm_change_color('#FF00FF');createCanvasOverlay('rgba(0,0,0,0)')" alt="" click="" to="" select="" this="" color=""><div class="color-select" id="webmarker_pink" style="background-color: rgb(255, 0, 255);"></div></a>
	<a href="javascript:wm_change_color('#FFFF00');createCanvasOverlay('rgba(0,0,0,0)')" alt="" click="" to="" select="" this="" color=""><div class="color-select" id="webmarker_yellow" style="background-color: rgb(255, 255, 0);"></div></a>
	<a href="javascript:wm_change_color('#000000');createCanvasOverlay('rgba(0,0,0,0)')" alt="" click="" to="" select="" this="" color=""><div class="color-select" id="webmarker_black" style="background-color: rgb(0, 0, 0);"></div></a>
	<a href="javascript:wm_change_color('#FFFFFF');createCanvasOverlay('rgba(0,0,0,0)')" alt="" click="" to="" select="" this="" color=""><div class="color-select" id="webmarker_white" style="background-color: rgb(255, 255, 255);"></div></a>
	</td>
	</tr>
	<tr>
	<td>
	Size:
	</td>
	</tr>
	<tr>
	<td> <!-- TBX's Size-Picker -->
	<input name="wb_marker_size" onclick="change_marker_size('5');createCanvasOverlay('rgba(0,0,0,0)')" type="radio">1
	<input name="wb_marker_size" onclick="change_marker_size('10');createCanvasOverlay('rgba(0,0,0,0)')" checked="checked" type="radio">2
	<input name="wb_marker_size" onclick="change_marker_size('17');createCanvasOverlay('rgba(0,0,0,0)')" type="radio">3
	<input name="wb_marker_size" onclick="change_marker_size('30');createCanvasOverlay('rgba(0,0,0,0)')" type="radio">4
	</td>
	</tr>
	<tr>
	<td>
	<p><button onclick="testAusgabe()">Show Array</button></p>
	<form action="http://000000book.com/data" method="POST" id="upload" onclick="appendGMLToForm();">
	<p><input type="submit" value="Publish" />
	<input type="hidden" name="application" value="webmarker" />
	</form>

	<button onclick="javascript:wm_delete_all();">Delete</button></p>
	</td>
	</tr>
	</tbody></table>

	</div>
	</div>

	<h1>Testpage, to activate Webmarker select color</h1>
	<p>ajfkf fwafe fjfowejfwefwj weajp g jaopfjo ff e wpog gojpiaje fp
	ipofejpioajewfj jpajjfpo jo fopjwea fpoewj ajfkf fwafe fjfowejfwefwj
	weajp g jaopfjo ff e wpog gojpiaje fp ipofejpioajewfj jpajjfpo jo
	fopjwea fpoewj ajfkf fwafe fjfowejfwefwj weajp g jaopfjo ff e wpog
	gojpiaje fp ipofejpioajewfj jpajjfpo jo fopjwea fpoewj ajfkf fwafe
	fjfowejfwefwj weajp g jaopfjo ff e wpog gojpiaje fp ipofejpioajewfj
	jpajjfpo jo fopjwea fpoewj ajfkf fwafe fjfowejfwefwj weajp g jaopfjo ff
	e wpog gojpiaje fp ipofejpioajewfj jpajjfpo jo fopjwea fpoewj ajfkf
	fwafe fjfowejfwefwj weajp g jaopfjo ff e wpog gojpiaje fp
	ipofejpioajewfj jpajjfpo jo fopjwea fpoewj ajfkf fwafe fjfowejfwefwj
	weajp g jaopfjo ff e wpog gojpiaje fp ipofejpioajewfj jpajjfpo jo
	fopjwea fpoewj ajfkf fwafe fjfowejfwefwj weajp g jaopfjo ff e wpog
	gojpiaje fp ipofejpioajewfj jpajjfpo jo fopjwea fpoewj ajfkf fwafe
	fjfowejfwefwj weajp </p>

	</body></html>