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 11-20 of 144 total

Append an XML element using the append operator

This Ruby code appends an XML node to an XML document using the append << operator.
      doc2 = Document.new(xml_svg)
      obody.text = ''
      obody << doc2.root

In this example the original obody.text contained escaped xml, which was then initialised as an XML document and appended to obody to be processed as pure XML.

Using XSLT to generate SVG

This XSL file is intended to be used as an SVG XSL template file which displays SVG content using Gorg (XSLT back-end processor).
<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output encoding="UTF-8"
            method="xml"
            indent="yes"/>
            
  <xsl:template match="mainpage">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%"
                xmlns:xlink="http://www.w3.org/1999/xlink" >

    <g>
    <text font-size="12pt" x="50" y="50" id="t2" stroke="olive"><xsl:value-of select="title"/></text>
    </g>

  </svg>
  </xsl:template>
</xsl:stylesheet>


Reference: 'using XSLT to generate SVG' http://snurl.com/24pwo [carto.net]

A simple XHTML submit form for ProjectX

Preparing ProjectX API requests through the browser's address bar can get quite messy, however inputting the request through a simple form makes it much easier to read.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>ProjectX API</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  </head>
  <body>
    <h1>ProjectX API form</h1>
    <p>Enter the Project API XML to send a request to the server.</p>
    <form action="http://rorbuilder.info/api/projectx.cgi" method="post" id="projectx_form">
    <fieldset><legend>xml_project</legend><textarea id="xml_project" name="xml_project" cols="104" rows="20"></textarea></fieldset>
    <div><button type="submit">Submit</button></div>
    </form>
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" style="float:right;  border:0 "/></a>
  </p>
  <p style="clear:float">last updated: 13th April 2008</p>
  
  </body>
</html>


The web page can be seen at http://rorbuilder.info/r/projectx-api/index.html
The following XML request value when submitted should return an XML result containing the results and the method executed.
<project name='whiteboardqueue'>
  <methods>
    <method name='get_user_id'>
      <params/>
    </method>
  </methods>
</project>

eg.
<result method="rtn_get_user_id">
  <get_user_id>36539</get_user_id>
</result>

Changing the Bash prompt

The following shell command changes the bash prompt from this "james@cryton:~/projects/pear_housekeeping2/housekeeping$" to this "james@cryton> "
export PS1="\n\u@\H>"


I tried the above example on Ubuntu 7.10.

Reference:
Tip: Prompt magic [ibm.com]
Bash Prompt HOWTO [tldp.org]

Finding your WAN IP address

My server sits behind a NAT router, so finding out my public IP address is a non-trivial task. I can use curl to poll checkip.dyndns.org for my current address:
curl -s checkip.dyndns.org

The current IP check returns the information in this format: <html><head><title>Current IP Check</title></head><body>Current IP Address: 216.239.39.99</body></html>

Using cut, I can extract just the information that I need:
curl -s checkip.dyndns.org|cut -d ":" -f2|cut -d "<" -f1

That produces something a bit more readable: 216.239.39.99

-------------------------
This article snippet was copied from My sysadmin toolbox [linux.com] while I was googling for 'apt-cache search dyndns'.

Run TCPServer as a simple Web server

A TCPServer accepts incoming TCP connections. Here is a Web server that listens on a given port and returns the time.

require 'socket'
port = (ARGV[0] || 80).to_i
server = TCPServer.new('localhost', port)
while (session = server.accept)
  puts "Request: #{session.gets}"
  session.print "HTTP/1.1 200/OK\r\nContent-type: text/html\r\n\r\n"
  session.print "<html><body><h1>#{Time.now}</h1></body></html>\r\n"
  session.close
end

This code was copied from Programming Ruby: The Pragmatic Programmer's Guide [rubycentral.com] while looking for information on Ruby CGI global variables.

Using the mousewheel to zoom in or out an SVG document

