Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icons misplaced #3786

Closed
felixschndr opened this issue Jul 29, 2024 · 6 comments
Closed

Icons misplaced #3786

felixschndr opened this issue Jul 29, 2024 · 6 comments
Labels
bug Indicates an unexpected problem or unintended behavior

Comments

@felixschndr
Copy link
Contributor

felixschndr commented Jul 29, 2024

Disclaimer: There are some open issues about icons but I am not sure weather any of these covers the following issue. If so please close this one.

Actual behaviour

Since a recent version of the android app the icons seem to be misplaced sometimes:
Screenshot_20240721_122802_openHAB
Screenshot_20240721_122807_openHAB
After scrolling in the window or reloading the icon seem to be placed where they belong.

Clearing the cache does not help.

In the following image I noticed that an icon got a background it should not have:
Screenshot_20240721_122759_openHAB
The original image has no white background.

On iOS the icons work as expected:

IMG_0019

It does not matter whether the connection is local or via the cloud.

Expected behaviour

The icons should all be aligned the same way.

Steps to reproduce

See code below

Environment data

Client

  • Android version: 14
  • Device model: Samsung Galaxy S22 Ultra
  • App version 3.15.5 (I think it happens since 3.15.0)
  • Build flavor : Full
  • Device language: German

Server

  • Server version: 4.2.0
  • Reverse Proxy: Nginx
  • Authentication method : None

Logs

App log

Click to expand

---------------.txt

