Text an Image in one Hotspot?

Q&A about the latest versions
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hakon wrote: Fri Sep 29, 2017 2:56 pmHow do I get the popup window now that it automatically scales to the right size?
I've created a sample iFrame-test.html file that I've added to a hotspot popup text box. The text box scales proportionally as the browser window changes and the text within the iFrame-test.html wraps to fit the text box. In the iframe code I set the size to percentages and also have a scrollbar displayed when the text is hidden.

Code: Select all

<iframe src="iFrame-test.html" width="95%" height="90%" frameborder= "0"  scrolling="auto"></iframe>
Example: https://tonyredhead.photography/360/pan ... me-Example

If you have a more structured layout you will have to add CSS code to make the html content responsive and retain it's appearance. In my earlier examples the popups are fixed sizes to match the content and change using logic blocks based upon the browser window or device sizes.

iframe-show.jpg
iframe-show.jpg (115.63 KiB) Viewed 7630 times
Popup button

hide-scrollbar.jpg
hide-scrollbar.jpg (351.42 KiB) Viewed 7630 times
Text box with iFrame and Scrollbar

hide-noscrollbar.jpg
hide-noscrollbar.jpg (382.37 KiB) Viewed 7630 times
Text box with iFrame
Attachments
iFrame-Example-Project.zip
(136.18 KiB) Downloaded 201 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/
Hakon
Posts: 28
Joined: Tue Aug 07, 2012 11:10 pm

Thanks Tony for your sample files.
But even with your solution, the popup does not automatically adapt to the HTML page.
This is actually not so bad, but I'm just trying to adjust the window for the information hotspot in size.
The skin editor confuses me something. In the Skin Editor my popup looks like this:
Zwischenablage02.jpg
Zwischenablage02.jpg (998.62 KiB) Viewed 7625 times
Hakon
Posts: 28
Joined: Tue Aug 07, 2012 11:10 pm

But the output looks like this:
Zwischenablage03.jpg
Zwischenablage03.jpg (967.79 KiB) Viewed 7625 times
Hakon
Posts: 28
Joined: Tue Aug 07, 2012 11:10 pm

why is the textbox in the output smaller than the background? And why can not you see the cross close?
Hakon
Posts: 28
Joined: Tue Aug 07, 2012 11:10 pm

These are the settings to access the HTML page in the information hotspot:
Zwischenablage05.jpg
Zwischenablage05.jpg (106.5 KiB) Viewed 7624 times
Hakon
Posts: 28
Joined: Tue Aug 07, 2012 11:10 pm

when I delete the width and height in the code line I get this result:
Zwischenablage04.jpg
Zwischenablage04.jpg (893.53 KiB) Viewed 7624 times
Frankster69
Posts: 105
Joined: Mon Sep 18, 2017 12:54 pm

Hi Hakon and Tony,

I'm jumping onboard here, this interests me as well, how to get content and container to size correctly. I'll follow your posts and if I have anything to add I'll be sure to post.

Meantime... If I may say so... Tony, you have a very impressive resume as an Industry veteran (looked at your site). Respect! Though not on a comparable level by far I am a bit of a veteran myself. But it remained more or less a hobby with some applications in jobs I fullfilled. I'm a bit proud to have been one of the first newspaper photographers that used a pure digital camera, a Kodak DC 40 ( http://camera-wiki.org/wiki/Kodak_DC40 ). Amazingly that thing with it's 756x504 resolution (yeah...) would just be barely good enough for the roughly rastered newspaper photo's. Which I then uploaded through a phone modem on my BBC computer ( http://www.bbc.com/news/technology-15969065 ) running basic.

Currently I'm researching the viability of taking all my experiences in photography, webdesign, writing, videography and graphic design and form my own one-man company around it. Pano2VR will be one of my tools.

If I may ask, what camera are you using for that Brown Bluff project? Is it a 360 and if so which one? Or is it DSLR pano shooting?

Will be following to see what solutions come up here,

