You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-dev@xmlgraphics.apache.org by vh...@apache.org on 2001/03/08 03:11:15 UTC
cvs commit: xml-batik/samples batikMusic.svg
vhardy 01/03/07 18:11:15
Added: samples batikMusic.svg
Log:
Examples showing events handled by ECMAScript handlers,
playing music...
Revision Changes Path
1.1 xml-batik/samples/batikMusic.svg
Index: batikMusic.svg
===================================================================
<?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: batikMusic.svg,v 1.1 2001/03/08 02:11:13 vhardy Exp $-->
<!-- ========================================================================= -->
<?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.target.parentElement
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.target.parentElement
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)"
onmousedown="down(evt)" onmouseover="drag(evt)">
<use onmousedown="down(evt)" onmouseover="drag(evt)" id="24" xlink:href="#blank"/>
<use id="26" x="10" xlink:href="#blank"/>
<use id="25" x="7" xlink:href="#black"/>
<use id="28" x="20" xlink:href="#blank"/>
<use id="27" x="17" xlink:href="#black"/>
<use id="29" x="30" xlink:href="#blank"/>
<use id="31" x="40" xlink:href="#blank"/>
<use id="30" x="37" xlink:href="#black"/>
<use id="33" x="50" xlink:href="#blank"/>
<use id="32" x="47" xlink:href="#black"/>
<use id="35" x="60" xlink:href="#blank"/>
<use id="34" x="57" xlink:href="#black"/>
<use id="36" x="70" xlink:href="#blank"/>
<use id="38" x="80" xlink:href="#blank"/>
<use id="37" x="77" xlink:href="#black"/>
<use id="40" x="90" xlink:href="#blank"/>
<use id="39" x="87" xlink:href="#black"/>
<use id="41" x="100" xlink:href="#blank"/>
<use id="43" x="110" xlink:href="#blank"/>
<use id="42" x="107" xlink:href="#black"/>
<use id="45" x="120" xlink:href="#blank"/>
<use id="44" x="117" xlink:href="#black"/>
<use id="47" x="130" xlink:href="#blank"/>
<use id="46" x="127" xlink:href="#black"/>
<use id="48" x="140" xlink:href="#blank"/>
<use id="50" x="150" xlink:href="#blank"/>
<use id="49" x="147" xlink:href="#black"/>
<use id="52" x="160" xlink:href="#blank"/>
<use id="51" x="157" xlink:href="#black"/>
<use id="53" x="170" xlink:href="#blank"/>
<use id="55" x="180" xlink:href="#blank"/>
<use id="54" x="177" xlink:href="#black"/>
<use id="57" x="190" xlink:href="#blank"/>
<use id="56" x="187" xlink:href="#black"/>
<use id="59" x="200" xlink:href="#blank"/>
<use id="58" x="197" xlink:href="#black"/>
<use id="60" x="210" xlink:href="#blank"/>
<use id="62" x="220" xlink:href="#blank"/>
<use id="61" x="217" xlink:href="#black"/>
<use id="64" x="230" xlink:href="#blank"/>
<use id="63" x="227" xlink:href="#black"/>
<use id="65" x="240" xlink:href="#blank"/>
<use id="67" x="250" xlink:href="#blank"/>
<use id="66" x="247" xlink:href="#black"/>
<use id="69" x="260" xlink:href="#blank"/>
<use id="68" x="257" xlink:href="#black"/>
<use id="71" x="270" xlink:href="#blank"/>
<use id="70" x="267" xlink:href="#black"/>
<use id="72" x="280" xlink:href="#blank"/>
<use id="74" x="290" xlink:href="#blank"/>
<use id="73" x="287" xlink:href="#black"/>
<use id="76" x="300" xlink:href="#blank"/>
<use id="75" x="297" xlink:href="#black"/>
<use id="77" x="310" xlink:href="#blank"/>
<use id="79" x="320" xlink:href="#blank"/>
<use id="78" x="317" xlink:href="#black"/>
<use id="81" x="330" xlink:href="#blank"/>
<use id="80" x="327" xlink:href="#black"/>
<use id="83" x="340" xlink:href="#blank"/>
<use id="82" x="337" xlink:href="#black"/>
<use id="84" x="350" xlink:href="#blank"/>
<use id="86" x="360" xlink:href="#blank"/>
<use id="85" x="357" xlink:href="#black"/>
<use id="88" x="370" xlink:href="#blank"/>
<use id="87" x="367" xlink:href="#black"/>
<use id="89" x="380" xlink:href="#blank"/>
<use id="91" x="390" xlink:href="#blank"/>
<use id="90" x="387" xlink:href="#black"/>
<use id="93" x="400" xlink:href="#blank"/>
<use id="92" x="397" xlink:href="#black"/>
<use id="95" x="410" xlink:href="#blank"/>
<use 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>