Code for first image:

        Frame label="Saugen" {
            Switch item=Staubsauger_System_Staubsauger_Steuerung
                mappings=["vacuum"="Start", "pause"="Pause", "dock"="Dock"]
                visibility=[Staubsauger_System_Staubsauger_Status != "Charging"]
            Text item=Staubsauger_System_Staubsauger_Status
                visibility=[!= "Charging"]
            Selection item=Staubsauger_System_Staubsauger_Saugleistung
                mappings=[101="Leise", 102="Normal", 103="Turbo", 104="Maximal"]
            Text item=Staubsauger_System_Raum_Gruppe
                visibility=[Staubsauger_System_Staubsauger_Status == "Charging"]
            {
                Switch item=Staubsauger_System_Raum_16
                Switch item=Staubsauger_System_Raum_23
                Switch item=Staubsauger_System_Raum_17
                Switch item=Staubsauger_System_Raum_20
                Switch item=Staubsauger_System_Raum_18
                Switch item=Staubsauger_System_Raum_19
            }
            Slider item=Staubsauger_System_Reinigungszyklen minValue=1 maxValue=3
                visibility=[Staubsauger_System_Staubsauger_Status == "Charging"]
            Switch item=Staubsauger_System_Start
                label=""
                mappings=[ON="Start"]
                visibility=[Staubsauger_System_Raum_Gruppe != 0]

            Image item=Staubsauger_System_Staubsauger_Karte
                visibility=[!= UNDEF]
....

Code for second image:

        Frame label="Bindings" {
            Switch item=System_System_Binding_AmazonEchoControl
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
            Switch item=System_System_Binding_AndroidTV
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
            Switch item=System_System_Binding_ESPHome
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
            Switch item=System_System_Binding_Nanoleaf
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
            Switch item=System_System_Binding_Miio
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
            Switch item=System_System_Binding_Network
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
            Switch item=System_System_Binding_OpenWeatherMap
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
            Switch item=System_System_Binding_Hue
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
            Switch item=System_System_Binding_Shelly
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
            Switch item=System_System_Binding_Spotify
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
            Switch item=System_System_Binding_Systeminfo
                mappings=["Stop"="STOP", "Restart"="NEUSTART", "Start"="START"]
        }

Code for third image:

        Frame label="Klima" {
            Text item=Klima_System_Durchschnittstemperatur {
                Text item=Klima_Badezimmer_Temperatur
                    label="Badezimmer"
                Text item=Klima_Flur_Temperatur
                    label="Flur"
                Text item=Klima_Kueche_Temperatur
                    label="Küche"
                Text item=Klima_Schlafzimmer_Temperatur
                    label="Schlafzimmer"
            }
            Text item=Klima_System_Aussentemperatur_Zusammengesetzt
        }
@felixschndr felixschndr added the bug Indicates an unexpected problem or unintended behavior label Jul 29, 2024
@felixschndr
Copy link
Contributor Author

felixschndr commented Jul 29, 2024

Might be related/duplicate to #3773, #3747 and #3781

@maniac103
Copy link
Contributor

The switch-with-mappings icon issue likely is #3773. The 'white background' one likely is one I also have seen once, but didn't have a chance of investigation yet: It looks like the icon and the loading placeholder ('glowing' frame) are both shown simultaneously.

@felixschndr
Copy link
Contributor Author

Then I guess we can close this as duplicate and/or should create an issue for

It looks like the icon and the loading placeholder ('glowing' frame) are both shown simultaneously.

@maniac103
Copy link
Contributor

We can keep this one for that issue.

As far as I can tell, this placeholder (skeleton) + image issue happens due to race conditions when views are reused, because

  • WidgetImageView puts itself into a SkeletonLayout
  • which sets the WidgetImageView to invisible while the skeleton is shown
  • LabeledItemBaseViewHolder.bind() also manipulates the visibility flag of the WidgetImageView because it's unaware the view is now contained in another view (and the adapter now actually wanted to hide/show that one)

The solution for this, as far as I can tell, is avoiding the magic implicit skeleton creation. Will think about it further, though.

@maniac103
Copy link
Contributor

maniac103 commented Jul 29, 2024

Evidence of speculation above: I've added some debug statements to WidgetImageView:

[...]
07-29 15:37:36.050 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: setImageUrl(chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540, force true), target size 996, last http://<ohserver>:8080/chart?groups=GroupPoolTemperature&dpi=420&period=3D&service=influxdb&theme=white_transparent&yAxisDecimalPattern=&w=1080&h=540
07-29 15:37:36.053 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: URL http://<ohserver>:8080/chart?groups=GroupPoolTemperature&dpi=420&period=3D&service=influxdb&theme=white_transparent&yAxisDecimalPattern=&w=1080&h=540 -> http://<ohserver>:8080/chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540
07-29 15:37:36.054 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: show skeleton for com.faltenreich.skeletonlayout.SkeletonLayout{48a001f V.ED..... .......D 0,0-996,498 aid=1073742071}, parent is com.faltenreich.skeletonlayout.SkeletonLayout{48a001f V.ED..... .......D 0,0-996,498 aid=1073742071} ... android.widget.FrameLayout{1c5af6c V.E...... .......D 42,32-1038,530 aid=1073742066}
07-29 15:37:36.056 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: set visibility invisible
07-29 15:37:36.056 31925 31925 D WidgetImageView: java.lang.Throwable
07-29 15:37:36.056 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.setVisibility(WidgetImageView.kt:142)
07-29 15:37:36.056 31925 31925 D WidgetImageView:       at com.faltenreich.skeletonlayout.SkeletonLayout.showSkeleton(SkeletonLayout.kt:61)
07-29 15:37:36.056 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.applySkeleton(WidgetImageView.kt:352)
07-29 15:37:36.056 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.doLoad(WidgetImageView.kt:286)
07-29 15:37:36.056 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.setImageUrl(WidgetImageView.kt:114)
07-29 15:37:36.056 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.setImageUrl$default(WidgetImageView.kt:87)
07-29 15:37:36.056 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter$ChartViewHolder.bindAfterDataSaverCheck$mobile_fossBetaDebug(WidgetAdapter.kt:1440)
07-29 15:37:36.056 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter$HeavyDataViewHolder.bind(WidgetAdapter.kt:522)
[...]
07-29 15:37:36.059 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a IFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: execute request for http://<ohserver>:8080/chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540
07-29 15:37:36.059 31925 31925 I WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a IFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: Refreshing image at http://<ohserver>:8080/chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540, avoidCache true
07-29 15:37:36.062 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a IFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: refresh on attach, request HttpImageRequest(url=http://<ohserver>:8080/chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540, job=null)
07-29 15:37:36.062 31925 31925 I WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a IFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: Refreshing image at http://<ohserver>:8080/chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540, avoidCache false
[...]
07-29 15:37:36.156 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a IFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: starting download of http://<ohserver>:8080/chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540&random=-677746331
[...]
07-29 15:37:36.240 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a IFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: set visibility visible
07-29 15:37:36.240 31925 31925 D WidgetImageView: java.lang.Throwable
07-29 15:37:36.240 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.setVisibility(WidgetImageView.kt:142)
07-29 15:37:36.240 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter$HeavyDataViewHolder.showDataSaverPlaceholderIfNeeded(WidgetAdapter.kt:2009)
07-29 15:37:36.240 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter$HeavyDataViewHolder.bind(WidgetAdapter.kt:521)
07-29 15:37:36.240 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter.onBindViewHolder(WidgetAdapter.kt:265)
07-29 15:37:36.240 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter.onBindViewHolder(WidgetAdapter.kt:127)
07-29 15:37:36.240 31925 31925 D WidgetImageView:       at androidx.recyclerview.widget.RecyclerView$Adapter.onBindViewHolder(RecyclerView.java:7747)
07-29 15:37:36.240 31925 31925 D WidgetImageView:       at androidx.recyclerview.widget.RecyclerView$Adapter.bindViewHolder(RecyclerView.java:7847)
[...]
07-29 15:37:36.242 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: setImageUrl(chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540, force true), target size 996, last http://<ohserver>:8080/chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540
07-29 15:37:36.242 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ......ID 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: URL equals last URL, active true
[...]
07-29 15:37:36.307 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ........ 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: set visibility visible
07-29 15:37:36.307 31925 31925 D WidgetImageView: java.lang.Throwable
07-29 15:37:36.307 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.setVisibility(WidgetImageView.kt:142)
07-29 15:37:36.307 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter$HeavyDataViewHolder.showDataSaverPlaceholderIfNeeded(WidgetAdapter.kt:2009)
07-29 15:37:36.307 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter$HeavyDataViewHolder.bind(WidgetAdapter.kt:521)
07-29 15:37:36.307 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter.onBindViewHolder(WidgetAdapter.kt:265)
07-29 15:37:36.307 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter.onBindViewHolder(WidgetAdapter.kt:127)
07-29 15:37:36.307 31925 31925 D WidgetImageView:       at androidx.recyclerview.widget.RecyclerView$Adapter.onBindViewHolder(RecyclerView.java:7747)
[...]
07-29 15:37:36.309 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ........ 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: setImageUrl(chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540, force true), target size 996, last http://<ohserver>:8080/chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540
07-29 15:37:36.309 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ........ 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: URL equals last URL, active true
[...]
07-29 15:37:36.393 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ........ 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: set visibility visible
07-29 15:37:36.393 31925 31925 D WidgetImageView: java.lang.Throwable
07-29 15:37:36.393 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.setVisibility(WidgetImageView.kt:142)
07-29 15:37:36.393 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter$HeavyDataViewHolder.showDataSaverPlaceholderIfNeeded(WidgetAdapter.kt:2009)
07-29 15:37:36.393 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter$HeavyDataViewHolder.bind(WidgetAdapter.kt:521)
07-29 15:37:36.393 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter.onBindViewHolder(WidgetAdapter.kt:265)
07-29 15:37:36.393 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.WidgetAdapter.onBindViewHolder(WidgetAdapter.kt:127)
07-29 15:37:36.393 31925 31925 D WidgetImageView:       at androidx.recyclerview.widget.RecyclerView$Adapter.onBindViewHolder(RecyclerView.java:7747)
07-29 15:37:36.393 31925 31925 D WidgetImageView:       at androidx.recyclerview.widget.RecyclerView$Adapter.bindViewHolder(RecyclerView.java:7847)
07-29 15:37:36.393 31925 31925 D WidgetImageView:       at androidx.recyclerview.widget.RecyclerView$Recycler.tryBindViewHolderByDeadline(RecyclerView.java:6646)
[...]
07-29 15:37:38.095 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ........ 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: loaded bitmap android.graphics.Bitmap@f7b9364 for http://<ohserver>:8080/chart?groups=GroupSolarProduction&dpi=420&period=1D&theme=white_transparent&legend=true&yAxisDecimalPattern=&w=1080&h=540
07-29 15:37:38.096 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ........ 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: hide skeleton for com.faltenreich.skeletonlayout.SkeletonLayout{48a001f V.ED..... ......ID 0,0-996,498 aid=1073742071}
07-29 15:37:38.098 31925 31925 D WidgetImageView: org.openhab.habdroid.ui.widget.WidgetImageView{133de1a VFED..C.. ........ 0,0-996,498 #7f0a030c app:id/widget_content aid=1073742065}: set visibility visible
07-29 15:37:38.098 31925 31925 D WidgetImageView: java.lang.Throwable
07-29 15:37:38.098 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.setVisibility(WidgetImageView.kt:142)
07-29 15:37:38.098 31925 31925 D WidgetImageView:       at com.faltenreich.skeletonlayout.SkeletonLayout.showOriginal(SkeletonLayout.kt:50)
07-29 15:37:38.098 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.removeSkeleton(WidgetImageView.kt:357)
07-29 15:37:38.098 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.applyLoadedBitmap(WidgetImageView.kt:322)
07-29 15:37:38.098 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView.access$applyLoadedBitmap(WidgetImageView.kt:50)
07-29 15:37:38.098 31925 31925 D WidgetImageView:       at org.openhab.habdroid.ui.widget.WidgetImageView$HttpImageRequest$execute$1.invokeSuspend(WidgetImageView.kt:406)

One can see clearly that

  • a download (here: chart) is started
  • the view is rebound a few times while the download is running
  • on rebind, the image is made visible (while it shouldn't be at that time)
  • on download finish, the correct visibility toggle happens

maniac103 added a commit to maniac103/openhab.android that referenced this issue Jul 30, 2024
The 'automagic' skeleton addition caused two issues:
- Misplaced icon in section switches (openhab#3773)
  This was caused by constraints in the widget's ConstraintLayout
  referencing the WidgetImageView's ID, which was no longer present
  after replacing it by the SkeletonLayout
- Skeleton and image shown at the same time (mentioned in openhab#3786)
  This was caused by WidgetAdapter and SkeletonLayout both
  simultaneously modifying the visibility flag of the WidgetImageView,
  again caused by silent replacement of WidgetImageView by
  SkeletonLayout

Fix both issues by changing the approach: Instead of silently replacing
the view, make WidgetImageView inherit from SkeletonLayout and make it
redirect external calls to an internal ImageView instance.

Fixes openhab#3773, openhab#3786

Signed-off-by: Danny Baumann <[email protected]>
mueller-ma pushed a commit that referenced this issue Jul 30, 2024
The 'automagic' skeleton addition caused two issues:
- Misplaced icon in section switches (#3773)
  This was caused by constraints in the widget's ConstraintLayout
  referencing the WidgetImageView's ID, which was no longer present
  after replacing it by the SkeletonLayout
- Skeleton and image shown at the same time (mentioned in #3786)
  This was caused by WidgetAdapter and SkeletonLayout both
  simultaneously modifying the visibility flag of the WidgetImageView,
  again caused by silent replacement of WidgetImageView by
  SkeletonLayout

Fix both issues by changing the approach: Instead of silently replacing
the view, make WidgetImageView inherit from SkeletonLayout and make it
redirect external calls to an internal ImageView instance.

Fixes #3773, #3786

Signed-off-by: Danny Baumann <[email protected]>
@maniac103
Copy link
Contributor

Fixed with #3787

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Indicates an unexpected problem or unintended behavior
Projects
None yet
Development

No branches or pull requests

2 participants