Sie sind nicht angemeldet.

SVG hotspot?

Douglas Rhiner

Fortgeschrittener

  • »Douglas Rhiner« ist der Autor dieses Themas

Beiträge: 141

Wohnort: San Anselmo, CA

Beruf: Code-Slave

  • Nachricht senden

1

Dienstag, 15. Dezember 2020, 23:54

SVG hotspot?

Anyone ever manage to use an SVG as a hotspot?
Is/would this even possible in KRPano now?
*confused*
Been playing with this but before rabbit-hole-diving I figured I'd ask.

Douglas Rhiner

Fortgeschrittener

  • »Douglas Rhiner« ist der Autor dieses Themas

Beiträge: 141

Wohnort: San Anselmo, CA

Beruf: Code-Slave

  • Nachricht senden

2

Mittwoch, 16. Dezember 2020, 00:25

I had to do a Google search to find this. Pretty odd since I searched the forum for: SVG hotspot several times.

Anyone know of another method/angle on this?


https://krpano.com/forum/wbb/index.php?p…&threadID=15295

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

3

Mittwoch, 16. Dezember 2020, 14:51

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

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

4

Mittwoch, 16. Dezember 2020, 15:30

interesting... this works on firefox (83), but not on safari (12.1.2)
zFilter plugin -- zFlare plugin -- zSnapshot plugin

Tuur

Erleuchteter

Beiträge: 3 839

Wohnort: Netherlands

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

  • Nachricht senden

5

Mittwoch, 16. Dezember 2020, 15:38

@index
Perhaps update?
For me works fine on iphone and mac, safari (current)

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

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

6

Mittwoch, 16. Dezember 2020, 16:40

just wanted to mention it. this is a sierra installation.
if that is on safari 12 only its not really a biggie, but if i'd build a commercial tour with it, i'd check the browser support first.
*squint*
zFilter plugin -- zFlare plugin -- zSnapshot plugin

Douglas Rhiner

Fortgeschrittener

  • »Douglas Rhiner« ist der Autor dieses Themas

Beiträge: 141

Wohnort: San Anselmo, CA

Beruf: Code-Slave

  • Nachricht senden

7

Donnerstag, 17. Dezember 2020, 20:52

Tuur,

You are a gentleman and a scholar. Thank you!

Riphur

Anfänger

Beiträge: 44

Wohnort: France, Lille

  • Nachricht senden

8

Montag, 21. Dezember 2020, 19:00

