I'm a bit of a layman so bare with me.
I'm trying to create informational popups using SVG images instead of the default JPG/JPEG or PNG. There will be several unique images used per pano.
One of the reasons I need to do this with SVGs is because I need to animate them. The animated image below is one single SVG image that I made for the project. I already have custom animated hotspot icons with hover states working but have been unable to figure out how to get the popups working.
SVG images as popups instead of JPG or PNG
I found a solution but unsure if it is a great one.
I have created a unique hotspot template for every animated infographic where each one contains one of the SVGs as part of the "UI" and then the PNG I upload is just a transparent pixel. This will translate to about thirty unique templates but I can't imagine confronting any problems going forward other than some clutter in the tree and variables list.
I have created a unique hotspot template for every animated infographic where each one contains one of the SVGs as part of the "UI" and then the PNG I upload is just a transparent pixel. This will translate to about thirty unique templates but I can't imagine confronting any problems going forward other than some clutter in the tree and variables list.
This looks pretty cool...is this in a website?
Well, it is fully contained within the pano-tour. For now, there is no website beyond that.
------------[ the TL;DR ]------------
This is the current test URL
The above link is my test lab and eventually, all UI and HUD will be custom-built. Above earth is a hotspot that shows my implementation of the animated SVG as a pop-up. Somewhere in the pop-up is a transparent single-pixel PNG with the custom hotspot template to display the SVG. I also made it so that clicking/tapping anywhere on the screen closes the pop-up. The vanilla pop-up interaction is gross so I just had to change it.
I'm a senior in University and for my capstone project, I am creating a virtual tour of the solar system. The University purchased pano2vr and I concocted the idea of using it for the VR experience. I am creating 3D scenes in Maya and then rendering them as 360 panoramas which I then import into Pano2vr.
One of my courses did have us use Panotour Pro for several assignments but that did little to prepare me for Pano2vr. So, I'm not really sure if I'm doing things correctly but I'm happy with the current results.
------------[ the TL;DR ]------------
This is the current test URL
The above link is my test lab and eventually, all UI and HUD will be custom-built. Above earth is a hotspot that shows my implementation of the animated SVG as a pop-up. Somewhere in the pop-up is a transparent single-pixel PNG with the custom hotspot template to display the SVG. I also made it so that clicking/tapping anywhere on the screen closes the pop-up. The vanilla pop-up interaction is gross so I just had to change it.
I'm a senior in University and for my capstone project, I am creating a virtual tour of the solar system. The University purchased pano2vr and I concocted the idea of using it for the VR experience. I am creating 3D scenes in Maya and then rendering them as 360 panoramas which I then import into Pano2vr.
One of my courses did have us use Panotour Pro for several assignments but that did little to prepare me for Pano2vr. So, I'm not really sure if I'm doing things correctly but I'm happy with the current results.
I also thought about how to insert animated images for active points, but have not yet found such a possibility ((
Hi,
First off great SVG animation
An alternative, that uses only one hotspot template, would be to use a Text box with an iFrame that calls an index.html page containing the svg.
In this example: https://p2vrtutorials.s3-ap-southeast-2 ... index.html I have a hotspot template that sets a variable that opens the text box containing the iFrame code;
<IFRAME src="includes/index.html" width="100%" height="100%" frameborder="no" scrolling="no" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></IFRAME>
The index.html looks like this:
<!DOCTYPE html>
<html>
<body>
<img src="animated_orbits_2s.svg" />
</body>
</html>
This way you only need one hotspot template. Multiple hotspots would work in the manner that I describe in my tutorial Hotspot Templates and iFrames https://tonyredhead.com/pano2vr/hotspot ... nd-iframes
cheers,
Tony
First off great SVG animation
An alternative, that uses only one hotspot template, would be to use a Text box with an iFrame that calls an index.html page containing the svg.
In this example: https://p2vrtutorials.s3-ap-southeast-2 ... index.html I have a hotspot template that sets a variable that opens the text box containing the iFrame code;
<IFRAME src="includes/index.html" width="100%" height="100%" frameborder="no" scrolling="no" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></IFRAME>
The index.html looks like this:
<!DOCTYPE html>
<html>
<body>
<img src="animated_orbits_2s.svg" />
</body>
</html>
This way you only need one hotspot template. Multiple hotspots would work in the manner that I describe in my tutorial Hotspot Templates and iFrames https://tonyredhead.com/pano2vr/hotspot ... nd-iframes
cheers,
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
- 360Texas
- Moderator
- Posts: 3684
- Joined: Sat Sep 09, 2006 6:06 pm
- Location: Fort Worth, Texas USA
- Contact:
Tony, I clicked on and visited your Artist page
https://tonyredhead.com/pano2vr/hotspot ... nd-iframes
I moused pointer over the info hotspot and the info text open and easily read the text below the hotspot.
Observation:
If I were using my cellphone.... I would use my index finger to open the hotspot text.
My fat index finger covers the text.
Suggestion... You might place the text display ABOVE the hotspot.
Just a thought
/s/
Dave still in Texas
https://tonyredhead.com/pano2vr/hotspot ... nd-iframes
I moused pointer over the info hotspot and the info text open and easily read the text below the hotspot.
Observation:
If I were using my cellphone.... I would use my index finger to open the hotspot text.
My fat index finger covers the text.
Suggestion... You might place the text display ABOVE the hotspot.
Just a thought
/s/
Dave still in Texas
Hi,
Try the link now https://p2vrtutorials.s3-ap-southeast-2 ... index.html
I added "preserveAspectRatio="xMinYMin meet" to the opening svg tag.
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Tony, is there any idea how to make the information points themselves animated? That they were like gif.
And what are the options for scaling text? For example, on a PC I need size 20, and on a smartphone I need 14. Can I somehow register this in the code without making clones?
And what are the options for scaling text? For example, on a PC I need size 20, and on a smartphone I need 14. Can I somehow register this in the code without making clones?
Hi,
Check out this new link https://p2vrtutorials.s3-ap-southeast-2 ... index.html
I've added an animated gif via the ht_info_CustomImage element in the ht_info hotspot template. I've used some css to make the square gif cropped in a circle with a black border.
When you mouse over the hotspot the tt_information is displaying the title given to the point hotspot.And what are the options for scaling text? For example, on a PC I need size 20, and on a smartphone I need 14. Can I somehow register this in the code without making clones?
- I've added some inline CSS, to the placeholder, that sets the default size of the text to 20px.
- I've also created a logic block with the Trigger "Is Mobile = True" and used the same placeholder and just changed the style to 14px.
To test it you can open the link in Safari and select Menu/Develop/User Agent/iPhone to see the mobile version. Here are grabs of PC and Mobile.
I've attached the project files and final output.
Tony
- Attachments
-
- SVG_External_Image.zip
- (1.05 MiB) Downloaded 277 times
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
I started the project, nothing happens.
- Attachments
-
- Ошибка пано.png (241.13 KiB) Viewed 8257 times
Hi,
Does it work in the link?
I will take a look and see what’s up, looks like somethings missing.
Tony
Does it work in the link?
I will take a look and see what’s up, looks like somethings missing.
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Hi,
Copy the 'assets' folder from the 'svg-image-2' folder into the new project folder you created. If you look in the skin, in the 'ht_info_CustomImage' Properties / External Image / External URL it's looking for the eye.gif in an assets folder.
Alternatively, with the project open, in Output / Advanced / Assets / you can locate the eye.gif and add it to the Files or Folders field and republish the project.
Tony
Copy the 'assets' folder from the 'svg-image-2' folder into the new project folder you created. If you look in the skin, in the 'ht_info_CustomImage' Properties / External Image / External URL it's looking for the eye.gif in an assets folder.
Alternatively, with the project open, in Output / Advanced / Assets / you can locate the eye.gif and add it to the Files or Folders field and republish the project.
Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/