-
-
Save jamiew/278431 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style type="text/css"></style> | |
| <script type="text/javascript" src="jquery-1.3.2.min.js"></script> | |
| <script type='text/javascript'> | |
| //***************Global Vars******************* | |
| //********************************************* | |
| var wm_stroke_size = 10; | |
| var wm_color = '#FF00FF'; | |
| var wm_dripping = 0; // Not Implemented yet | |
| var wm_location = window.location; | |
| var wm_username = "TestUser"; | |
| var last_memory_data = new Date().getTime(); | |
| var testx = 0; | |
| var testy = 0; | |
| var timeSeconds = 0; | |
| 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>"; | |
| 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>"; // Always a copy of points in here. | |
| var wm_gml_data = points + "</stroke></drawing></tag></GML>" // FINAL GML DATA | |
| var letzte_zeit_verstrichen=0; | |
| var letzter_speicher_wert=0; | |
| var myCanvas; | |
| //*******TO-DO Generate Image From Canvas******** | |
| //*********************************************** | |
| //Problem: Only chrome privileged Code can take "real" screenshots. | |
| /* | |
| function generate_png(sourceCanvas) { | |
| // get base64 encoded png from Canvas | |
| var image = sourceCanvas.toDataURL("image/png"); | |
| alert(image); | |
| } | |
| */ | |
| //******GML UPLOAD CODE by Jamie Wilkinson******* | |
| //*********************************************** | |
| // 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() // | |
| { | |
| var wm_gml_data = points + "</stroke></drawing></tag></GML>"; // FINAL GML DAT - Put this here, cause it couldn't find the global one. hm. | |
| //alert("Your GML Data: " + wm_gml_data); | |
| form = document.getElementById('wm_upload'); //todo find it by id etc -done./tbx | |
| var m = document.createElement('input'); | |
| m.setAttribute('type', 'hidden'); | |
| m.setAttribute('name', 'gml'); | |
| m.setAttribute('value', wm_gml_data); | |
| 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); | |
| } | |
| */ | |
| //***********Create Canvas Environment************** | |
| // based on F. Parmadi's "dynamic canvas overlay...", | |
| // http://www.permadi.com , 2009 | |
| //************************************************** | |
| function createCanvasOverlay(color, canvasContainer) | |
| { | |
| //if (!myCanvas) // Without this if everytime you draw, it creates a new canvas. I removed this 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; // I actually don't get why this is before the brackets!? -TBX | |
| { | |
| 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'; | |
| } | |
| //**************Create Drawing and GML************ | |
| // based on F. Parmadi's "dynamic canvas overlay...", | |
| // http://www.permadi.com , 2009 | |
| //************************************************ | |
| function onMouseMoveOnMyCanvas(event) | |
| { | |
| if (myCanvas.drawing) | |
| { | |
| var mouseX=event.layerX; | |
| var mouseY=event.layerY; | |
| var context = myCanvas.getContext("2d"); | |
| testx = mouseX; | |
| testy = mouseY; | |
| if (myCanvas.pathBegun==false) | |
| { | |
| context.beginPath(); | |
| myCanvas.pathBegun=true; | |
| points = points + "</stroke><stroke><color>" + wm_color + "</color><stroke_size>" + wm_stroke_size + "</stroke_size><dripping>" + wm_dripping + "</dripping>"; // Adds the info of the upcoming line | |
| letzter_speicher_wert = new Date().getTime() | |
| } | |
| else | |
| { | |
| // wenn der zuletzt gespeicherte Wert älter als 100ms | |
| // ist, dann speichere einen neuen Wert in der Liste | |
| // points | |
| //********* Create GML Time and put it together w/ Mouse coordinates into variable********** | |
| timestamp = new Date().getTime(); | |
| var zeit_verstrichen = timestamp - letzter_speicher_wert; | |
| if(zeit_verstrichen > 100) { | |
| // gesamtzeit | |
| sum_zeit_verstrichen = zeit_verstrichen + letzte_zeit_verstrichen; | |
| // momentane punkte + timestamp an liste points | |
| // anhängen | |
| points = points + "<pt><x>" + mouseX + "</x><y>" + mouseY + "</y><time>" + (sum_zeit_verstrichen / 1000).toFixed(2) + "</time></pt>"; | |
| letzter_speicher_wert = timestamp; | |
| letzte_zeit_verstrichen = sum_zeit_verstrichen; | |
| } | |
| 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 the GML | |
| 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() | |
| { | |
| var wm_gml_data = points + "</stroke></drawing></tag></GML>"; | |
| alert(wm_gml_data); | |
| } | |
| function change_marker_size(size) | |
| { | |
| wm_stroke_size = size; | |
| // alert("width set to" + wm_stroke_size); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div style="position:fixed;z-index:1111;top:0px;right:0px;height:200px;width:150px;"> | |
| <div style="background-color:yellow;" id="control_panel"> | |
| <h1>Webmarker </br>Control Panel</h1> | |
| <style>.color-select { border:2px solid; border-color:#000000; margin:3px; float:left; width:25px; height:25px; }</style> | |
| <table> | |
| <tr> | |
| <td>Select Color To Start:</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <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:#FF00FF;"></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:#FFFF00;"></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:#000000;"></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:#FFFFFF;"></div> | |
| </a> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td>Size:</td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <input type="radio"name="wb_marker_size"onclick="change_marker_size('5');createCanvasOverlay('rgba(0,0,0,0)')">1 | |
| <input type="radio"name="wb_marker_size"onclick="change_marker_size('10');createCanvasOverlay('rgba(0,0,0,0)')" checked>2 | |
| <input type="radio"name="wb_marker_size"onclick="change_marker_size('17');createCanvasOverlay('rgba(0,0,0,0)')">3 | |
| <input type="radio"name="wb_marker_size"onclick="change_marker_size('30');createCanvasOverlay('rgba(0,0,0,0)')">4 | |
| </td> | |
| </tr> | |
| <tr> | |
| <td> | |
| <p><button onClick="testAusgabe()">Show GML</button></p> | |
| <p><button onClick="javascript:wm_delete_all();createCanvasOverlay('rgba(0,0,0,0)');">Delete</button> | |
| <form action="http://000000book.com/data" method="POST" id="wm_upload" onclick="appendGMLToForm();"> | |
| <input id="wm_publish" type="submit" value="Upload" /> | |
| <input type="hidden" name="application" value="webmarker" /> | |
| </form> | |
| </p> | |
| </td> | |
| </tr> | |
| </table> | |
| </div> | |
| <button id="wm_button">WM ON/OFF</button> <!-- Button Togles Control Panel ON/OFF, not working right now, lost it's code snippet. --> | |
| </div> | |
| <h1>Testpage</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 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 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 </p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment