I'm a teacher at a school which has an SmartBoard interactive whiteboard in each classroom. I'm trying to create a web application for kids to use that basically involves dragging and dropping various elements around a web page. I've actually already created one that works fine when used on a computer with a mouse. However, on the SmartBoard, the drag-and-drop really lags, and sometimes fails completely.
As far as I can tell, the whiteboard doesn't mimic the onmousedown capability, and instead all touches are interpreted as onclicks. Is there any way around this? I can't think of a way to implement drag-and-drop without using onmouseup and onmousedown, nor do I know of any way to make the whiteboard interpret the input differently.
The only way I can think of to get around this is to write the application in Java, since I know from experience this will work. However, it's obviously a lot more work, so I'd rather not do it if I don't have to.
First thing I would do is log all the events that the smartboard allows you to register:
function log(e) {
console.log(e.type, e.pageX, e.pageY, e);
}
document.addEventListener('mousedown',log,false);
document.addEventListener('mousemove',log,false);
document.addEventListener('mouseup',log,false);
(console.log is native to Google Chrome, you may need to install plugins to other browsers.)
This will help you decide what to do. A possible solution would be to use a double click to trigger the start/stop of the dragging motion.
Related
So sorry that I'm so very newbie, and have googled only to find the same result again and again, till desperately I decided to ask here...
So, I need to make a webpage that can detect/reading hand gesture. At first, I was so very lost in what to do, but then this and that, I've found these questions:
Using webcam to track hand gestures
Generating events for gesture-controlled websites
How to detect hand gesture in live webcam using javascript?
hand gesture recognition with camera video in actionscript
And after surfed things I found there, then I (thought that I) got that it could be done using Javascript or Flash ActionSript, and have seen some of the examples for both. While I (thought that I) understood that people did it through Javascript by implementing algorithm for image processing and its friends, actually I'm kinda lost at how Flash did that. I found the common usage of gesture using Flash is in 'webcam game', and then I found these tutorial:
Webcam Motion Detection: Using the BitmapData API in Flash 8
Np's Webcam Game Tutorial
While I (thought that I) kinda get how the first one did it, I'm lost at how the second working out his collision detection... And I don't really understand why, while mostly the Javascript I found has pretty good documentation, so hard to find something like that for Flash ActionScript, and the one I found is kinda old (the first tutorial said it's created at 2005, and the second uploaded in 2007). I would just use Javascript because of those things, but then this Incubator Quasimondo Minority Cube is really cool, and I haven't found an implementation in that level for Javascript...
Thus all of it leads me to a question, roughly:
how hand gesture detection usually implemented in Flash? like, in webcame games?
does those implementation really 'recognize' it's a hand? or does it just execute anything that moves?
what support Flash/ActionScript have for detecting gesture? Like Camera.activityLevel property, is there another property or library?
I'm so sorry for my lack of knowledge...
All the examples I've seen are simply using the 'image recognition method'. Thus the results are not solid and sometimes there won't be anything to detect at all. That's why Eugene created augmented reality framework, but you need a marker in order to use it. He did some experiments without markers, but I cannot find any of them now, sorry.
I've used Kinect for gestures and it works pretty well, and it has AIR sdk.. Maybe you should give it a try :)
I am doing some pre-production on a project that requires drawing on a 3d canvas, which I think flash is the best way to go. But there is a chance down the line that this client might want the site to show up on the ipad, iphone or other mobile devices that don't support flash.
So I was playing with the idea of doing everything in html and javascript except for the actual drawing/3D area. Almost like using flash as the element. I think html5 is too premature to start using this, but might be beneficial down the line. Chances are I will just go the entire flash route, but I thought it would be interesting to try.
Anyway, my question is pretty top level. 1) how hard would it be to drag an object from an html page using javascript, and dropping it into the flashplayer. And then manipulating it from there.
Are there any examples out there that have tried to do this?
Communication between Flash and an HTML page requires the use of ExternalInterface. That's a good place to start. These guys seem to have figured out some of the details.
As far as the iPad and iPhone are concerned, Flash just ain't gonna happen.
However, I don't think it's fair to say HTML5 is "too premature". Lots of people are doing lots of cool things with the canvas element. You could too. :)
What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?
I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.
jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.
There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.
The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.
This might seem like a really dumb question, but I am writing an application and I have come across where my mouse-over, mouse-click and mouse-hover need different events bound to them. Now on Internet Explorer, Firefox, and Safari. It all works as expected.
However, on my iPhone the actions will not trigger. Now my question is are their any specific ways I can have the Mouse-Over essentially be fired when I hold my finger down and trigger an event?
An example where this doesn't work is right on this website when you hover over a comment it is supposed to display the +1 or flag icon.
I am using jQuery.
The answer is in the documentation that Remus posted. If you add an onclick = "void(0)" declaration, you will instruct Mobile Safari that the element is clickable, and you will gain access to the mouseover event on that element.
More info here
I think you need to reconsider your design for the iPhone (and any mobile for that matter). iPhone web interfaces shouldn't depend on mouse-overs and hovers, as they just complicate the interface significantly.
I strongly recommend that you design a new interface that is optimized for mobile viewing, that don't require clicking on small tiny arrows just to show more options.
Mobile Safari has no mouse and hover events (at least not in the usual accepted sense), they are explicitly called out in Creating Compatible Web Content Unsupported iPhone OS Technologies:
Mouse-over events The user cannot “mouse-over” a
nonclickable element on iPhone OS. The
element must be clickable for a
mouseover event to occur as described
in “One-Finger Events.”
Hover styles Since a mouseover event is sent only
before a mousedown event, hover styles
are displayed only if the user touches
and holds a clickable element with a
hover style. Read “Handling Events”
for all the events generated by
gestures on iPhone OS.
Yeah...I don't think anyone posing the question actually expected the device to "sense" a hover or mouseover. Actually you'd have to be pretty arrogant to assume someone actually meant that. Some method of triggering those event handlers is what is desired. I can definitely see a use for them in "hint" text appearing above items.
And whomever said not using mouse events makes a cleaner, simpler experience is taking their own opinion a bit too seriously. Those can greatly enhance a web page/application experience or make them worse. It's a matter of prudent usage.
The only answer anyone provided here worthwhile is whomever said it is best to have an alternate site optimized for mobile. Or possibly use a content management system that generates the page based on the browser type (similar to how Wikipedia works).
Congratulations on discovering the first thing about touch screen UI design. The bad news, is that what you want just is not going to happen.
The good news is that this will force you to make a much easier interface, for both iphone users and regular web users.
You simply cannot have a mouseover or hover functionality on touch screen devices, unless you can move a virtual pointer (though no touch UI offer that kind of functionality), but that would defeat the point of a touch screen UI.
Touch screen UI's are a paradigm shift and retro-fitting mouse-pointer UI interfaces back into touch UI design only limits and damages your solution.
Writing a mousehandler in javascript seems fairly straightforward, although I can imagine it being easy to get a lot of edge cases wrong.
The good news is, someone wrote a javascript mouse-handler/emulator whatever -- as a bookmarklet. It's called iCursor (not to be confused with the pointless mac app of the same name).
The bad news is, the guy's site (icursor.mobi) has gone off the air, and I can't find a copy, so I can't tell you how well it works. Here's a review (because I can only post one link):
What apple should have done for the iPhone/iPad was make one-finger panning move a virtual mouse pointer, and two-finger panning move within the viewport (as one-finger does now).
Two finger panning is easy; the only reason I can imagine for Apple not doing this is that they actually wanted to break 50% of the websites in the world. Seriously. It's right up there with the evil manipulative attempts to break standards that Microsoft has been doing all these years.
You're a web developer. What do you hate most? Internet Explorer. Because of all the extra headaches it causes you. Well, Stevie had to have his "me too" moment, and you're going to pay for it.
Google maps is an impressive display of what you can do with JavaScript and Ajaxy-goodness. Even my mouse scroll wheel and right-click works to provide specific functionality.
In the standard HTML spec, I don't see an onmouserightclick event or similar basic JavaScript handling for the mouse wheel. Maybe I am looking in the wrong places.
I presume these events are browser and platform-specific (or "sensitive" instead of specific). And am wondering what the basic, plain HTML and JavaScript are needed to exploit these events, in ALL browsers.
Naturally, when designing a site these features have to be extra since some people still use the one-button mouse.
How to I use events with the mouse wheel and right-click? I'm looking for sample code.
EDIT: Thanks for the jQuery code guys! The system-developer in me still has questions and doubts though. Mainly I'm concerned about platform-limitations that would seem to apply here. Is there a browser that some of these features don't work in? Does the mouse wheel up and down events also allow for mouse wheel click events? I would just expect there to be some limitation out there and am wondering if it's officially documented. I want to know how it works at a low level. I am glad to see it is easy in jQuery, another reason for me to get into it.
Mouse Wheel: ol' no-jquery-or-prototype-library method: here
Prototype method: Here
JQuery method: Here
If you're using jQuery, it's extremely simple to do things with the right click menu :
$(document).bind("contextmenu",function(e){
alert("You right clicked!");
return false; //disable the context menu
});
Otherwise, you can use this script, provided by quirskmode:
http://www.quirksmode.org/js/events_properties.html#link6
As for the mouse wheel, this a great script that I've used in the past:
http://adomas.org/javascript-mouse-wheel/
You said cross-browser so you must mean jQuery :P
http://www.ogonek.net/mousewheel/jquery-demo.html
http://abeautifulsite.net/notebook_files/68/demo/
I bet you can find JavaScript that do that, but I think its always better to go with component(or plugin) because it could have bugs(or maybe cross-browser bugs) and the person that made it would get an email from somebody that is using that and fix it. With pure JavaScript, you always should check it in every version of every browser.