Feature #496

Allow a probe window tied to data coordinates to be customized with CSS (see screenshot)

Added by Andy Dufilie about 6 years ago. Updated almost 6 years ago.

Status:ResolvedStart date:08/04/2011
Priority:ImmediateDue date:12/01/2011
Assignee:Andy Dufilie% Done:

100%

Category:Visualization InterfaceEstimated time: (Total: 65.00 h)
Target version:1.0
Complexity:High OIC Priority:
Required by:Grand Rapids, Michigan

Description

{{thumb(Untitled.png)}}

This feature request does not include the ability to add links as shown in the screenshot.

Untitled.png - Screen Shot (61.1 KB) Chris Stefanich, 09/12/2011 04:24 PM

corners.css.zip (2.19 KB) Chris Stefanich, 09/15/2011 01:33 PM

weave-probe-demo-ff.html Magnifier (6.59 KB) Andy Dufilie, 11/17/2011 03:46 PM


Subtasks

Feature #696: Add an option to disable the probe tooltip (not disable probing completely, just disable the tooltip)ResolvedAndy Dufilie

History

#1 Updated by Andy Dufilie about 6 years ago

  • Tracker changed from Bug to Feature
  • Subject changed from probe to Allow probe tooltip to have a background image
  • Category set to Visualization Interface
  • Status changed from Open to Awaiting Feedback

We need a screenshot showing the existing functionality that is to be duplicated.

#2 Updated by Andy Dufilie about 6 years ago

  • Required by set to Grand Rapids, Michigan

#3 Updated by Chris Stefanich about 6 years ago

We would like to be able to change the appearance of the probe tool popup. It is currently a yellow box, we would like to be able to use CSS to style it in a different way, perhaps with an image background. Attached is a screen shot, the gray box would be the probe tool and the white area and shadow would be a background image.

#4 Updated by Andy Dufilie about 6 years ago

  • Subject changed from Allow probe tooltip to have a background image to Allow a probe window to be customized with CSS and have an optional background image (see screenshot)
  • Description updated (diff)
  • Complexity set to Medium

#5 Updated by Andy Dufilie about 6 years ago

  • Description updated (diff)
  • Status changed from Awaiting Feedback to Open

#6 Updated by Andy Dufilie about 6 years ago

  • Status changed from Open to Awaiting Feedback

#7 Updated by Andy Dufilie about 6 years ago

Could you attach the actual image used by the code so we can use it during development?

#8 Updated by Chris Stefanich about 6 years ago

The image is actually probably 8 images to allow the box change widths and heights. We are just looking for the ability to change the appearance via CSS to the probe tooltip. In the exaple CSS files I have found, there is a place in teh CS file for the probe tooltip, but changing that does nothing.

#9 Updated by Andy Dufilie about 6 years ago

  • Complexity changed from Medium to High

Do you have an example CSS file we could look at that works in another system?

#10 Updated by Andy Dufilie about 6 years ago

  • Subject changed from Allow a probe window to be customized with CSS and have an optional background image (see screenshot) to Allow a probe window to be customized with CSS with a complex skinning system (see screenshot)

#11 Updated by Chris Stefanich about 6 years ago

Attached is a simple rounded corners CSS example.

#12 Updated by Andy Dufilie about 6 years ago

What about the triangle at the bottom? Is that image always the same? Do you have a corresponding CSS for that?

#13 Updated by Chris Stefanich about 6 years ago

Would it be possible to allow the user to specify the HTML structure within the probe tool and then allow CSS styling? This would probably be the most flexible, most people will probably not need a ton of nested DIVs for their purposes.

#14 Updated by Andy Dufilie about 6 years ago

Instead of coding something within Weave, you could make a javascript function that pops up an html DIV window and put any links you want in there (just like the screenshot). I'm not sure, but it may be a lot of work to implement a skinning system within Weave. The flash player cannot render HTML anyway, so if you want to specify HTML it would have to go through JavaScript somehow.

So, what I'm suggesting is to just use feature #362 to get this functionality working. Is that acceptable?

#15 Updated by Chris Stefanich about 6 years ago

We need to be able to mark a point on a map and have the "balloon" above the marked point. If it was a div called with Javascript marking a spot and the user wanted to scroll around on the map, we would need it to stay where the point is as the user scrolls.

Example:
http://open.cridata.org/maps/mapas/map.html?mode=adv#

Click on the map. Once the balloon shows up, scroll around the map.

