User:Andre Castro/python-svg: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
No edit summary
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
Looking into examples - python + svg [http://www.petercollingridge.co.uk/blog/python-svg-writer]
=== Experimenting with animation through svg and python ===
 
* 31/10/2011
** NYTimes news feed is red and displayed in a svg
 
 
    [http://pzwart3.wdka.hro.nl/~acastro/cgi-bin/rss.cgi cgi-rssfeed-nytimes]
 
 
<source lang="python">
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")
 


=== Experimenting with animation through svg and python ===  
times = len(stories) # = stories lenght
[[Image:Andre-bars-01.svg]]
 
#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> """
</source>
 
 
 
* 25/10/2011
[http://pzwart3.wdka.hro.nl/mediawiki/images/1/1c/Andre-bars-01.svg svg animation: bars rotating in a wave]
 
<source lang="python">
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>"""
</source>
 
 
[http://pzwart3.wdka.hro.nl/mediawiki/images/1/1f/Andre-clock.svg clock]
 
<source lang="python">
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>"""
 
</source>
++++++++++++++++++++++++++++++++++++++++++++++++++
 
Examples - python + svg [http://www.petercollingridge.co.uk/blog/python-svg-writer]

Latest revision as of 13:49, 3 November 2011

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"