wiseman / mavelous

multi-platform ground station for drones that speak the MAVLink protocol
MIT License
167 stars 85 forks source link

Selectable GPS info #35

Open wiseman opened 11 years ago

wiseman commented 11 years ago

It's a small thing, but I'd like the user to be able to select the lat & long coordinate text in the GPS popover for copy & paste, and right now you can't.

I think the issue is that the entire DOM structure in the popover changes several times per second, and every time it changes the text selection is cleared. I can think of two possible solutions:

  1. Add a "copy" button that will automatically copy the GPS coordinates into the clipboard. This is kind of a hack since browsers already have mechanisms for selection and copying. It's also complicated by the fact that browsers don't seem to have good support for the HTML5 clipboard API yet so people end up using Flash or Silverlight (like Closure's goog.silverlight.ClipboardButton).
  2. Change the GPS popover rendering code so that it leaves some DOM structure intact, and only changes the numeric coordinates in the DOM. If a text selection is anchored on the left and right by static DOM elements, it seems that the middle part of the selection can change without causing deselection. To see an example of this, try selecting different ranges of text in this jsfiddle: http://jsfiddle.net/johnwiseman/Lwqdf/

So let's try the latter?

pchickey commented 11 years ago

I've always wanted the second option but it will mean a bit of surgery on the two bootstrap plugins that render the popover. I had hacked it together but it was never really satisfying.

On Dec 28, 2012, at 3:09 PM, John Wiseman notifications@github.com wrote:

It's a small thing, but I'd like the user to be able to select the lat & long coordinate text in the GPS popover for copy & paste, and right now you can't.

I think the issue is that the entire DOM structure in the popover changes several times per second, and every time it changes the text selection is cleared. I can think of two possible solutions:

1.

Add a "copy" button that will automatically copy the GPS coordinates into the clipboard. This is kind of a hack since browsers already have mechanisms for selection and copying. It's also complicated by the fact that browsers don't seem to have good support for the HTML5 clipboard API yet http://www.w3.org/TR/clipboard-apis/ so people end up using Flash or Silverlight (like Closure's goog.silverlight.ClipboardButtonhttp://code.google.com/p/closure-library/source/browse/trunk/third_party/closure/goog/silverlight/clipboardbutton.js?r=497 ). 2.

Change the GPS popover rendering code so that it leaves some DOM structure intact, and only changes the numeric coordinates in the DOM. If a text selection is anchored on the left and right by static DOM elements, it seems that the middle part of the selection can change without causing deselection. To see an example of this, try selecting different ranges of text in this jsfiddle: http://jsfiddle.net/johnwiseman/Lwqdf/

So let's try the latter?

— Reply to this email directly or view it on GitHubhttps://github.com/wiseman/mavelous/issues/35.

wiseman commented 11 years ago

I haven't completely grokked the popover code yet, so let me know if this doesn't make sense, but I was thinking along these lines:

  1. popover.show('<div id="gpsstatus"></div>');
  2. Create a View subclass (GpsStatusView or something) that renders into #gpsstatus whenever we get GPS messages. Part of the DOM it creates would be static (created once), part of it would be dynamic, e.g. Coords <span id="lat"></span>°, <span id="lon"></span>°
  3. Dispose of the view when the popover is closed.

Backbone.View can be convinced to render into an existing DOM element, I bet, or Closure's goog.ui.Component supports a protocol for rendering into existing elements (using .decorate() instead of .render()).