Jump to content

How would you do this?

heldercervantes

By heldercervantes,
in General Support

 Share

Recommended Posts

kongondo Hero Member

kongondo

Posted
Posted (edited)

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 by kongondo
Updated @todo/@brainstorm
  • Like 7
Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted (edited)

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 by kongondo
Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted (edited)

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>

post-894-0-83574800-1450781326_thumb.png

Edit:

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

Edited by kongondo
Long table issue
  • Like 2
Link to comment
Share on other sites
tpr Hero Member

tpr

Posted
Posted

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.

  • Like 1
Link to comment
Share on other sites
heldercervantes Sr. Member

heldercervantes

Posted
  • Author
Posted

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)

  • Like 2
Link to comment
Share on other sites
heldercervantes Sr. Member

heldercervantes

Posted
  • Author
Posted

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.

  • Like 3
Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted

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...

Link to comment
Share on other sites
bernhard Hero Member

bernhard

Posted
Posted

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

  • Like 1
Link to comment
Share on other sites
kongondo Hero Member

kongondo

Posted
Posted

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).

Link to comment
Share on other sites
tpr Hero Member

tpr

Posted
Posted

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.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...