Part One - Test numeric keys
In this tutorial we will use the “Keypad View” in the Ikivo IDE to test the numeric keys. If you already have a project opened, you can use this one. If not, begin with opening a project (File -> New Project).
• Create a new SVG Tiny File in the Ikivo IDE (File -> New…)
• Replace “Add your SVG code here” with the following code:
<![CDATA[
<!-- 1 -->
<rect id="one" x="5" y="140" width="30" height="30"
fill="red">
<animateColor id="one_anim" attributeName="fill"
begin="indefinite" dur="1" fill="freeze"
restart="never" calcMode="linear"
values="green;green" keyTimes="0;1"/>
</rect>
<text transform="matrix(2,0,0,2,70,160)">1</text>
<!-- 2 -->
<rect id="two" x="5" y="180" width="30" height="30"
fill="red">
<animateColor id="two_anim" attributeName="fill"
begin="indefinite" dur="1" fill="freeze"
restart="never" calcMode="linear"
values="green;green" keyTimes="0;1"/>
</rect>
<text transform="matrix(2,0,0,2,70,200)">2</text>
<!-- 3 -->
<rect id="three" x="5" y="220" width="30" height="30"
fill="red">
<animateColor id="three_anim" attributeName="fill"
begin="indefinite" dur="1" fill="freeze"
restart="never" calcMode="linear"
values="green;green" keyTimes="0;1"/>
</rect>
<text transform="matrix(2,0,0,2,70,240)">3</text> ]]>
• Save the file and watch the result in the Playback View. If everything is done correctly, you should now be able to see the numbers 1, 2 and 3.
Now it’s time to add this script right before the svg closing tag. The script will respond to the keys in the Keypad View. The goal is to be able to press numeric keys 1-3 and watch the red squares turn green.
<![CDATA[
<script type="text/ecmascript">
<![CDATA[
document.addEventListener("keydown", handleEvent,
false);
function handleEvent(evt)
{
ikivo.debug.log(evt.keyIdentifier);
switch (evt.keyIdentifier)
{
case "1":
document.getElementById("one_anim").
beginElement();
break;
case "2":
document.getElementById("two_anim").
beginElement();
break;
case "3":
document.getElementById("three_anim").
beginElement();
break;
}
}
]]]]><![CDATA[>
</script> ]]>
The script above listens for the event “keydown” by using an event listener and check if the incoming key is a key we want to handle. If so, the animations on the svg elements will trigger and the rect will become green.
• Debug or run your svg-file to try it out!
Part Two - Test arrow keys
You have now learnt how to use the numeric keys. In this step, you will learn how to use the arrow keys to get a circle to move.
• Let’s begin adding the circle beneath the numbers (not inside the script).
<![CDATA[
<!-- Circle -->
<circle id="circle" cx="125" cy="170"
r="20" fill="purple"/> ]]>
Now we have to add some case statements to our script. We are also going to create a function navigateTo(x,y).
• Add the following case statements to the existing ones:
<![CDATA[
case "Up":
navigateTo(0, 10);
break;
case "Down":
navigateTo(0, -10);
break;
case "Left":
navigateTo(-10, 0);
break;
case "Right":
navigateTo(10, 0);
break; ]]>
• Add the function navigateTo(x,y) right before the closing script tag. NavigateTo will move the circle left, right, up or down, corresponding to key presses.
<![CDATA[
function navigateTo(x,y)
{
var move = document.getElementById("circle");
var matrix = move.getMatrixTrait("transform");
var xTrans = matrix.getComponent(4);
var yTrans = matrix.getComponent(5);
var newBigmapMatrix = document.documentElement.
createSVGMatrixComponents(1, 0, 0, 1,
xTrans+x, yTrans-y);
move.setMatrixTrait("transform",
newBigmapMatrix);
} ]]>
Debug or run your svg-file and try to move the circle in the Playback View by pressing the arrow keys.
Commands for all keys in the Keypad View
Numeric Keys
0 = “0”
1 = “1”
2 = “2”
3 = “3”
4 = “4”
5 = “5”
6 = “6”
7 = “7”
8 = “8”
9 = “9”
* = “*”
# = “#”
Arrow Keys
Left = “Left”
Right = “Right”
Up = “Up”
Down = “Down”
Ok = “Ok”
Joystick Keys
Left = “Joystick_Left”
Right = “Joystick_Right”
Up = “Joystick_Up”
Down = “Joystick_Down”
Ok = “Joystick_Center”
Soft Keys
Left soft key = “Softkey_1”
Right soft key = “Softkey_2”
R = “Back”
C = “Clear”
|
