How would you do this?

[heldercervantes]

Want to have a go at it? I can handle all the jquery and css stuff.

[kongondo]

Managed to quickly put something together. Will post an update here Sunday or Monday if possible + send you some requests for the JS...

[kongondo]

ImageMarker beta 1 is out (well, sort of)

Largely based on @ryan FieldtypeEvents + @kongondo MenuBuilder

Up on GitHub later (if I get the chance before x-mas ) + Move to own module support forum

API

// assuming an ImageMarker field called 'marker'
$page->marker->info;// ID of the info page (i.e the page represented by the 'dot'/'bubble'
$page->marker->x;// x coordinate in px
$page->marker->y;// y coordinate in px
$page->marker->infoLabel;// title of the info page

@todo/@brainstorm

1. Default/New  X/Y coordinates are 0,0. Is this OK?
2. Configurable unique colour for each bubble? Would need to use colour picker + save value to db. Edit. No need actually. See post #34 below; now numbering each marker.
3. Rename dot to bubble? Edit. Renamed to 'marker'
4. Configurable dot/bubble sizes?
5. Default colours?
6. Slider/up-down arrows thing for manual edit of px inputs? Probably not; it is faster to type
7. Reno Theme issue; since using img width 100% height auto in CSS, and since x/y saved as px, dots are off in reno theme. Using percentages should sort this out but do we want to do that or force user to upload image of max width w and max height h?. Edit. See post #34. Using percentages.
8. Rename 'info' property to something else?
9. Make tooltip more specific to IM dots only +  unobtrusive
10. Currently loading only info page ID in Field rather than the whole page object. User to grab pages within template file instead. Reasoning is potential performance issues if there's lots of bubbles?
11. GitHub repo
12. Own module support forum (assuming this goes forward )

Note

• Requires user to set up a file field + upload a base image to that field
• Currently, I really don't have time to work on this. Managed to do this in between stuff, when I got tired/bored of coding that other stuff

Demo

Edited December 22, 2015 by kongondo
Updated @todo/@brainstorm

[tpr]

Looks good! Setting coordinates in percentage wouldn't work? Markers will go wild on responsive sites if pixel values are used, I guess.

[kongondo]

I prefer percentages but would like to hear of any disadvantages to using them, if any?

[kongondo]

Actually, quite easy to make it configurable on a per field basis, i.e. user can specify units to suit their needs, so offer all valid CSS length units as long as we can convert them in javascript:

em, ex, %, px, cm, mm, in, pt, pc

Edit: Hmm..but would still have the challenge of setting the base image width based on these...hmm. So maybe stick to % and let user convert that to whatever they like at template file level...

Edited December 21, 2015 by kongondo

[tpr]

Check this:

http://codepen.io/rolandtoth/pen/GoqEYZ

[kongondo]

I like your markers. Think will use them instead

[kongondo]

Small (but important update): Switched to percentages

   + adopted @tpr's markers (thanks!)

   + renamed .dot to .marker
 

[tpr]

Remarkerable updates

Two-digit markers seems to need some fix but that's a minor thing.

[kongondo]

Two-digit markers seems to need some fix but that's a minor thing.

Yeah. I'm horrible at CSS ...Not sure if it needs some padding or what 

[tpr]

I updated the codepen example above to allow 3 digit markers. Perhaps it's not the best way of doing I think it will do.

[kongondo]

Forgot to clarify that I am still using @heldercervantes HTML (has a couple of nested DIVs) but with (most) of your CSS. I found it to work better even when an image was viewed at its actual size (e.g. the above is 4500x2234). The markers largely stayed in the right positions.

Regarding the two-digit markers, I have only had to adjust the padding to 'padding: 0.5em 0' and it looks acceptable, I think? Haven't tested with 3-digit markers.

Anyway, once  I put this up on GitHub you guys can tell me if the markup needs adjusting, etc. Thanks.

<div class="fieldContainer">
  <img src="base.jpg" alt="" />
  <div class="marker">
    <div class="circle"></div>
    <div class="center"></div>
  </div>
</div>

Edit:

With lots of markers, the table of coordinates becomes a bit long. Wondering whether to do something about it and how?

Edited December 22, 2015 by kongondo
Long table issue

[tpr]

Markers seem OK to me. Perhaps it would be wise to change them to rectangles with arrows pointing down (gmap-style, or speech rectangle style), to eliminate styling issues. And this would allow more precise positioning imo.

With lots of markers, the table of coordinates becomes a bit long. Wondering whether to do something about it and how?

Hiding all and make one visible only if clicking on its marker? Plus optionally allow the user the view all, with a button for example.

Or setting a max-height on the table and make it scrollable.

But maybe others came up with a better idea.

[heldercervantes]

Amazing work my friend. Looks like my help isn't needed.

I agree with percentages. Evaluating the site I'm working on I figured I'd have to compare each dot's coordinates with the image size to make everything scalable and responsive, so I think it's better to have it standard as percentage and convert to px on the frontend if needed.

If you can make this available this week, I'll be setting up the CMS on my site starting monday. It would be a good testing ground.

(Still stoked by the support this community offers, btw)

[mr-fan]

(Still stoked by the support this community offers, btw)

@kongondo this is a great project

sorry for ot - but may i know why this community is so great...

[heldercervantes]

Where else would someone post a question like I did, and in the same day find people gathering around the subject and build a new module that solves the problem?

This forum feels like actually being in a room filled with people who know their stuff and are willing to help a brother out.

[kongondo]

Markers seem OK to me. Perhaps it would be wise to change them to rectangles with arrows pointing down (gmap-style, or speech rectangle style), to eliminate styling issues. And this would allow more precise positioning imo.

Is it possible to use CSS only to create such markers or would this require using icons/images?

Hiding all and make one visible only if clicking on its marker? Plus optionally allow the user the view all, with a button for example.

Or setting a max-height on the table and make it scrollable.

I found a couple of CSS-only fixed-header-vertical-scroll-table solutions. I am leaning towards these...

[tpr]

1: Possible, search for CSS arrows or wait until I get to my lappy

2: You're the boss

[kongondo]

I'll wait . We'll still need to position them using top and left, or would that have to change?

[tpr]

That should not change, but markers will go up a bit, if arrows will point downwards.

That should not change, but markers will go up a bit, if arrows will point downwards.

[Beluga]

Arrows:

http://codepen.io/chrissp26/pen/QwOpbO

http://apps.eky.hk/css-triangle-generator/

[bernhard]

I'm on mobile. Maybe you want to have a look at semantic labels: http://semantic-ui.com/elements/label.html#basic

The great thing is that you don't have to load a heavy framework. It's all devided into small components. That's really great when you are missing something in another framework. Maybe you could provide different marker styles easily using semantic

[kongondo]

Thanks for the suggestions.

Since these are just for the backend, functionality is more important than style so I want to keep this to the bare minimum and maybe only offer two choices. Circle and Rectangle with a pointy-thingy (a callout rectangle).

[tpr]

Here is the callout style for starting point:

http://codepen.io/rolandtoth/pen/obzNom?editors=110/left/

To get the white border, two pseudo elements are used. The ":before" is for the border for the arrow.

The "points" are only to show the original points, so that markers are positioned to point exactly to their position.

Edit:

semantic is using a rectangle rotated in 45 degrees for the arrow. Let me know if you think that would be better.