Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

About this user

James Robertson http://www.r0bertson.co.uk

« Newer Snippets
Older Snippets »
Showing 1-6 of 6 total  RSS 

Drawing a single Polyline using SVG

This code is very similar to Draw a series of lines using SVG [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 example of the SVG squiggle output [twitxr.com].
<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" >
  <g id="sketch" class="sketch">

    <rect x="0"
y="0" width="100%" height="100%" fill="yellow" />
  </g>

  <script>
  <![CDATA[
  var	xmlns="http://www.w3.org/2000/svg"
  Root=document.documentElement
  on_start(Root)

  function mouseUp(evt) {
	  on_pen_up(Root);
  }

  function on_start(R){
	  var Attr={
	    "onmousemove":"mouseMove",
      "onmousedown":"add_line(evt)",	
      "onmouseup":"mouseUp"
	  }
	  assignAttr(R,Attr)
  }

  function on_pen_down(R){
	  var Attr={
	    "onmousemove":"addPoint(evt)",
	    "onmouseup":"on_pen_up(Root)"
	  }
	  assignAttr(R,Attr)
  }

  function on_pen_up(R){
	  var Attr={
	    "onmousemove":"null"
	  }
	  assignAttr(R,Attr)
  }

  function add_line(evt){
	  //if (evt.target.nodeName!="rect") return
	  var C=document.createElementNS(xmlns,"polyline") 
	
	  var Attr={
		  "x":30,
		  "y":180,
		  "fill":'none',
		  "stroke": '#44a',
		  "id":'pl1',
		  "stroke-width":2
	  }
    
	  assignAttr(C,Attr)
	  Root.appendChild(C)
    
	  on_pen_down(Root)
  }

  function addPoint (evt) {
    element = document.getElementById('pl1') 	
    var point = element.ownerDocument.documentElement.createSVGPoint(); 
    point.x = evt.clientX; 
    point.y = evt.clientY;
    
    element.points.appendItem(point);
  }

  function assignAttr(O,A){
	  for (i in A) O.setAttributeNS(null,i, A[i])
  }

  ]]>
  </script>

  <text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text>
  <text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text>
</svg>


*update 7:44pm*
By simply making the id unique using a global variable count it was possible to draw multiple polylines [twitxr.com].
to draw svg polyline create mousemove ecmascript mousedown by jrobertson on Mar 22, 2008

Draw a series of lines using SVG

This code draws a line every time the user presses the mouse button. Here is an example of the SVG output [twitxr.com].

Tested in Firefox 3 beta 4.
<?xml version="1.0" encoding="UTF-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
 onclick="addPoint(evt, document.getElementById('pl1'));"> 
  <title>click to add point to polyline</title>
  <script type="text/ecmascript">
    <![CDATA[ 
      function addPoint (evt, element) {
        var point = element.ownerDocument.documentElement.createSVGPoint(); 
        point.x = evt.clientX; 
        point.y = evt.clientY; 
        element.points.appendItem(point);
      }
    ]]>
  </script> 
  <rect x="0" y="0" width="100%" height="100%" fill-opacity="0" />
  <polyline id="pl1" fill="none" stroke="green" stroke-width="2" points="30,180 50,150" />
</svg>
to svg polyline onclick create ecmascript mousedown by jrobertson on Mar 22, 2008

Create and drag circles in SVG

Demonstrates creating creating and dragging circles using SVG and ECMAScript.

Tested on Firefox 3 beta 4.

file: makeDragDrop.svg
<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" >
<script><![CDATA[
var	xmlns="http://www.w3.org/2000/svg"
	xlink="http://www.w3.org/1999/xlink" 
	Root=document.documentElement
standardize(Root)

function standardize(R){
	var Attr={
		"onmouseup":"add(evt)",
		"onmousedown":"grab(evt)",
		"onmousemove":null,
		"onmouseover":"hilight(evt)",
		"onmouseout":"hilight(evt)"
	}
	assignAttr(R,Attr)
}
function hilight(evt){
	var T=evt.target
	if (T.nodeName=="rect") return
	if (evt.type=="mouseover") T.setAttributeNS(null,"stroke-opacity",1)
	else T.setAttributeNS(null,"stroke-opacity",.5)
}
function add(evt){
	if (evt.target.nodeName!="rect") return
	var C=document.createElementNS(xmlns,"circle") 
	var stroke=Color()
	var rad=10+Math.random()*50
	var Attr={
		r:rad,
		cx:evt.clientX,
		cy:evt.clientY,
		"fill": Color(),
		"fill-opacity":.75,
		"stroke": stroke,
		"stroke-opacity":.5,
		"id":stroke,
		"stroke-width":10+Math.random()*(55-rad)
	}
	assignAttr(C,Attr)
	Root.appendChild(C)
}
function grab(evt){
	var O=evt.target
	if (evt.target.nodeName=="rect") return
	var Attr={
		"onmousemove":"slide(evt,'"+O.id+"')",
		"onmouseup":"standardize(Root)"
	}
	assignAttr(Root,Attr)
}
function slide(evt,id){
	var o=document.getElementById(id)
	var c=""; if (o.nodeName=="circle") c="c"
	o.setAttributeNS(null, c+"x", evt.clientX)
	o.setAttributeNS(null, c+"y", evt.clientY)
}
function assignAttr(O,A){
	for (i in A) O.setAttributeNS(null,i, A[i])
}
function Color(){
	return "rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")"
}
]]>
</script>
<rect width="100%" height="100%" fill="white"/>
<text font-size="12pt" x="50" y="20" id="t1">Click something to move it</text>
<text font-size="12pt" x="80" y="40" id="t2">Click nothing to add something</text>
</svg>

