User:Andre Castro/python-svg: Difference between revisions
Andrecastro (talk | contribs) |
Andrecastro (talk | contribs) No edit summary |
||
| Line 5: | Line 5: | ||
[ | [http://pzwart3.wdka.hro.nl/~acastro/cgi-bin/rss.cgi cgi-rssfeed-nytimes] | ||
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>"""
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]