best regards, Frank
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hakon wrote: Mon Oct 02, 2017 1:50 pm But even with your solution, the popup does not automatically adapt to the HTML page.
This is actually not so bad, but I'm just trying to adjust the window for the information hotspot in size.
Sorry but I may have misunderstood what you were trying to achieve. Unfortunately the iFrame code does not have any effect on the hotspot size quite the reverse.

There is a hierarchy in the way the skin interacts with the browser viewpoint and this affects how the elements are displayed. From your screenshot you seem to be using percentages to define the size and location of the Information Container and the elements within it. This means as the user resizes the browser the elements that use percentages will also change size, but remember this is controlled by the viewport size not the the elements in the skin.

The hierarchy is: Browser viewpoint -> Information Container and the elements in it e.g. info_popup_close, info_title and info_text_body ->iFrame.

So as you can see the iFrame is at the end of the hierarchy and does not affect any of the elements. If you use percentages for width and height within the iFrame code then the iFrame content will resize based upon the info_text_body sizing if you use pixel settings it will keep those pixel dimensions even though the info_text_body is changing.
The skin editor confuses me something. In the Skin Editor my popup looks like this:
The skin editor is very powerful and can be a bit daunting. Keep with it though it will be worth it.

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/
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hakon wrote: Mon Oct 02, 2017 1:51 pm But the output looks like this:Zwischenablage03.jpg
It's a bit hard to tell without seeing the actual skin but I'd say that's because some of your hotspot elements are using percentages to set their position and size. As the browser viewport gets larger those elements change relative to the fixed size of your iFrame at 800 x 600 pixels. I'm not sure about the info_text_box is it set at percentages or pixels?

Can you add your skin or let me know the settings for each element so I can reproduce it.

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/
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hakon wrote: Mon Oct 02, 2017 1:59 pm when I delete the width and height in the code line I get this result:
Once again without seeing the skin it could be related to the size that the info_text_box is set to.

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/
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Frankster69 wrote: Tue Oct 03, 2017 2:07 am I'm jumping onboard here, this interests me as well, how to get content and container to size correctly. I'll follow your posts and if I have anything to add I'll be sure to post.
Hi Frank, jump right it and welcome.
Meantime... If I may say so... Tony, you have a very impressive resume as an Industry veteran (looked at your site). Respect! Though not on a comparable level by far I am a bit of a veteran myself.
Thank you for your kind comments, they are very much appreciated. Having seen, and been part, of the dawn of the Digital world and the ongoing breathtaking way it's exploded across so many disciplines I wouldn't have missed it for the world as I'm sure you wouldn't have. My first digital camera was the Apple Quicktake 100 and using some very slow modems to transfer images from a photoshoot in Los Angeles to a studio in Tokyo back in the late 80's
Currently I'm researching the viability of taking all my experiences in photography, webdesign, writing, videography and graphic design and form my own one-man company around it. Pano2VR will be one of my tools.
I wish you all the best with your new endeavour. It's basically what I'm doing now, still shooting, travelling as much as I can and learning every day. As panoramic photography is one of your skills Pano2VR will be an essential part of your toolkit.
If I may ask, what camera are you using for that Brown Bluff project? Is it a 360 and if so which one? Or is it DSLR pano shooting?
The Brown Bluff shot was done using the following equipment:

Camera:
Canon 6D - I also have a 5D Mark II but the 6D is lighter plus it has built in GPS great to keeping track of locations where I'm shooting.
https://www.canon.com.au/cameras/eos-6d

Lens:
Canon EF 8-15mm f/4L Fisheye - handy if you can't use a tripod and have to go handheld at 8mm for 4 shots around, otherwise 6 shots around and 1 up.
https://www.canon.com.au/camera-lenses/ ... isheye-usm

Rotator:
Nodal Ninja M2 w/RD8-II Rotator (F8001)
http://shop.nodalninja.com/m2-w-rd8-ii-rotator-f8001/