Source file copied from http://srufaculty.sru.edu/david.dailey/svg/makeDragDrop.svg
to fun javascript circle drag svg create drop ecmascript colours by jrobertson on Mar 21, 2008

Creating a DateTime object with Ruby

This example creates a date and time variable which represents 22nd March 2008 4:30pm and 12 seconds.
d2 = DateTime.new(y=200,m=3,d=22, h=16,min=30,s=12)

or convert a date string into a DataTime object:
"17/03/2009 17:48:00"[/(\d+)\/(\d+)\/(\d+)\s(\d+):(\d+):(\d+)/]
d2 = DateTime.new(y=$3.to_i,m=$2.to_i,d=$1.to_i, h=$4.to_i,min=$5.to_i,s=$6.to_i)

or convert a date string into a Time object:
"22/03/2008 17:48:00"[/(\d+)\/(\d+)\/(\d+)\s(\d+):(\d+):(\d+)/]
iyear = $3.to_i; imonth = $2.to_i; iday = $1.to_i; ihour = $4.to_i; imin = $5.to_i; isec = $6.to_i
twork = Time.local(iyear,imonth,iday,ihour,imin,isec) 
puts 'we still have time to party' if Time.now < twork

Reference:
Class: DateTime [ruby-doc.org]
Class: Time [ruby-doc.org]
to ruby date time new create by jrobertson on Mar 01, 2008

Use Ruby to create a directory

Create a directory named 'temp' if it doesn't already exist. Source: 'Create a new directory if it's missing' http://snippets.dzone.com/posts/show/2554 [snippets.dzone.com] Reference: mkdir_p http://ruby-doc.org/core/classes/FileUtils.html#M004346 [ruby-doc.org]
FileUtils.mkdir_p 'temp'
to ruby directory create mkdir by jrobertson on Jan 09, 2008

Creating a date with Ruby

This example creates a date variable which represents 22nd March 2008.
  require 'date'
  d1 = Date.new(y=2008,m=3,d=22)
  puts d1

output: 2008-03-22
to ruby date new create by jrobertson on Dec 22, 2007 1 Comments
« Newer Snippets
Older Snippets »
Showing 1-6 of 6 total  RSS