User:Andre Castro/python-svg

From XPUB & Lens-Based wiki
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Experimenting with animation through svg and python

  • 31/10/2011
    • NYTimes news feed is red and displayed in a svg


   cgi-rssfeed-nytimes



import lxml.etree, urllib2, codecs, random

print """<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

   id="svg2"
   version="1.1"
   inkscape:version="0.48.1 r9760"
   sodipodi:docname="New document 1">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="375"
     inkscape:cy="520"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     showborder="false"
     inkscape:showpageshadow="false"
     inkscape:window-width="483"
     inkscape:window-height="421"
     inkscape:window-x="323"
     inkscape:window-y="28"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"> """

 
# Read from live URL
f = urllib2.urlopen("http://www.nytimes.com/services/xml/rss/nyt/GlobalHome.xml")

# Read in the XML file
doc = lxml.etree.parse(f)

stories = doc.xpath(".//item/description/text()")


#NEED TO ENCODE stories as utf-8 encode("utf-8")


times = len(stories) # = stories lenght

#for i in range(times):
 #    stories[i]


text = """<text
       xml:space="preserve"
       style="font-size:10px;font-style:normal;font-weight:normal;line-height:100%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       x="160"
       y="100"
       id="text2985"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan2987"
         x="{0}"
         y="{1}">{2}</tspan> >
<animateTransform attributeName="transform" begin="0" dur="{3}" type="scale" from="1" to="10" repeatCount="indefinite" id="animateTransform8537" />
<animate attributeName="opacity" from="0" to="1"
	begin="0" dur="{3}" repeatCount="indefinite" />
</text>"""

#<animateTransform attributeName="transform" begin="1" dur="1" type="rotate" from="360 {0} {1}" to="0 {0} {1}" #repeatCount="indefinite" id="animateTransform8537" />

##### NEXT STEP WILL BE MORPHING ON STRING WITH ANOTHER

for i in range(times):
    encoded = stories[i].encode( "utf-8" )
    print text.format(10, 10+20*(i+1), encoded, random.randint(4,7) ) 	

print """ </g>
</svg> """



  • 25/10/2011

svg animation: bars rotating in a wave 

import random
print """<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  
   id="svg3617"
   version="1.1"
   inkscape:version="0.48.1 r9760"
   sodipodi:docname="2figures-ink.svg">
  <defs
     id="defs3619" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="416.74161"
     inkscape:cy="862.85714"
     inkscape:document-units="px"
     inkscape:current-layer="layer4"
     showgrid="false"
     inkscape:window-width="964"
     inkscape:window-height="581"
     inkscape:window-x="58"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     showborder="false"
     inkscape:showpageshadow="false" />
  <metadata
     id="metadata3622">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">"""

rect = """<rect
       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="rect3625"
       width="{0}"
       height="10"	
       x="{1}"
       y="{2}" >
<animateTransform attributeName="transform" begin="1" dur="{5}" type="rotate" from="360 {3} {4}" to="0 {3} {4}" repeatCount="indefinite" id="animateTransform8537" />
</rect>
"""

r=range(40)
length = len(r)
for x in r:
    x_offset=0
    overlap = 10
    width = 40+overlap
    list_times = [1, 1+x, length-x, random.randint(1,length)]
    dur_inc = 1 + x + float(0.5)
    print rect.format(width, (x_offset +(x * width)), 200, (x_offset +(x * width)), 200, dur_inc ) 

#how can the rectangles rotate around their center????
print """</g>
</svg>"""


clock 

import random datetime
print """<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  
   id="svg3617"
   version="1.1"
   inkscape:version="0.48.1 r9760"
   sodipodi:docname="2figures-ink.svg">
  <defs
     id="defs3619" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="416.74161"
     inkscape:cy="862.85714"
     inkscape:document-units="px"
     inkscape:current-layer="layer4"
     showgrid="false"
     inkscape:window-width="964"
     inkscape:window-height="581"
     inkscape:window-x="58"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     showborder="false"
     inkscape:showpageshadow="false" />
  <metadata
     id="metadata3622">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">"""

rect = """<rect
       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
       id="rect3625"
       width="{0}"
       height="{1}"	
       x="{2}"
       y="{3}" >
<animateTransform attributeName="transform" begin="1" dur="{4}" type="rotate" from="0 {5} {6}" to="360 {5} {6}" repeatCount="indefinite" id="animateTransform8537" />
</rect>
"""

durations=[1, 60, 60**2]
# x=0=sec  x=1=min  x=2=hours
for x in range(3):
    width = 1+(3*x)
    height = 100-(x*20)
    pos_x = 150+(250*x)
    pos_y = 200
    hour = datetime.datetime.now().hour #360° - 24h
    minute = datetime.datetime.now().minute 
    second = datetime.datetime.now().second

    print rect.format(width, height, pos_x, pos_y, durations[x], pos_x, pos_y+height)     


##MAKE HANDS OF THE WATCH START AT POSITION 0

print """</g>
</svg>"""

++++++++++++++++++++++++++++++++++++++++++++++++++

Examples - python + svg [1]

Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Andre_Castro/python-svg&oldid=18727"