Android Question Save View To File dips

[Jonathan Rigley]

Hi,

On one device I create a Panel for example by code. I then save the Panel, Top, Left Height and Width to a text file.

I then send that file to another device (Tablet) read the Top, Left, Width and Height and re-create by code.

My problem is the panel is not in the same position on the other device. I believe this is because of the dips.

Here is a sample of what I am doing

' Create Panel On  Device (Phone)
    
    Dim TemplatePanel As Panel
    
    TemplatePanel.Initialize("TemplatePanel")
    Activity.Addview(TemplatePanel, 0dip, 0dip, 100dip, 100dip)
    
    
    ' Save Panel Layout
    
    Dim TemplateWriter As TextWriter
    
    TemplateWriter.Initialize(File.OpenOutput(File.DirRootExternal, "Template", False))
    
    TemplateWriter.WriteLine(TemplatePanel.Top)
    TemplateWriter.WriteLine(TemplatePanel.Left)
    TemplateWriter.WriteLine(TemplatePanel.Height)
    TemplateWriter.WriteLine(TemplatePanel.Width)
    
    TemplateWriter.Close
    
    
     ' Send File To Different Device (Tablet)
    
    
    ' Load Panel Layout Onto Different Device
    Dim TemplatePanel As Panel
    
    TemplatePanel.Initialize("TemplatePanel")
    Activity.Addview(TemplatePanel, 0dip, 0dip, 0dip, 0dip)
    
    
    Dim TemplateReader As TextReader
    
    TemplateReader.Initialize(File.OpenInput(File.DirRootExternal, "Template"))
    
    Dim ReaderLine As String
    ReaderLine = TemplateReader.ReadLine
    
    ReaderLine = TemplateReader.ReadLine
    TemplatePanel.Top = ReaderLine
                
    ReaderLine = TemplateReader.ReadLine
    TemplatePanel.Left = ReaderLine
                
    ReaderLine = TemplateReader.ReadLine
    TemplatePanel.Height = ReaderLine
                
    ReaderLine = TemplateReader.ReadLine
    TemplatePanel.Width = ReaderLine
    
    TemplateReader.Close

Values from each device as an example:

Logger connected to: Samsung S6 - ***** Phone *****
*** Service (starter) Create ***
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **

1dip: 4
Width: 1440
Height: 2560
Scale: 4
GetDeviceLayoutValues: 1440 x 2560, scale = 4.0 (640 dpi)

########################

Logger connected to: HUAWEI AGS-W09 - ***** Tablet *****
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
** Activity (main) Resume **
1dip: 1
Width: 800
Height: 1232
Scale: 1.3312500715255737
GetDeviceLayoutValues: 800 x 1232, scale = 1.3312501 (213 dpi)


I've probably got this all wrong but how can I save a panel, label, imageview etc on one device and send to another that has different scales resolutions etc and have them load in the same positions.

Any pointers or help would be appreciated.

 

[klaus]

You should divide the position and dimension values by the scale before saving, getting dip values.
And when read the values back you should multiply these values by the scale of the new device, convertinf dip values to pixel values.

 

[Jonathan Rigley]

Hi Klaus, thank you for replying.

I've just spent the last few hours trying to figure this out. I did what you suggested:

    ' Create Panel On  Device (Phone)
    
    Dim TemplatePanel As Panel
    
    TemplatePanel.Initialize("TemplatePanel")
    
    Activity.Addview(TemplatePanel,  50dip, 500dip, 100dip, 100dip)

    TemplatePanel.Color = Colors.Green
    
    
    Dim TemplateWriter As TextWriter
    
    TemplateWriter.Initialize(File.OpenOutput(File.DirRootExternal, "Template.txt", False))
    
    TemplateWriter.WriteLine(TemplatePanel.Top / GetDeviceLayoutValues.Scale)
    TemplateWriter.WriteLine(TemplatePanel.Left / GetDeviceLayoutValues.Scale)
    TemplateWriter.WriteLine(TemplatePanel.Height / GetDeviceLayoutValues.Scale)
    TemplateWriter.WriteLine(TemplatePanel.Width / GetDeviceLayoutValues.Scale)
    
    TemplateWriter.Close
    
     ' Send File To Different Device (Tablet)

' Load Panel Layout Onto Different Device
    Dim TemplatePanel As Panel
    
    TemplatePanel.Initialize("TemplatePanel")
    Activity.Addview(TemplatePanel, 0dip, 0dip, 0dip, 0dip)
    
    Dim TemplateReader As TextReader
    
    TemplateReader.Initialize(File.OpenInput(File.DirRootExternal, "Template.txt"))
    
    Dim ReaderLine As Float
    ReaderLine = TemplateReader.ReadLine
    
    TemplatePanel.Top = ReaderLine * GetDeviceLayoutValues.Scale
                
    ReaderLine = TemplateReader.ReadLine
    TemplatePanel.Left = ReaderLine * GetDeviceLayoutValues.Scale
                
    ReaderLine = TemplateReader.ReadLine
    TemplatePanel.Height = ReaderLine * GetDeviceLayoutValues.Scale
                
    ReaderLine = TemplateReader.ReadLine
    TemplatePanel.Width = ReaderLine * GetDeviceLayoutValues.Scale
    
    TemplateReader.Close
    
    TemplatePanel.Color = Colors.Blue