Tripod:
Feisol Travel Tripod - nice and light and small format. Fits into my backpack
http://www.feisol.net/tripods/feisol-tr ... rapid.html

Accessories:
Manfrotto Compact ball head with RC2 rapid connect system - connects Rotator to Tripod
http://www.manfrotto.com.br/compact-bal ... ystem.html

Canon Timer Remote TC-80N3 - great for different exposure options
https://store.canon.com.au/timer-remote ... -80n3.html

I do quite a bit of shooting from moving platforms such as zodiacs and other floating devices. Obviously shooting around doesn't work so in these cases I have a Freedom360 Rig with 6 GoPros and shoot a single shot that I stitch in PTGui.
https://freedom360.us/shop/freedom360classic/

Here are a couple of examples:

http://tonyredhead.photography/360/PONA ... wen-Falls/
http://tonyredhead.photography/360/PONA ... ption-Bay/
Will be following to see what solutions come up here,
Glad to have you here.

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/
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Tony,
just had a look at your last two links from the Freedom Rig...
WOW. 8)
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Hopki,

Thank you, much appreciated.

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/
User avatar
frostyfriday
Posts: 35
Joined: Mon Jan 29, 2018 5:22 pm
Location: Nanaimo, BC and Portland OR
Contact:

Tony,

Was searching for something else and noticed this thread. Thanks for the Pano2VR recommendation by the way. I am loving it so far! It's like a breath of fresh air learning this after dealing with some of the user hostile software I have been working with.

Was wondering why you use the "Manfrotto Compact ball head with RC2 rapid connect system"? I saw that you also use nodal ninja stuff and this usually has the Arca swiss type quick connects. Doesn't that mess you up a bit when using it with other stuff?

I like reading what others use. I usually get an idea or two I never thought of myself.

Here for fun is what I have been using for he past few years:
  • 6D Because it is small, reasonably powerful and has GPS.
  • 8mm lens just because I have it. I also use a 17-40 which I love, mostly for my commercial and real estate stills.
  • A 15-20 year old RC-1 canon IR remote that I got with the first and last eye focus controlled film camera Canon made (I loved it). This thing is tiny and attaches to any thin shoulder strap and can shoot with a 2 second delay. I think they still make the thing! I also use a cheep no name brand tethered remote on occasion but don't like the cord.
  • Nodal Ninja R10 with my 8mm and older adjustable MKIII with my 17-40 (or anything else).
  • Acratech GP Ballhead - designed to function as a Ballhead, a gimbal head, and a leveling panoramic head. This is my favorite and most used gadget. See their third photo here: https://www.acratech.net/ballheads/gp/gp to see how I use it. Mounted like this once you level it, you can rotate whatever is mounted to it (with an Arca-Swiss plate) and it stays in the plane you leveled it to. Mine is several years old now and has shown no signs of wear.
  • Pano2VR (Just got it) and Autopano Giga which I have also used for years.
Thanks for always sharing what you do!

-Dennis
Dennis Frost
-----------------------------------------------------
Awden Photography - http://Awden.com

Virtual tour samples: http://bit.ly/PaintedBoat, http://bit.ly/ShelterPoint, https://roundme.com/embed/hB6FOhIv0JvPfnQhk0F2
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi Dennis,
I am loving it so far! It's like a breath of fresh air learning this after dealing with some of the user hostile software I have been working with.
That's great news. I'm doing a project at the moment for an iPad app that involves a lot of work in the skin editor and I'm really enjoying the work and amazed at it's flexibility and power.
Was wondering why you use the "Manfrotto Compact ball head with RC2 rapid connect system"? I saw that you also use nodal ninja stuff and this usually has the Arca swiss type quick connects. Doesn't that mess you up a bit when using it with other stuff?
I've had the ball head for years, through all the different iterations of Nodal Ninja versions. Shooting for expeditions means I have to move around quickly and break down the tripod/rotator/camera often and I find the connect system great to removing the rotator.
Thanks for always sharing what you do!
My pleasure :D

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/
Post Reply