I am tasked with implementing d-pad navigation for an existing web application for GoogleTV (and I'm testing in Google Chrome, and so far they seem to operate similarly. In their notes for implementing d-pad navigation they have basic handlers for up, right, left, down and select.
At present I have a scheme to initialize a virtual cursor, and then for the various dpad strokes. I rely on using document.elementFromPoint() and looping through until I find a new element that was not previously selected. I'm using outline: css to indicate current position and I only show it when one of the dpad controls has been selected.
I have a step on initialization which adds the class dpadClickable to all the items which are clickable, and then as the cursor moves I have dpadHighlighted added to the new one and removed from all other elements. It looks right.
This all fails if I have an element which is scrollable, or if the orientation is such that moving my point downward finds nothing.
What I would like is a data structure to keep all my dpadClickable items in, and then on d-pad clicks, be able to iterate it to find the best closest top, down, left, and right elements. Like, should I do it based on the top and left properties? Or based on a calculated center point?
I found a jQuery library which sort of implements this, and am reverse-engineering it to some extent. But what I'd really like is a primer on this class of programming problem: should I be looking for graphics programming algorithms? games? Something else?
UPDATE: Question over on the User Experience StackExchange site: Adding D-pad navigation to an existing web application: Resources?
Have you looked at http://code.google.com/tv/web/lib/ where the official Google TV Java Script extensions / libraries are? They might help you with this.
Related
From an end user point of view. If I have a list of vertical divs with different content in each div, should I provide up/down arrows to reorder the divs or should I allow the user to drag and drop the divs into a particular order?
Drag and drop would allow the user to place the div anywhere in the vertical list but may not be obvious to the end user that the divs are movable.
An up/down arrow beside each div would provide visual cues but would be awkward for the end user if they wanted to move a particular div up or down by a large number of places.
In relation to the above, I am biased towards drag/drop due to my use of Moodle for teaching. We did have a training course which overcame the visual cue issue. I'm aiming my app to be as user friendly as possible without having to teach the user too much (if anything).
Is there a particular CSS styling for a div that provides a cue - like a gripper hand to drag and drop and can I place some kind of visual cue around the div using CSS.
Any input is most welcome and I hope you understand what I'm trying to achieve here.
P.S. The vertical list can be quite long.
You may get some better answers to the usability questions on the User Experience Stack Exchange. My own anecdotal experience having used an interface where items could only be moved up or down one item at a time in a long list was that it was a total pain, and when drag-and-drop was finally implemented, it was a breath of fresh air.
I also have conducted a usability test (task 1 in this PDF) where a simple label of "Drag to add a new ..." (it was a duplication interface, not a reordering interface) on top of some pill-shaped elements (with a "grabby hand" cursor and change of color on hover) was quickly discovered by 8 out of 8 users without any prompting.
As for your technical questions, there are a few different CSS cursor styles you could implement (in particular, cursor: move;, cursor:grab,cursor:grabbing (my preference is for 'grab' on hover and 'grabbing' while dragging). I've shown some here: https://jsfiddle.net/xnho95oL/, as well an idea for some "placeholder" elements that might appear (and could presumably expand or otherwise change appearance when dragging an item over them).
I am reconstructing a massive collection of medical modules that were created in Flash. All of the modules are being redesigned for cross platform enjoyment (js and HTML5). I have been searching for a library or plugin that will add arrows(with rollover capabilities) and text above an image when the user clicks a button. I have had little luck.
The closest package I have found is Zoomify, but it's still not what I am looking for. They are asking for too much money for maximum development capabilities. I was really hoping to find a JQuery plugin or javascript library that would allow me to fully customize the interface. Here is a screenshot of an OLD FLASH module:
The red arrow corresponds to the link selected on the left. The new design is much more appealing but the underlying idea is the same, click buttons point to the objects.
If there is no such library or plugin should I create a simple javascript image viewer and store overlay coordinates in a database? Or is that overkill? I have hunderds of these things to do... maybe thousands :( Any help/direction would be greatly appreciated.
What you are asking for is provided by CSS, which enables one to place text directly on top of an image or other rendered HTML. The key CSS properties to investigate are:
position set to 'absolute'
values for at least two of top, right, bottom or left
use z-index to specifying layering/order
Lightbox is a good option "Lightbox is a simple, unobtrusive script used to overlay images on top of the current page. It's a snap to setup and works on all modern browsers."
I am new to web design so I wanted to learn more by looking at other websites and using their techniques. Now I am currently using blogger platform and wanted to copy an entire gadget from another blog http://gmailblog.blogspot.com/. I am trying to copy the right floating sidebar gadget to by blog.
To do so, I think I will have to copy the CSS codes, html codes and javascript if it is used. Is there a simple way to find all those codes and copy those to mine? I did try using the inspect element function of google chrome but was unsuccessful.
Any help?
Inspection elements are probably your best way to go, but a decent grasp of CSS and HTML would be required to get you started on that. Toggling styles on and off to see what happens is a good way to start poking into existing solutions.
When it comes to JavaScript parts of a feature, the inspection tools will probably not get you all that far.
For deeper introspection, you could always save a local copy of the entire webpage, remove bits and pieces, and see at which points the feature breaks; keep the things that seem to be required, and continue until you seem to have stripped the site down to the bare minimum to keep your feature working. From there you can move on to see if you can understand what the different parts of the remaining code does.
For your specific gadget, some key aspects include:
#gadget-dock has the style position: fixed that keeps the element's position in place as the user scrolls up and down the page.
#gadget-dock has the style right: -40px which keeps the element all but out of sight, by default.
#gadget-dock:hover has the style right: 0 which overrides the aforementioned style and moves the element into sight when hovered.
#gadget-dock also have a lot of CSS3 transitions that define the sliding motions that appear when changing from one position to another (i.e. when the value for right is changed).
I am currently building a widget that will allow users to design a layout for an application-specific task. And I would like to provide a powerpoint/keynote-esque interface (a la 280slides) for the users. However, I would also like to provide "snap guides" (sorry, I do not have any better words to describe them) which are basically guides taht help users align multiple elements on the page.
An example of this can be seen in the Flash IDE where, upon dragging the IDE automatically calculates the dimension and position of peripheral objects and attempts to align them. The mockingbird application (https://gomockingbird.com/mockingbird/) achieves something similar. (Hint: try dragging some objects and see how there are guides which attempt to align the object in their bounding boxes).
I believe a similar effect could be achived by caching an array of elements on the viewport and calculating the position and dimension of each element to find the best-fit snap. However, how do I calculate the most-probable position of the element being dragged? Are there any alternative solutions?
With someone with better knowledge, please enlighten me! :)
I suggest using a library that has already been written to accomplish this. For example, jQuery UI's Draggable does exactly this and is very customizable.
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.