http://snippets.dzone.com/posts Tue, 20 May 2008 13:50:01 GMT DZone Snippets: ecmascript code http://snippets.dzone.com/posts/show/5408 source: <a href="http://www.it.rit.edu/~jxs/svg/tutorials/scripting.html">Using Internal & External Scripts,</a> [rit.edu] <br /><code> <br /><script type="text/ecmascript" xlink:href="scripts/changeCircle.js"/> <br /></code> Sun, 20 Apr 2008 19:21:59 GMT http://snippets.dzone.com/posts/show/5408 jrobertson (James Robertson) http://snippets.dzone.com/posts/show/5407 This ECMAScript extracts the filename from a URL. eg. the filename 'index4.svg' would be extracted from the document.URL with the value 'http://rorbuilder.info/r/whiteboardqueue/index4.svg'. <br /><code> <br />var regexp = /(\w|[-.])+$/ <br />str = document.URL <br />a = regexp.exec(str) <br />alert(a[0]) <br /></code> <br />Reference: <a href="http://www.webreference.com/js/column5/methods.html">Regular Expressions: Methods - Doc JavaScript</a> [webreference.com] Sun, 20 Apr 2008 15:24:54 GMT http://snippets.dzone.com/posts/show/5407 jrobertson (James Robertson) http://snippets.dzone.com/posts/show/5335 This ECMAScript implements an undo feature for the SVG whiteboard. When the user presses CTRL+Z the last shape in the message_buffer variable is removed. <br /> <br /><code> <br /> function undoLast() { <br /> ipos = getLastMethodPos(message_buffer,-1) <br /> if (ipos > 0) <br /> message_buffer = message_buffer.substring(0, ipos) <br /> else <br /> message_buffer = '' <br /> } <br /> <br /> function getLastMethodPos(message, pos) { <br /> i = message.indexOf('<method', pos+1) <br /> if (i >= 0) <br /> result = getLastMethodPos(message, i) <br /> else <br /> result = pos <br /> return result; <br /> } <br /></code> <br /> <br />Here's an example of the messages (containing shapes) stored in the message_buffer <br /><code> <br />"<method name='create'><params><param var='type'>shape</param><param var='body'> <br />polyline%20x%3D%27524%27%20y%3D%27198%27%20fill%3D%27none%27%20stroke%3D%27red%27%20id%3D <br />%27348553%27%20stroke-width%3D%272%27%20points%3D%27524%2C198%20523%2C198%20522%2C198%20521%2C198%20 <br />513%2C198%20511%2C198%20503%2C198%20495%2C200%20493%2C200%20485%2C204%20483%2C205%20475%2C207%20474% <br />2C208%20470%2C212%20466%2C216%20465%2C217%20464%2C219%20463%2C220%20463%2C222%20463%2C223%20463%2C22 <br />5%20463%2C226%20463%2C228%20464%2C230%20465%2C231%20466%2C233%20467%2C234%20471%2C238%20472%2C238%20 <br />478%2C242%20484%2C246%20485%2C247%20488%2C247%20489%2C248%20491%2C248%20493%2C249%20496%2C249%20497% <br />2C249%20505%2C249%20515%2C249%20521%2C247%20531%2C245%20533%2C245%20539%2C243%20547%2C243%20548%2C24 <br />3%20550%2C242%20555%2C237%20556%2C237%20557%2C235%20558%2C234%20558%2C233%20559%2C231%20559%2C230%20 <br />560%2C228%20560%2C226%20560%2C222%20559%2C221%20559%2C220%20559%2C219%20559%2C217%20559%2C216%20558% <br />2C215%20558%2C214%20556%2C208%20555%2C206%20555%2C205%20553%2C199%20549%2C191%20547%2C185%20546%2C18 <br />4%20544%2C176%20540%2C170%20539%2C168%20535%2C162%20534%2C161%20528%2C155%20528%2C154%20524%2C148%20 <br />518%2C144%20517%2C143%20511%2C139%20509%2C138%20501%2C134%20499%2C133%20491%2C129%20489%2C129%20479% <br />2C129%20469%2C129%20467%2C129%20459%2C129%20457%2C129%20454%2C129%20452%2C129%20446%2C131%20438%2C13 <br />1%20437%2C132%20435%2C132%20435%2C133%20434%2C133%20434%2C134%20433%2C134%20433%2C135%27%23%3A <br /></param><param var='sender'>34855</param></params></method><method name='create'><params><param <br />var='type'>shape</param><param var='body'>polyline%20x%3D%27457%27%20y%3D%27175%27%20fill%3D%27none <br />%27%20stroke%3D%27red%27%20id%3D <br />%27348554%27%20stroke-width%3D%272%27%20points%3D%27457%2C175%20456%2C175%20455%2C176%20454%2C176%20 <br />453%2C177%20452%2C177%20451%2C177%20449%2C178%20448%2C179%20442%2C181%20440%2C183%20438%2C184%20438% <br />2C185%20437%2C186%20436%2C187%20435%2C189%20435%2C191%20434%2C193%20434%2C194%20433%2C195%20433%2C19 <br />6%20431%2C200%20431%2C201%20431%2C203%20431%2C205%20431%2C206%20431%2C207%20431%2C208%20431%2C209%20 <br />431%2C210%20431%2C211%20431%2C212%20431%2C213%20431%2C214%20431%2C215%20431%2C216%20431%2C217%20432% <br />2C223%20432%2C224%20432%2C225%20432%2C226%20433%2C226%20433%2C227%20433%2C228%20433%2C229%20434%2C22 <br />9%20434%2C230%20435%2C231%20435%2C233%20435%2C234%20436%2C235%20437%2C236%20437%2C237%20438%2C237%20 <br />438%2C238%20438%2C239%20438%2C240%20439%2C240%20439%2C241%20443%2C245%20444%2C246%20444%2C247%20445% <br />2C247%20446%2C248%20447%2C248%20448%2C248%20448%2C249%20449%2C249%20450%2C250%20451%2C251%20452%2C25 <br />2%20454%2C253%20455%2C253%20461%2C255%20462%2C255%20464%2C256%20466%2C256%20467%2C257%20469%2C257%20 <br />469%2C258%20471%2C259%20472%2C259%20474%2C260%20475%2C260%20477%2C261%20478%2C261%20480%2C262%20481% <br />2C262%20481%2C263%20482%2C263%20483%2C263%20484%2C263%20485%2C263%20486%2C263%20489%2C263%20491%2C26 <br />3%20492%2C263%20495%2C263%20496%2C263%20502%2C261%20504%2C261%20507%2C261%20509%2C261%20510%2C261%20 <br />511%2C261%20512%2C261%20513%2C261%20515%2C261%20517%2C261%20518%2C261%20520%2C260%20523%2C260%20524% <br />2C260%20526%2C259%20528%2C259%20529%2C259%20534%2C258%20535%2C258%20536%2C257%20537%2C257%20538%2C25 <br />7%20540%2C257%27%23%3A</param><param var='sender'>34855</param></params></method>" <br /></code> <br /> <br />In the above example there are 2 methods calls ready to be sent to the server, the 2nd method would be removed after the undoLast() function had executed. <br /> <br />The methods are ready to be passed to the function getLatestMessages which passes the request through the ProjectX API, which then returns the results. <br /> <br />This code only removes the shape before it's sent to the server, I still need to write the code to delete a shape which is in the server whiteboardqueue, and remove the shape element from the web browser display (SVG DOM). Mon, 07 Apr 2008 23:42:40 GMT http://snippets.dzone.com/posts/show/5335 jrobertson (James Robertson) http://snippets.dzone.com/posts/show/5284 The following code used with the ProjectX API informs the client web browser that the whiteboard will be refreshed in 5 seconds. It then archives the current whiteboard information, formats it, and sends a message to each web browser to refresh their view. <br /> <br /><code> <br /><project name="whiteboardqueue"> <br /> <methods> <br /> <method name="create"> <br /> <params> <br /> <param var="type">ecmascript</param> <br /> <param var="body">startRefresh(5)</param> <br /> <param var="sender">system</param> <br /> </params> <br /> </method> <br /> <method name="timer"> <br /> <params> <br /> <param var="timer">5</param> <br /> </params> <br /> </method> <br /> <method name="archive_and_format"> <br /> <params/> <br /> </method> <br /> <method name="create"> <br /> <params> <br /> <param var="type">ecmascript</param> <br /> <param var="body">reloadDocument()</param> <br /> <param var="sender">system</param> <br /> </params> <br /> </method> <br /> </methods> <br /></project> <br /></code> <br /> <br />*update 1:14am* <br />The <a href="http://rorbuilder.info/r/whiteboardqueue/index2.svg">whiteboard demo</a> [rorbuilder.info] allows the user to draw using the mouse within the web browser which renders SVG. Tested on Flock and Firefox. <br /> <br />*update 4:42pm 28 Mar 08* <br />You can also view the <a href="http://rorbuilder.info/whiteboardqueue/whiteboardqueue_data.xml?passthru=1">whiteboard message queue</a> [rorbuilder.info]. <br /> <br />*update 6:29pm Mar 08* <br />I've created a short url (http://rubyurl.com/vxHD) (to demonstrate the cleaning of the whiteboard) which redirects to this http://rorbuilder.info/api/projectx.cgi?xml_project=<project name="whiteboardqueue"><methods><method name="create"><params><param var="type">ecmascript</param><param var="body">startRefresh(5)</param><param var="sender">system</param></params></method><method name="timer"><params><param var="timer">5</param></params></method><method name="archive_and_format"><params/></method><method name="create"><params><param var="type">ecmascript</param><param var="body">reloadDocument()</param><param var="sender">system</param></params></method></methods></project> <br /> <br />I've Thu, 27 Mar 2008 19:14:07 GMT http://snippets.dzone.com/posts/show/5284 jrobertson (James Robertson) http://snippets.dzone.com/posts/show/5270 This code is very similar to <a href="http://snippets.dzone.com/posts/show/5269">Draw a series of lines using SVG</a> [dzone.com] but now we can draw a series of points at the same time the mouse button is pressed and is moving. Here's an <a href="http://twitxr.com/image/18451/">example of the SVG squiggle output</a> [twitxr.com]. <br /><code> <br /><svg xmlns="http://www.w3.org/2000/svg" width="100%" <br /> xmlns:xlink="http://www.w3.org/1999/xlink" > <br /> <g id="sketch" class="sketch"> <br /> <br /> <rect x="0" <br />y="0" width="100%" height="100%" fill="yellow" /> <br /> </g> <br /> <br /> <script> <br /> <![CDATA[ <br /> var xmlns="http://www.w3.org/2000/svg" <br /> Root=document.documentElement <br /> on_start(Root) <br /> <br /> function mouseUp(evt) { <br /> on_pen_up(Root); <br /> } <br /> <br /> function on_start(R){ <br /> var Attr={ <br /> "onmousemove":"mouseMove", <br /> "onmousedown":"add_line(evt)", <br /> "onmouseup":"mouseUp" <br /> } <br /> assignAttr(R,Attr) <br /> } <br /> <br /> function on_pen_down(R){ <br /> var Attr={ <br /> "onmousemove":"addPoint(evt)", <br /> "onmouseup":"on_pen_up(Root)" <br /> } <br /> assignAttr(R,Attr) <br /> } <br /> <br /> function on_pen_up(R){ <br /> var Attr={ <br /> "onmousemove":"null" <br /> } <br /> assignAttr(R,Attr) <br /> } <br /> <br /> function add_line(evt){ <br /> //if (evt.target.nodeName!="rect") return <br /> var C=document.createElementNS(xmlns,"polyline") <br /> <br /> var Attr={ <br /> "x":30, <br /> "y":180, <br /> "fill":'none', <br /> "stroke": '#44a', <br /> "id":'pl1', <br /> "stroke-width":2 <br /> } <br /> <br /> assignAttr(C,Attr) <br /> Root.appendChild(C) <br /> <br /> on_pen_down(Root) <br /> } <br /> <br /> function addPoint (evt) { <br /> element = document.getElementById('pl1') <br /> var point = element.ownerDocument.documentElement.createSVGPoint(); <br /> point.x = evt.clientX; <br /> point.y = evt.clientY; <br /> <br /> element.points.appendItem(point); <br /> } <br /> <br /> function assignAttr(O,A){ <br /> for (i in A) O.setAttributeNS(null,i, A[i]) <br /> } <br /> <br /> ]]> <br /> </script> <br /> <br /> <text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text> <br /> <text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text> <br /></svg> <br /> <br /></code> <br /> <br />*update 7:44pm* <br />By simply making the id unique using a global variable count it was possible to draw <a href="http://www.twitxr.com/image/18474/">multiple polylines</a> [twitxr.com]. Sat, 22 Mar 2008 19:15:43 GMT http://snippets.dzone.com/posts/show/5270 jrobertson (James Robertson) http://snippets.dzone.com/posts/show/5269 This code draws a line every time the user presses the mouse button. Here is an <a href="http://twitxr.com/image/18406/">example of the SVG output</a> [twitxr.com]. <br /> <br />Tested in Firefox 3 beta 4. <br /><code> <br /><?xml version="1.0" encoding="UTF-8"?> <br /><svg xmlns="http://www.w3.org/2000/svg" version="1.1" <br /> onclick="addPoint(evt, document.getElementById('pl1'));"> <br /> <title>click to add point to polyline</title> <br /> <script type="text/ecmascript"> <br /> <![CDATA[ <br /> function addPoint (evt, element) { <br /> var point = element.ownerDocument.documentElement.createSVGPoint(); <br /> point.x = evt.clientX; <br /> point.y = evt.clientY; <br /> element.points.appendItem(point); <br /> } <br /> ]]> <br /> </script> <br /> <rect x="0" y="0" width="100%" height="100%" fill-opacity="0" /> <br /> <polyline id="pl1" fill="none" stroke="green" stroke-width="2" points="30,180 50,150" /> <br /></svg> <br /></code> Sat, 22 Mar 2008 16:50:18 GMT http://snippets.dzone.com/posts/show/5269 jrobertson (James Robertson) http://snippets.dzone.com/posts/show/5268 Demonstrates creating creating and dragging circles using SVG and ECMAScript. <br /> <br />Tested on Firefox 3 beta 4. <br /> <br />file: makeDragDrop.svg <br /><code> <br /><svg xmlns="http://www.w3.org/2000/svg" width="100%" <br /> xmlns:xlink="http://www.w3.org/1999/xlink" > <br /><script><![CDATA[ <br />var xmlns="http://www.w3.org/2000/svg" <br /> xlink="http://www.w3.org/1999/xlink" <br /> Root=document.documentElement <br />standardize(Root) <br /> <br />function standardize(R){ <br /> var Attr={ <br /> "onmouseup":"add(evt)", <br /> "onmousedown":"grab(evt)", <br /> "onmousemove":null, <br /> "onmouseover":"hilight(evt)", <br /> "onmouseout":"hilight(evt)" <br /> } <br /> assignAttr(R,Attr) <br />} <br />function hilight(evt){ <br /> var T=evt.target <br /> if (T.nodeName=="rect") return <br /> if (evt.type=="mouseover") T.setAttributeNS(null,"stroke-opacity",1) <br /> else T.setAttributeNS(null,"stroke-opacity",.5) <br />} <br />function add(evt){ <br /> if (evt.target.nodeName!="rect") return <br /> var C=document.createElementNS(xmlns,"circle") <br /> var stroke=Color() <br /> var rad=10+Math.random()*50 <br /> var Attr={ <br /> r:rad, <br /> cx:evt.clientX, <br /> cy:evt.clientY, <br /> "fill": Color(), <br /> "fill-opacity":.75, <br /> "stroke": stroke, <br /> "stroke-opacity":.5, <br /> "id":stroke, <br /> "stroke-width":10+Math.random()*(55-rad) <br /> } <br /> assignAttr(C,Attr) <br /> Root.appendChild(C) <br />} <br />function grab(evt){ <br /> var O=evt.target <br /> if (evt.target.nodeName=="rect") return <br /> var Attr={ <br /> "onmousemove":"slide(evt,'"+O.id+"')", <br /> "onmouseup":"standardize(Root)" <br /> } <br /> assignAttr(Root,Attr) <br />} <br />function slide(evt,id){ <br /> var o=document.getElementById(id) <br /> var c=""; if (o.nodeName=="circle") c="c" <br /> o.setAttributeNS(null, c+"x", evt.clientX) <br /> o.setAttributeNS(null, c+"y", evt.clientY) <br />} <br />function assignAttr(O,A){ <br /> for (i in A) O.setAttributeNS(null,i, A[i]) <br />} <br />function Color(){ <br /> return "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")" <br />} <br />]]> <br /></script> <br /><rect width="100%" height="100%" fill="white"/> <br /><text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text> <br /><text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text> <br /></svg> <br /></code> <br />Source file copied from <a href="http://srufaculty.sru.edu/david.dailey/svg/makeDragDrop.svg">http://srufaculty.sru.edu/david.dailey/svg/makeDragDrop.svg</a> <br /> Sat, 22 Mar 2008 00:30:36 GMT http://snippets.dzone.com/posts/show/5268 jrobertson (James Robertson)