mortalc Posted March 20, 2011 Share Posted March 20, 2011 Ok, Is there a way to detect a specific key press?I have thought about it, and I think there are two possibilities: Detect a keypress in general (i.e. with onkeypress or $(selector).keypress()), and execute a function, which identifies the key pressed, and then executes another function if the key is the intended one. Have a custom event, so to speak Link to comment Share on other sites More sharing options...
shadowayex Posted March 20, 2011 Share Posted March 20, 2011 Well, JavaScript has a mechanism where you could check all the key strokes and check event.keyCode and match it with whatever key/keys you want to do certain things.http://www.quirksmode.org/js/keys.htmlThat link has a little more information.This is the method I typically go with. If you're using JQuery, I think it has it's own methods for determining which key was pressed. The JQuery API documentation on their site will be your best friend for that. Link to comment Share on other sites More sharing options...
mortalc Posted March 20, 2011 Author Share Posted March 20, 2011 Ok, to make sure I understand it: If I use this code, and type in a, some code will run, but if I type in, say, b, some other code will run: <script type="text/javascript">function check(){if(event.keyCode=="a"){//execute some code}else{//some other stuff}</script><input type="text" onkeypress="check()"/> Link to comment Share on other sites More sharing options...
shadowayex Posted March 20, 2011 Share Posted March 20, 2011 The idea is right, but keyCode is not the actual value on the key. Each key has a code. Try alerting the keyCode in your check function. You'll be able to collect the keyCode values for whatever keys you want.[b[Edit:[/b] I also prefer onkeyup versus onkeypress. I don't know how much of a difference it makes, but it feels better to me. Link to comment Share on other sites More sharing options...
mortalc Posted March 20, 2011 Author Share Posted March 20, 2011 Gah! Debugging time again.HTML page: <!DOCTYPE HTML><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="LoadSVG.js"></script> <script type="text/javascript" > var balls = loadSVG("ball2.svg"); function moveLeft(obj) { var x = obj.getElementsByTagName("circle")[0].getAttribute("cx"); var z = new Number(x); z--; x = z.toString(); obj.getElementsByTagName("circle")[0].setAttribue("cx", x); } function moveRight(obj) { var x = obj.getElementsByTagName("circle")[0].getAttribute("cx"); var z = new Number(x); z++; x = z.toString(); obj.getElementsByTagName("circle")[0].setAttribue("cx", x); } function moveDown(obj) { var y = obj.getElementsByTagName("circle")[0].getAttribute("cy"); var z = new Number(y); z--; y = z.toString(); obj.getElementsByTagName("circle")[0].setAttribue("cy", y); } function moveUp(obj) { var y = obj.getElementsByTagName("circle")[0].getAttribute("cy"); var z = new Number(y); z++; y = z.toString(); obj.getElementsByTagName("circle")[0].setAttribue("cy", y); } function move() { switch(event.keyCode) { case 119: //=w moveUp(balls); break; case 97: //=a moveLeft(balls); break; case 115: //=s moveDown(balls); break; case 100: //=d moveRight(balls); break; default: } } </script> </head> <body> <iframe id="ball" src="ball2.svg" width="510" height="510" onkeypress="move()"></iframe> </body></html> LoadSVG.js: function loadSVG(name){ var xhttp = new XMLHttpRequest(); xhttp.open("GET", name, true); xhttp.send(); return xhttp.responseXML;} Ball2.svg: <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" height="500" width="500" style="stroke-width:1; stroke:black; fill:white"></rect><circle cx="250" cy="50" r="50" stroke="red" stroke-width="1" fill="red"></circle></svg> So I can see the frame, rectangle, and circle. The code is supposed to move the ball with WASD. But no movement. Link to comment Share on other sites More sharing options...
shadowayex Posted March 20, 2011 Share Posted March 20, 2011 Well, I don't know much about SVG, but my first instinct would be to put alerts in your move function and make sure those are launching when they are supposed to.Edit: Also, if balls is a global variable, you don't really need to pass it as an argument to your move functions. I don't think that it's causing a problem, but it's unnecessary =PAnother point: you load the SVG image into your JavaScript and edit it, but there's nothing that I can see that actually commits those changes or updates the iframe. The changes look like they are only done to your JavaScript DOM. Maybe you should update your iframe with your DOM after each change.Again, I don't know much about SVG, but that would be another guess. Link to comment Share on other sites More sharing options...
mortalc Posted March 20, 2011 Author Share Posted March 20, 2011 I suspected as much (about the third point) - I think you're right about the iframe not updating. I just did some research and the iframe object has a reload function. so thankyou! Link to comment Share on other sites More sharing options...
shadowayex Posted March 20, 2011 Share Posted March 20, 2011 No problem =) Good luck. Link to comment Share on other sites More sharing options...
mortalc Posted March 20, 2011 Author Share Posted March 20, 2011 it's still not working...I think now a problem in my XML DOM syntax. Here is my modified code:<!DOCTYPE HTML><html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="LoadSVG.js"></script> <script type="text/javascript" > var balls = loadSVG("ball2.svg"); function moveLeft() { var x = balls.getElementsByTagName("circle")[0].getAttribute("cx"); var z = new Number(x); z--; x = z.toString(); balls.getElementsByTagName("circle")[0].setAttribue("cx", x); } function moveRight() { var x = balls.getElementsByTagName("circle")[0].getAttribute("cx"); var z = new Number(x); z++; x = z.toString(); balls.getElementsByTagName("circle")[0].setAttribue("cx", x); } function moveDown() { var y = balls.getElementsByTagName("circle")[0].getAttribute("cy"); var z = new Number(y); z--; y = z.toString(); balls.getElementsByTagName("circle")[0].setAttribue("cy", y); } function moveUp() { var y = balls.getElementsByTagName("circle")[0].getAttribute("cy"); var z = new Number(y); z++; y = z.toString(); balls.getElementsByTagName("circle")[0].setAttribue("cy", y); } function move() { switch(event.keyCode) { case 119: moveUp(); break; case 97: moveLeft(); break; case 115: moveDown(); break; case 100: moveRight(); break; default: } document.getElementById(ball).reload(); } </script> </head> <body> <iframe id="ball" src="ball2.svg" width="510" height="510" onkeypress="move()"></iframe> </body></html> Link to comment Share on other sites More sharing options...
shadowayex Posted March 20, 2011 Share Posted March 20, 2011 Well, it doesn't look like you're saving back to the file. When you change the DOM, it doesn't (as far as I know) automatically save it to the file. You'll probably have to save it back via AJAX, or set the contents of the iframe manually. Link to comment Share on other sites More sharing options...
mortalc Posted March 20, 2011 Author Share Posted March 20, 2011 I've just discovered that you can include JavaScript in SVG! This is good news! Link to comment Share on other sites More sharing options...
mortalc Posted March 20, 2011 Author Share Posted March 20, 2011 Gah. Ok, I need someone who is skilled at SVG to tell me why this isn't working: <?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="http://www.w3.org/2000/svg"onkeypress="move()"onload="move()"><script type="text/javascript"> <![CDATA[ var x; var y; function move() { x = new Number(svg.getElementsByTagName("circle")[0].getAttribute("cx")); y = new Number (svg.getElementsByTagName("circle")[0].getAttribute("cy")); switch (event.keyCode) { case 119: //=w y--; y = y.toString(); svg.getElementsByTagName("circle").setAttribute("cy",y); break; case 115: //=s y++; y = y.toString(); svg.getElementsByTagName("circle").setAttribute("cy",y); break; case 97: //=a x--; x = x.toString(); svg.getElementsByTagName("circle").setAttribute("cx",x); break; case 100: //=d x++; x = x.toString(); svg.getElementsByTagName("circle").setAttribute("cx",x); break; default: } } ]]></script><rect x="0" y="0" height="500" width="500" style="stroke-width:1; stroke:black; fill:white"></rect><circle cx="250" cy="50" r="50" stroke="red" stroke-width="1" fill="red"></circle></svg> Link to comment Share on other sites More sharing options...
shadowayex Posted March 20, 2011 Share Posted March 20, 2011 Once again, did you commit the changes back to the file? If not, the file probably has the same contents. Your iframe loads from file, not the DOM. Link to comment Share on other sites More sharing options...
mortalc Posted March 20, 2011 Author Share Posted March 20, 2011 I didn't use an iframe this time. I used the SVG file on its own. Link to comment Share on other sites More sharing options...
shadowayex Posted March 20, 2011 Share Posted March 20, 2011 How is the svg drawn? Link to comment Share on other sites More sharing options...
shadowayex Posted March 20, 2011 Share Posted March 20, 2011 This may or may not help you:http://stackoverflow.com/questions/263902/svg-repaint Link to comment Share on other sites More sharing options...
Fmdpa Posted March 21, 2011 Share Posted March 21, 2011 Going back to the original question, you may find this article on quirksmode helpful, too: http://www.quirksmode.org/js/events_properties.htmlAs stated in the article, you can convert the event code to the actual key with this: String.fromCharCode(code); However, it would be better to use the key codes in conditional statements. Link to comment Share on other sites More sharing options...
mortalc Posted March 21, 2011 Author Share Posted March 21, 2011 I thing fromCharCode would be a good idea, but you can't use switch on a number, so it would be less efficient. Link to comment Share on other sites More sharing options...
thescientist Posted March 22, 2011 Share Posted March 22, 2011 I thing fromCharCode would be a good idea, but you can't use switch on a number, so it would be less efficient.you can definitely use numbers as cases for a switch statement. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.