IE compatibility!

[goivan]

Hi, Jamie, like I told you I was going to do extensive testing and I did.

I believe there is still something wrong with IE. Basically what I did was once the page load I click back and forth on the areas of the building that have key plans (Upper Penthouses, Lower Penthouses, Tower and Townhouses) once it load I hover over the key plan on the right to make sure the areas are hi-lighted and then click again in another area of the building. I did my testing with HP computers with both IE8 and IE9 when I do what I just told you and after about the 12th iteration (sometimes the 13 or 14) the hi-lighting over the are being hover stops. In the same computer I installed Safari and did the same testing and basically I did as many as 40 iterations three or four different times and never failed!

The new link is http://www.brickell-realty.com/epic1.html

Ivan

[jamietre]

Will check it out. It's possible I don't clean up the IE graphics properly. IE also has some memory leak bugs that I may need to do something to account for.

[goivan]

Wow, I just saw the new "hilight_style" and it is so freaking cool!

[jamietre]

Yeah I finally got that working had been playing around with it for a couple
weeks. Still needs some testing and cleanup but lots of possibilities...
On May 14, 2011 8:50 AM, "goivan" <
reply@reply.github.com>
wrote:

Wow, I just saw the new "hilight_style" and it is so freaking cool!

Reply to this email directly or view it on GitHub:
#3 (comment)

[goivan]

Hi, I do not know if the following situation may help you with the IE troubleshooting or not. I did a modification to the page with the floorplans and as always it works in Firefox, Chrome and Safari. In IE something strange is happening, first here is the link http://www.brickell-realty.com/epic7a.html, once you load the page there is a selection menu right below the slide show in the middle, select RESIDENCES. In IE if you hover over the building the hilight does not work however you can click on it to change the type of unit or click on the right to select a specific floor plan right after this the hilighting works.

As always everything works in the other browsers!

Like you say Arggh IE!

Ivan

[jamietre]

I figured this out - it was happening because the image was blank and had no size set in CSS when initially bound. The code should be able to handle this now (using the 'width'/'height' attributes). Update to the current push, seems to work now in my dev environment.

I have not had time to do regression testing in IE to see if there's a memory leak somewhere - there have been some other changes that could have some impact on the problem you were having before, though, but just so you know I haven't specifically looked at that yet. I should be able to do that late today or tonight. Either way let me know if this current update solves the IE problem on first load.

[goivan]

Just uploaded the new version and you are right, that issue I was having is fixed also I did some testing doing multiple iterations and I stop at 20, maybe I could have gotten further but I want to repeat my testing in the same place where I did my previous tests. I will keep you posted!

The new link which is up and running is http://brickell-realty.com/epic.html

You can use as an example!

I am working on tying the table to the floor plans so when people mouseover an unit the corresponding one is hilighted in the keyplan (I believe the right feature to use are the lists) also I am going to be adding some additional buttons to the keyplans that would say Studio Bedrooms: 1 2 3 so when people mouseover then all corresponding units light up.

Your plugin is Habit-Forming, there are so many possibilities, so many things I want it to do for many years and the only possibility was FLASH.

Looking back when I started using Image Mapster I was confused since I started this project using Map Hilight and somehow I though that your plugin was just a simple extension to the other one. I think it will be nice for others if you mention that although you started with map hilight code your product is a totally different monster and tell people to forget what they were doing before like using the metada plugin, etc.

Thanks

[jamietre]

Hey - I just now updated again, and I believe I found what could be causing crashing after a lot of binding/unbind in IE. It failed to remove the DIV wrapper around the image, so after a while you would end up with a lot of nested divs. This has been corrected and I am guessing this was the source of the problem. Give it a shot.

Thanks for the compliment, when this first began it was mostly an extension but at this point it's been completely refactored a couple times, and there's really not much left of the original code! Maphilight was the inspiration and starting point, but maybe I should downplay the connection going forward for the reason you state.

[goivan]

Jamie,

