Polygonal hotspots in HTML5

Anfänger

Mittwoch, 9. April 2014, 17:23

I am very interested in this feature, I have stopped a project waiting to use the polygonal hotspots in HTML5.

I would greatly appreciate knowing the date that krpano have this functionality.

Zum Seitenanfang

DJIO

Anfänger

Beiträge: 4

2

Montag, 19. Mai 2014, 18:07

I'm in the same situation and had to move the project from PanoTour Pro 2 (based on krpano) to a competitor software with this feature available since 2012. Very bad feeling we are being left behind. *sad*

When implementing this feature my suggestion is to have a detection for touchscreen devices (tablets/smartphones):
The Desktop version has the rollover option, so we can see the hotspot only when hovering it.
It would be nice to also have an option in the settings to turn the polygon hotspot visibility ON/OFF by default when detecting touchscreen devices. It would make it easier to see (or not) the polygon hotspot – as needed by each project – in devices without the hovering feature available. ;-)

Hope we get some good news in this feature soon.

DJIO | Dionizio Bonfim Bach
360ºMix | Multimedia Integrations
Mobile: +55 (41) 8839.0929
Landline: +55 (41) 3779.9322
Skype : djio.com.br or www.360mix.net
Website: www.360mix.net

Zum Seitenanfang

Umalo

Profi

Beiträge: 1 051

Wohnort: Osijek, Croatia, EU

3

Donnerstag, 22. Mai 2014, 12:37

Why would you stop the projects by the facts that poligonal hotspots are not HTML5 supported.
You can use regular images to capture events and that's it. Make them aligned with this tutorial if needed. Make them invisible just for catching the mouse/touch events
http://krpano.com/forum/wbb/index.php?pa…d&threadID=7272

Example (works on Flash and HTML5 mouse/touchdevices): Example
There is a catch of pixelhittest on transparent part of the image that also capture the events but using smaller images can be nice workaround.

Zum Seitenanfang

DJIO

Anfänger

Beiträge: 4

4

Mittwoch, 11. Juni 2014, 09:46

Zitat von »Umalo«

Why would you stop the projects by the facts that poligonal hotspots are not HTML5 supported.
You can use regular images to capture events and that's it. Make them aligned with this tutorial if needed. Make them invisible just for catching the mouse/touch events
Example/Tutorial - Extract a Distorted Hotspot from any kind of Pano Image (with perfect pixel alignment)

Example (works on Flash and HTML5 mouse/touchdevices): Example
There is a catch of pixelhittest on transparent part of the image that also capture the events but using smaller images can be nice workaround.

Hi Umalo,

Thanks a lot for pointing a way out, sadly I must say this workaround is much too crafty for my current projects: around 20 hotspots in a dozen panoramas per tour to be visible and clickable in tablets/smartphones.

Really hope krpano supports polygon hotspots in HTML5 soon, it would be really time-saving. *smile*

DJIO | Dionizio Bonfim Bach
360ºMix | Multimedia Integrations
Mobile: +55 (41) 8839.0929
Landline: +55 (41) 3779.9322
Skype : djio.com.br or www.360mix.net
Website: www.360mix.net

Zum Seitenanfang

asc

Anfänger

Beiträge: 28

5

Mittwoch, 8. Oktober 2014, 15:04

Hi everybody
Does anybody know, in which version the polygonal hotspots will be available for HTML5?
In the doc it says "Polygonal hotspots - currently not supported, but there are already plans to implement them." Klaus, could you tell us a bit more specific when this will be?
I would like to use the HTML5 player in a giant proyect with over 80 panoramas to make it available for iPhone/iPad as well. This is the actual tour: www.vtour.rsszo.ch/vtour.html
Thanks a lot!!!

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

6

Freitag, 10. Oktober 2014, 18:45

Zitat von »asc«

Does anybody know, in which version the polygonal hotspots will be available for HTML5?

Wait for version 1.18.

Zum Seitenanfang

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

7

Freitag, 10. Oktober 2014, 18:46

what?

yeahhhh!

Tuur *thumbsup*

https://www.virtualtuur.com
Panimator: https://krpano.com/plugins/userplugins/panimator/#top
ToolBox: https://bit.ly/3TTnd6U
Measure in 360 photos

: https://pame.virtualtuur.com
Moving Hotspots V2: https://krpano.com/plugins/userplugins/movinghotspots/#top
Donations
https://bit.ly/3NnpynC

Zum Seitenanfang

asc

Anfänger

