Diary only showing 3 nutriment goals

[adamisch]

I'm using app version 3.8.0, Samsung Galaxy S12, Android Version 12.

Right now my diary shows 3 goals at the bottom:

But I have 4 goals that are selected as "Show in Diary":

So one is always missing from the diary view.
I surmise that this is a bug given that the screenshot in the README shows 4 nutriment goals in the diary.

[davidhealey]

Have you assigned a goal to all 4?

[adamisch]

Yes, using "same goal every day."

[EmilJunker]

If you swipe the goal bar to the left, you should see the fourth goal.

And if you disable the Settings > Diary > Show nutrition units option, there should be enough space to fit all four goals on one page.

[adamisch]

Yep that did it!

[victorjagu]

Hello!
I've followed these steps but it is currently showing just 3 goals :(
Any other idea?
I'm using a Samsung S21FE
Thanks for your support!

[EmilJunker]

@victorjagu So you disabled showing the nutrition units in the diary, but it's still only displaying three goals? Then how many goals does it show when the nutrition units are enabled? Only two? The only possible explanation for that would be that your phone's screen is too narrow. Waistline automatically decides how many goals to show based on the screen width.

[victorjagu]

@EmilJunker, the answer to all of your questions is yes, that's exactly what's happening!, but I do think there is enough space, as you can see in this attachment:

What do you think? I mean, having a look at the screenshot in the README, it seams that something is wrong unfortunately :(
The screen size is 1080 x 2400 px, 20:9 aspect ratio (~411 ppi density) in 6.4" just in case this helps clarifying the issue.

[EmilJunker]

The code responsible for determining the number of goals to display can be found right here:

waistline/www/activities/diary/js/diary.js

Lines 310 to 322 in b2ca437

	// Optimize column count for screen width
	let columnsToShow = 4;
	if (window.innerWidth > 500)
	columnsToShow = 5;
	if (window.innerWidth < 400)
	columnsToShow--;
	if (app.Settings.get("diary", "show-nutrition-units"))
	columnsToShow--;

Apparently, the window.innerWidth on your phone returns a value smaller than 400. My phone has a 6.5" screen with 1080 x 2400 pixels (~405 ppi), and my window.innerWidth is 412 according to this website:

https://www.rapidtables.com/web/tools/window-size.html

[victorjagu]

That's strange, mine is bigger (414):

Any other idea? 😅

[EmilJunker]

There is no other possible explanation. The source code is unambiguous. The only way to end up with just two goals being shown is if the window.innerWidth property returns a value less than 400 at the time line 317 of the function I posted above is executed.

One thing you could try that might help to get to the bottom of this is to rotate your phone into landscape mode and then go to the diary and see how many goals it displays (make sure to first switch to landscape mode and only afterwards navigate to the diary). It should normally show five goals in landscape mode, assuming you have that many goals defined and disabled the nutrition units. It does for me, anyway:

[victorjagu]

Mmm I don't understand.

If I rotate my phone to landscape and open the app as you suggested, I got the 4 goals and if I rotate the phone in that moment, I still see the four goals correctly.
However, if I open the app in vertical, I only see three... 😭

Btw, it in the web that you suggested to get my phone width, why the app got a "wrong" number according to that web?

[EmilJunker]

@victorjagu Okay, one last question: if you enable the nutrition units again, how many goals do you see in landscape mode? Does it go down to three or is it still four?

One possible explanation might be that the innerWidth value is not properly initialized yet by the time Waistline calculates the number of goals. But I don't know why that would happen or what we could do about it 😕🤷

[victorjagu]

Don't worry, as many questions or whatever to figure out why and, if possible, how to solve it, because it's a piity to me 😢
And thank you for your efforts!!

Answering your question, if I activate units, I got the same behaviour, my 4 goals show up correctly in landscape:

Of course, as in the beginning of this post, If I open the app in portrait, I got just 2 goals...

About how can this would happend, I don't know, but if I can try something else, just tell me.
This is a samsung, I don't know if OneUI could be involved or not.
Is there a way to capture that value with the app so as you could see the window width the app is getting?

About a possible solution, is it maybe possible to add in settings the number of goals to show? I mean, it could be by default in "automatic" as now for example but, people with issues like me could "force" to X columns.
In that particular piece of code you show me before, maybe it could find first if the setting is in automatic or a static number. Does this makes sense to you? Is it too hard or tricky to implement?

[EmilJunker]

Answering your question, if I activate units, I got the same behaviour, my 4 goals show up correctly in landscape

Thank you. That tells me that the cause of the problem is indeed the fact that, for whatever reason, your window.innerWidth is reported as < 400 in portrait mode (but correctly reported as > 500 in landscape mode). I don't know why, though, since your screen resolution is the same as mine.

This is a samsung, I don't know if OneUI could be involved or not.

My phone is a Samsung too (Samsung A53), and I don't have this problem.

Is there a way to capture that value with the app so as you could see the window width the app is getting?

There is no easy way to do that. But if you want to go down that road, you could enable the developer mode on your phone and install ADB on your computer (see instructions here: https://www.xda-developers.com/install-adb-windows-macos-linux). Then you can connect your phone to your computer, navigate to chrome://inspect in any Chromium browser, and inspect the running Waistline app. This would allow you to check the window.innerWidth property via the console and maybe even to set a breakpoint in the source code at the relevant line 317. However, that's all kind of advanced stuff if you have never done it. But if you want to investigate it, you can also find some screenshots for this whole process in this comment:
#839 (comment)

About a possible solution, is it maybe possible to add in settings the number of goals to show?

Yes, that would absolutely be possible and shouldn't be difficult to implement. I think that would be a useful feature.

[victorjagu]

Thank you very much for your support!

I will try the ADB inspection, but I'm not an advanced user so I will need some time before I come back with the result (if I can do it). Your comment looks not that much difficult but... 😅

Thanks again!

[EmilJunker]

Meanwhile, I got my hands on a Samsung S21 FE and tested it myself. I can confirm that it only shows three goals in the diary. As suspected, the reason is that the window.innerWidth is smaller than 400. It's actually just 360 according to the ADB inspection. And I see the same value when I visit the rapidtables website in Chrome or the Samsung browser, both of which use the Android WebView like Waistline (@victorjagu Maybe you got a different value because you were using what looks like Firefox 🤔)

A simple short term solution would be to lower the limit for showing four goals from 400 to 360 since that is evidently enough space to fit four goals.

And an even better long term solution would be to let the user decide how many goals they want to see (and maybe this could even be combined with an option to change the order of the goals in the diary indepenently from the global nutrient order).

[victorjagu]

Exactly, I use Firefox on my phone. I didn't even think about a different browser could lead to a different window width 😅.

Really appreciate your efforts @EmilJunker and I totally agree with both solutions. Having the possibility to change goals order is a plus!
I will patiently wait for an update 😊

Again, thank you very much, it was really weird...

By the way, if I can help with the app, just let me know how. Perhaps with Spanish translations? I'm aware that some menu items/fields are not translated yet.

[EmilJunker]

@victorjagu You are right, the Spanish translation is currently only 52% complete. Your help with that would be very appreciated. To provide translations, just go to https://crowdin.com/project/waistline and log in with your github account. Have fun translating!

[victorjagu]

@EmilJunker, Spanish translation is now 100% complete 😊