I've attached a photo of the result.

The size seems to be spot on but the top and left are way off. Can you assist any further or point me in the right direction?


Device left Phone, created file Scale 4. Tablet right, file loaded Scale 1.3

Many thanks

 

[klaus]

file loaded Scale 1.3

This sounds very strange to me.
Scale 1.3 doesn't exist it's either 1 or 1.5 or greater 82, 3 or 4).
But, anyway what exactly is your problem?
What exactly do you want to achieve?

In my previous post I just answered your question not first asking for what your problem is?

 

[Jonathan Rigley]

This sounds very strange to me.
Scale 1.3 doesn't exist it's either 1 or 1.5 or greater 82, 3 or 4).
But, anyway what exactly is your problem?
What exactly do you want to achieve?

In my previous post I just answered your question not first asking for what your problem is?

I'm trying to achieve the same layout on the tablet (Right) which is saved from the Phone on the Left, I.E if the Panel was dead center on the left and saved it would appear dead center and same size when loaded on the table right,. Out of interest it's a 10" Huawei AGS-W09 Snapdran 515 (800 X 1280) Tablet that is 1.3 Scaled.

Many thanks.

 

[klaus]

Why do you try to save layout parameters in a file and load on another device?
You should define one layout file for both the phone and the tablet, there could be two variants one portrait and one for landscape.
Use as much as possible anchors. Use AutoScale and then you can fine tune in the Designer Scripts.

You might have a look at the B4X Visual Designer Booklet.
Or at Erels' video: Visual Designer.

In your case, when you save a layout in dip values, the layout will have approximatively the same physical dimensions on the other device.
It will not be stretched nor reduced according to the screen size and the text sizes remain also the same.
Some developers use %x and %y values to stretch layouts, but it's not the recommended method.

 

[Jonathan Rigley]

The application, the user selects a photo from file, an imageview is created and holds the photo. The user then moves and resizes the imageview. The idea is to make a collarge. The result layout is then saved and sent or shared to another device where they can have the layout of photos (imageviews top left width height and bitmap) on there device in the same layout and continue.
Many thanks for replying.

 

[klaus]

The result layout is then saved and sent or shared to another device where they can have the layout of photos (imageviews top left width height and bitmap) on there device in the same layout and continue.

What exactly do you mean with: the same layout on the other device?
What kind of dimensions, pixels or anything else.
You speak about ImageViews.
ImageView dimensions can be set in pixel values or in dip values.
With dip values, the View has almost the same physical dimension on any device.
Then the ImageView dimensions are almost always different from the bitmap or image you display in it.
The image size is therefore converted to fit into the ImageView.
So what do you want to transmit?

 

[Jonathan Rigley]

What exactly do you mean with: the same layout on the other device?
What kind of dimensions, pixels or anything else.
You speak about ImageViews.
ImageView dimensions can be set in pixel values or in dip values.
With dip values, the View has almost the same physical dimension on any device.
Then the ImageView dimensions are almost always different from the bitmap or image you display in it.
The image size is therefore converted to fit into the ImageView.
So what do you want to transmit?

This is an example of a simple layout I mean:

The user Selects a photo, an imageview is then created by code that holds that photo. They then touch to move or resize the imageview creating this collarge effect.

They can then send this collarge to another device where they see exactly the same and can still move and resize the imageviews.

Device Phone, select photo, in code create imageview and set the bitmap to the photo selected, repeat as many times with different photos.

Send to another device, the the imageview top, left with and height Not the bitmap or the bitmap width and height, that is handled separate, ( I use the tag to ID which photo goes in which imageview.bitmap)


So When the collarge is created, It looks at how my imageviews were created, (in the example above 4) Each one Is saved to a flat text file as:

example:

Imageview 1
Imageview1.Top 500
Imageview1.Left 500
Imageview1.Width 250
Imageview1.Height 100

Imageview 2
Imageview2.Top 200
Imageview2.Left 200
Imageview2.Width 125
Imageview2.Height 50

The text file is sent to the other device (Tablet)

The tablet then creates imageviews with the top left width and height read from the file (The photos are transmitted separate and loaded into the Imageview.bitmap after the imageviews are created)

I just want the same look on each device the textfile is sent to.
The problem is the screen sizes and dips are different on each device so the Top, Left Width and Height of each imageview saved will not show in the same position on all devices.

I hope this makes sense, thank you for your patience and thank you for replying.

 

[klaus]

My suggestion is the following:
On the original device:
- Save the positions and dimensions in dip values.
- Save also the screen size GetDeviceLayoutValues.ApproximateScreenSize.
On the other device:
- Read the values and multiply them by the dip.scale and multiply them by the screen size ratio.

 