Beiträge: 28

8

Sonntag, 19. Oktober 2014, 20:41

Thanks a lot! I didn't think that version 1.18 would arrive that soon...
Just great! *thumbsup*

Zum Seitenanfang

omegas

Anfänger

Beiträge: 38

9

Freitag, 14. November 2014, 07:42

Hi. I need activate fillcolor to polygonal hotspot when mouse onover (onhover), but when i do it, it splash for 1 sec red color and then make default alpha. How to make it correct?

Quellcode

<hotspot name="hspt1"
     	keep="false"
     	visible="true"
     	enabled="true"
     	handcursor="true"
     	capture="true"
     	alpha="0.0"
     	style="" 
     	fillcolor="0xff0000"
     	fillalpha="0.7"
     	borderwidth="3.0"
     	bordercolor="0xff0000"
     	borderalpha="0.7"
     	onover=""
	 onhover="set(hotspot[hspt1].alpha,0.7);"
     	onout="set(alpha,0.0);"
     	ondown=""
     	onup=""
     	onclick=""
     	onloaded=""
	 tooltip="test"
>
	<point ath="-118" atv="30" />
	<point ath="-139" atv="5" />
	<point ath="175" atv="6" />
	<point ath="180" atv="22" />
	<point ath="165" atv="29" />
</hotspot>

Zum Seitenanfang

omegas

Anfänger

Beiträge: 38

10

Freitag, 14. November 2014, 07:50

I find in old docs fadeintime attribute, and make

	Quellcode
1	fadeintime="12"

This solve my problem for a moment, but i think it is not correct... How i can disable (or control) default fade event for polygonal hotspot?

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

11

Montag, 17. November 2014, 08:44

Hi,

Zitat

Hi. I need activate fillcolor to polygonal hotspot when mouse onover
(onhover), but when i do it, it splash for 1 sec red color and then make
default alpha. How to make it correct?

Use the onover/onout events and the tween() action - for example:

	Quellcode
1 2 3 4 5 6	<hotspot ... fillcolor="0xFF0000" onover="tween(fillcolor, 0x0000FF);" onout="tween(fillcolor, 0xFF0000);" ... />

See also here:
http://krpano.com/docu/xml/#hotspot.onover
http://krpano.com/docu/xml/#hotspot.onout
http://krpano.com/docu/actions/#tween

Best regards,
Klaus

Zum Seitenanfang

John.Ng

Anfänger

Beiträge: 9

12

Dienstag, 15. Mai 2018, 04:28

Would you mind showing me how to get position point element of hotspot(atv, ath)?
and Is the 'distorted' valid for polygonal hotspot?

Thank!

Zum Seitenanfang

klaus.krpano

Administrator

Beiträge: 13 499

13

Dienstag, 15. Mai 2018, 09:45

Zitat von »John.Ng«

Would you mind showing me how to get position point element of hotspot(atv, ath)?

A polygonal hotspots has no position by its own, the individual points of the polygon itself are the positions.

Or do you want the hotspot center?
That could be get by the getcenter() function of the hotspot:
https://krpano.com/docu/xml/#hotspot.getcenter

Zitat von »John.Ng«

and Is the 'distorted' valid for polygonal hotspot?

No, that's a setting only for image-hotspots and ignored on polygonal hotspots.

Best regards,
Klaus

Zum Seitenanfang

John.Ng

Anfänger

Beiträge: 9

14

Dienstag, 15. Mai 2018, 11:31

Thank #klaus.krpano for reply,
I would like get point positions of polygon that isn't polygon.
For example:

Quellcode

<hotspot name="line1" style="hs" distorted="false" onloaded="set(pstLine,55);"            fillcolor="0xFF0000"            onover="tween(fillcolor, 0x0000FF);"            onout="tween(fillcolor, 0xFF0000);"        >
<point name="pnt1" ath="144.0332018882967" atv="32.42610560000334"/>
<point name="pnt2" atv="hotspot[line1].point[pnt1].atv" onloaded="set(hotspot[line1].point[pnt2].ath,hotspot[line1].point[pnt1].ath);add(hotspot[line1].point[pnt1].ath, 5)"/>  </hotspot>
<events onclick="showlog(); trace('point1.atv = ', hotspot[line1].point[pnt2].atv, '     | point1.ath = ', hotspot[line1].point[pnt1].ath);" />

In this code, i would like get 'pnt1' position to define 'pnt2'. I had try it, so it's error :(
pls help me!
thank you!

Zum Seitenanfang