This code was originally copied from Mouse wheel programming in JavaScript [adomas.org]. I replaced about 5 lines of code to get the mousewheel controlling the zoom feature in the makeZoom.svg [dzone.com] file.

  /** This is high-level function; REPLACE IT WITH YOUR CODE.
 * It must react to delta being more/less than zero.
 */
function zoomInOut(delta) {
	if (delta >= 0)
		zoomIn()
	else
		zoomOut()
}

function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
		if (window.opera) delta = -delta;
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		zoomInOut(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code. */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

Zoom into SVG

This code is a complete SVG document which can be copied and pasted into a file saved as an SVG document (eg. makeZoom.svg) and run locally within your SVG compliant web browser. When the user clicks on the yellow rectangle the shape will increase in size giving the appearance that the document has just been zoomed in.

<svg	xmlns="http://www.w3.org/2000/svg" width="100%"
		xmlns:xlink="http://www.w3.org/1999/xlink" id="cont" viewBox="0 0 300 100">
  <g>	
    <g id="sketch" class="sketch">
      <rect x="130"
  y="6" width="20px" height="10px" fill="yellow" onclick="zoomIn()" />
    </g>
  </g>

  <script>
  <![CDATA[
  function zoomIn(){

    document.getElementById('sketch').parentNode.setAttribute('transform','translate(-70  ,-6)')
    document.getElementById('sketch').setAttribute('transform','scale(1.5)')
  }
  ]]>
  </script>
</svg>



I started off experimenting with viewBox however for simplicity, transform seems better suited for zoom, and panning.

Reference:
Coordinate Systems, Transformations and Units - SVG 1.1 - 20030114 [w3.org]
Example for viewbox control [carto.net]

Undo the last shape stored in the whiteboard message buffer

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.

  function undoLast() {
    ipos = getLastMethodPos(message_buffer,-1)
    if (ipos > 0)
      message_buffer = message_buffer.substring(0, ipos)
    else
      message_buffer = ''    
  }
  
  function getLastMethodPos(message, pos) {
    i = message.indexOf('<method', pos+1)
    if (i >= 0) 
      result = getLastMethodPos(message, i)
    else
      result = pos 
    return result;
  }


Here's an example of the messages (containing shapes) stored in the message_buffer
"<method name='create'><params><param var='type'>shape</param><param var='body'>
polyline%20x%3D%27524%27%20y%3D%27198%27%20fill%3D%27none%27%20stroke%3D%27red%27%20id%3D
%27348553%27%20stroke-width%3D%272%27%20points%3D%27524%2C198%20523%2C198%20522%2C198%20521%2C198%20
513%2C198%20511%2C198%20503%2C198%20495%2C200%20493%2C200%20485%2C204%20483%2C205%20475%2C207%20474%
2C208%20470%2C212%20466%2C216%20465%2C217%20464%2C219%20463%2C220%20463%2C222%20463%2C223%20463%2C22
5%20463%2C226%20463%2C228%20464%2C230%20465%2C231%20466%2C233%20467%2C234%20471%2C238%20472%2C238%20
478%2C242%20484%2C246%20485%2C247%20488%2C247%20489%2C248%20491%2C248%20493%2C249%20496%2C249%20497%
2C249%20505%2C249%20515%2C249%20521%2C247%20531%2C245%20533%2C245%20539%2C243%20547%2C243%20548%2C24
3%20550%2C242%20555%2C237%20556%2C237%20557%2C235%20558%2C234%20558%2C233%20559%2C231%20559%2C230%20
560%2C228%20560%2C226%20560%2C222%20559%2C221%20559%2C220%20559%2C219%20559%2C217%20559%2C216%20558%
2C215%20558%2C214%20556%2C208%20555%2C206%20555%2C205%20553%2C199%20549%2C191%20547%2C185%20546%2C18
4%20544%2C176%20540%2C170%20539%2C168%20535%2C162%20534%2C161%20528%2C155%20528%2C154%20524%2C148%20
518%2C144%20517%2C143%20511%2C139%20509%2C138%20501%2C134%20499%2C133%20491%2C129%20489%2C129%20479%
2C129%20469%2C129%20467%2C129%20459%2C129%20457%2C129%20454%2C129%20452%2C129%20446%2C131%20438%2C13
1%20437%2C132%20435%2C132%20435%2C133%20434%2C133%20434%2C134%20433%2C134%20433%2C135%27%23%3A
</param><param var='sender'>34855</param></params></method><method name='create'><params><param 
var='type'>shape</param><param var='body'>polyline%20x%3D%27457%27%20y%3D%27175%27%20fill%3D%27none
%27%20stroke%3D%27red%27%20id%3D
%27348554%27%20stroke-width%3D%272%27%20points%3D%27457%2C175%20456%2C175%20455%2C176%20454%2C176%20
453%2C177%20452%2C177%20451%2C177%20449%2C178%20448%2C179%20442%2C181%20440%2C183%20438%2C184%20438%
2C185%20437%2C186%20436%2C187%20435%2C189%20435%2C191%20434%2C193%20434%2C194%20433%2C195%20433%2C19
6%20431%2C200%20431%2C201%20431%2C203%20431%2C205%20431%2C206%20431%2C207%20431%2C208%20431%2C209%20
431%2C210%20431%2C211%20431%2C212%20431%2C213%20431%2C214%20431%2C215%20431%2C216%20431%2C217%20432%
2C223%20432%2C224%20432%2C225%20432%2C226%20433%2C226%20433%2C227%20433%2C228%20433%2C229%20434%2C22
9%20434%2C230%20435%2C231%20435%2C233%20435%2C234%20436%2C235%20437%2C236%20437%2C237%20438%2C237%20
438%2C238%20438%2C239%20438%2C240%20439%2C240%20439%2C241%20443%2C245%20444%2C246%20444%2C247%20445%
2C247%20446%2C248%20447%2C248%20448%2C248%20448%2C249%20449%2C249%20450%2C250%20451%2C251%20452%2C25
2%20454%2C253%20455%2C253%20461%2C255%20462%2C255%20464%2C256%20466%2C256%20467%2C257%20469%2C257%20
469%2C258%20471%2C259%20472%2C259%20474%2C260%20475%2C260%20477%2C261%20478%2C261%20480%2C262%20481%
2C262%20481%2C263%20482%2C263%20483%2C263%20484%2C263%20485%2C263%20486%2C263%20489%2C263%20491%2C26
3%20492%2C263%20495%2C263%20496%2C263%20502%2C261%20504%2C261%20507%2C261%20509%2C261%20510%2C261%20
511%2C261%20512%2C261%20513%2C261%20515%2C261%20517%2C261%20518%2C261%20520%2C260%20523%2C260%20524%
2C260%20526%2C259%20528%2C259%20529%2C259%20534%2C258%20535%2C258%20536%2C257%20537%2C257%20538%2C25
7%20540%2C257%27%23%3A</param><param var='sender'>34855</param></params></method>"


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.

The methods are ready to be passed to the function getLatestMessages which passes the request through the ProjectX API, which then returns the results.

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).

Cursor styles used in CSS

Source: Custom CSS Cursors [javascriptkit.com]
cursor: default;
cursor: hand;
cursor: pointer;
cursor: pointer; cursor: hand;
cursor: crosshair;
cursor: text;
cursor: wait;
cursor: help;
cursor: move;
cursor: e-resize;
cursor: ne-resize;
cursor: nw-resize;
cursor: n-resize;
cursor: se-resize;
cursor: sw-resize;
cursor: s-resize;
cursor: w-resize;
cursor: progress;
cursor: all-scroll;
cursor: col-resize;
cursor: no-drop;
cursor: not-allowed;
cursor: row-resize;
cursor: url(mycursor.cur); /* Note: Only .cur and .ani file types are supported as of IE6. */
cursor: vertical-text;
« Newer Snippets
Older Snippets »
Showing 11-20 of 144 total