1.- Added MagicZoom it works great in conjunction with Image Mapster, never ever dream this whole thing could be done without flash
2.- Would be nice to have separate fill and stroke properties for hilighting and selected items .
3.- I believe your plugin has become a world class product like MagicZoom (http://www.magictoolbox.com/magiczoom/) and Datatables (http://www.datatables.net), in the case of Datatables, I think it would be a great companion to ImageMapster. They support hidden columns that could be tie to ImageMapster Lists and they have a full API for support. I already started looking into it, maybe we could work together to establish a full bi-directional communication between the two products. There could be all sort of info, like group relations, etc supply from a table instead of an image map. Take a look at it if you have time!
4.- You should add a CONTRIBUTE button to your site, when the word gets around about Image Mapster you are going to be very, very busy.

Ivan

[jamietre]

#1 - cool. I will have to check that out. I was thinking about adding some kind of feature that would zoom when clicking on an area using a higher-resolution version of the image, similar to what they are doing there, except it would match the selected area boundaries. The plugin is starting to get kind of big, though, and a lot of my time working on it in the last week has been to tighten up the code, too. So in the next verison I am probably going to try to split out the tool tip function at least as a separate plugin (since it's really just there for convenience anyway, it's easy to use any of a hundred other tool tip plugins).

#2 - funny you should mention that. This will be in the next version. To support the "alternate image" functionality, I split the rendering options like this:

{
   render: {
      highlight: {
      // options for highlight
         stroke: true,
         altImage: ...,
         opacity: 0.5,
         altImageOpacity: 0.3,
         etc: ect
     },
     select: {
       // options for select 
    }
}

Because the options you need for using an alternate imge vs. highlighting could be very dfiferent I was doing this anyway, but a consequence is that all the rendering can be controlled for either highlighting or selecting individually. I'm still debugging but will probably have a new update today with all this included.

#3 -- I've thought about the way this works with imagemaps a bit - the only reason I actually need to use an HTML image map is because it makes it easy to trap the mouse events for an irregularly shaped area. If I wrote (or found) some code to tell me, given a set of vector data, which area the mouse was in, there would be no need to use them at all. However browsers are probably faster natively at doing this math than I could do in script, so I'm not sure it would help especially in really slow browsers like IE6. But the benefit is that one wouldn't need to keep all that data in "area" tags, there would be no HTML markup needed at all to support these things, and the vector data could be more easily passed or managed as arrays or whatever. I don't know much about datatables (will check it out) but I assume this is what you're talking about.

Thanks for all your kind words, this has been a lot of fun and is my first substantive javascript graphics project so I've been learning a lot as I go a long and it's great to have someone like you interested and coming up with ideas and testing... it's been moving along pretty fast as a result, and there are lots of possibilities. Once I get this next release stable (it's actually going to become 1.1 at last with the "altImage" functionality) I'll see about getting a better home page designed and promoting a little bit! I don't think there are a lot of tools out there that do a lot of this, which is why I started doing this in the first place, so I have high hopes that it will get around!

I would welcome your continued involvment in this project in any way you want to help, you've been a great help so far in pushing it and tweaking it, and I would love to make it a really great tool.

[jamietre]

Just pushed another update, 1.1 beta 2. The same code is also on http://www.outsharked.com/imagemapster where the USA map example shows using stroke only for highlighting.

There are also some other improvements -- I fixed some flickering during mouseover highlighting that happened when moving quickly, got the canvas functionality working in IE9 (so that should act just like chrome and firefox now), and also got the fade effects to work in older browsers (everything except IE8, actually, for some reason that one doesn't work -- but the fades do work now in IE6&7).

This includes the alternate image feature, and has rendering options settable by action. The format is different from what I said before, I ended up with this:

{
    isSelectable:true,
    ..other options...,
     render_select: {
        stroke: true,
        altImage: 'some/path/to/image.jpg'
    },
    render_highlight: {
        fade:true,
        stroke:false
    }
}

The options for either render_select or render_highlight will be inherited from the main part of the options object. So this means that everything should still work without changes now, e.g., if you just have rendering options as before, they will automatically apply to both "highlight" and "select." But if you add specific options in either of those subobjects, they will affect only that action. This makes it easy to also defined things that should apply to both actions at the root level of the options object. You can even use an alternate image for only highlighting or only selecting (or both).

The current version seems stable but there are also a lot of changes since the last real release so I'm not going to update the download until I've done some more testing, but check it out.

[goivan]

Hi,

I isolated just the portion of the page that uses Image Mapster o make testing simpler here is the link
http://brickell-realty.com/epicfp11b2.html an a couple of things just came out, the unbind is not longer working and there is a link being created that activates in any place where there it is not a selection area for the map

Regarding the new options I tried this.

$('#bldg-containerID').mapster({
    isDeselectable: false,
    singleSelect: true,
    mapKey: 'rel',
    fill: true,
    fillColor: 'e5fefd',
    fillOpacity: 0.5,
    stroke: true,
    stroke: 1,
    strokeColor: '275aea',
    render_select: {
        strokeColor: 'ff0000'
    },
    areas:  [{key: '2th', selected: true}],
    onClick: function (e) {S1_bldgSelect(e.key);}
});

I understood that anything no set in the regular options will be overridden by the new settings?

[jamietre]

Hmm... the test page seems to work normally for me in Chrome, maybe it's a browser specific problem. The behavior you noted about a link being created usually means it is not bound, because when not bound, it does not stop the default behavior of the image map which tries to navigate to a link from the "href" in the map.

I'm about to hit the road so I won't be able to look into this until Sunday, but the options you set up look correct. Anything set in the "render" options should take precedence over regular settings. If you omit something from either place, it will use the general default settings.

Anyway it's entirely possible there are some problems with this update, I made a huge number of changes since the last push and while all the regular tests pass and I did some cursory testing, it needs to be pushed around a bit. So if it doesn't seem to be working don't worry about it, I'll figure it out sunday or monday.

One other thing I did finally figure out which should help you when this gets working is memory leaking when binding/unbinding. Some resources were not being released properly so each rebind was sucking up more memory. In modern browsers this wasn't causing too much trouble but it was crippling older IEs after a lot of iterations so hopefully that will be solved too once this current version gets released!

[goivan]

Hi,

You were right, the problem was with MagicZoomPlus all it took was to add an
onclick to the anchor for MagicZoomPlus

The only inconsistency now is with fill and stroke properties in IE vs the others.
in all others it is the same in IE the stroke of the hilight is THICKER vs the set one

I revisited all my code and added comments with legends plus rename everything
that had to do with image mapster with names that made more sense, so it is easy
for anybody looking at it

I will keep the following page up for testing regarding anything related to image mapster
http://brickell-realty.com/im-test.html

[goivan]

I was looking through the options to see if there was something to trigger a hilight from an external event and vice-versa. I believe I could set up a jquery function for the mouse over effect in image mapster, this would solve the out however I have not clue if somehow I could trigger a hilight. I have the datatables already figured out both ways,

[goivan]

Looking at it, I think the best approach will be to call a definable function with the key when an area is hi-light and a function that is called with the key so image maspter will hi-light an area. From an API point of view this will make image mapster very complete!

[jamietre]

Hey, I'm back, I should be able to get to this today, so if I understand, everything seems to be working in that latest push except that the fill & stroke don't work the same in IE? Adding a call to enable a highlight is easy enough, though I'm not quite sure how that would work once it's called. Would it just stay lit until the mouse moved into any area?

[goivan]

Good to have you back!

Exactly, the idea is that when someone is browsing in the table the row that is hi-lighted is also hi-lighted in the image, also when someone is browsing in the image the corresponding row in the table is also hi-lighted. The table has a hidden column with the key.

Selecting an area by clicking is already taking care of in both directions by image mapster API

[jamietre]

Ok, pushed out another update, and it's officially 1.1 now. I did not add the ability to highlight from code yet (I wanted to get the alternate image stuff "released"). Will add that soon though.

[goivan]

Thanks, you were out of combat for a while.
Please take a look at the "set" it is pretty much working regardless of were you click the table or the images
here is the link, http://brickell-realty.com/im-test.html
and I am ready when you have the hi-lighting ready to try it out. I will look at the new documentation but I am
still confused on how to select different color fills for set and hi-light. I would think the hi-lights going out will be
through a callback function definable independently per image map.
Thanks, Ivan

[jamietre]

Take a look at this: http://www.outsharked.com/imagemapster/test.htm

This is using options like:

 default_options=
    {
        fillOpacity: 0.5,
        render_highlight: {
            fillColor: '2aff00'
        },
        render_select: {
            fillColor: 'ff000c'
        },
....
}

[goivan]

Got the latest source from your test.htm since it shows in github that the source has not been updated
"jquery.imagemapster.js 4 days ago ImageMapster 1.1 beta 2 [jamietre]"
and works as expected in Safari 5.0.5, Firefox 3.6.8, chrome 11.0.696.71 and IE8 with and without
''
Excellent!

[goivan]

when I said with and without the tag was left out I meant the meta tag to emulate IE7,
Wow I am so excited this is finally coming together!
Obviously I do not know how it is going to be at the end

but I added bits of code like this to my testing page

$('img').mapster('highlight',key);

onHighlight: function (e) {hilightTablerow(e.key);}

to be ready when you have the highlight functions working!
I just started working in a new piece with dynamic pie charts and tables using image mapster

Remember to add the donate button to your page I would really like to be the first one
to contribute with your effort!

[jamietre]

Pushed 1.1.1 beta. This adds:

$('img').mapster('highlight',selected,key)

selected is true or false. key is the key value for the area to be highlighted. Since only one area can be highlighted at a time, if selected is false, key is ignored, and the highlight is removed.

There is an event onStateChange which calls a function of this form:

function stateChange({
key: key,
state: 'highlight' | 'select',
selected: true | false
});

this runs whenever something is selected or highlighted, so you can check the "state" property of the object passed. the "this" for the function is the image bound to the mapster.

The usa.html example has been updated in the current push also, if you click on the text of a state from the list at right, it will highlight it.

The events aren't well tested right now, but they should work, I may not have time today to update the tests to cover this thoroughly, so do let me know if you try it and find anything wrong.

Also I changed the API for the "options" method - this had to be done unfortunately since it was confusing to use the same method to get & set options with the same method. there's now get_options and set_options. If you were using 'options' to change options after initial binding you will need to update code to use 'set_options' instead.

[goivan]

There has to be something wrong with the last push because the moment I put it in
then everything breaks including imagemapster itself, I try removing all other plugins
and the same I was using jquery 1.5.2 and also try 1.6.1 and the same please check!

[goivan]

I found the problem, something went wrong with my jquery

[jamietre]

ok - so all good at this point? i definitely need to create tests for the new functions anyway but glad it's not totally broken :)

[goivan]

Being playing around with $('img').mapster('highlight',selected,key)
please take a look at http://www.brickell-realty.com/im-test.html
something pretty strange is happening if you go in the area of the townhouses
if you mouse in and out from either side into each row you will see that in rows 2-9 everything is ok
however in row 1 it stays highlighted, now if you go into any of the other tables (tower, penthouses, etc)
the same thing happens but with the last row

I have not check the onStateChange but I will in a few minutes!

[goivan]

I did check that in every case the mouse in and out are being sent to image maspter

[jamietre]

Looks like the highlight not turning off by itself when mousing out of pool level? I have an idea about that let me check something.

[jamietre]

Yep stupid mistake, in this function the 2nd line is wrong, here's the fix. Will update the rep in a few.

    function ensure_no_highlight(map_data) {
        if (map_data.highlight_id>=0) {
            clear_highlight(map_data);
            change_state(map_data,map_data.highlight_id,'highlight',false);
        }
    }

[goivan]

There was a problem also with fade before I was using the following call an the fade was disable properly

$('#leftImg').mapster({
    isDeselectable: false,
    singleSelect: true,
    mapKey: 'rel',
    fade: false,
    fill: true,
    fillOpacity: 0.5,
    render_highlight: {
        fillColor: 'ffff99'
    },
    render_select: {
        fillColor: '8cc76c'
    },
    stroke: true,
    strokeColor: '275aea',
    stroke: 1,
    areas:  [{key: '2th', selected: true}],
    onClick: function (e) {S1_bldgSelect(e.key);}
});

With the new push I have to include a fade: false; in the render_highlight area otherwise it was fading the highlight

$('#leftImg').mapster({
    isDeselectable: false,
    singleSelect: true,
    mapKey: 'rel',
    fade: false,
    fill: true,
    fillOpacity: 0.5,
    render_highlight: {
        fade: false,
        fillColor: 'ffff99'
    },
    render_select: {
        fillColor: '8cc76c'
    },
    stroke: true,
    strokeColor: '275aea',
    stroke: 1,
    areas:  [{key: '2th', selected: true}],
    onClick: function (e) {S1_bldgSelect(e.key);}
});

[jamietre]

Hmm... yeah that is a consequence of the default options with the new scheme. I had set fade to "false" for everything and then "true" in render_highlight. I just pushed again and switched it around so it's "true" for everything by default, and "false" in "render_highlight" - this way setting fade: false at the global level will turn it off.

[goivan]

Great so far, everything perfect after the new push.
I am going to try the onStateChange
So how do I use it?
Do I need an event listener? can you give me an example?

[jamietre]

onStateChange is just like the other events, so just pass it a function to be called, e.g.

function state_changed(img, data) {
    if (data.state==="highlight' && data.selected) {
        // area identified by data.key was hilighted
    }
} 

in options:
{ ...
onStateChange: state_changed,
...
}

Also check out the issue that was opened last night (now closed) - added a new feature that might be interesting to you - quite simple actually but potentially very useful. Lets you create "ignore" areas that do not respond to mouse events, but can be activated when another area is activated. So you can have areas with their own individual effects come up when some other area is activated. It's like grouping, but decouples them from all the options of the main group and they can be otherwise invisible and not respond to mouseovers.

[goivan]

IgnoreKeys is really nice, I also think SUPER GROUPS could prove to be very useful,

In Real Estate sites I could have supergroups in key plans where I use an area as a button
to highlight units with for example: two-bedrooms and another one with three-bedrooms, I am already
using groups because the units are 2-story so the keyplans have two parts.

EVEN BETTER could be ULTRA-SUPER-GROUPS to tie different areas in separate images together

Image Mapster is becoming a beast, COOL!

I tried onStateChange exactly as you mentioned and I am not even getting a response back! I do not understand!
Have you tried out in a page or something?

[jamietre]

Hmm. I have not tested it thoroguhly though I though I had added a basic test, I'll look into it and get back to you.

(edit)- To do that across images should be no problem, you could just capture the events from one image, and use "highlight" or 'set" to mimic it in the other image!

[goivan]

I added a simple alert to the change_state routine in your code and it does not return
the key but instead it seems like an internal area number of image mapster

[jamietre]

There was a problem. Just pushed an update with a fix. The format I gave you before is incorrect too, there's only one parameter in the fucntion. The image is passed as "this." so the function should look like

function state_changed(data) {
   ...
} 

[goivan]

Great!, I was going crazy,

I think that when img.state is "highlight" then img.selected should return true or false
so I know the when it is IN or OUT of an area. What do you think?

[jamietre]

Yeah it's supposed to do that.. i see it was not. I just fixed it and pushed the correction. There is still one small issue. When a user "deselects" something, the event will fire twice, once for "selected:false" and once for "highlight:false". This is because it turns off the highlight internally when deselecting, otherwise, you wouldn't be able to see the full visible effect. Then it will fire the "highlight:false" event a 2nd time when the user actually mouses out of the area.

I need to make it not fire the event when something is deselected (even though it visually removes the highlight) because that's not the intent, i'll see about getting this fixed soon, but it's not quite as simple as the bug that made it always be false.

[jamietre]

What I really need to do is write tests for all these new features :) so you don't have to discover all the bugs yourself... but my actual job is preventing me from spending more than a few minutes here or there this week! I should catch up this weekend.

[jamietre]

Fixed that last prob I saw, should be good now on current push.

[goivan]

Jamie,

Wow, I just uploaded the FINAL* page of EPIC at Brickell-realty.com, http://www.brickell-realty.com/epic.html
and it looks just awesome, that last thing that allowed me to have the image maps interact with the tables made all the difference.

Now I have to simplify and optimize what I did but at least know is working!

Even I am using "datatables" at the end I decided not to use their API for the tables highlighting since it added a level of complexity that it was not needed! (they have so many different APIs, you can get lost in no time)

So what I did was, add an ID, named with the same keys used in the areas of the image maps to each table row and then used plain and simple and beautiful jquery for the rest. I think this simple approach could be used to link all sort of HTML structures to Image Maps.

I AM VERY GRATEFUL FOR YOU HELP!

You are a kind and gifted developer willing to help others, I would really like to keep in touch and help you out with testing
and whatever else I can be of help!

I have a few ideas for Image Mapster and will star sending them soon.

THANKS

Please remember to add the DONATE button to your page I do not believe is fair that I make money with your work and you do not get anything PLEASE!

• Nothing is final when it comes to programming, I am sure Microsoft is going to find a way to screw up everything we do in their next IE release!

[jamietre]

The page looks awesome! And your help in working through these new features is much appreciated. It's hard to automate UI testing and I may not have found many of the problems for a long time.

I'm hoping to do some work on redesigning the project page this weekend. My wife's actually a (former) web designer so it's kind of sad that I have such a sorry looking web page :). But I think this project would benefit from a more professional looking web presence... it is still very much under the radar, but now that it's become pretty feature rich and stable, I think it's got the potential to get adopted for a lot of interesting things.

[jamietre]

Btw - remarkably your page works in Internet Explorer 6, which is always an accomplishment in and of itself, though it does have a minor layout problem which is probably not too hard to fix. The floorplan detail shows below the building instead of next to it, probably just some div/float issue. It should also be possible to prevent it from jumping to the top when clicking on the "description" & "features" links, i'm not sure how you're binding those links but e.preventDefault() should stop any page motion if you're using jquery to bind events.

There also appears to be some javascript error "displaytime is not defined" when I view it in chrome but for some reason doesn't seem to happen in IE or firefox. Not a huge deal, but thought I would mention it.

Other than that it works beautifully!

One other thought: if you really wanted to get rid of flash entirely, check out this cool looking plugin I came across yesterday, which would probably be a nice replacement for the banner functionality: http://nivo.dev7studios.com/

Not that there's anything wrong with it, except that it's flash :)