My thumbs + albums, tooltips, and absolute position plugins

    Hi,

    I recently redesigned and rewrote the entire UI/skin of the virtual tours of my website, to make them compatible for mobile devices, and in doing so I developed a couple of plugins that I thought some of you may like to use too.

    The main one is a kind of scrolling thumbnails plugin, which allows you to group thumbs/scenes into sets or albums. It's useful when you have a large tour with many scenes. You can see an example here: http://uruguay360.com.uy/albums_example/, try resizing the window to see how it behaves on smaller viewport, or open it on a mobile device.

    The usage is very simple, just by including the plugin xml a simple row of thumbs will be generated automatically. You can define albums just by adding album="Album title" to the first scene of the desired album, and it will contain all the following scenes until the next album="".
    For example, to define a tour of 2 albums with 2 scenes each:

    Code
    <scene album="Album 1 title" title="Scene 1 title" ...> ... <scene> 
<scene title="Scene 2" ...> ... <scene> 
<scene album="Album 2 title" title="Scene 3 title" ...> ... <scene> 
<scene title="Scene 4" ...> ... <scene>

    I also made a tooltips plugin, which may be used on any layer or hotspot. You can see it on the example, on the thumbs, buttons or hotspots.
    It's based on the Krpano xml example, it uses the textfield plugin for the text, and the usage is basically the same. The main difference you might notice is that it doesn't use the mouse coordinates to position itself (oh and that it has an arrow!), instead it is positioned right above the element using it's absolute position, which brings me to...

    The last plugin I made, which let's you find the absolute position/coordinates of a layer relative to the stage, no matter what its align, edge, scale, width/height, x/y or ox/oy settings are, of it or any of the infinite parents it may have. It works with the scrollarea too. You can also specify of what edge of the layer you want the coordinates.

    So that's all, if any of you is interested in using them I will release them as Krpano plugins. I'd love to know what you think!

    Cheers,
    Hernán

    Hi,

    Quote from hernan124

    You can see an example here (a responsive site redesign is pending, so here is a full window example to try it on mobile devices).

    An amazing skin and design!
    Congratulations!

    Quote from hernan124

    A plugin that let's you find the absolute position/coordinates of a layer relative to the stage, no matter what its align, edge, scale, width/height, x/y or ox/oy settings are, of it or any of the infinite parents it may have. You can also specify of what edge of the layer you want the coordinates.

    I know about that requirement, but it's unfortunately a bit difficult to provide that in a way that works the same in Flash and all different HTML5 browsers - but it's on my todo list of course.

    Best regards,
    Klaus

    Quote from klaus.krpano

    An amazing skin and design!
    Congratulations!

    Thank you Klaus!! That means a lot.

    Quote from klaus.krpano

    I know about that requirement, but it's unfortunately a bit difficult to provide that in a way that works the same in Flash and all different HTML5 browsers - but it's on my todo list of course.

    I did develop the plugin I mention (I don't know if I was very clear now that I read it again, I'll edit it). I developed it in JS first, and then ported it to AS3 with not much trouble. I saw another post that someone published a similar plugin, but it didn't work with scaled layers and the scrollarea plugin, which I needed, so I did one from scratch.

    Do you think I could release these as commercial plugins?

    Best regards,
    Hernán

    Hi,

    Quote from hernan124

    I did develop the plugin I mention (I don't know if I was very clear now that I read it again, I'll edit it)

    Sorry, I was misunderstanding - I thought you are asking for such functionality.
    Great that you are able to make your own plugin for that!

    Quote from hernan124

    Do you think I could release these as commercial plugins?

    Yes, why not. I can't promise anything about it's potential commercial success of course, but if you want a plugin page - here is a plugin-page-template for downloading - create a plugin page using it, send it to me and I will upload and add it to the krpano plugins page:
    https://krpano.com/plugins/ownplugins/#top

    Quote from hernan124

    Klaus, about the absolute position plugin, if you are eventually going to make it a feature of Krpano I might as well make it open source, if you or anyone else is interested.

    Not in the immediate short-term yet, but in long-term I think there will be probably a build-in function for this...

    Best regards,
    Klaus

    Thanks Klaus! Alright, I'll make a plugin page for each one and send it to you. I'll also try to figure out a way to make demo versions for anyone to download and try it on their own, and post it here too.

    About releasing the absolute position plugin for free, I think I'll postpone that a bit and make it commercial too, as it is the basis for the tooltips plugin. But I'll make a demo version of it too, maybe limiting the number of calls, for example.

    Any suggestions for the thumbs or tooltips plugins are welcome, such as what customization options you'd like, etc.

    Hernán

    Ey Hernán! ... those plugins are looking very good! (the tooltips are very neat even on IOS!!! :) ... any idea on when will you make these available as commercial plugins?

    thanks

    Hi! Thank you, I'm glad you like them!

    I was just getting on with that today, I'm currently working on the documentation and polishing some things. I guess that maybe next week it will all be ready to publish here.

    Anyway, if you are in a hurry I could make a quick release for you, as the plugins themselves are pretty much ready. Which of them are you interested in?

    Best regards,
    Hernán

    Thanks for your reply Hermán!

    The tooltips thing is looking so good! ... it even works great on IOS!!! I'm really impressed ... I can't get to show up on IOS yet and also my current implementation of tooltips comes out of the screen if it is too close to the side.

    I am actually trying to implement something like yours as a help tooltip for the icons (still fighting the code and found your post :)

    A quick initial release of your fancy Tooltips would be great, otherwise I could wait until it is ready next week! ;)

    Thanks you!

    Antonio
      zakato360

    Thanks Antonio! I know what you feel, I stumbled with all those problems too!

    That's good news because I'm almost done with the tooltip and it's documentation, I only have left to prepare an example and the download package.

    I'll wrap it up, upload the plugin docs with the buy/download link to my site and post a link to it here tomorrow.

    Saludos!
    Hernán

    Hi Antonio,

    Sorry for the delay, the plugin is ready now, with a complete documentation and example!

    I've uploaded the plugin page here (edit: official tooltip plugin page), that's until I send it to Klaus to add it to the Krpano plugins page.

    You'll find everything there, including the download/buy link at the end.

    If you have any comments or questions please feel free to ask.

    Best regards,
    Hernán
    *thumbsup*

    Hi Hernán! :)

    I have finally spare some time to try out your wonderful tooltips plugin. I have managed to get something working ... but I am also getting some issues (?!?). I'm still down at my KRPANO learning curve, so these might be something I am doing wrong.

    Some context:
    I have modified the KRPANO default skin and I pretend to use your plugin mainly to show up tooltips for the control bar icons. I am attempting desktop, tablet and mobile versions (flash and HTML5). You may have a look at my curent test here: http://www.zakato.com/pub/20140721/

    What I like about your plugin is that it works fine on touch screens too and always keeps within the stagewidth.

    Find next some of the issues I am finding right now:

    A. If I include "abs_plugin_url" "abs_plugin_alturl" as in:

    Code
    <settings name="tooltip"
          style="default_tooltip_style"
          oy="0"
          textfield_plugin_url="%SWFPATH%/plugins/textfield.swf"
          abs_plugin_url="%SWFPATH%/plugins/abs.swf"
          abs_plugin_alturl="%SWFPATH%/plugins/abs.js"
          />

    I get - ERROR: decoding failed - http://www.zakato.com/pub/20140721/plugins/abs.js - and tooltips won't show up.

    If I get rid of "abs_plugin_url" "abs_plugin_alturl" it just loads fine.


    B. Also, "oy" above doesn't seem to be parsing as a general setting. It does work good if included inside each <layer> element.


    C. Tooltips are showing as expected on left side and right side icons (align=leftbottom align=rightbottom), but for center bottom icons (align=bottom) the tooltip shows up on the left of the screen.

    D. I am also trying to use the new tooltip plugin to work out on thumbs in order to show up the pano title (I'm doing this because it will show too on HTML5!). In this case, the tooltip show good on starting, but does not refresh its position when scrolling.

    I'll appreciate if you could give me some clues regarding these issues! ;)

    thanks!

    Antonio

    Hi Antonio! Thanks again for getting the plugin, and for pointing noticing those things now. Nice tour too! I'll answer all the points:

    Quote

    A. If I include "abs_plugin_url" "abs_plugin_alturl" ... I get - ERROR: decoding failed - http://www.zakato.com/pub/20140721/plugins/abs.js - and tooltips won't show up.

    That was a little bug in the tooltip xml, fixed!

    Quote

    B. Also, "oy" above doesn't seem to be parsing as a general setting. It does work good if included inside each <layer> element.

    My bad, another bug! Fixed!

    Quote

    C. Tooltips are showing as expected on left side and right side icons (align=leftbottom align=rightbottom), but for center bottom icons (align=bottom) the tooltip shows up on the left of the screen.

    That was because of a typo regarding the alignment names in the Abs plugin, fixed too!

    Quote

    D. I am also trying to use the new tooltip plugin to work out on thumbs in order to show up the pano title (I'm doing this because it will show too on HTML5!). In this case, the tooltip show good on starting, but does not refresh its position when scrolling.

    That issue of is probably related to not having the latest Krpano version as Klaus pointed out. I've tested it with the same skin on the latest version and it works fine. Try updating it (the viewer and all Krpano plugins) and see if that fixes it.


    I'll email you an updated bug-free version of the tooltip plugin files right now.

    Thanks and sorry for the issues.

    Hernán

    Thanks Hernan! (thanks Prof Klaus!)

    I have updated as suggested and most bugs are fixed now! :) ... the oy global still doesn't work, but I can define this individually as per layer.

    (I have also found that there is a trace leftover that reads INFO: 0)

    I am anyway getting to where I want now ... thanks Hernán, your help and plugin is much appreciated!

    One last thing I am trying to implement is multi-language and tooltip deactivation.

    How can i set the plugin visibility to false? ... I want my help icon to deactivate the tooltips. The way I am doing it right now is setting all tooltips to nothing:

    Code
    <action name="remove_help_tooltips">
  		set(layer[skin_btn_prev].tooltip, 			'' );
		set(layer[skin_btn_next].tooltip, 			'' );
		set(layer[skin_btn_thumbs].tooltip, 		'' );
 		...
               set(layer[skin_btn_show].tooltip, 			'' );
 </action>

    '

    And then set them back to some data with another action:

    Code
    <action name="set_help_tooltips_eng">
  		set(layer[skin_btn_prev].tooltip, 			get(data[help_tooltip_eng_prev].content) );
		set(layer[skin_btn_next].tooltip, 			get(data[help_tooltip_eng_next].content) );
		set(layer[skin_btn_thumbs].tooltip, 		get(data[help_tooltip_eng_thumbs].content) );
 		...
  		set(layer[skin_btn_show].tooltip, 			get(data[help_tooltip_eng_hide].content) );
</action>

    whereas:

    Code
    <data name="help_tooltip_eng_prev">     previous 				</data>
  <data name="help_tooltip_eng_next">     next 					</data>
  <data name="help_tooltip_eng_thumbs"> thumbnails 			</data>
  ...
 <data name="help_tooltip_eng_hide">     controls on/off 		</data>


    This way, it is a bit too long and not that elegant, but is working out for me. It would be great if we could track the instance name of the textfield plugin so that we could set its visibility to false, or even create separate instances of the plugin to be used for different, say for example languages.

    Anyway ... thanks once more!

    Antonio

    Hey! You're welcome, thanks to you for all the feedback!

    About the global oy, try including the file where you define the tooltip settings (vtourskin.xml), after the tooltip.xml file, otherwise it it won't override the defaults.

    About the visibility, that seems like a nice and easy setting to add. In fact I just implemented it as I wrote this *wink* . You'll now be able to define it in the settings adding visible="true/false", and in your case now you can call this in your button's event:

    Code
    switch(settings[tooltip].visible);

    About the multi-language thing, you could do something like the following, it's a bit tricky but it's the most convenient solution I can think of right now.
    For example, on each layer define the tooltip text like this:

    Code
    <layer name="fullscreen" style="button|tooltip"
  tooltip_es="Pantalla completa"
  tooltip_en="Fullscreen"
  ...
</layer>


    Then use this action to change all the layer's tooltip attribute value:

    Code
    <action name="set_tooltip_source">
  for(set(i,0), i LT layer.count, inc(i), 
    if(layer[get(i)].%1,
      copy(layer[get(i)].tooltip, layer[get(i)].%1);
    );
  );
</action>


    And call it like this:

    Code
    set_tooltip_source(tooltip_en);


    Note that you would have to call it at least once on startup.

    That's it, I'll email you an updated version with the new visibility setting. *thumbsup*

    Hernán

    Am I reading it right.... US$49.00 for the tooltips plugin?

    Wow! I really don't mean to sound like a grumpy old fart or start off a thread war but that's pretty pricey. Are you going for maximum sales or just a quick few *confused*

    Perhaps it includes the thumbs & album plugin or is that another US$49.00?

    Quote from andrew22222

    Am I reading it right.... US$49.00 for the tooltips plugin?

    Wow! I really don't mean to sound like a grumpy old fart or start off a thread war but that's pretty pricey. Are you going for maximum sales or just a quick few

    Perhaps it includes the thumbs & album plugin or is that another US$49.00?


    That's correct. No worries, all feedback is welcome!

    If you consider all the hours it would take you (I mean anyone) to make something with the same characteristics, and value your hours at minimum in a couple of dollars, it seems seems like a reasonable investment. There's also the fact that if you need it you're probably making tours in a profesional manner, so $49 should be a small amount compared to what you must charge.

    On another note, I did think it could be a bit pricey, compared to other plugins. I actually dropped it to $29 for a day, but I really meant it to be €29, which is something in the middle (and to keep up the same standard as all Krpano stuff, which I realized is all priced in euros). I didn't realize at first that it only applied for new products on Gumroad so then I set it back to $49 in the meantime, until I get the rest of the plugins ready and upload all at once.

    Anyway, the final price for the tooltip plugin is going to be 29€. It does include the Absolute Position plugin, that will be priced approx. at half of that. If you are interested I'll re-upload it and update the buying link.

    FYI the thumbs plugin will include the Tooltip and Abs plugins, and will come in two versions: with and without the albums/grouping functionality, and will be priced at €49 and €99 respectively. I can see that that could be another topic of discussion but please refer to my first arguments, which I'll be happy to expand *smile*

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!

Register Yourself Login