screen.width and screen.height

[Harry van der Wolf]

Hi,

I already searched the mailing group and the web but can't find a solution for my issue.

I use the "Google Material icons" for my buttons to stay as close as possible to Google's material guidelines.

Depending on phone resolution (dpi), I want to use several sizes.

As such I can easily do that by detecting "screen1.width" and "screen.height" in the "initialize app" via a procedure going through a for/each or if/then cycle.

The problem is in the "screen1.width" and "screen.height" detection.

I tried on 3 phones.

One 720x1280 (portrait) which gives 320 width and 569 height

on a 480x800 (portrait) which gives me 320 width and 533 width

on another 480x800 (portrait)  I get 319 width and 532 as height.

I can get my hands on other phones within a few days but I doubt there will be a difference and I would not understand it anyway.

Why is this not working?

And as a side note: I already unzipped my own apk and detected that the 

<supports-screens android:resizeable=["true"| "false"]
                  android:smallScreens=["true" | "false"]
                  android:normalScreens=["true" | "false"]
                  android:largeScreens=["true" | "false"]
                  android:xlargeScreens=["true" | "false"]
                  android:anyDensity=["true" | "false"]
                  android:requiresSmallestWidthDp="integer"
                  android:compatibleWidthLimitDp="integer"
                  android:largestWidthLimitDp="integer"/>

is missing from the (binary) manifest. 

Is that in any way related? And do I need to add that? And can I do that without manually changing the (binary) manifest, rewrite the (binary) manifest, and re-sign my app.

Kind regards,

Harry 

[Harry van der Wolf]

After further searching on relevant keywords I found a solution in several areas like here and via app2market.

Harry

[Taifun]

set the property sizing of Screen1 to responsive
see also Responsive Design in App Inventor          

Taifun

---

Trying to push the limits of App Inventor! Snippets, Tutorials and Extensions from Pura Vida Apps by Taifun. 

[Harry van der Wolf]

I already replied but it seems my message is not posted.

Thanks for your reply. 

I rebuilt the app using the responsize setting and on my old 480x800 phone it mentions 365x609

On my 720x1280 phone it mentions 360x640. 

I don't understand. Now my old lowres phone is supposed to have a higher resolution?

Harry

[Harry van der Wolf]

It is even worse. I tried a quick app using an image with resizing based on screen width. The app is built with screen1 set to "responsive".

I load the image and use "set Image1.Scaling to 0". This will make sure the image is resized proportionally.

Then I use "set Image1.Width to Screen1.Width".

This doesn work at all. The images are way too small. Probably based on the weird screen sizes.

I tried 2 images: one of 569x622 and one of 728x709.

I'm begin to think this is a bug in appinventor.

Harry

[Taifun]

follow the recommendations is in the document, see again here http://ai2.appinventor.mit.edu/reference/other/responsiveDesign.html

see especially chapter 3. Detailed example

Taifun

[Harry van der Wolf]

I did read that and very carefully especially as I kept keeping the wrong values. I have no problemsscaling my horizontal/vertical alignements and the buttons in it.

The mentioned article doesn't say anything about 

It is simply that appinventor reports the wrong values also when screen1 is set to responsive.

In my screen1.initialize I simply request the screen1.height and the screen1.width and I always get the wrong values as reported above. On both phones and with screen1 set to fixed or responsive.

Maybe I am to blind to see it, but please let me know what I missed from that section 3 (or the whole article).

I know by now by searching further that many devices report some standard "default make all apps work" value and you have to dig one layer deeper to get the right values. I assume AppInventor also is using the default values as reported by the device, hence also that default value when using "fixed", and a wrong value when using responsive.

I also build apps in cordova with both framework7 or with ratchet. (I switch because sometimes it requires a fewlines of codes to get the same result as with many building blocks from appinventor, and sometimes it is completely the other way round).

If I do something in cordova in javascript like:

var RES = "width is: " + screen.width + "; height is: " + screen.height;

alert( RES);

I get "width is: 360; height is: 640;". So the same as Appinventor reports.

However, if I do:

var RES = "width is: " + window.screen.width * window.devicePixelRatio + "; height is: " + window.screen.height * window.devicePixelRatio;

alert( RES);

I do get "width is: 720; height is: 1280;"

How can I do this in AppInventor without having to fire up some html at app initialization and having the width/height reported back in a webstring? And even if I do it that way: Will I still get the wrong values as AppInventor overrules the normal device values?

(I must admit that I did not try that approach yet as it comes to mind while typing this, but AppInventor should be able to report the correct values).

(And sorry if I overlook something obvious in the mentioned article)

Harry

[Harry van der Wolf]

Sorry.

Second sentence of my previous mail is: "The mentioned article doesn't say anything about "

and should be "The mentioned article doesn't say anything about getting the right resolution from screen.width and screen.height".

[Harry van der Wolf]