Hi Tuur,
I tried your xml using an SVG file and not a base64.
It works under Chrome/Edge/IE but not under Firefox ( and I don't have Apple hardware to test Safari).


My file is generated by Illustrator.
It seems that the width and height information is missing from your base64.


How do you generate your base64?


Here are my tests:
SVG: https://www.v36.fr/visite-virtuelle/2012…irtualmedia.svg
KrPano: https://v36.fr/visite-virtuelle/201221-SVG/tour.html

Thanks !

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Riphur« (21. Dezember 2020, 20:34)

Riphur

Anfänger

Beiträge: 44

Wohnort: France, Lille

  • Nachricht senden

9

Dienstag, 22. Dezember 2020, 15:26

Hi,

Problem solved!
I switched to Adobe Animate to make my exports and everything is OK !

PanoramicWEB

Fortgeschrittener

Beiträge: 192

Wohnort: Turkey

Beruf: 360 Software and Hardware Developing

  • Nachricht senden

10

Mittwoch, 13. Januar 2021, 08:56

Zitat von »Douglas Rhiner«

You are a gentleman and a scholar.
ALWAYS, SINCE 2008 *smile* i think you must open a youtube page how to make krpano TUUR

Zitat von »Douglas Rhiner«


PanoramicWEB Solutions

http://www.panoramicweb.net - info@panoramicweb.net

nikonutsch

Anfänger

Beiträge: 21

Wohnort: hall

  • Nachricht senden

11

Sonntag, 5. Februar 2023, 13:44

svg hotspots

dear tuur and forummembers


Unfortunately, I'm not able to integrate a svg file as a hotspot
I searched for xml file exporter in illustrator but couldn't find anything...

Quellcode

 
1

	<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300"><path d="M968,144.18H99.46a34.87,34.87,0,1,0,0,11.64H968Z" style="fill:#fff;stroke:#231f20;stroke-miterlimit:10"/></svg>



Can anybody help me further


wbr from tirol
klaus

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »nikonutsch« (5. Februar 2023, 15:07)

indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

12

Sonntag, 5. Februar 2023, 23:02

these should work :

https://heyallan.github.io/svg-to-data-uri/
https://davidgierth.de/tools/svg-to-data-uri/

drop your svg (code) into the input field, then copy the data uri into you url in krpano.

eg.

Quellcode

 
1

<hotspot name="mysvg" url="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAwIDMwMCI+PHBhdGggZD0iTTk2OCwxNDQuMThIOTkuNDZhMzQuODcsMzQuODcsMCwxLDAsMCwxMS42NEg5NjhaIiBzdHlsZT0iZmlsbDojZmZmO3N0cm9rZTojMjMxZjIwO3N0cm9rZS1taXRlcmxpbWl0OjEwIi8+PC9zdmc+" ... />
zFilter plugin -- zFlare plugin -- zSnapshot plugin

nikonutsch

Anfänger

Beiträge: 21

Wohnort: hall

  • Nachricht senden

13

Montag, 6. Februar 2023, 14:17

SVG to data converter

Thanks alot mr.indexofrefraction! to you
(and many others of course) always can be counted on!!!
wbr klaus

San7

Profi

Beiträge: 626

Beruf: coding in krpano

  • Nachricht senden

14

Dienstag, 7. Februar 2023, 06:11

Hello! Do I understand correctly that with this version of the display, svg is converted into a picture and there is no difference from it?
When approaching, we see the same pixels as in the picture ...
Is it possible to show svg like svg? *confused*
https://novosibpano.ru/Plugins/


indexofrefraction

Profi

Beiträge: 1 362

  • Nachricht senden

15

Dienstag, 7. Februar 2023, 08:26

Zitat

Do I understand correctly that with this version of the display, svg is converted into a picture

no no, the svg is still an svg.

https://css-tricks.com/lodge/svg/09-svg-data-uris/
https://developer.mozilla.org/en-US/docs…_http/data_urls
zFilter plugin -- zFlare plugin -- zSnapshot plugin

Douglas Rhiner

Fortgeschrittener

  • »Douglas Rhiner« ist der Autor dieses Themas

Beiträge: 141

Wohnort: San Anselmo, CA

Beruf: Code-Slave

  • Nachricht senden

16

Dienstag, 7. Februar 2023, 19:34

Here is a simple example of what is possible with SVG when used as UI elements.
Same concept can be used for hotspots as well...

Quellcode

 
1

<style name="nav_btn_icons"           svg_fill="calc: newskin_settings.nav_icon_color"           svg_height="28"           svg_width="28"           svg_viewBox="0 0 28 28"           width="28" height="28"           align="center" x="0" y="0"           visible="true"           enabled="true"           capture="false"           bgcapture="false"    />



Quellcode

 
1

<layer name="left_nav_home_i"     style="nav_btn_icons"    url="/plugins/svg.js"    svg_title="home8"/>




************ PLUGIN : svg.js ************

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function krpanoplugin() {
  var local = this;  var krpano = null;  var plugin = null;  var device = null;  var svgNode = null;
  local.registerplugin = function(krpanointerface, pluginpath, pluginobject) {
    krpano = krpanointerface;    device = krpano.device;    plugin = pluginobject;
    plugin.registerattribute('svg_title', null);    plugin.registerattribute('svg_fill', null);    plugin.registerattribute('svg_stroke', null);    plugin.registerattribute('svg_height', null);    plugin.registerattribute('svg_preserveAspectRatio', null);    plugin.registerattribute('svg_viewBox', null);    plugin.registerattribute('svg_width', null);    plugin.registerattribute('svg_x', null);    plugin.registerattribute('svg_y', null);    plugin.registerattribute('svg_tween_time', 0.25);    plugin.registerattribute('loadSVG', loadSVG);    plugin.registerattribute('changeColor', changeColor);
    loadSVG(plugin.svg_title, plugin.svg_fill, plugin.svg_stroke);
  };
  function loadSVG(svg_title, svg_fill, svg_stroke) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {      if (xmlhttp.readyState == XMLHttpRequest.DONE) {        if (xmlhttp.status == 200) {          plugin.sprite.innerHTML = xmlhttp.responseText;          svgNode = plugin.sprite.firstElementChild;
          if (svg_fill) {            svgNode.style.fill = '#' + svg_fill;          }
          if (svg_stroke) {            svgNode.style.stroke = '#' + svg_stroke;          }          svgNode.style.transition = 'fill ' + plugin.svg_tween_time +              's linear-in-out';
          if (plugin.svg_width != null) {            svgNode.setAttribute('width', plugin.svg_width);          }          ;          if (plugin.svg_height != null) {            svgNode.setAttribute('height', plugin.svg_height);          }          ;          if (plugin.svg_viewBox != null) {            svgNode.setAttribute('viewBox', plugin.svg_viewBox);          }          ;          if (plugin.svg_x != null) {            svgNode.setAttribute('x', plugin.svg_x);          }          ;          if (plugin.svg_y != null) {            svgNode.setAttribute('y', plugin.svg_y);          }          ;
        } else if (xmlhttp.status == 400) {
          krpano.trace(3, 'There was an error 400');
        } else {
          krpano.trace(3, 'something else other than 200 was returned');
        }      }    };
    xmlhttp.open('GET', '/assets/SVG/' + svg_title + '.svg',        true);    xmlhttp.send();
  };
  function changeColor(thecolor) {    //console.log('change color #' + thecolor);    svgNode.style.fill = '#' + thecolor;  }
  local.unloadplugin = function() {    delete plugin.divid;
    plugin = null;    device = null;    krpano = null;  };
};

nikonutsch

Anfänger

Beiträge: 21

Wohnort: hall

  • Nachricht senden

17

Donnerstag, 9. Februar 2023, 10:00

svg plugin syntaxError??

hello douglas
I tried to install the code but unfortunately there is an error message


ERROR: parsing '/plugins/svg.js' failed:SyntaxError: Unexpected token ')'



I couldn't find the cause



wbr klaus

Nupsi

Profi

Beiträge: 697

  • Nachricht senden

18

Freitag, 19. Mai 2023, 10:20

Hi folks,

interesting topic and very challenging. Your script works like a charm, Douglas, thanks *thumbsup*

But I wonder, if it´s possible to go even further and convert an SVG into a polygonal hotspot?

The problem with SVG´s is the bounding box (viewBox), which makes the onover-area just as big as the bounding box itself. The great advantage of polygonal hotspots is that their active area is the same as their visible boundings (view attached example).


I know it is possible to use the svg-form as the active area (EXAMPLE) but as soon as I transfer it into krpano the bounding box becomes the active area again *huh*

Nupsi

Profi

Beiträge: 697

  • Nachricht senden

19

Mittwoch, 24. Mai 2023, 13:42

I sort of got it working, but it is´nt the most elegant way:
  1. Convert the path-svg into a poly-svg using online tools
  2. Tranfer all the points from the svg into krpano and convert them to ath/atv using screentosphere-function
  3. Use these ath/atv-values as hotspot-points

But there are many problems with this method.
First of all, if the poly uses a specific position inside it´s bounding box, the browser-window needs to be set to that exact size or otherwise screentosphere would´nt return the correct values (at least when using flat-panos). And if you zoom into the pano screentosphere won´t give you the correct values either!

Besides the problems it kinda works, at least for single svg´s. But because I want to convert hundreds of svg´s into poly-hotspots, I need some kind of automation. The hardest part for me is to transfer the points from multiple svg´s into krpano. This is how the poly-line in a converted svg looks like:

Quellcode

 
1

<polygon id="cross" points="2,1,3,1,3,2,4,2,4,3,3,3,3,4,2,4,2,3,1,3,1,2,2,2,2,1"></polygon>


I´m trying right now to read the whole svg into a JS-var:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13

<object data="svg/cross.svg" type="image/svg+xml"
         id="test" width="100%" height="100%">
</object>

<script>
    var a = document.getElementById("test");
    a.addEventListener("load",function(){
         var svgDoc = a.contentDocument;
	console.log(svgDoc);
         var id = svgDoc.getElementById("cross");
	console.log(id);
    }, false);
</script>


BUT this will copy the whole line id=<polygon id="cross" points="2,1,....... into the var id. But I need only the points, like this id=2,1,3,1,3,2......
Changing the code to "var id = svgDoc.getElementById("points");" does´nt work.

And because each poly-point consists of two values (x,y) it would be necessary, to seperate them into pairs like this:
"var1=2,1"
"var2=3,1"
"var3=3,2"...
before transmitting them to krpano using krpano.call/krpano.set.

Unfortunately my JS-skills are practically nonexistent *unsure* Any help would be appreciated *love*

Ähnliche Themen