B4J Question ABMaterial: Detect orientation?

[techknight]

Is there a way to detect the orientation of a device? Whether its in landscape or portrait? I have 2 different landing images/splash screens but it depends on the device orientation whether its displayed properly.

Not sure how to do this.

any ideas? thanks.

 

[OliverA]

ABM.GetBrowserWidthHeight returns a string encoding of width height separated by a semi-colon. So if Width > Height landscape, otherwise portrait. Note, the string returned may be "" or not contain a semi-colon, at which point your just left to guess. You also have page.Isphone, page.IsTablet, and page.IsDesktop available to make some determination. And finally, page.GetPlatform (https://www.b4x.com/android/forum/threads/abmaterial-device-recognition.77387/post-490225).

 

[techknight]

Is there an event where when I rotate the phone, I can call ABM.GetBrowserWidthHeight ?

 

[Harris]

Is there an event where when I rotate the phone, I can call ABM.GetBrowserWidthHeight ?

I think you have to do this in the BuildPage , ConnectPage, since this is (GetBrowserWidthHeight) can be called when device is rotated (page rebuilt)...
This is tricky to determine at "the right time"...

 

[techknight]

yea, that probably wont do what I want it to. GetBrowserWidthHeight doesnt work in ABMApplication where I needed it to.

I have 2 pages. One is rendered all in portrait, one is rendered all in landscape so I need to be able to redirect to the correct page.

 

[OliverA]

Ok. In the www\js\custom folder, create a new file named onresize.js with the following content:

$(window).resize(function(){
  b4j_raiseEvent('page_parseevent', {'eventname': 'page' + '_resize','eventparams': 'size', 'size': window.innerWidth + ";" + window.innerHeight});
});

In the ABM page that you want to use this, in the BuildPage() method, add

page.AddExtraJavaScriptFile("custom/onresize.js")

then add the following method to your page

Public Sub page_resize(size As String)
    Log("****************************************")
    Log(ABM.GetBrowserWidthHeight(page))
    Log(size)
    Log("****************************************")
End Sub

Currently, it's just logging the window's size (and to show I'm returning the same values as you would get with GetBrowserWidthHeight)
Now, you can initially check the page (via GetBrowserWidthHeight) to determine orientation and then use this sub to change it as needed.
Note: Name of .js file is not important as long as you change the name in the AddExtraJavaScriptFile

 

[alwaysbusy]

This is a good solution from @OliverA but I thought there was already an event page_onresize() probably with a page.PageRaiseOnResize=true or something needed. (Not on my PC to check).

 

[OliverA]

There is a Page_SizeChanged(previous As String, current As String) event, but that is only raised if the "type" of size changes (like tablet to desktop, etc).

Note: Based on ABMaterial 4.51

 

[alwaysbusy]

There is a Page_SizeChanged(previous As String, current As String) event, but that is only raised if the "type" of size changes (like tablet to desktop, etc).

You are right. That was the one I was thinking of Maybe a good idea to build in for a next version then.

 

[techknight]

Ok so this works, allowing me to bounce back and forth between pages, But it gets buggy after a couple times.

So when it flips from one page to another, black screen. if I refresh, itll come back but sometimes itll just instantly go right back to black screen.

Not sure what im doing wrong.

Vertical page I have this:

Public Sub page_resize(size As String)
    Log("****************************************")
    Log(ABM.GetBrowserWidthHeight(page))
    Log(size)
    Log("****************************************")
    
    Dim Arr() As String = Regex.Split(";", size)
    If Arr.Length > 0 Then 
        If Common.Val(Arr(0)) > Common.Val(Arr(1)) Then 
            ABMShared.NavigateToPage(ws, "", "../BaseballLayout/")
        End If
    End If
End Sub

Horizontal page, I have this:

Public Sub page_resize(size As String)
    Log("****************************************")
    Log(ABM.GetBrowserWidthHeight(page))
    Log(size)
    Log("****************************************")
    
    Dim Arr() As String = Regex.Split(";", size)
    If Arr.Length > 0 Then
        If Common.Val(Arr(0)) < Common.Val(Arr(1)) Then
            ABMShared.NavigateToPage(ws, "", "../BaseballLayoutVertical/")
        End If
    End If
End Sub

I also have the 2 custom thingies put into buildpage.

thoughts?

 

[OliverA]

So when it flips from one page to another, black screen.

Check you logs on the server. Notice what the page says about caching when it works and when it does not works. I had a similar issue, but got pulled to another project before being able to report a full bug report. As much as I remember, it came down to caching (on the server side, the caching ABM uses).

Edit: Grammar... Not my day today
Edit2: And spelling...

 

[techknight]

The only difference I see is "Saving First Instance" when it works, and Comes from Cache when it doesnt.

Refreshing the page works most of the time, as it will display "Saving first instance" again.

if I knew how to disable the cache, I would try it.

 

[OliverA]

The black screen, is it related to an image that you are showing? Maybe this issue should be a new thread. It does not have anything to do with orientation. I had a similar issue (as stated above) and may have a clue as to what is going on. If the issue is related to an image not showing up, where do you load the image? In BuildPage() or ConnectPage()?

 

[techknight]

Well its a canvas that I build in code, all of my labels, and controls and things are built onto the canvas.

The images are added in BuildPage, But then everything is built in ConnectPage. That is where everything is initialized.

And I kept it in this thread because for me, its related to the orientation thing. Because like I said, if I dont use that, and just navigate to the page, this issue DOES NOT happen. It only happens when I use NavigateToPage with the orientation change.