Responsive on its own...

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
ArkiTonio
Posts: 96
Joined: Mon Apr 20, 2015 10:32 am
Location: Ascoli Piceno, Italy

Hi.
I'm trying to make a responsive skin, for both computer monitors and mobile displays. Well, thanks to Player Width/Height and Is Mobile in v. 5 it's much easier now... but...
Can someone explain me why this menu, 318 px wide in origin and correctly displaying its size on my monitor (1600×900 px), appears as 1.5 times (or 150%) larger on my Samsung Galaxy Trend Plus cell phone (480×800 px)?

Computer screen: 1600 px wide
Immagine1.jpg
Immagine1.jpg (302.63 KiB) Viewed 4967 times
Cell phone screen: 480 px wide
Screenshot_2016-09-18-16-52-15.png
Screenshot_2016-09-18-16-52-15.png (413.18 KiB) Viewed 4967 times
Cell phone screen: 800 px wide
Screenshot_2016-09-18-16-52-34.png
Screenshot_2016-09-18-16-52-34.png (620.91 KiB) Viewed 4967 times
It appears clearly that it's enlarged, losing sharpness, but why...?

Thank you.
ArkiTonio
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
I assume the images are JPG right?
Whats the size of the buttons?
The screen resolution will play a big part in this.
If your using logic blocks to detect screen size then use a logic block with scale for the buttons.
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
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

Only a thought here regarding your smart phone control tool button bar.

Maybe larger buttons are best for the screen size? Because people have large fingers and need large buttons.

You do have a HIDE button bar if they want to hide the control button bar.

IF the buttons are too close together and small... they can not touch 1 with out touching a 2 or 3 buttons in a group.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
VArdiyani
Posts: 3
Joined: Wed Oct 05, 2016 3:44 pm

I have the same problem with @ArkiTonio. :( :(
But does it really because of the button size? not because of the Canvas size or anything?
Attachments
not movbile responsive.jpg
not movbile responsive.jpg (78.1 KiB) Viewed 4920 times
User avatar
ArkiTonio
Posts: 96
Joined: Mon Apr 20, 2015 10:32 am
Location: Ascoli Piceno, Italy

Martin, if you mean the screenshots, the computer screen is a JPG file, those of the cell phone are PNG's. If you mean the menu buttons, they're all SVG's exported as PNG's. Their size is 32×32 px.
I didn't use any logic blocks or scaling for the menu. So I expected they were 32×32 px anywhere, both on a computer monitor and on a cell display...
Dave, larger buttons are useful for hi-def screen like cell phones, of course, but I didn't set any resizing or enlargement here, for the moment...
So my question (as for VArdiyani) remains... Why/how is that my menu appears larger than its original size on a cell phone???
ArkiTonio
User avatar
360Texas
Moderator
Posts: 3684
Joined: Sat Sep 09, 2006 6:06 pm
Location: Fort Worth, Texas USA
Contact:

You wrote:
If you mean the menu buttons, they're all SVG's exported as PNG's.
Maybe you should not export them. Maybe the viewer will use the .pngs instead of the .svg set.
I think the reason for the export is because some servers are not MIME set up to use the .svg's and the .png set is used.
Is your server setup to deliver .svg's.

I know that I had to create and add at the servers web site root folder an .htaccess file containing the following MIME code lines telling the server to deliver to the visitors computer .svg file types

Code: Select all

AddType image/svg+xml  .svg
AddType image/svg+xml  .svgz
.svg are scaled vector graphics and will retain high quality when told to scale up/down in the Pano2vr project setup.

.png24's do not scale. You can display them larger but they will become pixelated if too large (read more than 100%).

As for your question.... it appears that possibly your server is not setup of delivering .svg and is using your 32x32px .pngs displayed at 100%. Then I think its got something to do with the screen resolution (not the screen size) being used on the device. I think I remember Hopki telling us that normal desktop screens use 72 pixels per inch and small smart phones use 300+ pixels per inch . Maybe Hopki can elaborate more on the cause and effect.


Our Samsung Galaxy s7 edge screen specifications: ppi is pixels per inch
Size 5.1 inches (~72.1% screen-to-body ratio)
Resolution 1440 x 2560 pixels (~577 ppi)

You mentioned that your tool bar buttons are 32 x 32px square.
Dave
Pano2VR Forum Global Moderator
Image
Visit 360texas.com
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
You got a link to the page?
Does you HTML page have the line: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
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
ArkiTonio
Posts: 96
Joined: Mon Apr 20, 2015 10:32 am
Location: Ascoli Piceno, Italy

Hopki wrote: Does you HTML page have the line: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
Yes, Martin, it has, being it automatically created by Pano2VR itself every time.
Where ever else could be the problem?...
ArkiTonio
User avatar
Hopki
Gnome
Posts: 13004
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Do you have a link?
Or PM me you skin.
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/
Post Reply