--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/html/images/remote-control.svg Thu Dec 09 01:54:51 2010 +0900
@@ -0,0 +1,348 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="100%" height="100%" viewBox="-2 -2 204 844">
+
+ <title>Media Remote Control</title>
+ <desc>A graphical depiction of a media remote control, with buttons mapped to specific keys values.</desc>
+
+ <style type="text/css"><![CDATA[
+ .key
+ {
+ fill: #f5f5f5;
+ stroke: #000000;
+ }
+
+ .key text
+ {
+ fill: #000000;
+ stroke: none;
+ }
+
+ text.mid {
+ font-weight: bold;
+ }
+
+ text.superlabel
+ {
+ fill: #ffffff;
+ stroke: none;
+ font-size: 12px;
+ font-weight: normal;
+ }
+
+ a:hover {
+ fill: cornflowerblue;
+ stroke: gold;
+ stroke-width: 4px;
+ }
+ ]]></style>
+
+ <defs>
+ <g id="direction-button">
+ <path d="M-53,-60 A80,80 0 0,1 53,-60 L23,-30 A38,38 0 0,0 -23,-30 Z"/>
+ <polygon points="0,-68 10,-50 -10,-50" stroke="black" fill="black" stroke-width="1"/>
+ </g>
+ <polygon id="forward-arrow" points="-5,-5 5,0 -5,5" stroke="black" fill="black" stroke-width="1"/>
+ <use id="back-arrow" xlink:href="#forward-arrow" transform="rotate(180)"/>
+
+ <!-- <polygon id="back-arrow" points="5,-5 -5,0 5,5" stroke="black" fill="black" stroke-width="1"/> -->
+ <line id="arrow-stop" x1="0" y1="-5.5" x2="0" y2="5.5" stroke="black" stroke-width="4"/>
+ <path id="volume-icon" fill="black" d="M-2,-3 L6,-8 6,8 -2,3 Z M-6,-3 L-4,-3 -4,3 -6,3 Z" stroke="black" stroke-width="1" />
+ </defs>
+
+
+ <rect id="remote-body" x="0" y="0" width="200" height="840" fill="#222222" stroke="black" />
+ <g class="key" font-family="'Arial Unicode MS', sans-serif" text-anchor="middle" font-size="15" stroke-width="2">
+
+ <a xlink:href="../DOM3-Events.html#key-Power" target="_parent" transform="translate(30, 30)">
+ <title>Power button</title>
+ <circle cx="0" cy="0" r="20" stroke-width="0.5" fill="red"/>
+ <path id="power-icon" stroke-width="4" stroke="white" stroke-linecap="round" fill="none"
+ d="M0,-14 V0 M8,-8 A12,12 0 1,1 -8,-8"/>
+ </a>
+
+
+ <g id="-buttons" transform="translate(10, 80)" stroke="black">
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(18.75)">
+ <title> button</title>
+ <circle cx="0" cy="0" r="16"/>
+ <text class="mid superlabel" x="0" y="-19">foo</text>
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(66.25)">
+ <title> button</title>
+ <circle cx="0" cy="0" r="16"/>
+ <text class="mid superlabel" x="0" y="-19">foo</text>
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(113.75)">
+ <title> button</title>
+ <circle cx="0" cy="0" r="16"/>
+ <text class="mid superlabel" x="0" y="-19">foo</text>
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(161.25)">
+ <title> button</title>
+ <circle cx="0" cy="0" r="16"/>
+ <text class="mid superlabel" x="0" y="-19">foo</text>
+ </a>
+ </g>
+
+
+ <g id="color-buttons" transform="translate(10, 105)" stroke="black" stroke-width="0.5">
+ <a xlink:href="../DOM3-Events.html#key-Red" target="_parent">
+ <title>Red button</title>
+ <rect x="0" y="0" width="37.5" height="15" fill="red" />
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-Green" target="_parent">
+ <title>Green button</title>
+ <rect x="47.5" y="0" width="37.5" height="15" fill="lime" />
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-Yellow" target="_parent">
+ <title>Yellow button</title>
+ <rect x="95" y="0" width="37.5" height="15" fill="yellow" />
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-Blue" target="_parent">
+ <title>Blue button</title>
+ <rect x="142.5" y="0" width="37.5" height="15" fill="blue" />
+ </a>
+ </g>
+
+
+ <g id="direction-pad" transform="translate(40, 225)">
+ <g class="key" transform="translate(60, 0)">
+ <a xlink:href="../DOM3-Events.html#key-Up" target="_parent">
+ <title>Up button</title>
+ <use id="up-button" xlink:href="#direction-button" />
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-Right" target="_parent">
+ <title>Right button</title>
+ <use id="right-button" xlink:href="#direction-button" transform="rotate(90)" />
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-Down" target="_parent">
+ <title>Down button</title>
+ <use id="down-button" xlink:href="#direction-button" transform="rotate(180)" />
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-Left" target="_parent">
+ <title>Left button</title>
+ <use xlink:href="#direction-button" transform="rotate(270)" />
+ </a>
+
+ <a xlink:href="../DOM3-Events.html#key-Accept" target="_parent">
+ <title>OK button</title>
+ <circle cx="0" cy="0" r="30"/>
+ <text class="mid" x="0" y="9" font-size="25" font-weight="bold">OK</text>
+ </a>
+
+
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(-75, -75)">
+ <title> button</title>
+ <circle id="circle_1" cx="0" cy="0" r="16"/>
+ <text class="mid superlabel" x="0" y="-19">foo</text>
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(75, -75)">
+ <title> button</title>
+ <circle id="circle_2" cx="0" cy="0" r="16"/>
+ <text class="mid superlabel" x="0" y="-19">foo</text>
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(-75, 75)">
+ <title> button</title>
+ <circle id="circle_3" cx="0" cy="0" r="16"/>
+ <text class="mid superlabel" x="0" y="-19">foo</text>
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-MediaRecord" target="_parent" transform="translate(75, 75)">
+ <title>Media Record button</title>
+ <circle id="circle_4" cx="0" cy="0" r="16"/>
+ <circle cx="0" cy="0" r="7" fill="red" stroke="none"/>
+ <text class="mid superlabel" x="0" y="-19">foo</text>
+ </a>
+
+ </g>
+ </g>
+
+
+ <g id="channel-volume" transform="translate(30, 325)">
+ <g id="volume" font-size="30" font-weight="bold">
+ <rect x="0" y="0" width="40" height="90" rx="20" ry="20"/>
+ <a class="key" xlink:href="../DOM3-Events.html#key-" target="_parent">
+ <title>Media Volume Up button</title>
+ <circle cx="20" cy="20" r="18" stroke="none"/>
+ <text class="mid" x="20" y="27">+</text>
+ </a>
+ <a class="key" xlink:href="../DOM3-Events.html#key-" target="_parent">
+ <title>Media Volume Down button</title>
+ <circle cx="20" cy="70" r="18" stroke="none"/>
+ <text class="mid" x="20" y="78">-</text>
+ </a>
+ <use xlink:href="#volume-icon" x="20" y="45" />
+ </g>
+
+ <a class="key" xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(0, 120)">
+ <title>Media Mute button</title>
+ <circle cx="20" cy="0" r="18"/>
+ <use xlink:href="#volume-icon" x="20" y="0" />
+ <line x1="0" y1="0" x2="25" y2="0" stroke="red" transform="translate(7)"/>
+ <circle cx="20" cy="0" r="12" stroke="red" fill="none" />
+ </a>
+
+
+ <a class="key" xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(70, 35)">
+ <title>Media Channel List button</title>
+ <circle cx="0" cy="0" r="20"/>
+ </a>
+
+ <a class="key" xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(70, 100)">
+ <title>Media _____ button</title>
+ <rect x="-20" y="-25" width="40" height="50" rx="3" ry="3"/>
+ </a>
+
+
+
+ <g id="channel" font-size="30" font-weight="bold" transform="translate(100)">
+ <rect x="0" y="0" width="40" height="90" rx="20" ry="20"/>
+ <a class="key" xlink:href="../DOM3-Events.html#key-" target="_parent">
+ <title>Media Channel Up button</title>
+ <circle cx="20" cy="20" r="18" stroke="none"/>
+ <text class="mid" x="20" y="27">+</text>
+ </a>
+ <a class="key" xlink:href="../DOM3-Events.html#key-" target="_parent">
+ <title>Media Channel Down button</title>
+ <circle cx="20" cy="70" r="18" stroke="none"/>
+ <text class="mid" x="20" y="78">-</text>
+ </a>
+ <text class="mid" x="20" y="52" font-size="20">CH</text>
+ </g>
+
+ <a class="key" xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(100, 120)">
+ <title>Media Channel List button</title>
+ <circle cx="20" cy="0" r="18"/>
+ <path id="channel-list-icon" stroke="black" fill="none"
+ d="M10,-10 H30 V10 H10 Z M13,-5 H27 M13,0 H27 M13,5 H27"/>
+
+ </a>
+ </g>
+
+
+ <g id="media-buttons" transform="translate(20, 490)">
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(10, 10)">
+ <title>Media Reverse button</title>
+ <circle cx="0" cy="0" r="20"/>
+ <use xlink:href="#back-arrow" x="-5"/>
+ <use xlink:href="#back-arrow" x="5"/>
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(40, 10)">
+ <title>Media Stop button</title>
+ <rect x="10" y="-20" width="60" height="40" rx="20" ry="20"/>
+ <rect x="32" y="-8" width="16" height="16" fill="black" stroke-width="1" stroke="black"/>
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(150, 10)">
+ <title>Media Forward button</title>
+ <circle cx="0" cy="0" r="20"/>
+ <use xlink:href="#forward-arrow" x="-5"/>
+ <use xlink:href="#forward-arrow" x="5"/>
+ </a>
+
+
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(10, 60)">
+ <title>Media Reverse button</title>
+ <circle cx="0" cy="0" r="20"/>
+ <use xlink:href="#back-arrow" x="-5"/>
+ <use xlink:href="#back-arrow" x="5"/>
+ <use xlink:href="#arrow-stop" x="-10"/>
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(40, 60)">
+ <title>Media Play button</title>
+ <rect x="0" y="-20" width="80" height="40" rx="20" ry="20"/>
+ <use x="40" y="0" xlink:href="#forward-arrow" transform="translate(-40) scale(2)" />
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(150, 60)">
+ <title>Media Forward button</title>
+ <circle cx="0" cy="0" r="20"/>
+ <use xlink:href="#forward-arrow" x="-5"/>
+ <use xlink:href="#forward-arrow" x="5"/>
+ <use xlink:href="#arrow-stop" x="10"/>
+ </a>
+
+
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(10, 110)">
+ <title>Media Reverse button</title>
+ <circle cx="0" cy="0" r="20"/>
+ <use xlink:href="#back-arrow" x="-5"/>
+ <use xlink:href="#arrow-stop" x="5"/>
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(40, 110)">
+ <title>Media Pause button</title>
+ <rect x="10" y="-20" width="60" height="40" rx="20" ry="20"/>
+ <line x1="0" y1="0" x2="16" y2="0" fill="none" stroke-width="16" stroke="black" stroke-dasharray="7,2" transform="translate(32)"/>
+
+ </a>
+ <a xlink:href="../DOM3-Events.html#key-" target="_parent" transform="translate(150, 110)">
+ <title>Media Forward button</title>
+ <circle cx="0" cy="0" r="20"/>
+ <use xlink:href="#arrow-stop" x="-5"/>
+ <use xlink:href="#forward-arrow" x="5"/>
+ </a>
+
+ </g>
+
+
+ <g id="numpad" transform="translate(10, 635)">
+ <g class="key" transform="translate(10, 0)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">1</text>
+ </g>
+ <g class="key" transform="translate(60, 0)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">2</text>
+ <text class="mid superlabel" x="30" y="12"><tspan>A</tspan><tspan>B</tspan><tspan>C</tspan></text>
+ </g>
+ <g class="key" transform="translate(110, 0)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">3</text>
+ <text class="mid superlabel" x="30" y="12"><tspan>D</tspan><tspan>E</tspan><tspan>F</tspan></text>
+ </g>
+
+ <g class="key" transform="translate(10, 45)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">4</text>
+ <text class="mid superlabel" x="30" y="12"><tspan>G</tspan><tspan>H</tspan><tspan>I</tspan></text>
+ </g>
+ <g class="key" transform="translate(60, 45)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">5</text>
+ <text class="mid superlabel" x="30" y="12"><tspan>J</tspan><tspan>K</tspan><tspan>L</tspan></text>
+ </g>
+ <g class="key" transform="translate(110, 45)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">6</text>
+ <text class="mid superlabel" x="30" y="12"><tspan>M</tspan><tspan>N</tspan><tspan>O</tspan></text>
+ </g>
+
+ <g class="key" transform="translate(10, 90)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">7</text>
+ <text class="mid superlabel" x="30" y="12"><tspan>P</tspan><tspan>Q</tspan><tspan>R</tspan><tspan>S</tspan></text>
+ </g>
+ <g class="key" transform="translate(60, 90)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">8</text>
+ <text class="mid superlabel" x="30" y="12"><tspan>T</tspan><tspan>U</tspan><tspan>V</tspan></text>
+ </g>
+ <g class="key" transform="translate(110, 90)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">9</text>
+ <text class="mid superlabel" x="30" y="12"><tspan>W</tspan><tspan>X</tspan><tspan>Y</tspan><tspan>Z</tspan></text>
+ </g>
+
+ <g class="key" transform="translate(10, 135)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">*</text>
+ </g>
+ <g class="key" transform="translate(60, 135)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">0</text>
+ </g>
+ <g class="key" transform="translate(110, 135)">
+ <ellipse cx="30" cy="30" rx="17" ry="13"/>
+ <text class="mid" x="30" y="35">#</text>
+ </g>
+ </g>
+ </g>
+</svg>