I created a quick app. screen1 set to responsive.

Run via AI companion !!!

Appinventor mentions: 640x360

When clicking the button I get;

simple -> width=720; height=1280;

Better -> width=1440; height=2560

html file:

<!DOCTYPE html>

<html>

  <head>

   <script>

    var RES = "Simple -> width= " + screen.width + "; height= " + screen.height;

    RES += "Better -> width= " + window.screen.width * window.devicePixelRatio + "; height= " + window.screen.height * window.devicePixelRatio;

    alert( RES );    

   </script>

  </head>

  <body

  </body>

</html>

To make sure I also compiled the app (after having changed the file path) but the screen resolutions of appinventor and the javascript remain the same.

So when running a html from appinventor it reports different screen sizes as that same html when running from a compiled cordova app.

Harry

[Ghica]

You may try to set a clock at initialize. Then look again when the clock fires (and disable it, it should fire only once of course).
In many apps the screen sizes are only known after a while, due to the slowness of initialization in AI.
Cheers, Ghica.

[SteveJG]

The behavior you see is an AI2 "feature."   Responsive is a 'trick' used to allow AI2 apps to work reasonably well on ALL phones/tablets. Responsive is not a panacea because it attempts to get it right but it can't.    The Java based compilers require developers to provide a 'suite' of images etc. of different sizes and that is how Eclipse and Android Studio users get their apps to work with different dpi Android hardware.  I think the 'wrong' values you see are the values AI2  defaults to (what it uses).  Similar but not perfect.

Version 145 of AI2 in about August 2015  introduced options of Fixed versus Responsive Screen mode .  It was necessitated when Google discontinued support of software that permitted MIT apps to run similarly on small phone versus Tablet screens.  Essentially MIT took advantage of code that allowed them to 'scale up' an app designed for a 320x480 pixel screen to Tablet size.  That allowed AI2 apps to run on tablets with a noticeable deterioration of image quality (that most users never noticed).  Otherwise it worked reasonably well though developers with special Tablet requirements had to use additional coding to get some apps to run on Tablets with a pretty screen.  Google announced it discontinuing the features used by MIT effective ((Aug/Sept 2015?).   MIT had to come up with a solution to be compliant with the new coding requirements for Android.  That solution is Fixed mode; Fixed mode attempts to "reproduce" the pre-Version 145 Tablet response....it almost does that but not quite perfect with apps that have lots of Layouts.  Fixed/Responsive is here to stay. That means AI2 apps that are no longer perfect on Tablets need to have their layouts 'tweaked' using the standard tools  ... Automatic, Fill Parent and Fixed Pixels along with spacers using Labels/Buttons/etc.  If you want your images etc. to respond to the actual 'image size' you could try experimenting with  Fixed screen stuff Harry. Yes, you also said you tried that.

What your example shows as different screen sizes is a result of this  'built for as a teaching/programming learning tool"   trying to keep things simple for nascent developers. The MIT development team is VERY aware of the imperfect 'translation' of screen images in App Inventor.  A fix it all solution probably is not possible.

It is important for developers to be aware that the tool AI has to deal with multiple screen sizes and dpi differences on devices is imperfect and to deal with it.  The alternative is to use one of the Professional compilers like Eclipse and Android Studio (which have their issues too).  You said "but AppInventor should be able to report the correct values", but it can't. AI2 is filled with compromises to help the majority of student users make some really neat apps.

Once again, what we know about how AI2 handles dpi is in the article Taifun pointed you to:  http://ai2.appinventor.mit.edu/reference/other/responsiveDesign.html  

Regards,

Steve

[Harry van der Wolf]

@Taifun, @Ghica and @SteveJG,

Thanks you for the hints, tips and explanation. It makes it much clearer now.

I have been using appinventor for quite some apps ranging from pretty simple to rather complex and until now I never had to bother about screen resolutions.

So that's the reason I was frustrated and mentioned "AppInventor should be able to report the correct values".

Appinventor makes it dead easy to use a tinyDB in several screens which I (also) needed for this app.

It simply means that in this case I need to write some code to handle an sqlite DB in cordova.

It's another good example of "use the right tool for the right job"  :)

Harry

[Taifun]

So that's the reason I was frustrated and mentioned "AppInventor should be able to report the correct values".

follow Ghica's hint and use a clock component to get the screen size a few milliseconds later after the screen initialized

It simply means that in this case I need to write some code to handle an sqlite DB in cordova.

there also is a SQlite extension available in App Inventor...

SQlite Extension to access the local SQlite database

Taifun

[Harry van der Wolf]

Yes, I did see that. Nice work.

However, I wanted to use the simple tinyDB for its simplicity, but now that my graphic demands supersede the appinventor possibilities I have to move back to cordova. I don't want to specifically use sqlite, but on cordova I have to.

Still thinking what to do.

Harry

[Harry van der Wolf]