[Jonathan Rigley]

My suggestion is the following:
On the original device:
- Save the positions and dimensions in dip values.
- Save also the screen size GetDeviceLayoutValues.ApproximateScreenSize.
On the other device:
- Read the values and multiply them by the dip.scale and multiply them by the screen size ratio.

Hi Klaus, thank you for replying.

I'm really confused. I've spent a fair time trying but each time, the imageview is off the screen right.

Heres what I have:

Device 1

1440 x 2560, scale = 4.0 (640 dpi)

1dip = 4

Save This Value
GetDeviceLayoutValues.ApproximateScreenSize is 4.589389937671455


Save This Value
Imageview.Left is 1041 (dips)


Save to file & send to Device 2


Device 2

800 x 1232, scale = 1.3312501 (213 dpi)

1 dip = 1

GetDeviceLayoutValues.ApproximateScreenSize is 6.8964945481822015



Imageview.Left = ? this where I can't figure out the value from Device 1 Imageview 1041 and ApproximateScreenSize 4.58


Can see you assist any further?

Thank you.

 

[klaus]

Save This Value
Imageview.Left is 1041 (dips)

I am sure that 1041 is not a dip value, it's for sure a pixel value.

In the sender device, you need to save the positions and dimensions like:
Left = xxx.Left / Scale (4 in your case)
ScreenSize = GetDeviceLayoutValues.ApproximateScreenSize
Save Left etc., and ScreenSize

In the receiver device:
read Left
read ScreenSize
Multiply Left by the current scale, devide by the original screen size and mutiply by the current screen size.
new.Left = Left * GetDeviceLayoutValues.Scale / ScreenSize * GetDeviceLayoutValues.ApproximateScreenSize

Or post your project and I'll have a look at it.

 

[Jonathan Rigley]

I am sure that 1041 is not a dip value, it's for sure a pixel value.

In the sender device, you need to save the positions and dimensions like:
Left = xxx.Left / Scale (4 in your case)
ScreenSize = GetDeviceLayoutValues.ApproximateScreenSize
Save Left etc., and ScreenSize

In the receiver device:
read Left
read ScreenSize
Multiply Left by the current scale, devide by the original screen size and mutiply by the current screen size.
new.Left = Left * GetDeviceLayoutValues.Scale / ScreenSize * GetDeviceLayoutValues.ApproximateScreenSize

Or post your project and I'll have a look at it.

Thank you for replying,

I'm still struggling with receiving just right of center and just below center instead of bottom right.

I've attached a sample of the project to keep it simple and well commented what should happen and the values.

The project is installed the same on both devices with one Sub to Send and one Sub to Receive. In the example I manually send the file over.

To Keep it simple I've used a Panel

Create a Panel bottom right on the phone
Save values to file
Send to tablet

Tablet receives file
Tablet reads values and creates a new Panel with initial values
Tablet reads each value line by line setting Panel values

Calculations are performed at the momement only on the Panel.Left to keep it simple for testing


Many thanks for your time.

 

[klaus]

I suggestes you to also take into account the screen size ScreenSize = GetDeviceLayoutValues.ApproximateScreenSize, but you didn't use it why?
Here you are.
I just made two projects one for my phone (Samsung Galaxy S8) and another one for my tablet (Samsung Galaxy Tab2).
To avoid to copy and read files I logged the values in the TestPhone program and copied these values in the TestTablet program to check the principle.
A first test with GetDeviceLayoutValues.ApproximateScreenSize was not really good because of the different Height / Width ratios.
Therefore I saved the current screen width and screen height in dip values.
And in the TestTable project I calculate also the screen width and screen height in dip values.
Then, I compare the width and height ratios and calculate the new scale either with the width ratio or the height ratio.
Below two pictures and the two projects.
You will never get exactly the same look on different devices because of their different Heigh / Width ratios.
Up to you to adapt the scaling to your needs.

Phone Tablet

 

[Jonathan Rigley]

I suggestes you to also take into account the screen size ScreenSize = GetDeviceLayoutValues.ApproximateScreenSize, but you didn't use it why?
Here you are.
I just made two projects one for my phone (Samsung Galaxy S8) and another one for my tablet (Samsung Galaxy Tab2).
To avoid to copy and read files I logged the values in the TestPhone program and copied these values in the TestTablet program to check the principle.
A first test with GetDeviceLayoutValues.ApproximateScreenSize was not really good because of the different Height / Width ratios.
Therefore I saved the current screen width and screen height in dip values.
And in the TestTable project I calculate also the screen width and screen height in dip values.
Then, I compare the width and height ratios and calculate the new scale either with the width ratio or the height ratio.
Below two pictures and the two projects.
You will never get exactly the same look on different devices because of their different Heigh / Width ratios.
Up to you to adapt the scaling to your needs.

View attachment 91042 View attachment 91043

Phone Tablet

Perfect!, works exactly as a needed. Thank you kindly for your time and patience.

I'm going over what I did and what you sent me to learn from my mistake. I was looking to hard.

Thank you again.