panorama software,virtual tour software
Alternate Text
Joined: 2005-04-15
Send Msg:
Posts: 57
2011-07-14
#1

How to design for full screen?

Hello everyone.

I am an old TW user, now returning to TW as it is the most user friendly program that I know. Now I just hope that all the bugs won't keep me out of business *lol*

Now for my question:

How do I design for full screen / full browser window tours? I could ofcourse make the main window and screen viewer 1920x1080 for full HD, but that would not look good on a 1024*768 screen as not all of the elements and graphic would be visible.

So how do you guys design for a full screen / full browser window tour?

Thanks for the help :)

Regards

Morten

 


Alternate Text
Joined: 2005-04-21
Send Msg:
Posts: 501
2011-07-14
#2
Hey Morten, good to see ya!

Pick your poison with tour default size. I always tried to keep the folks who never do updates, still running 98 with IE6 and a resolution of 800x600 in mind.

I have since moved forward leaving those folks behind. If your end user is looking at a virtual tour, odds are they are running a pretty quick machine with a default resolution of 1024 x 768. That said my default size these days are around 900 - 1000 px. Image size for the scenes are are stitched at 6000 x 3000 and sized down to a 4000 x 2000 and saved for the web at around 1.5 - 2.0 MB.

When the tour is finished and for publish be sure to have the Full Screen selection checked.


Hope this has helped.
Regards,
Pixel
Alternate Text
Joined: 2005-04-15
Send Msg:
Posts: 57
2011-07-14
#3

Hi Pixel

Thanks for welcomming me back :)

I understand what you say and that it is possible to pick which size you want to design for. But why do I have to choose if I want to design for a 800*600, or a 1024*768, 1920*1080 or whatever screen resolution. Is it not possible to design for 100%*100% and not a fixed size?

Regards Morten


Alternate Text
Joined: 2005-04-15
Send Msg:
Posts: 57
2011-07-14
#4

Cool :)

I found my own solution. I am in no way certain that it is the correct solution, and if anyone else can tell me how they are doing it, I would surely appreciate it. I might as well learn it correct from the beginning :)

So what you have to do in order to launch a tour that automatically shows 100% of the browser window no matter which screen resolution the user have is:

1) Deside the minimum screen resolution you want to design for. I don't believe anyone really still uses 800*600 so I will design for a 1024*768 window (guess it should be smaller as the browser window never display 1024*768).

2) Build the tour as you normally would in the 1024*768 window.

3) When you place any features as thumbnails, map etc. remember to use the alignment tool

4) Publish your tour as you normally would.

5) After you have published, open the "TourWeaver_XXX" file in an editor (dreamweaver, notepad or whatever you are using)

6) In line 15, find the place where the size is indicated (look for "1024", "768")

7) Change the numeric size to percentage so it now says "100%", "100%"

8) Save the TourWeaver_XXX file

9) Double click the TourWeacer_XXX file and see your project in 100% of the browser window - no matter which resolution you are using - as long as it is above 1024*768

The downside is that your graphic elements will be stretched.

I haven't really tested this approach so please help me and report any problems you might have doing it like this so we can all learn from it.

Regards

Morten


Alternate Text
Joined: 2006-04-08
Send Msg:
Posts: 221
2011-07-14
#5
Morten,
you can set the percentage in tourweaver. Have a look at this screenshot of a project I recently finished.
Also note the yellow bar on top. It's 2880 px wide, so it will fit any screen resolution available as far as I know. (I remember reading that somewhere, someone correct me if I'm wrong pls)
See the whole thing in action here. (I did the same with the bar on the bottom btw.)

Ronald

Ah, and graphic elements will not be stretched as far as I know.


Alternate Text
Joined: 2005-04-15
Send Msg:
Posts: 57
2011-07-15
#6

Hi Vilmer

Thank you so much for your screen shot and your link to the tour. I acutally tried this yesterday, but it didn't work. Now I realize that it was because I had only made the main window 100% and not the scene viewer. So now it works :)

I learned a bit about how to build a tour from your screen shot of the TW project. thanks.

One thing that still bothers me is that the different elements aren't scalable. For instance - if you want the thumbnails to be in the bottom of the page and be 100% of the width, it is no problem if you design for a window that is 800*600. Then you just make the thumbnail 600pixel wide, but if you see the tour in a HD screen that is 1920pixel wide, you will only see the thumbnails in about 1/3 of the screen.

If the elements such as thumbnails were scalable, I could make it 100% of the width. That would be so much better.

Regards

Morten


Alternate Text
Forum Moderator
Joined: 2002-11-23
Send Msg:
Posts: 5438
2011-07-15
#7

Scalable items rarely look good. Because the images are in effect Bitmaps they are not designed to be scaled up. Tourweaver has the option to "scale" Hoptspots. If you try this you will see what I mean with the way it effects bitmap graphics.

Regards, Smooth [8D]


Alternate Text
Joined: 2005-04-15
Send Msg:
Posts: 57
2011-07-15
#8

Hi Smooth

No I know that scaled items can look very poor as they are designed for a certain size. However when I work with FPP, I use scalable items where I am able to develop for high resolution and then make the graphic elements scalable so they scale down - that does not look too bad (though it isn't bitmaps - I don't know if that makes a big difference)

It's great with the option to scale hotspots, but if it's not possible with all of the parts of the tour, it doesn't help that much.

Oh well I guess I just need to keep it in mind when I design the template etc. and work around it that way...

Regards

Morten


Alternate Text
Forum Moderator
Joined: 2002-11-23
Send Msg:
Posts: 5438
2011-07-15
#9

All images that are not Vector are known as Bitmap (this includes .png, .jpg, .bmp, .tif etc). Yes, I have seen the FPP examples with skin elements that are scaling with window/fov and this confirms my opinion. You shouldn't do it, same as I don't like the scalable Hotspots.

Make it work with Vector graphics and I'll go along with it. This is one advantage of .svg image files and HTML5.

Regards, Smooth [8D]