This page last changed on May 02, 2011 by yannph.
In an iPAD panel, I'm using an "Switch" widget with an image property.
This switch is located within the cell of a Grid.
On the UI Designer, the switch image is correctly aligned in the middle of the cell (horizontally & vertically)
On the iPad panel, the switch is aligned in the top-left corner.
It's the same behavior with an Androd panel.
Is there a property to set for fixing the alignment?
Thanks for the report – will look into this.
Posted by juha at May 11, 2011 09:05
I did reproduce this on the iPad.
Looking at the iPad console code, there is no alignment done in the cell, its contained element is located at cell top left corner.
The Switch element takes the size of the on image when one is assigned, so the size of the cell does not matter here.
We should clearly define the rules for handling alignment / clipping / re-sizing and implement similarly across all consoles.
Posted by ebariaux at May 13, 2011 10:00
Thank you Eric
FYI, it's the same on ANDROID.
My guess, in a short term, would be to follow the designer behavior.
At this stage, in the designer, the switch image is centered on the cell. Since we're designing the interface in the designer, would be nice to follow the same behavior. At least, we'll have the same display that what was expected in the designer.
In a more long term, would be nice to have options to align different UI elements individually (Vtop, Vcenter, Vdown, HLeft, HCenter, HRight) and relativility to others elements (ALL to left, all centered, all to right)
Posted by yannph at May 13, 2011 11:58
I can reproduce this on Android as well. I'll work on a fix.
Posted by cortextual at May 15, 2011 00:35
The Android code is similar.
The switch is implemented as a regular Android Button within a LinearLayout. The button is resized to match the dimensions of the on image if one is present.
Centering an item both horizontally and vertically in a LinearLayout is not particularly simple. I'll see what options I can come up with. RelativeLayouts are much more flexible and may be what we need instead. There are several classes that inherit from ComponentView, which is the one which inherits from LinearLayout.
One approach I've tried so far is to leave the button dimensions the same as the grid cell and center the image within the button. I don't think that's going to be a viable solution though, because clicking on areas of the screen that are part of the button but not the image would most likely cause the button to be pressed.
Posted by cortextual at May 16, 2011 00:22
A switch element either has both an on image and an off image or no images, correct?
Posted by cortextual at May 17, 2011 18:41
I think that is a reasonable assumption, not sure if we are enforcing it, but a mix does not make sense to me.
Posted by juha at May 17, 2011 19:58
Andrew is working on a fix for Android here:
Judging by the last message (R4252) there's at least a partial fix although it affected other parts of the renderer so those are still being tested and worked on.
re ANDROID-76 Fix for switch image alignment in grid cell
- make ComponentView a subclass of RelativeLayout instead of
LinearLayout to make centering child views both vertically
and horizontally more feasible.
- NB: I haven't yet adapted descendents of ComponentView other
than SwitchView for this change yet, so it's possible that
some unexpected behavior may occur with this version. I'll
get to them soon.
- always center the Button widget used to represent a switch in
Switch view, both vertically and horizontally
- If a SwitchView's Switch Component has both an on image and
an off image, set its layout width and height to WRAP_CONTENT.
Otherwise, set its layout width and height to
switchComponent.getFrameWidth() and switchComponent.getFrameHeight()
Will let Andrew pitch in if it's too early to test this branch yet but the build instructions to try are here: Building OpenRemote Android 2.0 Console
Posted by juha at May 21, 2011 09:15
Thank you for the effort to fix this on Android platform. I appreaciate the quick reaction, but I've to apologize.
I haven't taken the time to test until now.
I wondering if a Android Package is already existing for that or if I still have to build the console with Android SDK?
At this time, I've never build any Android App, but could start ...
Posted by yannph at Jun 01, 2011 20:57
Android APK is fairly easy to build (just run the 'ant debug' target), there are some instructions here:
Building OpenRemote Android 2.0 Console
Let me know how that goes.. otherwise Andrew can probably get an APK distributable done in a matter of few minutes.
Posted by juha at Jun 02, 2011 16:18
I've put an APK on Dropbox at http://dl.dropbox.com/u/25636228/openremote/switch_alignment/OpenRemote-debug.apk.
Posted by cortextual at Jun 03, 2011 15:54
Thank you Andrew.
I've downloaded it.
Let you know soon about the results
Posted by yannph at Jun 04, 2011 09:41
I've tested this new version. Here is my result:
- installation: can't replace the previous version. need to uninstall first. After that: OK
- Discovery: doesn't seem to find my server. Introduce the URL manually
- Display: the application is running on a quarter of the screen size. It's running on the 1st quadrant (top-left) Pretty small
- display of label, temperature, slider are OK.
- Button- Image: the image is centered on the grid-cell (H&V) with Images On & Off. This will make easier and consistent the design of screen. The image on the button seems to be distorted. I don't know if it's a cause of the wrong screen size or a cause of this alignment change.
Posted by yannph at Jun 06, 2011 07:41
Thanks for testing this, Yann!
What type of device are you using? I believe I know what the app displayed in such a small portion of the screen. It may be necessary to use a custom panel design at the moment to take full advantage of a device with a higher screen resolution and/or density than you would get with something resembling an HTC G1.
I'm curious about the distortion of the image on the button. Are you able to take a screenshot? You may be able to use the technique described at the following URL: http://www.androidcentral.com/taking-screenshots-without-root .
Posted by cortextual at Jun 06, 2011 17:55
the device I'm running the app is an ACER LIQUID E with Android 2.3.4
For your information, the previous app, beta2, is displaying correctly.
The discovery is aslo not running on beta 2, at least for my network topology.
for the distortion, I'll wait for a patch on the display size before confirming the issue. May be it's a human perception side effect.
Posted by yannph at Jun 06, 2011 18:33
The reason that your panel appears small on your screen has to do with changes that I made in order to be able to make use of higher-resolution screens. The idea was that if someone has a device with a higher resolution display, they should be able to take advantage of it with their panels. Unfortunately, the designer current assumes only one screen resolution for Android.
Here are the forum posts:
Making a custom panel with a resolution that matches your device should use your full screen.
One or both of the following approaches may be best:
(1) enhance the designer to know about more types of screens for Android
(2) give an option for having the panel scaled as it previously was in case someone doesn't want to redesign their panel for a higher-resolution device
Posted by cortextual at Jun 06, 2011 19:24
I've made a new ticket for dealing with different screen sizes and densities more gracefully, http://jira.openremote.org/browse/ANDROID-91. This is a bit tricky. I'll let you know as soon as I have something to try. I suspect that the screen on your device is similar to the one on my HTC G2 and that turning automatic scaling back on based on density may help.
Posted by cortextual at Jun 07, 2011 23:54