| <?xml version="1.0" standalone="no"?> |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> |
| <!-- ========================================================================= --> |
| <!-- Copyright (C) The Apache Software Foundation. All rights reserved. --> |
| <!-- --> |
| <!-- This software is published under the terms of the Apache Software License --> |
| <!-- version 1.1, a copy of which has been included with this distribution in --> |
| <!-- the LICENSE file. --> |
| <!-- ========================================================================= --> |
| |
| <!-- ========================================================================= --> |
| <!-- Example that illustrates how event handlers can be invoked in Batik --> |
| <!-- This example requires that you run on JDK1.3 or later --> |
| <!-- @author cjolif@ilog.fr --> |
| <!-- @version $Id$--> |
| <!-- ========================================================================= --> |
| <?xml-stylesheet type="text/css" href="tests/test.css" ?> |
| <svg id="body" width="450" height="500" viewBox="0 0 450 500"> |
| <title>Playing Music with Batik</title> |
| |
| <use xlink:href="#musicText" x="125" y="30" /> |
| |
| <defs> |
| <style type="text/css"> |
| #blank {fill:white;stroke:black} |
| #black {fill:black;stroke:black} |
| </style> |
| <script type="text/ecmascript"> |
| var number = 0 |
| var midiChannel |
| var lastId = -1 |
| importPackage(Packages.javax.sound.midi) |
| synthesizer = MidiSystem.synthesizer |
| synthesizer.open() |
| sb = synthesizer.defaultSoundbank |
| var instruments = synthesizer.defaultSoundbank.instruments |
| loadInstrument() |
| |
| function down(evt) { |
| target = evt.currentTarget |
| midiChannel.noteOn(target.id, 64) |
| lastId = target.id |
| } |
| |
| function change(evt) { |
| number = number + 1 |
| if (number >= instruments.length) |
| number = 0 |
| loadInstrument() |
| } |
| |
| function drag(evt) { |
| if (lastId != -1) { |
| target = evt.currentTarget |
| midiChannel.noteOn(target.id, 64) |
| lastId = target.id |
| } |
| } |
| |
| function up(evt) { |
| if (lastId != -1) { |
| midiChannel.allNotesOff() |
| lastId = -1; |
| } |
| } |
| |
| function loadInstrument() { |
| System.out.println("-- "+instruments[number].name) |
| synthesizer.loadInstrument(instruments[number]) |
| midiChannel = synthesizer.getChannels()[Math.floor(number/16)] |
| midiChannel.programChange(number) |
| midiChannel.noteOn(60, 64) |
| } |
| |
| function stop(evt) { |
| midiChannel.noteOff(60) |
| } |
| </script> |
| <rect id="blank" x="0" y="0" width="10" height="60"/> |
| <rect id="black" x="0" y="0" width="6" height="33"/> |
| </defs> |
| <g onmousedown="change(evt)" onmouseup="stop(evt)" transform="translate(125, 120)" > |
| <rect x="5" y="5" width="200" height="60" fill="rgb(198, 0, 0)"/> |
| <g font-size="20" fill="white" font-family="Impact" text-anchor="middle" transform="translate(100, 30)"> |
| <text > |
| Click here for </text> |
| <text y="1em">next instrument |
| </text> |
| </g> |
| </g> |
| |
| <g transform="translate(225, 230)" text-anchor="middle" > |
| <text>Mouse the mouse over the</text> |
| <text y="10">keyboard to play music</text> |
| </g> |
| <clipPath> |
| |
| </clipPath> |
| |
| <g transform="translate(-100, 250) scale(2.4 3)"> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="24" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="26" x="10" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="25" x="7" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="28" x="20" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="27" x="17" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="29" x="30" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="31" x="40" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="30" x="37" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="33" x="50" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="32" x="47" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="35" x="60" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="34" x="57" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="36" x="70" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="38" x="80" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="37" x="77" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="40" x="90" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="39" x="87" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="41" x="100" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="43" x="110" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="42" x="107" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="45" x="120" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="44" x="117" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="47" x="130" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="46" x="127" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="48" x="140" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="50" x="150" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="49" x="147" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="52" x="160" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="51" x="157" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="53" x="170" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="55" x="180" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="54" x="177" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="57" x="190" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="56" x="187" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="59" x="200" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="58" x="197" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="60" x="210" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="62" x="220" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="61" x="217" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="64" x="230" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="63" x="227" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="65" x="240" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="67" x="250" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="66" x="247" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="69" x="260" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="68" x="257" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="71" x="270" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="70" x="267" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="72" x="280" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="74" x="290" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="73" x="287" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="76" x="300" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="75" x="297" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="77" x="310" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="79" x="320" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="78" x="317" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="81" x="330" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="80" x="327" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="83" x="340" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="82" x="337" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="84" x="350" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="86" x="360" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="85" x="357" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="88" x="370" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="87" x="367" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="89" x="380" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="91" x="390" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="90" x="387" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="93" x="400" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="92" x="397" xlink:href="#black"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="95" x="410" xlink:href="#blank"/> |
| <use onmousedown="down(evt)" onmouseup="up(evt)" onmouseover="drag(evt)" id="94" x="407" xlink:href="#black"/> |
| </g> |
| |
| <defs> |
| <g fill="black" stroke="none" id="musicText"> |
| <path d="M34.678,25.908c2.301-5.5,4.916-10.564,7.844-15.197C47.029,3.57,51.057,0,54.607,0c1.582,0,2.83,0.629,3.742,1.885c0.766,1.063,1.15,2.439,1.15,4.129c0,2.803-1.234,7.586-3.699,14.348c-0.912,2.4-2.855,7.225-5.832,14.473 |
| c4.799-9.418,8.016-15.426,9.648-18.023C64.176,9.506,68.641,4.652,73.008,2.25c2.256-1.25,3.793-1.875,4.609-1.875c0.91,0,1.367,0.674,1.367,2.021c0,0.289-1.344,3.732-4.031,10.326C66.65,33.037,62.5,44.566,62.5,47.309c0,1.879,0.984,2.816,2.953,2.816 |
| c3.072,0,7.129-1.4,12.172-4.203v1.016C72.914,49.646,68.66,51,64.863,51c-4.326,0-6.488-1.824-6.488-5.477c0-3.457,2.33-10.783,6.99-21.977c4.324-10.375,7.76-17.557,10.307-21.545C71.016,4.402,66,9.611,60.625,17.627c-4.514,6.816-8.09,13.344-10.729,19.584 |
| c-0.336,0.912-1.008,2.592-2.016,5.039l-0.504,1.08c-1.248,2.977-2.279,4.848-3.096,5.615c-1.586,0.529-3.002,1.105-4.248,1.729h-0.217c-0.191,0-0.287-0.096-0.287-0.287c0.35-1.766,0.949-3.484,1.801-5.156c2.379-5.047,5.568-13.072,9.568-24.078 |
| c3.65-10.078,5.477-16.078,5.477-18c0-1.582-0.719-2.375-2.156-2.375c-3.262,0-6.881,4.467-10.859,13.398c-6.041,13.543-10.068,21.852-12.08,24.926C25.432,48.035,18.672,52.5,11.002,52.5c-3.068,0-6.447-1.107-10.139-3.322C0.625,46.818,0.336,45.109,0,44.051 |
| c1.488,1.811,3.502,3.4,6.043,4.77c2.543,1.371,4.916,2.055,7.123,2.055c3.885,0,7.387-1.494,10.504-4.486c2.59-2.461,4.748-5.717,6.477-9.77c0.094-0.145,1.605-3.715,4.531-10.711z"/> |
| <path d="M89.999,23.166l0.074,0.248c0,0.289-1.881,5.238-5.639,14.85c-2.117,5.068-3.176,8.408-3.176,10.018c0,0.996,0.652,1.754,1.959,2.273c0.24,0,0.457,0.023,0.652,0.07h0.652c1.354,0,2.949-0.545,4.787-1.639c0.918-0.523,2.369-1.498,4.352-2.924 |
| c0.629-3.23,1.691-6.793,3.191-10.691l3.992-10.527c1.285-0.531,2.998-1.063,5.141-1.594l0.285,0.211v0.213c-1.105,2.352-2.76,6.576-4.967,12.672c-2.447,6.645-3.67,10.604-3.67,11.875c0,1.604,1.199,2.404,3.6,2.404c3.07,0,6.791-1.592,11.158-4.775V47 |
| c-4.225,3.168-7.969,4.75-11.232,4.75c-1.488,0-2.953-0.385-4.393-1.15c-1.633-0.863-2.592-1.967-2.879-3.311c-3.361,2.809-6.553,4.211-9.576,4.211c-1.729,0-3.217-0.453-4.465-1.363c-1.391-1.004-2.088-2.32-2.088-3.949c0-1.865,0.961-5.406,2.881-10.623 |
| c0.592-1.578,1.975-5.191,4.148-10.84c2.301-0.949,3.943-1.523,4.93-1.725l0.281,0.166z"/> |
| <path d="M125.22,22.25c1.666,0,2.5,1.078,2.5,3.234c0,2.254-1.139,5.104-3.414,8.553c1.109,3.979,1.664,6.494,1.664,7.547c0,3.164-1.707,6.039-5.121,8.625c1.59,0.527,3.109,0.791,4.559,0.791c3.23,0,6.752-1.596,10.563-4.789v1.162 |
| c-3.852,3.002-7.295,4.502-10.326,4.502c-1.445,0-3.299-0.377-5.561-1.129c-1.205,0.752-2.578,1.129-4.117,1.129c-3.082,0-4.621-1.246-4.621-3.738c0-1.102,0.408-2.133,1.225-3.092c2.207-1.727,4.824-4.219,7.848-7.479c-0.465-1.773-0.697-3.762-0.697-5.969 |
| c0-1.965,0.428-3.906,1.285-5.824c1.047-2.348,2.453-3.523,4.215-3.523z M122.095,45.418c0-1.008-0.17-2.207-0.506-3.6l-0.865-3.6c-0.723,0.961-1.984,2.232-3.789,3.816s-3.117,2.832-3.934,3.744c0.77,0.289,1.863,0.973,3.283,2.053 |
| c1.418,1.08,2.563,1.764,3.43,2.051c1.586-1.439,2.381-2.928,2.381-4.465z M126.47,25.979c0-1.344-0.369-2.23-1.105-2.664c-0.555,0-1.051,0.469-1.488,1.404c-0.438,0.938-0.656,1.74-0.656,2.412v1.799c0,1.105,0.275,2.496,0.83,4.176 |
| c1.613-2.975,2.42-5.326,2.42-7.055v-0.072z"/> |
| <path d="M145.846,23.375c0.096,0,0.313,0,0.648,0c0.191,0,0.287,0.145,0.287,0.43c0,2.148-1.418,6.16-4.252,12.031c-2.836,5.873-4.252,9.955-4.252,12.246c0,1.863,1.102,2.793,3.307,2.793c2.396,0,5.92-1.627,10.568-4.881v0.936 |
| c-3.93,3.215-7.523,4.82-10.781,4.82c-1.82,0-3.354-0.48-4.6-1.436c-1.246-0.957-1.869-2.322-1.869-4.096c0-2.25,0.791-5.578,2.375-9.984c0.625-1.676,1.873-5.029,3.744-10.059c2.111-0.861,3.744-1.795,4.896-2.801h-0.072z M149.403,14.313 |
| c0,0.77-0.266,1.432-0.793,1.984c-0.529,0.553-1.178,0.828-1.947,0.828c-1.924,0-2.885-0.938-2.885-2.813s0.961-2.813,2.885-2.813c0.77,0,1.418,0.277,1.947,0.83c0.527,0.553,0.793,1.213,0.793,1.982z"/> |
| <path d="M159.257,51.75c-5.664,0-8.496-2.273-8.496-6.824c0-4.406,1.92-9.027,5.76-13.865c4.031-5.123,8.184-7.686,12.457-7.686c1.152,0,2.111,0.406,2.881,1.219c0.768,0.813,1.152,1.793,1.152,2.941c0,2.008-0.938,4.352-2.809,7.027 |
| c-1.969,2.869-3.912,4.303-5.832,4.303h-0.217l-0.504-0.215l-0.432-0.572l-0.072-0.5c0.383-1.574,2.037-3.363,4.963-5.367c2.684-1.813,4.027-3.695,4.027-5.652c0-0.715-0.336-1.301-1.004-1.754c-0.67-0.453-1.387-0.68-2.152-0.68 |
| c-3.539,0-6.744,2.695-9.613,8.082c-2.488,4.674-3.73,8.988-3.73,12.945c0,3.816,1.844,5.723,5.531,5.723c2.346,0,5.074-0.613,8.188-1.844c2.777-1.088,5.268-2.412,7.471-3.973v1.15c-3.553,1.729-6.385,2.977-8.496,3.742c-3.217,1.199-6.24,1.799-9.072,1.799z"/> |
| <path d="M187.259,48.973c0,1.686-0.857,2.527-2.572,2.527c-1.619,0-2.428-0.842-2.428-2.527c0-0.672,0.236-1.273,0.713-1.803s1.047-0.795,1.715-0.795c0.715,0,1.322,0.254,1.822,0.758c0.5,0.506,0.75,1.119,0.75,1.84z M201.195,6.25l-13.68,33.408l-0.793-0.145 |
| l8.496-32.256l5.977-1.008z"/> |
| </g> |
| </defs> |
| |
| <!-- ============================================================= --> |
| <!-- Batik sample mark --> |
| <!-- ============================================================= --> |
| <use xlink:href="batikLogo.svg#Batik_Tag_Box" /> |
| |
| </svg> |