Would this be considered a separate feature rather than modifying the probe tool tip? If so, let me know, thanks!

#16 Updated by Andy Dufilie about 6 years ago

If you want the probe window to stay on the screen and move while the map is panned, it is no longer a tooltip at that point. It's more like an annotation tied to data coordinates (#57).

If you want the popup to be a DIV that moves as the map is panned, that should be done through JavaScript because DIVs cannot be rendered in ActionScript.

If we render it in ActionScript, it may not support that exact CSS you have provided. I have not tested it yet, so I do not know for sure.

#17 Updated by Chris Stefanich about 6 years ago

It sounds like it is more like #57. We need to duplicate the feature in the above example, whichever way is easiest and makes the same thing happen in weave is great. How would you recommend duplicating this feature, we are open to suggestions.

#18 Updated by Andy Dufilie about 6 years ago

  • Subject changed from Allow a probe window to be customized with CSS with a complex skinning system (see screenshot) to Allow a probe window tied to data coordinates to be customized with CSS (see screenshot)
  • Description updated (diff)

I think #57 would solve the problem, but #57 does not include the customization of this feature request. We could work on #57 and allow css styling.

However, if you want the option to specify HTML in the probe text with the links shown in the screenshot, then you may be able to get that feature quicker if it is implemented in JavaScript as a DIV that moves when the map is panned. We can add the ability to add a callback to any object that appears in the session state, and the DIV can be repositioned when the map zoom changes.

#19 Updated by Chris Stefanich about 6 years ago

We would like the option to specify HTML. If it would be quicker to implement this in JavaScript that should be fine, thanks!

#20 Updated by Andy Dufilie about 6 years ago

  • Priority changed from Normal to High

#21 Updated by Andy Dufilie about 6 years ago

  • Estimated time set to 50.00

#22 Updated by Chris Stefanich almost 6 years ago

I see this is still marked as "Awaiting Feedback"
We would like to go with the option offered to use a DIV that moves when the map is panned, and the ability to add a callback to any object in the session state would be added.

Thanks!

#23 Updated by Andy Dufilie almost 6 years ago

  • Status changed from Awaiting Feedback to Open

The addCallback function has been added to the javascript interface. The subtasks of this issue still need to be resolved.

#24 Updated by Chris Stefanich almost 6 years ago

Could not modify the "due date" field, please set to December 1, thanks!

#25 Updated by Andy Dufilie almost 6 years ago

I used the "Create Voting Issue" link to create the voting issue and set the due date.

#26 Updated by Andy Dufilie almost 6 years ago

  • Assignee set to Andy Dufilie

#27 Updated by Andy Dufilie almost 6 years ago

  • Target version set to 1.0

#28 Updated by Chris Stefanich almost 6 years ago

I just want to clarify the features of this issue, to make sure everyone is on the same page:

We need to be able to click on the map and retrieve information (like the probe tool does) and have that information appear in an HTML/CSS styled DIV using Javascript to create the DIV as well as use the callback feature in weave to have the DIV scroll when the map scrolls. So, for example, someone clicks on a point from a point shape file, we can set the probed attributes to be the name, address, and phone number of the point. A user clicks it, and we can show the name, phone number, and address of that point in a div styled any way that we want.

Thanks!

#29 Updated by Andy Dufilie almost 6 years ago

#30 Updated by Andy Dufilie almost 6 years ago

Here's a demo (also attached). My JavaScript code only works in FireFox:
http://demo.oicweave.org:8080/weave-probe-demo-ff.html?defaults=obesity.xml

#31 Updated by Chris Stefanich almost 6 years ago

Thanks for the demo, Andy.

Is it possible to hide the regular probe tool popup window? We essentially want to replace the probe popup with this feature, but if I disable probing, the information is not available, and with probing on, the regular probe window appears as well as the div appearing on click. Here is what we have put together currently:

http://weavetest.cridata.org:8787/WeaveMapas/customprobe.html?defaults=../cri-weave/config/customprobe.xml

Also, is it possible to have more than one of these DIVs on the screen scrolling with the map at the same time? An example would be someone placed 3 markers on the map and we populated the div with geographical information about the point clicked (This area includes: city: grand rapids, state: MI, etc). We would like for the user to continue using the map, and be able to refer back to those points and the information.

#32 Updated by Andy Dufilie almost 6 years ago

I'll have to add an option to disable just the tooltip (#696).

To add multiple popups, the code can be altered so each popup has a different ID.

Also available in: Atom PDF