* fully skinnable with CSS style
Screenshot:
- .. image:: https://raw.github.com/Parisson/TimeSide/master/doc/slides/img/timeside_player_01.png
+ .. image:: https://raw.github.com/Parisson/TimeSide/master/doc/images/timeside_player_01.png
Examples of the player embeded in the Telemeta open web audio CMS:
* http://parisson.telemeta.org/archives/items/PRS_07_01_03/
--- /dev/null
+<?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"
+ width="1052.3622"
+ height="744.09448"
+ id="svg3301"
+ version="1.1"
+ inkscape:version="0.48.3.1 r9886"
+ sodipodi:docname="TimeSide_pipe.svg">
+ <defs
+ id="defs3303">
+ <marker
+ inkscape:stockid="Arrow2Send"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Send"
+ style="overflow:visible;">
+ <path
+ id="path4390"
+ style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.3) rotate(180) translate(-2.3,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="DotS"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="DotS"
+ style="overflow:visible">
+ <path
+ id="path4424"
+ d="M -2.5,-1.0 C -2.5,1.7600000 -4.7400000,4.0 -7.5,4.0 C -10.260000,4.0 -12.5,1.7600000 -12.5,-1.0 C -12.5,-3.7600000 -10.260000,-6.0 -7.5,-6.0 C -4.7400000,-6.0 -2.5,-3.7600000 -2.5,-1.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
+ transform="scale(0.2) translate(7.4, 1)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Sstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Sstart"
+ style="overflow:visible">
+ <path
+ id="path4369"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
+ transform="scale(0.2) translate(6,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mstart"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow1Mstart"
+ style="overflow:visible">
+ <path
+ id="path4363"
+ d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt"
+ transform="scale(0.4) translate(10,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mend"
+ orient="auto"
+ refY="0.0"
+ refX="0.0"
+ id="Arrow2Mend"
+ style="overflow:visible;">
+ <path
+ id="path4796"
+ style="fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"
+ d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+ transform="scale(0.6) rotate(180) translate(0,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="DotM"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="DotM"
+ style="overflow:visible">
+ <path
+ id="path3898"
+ d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.4,0,0,0.4,2.96,0.4)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Mend-6"
+ style="overflow:visible">
+ <path
+ inkscape:connector-curvature="0"
+ id="path3843-5"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(-0.4,0,0,-0.4,-4,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="DotM"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="marker3234"
+ style="overflow:visible">
+ <path
+ id="path3236"
+ d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.4,0,0,0.4,2.96,0.4)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="marker3238"
+ style="overflow:visible">
+ <path
+ inkscape:connector-curvature="0"
+ id="path3240"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(-0.4,0,0,-0.4,-4,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="DotM"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="marker3242"
+ style="overflow:visible">
+ <path
+ id="path3244"
+ d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.4,0,0,0.4,2.96,0.4)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="SquareM"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="SquareM"
+ style="overflow:visible">
+ <path
+ id="path3907"
+ d="M -5,-5 -5,5 5,5 5,-5 -5,-5 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="scale(0.4,0.4)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="DotM"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="DotM-9"
+ style="overflow:visible">
+ <path
+ id="path3898-1"
+ d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.4,0,0,0.4,2.96,0.4)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Mend-6-0"
+ style="overflow:visible">
+ <path
+ inkscape:connector-curvature="0"
+ id="path3843-5-3"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(-0.4,0,0,-0.4,-4,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="DotM"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="DotM-6"
+ style="overflow:visible">
+ <path
+ id="path3898-10"
+ d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.4,0,0,0.4,2.96,0.4)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Mend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow2Mend-6"
+ style="overflow:visible">
+ <path
+ inkscape:connector-curvature="0"
+ id="path4796-5"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="scale(-0.6,-0.6)" />
+ </marker>
+ <marker
+ inkscape:stockid="DotM"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="DotM-2"
+ style="overflow:visible">
+ <path
+ id="path3898-13"
+ d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.4,0,0,0.4,2.96,0.4)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Mend-6-00"
+ style="overflow:visible">
+ <path
+ inkscape:connector-curvature="0"
+ id="path3843-5-6"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(-0.4,0,0,-0.4,-4,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="DotM"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="DotM-1"
+ style="overflow:visible">
+ <path
+ id="path3898-2"
+ d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.4,0,0,0.4,2.96,0.4)"
+ inkscape:connector-curvature="0" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Mend"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Mend-6-4"
+ style="overflow:visible">
+ <path
+ inkscape:connector-curvature="0"
+ id="path3843-5-7"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(-0.4,0,0,-0.4,-4,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow1Sstart"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow1Sstart-8"
+ style="overflow:visible">
+ <path
+ inkscape:connector-curvature="0"
+ id="path4369-5"
+ d="M 0,0 5,-5 -12.5,0 5,5 0,0 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.2,0,0,0.2,1.2,0)" />
+ </marker>
+ <marker
+ inkscape:stockid="DotS"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="DotS-0"
+ style="overflow:visible">
+ <path
+ inkscape:connector-curvature="0"
+ id="path4424-4"
+ d="m -2.5,-1 c 0,2.76 -2.24,5 -5,5 -2.76,0 -5,-2.24 -5,-5 0,-2.76 2.24,-5 5,-5 2.76,0 5,2.24 5,5 z"
+ style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt"
+ transform="matrix(0.2,0,0,0.2,1.48,0.2)" />
+ </marker>
+ <marker
+ inkscape:stockid="Arrow2Send"
+ orient="auto"
+ refY="0"
+ refX="0"
+ id="Arrow2Send-2"
+ style="overflow:visible">
+ <path
+ inkscape:connector-curvature="0"
+ id="path4390-8"
+ style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+ d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
+ transform="matrix(-0.3,0,0,-0.3,0.69,0)" />
+ </marker>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1.2009375"
+ inkscape:cx="420.89582"
+ inkscape:cy="405.25351"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ showgrid="true"
+ showguides="true"
+ inkscape:window-width="1596"
+ inkscape:window-height="857"
+ inkscape:window-x="0"
+ inkscape:window-y="20"
+ inkscape:window-maximized="0"
+ inkscape:snap-bbox="true"
+ inkscape:guide-bbox="true">
+ <inkscape:grid
+ type="xygrid"
+ id="grid4728"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata3306">
+ <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:groupmode="layer"
+ id="layer2"
+ inkscape:label="Fond"
+ style="display:inline">
+ <rect
+ style="opacity:0.92248062;fill:#ffb100;fill-opacity:0.19672134;stroke:#000000;stroke-width:1.94203174;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ id="rect2999"
+ width="260.5257"
+ height="907.34814"
+ x="-439.61285"
+ y="69.890137"
+ ry="75.178726"
+ transform="matrix(0,-1,1,0,0,0)" />
+ </g>
+ <g
+ inkscape:label="Calque 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(0,-308.2677)"
+ style="display:inline">
+ <text
+ xml:space="preserve"
+ style="font-size:32.34112167px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace Bold"
+ x="552.20654"
+ y="478.65512"
+ id="text2985"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ x="552.20654"
+ y="478.65512"
+ id="tspan5293">TimeSide ProcessPipe</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-size:28.7476635px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#0500a7;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ x="147.703"
+ y="864.66791"
+ id="text3913"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan3915"
+ x="147.703"
+ y="864.66791"
+ style="font-size:25.15420532px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#0500a7;fill-opacity:1;stroke:none;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch Bold">pipe = (decoder | analyzer1 | analyzer2 | encoder)</tspan></text>
+ <g
+ id="g5434"
+ transform="matrix(0.89836447,0,0,0.89836447,40.279433,45.034155)">
+ <rect
+ ry="45.017029"
+ y="552.40826"
+ x="303.49945"
+ height="170.00002"
+ width="202"
+ id="rect2995"
+ style="opacity:0.92248062;fill:#ff4500;fill-opacity:1;stroke:#000000;stroke-width:2.27863812;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3013"
+ y="542.40826"
+ x="317.91351"
+ style="font-size:32px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ y="542.40826"
+ x="317.91351"
+ id="tspan3015"
+ sodipodi:role="line">analyzer1</tspan></text>
+ <text
+ inkscape:transform-center-y="-280"
+ inkscape:transform-center-x="-118.57143"
+ sodipodi:linespacing="125%"
+ id="text7680-0-5"
+ y="626.36218"
+ x="345.62836"
+ style="font-size:32px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ style="font-size:28px"
+ y="626.36218"
+ x="345.62836"
+ id="tspan7682-4-8"
+ sodipodi:role="line">Python</tspan><tspan
+ style="font-size:28px"
+ id="tspan7684-1-4"
+ y="661.36218"
+ x="345.62836"
+ sodipodi:role="line">process</tspan></text>
+ <text
+ sodipodi:linespacing="125%"
+ id="text7734"
+ y="822.40826"
+ x="404.30609"
+ style="font-size:24px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ y="822.40826"
+ x="404.30609"
+ id="tspan7736"
+ sodipodi:role="line">Result</tspan><tspan
+ style="font-size:18px"
+ id="tspan5227"
+ y="846.4278"
+ x="404.30609"
+ sodipodi:role="line">HDF5, JSON, YAML, XML</tspan></text>
+ <path
+ inkscape:connector-curvature="0"
+ id="path6125-9-1"
+ d="m 404.46006,722.40826 0,71.42857"
+ style="fill:none;stroke:#0009ff;stroke-width:4.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#DotM);marker-end:url(#Arrow2Mend)"
+ sodipodi:nodetypes="cc" />
+ </g>
+ <g
+ id="g4730"
+ transform="matrix(0.89836447,0,0,0.89836447,198.32096,45.075549)">
+ <text
+ sodipodi:linespacing="125%"
+ id="text3021"
+ y="542.36218"
+ x="682.68866"
+ style="font-size:32px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ y="542.36218"
+ x="682.68866"
+ id="tspan3023"
+ sodipodi:role="line">encoder</tspan></text>
+ <text
+ inkscape:transform-center-y="1.1643196"
+ inkscape:transform-center-x="-52.600624"
+ transform="matrix(0.99973996,0.02280375,-0.02280375,0.99973996,0,0)"
+ sodipodi:linespacing="125%"
+ id="text3025-0-3-5"
+ y="725.0636"
+ x="766.85333"
+ style="font-size:24px;font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace Italic"
+ xml:space="preserve"><tspan
+ style="font-size:20px;text-align:center;text-anchor:middle"
+ y="725.0636"
+ x="766.85333"
+ id="tspan3027-2-66-3"
+ sodipodi:role="line">gstreamer</tspan><tspan
+ style="font-size:20px;text-align:center;text-anchor:middle"
+ y="750.0636"
+ x="766.85333"
+ sodipodi:role="line"
+ id="tspan3887-8">thread #2</tspan></text>
+ <g
+ transform="matrix(0.82551354,0,0,0.88933891,626.04207,61.309936)"
+ id="g3846-4">
+ <rect
+ style="opacity:0.92248062;fill:#adff2f;fill-opacity:1;stroke:#000000;stroke-width:1.9024632;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ id="rect2997-6-0"
+ width="217.02118"
+ height="191.9612"
+ x="42.160419"
+ y="552.15424"
+ ry="46.014072" />
+ </g>
+ <g
+ transform="translate(-84.001588,9.613102)"
+ id="g3836">
+ <g
+ id="g3762"
+ transform="translate(0,-21.730896)">
+ <text
+ transform="matrix(0,-1,1,0,0,0)"
+ sodipodi:linespacing="125%"
+ id="text6042-6-1-2"
+ y="868.79608"
+ x="-705.89197"
+ style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ y="868.79608"
+ x="-705.89197"
+ id="tspan6044-2-4-9"
+ sodipodi:role="line"
+ style="font-size:18px">lamemp3enc</tspan></text>
+ <rect
+ transform="matrix(0,-1,1,0,0,0)"
+ ry="23.701715"
+ y="840.0802"
+ x="-715.16547"
+ height="47.403431"
+ width="126.73156"
+ id="rect6363-9-2"
+ style="opacity:0.92248062;fill:none;stroke:#008200;stroke-width:3.573035;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:7.14607064, 3.57303532;stroke-dashoffset:0" />
+ </g>
+ <g
+ id="g3757"
+ transform="translate(0,-47.42334)">
+ <text
+ transform="matrix(0,-1,1,0,0,0)"
+ sodipodi:linespacing="125%"
+ id="text6042-6-1"
+ y="808.23578"
+ x="-709.80951"
+ style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ style="font-size:18px"
+ y="808.23578"
+ x="-709.80951"
+ id="tspan6044-2-4"
+ sodipodi:role="line">appsrc</tspan></text>
+ <rect
+ transform="matrix(0,-1,1,0,0,0)"
+ ry="23.701715"
+ y="781.3656"
+ x="-740.85791"
+ height="47.403431"
+ width="126.73156"
+ id="rect6363-9-2-5"
+ style="opacity:0.92248062;fill:none;stroke:#008200;stroke-width:3.573035;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:7.14607064, 3.57303532;stroke-dashoffset:0" />
+ </g>
+ </g>
+ </g>
+ <g
+ id="g4748"
+ transform="matrix(0.89836447,0,0,0.89836447,39.519355,45.034154)">
+ <text
+ sodipodi:linespacing="125%"
+ id="text3017"
+ y="542.36218"
+ x="82.68866"
+ style="font-size:32px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ y="542.36218"
+ x="82.68866"
+ id="tspan3019"
+ sodipodi:role="line">decoder</tspan></text>
+ <rect
+ ry="40.922104"
+ y="552.36218"
+ x="60.846069"
+ height="170.71857"
+ width="179.15393"
+ id="rect2997-6"
+ style="opacity:0.92248062;fill:#adff2f;fill-opacity:1;stroke:#000000;stroke-width:1.63009167;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+ <text
+ inkscape:transform-center-y="1.1643196"
+ inkscape:transform-center-x="-52.600624"
+ transform="matrix(0.99973996,0.02280375,-0.02280375,0.99973996,0,0)"
+ sodipodi:linespacing="125%"
+ id="text3025-0-3"
+ y="738.74585"
+ x="167.00937"
+ style="font-size:24px;font-style:italic;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace Italic"
+ xml:space="preserve"><tspan
+ style="font-size:20px;text-align:center;text-anchor:middle"
+ y="738.74585"
+ x="167.00937"
+ id="tspan3027-2-66"
+ sodipodi:role="line">gstreamer</tspan><tspan
+ style="font-size:20px;text-align:center;text-anchor:middle"
+ y="763.74585"
+ x="167.00937"
+ sodipodi:role="line"
+ id="tspan3887">thread #1</tspan></text>
+ <g
+ transform="translate(-7.6546955,9.613102)"
+ id="g3787">
+ <g
+ id="g3752"
+ transform="translate(0,-14.67865)">
+ <text
+ transform="matrix(0,-1,1,0,0,0)"
+ sodipodi:linespacing="125%"
+ id="text6042-6"
+ y="192.40085"
+ x="-683.09851"
+ style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ y="192.40085"
+ x="-683.09851"
+ id="tspan6044-2"
+ sodipodi:role="line"
+ style="font-size:18px">appsink</tspan></text>
+ <rect
+ transform="matrix(0,-1,1,0,0,0)"
+ ry="23.701715"
+ y="163.73331"
+ x="-708.11322"
+ height="47.403431"
+ width="126.73156"
+ id="rect6363-9-2-9"
+ style="opacity:0.92248062;fill:none;stroke:#008200;stroke-width:3.573035;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:7.14607064, 3.57303532;stroke-dashoffset:0" />
+ </g>
+ <g
+ id="g3747">
+ <text
+ transform="matrix(0,-1,1,0,0,0)"
+ sodipodi:linespacing="125%"
+ id="text6042"
+ y="135.43089"
+ x="-684.27094"
+ style="font-size:20px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ style="font-size:18px"
+ y="135.43089"
+ x="-684.27094"
+ id="tspan6044"
+ sodipodi:role="line">uridecobin</tspan></text>
+ <rect
+ transform="matrix(0,-1,1,0,0,0)"
+ ry="23.701715"
+ y="105.01872"
+ x="-693.43457"
+ height="47.403431"
+ width="126.73156"
+ id="rect6363-9-2-3"
+ style="fill:none;stroke:#008200;stroke-width:3.573035;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:7.14607064, 3.57303532;stroke-dashoffset:0" />
+ </g>
+ </g>
+ </g>
+ <g
+ id="g6321"
+ transform="matrix(0,-0.89836447,0.89836447,0,-48.599008,811.02273)">
+ <path
+ inkscape:connector-curvature="0"
+ id="path6125"
+ d="m 214.28571,330.93361 0,72.85714"
+ style="fill:none;stroke:#ff2000;stroke-width:4.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#DotM);marker-end:url(#Arrow1Mend-6)"
+ sodipodi:nodetypes="cc" />
+ <g
+ transform="translate(-48.571429,-344.28571)"
+ id="g6004">
+ <text
+ xml:space="preserve"
+ style="font-size:22px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ x="179.71428"
+ y="707.79077"
+ id="text6000"
+ sodipodi:linespacing="125%"
+ inkscape:transform-center-x="-72.857143"
+ inkscape:transform-center-y="-14.398438"><tspan
+ sodipodi:role="line"
+ id="tspan6002"
+ x="179.71428"
+ y="707.79077">frames, eod</tspan></text>
+ </g>
+ </g>
+ <g
+ id="g5456"
+ transform="matrix(0.89836447,0,0,0.89836447,40.279433,45.034155)">
+ <rect
+ ry="45.017029"
+ y="552.36218"
+ x="566.42194"
+ height="170.00002"
+ width="202"
+ id="rect2995-3"
+ style="opacity:0.92248062;fill:#ff4500;fill-opacity:1;stroke:#000000;stroke-width:2.27863812;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
+ <text
+ sodipodi:linespacing="125%"
+ id="text3013-1"
+ y="542.36218"
+ x="581.10944"
+ style="font-size:32px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ y="542.36218"
+ x="581.10944"
+ sodipodi:role="line"
+ id="tspan5420">analyzer2</tspan></text>
+ <text
+ inkscape:transform-center-y="-280"
+ inkscape:transform-center-x="-118.57143"
+ sodipodi:linespacing="125%"
+ id="text7680-0-5-3"
+ y="626.3161"
+ x="608.55084"
+ style="font-size:32px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ style="font-size:28px"
+ y="626.3161"
+ x="608.55084"
+ id="tspan7682-4-8-6"
+ sodipodi:role="line">Python</tspan><tspan
+ style="font-size:28px"
+ id="tspan7684-1-4-1"
+ y="661.3161"
+ x="608.55084"
+ sodipodi:role="line">process</tspan></text>
+ <text
+ sodipodi:linespacing="125%"
+ id="text7734-5"
+ y="822.36218"
+ x="667.22858"
+ style="font-size:24px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-align:center;line-height:125%;letter-spacing:0px;word-spacing:0px;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ xml:space="preserve"><tspan
+ y="822.36218"
+ x="667.22858"
+ id="tspan7736-5"
+ sodipodi:role="line">Result</tspan><tspan
+ style="font-size:18px"
+ id="tspan5227-6"
+ y="846.38171"
+ x="667.22858"
+ sodipodi:role="line">HDF5, JSON, YAML, XML</tspan></text>
+ <path
+ inkscape:connector-curvature="0"
+ id="path6125-9-1-3"
+ d="m 667.38254,722.36218 0,71.42857"
+ style="fill:none;stroke:#0009ff;stroke-width:4.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#DotM);marker-end:url(#Arrow2Mend)"
+ sodipodi:nodetypes="cc" />
+ </g>
+ <g
+ id="g6321-1"
+ transform="matrix(0,-0.89836447,0.89836447,0,190.36594,811.02273)">
+ <path
+ inkscape:connector-curvature="0"
+ id="path6125-1"
+ d="m 214.28571,330.93361 0,72.85714"
+ style="fill:none;stroke:#ff2000;stroke-width:4.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#DotM);marker-end:url(#Arrow1Mend-6)"
+ sodipodi:nodetypes="cc" />
+ <g
+ transform="translate(-48.571429,-344.28571)"
+ id="g6004-9">
+ <text
+ xml:space="preserve"
+ style="font-size:22px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ x="179.71428"
+ y="707.79077"
+ id="text6000-5"
+ sodipodi:linespacing="125%"
+ inkscape:transform-center-x="-72.857143"
+ inkscape:transform-center-y="-14.398438"><tspan
+ sodipodi:role="line"
+ id="tspan6002-5"
+ x="179.71428"
+ y="707.79077">frames, eod</tspan></text>
+ </g>
+ </g>
+ <g
+ id="g6321-0"
+ transform="matrix(0,-0.89836447,0.89836447,0,427.53416,811.02273)">
+ <path
+ inkscape:connector-curvature="0"
+ id="path6125-5"
+ d="m 214.28571,330.93361 0,72.85714"
+ style="fill:none;stroke:#ff2000;stroke-width:4.0999999;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#DotM);marker-end:url(#Arrow1Mend-6)"
+ sodipodi:nodetypes="cc" />
+ <g
+ transform="translate(-48.571429,-344.28571)"
+ id="g6004-0">
+ <text
+ xml:space="preserve"
+ style="font-size:22px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Monospace;-inkscape-font-specification:Monospace"
+ x="179.71428"
+ y="707.79077"
+ id="text6000-6"
+ sodipodi:linespacing="125%"
+ inkscape:transform-center-x="-72.857143"
+ inkscape:transform-center-y="-14.398438"><tspan
+ sodipodi:role="line"
+ id="tspan6002-2"
+ x="179.71428"
+ y="707.79077">frames, eod</tspan></text>
+ </g>
+ </g>
+ <g
+ id="g4078"
+ transform="translate(-27.103127,-397.328)">
+ <text
+ sodipodi:linespacing="125%"
+ id="text3160"
+ y="843.69019"
+ x="35.103127"
+ style="font-size:32px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+ xml:space="preserve"><tspan
+ style="font-size:28px;font-weight:bold;-inkscape-font-specification:Courier 10 Pitch Bold"
+ y="843.69019"
+ x="35.103127"
+ id="tspan3162"
+ sodipodi:role="line">source.wav</tspan></text>
+ <rect
+ rx="10"
+ ry="1.3280028"
+ y="822.36218"
+ x="20"
+ height="30"
+ width="200"
+ id="rect3164"
+ style="fill:#3bff00;fill-opacity:0.19672134;stroke:#008200;stroke-width:4.0999999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0" />
+ </g>
+ <g
+ id="g4086"
+ transform="matrix(0.89836447,0,0,0.89836447,102.35936,24.596961)">
+ <g
+ id="g8299">
+ <text
+ xml:space="preserve"
+ style="font-size:32px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Courier 10 Pitch;-inkscape-font-specification:Courier 10 Pitch"
+ x="859.6861"
+ y="850.19153"
+ id="text3160-2"
+ sodipodi:linespacing="125%"><tspan
+ id="tspan4071"
+ sodipodi:role="line"
+ x="859.6861"
+ y="850.19153"
+ style="font-size:28px;font-weight:bold;-inkscape-font-specification:Courier 10 Pitch Bold">output.mp3</tspan></text>
+ <rect
+ style="fill:#3bff00;fill-opacity:0.19672134;stroke:#008200;stroke-width:4.0999999;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ id="rect3164-8"
+ width="205.94591"
+ height="43.394699"
+ x="840"
+ y="822.36218"
+ ry="10.000679"
+ rx="10" />
+ </g>
+ </g>
+ <rect
+ style="fill:#00b9ff;fill-opacity:0.13934428;stroke:#050082;stroke-width:3.6832943;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
+ id="rect4091"
+ width="242.55841"
+ height="62.885513"
+ x="285.49762"
+ y="756.8642"
+ rx="8.9836445"
+ ry="8.9836445" />
+ <rect
+ style="fill:#00b9ff;fill-opacity:0.13934428;stroke:#050082;stroke-width:3.6832943;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;display:inline"
+ id="rect4091-4"
+ width="242.55841"
+ height="62.885513"
+ x="528.05603"
+ y="756.8642"
+ rx="8.9836445"
+ ry="8.9836445" />
+ <path
+ style="fill:none;stroke:#008309;stroke-width:4.88025284;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#DotS);marker-end:url(#Arrow2Send);display:inline"
+ d="m 955.32395,621.60884 34.84869,0 0,134.30291"
+ id="path4141-4"
+ inkscape:connector-type="orthogonal"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="csc" />
+ <path
+ style="fill:none;stroke:#008309;stroke-width:5.53178072;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:url(#DotS);marker-end:url(#Arrow2Send);display:inline"
+ d="m 50,462.36218 0,150 39.003028,-0.46159"
+ id="path4141-4-3"
+ inkscape:connector-type="orthogonal"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="ccc" />
+ </g>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
+<svg width="53cm" height="39cm" viewBox="38 18 1051 762" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <g>
+ <rect style="fill: #ffffff" x="610" y="20" width="467.573" height="440"/>
+ <path style="fill: #ffffff" d="M 610,20 A 10,10 0 0 0 600,30 L 610,30 z"/>
+ <path style="fill: #ffffff" d="M 1087.57,30 A 10,10 0 0 0 1077.57,20 L 1077.57,30 z"/>
+ <rect style="fill: #ffffff" x="600" y="30" width="487.573" height="420"/>
+ <path style="fill: #ffffff" d="M 600,450 A 10,10 0 0 0 610,460 L 610,450 z"/>
+ <path style="fill: #ffffff" d="M 1077.57,460 A 10,10 0 0 0 1087.57,450 L 1077.57,450 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="610" y1="20" x2="1077.57" y2="20"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="610" y1="460" x2="1077.57" y2="460"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 610,20 A 10,10 0 0 0 600,30"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 1087.57,30 A 10,10 0 0 0 1077.57,20"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="600" y1="30" x2="600" y2="450"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="1087.57" y1="30" x2="1087.57" y2="450"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 600,450 A 10,10 0 0 0 610,460"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 1077.57,460 A 10,10 0 0 0 1087.57,450"/>
+ <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="843.786" y="243.9">
+ <tspan x="843.786" y="243.9"></tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #ffffff" x="650" y="240" width="380" height="180"/>
+ <path style="fill: #ffffff" d="M 650,240 A 10,10 0 0 0 640,250 L 650,250 z"/>
+ <path style="fill: #ffffff" d="M 1040,250 A 10,10 0 0 0 1030,240 L 1030,250 z"/>
+ <rect style="fill: #ffffff" x="640" y="250" width="400" height="160"/>
+ <path style="fill: #ffffff" d="M 640,410 A 10,10 0 0 0 650,420 L 650,410 z"/>
+ <path style="fill: #ffffff" d="M 1030,420 A 10,10 0 0 0 1040,410 L 1030,410 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="650" y1="240" x2="1030" y2="240"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="650" y1="420" x2="1030" y2="420"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 650,240 A 10,10 0 0 0 640,250"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 1040,250 A 10,10 0 0 0 1030,240"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="640" y1="250" x2="640" y2="410"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1040" y1="250" x2="1040" y2="410"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 640,410 A 10,10 0 0 0 650,420"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 1030,420 A 10,10 0 0 0 1040,410"/>
+ <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="840" y="333.9">
+ <tspan x="840" y="333.9"></tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #ffffff" x="50" y="20" width="520" height="500"/>
+ <path style="fill: #ffffff" d="M 50,20 A 10,10 0 0 0 40,30 L 50,30 z"/>
+ <path style="fill: #ffffff" d="M 580,30 A 10,10 0 0 0 570,20 L 570,30 z"/>
+ <rect style="fill: #ffffff" x="40" y="30" width="540" height="480"/>
+ <path style="fill: #ffffff" d="M 40,510 A 10,10 0 0 0 50,520 L 50,510 z"/>
+ <path style="fill: #ffffff" d="M 570,520 A 10,10 0 0 0 580,510 L 570,510 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="50" y1="20" x2="570" y2="20"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="50" y1="520" x2="570" y2="520"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 50,20 A 10,10 0 0 0 40,30"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 580,30 A 10,10 0 0 0 570,20"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="40" y1="30" x2="40" y2="510"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="580" y1="30" x2="580" y2="510"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 40,510 A 10,10 0 0 0 50,520"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 570,520 A 10,10 0 0 0 580,510"/>
+ <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="310" y="273.9">
+ <tspan x="310" y="273.9"></tspan>
+ </text>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ff0400" points="660,369.882 420,369.882 420,370 196.444,370 "/>
+ <polygon style="fill: #ff0400" points="188.944,370 198.944,365 196.444,370 198.944,375 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ff0400" points="188.944,370 198.944,365 196.444,370 198.944,375 "/>
+ </g>
+ <g>
+ <rect style="fill: #ffffff" x="650" y="80" width="380" height="140"/>
+ <path style="fill: #ffffff" d="M 650,80 A 10,10 0 0 0 640,90 L 650,90 z"/>
+ <path style="fill: #ffffff" d="M 1040,90 A 10,10 0 0 0 1030,80 L 1030,90 z"/>
+ <rect style="fill: #ffffff" x="640" y="90" width="400" height="120"/>
+ <path style="fill: #ffffff" d="M 640,210 A 10,10 0 0 0 650,220 L 650,210 z"/>
+ <path style="fill: #ffffff" d="M 1030,220 A 10,10 0 0 0 1040,210 L 1030,210 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="650" y1="80" x2="1030" y2="80"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="650" y1="220" x2="1030" y2="220"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 650,80 A 10,10 0 0 0 640,90"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 1040,90 A 10,10 0 0 0 1030,80"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="640" y1="90" x2="640" y2="210"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1040" y1="90" x2="1040" y2="210"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 640,210 A 10,10 0 0 0 650,220"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 1030,220 A 10,10 0 0 0 1040,210"/>
+ <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="840" y="153.9">
+ <tspan x="840" y="153.9"></tspan>
+ </text>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #ffa500" points="279.4,320 280,320 280,541.32 "/>
+ <polygon style="fill: #ffa500" points="280,548.82 275,538.82 280,541.32 285,538.82 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #ffa500" points="280,548.82 275,538.82 280,541.32 285,538.82 "/>
+ </g>
+ <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="400" y="226.04">
+ <tspan x="400" y="226.04"></tspan>
+ </text>
+ <text font-size="22.5778" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="203.776" y="60">
+ <tspan x="203.776" y="60">TimeSide Engine</tspan>
+ </text>
+ <g>
+ <rect style="fill: #ff0400" x="870" y="140" width="138.05" height="63.1046"/>
+ <path style="fill: #ff0400" d="M 870,140 A 10,10 0 0 0 860,150 L 870,150 z"/>
+ <path style="fill: #ff0400" d="M 1018.05,150 A 10,10 0 0 0 1008.05,140 L 1008.05,150 z"/>
+ <rect style="fill: #ff0400" x="860" y="150" width="158.05" height="43.1046"/>
+ <path style="fill: #ff0400" d="M 860,193.105 A 10,10 0 0 0 870,203.105 L 870,193.105 z"/>
+ <path style="fill: #ff0400" d="M 1008.05,203.105 A 10,10 0 0 0 1018.05,193.105 L 1008.05,193.105 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="870" y1="140" x2="1008.05" y2="140"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="870" y1="203.105" x2="1008.05" y2="203.105"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 870,140 A 10,10 0 0 0 860,150"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 1018.05,150 A 10,10 0 0 0 1008.05,140"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="860" y1="150" x2="860" y2="193.105"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="1018.05" y1="150" x2="1018.05" y2="193.105"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 860,193.105 A 10,10 0 0 0 870,203.105"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 1008.05,203.105 A 10,10 0 0 0 1018.05,193.105"/>
+ <text font-size="19.7556" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="939.025" y="177.555">
+ <tspan x="939.025" y="177.555">Metadata</tspan>
+ </text>
+ </g>
+ <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="298.536" y="150">
+ <tspan x="298.536" y="150"></tspan>
+ </text>
+ <text font-size="22.5778" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="800" y="120">
+ <tspan x="800" y="120">Media</tspan>
+ </text>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #1af5dd" points="183.9,290 100.537,290 100.537,290 205.67,290 "/>
+ <polygon style="fill: #1af5dd" points="208.82,290 204.62,292.1 205.67,290 204.62,287.9 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #1af5dd" points="208.82,290 204.62,292.1 205.67,290 204.62,287.9 "/>
+ </g>
+ <g>
+ <rect style="fill: #c3d9ff" x="230" y="260" width="98.8" height="60"/>
+ <path style="fill: #c3d9ff" d="M 230,260 A 10,10 0 0 0 220,270 L 230,270 z"/>
+ <path style="fill: #c3d9ff" d="M 338.8,270 A 10,10 0 0 0 328.8,260 L 328.8,270 z"/>
+ <rect style="fill: #c3d9ff" x="220" y="270" width="118.8" height="40"/>
+ <path style="fill: #c3d9ff" d="M 220,310 A 10,10 0 0 0 230,320 L 230,310 z"/>
+ <path style="fill: #c3d9ff" d="M 328.8,320 A 10,10 0 0 0 338.8,310 L 328.8,310 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="230" y1="260" x2="328.8" y2="260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="230" y1="320" x2="328.8" y2="320"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 230,260 A 10,10 0 0 0 220,270"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 338.8,270 A 10,10 0 0 0 328.8,260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="220" y1="270" x2="220" y2="310"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="338.8" y1="270" x2="338.8" y2="310"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 220,310 A 10,10 0 0 0 230,320"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 328.8,320 A 10,10 0 0 0 338.8,310"/>
+ <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="279.4" y="296.003">
+ <tspan x="279.4" y="296.003">Grapher</tspan>
+ </text>
+ </g>
+ <text font-size="22.5778" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="697.812" y="60">
+ <tspan x="697.812" y="60">Web Server (Telemeta)</tspan>
+ </text>
+ <g>
+ <rect style="fill: #c3d9ff" x="70" y="260" width="103.9" height="60"/>
+ <path style="fill: #c3d9ff" d="M 70,260 A 10,10 0 0 0 60,270 L 70,270 z"/>
+ <path style="fill: #c3d9ff" d="M 183.9,270 A 10,10 0 0 0 173.9,260 L 173.9,270 z"/>
+ <rect style="fill: #c3d9ff" x="60" y="270" width="123.9" height="40"/>
+ <path style="fill: #c3d9ff" d="M 60,310 A 10,10 0 0 0 70,320 L 70,310 z"/>
+ <path style="fill: #c3d9ff" d="M 173.9,320 A 10,10 0 0 0 183.9,310 L 173.9,310 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="260" x2="173.9" y2="260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="320" x2="173.9" y2="320"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 70,260 A 10,10 0 0 0 60,270"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 183.9,270 A 10,10 0 0 0 173.9,260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="60" y1="270" x2="60" y2="310"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="183.9" y1="270" x2="183.9" y2="310"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 60,310 A 10,10 0 0 0 70,320"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 173.9,320 A 10,10 0 0 0 183.9,310"/>
+ <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="121.95" y="296.003">
+ <tspan x="121.95" y="296.003">Analyzer</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #c3d9ff" x="370" y="260" width="160" height="60"/>
+ <path style="fill: #c3d9ff" d="M 370,260 A 10,10 0 0 0 360,270 L 370,270 z"/>
+ <path style="fill: #c3d9ff" d="M 540,270 A 10,10 0 0 0 530,260 L 530,270 z"/>
+ <rect style="fill: #c3d9ff" x="360" y="270" width="180" height="40"/>
+ <path style="fill: #c3d9ff" d="M 360,310 A 10,10 0 0 0 370,320 L 370,310 z"/>
+ <path style="fill: #c3d9ff" d="M 530,320 A 10,10 0 0 0 540,310 L 530,310 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="370" y1="260" x2="530" y2="260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="370" y1="320" x2="530" y2="320"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 370,260 A 10,10 0 0 0 360,270"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 540,270 A 10,10 0 0 0 530,260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="360" y1="270" x2="360" y2="310"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="540" y1="270" x2="540" y2="310"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 360,310 A 10,10 0 0 0 370,320"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 530,320 A 10,10 0 0 0 540,310"/>
+ <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="450" y="296.003">
+ <tspan x="450" y="296.003">Encoder</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #c3d9ff" x="70" y="100" width="457.071" height="100"/>
+ <path style="fill: #c3d9ff" d="M 70,100 A 10,10 0 0 0 60,110 L 70,110 z"/>
+ <path style="fill: #c3d9ff" d="M 537.071,110 A 10,10 0 0 0 527.071,100 L 527.071,110 z"/>
+ <rect style="fill: #c3d9ff" x="60" y="110" width="477.071" height="80"/>
+ <path style="fill: #c3d9ff" d="M 60,190 A 10,10 0 0 0 70,200 L 70,190 z"/>
+ <path style="fill: #c3d9ff" d="M 527.071,200 A 10,10 0 0 0 537.071,190 L 527.071,190 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="100" x2="527.071" y2="100"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="200" x2="527.071" y2="200"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 70,100 A 10,10 0 0 0 60,110"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 537.071,110 A 10,10 0 0 0 527.071,100"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="60" y1="110" x2="60" y2="190"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="537.071" y1="110" x2="537.071" y2="190"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 60,190 A 10,10 0 0 0 70,200"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 527.071,200 A 10,10 0 0 0 537.071,190"/>
+ <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="298.536" y="156.003">
+ <tspan x="298.536" y="156.003">Decoder</tspan>
+ </text>
+ </g>
+ <text font-size="22.5778" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:700" x="960" y="320">
+ <tspan x="960" y="320">Expert</tspan>
+ <tspan x="960" y="348.222">Metadata</tspan>
+ </text>
+ <g>
+ <rect style="fill: #ff0400" x="670" y="340" width="197.945" height="59.7655"/>
+ <path style="fill: #ff0400" d="M 670,340 A 10,10 0 0 0 660,350 L 670,350 z"/>
+ <path style="fill: #ff0400" d="M 877.945,350 A 10,10 0 0 0 867.945,340 L 867.945,350 z"/>
+ <rect style="fill: #ff0400" x="660" y="350" width="217.945" height="39.7655"/>
+ <path style="fill: #ff0400" d="M 660,389.766 A 10,10 0 0 0 670,399.766 L 670,389.766 z"/>
+ <path style="fill: #ff0400" d="M 867.945,399.766 A 10,10 0 0 0 877.945,389.766 L 867.945,389.766 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="340" x2="867.945" y2="340"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="399.766" x2="867.945" y2="399.766"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 670,340 A 10,10 0 0 0 660,350"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 877.945,350 A 10,10 0 0 0 867.945,340"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="660" y1="350" x2="660" y2="389.766"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="877.945" y1="350" x2="877.945" y2="389.766"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 660,389.766 A 10,10 0 0 0 670,399.766"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 867.945,399.766 A 10,10 0 0 0 877.945,389.766"/>
+ <text font-size="19.7556" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="768.972" y="375.886">
+ <tspan x="768.972" y="375.886">Annotations</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #ff0400" x="670" y="260" width="200.874" height="62.6944"/>
+ <path style="fill: #ff0400" d="M 670,260 A 10,10 0 0 0 660,270 L 670,270 z"/>
+ <path style="fill: #ff0400" d="M 880.874,270 A 10,10 0 0 0 870.874,260 L 870.874,270 z"/>
+ <rect style="fill: #ff0400" x="660" y="270" width="220.874" height="42.6944"/>
+ <path style="fill: #ff0400" d="M 660,312.694 A 10,10 0 0 0 670,322.694 L 670,312.694 z"/>
+ <path style="fill: #ff0400" d="M 870.874,322.694 A 10,10 0 0 0 880.874,312.694 L 870.874,312.694 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="260" x2="870.874" y2="260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="322.694" x2="870.874" y2="322.694"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 670,260 A 10,10 0 0 0 660,270"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 880.874,270 A 10,10 0 0 0 870.874,260"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="660" y1="270" x2="660" y2="312.694"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="880.874" y1="270" x2="880.874" y2="312.694"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 660,312.694 A 10,10 0 0 0 670,322.694"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 870.874,322.694 A 10,10 0 0 0 880.874,312.694"/>
+ <text font-size="19.7556" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="770.437" y="297.35">
+ <tspan x="770.437" y="297.35">Archives Metadata</tspan>
+ </text>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #8b6914" points="580,642.628 580,640 681.894,640 681.894,478.68 "/>
+ <polygon style="fill: #8b6914" points="681.894,471.18 686.894,481.18 681.894,478.68 676.894,481.18 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #8b6914" points="681.894,471.18 686.894,481.18 681.894,478.68 676.894,481.18 "/>
+ </g>
+ <g>
+ <rect style="fill: #1e90ff" x="670" y="140" width="140" height="62.6944"/>
+ <path style="fill: #1e90ff" d="M 670,140 A 10,10 0 0 0 660,150 L 670,150 z"/>
+ <path style="fill: #1e90ff" d="M 820,150 A 10,10 0 0 0 810,140 L 810,150 z"/>
+ <rect style="fill: #1e90ff" x="660" y="150" width="160" height="42.6944"/>
+ <path style="fill: #1e90ff" d="M 660,192.694 A 10,10 0 0 0 670,202.694 L 670,192.694 z"/>
+ <path style="fill: #1e90ff" d="M 810,202.694 A 10,10 0 0 0 820,192.694 L 810,192.694 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="140" x2="810" y2="140"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="202.694" x2="810" y2="202.694"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 670,140 A 10,10 0 0 0 660,150"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 820,150 A 10,10 0 0 0 810,140"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="660" y1="150" x2="660" y2="192.694"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="820" y1="150" x2="820" y2="192.694"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 660,192.694 A 10,10 0 0 0 670,202.694"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 810,202.694 A 10,10 0 0 0 820,192.694"/>
+ <text font-size="19.7556" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="740" y="177.35">
+ <tspan x="740" y="177.35">Audio</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #ffffff" x="50" y="560" width="520" height="165.255"/>
+ <path style="fill: #ffffff" d="M 50,560 A 10,10 0 0 0 40,570 L 50,570 z"/>
+ <path style="fill: #ffffff" d="M 580,570 A 10,10 0 0 0 570,560 L 570,570 z"/>
+ <rect style="fill: #ffffff" x="40" y="570" width="540" height="145.255"/>
+ <path style="fill: #ffffff" d="M 40,715.255 A 10,10 0 0 0 50,725.255 L 50,715.255 z"/>
+ <path style="fill: #ffffff" d="M 570,725.255 A 10,10 0 0 0 580,715.255 L 570,715.255 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="50" y1="560" x2="570" y2="560"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="50" y1="725.255" x2="570" y2="725.255"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 50,560 A 10,10 0 0 0 40,570"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 580,570 A 10,10 0 0 0 570,560"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="40" y1="570" x2="40" y2="715.255"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="580" y1="570" x2="580" y2="715.255"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 40,715.255 A 10,10 0 0 0 50,725.255"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 570,725.255 A 10,10 0 0 0 580,715.255"/>
+ <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="310" y="646.527">
+ <tspan x="310" y="646.527"></tspan>
+ </text>
+ </g>
+ <text font-size="22.5778" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="240" y="600">
+ <tspan x="240" y="600">TimeSide UI</tspan>
+ </text>
+ <g>
+ <rect style="fill: #ffff00" x="90" y="620" width="440" height="78.9689"/>
+ <path style="fill: #ffff00" d="M 90,620 A 10,10 0 0 0 80,630 L 90,630 z"/>
+ <path style="fill: #ffff00" d="M 540,630 A 10,10 0 0 0 530,620 L 530,630 z"/>
+ <rect style="fill: #ffff00" x="80" y="630" width="460" height="58.9689"/>
+ <path style="fill: #ffff00" d="M 80,688.969 A 10,10 0 0 0 90,698.969 L 90,688.969 z"/>
+ <path style="fill: #ffff00" d="M 530,698.969 A 10,10 0 0 0 540,688.969 L 530,688.969 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="90" y1="620" x2="530" y2="620"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="90" y1="698.969" x2="530" y2="698.969"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 90,620 A 10,10 0 0 0 80,630"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 540,630 A 10,10 0 0 0 530,620"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="80" y1="630" x2="80" y2="688.969"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="540" y1="630" x2="540" y2="688.969"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 80,688.969 A 10,10 0 0 0 90,698.969"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 530,698.969 A 10,10 0 0 0 540,688.969"/>
+ <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="310" y="665.487">
+ <tspan x="310" y="665.487">Player (HTML5, CSS, JavaScript)</tspan>
+ </text>
+ </g>
+ <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="310" y="698.968">
+ <tspan x="310" y="698.968"></tspan>
+ </text>
+ <g>
+ <g>
+ <rect style="fill: #ffffff" x="740" y="500" width="337.172" height="280"/>
+ <rect style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #ff0000" x="740" y="500" width="337.172" height="280"/>
+ <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="908.586" y="643.9">
+ <tspan x="908.586" y="643.9"></tspan>
+ </text>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #0000ff" points="761.172,567 801.172,567 801.172,567 824.728,567 "/>
+ <polygon style="fill: #0000ff" points="832.228,567 822.228,572 824.728,567 822.228,562 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #0000ff" points="832.228,567 822.228,572 824.728,567 822.228,562 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ff0400" points="761.172,607 801.172,607 801.172,607 824.728,607 "/>
+ <polygon style="fill: #ff0400" points="832.228,607 822.228,612 824.728,607 822.228,602 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ff0400" points="832.228,607 822.228,612 824.728,607 822.228,602 "/>
+ </g>
+ <text font-size="19.7556" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="761.172" y="527">
+ <tspan x="761.172" y="527">Legend</tspan>
+ </text>
+ <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="761.172" y="596">
+ <tspan x="761.172" y="596"></tspan>
+ </text>
+ <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="861.172" y="567">
+ <tspan x="861.172" y="567">Binary audio data</tspan>
+ </text>
+ <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="861.172" y="607">
+ <tspan x="861.172" y="607">Textual metadata</tspan>
+ </text>
+ <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="861.172" y="727">
+ <tspan x="861.172" y="727">Graph images</tspan>
+ </text>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ffa500" points="757.172,720 797.172,720 797.172,720 820.728,720 "/>
+ <polygon style="fill: #ffa500" points="828.228,720 818.228,725 820.728,720 818.228,715 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ffa500" points="828.228,720 818.228,725 820.728,720 818.228,715 "/>
+ </g>
+ <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="941.172" y="676">
+ <tspan x="941.172" y="676"></tspan>
+ </text>
+ <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="861.172" y="687">
+ <tspan x="861.172" y="687">Analysis results</tspan>
+ </text>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #1af5dd" points="761.172,687 801.172,687 801.172,687 824.728,687 "/>
+ <polygon style="fill: #1af5dd" points="832.228,687 822.228,692 824.728,687 822.228,682 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #1af5dd" points="832.228,687 822.228,692 824.728,687 822.228,682 "/>
+ </g>
+ <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="941.172" y="696">
+ <tspan x="941.172" y="696"></tspan>
+ </text>
+ <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="921.172" y="727">
+ <tspan x="921.172" y="727"></tspan>
+ </text>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #a020f0" points="761.172,647 801.172,647 801.172,647 824.728,647 "/>
+ <polygon style="fill: #a020f0" points="832.228,647 822.228,652 824.728,647 822.228,642 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #a020f0" points="832.228,647 822.228,652 824.728,647 822.228,642 "/>
+ </g>
+ <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="861.172" y="647">
+ <tspan x="861.172" y="647">Audio data & metadata </tspan>
+ </text>
+ <g>
+ <line style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #8b6914" x1="760" y1="760" x2="823.556" y2="760"/>
+ <polygon style="fill: #8b6914" points="831.056,760 821.056,765 823.556,760 821.056,755 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #8b6914" points="831.056,760 821.056,765 823.556,760 821.056,755 "/>
+ </g>
+ <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="857.172" y="764.972">
+ <tspan x="857.172" y="764.972">HTTP Requests</tspan>
+ </text>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #ff0000" points="660,290.276 555.752,290.276 "/>
+ <polygon style="fill: #ff0000" points="548.252,290.276 558.252,285.276 555.752,290.276 558.252,295.276 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #ff0000" points="548.252,290.276 558.252,285.276 555.752,290.276 558.252,295.276 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #0000ff" points="121,200 121,241.32 "/>
+ <polygon style="fill: #0000ff" points="121,248.82 116,238.82 121,241.32 126,238.82 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #0000ff" points="121,248.82 116,238.82 121,241.32 126,238.82 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #0000ff" points="279.028,200 279.028,241.32 "/>
+ <polygon style="fill: #0000ff" points="279.028,248.82 274.028,238.82 279.028,241.32 284.028,238.82 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #0000ff" points="279.028,248.82 274.028,238.82 279.028,241.32 284.028,238.82 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="453.514,200 453.514,241.32 "/>
+ <polygon style="fill: #a020f0" points="453.514,248.82 448.514,238.82 453.514,241.32 458.514,238.82 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="453.514,248.82 448.514,238.82 453.514,241.32 458.514,238.82 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="453.082,320 453.082,320 453.082,541.32 "/>
+ <polygon style="fill: #a020f0" points="453.082,548.82 448.082,538.82 453.082,541.32 458.082,538.82 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="453.082,548.82 448.082,538.82 453.082,541.32 458.082,538.82 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="640,150 640,150 555.752,150 "/>
+ <polygon style="fill: #a020f0" points="548.252,150 558.252,145 555.752,150 558.252,155 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="548.252,150 558.252,145 555.752,150 558.252,155 "/>
+ </g>
+ <g>
+ <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #1af5dd" points="120.34,320 120.94,320 120.94,541.32 "/>
+ <polygon style="fill: #1af5dd" points="120.94,548.82 115.94,538.82 120.94,541.32 125.94,538.82 "/>
+ <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #1af5dd" points="120.94,548.82 115.94,538.82 120.94,541.32 125.94,538.82 "/>
+ </g>
+ <g>
+ <rect style="fill: #7dff7d" x="70" y="420" width="460" height="60"/>
+ <path style="fill: #7dff7d" d="M 70,420 A 10,10 0 0 0 60,430 L 70,430 z"/>
+ <path style="fill: #7dff7d" d="M 540,430 A 10,10 0 0 0 530,420 L 530,430 z"/>
+ <rect style="fill: #7dff7d" x="60" y="430" width="480" height="40"/>
+ <path style="fill: #7dff7d" d="M 60,470 A 10,10 0 0 0 70,480 L 70,470 z"/>
+ <path style="fill: #7dff7d" d="M 530,480 A 10,10 0 0 0 540,470 L 530,470 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="420" x2="530" y2="420"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="480" x2="530" y2="480"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 70,420 A 10,10 0 0 0 60,430"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 540,430 A 10,10 0 0 0 530,420"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="60" y1="430" x2="60" y2="470"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="540" y1="430" x2="540" y2="470"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 60,470 A 10,10 0 0 0 70,480"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 530,480 A 10,10 0 0 0 540,470"/>
+ <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="300" y="456.003">
+ <tspan x="300" y="456.003">Cache</tspan>
+ </text>
+ </g>
+ <g>
+ <rect style="fill: #c3d9ff" x="70" y="340" width="100" height="60"/>
+ <path style="fill: #c3d9ff" d="M 70,340 A 10,10 0 0 0 60,350 L 70,350 z"/>
+ <path style="fill: #c3d9ff" d="M 180,350 A 10,10 0 0 0 170,340 L 170,350 z"/>
+ <rect style="fill: #c3d9ff" x="60" y="350" width="120" height="40"/>
+ <path style="fill: #c3d9ff" d="M 60,390 A 10,10 0 0 0 70,400 L 70,390 z"/>
+ <path style="fill: #c3d9ff" d="M 170,400 A 10,10 0 0 0 180,390 L 170,390 z"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="340" x2="170" y2="340"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="400" x2="170" y2="400"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 70,340 A 10,10 0 0 0 60,350"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 180,350 A 10,10 0 0 0 170,340"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="60" y1="350" x2="60" y2="390"/>
+ <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="180" y1="350" x2="180" y2="390"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 60,390 A 10,10 0 0 0 70,400"/>
+ <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 170,400 A 10,10 0 0 0 180,390"/>
+ <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="120" y="376.003">
+ <tspan x="120" y="376.003">Serializer</tspan>
+ </text>
+ </g>
+</svg>
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/PR-SVG-20010719/DTD/svg10.dtd">
-<svg width="53cm" height="39cm" viewBox="38 18 1051 762" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
- <g>
- <rect style="fill: #ffffff" x="610" y="20" width="467.573" height="440"/>
- <path style="fill: #ffffff" d="M 610,20 A 10,10 0 0 0 600,30 L 610,30 z"/>
- <path style="fill: #ffffff" d="M 1087.57,30 A 10,10 0 0 0 1077.57,20 L 1077.57,30 z"/>
- <rect style="fill: #ffffff" x="600" y="30" width="487.573" height="420"/>
- <path style="fill: #ffffff" d="M 600,450 A 10,10 0 0 0 610,460 L 610,450 z"/>
- <path style="fill: #ffffff" d="M 1077.57,460 A 10,10 0 0 0 1087.57,450 L 1077.57,450 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="610" y1="20" x2="1077.57" y2="20"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="610" y1="460" x2="1077.57" y2="460"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 610,20 A 10,10 0 0 0 600,30"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 1087.57,30 A 10,10 0 0 0 1077.57,20"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="600" y1="30" x2="600" y2="450"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="1087.57" y1="30" x2="1087.57" y2="450"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 600,450 A 10,10 0 0 0 610,460"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 1077.57,460 A 10,10 0 0 0 1087.57,450"/>
- <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="843.786" y="243.9">
- <tspan x="843.786" y="243.9"></tspan>
- </text>
- </g>
- <g>
- <rect style="fill: #ffffff" x="650" y="240" width="380" height="180"/>
- <path style="fill: #ffffff" d="M 650,240 A 10,10 0 0 0 640,250 L 650,250 z"/>
- <path style="fill: #ffffff" d="M 1040,250 A 10,10 0 0 0 1030,240 L 1030,250 z"/>
- <rect style="fill: #ffffff" x="640" y="250" width="400" height="160"/>
- <path style="fill: #ffffff" d="M 640,410 A 10,10 0 0 0 650,420 L 650,410 z"/>
- <path style="fill: #ffffff" d="M 1030,420 A 10,10 0 0 0 1040,410 L 1030,410 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="650" y1="240" x2="1030" y2="240"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="650" y1="420" x2="1030" y2="420"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 650,240 A 10,10 0 0 0 640,250"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 1040,250 A 10,10 0 0 0 1030,240"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="640" y1="250" x2="640" y2="410"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1040" y1="250" x2="1040" y2="410"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 640,410 A 10,10 0 0 0 650,420"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 1030,420 A 10,10 0 0 0 1040,410"/>
- <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="840" y="333.9">
- <tspan x="840" y="333.9"></tspan>
- </text>
- </g>
- <g>
- <rect style="fill: #ffffff" x="50" y="20" width="520" height="500"/>
- <path style="fill: #ffffff" d="M 50,20 A 10,10 0 0 0 40,30 L 50,30 z"/>
- <path style="fill: #ffffff" d="M 580,30 A 10,10 0 0 0 570,20 L 570,30 z"/>
- <rect style="fill: #ffffff" x="40" y="30" width="540" height="480"/>
- <path style="fill: #ffffff" d="M 40,510 A 10,10 0 0 0 50,520 L 50,510 z"/>
- <path style="fill: #ffffff" d="M 570,520 A 10,10 0 0 0 580,510 L 570,510 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="50" y1="20" x2="570" y2="20"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="50" y1="520" x2="570" y2="520"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 50,20 A 10,10 0 0 0 40,30"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 580,30 A 10,10 0 0 0 570,20"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="40" y1="30" x2="40" y2="510"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="580" y1="30" x2="580" y2="510"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 40,510 A 10,10 0 0 0 50,520"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 570,520 A 10,10 0 0 0 580,510"/>
- <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="310" y="273.9">
- <tspan x="310" y="273.9"></tspan>
- </text>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ff0400" points="660,369.882 420,369.882 420,370 196.444,370 "/>
- <polygon style="fill: #ff0400" points="188.944,370 198.944,365 196.444,370 198.944,375 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ff0400" points="188.944,370 198.944,365 196.444,370 198.944,375 "/>
- </g>
- <g>
- <rect style="fill: #ffffff" x="650" y="80" width="380" height="140"/>
- <path style="fill: #ffffff" d="M 650,80 A 10,10 0 0 0 640,90 L 650,90 z"/>
- <path style="fill: #ffffff" d="M 1040,90 A 10,10 0 0 0 1030,80 L 1030,90 z"/>
- <rect style="fill: #ffffff" x="640" y="90" width="400" height="120"/>
- <path style="fill: #ffffff" d="M 640,210 A 10,10 0 0 0 650,220 L 650,210 z"/>
- <path style="fill: #ffffff" d="M 1030,220 A 10,10 0 0 0 1040,210 L 1030,210 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="650" y1="80" x2="1030" y2="80"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="650" y1="220" x2="1030" y2="220"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 650,80 A 10,10 0 0 0 640,90"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 1040,90 A 10,10 0 0 0 1030,80"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="640" y1="90" x2="640" y2="210"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" x1="1040" y1="90" x2="1040" y2="210"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 640,210 A 10,10 0 0 0 650,220"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2; stroke: #000000" d="M 1030,220 A 10,10 0 0 0 1040,210"/>
- <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="840" y="153.9">
- <tspan x="840" y="153.9"></tspan>
- </text>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #ffa500" points="279.4,320 280,320 280,541.32 "/>
- <polygon style="fill: #ffa500" points="280,548.82 275,538.82 280,541.32 285,538.82 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #ffa500" points="280,548.82 275,538.82 280,541.32 285,538.82 "/>
- </g>
- <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="400" y="226.04">
- <tspan x="400" y="226.04"></tspan>
- </text>
- <text font-size="22.5778" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="203.776" y="60">
- <tspan x="203.776" y="60">TimeSide Engine</tspan>
- </text>
- <g>
- <rect style="fill: #ff0400" x="870" y="140" width="138.05" height="63.1046"/>
- <path style="fill: #ff0400" d="M 870,140 A 10,10 0 0 0 860,150 L 870,150 z"/>
- <path style="fill: #ff0400" d="M 1018.05,150 A 10,10 0 0 0 1008.05,140 L 1008.05,150 z"/>
- <rect style="fill: #ff0400" x="860" y="150" width="158.05" height="43.1046"/>
- <path style="fill: #ff0400" d="M 860,193.105 A 10,10 0 0 0 870,203.105 L 870,193.105 z"/>
- <path style="fill: #ff0400" d="M 1008.05,203.105 A 10,10 0 0 0 1018.05,193.105 L 1008.05,193.105 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="870" y1="140" x2="1008.05" y2="140"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="870" y1="203.105" x2="1008.05" y2="203.105"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 870,140 A 10,10 0 0 0 860,150"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 1018.05,150 A 10,10 0 0 0 1008.05,140"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="860" y1="150" x2="860" y2="193.105"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="1018.05" y1="150" x2="1018.05" y2="193.105"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 860,193.105 A 10,10 0 0 0 870,203.105"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 1008.05,203.105 A 10,10 0 0 0 1018.05,193.105"/>
- <text font-size="19.7556" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="939.025" y="177.555">
- <tspan x="939.025" y="177.555">Metadata</tspan>
- </text>
- </g>
- <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="298.536" y="150">
- <tspan x="298.536" y="150"></tspan>
- </text>
- <text font-size="22.5778" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="800" y="120">
- <tspan x="800" y="120">Media</tspan>
- </text>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #1af5dd" points="183.9,290 100.537,290 100.537,290 205.67,290 "/>
- <polygon style="fill: #1af5dd" points="208.82,290 204.62,292.1 205.67,290 204.62,287.9 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #1af5dd" points="208.82,290 204.62,292.1 205.67,290 204.62,287.9 "/>
- </g>
- <g>
- <rect style="fill: #c3d9ff" x="230" y="260" width="98.8" height="60"/>
- <path style="fill: #c3d9ff" d="M 230,260 A 10,10 0 0 0 220,270 L 230,270 z"/>
- <path style="fill: #c3d9ff" d="M 338.8,270 A 10,10 0 0 0 328.8,260 L 328.8,270 z"/>
- <rect style="fill: #c3d9ff" x="220" y="270" width="118.8" height="40"/>
- <path style="fill: #c3d9ff" d="M 220,310 A 10,10 0 0 0 230,320 L 230,310 z"/>
- <path style="fill: #c3d9ff" d="M 328.8,320 A 10,10 0 0 0 338.8,310 L 328.8,310 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="230" y1="260" x2="328.8" y2="260"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="230" y1="320" x2="328.8" y2="320"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 230,260 A 10,10 0 0 0 220,270"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 338.8,270 A 10,10 0 0 0 328.8,260"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="220" y1="270" x2="220" y2="310"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="338.8" y1="270" x2="338.8" y2="310"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 220,310 A 10,10 0 0 0 230,320"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 328.8,320 A 10,10 0 0 0 338.8,310"/>
- <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="279.4" y="296.003">
- <tspan x="279.4" y="296.003">Grapher</tspan>
- </text>
- </g>
- <text font-size="22.5778" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="697.812" y="60">
- <tspan x="697.812" y="60">Web Server (Telemeta)</tspan>
- </text>
- <g>
- <rect style="fill: #c3d9ff" x="70" y="260" width="103.9" height="60"/>
- <path style="fill: #c3d9ff" d="M 70,260 A 10,10 0 0 0 60,270 L 70,270 z"/>
- <path style="fill: #c3d9ff" d="M 183.9,270 A 10,10 0 0 0 173.9,260 L 173.9,270 z"/>
- <rect style="fill: #c3d9ff" x="60" y="270" width="123.9" height="40"/>
- <path style="fill: #c3d9ff" d="M 60,310 A 10,10 0 0 0 70,320 L 70,310 z"/>
- <path style="fill: #c3d9ff" d="M 173.9,320 A 10,10 0 0 0 183.9,310 L 173.9,310 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="260" x2="173.9" y2="260"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="320" x2="173.9" y2="320"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 70,260 A 10,10 0 0 0 60,270"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 183.9,270 A 10,10 0 0 0 173.9,260"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="60" y1="270" x2="60" y2="310"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="183.9" y1="270" x2="183.9" y2="310"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 60,310 A 10,10 0 0 0 70,320"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 173.9,320 A 10,10 0 0 0 183.9,310"/>
- <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="121.95" y="296.003">
- <tspan x="121.95" y="296.003">Analyzer</tspan>
- </text>
- </g>
- <g>
- <rect style="fill: #c3d9ff" x="370" y="260" width="160" height="60"/>
- <path style="fill: #c3d9ff" d="M 370,260 A 10,10 0 0 0 360,270 L 370,270 z"/>
- <path style="fill: #c3d9ff" d="M 540,270 A 10,10 0 0 0 530,260 L 530,270 z"/>
- <rect style="fill: #c3d9ff" x="360" y="270" width="180" height="40"/>
- <path style="fill: #c3d9ff" d="M 360,310 A 10,10 0 0 0 370,320 L 370,310 z"/>
- <path style="fill: #c3d9ff" d="M 530,320 A 10,10 0 0 0 540,310 L 530,310 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="370" y1="260" x2="530" y2="260"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="370" y1="320" x2="530" y2="320"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 370,260 A 10,10 0 0 0 360,270"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 540,270 A 10,10 0 0 0 530,260"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="360" y1="270" x2="360" y2="310"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="540" y1="270" x2="540" y2="310"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 360,310 A 10,10 0 0 0 370,320"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 530,320 A 10,10 0 0 0 540,310"/>
- <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="450" y="296.003">
- <tspan x="450" y="296.003">Encoder</tspan>
- </text>
- </g>
- <g>
- <rect style="fill: #c3d9ff" x="70" y="100" width="457.071" height="100"/>
- <path style="fill: #c3d9ff" d="M 70,100 A 10,10 0 0 0 60,110 L 70,110 z"/>
- <path style="fill: #c3d9ff" d="M 537.071,110 A 10,10 0 0 0 527.071,100 L 527.071,110 z"/>
- <rect style="fill: #c3d9ff" x="60" y="110" width="477.071" height="80"/>
- <path style="fill: #c3d9ff" d="M 60,190 A 10,10 0 0 0 70,200 L 70,190 z"/>
- <path style="fill: #c3d9ff" d="M 527.071,200 A 10,10 0 0 0 537.071,190 L 527.071,190 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="100" x2="527.071" y2="100"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="200" x2="527.071" y2="200"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 70,100 A 10,10 0 0 0 60,110"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 537.071,110 A 10,10 0 0 0 527.071,100"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="60" y1="110" x2="60" y2="190"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="537.071" y1="110" x2="537.071" y2="190"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 60,190 A 10,10 0 0 0 70,200"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 527.071,200 A 10,10 0 0 0 537.071,190"/>
- <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="298.536" y="156.003">
- <tspan x="298.536" y="156.003">Decoder</tspan>
- </text>
- </g>
- <text font-size="22.5778" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:700" x="960" y="320">
- <tspan x="960" y="320">Expert</tspan>
- <tspan x="960" y="348.222">Metadata</tspan>
- </text>
- <g>
- <rect style="fill: #ff0400" x="670" y="340" width="197.945" height="59.7655"/>
- <path style="fill: #ff0400" d="M 670,340 A 10,10 0 0 0 660,350 L 670,350 z"/>
- <path style="fill: #ff0400" d="M 877.945,350 A 10,10 0 0 0 867.945,340 L 867.945,350 z"/>
- <rect style="fill: #ff0400" x="660" y="350" width="217.945" height="39.7655"/>
- <path style="fill: #ff0400" d="M 660,389.766 A 10,10 0 0 0 670,399.766 L 670,389.766 z"/>
- <path style="fill: #ff0400" d="M 867.945,399.766 A 10,10 0 0 0 877.945,389.766 L 867.945,389.766 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="340" x2="867.945" y2="340"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="399.766" x2="867.945" y2="399.766"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 670,340 A 10,10 0 0 0 660,350"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 877.945,350 A 10,10 0 0 0 867.945,340"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="660" y1="350" x2="660" y2="389.766"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="877.945" y1="350" x2="877.945" y2="389.766"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 660,389.766 A 10,10 0 0 0 670,399.766"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 867.945,399.766 A 10,10 0 0 0 877.945,389.766"/>
- <text font-size="19.7556" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="768.972" y="375.886">
- <tspan x="768.972" y="375.886">Annotations</tspan>
- </text>
- </g>
- <g>
- <rect style="fill: #ff0400" x="670" y="260" width="200.874" height="62.6944"/>
- <path style="fill: #ff0400" d="M 670,260 A 10,10 0 0 0 660,270 L 670,270 z"/>
- <path style="fill: #ff0400" d="M 880.874,270 A 10,10 0 0 0 870.874,260 L 870.874,270 z"/>
- <rect style="fill: #ff0400" x="660" y="270" width="220.874" height="42.6944"/>
- <path style="fill: #ff0400" d="M 660,312.694 A 10,10 0 0 0 670,322.694 L 670,312.694 z"/>
- <path style="fill: #ff0400" d="M 870.874,322.694 A 10,10 0 0 0 880.874,312.694 L 870.874,312.694 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="260" x2="870.874" y2="260"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="322.694" x2="870.874" y2="322.694"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 670,260 A 10,10 0 0 0 660,270"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 880.874,270 A 10,10 0 0 0 870.874,260"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="660" y1="270" x2="660" y2="312.694"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="880.874" y1="270" x2="880.874" y2="312.694"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 660,312.694 A 10,10 0 0 0 670,322.694"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 870.874,322.694 A 10,10 0 0 0 880.874,312.694"/>
- <text font-size="19.7556" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="770.437" y="297.35">
- <tspan x="770.437" y="297.35">Archives Metadata</tspan>
- </text>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #8b6914" points="580,642.628 580,640 681.894,640 681.894,478.68 "/>
- <polygon style="fill: #8b6914" points="681.894,471.18 686.894,481.18 681.894,478.68 676.894,481.18 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #8b6914" points="681.894,471.18 686.894,481.18 681.894,478.68 676.894,481.18 "/>
- </g>
- <g>
- <rect style="fill: #1e90ff" x="670" y="140" width="140" height="62.6944"/>
- <path style="fill: #1e90ff" d="M 670,140 A 10,10 0 0 0 660,150 L 670,150 z"/>
- <path style="fill: #1e90ff" d="M 820,150 A 10,10 0 0 0 810,140 L 810,150 z"/>
- <rect style="fill: #1e90ff" x="660" y="150" width="160" height="42.6944"/>
- <path style="fill: #1e90ff" d="M 660,192.694 A 10,10 0 0 0 670,202.694 L 670,192.694 z"/>
- <path style="fill: #1e90ff" d="M 810,202.694 A 10,10 0 0 0 820,192.694 L 810,192.694 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="140" x2="810" y2="140"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="670" y1="202.694" x2="810" y2="202.694"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 670,140 A 10,10 0 0 0 660,150"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 820,150 A 10,10 0 0 0 810,140"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="660" y1="150" x2="660" y2="192.694"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="820" y1="150" x2="820" y2="192.694"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 660,192.694 A 10,10 0 0 0 670,202.694"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 810,202.694 A 10,10 0 0 0 820,192.694"/>
- <text font-size="19.7556" style="fill: #ffffff;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="740" y="177.35">
- <tspan x="740" y="177.35">Audio</tspan>
- </text>
- </g>
- <g>
- <rect style="fill: #ffffff" x="50" y="560" width="520" height="165.255"/>
- <path style="fill: #ffffff" d="M 50,560 A 10,10 0 0 0 40,570 L 50,570 z"/>
- <path style="fill: #ffffff" d="M 580,570 A 10,10 0 0 0 570,560 L 570,570 z"/>
- <rect style="fill: #ffffff" x="40" y="570" width="540" height="145.255"/>
- <path style="fill: #ffffff" d="M 40,715.255 A 10,10 0 0 0 50,725.255 L 50,715.255 z"/>
- <path style="fill: #ffffff" d="M 570,725.255 A 10,10 0 0 0 580,715.255 L 570,715.255 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="50" y1="560" x2="570" y2="560"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="50" y1="725.255" x2="570" y2="725.255"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 50,560 A 10,10 0 0 0 40,570"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 580,570 A 10,10 0 0 0 570,560"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="40" y1="570" x2="40" y2="715.255"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" x1="580" y1="570" x2="580" y2="715.255"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 40,715.255 A 10,10 0 0 0 50,725.255"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 3; stroke: #000000" d="M 570,725.255 A 10,10 0 0 0 580,715.255"/>
- <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="310" y="646.527">
- <tspan x="310" y="646.527"></tspan>
- </text>
- </g>
- <text font-size="22.5778" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="240" y="600">
- <tspan x="240" y="600">TimeSide UI</tspan>
- </text>
- <g>
- <rect style="fill: #ffff00" x="90" y="620" width="440" height="78.9689"/>
- <path style="fill: #ffff00" d="M 90,620 A 10,10 0 0 0 80,630 L 90,630 z"/>
- <path style="fill: #ffff00" d="M 540,630 A 10,10 0 0 0 530,620 L 530,630 z"/>
- <rect style="fill: #ffff00" x="80" y="630" width="460" height="58.9689"/>
- <path style="fill: #ffff00" d="M 80,688.969 A 10,10 0 0 0 90,698.969 L 90,688.969 z"/>
- <path style="fill: #ffff00" d="M 530,698.969 A 10,10 0 0 0 540,688.969 L 530,688.969 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="90" y1="620" x2="530" y2="620"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="90" y1="698.969" x2="530" y2="698.969"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 90,620 A 10,10 0 0 0 80,630"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 540,630 A 10,10 0 0 0 530,620"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="80" y1="630" x2="80" y2="688.969"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="540" y1="630" x2="540" y2="688.969"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 80,688.969 A 10,10 0 0 0 90,698.969"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 530,698.969 A 10,10 0 0 0 540,688.969"/>
- <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="310" y="665.487">
- <tspan x="310" y="665.487">Player (HTML5, CSS, JavaScript)</tspan>
- </text>
- </g>
- <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="310" y="698.968">
- <tspan x="310" y="698.968"></tspan>
- </text>
- <g>
- <g>
- <rect style="fill: #ffffff" x="740" y="500" width="337.172" height="280"/>
- <rect style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #ff0000" x="740" y="500" width="337.172" height="280"/>
- <text font-size="12.8" style="fill: #00ff00;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="908.586" y="643.9">
- <tspan x="908.586" y="643.9"></tspan>
- </text>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #0000ff" points="761.172,567 801.172,567 801.172,567 824.728,567 "/>
- <polygon style="fill: #0000ff" points="832.228,567 822.228,572 824.728,567 822.228,562 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #0000ff" points="832.228,567 822.228,572 824.728,567 822.228,562 "/>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ff0400" points="761.172,607 801.172,607 801.172,607 824.728,607 "/>
- <polygon style="fill: #ff0400" points="832.228,607 822.228,612 824.728,607 822.228,602 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ff0400" points="832.228,607 822.228,612 824.728,607 822.228,602 "/>
- </g>
- <text font-size="19.7556" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:700" x="761.172" y="527">
- <tspan x="761.172" y="527">Legend</tspan>
- </text>
- <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="761.172" y="596">
- <tspan x="761.172" y="596"></tspan>
- </text>
- <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="861.172" y="567">
- <tspan x="861.172" y="567">Binary audio data</tspan>
- </text>
- <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="861.172" y="607">
- <tspan x="861.172" y="607">Textual metadata</tspan>
- </text>
- <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="861.172" y="727">
- <tspan x="861.172" y="727">Graph images</tspan>
- </text>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ffa500" points="757.172,720 797.172,720 797.172,720 820.728,720 "/>
- <polygon style="fill: #ffa500" points="828.228,720 818.228,725 820.728,720 818.228,715 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #ffa500" points="828.228,720 818.228,725 820.728,720 818.228,715 "/>
- </g>
- <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="941.172" y="676">
- <tspan x="941.172" y="676"></tspan>
- </text>
- <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="861.172" y="687">
- <tspan x="861.172" y="687">Analysis results</tspan>
- </text>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #1af5dd" points="761.172,687 801.172,687 801.172,687 824.728,687 "/>
- <polygon style="fill: #1af5dd" points="832.228,687 822.228,692 824.728,687 822.228,682 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #1af5dd" points="832.228,687 822.228,692 824.728,687 822.228,682 "/>
- </g>
- <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="941.172" y="696">
- <tspan x="941.172" y="696"></tspan>
- </text>
- <text font-size="12.8" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="921.172" y="727">
- <tspan x="921.172" y="727"></tspan>
- </text>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #a020f0" points="761.172,647 801.172,647 801.172,647 824.728,647 "/>
- <polygon style="fill: #a020f0" points="832.228,647 822.228,652 824.728,647 822.228,642 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #a020f0" points="832.228,647 822.228,652 824.728,647 822.228,642 "/>
- </g>
- <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="861.172" y="647">
- <tspan x="861.172" y="647">Audio data & metadata </tspan>
- </text>
- <g>
- <line style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #8b6914" x1="760" y1="760" x2="823.556" y2="760"/>
- <polygon style="fill: #8b6914" points="831.056,760 821.056,765 823.556,760 821.056,755 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 8; stroke: #8b6914" points="831.056,760 821.056,765 823.556,760 821.056,755 "/>
- </g>
- <text font-size="16.9333" style="fill: #000000;text-anchor:start;font-family:sans-serif;font-style:normal;font-weight:normal" x="857.172" y="764.972">
- <tspan x="857.172" y="764.972">HTTP Requests</tspan>
- </text>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #ff0000" points="660,290.276 555.752,290.276 "/>
- <polygon style="fill: #ff0000" points="548.252,290.276 558.252,285.276 555.752,290.276 558.252,295.276 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #ff0000" points="548.252,290.276 558.252,285.276 555.752,290.276 558.252,295.276 "/>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #0000ff" points="121,200 121,241.32 "/>
- <polygon style="fill: #0000ff" points="121,248.82 116,238.82 121,241.32 126,238.82 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #0000ff" points="121,248.82 116,238.82 121,241.32 126,238.82 "/>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #0000ff" points="279.028,200 279.028,241.32 "/>
- <polygon style="fill: #0000ff" points="279.028,248.82 274.028,238.82 279.028,241.32 284.028,238.82 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #0000ff" points="279.028,248.82 274.028,238.82 279.028,241.32 284.028,238.82 "/>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="453.514,200 453.514,241.32 "/>
- <polygon style="fill: #a020f0" points="453.514,248.82 448.514,238.82 453.514,241.32 458.514,238.82 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="453.514,248.82 448.514,238.82 453.514,241.32 458.514,238.82 "/>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="453.082,320 453.082,320 453.082,541.32 "/>
- <polygon style="fill: #a020f0" points="453.082,548.82 448.082,538.82 453.082,541.32 458.082,538.82 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="453.082,548.82 448.082,538.82 453.082,541.32 458.082,538.82 "/>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="640,150 640,150 555.752,150 "/>
- <polygon style="fill: #a020f0" points="548.252,150 558.252,145 555.752,150 558.252,155 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #a020f0" points="548.252,150 558.252,145 555.752,150 558.252,155 "/>
- </g>
- <g>
- <polyline style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #1af5dd" points="120.34,320 120.94,320 120.94,541.32 "/>
- <polygon style="fill: #1af5dd" points="120.94,548.82 115.94,538.82 120.94,541.32 125.94,538.82 "/>
- <polygon style="fill: none; fill-opacity:0; stroke-width: 10; stroke: #1af5dd" points="120.94,548.82 115.94,538.82 120.94,541.32 125.94,538.82 "/>
- </g>
- <g>
- <rect style="fill: #7dff7d" x="70" y="420" width="460" height="60"/>
- <path style="fill: #7dff7d" d="M 70,420 A 10,10 0 0 0 60,430 L 70,430 z"/>
- <path style="fill: #7dff7d" d="M 540,430 A 10,10 0 0 0 530,420 L 530,430 z"/>
- <rect style="fill: #7dff7d" x="60" y="430" width="480" height="40"/>
- <path style="fill: #7dff7d" d="M 60,470 A 10,10 0 0 0 70,480 L 70,470 z"/>
- <path style="fill: #7dff7d" d="M 530,480 A 10,10 0 0 0 540,470 L 530,470 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="420" x2="530" y2="420"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="480" x2="530" y2="480"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 70,420 A 10,10 0 0 0 60,430"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 540,430 A 10,10 0 0 0 530,420"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="60" y1="430" x2="60" y2="470"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="540" y1="430" x2="540" y2="470"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 60,470 A 10,10 0 0 0 70,480"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 530,480 A 10,10 0 0 0 540,470"/>
- <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="300" y="456.003">
- <tspan x="300" y="456.003">Cache</tspan>
- </text>
- </g>
- <g>
- <rect style="fill: #c3d9ff" x="70" y="340" width="100" height="60"/>
- <path style="fill: #c3d9ff" d="M 70,340 A 10,10 0 0 0 60,350 L 70,350 z"/>
- <path style="fill: #c3d9ff" d="M 180,350 A 10,10 0 0 0 170,340 L 170,350 z"/>
- <rect style="fill: #c3d9ff" x="60" y="350" width="120" height="40"/>
- <path style="fill: #c3d9ff" d="M 60,390 A 10,10 0 0 0 70,400 L 70,390 z"/>
- <path style="fill: #c3d9ff" d="M 170,400 A 10,10 0 0 0 180,390 L 170,390 z"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="340" x2="170" y2="340"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="70" y1="400" x2="170" y2="400"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 70,340 A 10,10 0 0 0 60,350"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 180,350 A 10,10 0 0 0 170,340"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="60" y1="350" x2="60" y2="390"/>
- <line style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" x1="180" y1="350" x2="180" y2="390"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 60,390 A 10,10 0 0 0 70,400"/>
- <path style="fill: none; fill-opacity:0; stroke-width: 2.35099e-37; stroke: #000000" d="M 170,400 A 10,10 0 0 0 180,390"/>
- <text font-size="19.7556" style="fill: #000000;text-anchor:middle;font-family:sans-serif;font-style:normal;font-weight:normal" x="120" y="376.003">
- <tspan x="120" y="376.003">Serializer</tspan>
- </text>
- </g>
-</svg>
+++ /dev/null
-<!doctype html>
-<html lang="en">
-
- <head>
- <meta charset="utf-8">
-
- <title>TimeSide : open and fast web audio components</title>
-
- <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
- <meta name="author" content="Hakim El Hattab">
-
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
- <link rel="stylesheet" href="http://files.parisson.com/static/reveal.js/css/reveal.min.css">
- <link rel="stylesheet" href="http://files.parisson.com/static/reveal.js/css/theme/night.css" id="theme">
-
- <!-- For syntax highlighting -->
- <link rel="stylesheet" href="http://files.parisson.com/static/reveal.js/lib/css/zenburn.css">
-
- <!-- If the query includes 'print-pdf', use the PDF print sheet -->
- <script>
- document.write( '<link rel="stylesheet" href="http://files.parisson.com/static/reveal.js/css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
- </script>
-
- <!--[if lt IE 9]>
- <script src="lib/js/html5shiv.js"></script>
- <![endif]-->
- </head>
-
- <body>
-
- <div class="reveal">
-
- <!-- Any section element inside of this container is displayed as a slide -->
- <div class="slides">
-
- <section>
- <h1>TimeSide</h1>
- <h3>open and fast web audio components</h3>
- <p>
- <small>created by <a href="http://fr.linkedin.com/in/guillaumepellerin">Guillaume Pellerin</a> / <a href="http://twitter.com/yomguy">@yomguy</a> at <a href="http://parisson.com" target="_blank">Parisson.com</a></small>
- </p>
- <iframe width='374' height='221' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://parisson.telemeta.org/archives/items/PRS_07_01_01/player/360x130'></iframe>
- </section>
-<!--
- <section>
- <h2>Heads up</h2>
- <p>
- TimeSide is a set of python components enabling easy audio processing, transcoding, imaging and streaming.
- <br/><br/>
- Its simple architecture and high-level API have been design to process serial pipelines.
- <br/><br/>
- It includes a powerfull HTM5 interactive player which can be embedded in any web application to provide fancy waveforms, various analyzer results, synced time metadata display during playback (time-marking) and remote indexing.
- <br/><br/>
- The engine (server side) is fully written in Python, the player (client side) in HTML, CSS and JavaScript.
- </p>
-
- <aside class="notes">
- Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
- </aside>
- </section> #}
--->
- <section>
- <h2>Goals</h2>
- <p>We just <b>need</b> a python library to:</p>
- <br/>
- <ul>
- <li>build an open <a href="http://python.org" target="_blank">python</a> framework to do scalable asynchronous audio processing</li>
- <li>decode audio frames from <b>any</b> format into <a href="http://www.numpy.org/" target="_blank">numpy</a> arrays</li>
- <li>stream the frames in various processors and do <b>numpy data analyzing</b></li>
- <li>create various <b>image outputs</b> like waveforms, spectrograms, etc.. with numpy and PIL</li>
- <li><b>transcode</b> the processed frames in various media formats and <b>stream it on the fly in realtime</b></li>
- <li>provide a high-level <b>100% HTML5 user interface</b> to display the results <b>on demand</b> and <b>play sound</b> through the web</li>
- <li><b>metadata indexing</b>, <b>time marking</b> and <b>store everything</b> on a web server (see <a href="http://telemeta.org" target="_blank">Telemeta project</a>)</li>
- </ul>
- </section>
-
- <section>
- <h2>Architecture</h2>
- <img src="http://timeside.googlecode.com/git/doc/img/timeside_schema.png" alt="TimeSide architecture">
- </section>
-
- <section>
- <h2>Quick processing example</h2>
- <p>Define some processors:</p>
- <pre><code data-trim class="python">
-import timeside.decoder
-import timeside.grapher
-import timeside.analyzer
-import timeside.encoder
-
-decoder = timeside.decoder.FileDecoder('tests/samples/sweep.wav')
-grapher = timeside.grapher.Waveform()
-analyzer = timeside.analyzer.Level()
-encoder = timeside.encoder.Mp3Encoder('tests/samples/sweep.mp3')
- </code></pre>
- <p>then, the <i>magic</i> pipeline:</p>
- <pre><code data-trim>
-(decoder | grapher | analyzer | encoder).run()
- </code></pre>
- <p>get the results:</p>
- <pre><code data-trim>
-grapher.render(output='image.png')
-print 'Level:', analyzer.results()
- </code></pre>
- </section>
-
- <section>
- <h2>Quick UI example</h2>
- <iframe width='374' height='221' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://parisson.telemeta.org/archives/items/PRS_07_01_01/player/360x130'></iframe>
- <br/><br/>
- <p>Documentation : <a href="https://code.google.com/p/timeside/wiki/UiGuide">UiGuide</a></p>
- </section>
-
-
- <section>
- <h2>Changelog (dev branch, 05/13)</h2>
- <ul>
- <li>finally fix all decoder memory leaks! (piem)</li>
- <li>fix ogg vorbis and flac encoders (piem)</li>
- <li>add various <a href="http://aubio.org" target="_blank">aubio</a> analyzers thanks to piem such as : </li>
- <ul>
- <li>pitch (f0)</li>
- <li>onsets</li>
- <li>tempo</li>
- <li>various spectral descriptors like : hfc, complex, phase, specdiff, kl,
- mkl, specflux, centroid, slope, rolloff, spread, skewness, kurtosis, decrease</li>
- </ul>
- <li>new AnalyzerResultContainer and AnalyzerResult classes with various i/o formats : xml, json, yaml, numpy (piem)</li>
- <li>more unit tests (piem)</li>
- <li>UI : rewind player after ending + various bugfixes (yomguy)
- <li>separate hosting for test samples (yomguy)</li>
- </ul>
- </section>
-
-
- <section>
- <h2>Install for production</h2>
- <p>for version 0.4.3 on Linux (Debian Stable 7.0)</p>
- <pre><code data-trim class="bash">
-sudo apt-get update
-
-sudo apt-get install python python-pip python-setuptools python-gobject \
- python-gst0.10 gstreamer0.10-plugins-base gir1.2-gstreamer-0.10 \
- gstreamer0.10-plugins-good gstreamer0.10-plugins-bad \
- gstreamer0.10-plugins-ugly gobject-introspection \
- python-numpy python-mutagen python-yaml python-imaging \
- python-simplejson
-
-sudo pip install timeside
- </code></pre>
- </section>
-
- <section>
- <h2>Install for development 1/2</h2>
- <p>for version >= 0.5 + aubio 0.4dev on Linux (Debian Stable 7.0)</p>
- <pre><code data-trim class="bash">
-sudo apt-get update
-
-sudo apt-get install python python-dev python-pip python-setuptools python-gobject \
- python-gst0.10 gstreamer0.10-plugins-base gir1.2-gstreamer-0.10 \
- gstreamer0.10-plugins-good gstreamer0.10-plugins-bad \
- gstreamer0.10-plugins-ugly gobject-introspection python-numpy \
- python-yaml python-imaging python-simplejson python-mutagen
- libsndfile-dev libsamplerate-dev libjack-jackd2-dev \
- liblash-compat-dev libfftw3-dev \
- docbook-to-man gcc git-core ipython \
-
- </code></pre>
-
- <p>install <a href="http://aubio.org" target="_blank">aubio</a> with "develop" branch</p>
- <pre><code data-trim class="bash">
-git clone git://git.aubio.org/git/aubio/
-
-cd aubio
-
-git checkout develop
-
-./waf configure
-./waf build
-sudo ./waf install
-
-cd python
-sudo python setup.py install
- </code></pre>
- </section>
-
-
- <section>
- <h2>Install for development 2/2</h2>
-
- <pre><code data-trim class="bash">
-
-git clone https://github.com/Parisson/TimeSide.git
-
-cd TimeSide
-
-git checkout dev
-
-export PYTHONPATH=$PYTHONPATH:`pwd`
-
-tests/run_all_tests
-
- </code></pre>
-
- <h3>Ready!</h3>
- </section>
-
- <section>
- <h2>API</h2>
- <a href="https://github.com/Parisson/TimeSide/blob/dev/timeside/api.py#L26" target="_blank">IProcessor</a>
- <pre><code data-trim class="python">
-class IProcessor(Interface):
- """Common processor interface"""
-
- @staticmethod
- def id():
- """Short alphanumeric, lower-case string which uniquely identify this
- processor, suitable for use as an HTTP/GET argument value, in filenames,
- etc..."""
-
- # implementation: only letters and digits are allowed. An exception will
- # be raised by MetaProcessor if the id is malformed or not unique amongst
- # registered processors.
-
- def setup(self, channels=None, samplerate=None, blocksize=None, totalframes=None):
- """Allocate internal resources and reset state, so that this processor is
- ready for a new run.
-
- The channels, samplerate and/or blocksize and/or totalframes arguments
- may be required by processors which accept input. An error will occur if any of
- these arguments is passed to an output-only processor such as a decoder.
- """
-
- # implementations should always call the parent method
-
- def channels(self):
- """Number of channels in the data returned by process(). May be different from
- the number of channels passed to setup()"""
-
- def samplerate(self):
- """Samplerate of the data returned by process(). May be different from
- the samplerate passed to setup()"""
-
- def blocksize():
- """The total number of frames that this processor can output for each step
- in the pipeline, or None if the number is unknown."""
-
- def totalframes():
- """The total number of frames that this processor will output, or None if
- the number is unknown."""
-
- def process(self, frames=None, eod=False):
- """Process input frames and return a (output_frames, eod) tuple.
- Both input and output frames are 2D numpy arrays, where columns are
- channels, and containing an undetermined number of frames. eod=True
- means that the end-of-data has been reached.
-
- Output-only processors (such as decoders) will raise an exception if the
- frames argument is not None. All processors (even encoders) return data,
- even if that means returning the input unchanged.
-
- Warning: it is required to call setup() before this method."""
-
- def release(self):
- """Release resources owned by this processor. The processor cannot
- be used anymore after calling this method."""
-
- # implementations should always call the parent method
-
- </code></pre>
- </section>
-
-
- <section>
- <h2>API</h2>
- <a href="https://github.com/Parisson/TimeSide/blob/dev/timeside/api.py#L132" target="_blank">IDecoder</a>
- <pre><code data-trim class="python">
-class IDecoder(IProcessor):
- """Decoder driver interface. Decoders are different of encoders in that
- a given driver may support several input formats, hence this interface doesn't
- export any static method, all informations are dynamic."""
-
- def __init__(self, filename):
- """Create a new decoder for filename."""
- # implementation: additional optionnal arguments are allowed
-
- def format():
- """Return a user-friendly file format string"""
-
- def encoding():
- """Return a user-friendly encoding string"""
-
- def resolution():
- """Return the sample width (8, 16, etc..) of original audio file/stream,
- or None if not applicable/known"""
-
- def metadata(self):
- """Return the metadata embedded into the encoded stream, if any."""
-
- </code></pre>
- </section>
-
-
- <section>
- <h2>API</h2>
- <a href="https://github.com/Parisson/TimeSide/blob/dev/timeside/api.py#L180" target="_blank">IAnalyzer</a>
- <pre><code data-trim class="python">
-class IAnalyzer(IProcessor):
- """Media item analyzer driver interface. This interface is abstract, it doesn't
- describe a particular type of analyzer but is rather meant to group analyzers.
- In particular, the way the result is returned may greatly vary from sub-interface
- to sub-interface. For example the IValueAnalyzer returns a final single numeric
- result at the end of the whole analysis. But some other analyzers may return
- numpy arrays, and this, either at the end of the analysis, or from process()
- for each block of data (as in Vamp)."""
-
- def __init__(self):
- """Create a new analyzer."""
- # implementation: additional optionnal arguments are allowed
-
- @staticmethod
- def name():
- """Return the analyzer name, such as "Mean Level", "Max level",
- "Total length, etc.. """
-
- @staticmethod
- def unit():
- """Return the unit of the data such as "dB", "seconds", etc... """
- </code></pre>
- </section>
-
- <section>
- <h2>API</h2>
- <a href="https://github.com/Parisson/TimeSide/blob/dev/timeside/analyzer/core.py#L80" target="_blank">AnalyzerResultContainer</a>
- <pre><code data-trim class="python">
-class AnalyzerResultContainer(object):
-
- def __init__(self, analyzer_results = []):
- self.results = analyzer_results
-
- def __getitem__(self, i):
- return self.results[i]
-
- def __len__(self):
- return len(self.results)
-
- def __repr__(self):
- return self.to_json()
-
- def __eq__(self, that):
- if hasattr(that, 'results'):
- that = that.results
- for a, b in zip(self.results, that):
- if a != b: return False
- return True
-
- def add(self, analyzer_result):
- if type(analyzer_result) == list:
- for a in analyzer_result:
- self.add(a)
- return
- if type(analyzer_result) != AnalyzerResult:
- raise TypeError('only AnalyzerResult can be added')
- self.results += [analyzer_result]
-
- def to_xml(self, data_list = None):
- if data_list == None: data_lit = self.results
- import xml.dom.minidom
- doc = xml.dom.minidom.Document()
- root = doc.createElement('telemeta')
- doc.appendChild(root)
- for data in data_list:
- node = doc.createElement('data')
- for a in ['name', 'id', 'unit']:
- node.setAttribute(a, str(data[a]) )
- if type(data['value']) in [str, unicode]:
- node.setAttribute('value', data['value'] )
- else:
- node.setAttribute('value', repr(data['value']) )
- root.appendChild(node)
- return xml.dom.minidom.Document.toprettyxml(doc)
-
- def from_xml(self, xml_string):
- import xml.dom.minidom
- import ast
- doc = xml.dom.minidom.parseString(xml_string)
- root = doc.getElementsByTagName('telemeta')[0]
- results = []
- for child in root.childNodes:
- if child.nodeType != child.ELEMENT_NODE: continue
- child_dict = {}
- for a in ['name', 'id', 'unit']:
- child_dict[a] = str(child.getAttribute(a))
- try:
- child_dict['value'] = ast.literal_eval(child.getAttribute('value'))
- except:
- child_dict['value'] = child.getAttribute('value')
- results.append(child_dict)
- return results
-
- def to_json(self, data_list = None):
- if data_list == None: data_list = self.results
- import simplejson as json
- data_strings = []
- for data in data_list:
- data_dict = {}
- for a in ['name', 'id', 'unit', 'value']:
- data_dict[a] = data[a]
- data_strings.append(data_dict)
- return json.dumps(data_strings)
-
- def from_json(self, json_str):
- import simplejson as json
- return json.loads(json_str)
-
- def to_yaml(self, data_list = None):
- if data_list == None: data_list = self.results
- import yaml
- data_strings = []
- for f in data_list:
- f_dict = {}
- for a in f.keys():
- f_dict[a] = f[a]
- data_strings.append(f_dict)
- return yaml.dump(data_strings)
-
- def from_yaml(self, yaml_str):
- import yaml
- return yaml.load(yaml_str)
-
- def to_numpy(self, output_file, data_list = None):
- if data_list == None: data_list = self.results
- import numpy
- numpy.save(output_file, data_list)
-
- def from_numpy(self, input_file):
- import numpy
- return numpy.load(input_file)
- </code></pre>
- </section>
-
- <section>
- <h2>Howto implement an analyzer plugin?</h2>
- <p>start from this template</p>
- <pre><code data-trim class="python">
-from timeside.core import Processor, implements, interfacedoc, FixedSizeInputAdapter
-from timeside.analyzer.core import *
-from timeside.api import IAnalyzer
-
-import numpy
-
-class NewAnalyzer(Analyzer):
- implements(IAnalyzer)
-
- @interfacedoc
- def setup(self, channels=None, samplerate=None, blocksize=None, totalframes=None):
- super(NewAnalyzer, self).setup(channels, samplerate, blocksize, totalframes)
- # do setup things...
-
- @staticmethod
- @interfacedoc
- def id():
- return "new_analyzer"
-
- @staticmethod
- @interfacedoc
- def name():
- return "New analyzer"
-
- def process(self, frames, eod=False):
- # do process things...
- # and maybe store some results :
- # self.result_data = ...
-
- return frames, eod
-
- def results(self):
-
- result = AnalyzerResult(id = self.id(), name = self.name(), unit = "something")
- result.value = self.result_data
- container.add(result)
-
- # add other results in the container if needed...
-
- return container
-
- </code></pre>
- </section>
-
- <section>
- <h2>Howto implement an analyzer plugin?</h2>
- <ul>
- <li>adapt the template</li>
- <li>save the file in timeside/analyzer/
- <br/>for instance : timeside/analyzer/new_analyzer.py</li>
- <li>add it to timeside/analyzer/__init__.py like:</li>
- </ul>
- <pre><code data-trim class="python">
-from level import *
-from dc import *
-from aubio_temporal import *
-from aubio_pitch import *
-from aubio_mfcc import *
-from aubio_melenergy import *
-from aubio_specdesc import *
-from yaafe import * # TF : add Yaafe analyzer
-from spectrogram import Spectrogram
-from waveform import Waveform
-from vamp_plugin import VampSimpleHost
-from irit_speech_entropy import *
-from irit_speech_4hz import *
-from new_analyzer import * # << here
- </code></pre>
- </section>
-
- <section>
- <h2>Howto implement an analyzer plugin?</h2>
- <p>then test it!
- <pre><code data-trim class="python">
-import timeside
-
-decoder = timeside.decoder.FileDecoder('tests/samples/sweep.wav')
-analyzer = timeside.analyzer.NewAnalyzer()
-
-(decoder | analyzer).run()
-
-analyzer.results()
- </code></pre>
- </section>
-
- <section>
- <h2>Links</h2>
- <ul>
- <li><a href="https://code.google.com/p/timeside/" target="_blank">Official website and wiki</a></li>
- <li><a href="https://github.com/Parisson/TimeSide" target="_blank">Source code on GitHub</a></li>
- <li><a href="http://files.parisson.com/api/timeside/" target="_blank">API</a></li>
- <li><a href="http://telemeta.org" target="_blank">Telemeta project : web audio CMS</a></li>
- <li><a href="http://aubio.org" target="_blank">Aubio project</a></li>
- <li><a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GNU General Public License</a></li>
- </ul>
- </section>
-
- <section>
- <h2>Thanks!</h2>
- <p>by Guillaume Pellerin</p>
- <p><a href="mailto:guillaume@parisson.com">guillaume@parisson.com</a></p>
- <p><a href="https://twitter.com/yomguy" target="_blank">@yomguy</a></p>
- <br/>
- <p><small>This document is released under the terms of the contract Creative Commons <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/fr/" target="_blank">by-nc-sa/2.0/fr</a></small></p>
- </section>
-
- </div>
-
- </div>
-
- <script src="http://files.parisson.com/static/reveal.js/lib/js/head.min.js"></script>
- <script src="http://files.parisson.com/static/reveal.js/js/reveal.min.js"></script>
-
- <script>
-
- // Full list of configuration options available here:
- // https://github.com/hakimel/reveal.js#configuration
- Reveal.initialize({
- controls: true,
- progress: true,
- history: true,
- center: true,
-
- // The "normal" size of the presentation, aspect ratio will be preserved
- // when the presentation is scaled to fit different resolutions. Can be
- // specified using percentage units.
- width: 960,
- height: 700,
-
- // Factor of the display size that should remain empty around the content
- margin: 0.1,
-
- // Bounds for smallest/largest possible scale to apply to content
- minScale: 0.2,
- maxScale: 1.0,
-
- theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
- transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
-
- // Optional libraries used to extend on reveal.js
- dependencies: [
- { src: 'http://files.parisson.com/static/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
- { src: 'http://files.parisson.com/static/reveal.js/plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
- { src: 'http://files.parisson.com/static/reveal.js/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
- { src: 'http://files.parisson.com/static/reveal.js/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
- { src: 'http://files.parisson.com/static/reveal.js/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
- { src: 'http://files.parisson.com/static/reveal.js/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
- // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
- // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
- ]
- });
-
- </script>
-
- </body>
-</html>
* fully skinnable with CSS style
Screenshot:
- .. image:: https://raw.github.com/Parisson/TimeSide/master/doc/slides/img/timeside_player_01.png
+ .. image:: https://raw.github.com/Parisson/TimeSide/master/doc/images/timeside_player_01.png
Examples of the player embeded in the Telemeta open web audio CMS:
* http://parisson.telemeta.org/archives/items/PRS_07_01_03/
projects / timeside.git / commitdiff
