Hey,
I would like to start a discussion about possible changes to the UI of Gadgetbridge.
BTW, I know very little as to what you actually get off the device, so apologies if some of this can't be helped.
Let's jump in.
(Does anyone know how to scale down images on github?)

The page shows activity and sleep over time.
Another visualisation that might be cool is the one from the LG Health app. It looks like this:



This page is fine, but I must admit I like the "LG health" interface more. It looks like this:

You can click on the days to zoom in and get more info. You have heart-rate data, so you could do something similar for that too if you wanted.
Currently you swipe left and right to switch pages. This works, but I find that other widgets take focus when I'm trying to swipe:
How about using a sidebar, like the one used for folders in the gmail app? If the graphs didn't pan/spin until you tapped, them, you could then use swipe for changing days and remove the [<] and [>] buttons.
It's difficult not to agree with your points, I believe it all boils down to the fact that the people who are contributing to the project deal mostly with "making things work" rather than "making things look nice" ๐
That being said, there are many things that should be improved wrt the functional aspects of our GUI, and your screenshots are surely inspiring.
I for one don't have access to the various google/lg/samsung/younameit health apps, as I don't have access to the google play store on my device, hence seeing what others are doing is very good! The steps of the week chart is largely inspired by the pedometer open source app.
Now the big question is: could you help us further? Can you provide mockups, designs (tailored to our data model) or even better android layouts that we can merge? It's a candid question, I have no idea of your background ๐
Regarding the currently displayed data, the green bars aren't the steps, but a value for the activity "intensity" we get from the device and display as-is. The only graph where the steps are shown is the steps-of-the-week one.
I agree with you that a cumulative steps count would make great sense!
Hi,
Thanks for the reply.
My background, I do a lot of programming and data analysis for my day job. A lot of this involves choosing good data visualisations!
Despite being a programmer I have never written Android code, and I dont have time to learn at the moment.
Id be happy to mock up a new UI in inkscape, if someone could help do the programming. Would this help?
You mention your data model. Can you briefly describe what data is available?
What UI widgets do you have access to? I assume you use someone elses library? Will try to propose something that can easily be achieved without custom widgets.
For the graphs we use https://github.com/PhilJay/MPAndroidChart but that's just our first choice. If there's something better, we can use that, or even mix and match.
Most of us are Android noobs, so, welcome to the club ;-) We're all learning this as we go. I _think_ that most custom UIs are designed in HTML+CSS because
Regarding data, we have samples, typically one per minute. Every sample typically contains one value for the steps and another for an abstract "intensity" value. And we have a category/type, i.e. a value that describes what kind of activity the sample describes (light sleep, deep sleep, lying on the bed, not wearing the device at all, ...)
For Mi 1S devices, we also have heart rate values if you have "sleep assistant" turned on or during live activity recording (values in bpm).
We'd like to display all kinds of nice visualizations with daily, weekly, monthly statistics, etc. but there's only so much time every day. So all help is much appreciated :-)
See here for scaling images (need to embed html code).
One sample per _minute_, not per second ๐
Some info related to the samples format is also available in our wiki: https://github.com/Freeyourgadget/Gadgetbridge/wiki/Activity-Analysis
Oups, it was late.. Thanks, corrected.
Thanks! Can you tell me about heart rate? In my experience, heart rate is only measured during sleep currently. Is that intentional?
The firmware sports 3 different measurement modes:
Only 2) actually records the values on the band. The other measurement values are sent to the mobile only, so you have to be connected to get them.
3) only lasts for for a couple of seconds, so the mobile has to reinitiate it to keep measuring.
At the moment, the single and live measurements ate not recorded in the mobile either, so the values are lost after display. This will be changed once we have a better database model.
Ok, that explains why i was only seeing heart rate during sleep. How strange. I would have though people would be more interested in heartrate during exercise.
I think I have enough to sketch up a new UI design. Ill see what I can come up with.
Right. And I thought not everybody would take their mobile to excercise; it's really weird. But maybe there is another mode that we don't know yet, or they will add another mode with the next firmware.
Looking forward to your UI design :-)
I'm currently working on another android app and use this lib (https://github.com/diogobernardino/WilliamChart) for graphs. Looks very nice imho.
I'd like to help with UI ideas and programming, but haven't had the time to look at the code so I have no idea how to modify the current UI.
Just being a bit confused: according to the text, at least the first screenshot is supposed to be from GB, right? I couldn't find anything like that in the app. Is that due to the fact it's device specific but not to my device (Pebble Time Steel)? Or would that need to enable "untested features"?
You should get there when you long press the item and choose "Your Activity".
@v1r0x Yes, this one looks good as well. We're not at all attached to mpandroidchart or even the look of our current charts. It's merely our first shot, which can be improved on all areas.
So feel free to do use what you know/like. The interface is basically the data structure, basically a list of ActivitySample instances at the moment.
Aggregation functions should be reusable, but we don't have many of them, yet.
You should get there when you long press the item and choose "Your Activity".
Ah! Well hidden :) OK, all empty in there. Is there some documentation on how to use that where you could RTFM me to?
Try to choose pebble health as data provider in the settings.
Please note that if you never used the pebble app to enable pebble health, then you have to enable the "dangerous" options in GB, at which point you'll see the pebble health app among the other apps (short press on the pebble) and you can enable it from there (long press on the pebble health app entry).
Re-reading this I understand this should better be written somewhere :)
Full ack :) Activated it, and immediately took 12 steps without moving (cache I guess). Now I wait for something to show up in my activities in the app. If I remember correctly, that's updated once per minute โ or do I need to trigger something? All graphs are still empty here. Hm, walked to the kitchen to pick a drink, came back, still 12 steps. Strange. Ah, the watch also only updates that once per minute it seems :see_no_evil: But still no update in GB? Debug โบ Test Heartrate didn't show anything either (except for the toast that it measures something).
PS: 20min later, the graph has some data. So when documenting it, please include the refresh rate :) Still I'm a little confused about the last "tab" ("Live Activity") which stays empty. It has a text "Start your Activity" โ but it's not clear how to do that.
_This_ part is documented in our wiki ;)
The pebble watch will send data as it pleases, roughly every 15 minutes. You can trigger the transfer with a watchapp like ocean survey (you have to compile it though) but it's not needed.
Heart rate is not supported on pebble watches...
Oops :blush: OK, should have checked again. As for heartrate: I already wondered, didn't remember having read about a corresponding sensor; maybe that shouldn't be shown there for a Pebble then? Or is it to much trouble differenciating for device capabilities here?
Well: I think tonight the Pebble will stay on my ARM :) I hope it buffers the data until it reconnects tomorrow morning (though I very much doubt that).
Thanks again!
Back to the topic of this issue: The display might need a "Refresh/Update" button. Currently one needs to exit and re-enter to display more recent data.
@IzzySoft
You won't lose data if you have bluetooth off for a day AFAIK. I cannot tell exactly because the "datalog" butffer has a global limit and pebble health shares this with the mysterious pebble analytics stuff that we through away if we receive it.
Hey, my day job is "making things look nice". I can contribute in my spare time!
@ashimokawa Confirmed for at least 6h :) But obviously, the _Pebble Time Steel_ is not a _Pebble Time Health,_ and data are quite limited: "activity" only (green bars), no sleep (blue bars) or heart monitor (yellow bars). And as for the step counter: washing your hands is counted as running around the block :smiley_cat:
OK, so steps and burned calories it is. But hey, I didn't expect to get anything in this regard without the "official spy soft", so it's cool โ thanks!
You can expect at least 3 days of buffered data according to my experience, but YMMV because of other apps using datalog etc.
it's strange that you don't have sleep data, they should be there. They may appear at a later point though (you don't want to know why), what's important is that you should be getting in GB the same values you see on the watch in the pebble health app, otherwise we have a problem.
BTW all this discussion is a bit off topic in this issue, I may remove some comments from here in the next days, don't be offended ๐
@danielegobbetti Double-correct. Data are there now (just hard to spot in the first graph due to very thin bars), and of course I'm not offended. When you're doing a cleanup (this comment included I guess), may i suggest to "extract" information and keep it in another place (e.g. the wiki)? Thanks a lot again!
@irpainel That sounds fantastic :-)
AFAIU @vext01 is already preparing some improvements, maybe we can coordinate this so that you don't duplicate each other's work?
Looking very much forward to this!
Hi,
Just to keep you updated, Ive scribbled a prototype design in my notepad. I just need to make graphics for them now. Im away until sunday, so these may not surface until next week.
Im happy to see there is interest in this.
Alright, thanks for the update!
Hi @vext01 and @cpfeiffer, man that would be so cool. I have some knowledge with UX as well. We can share references.
Google Fit and Apple health are good places to start:

I'm going to start studying the project to understand the screens.
Here's my first attempt. I have thought hard about what a typical user will want to see, and how we can intuitively display the (limited) data that we have access to without requiring too much explanation. It needs to be super-simple.
Comments welcome. I can also supply the inkscape file if anyone wants it.
Hope this helps.

Very cool, thanks a lot! I will post feedback tomorrow in the evening when I have a bit more time.
Here goes. I'll add one comment per screen.
I'll start with the Step Goal screen. I like it very much. Only missing is different time scales (weekly, monthly, ...). I'm not sure on which level this should happen. Separately for every chart? Or allowing this for all charts where it makes sense and keeping the level when switching to another chart?
Live Heart Rate, I also like a lot. At the moment we do not store live steps or heart rate data, so they are lost when you close the screen. I want to persist these values though, so that they can be later retrieved. So we need some means to display and select historical values, especially since they are not continuous like activity data.
We also have the "sleep assist" heart rate values that we could display.
And I want to add a way to perform repeated measurements, like once a minute over the entire day, so we would need a way to display these as well.
Now to the Overview screen. I would love to have an overview displaying an overview of the day/week/month/year with interesting values like average sleep/day, min and max values, etc. For a single day overview, I'd love to see
Interesting idea to use a circle. It reminded me of a clock, but it's a little different because it displays 24h instead of 12h. Would it make sense to make a rectangle out of it? The elements would be much smaller of course.
And the Sidebar screen.
An option to disable keeping the screen on for live activity/hr measurements probably makes sense. The option only makes sense for the "live" screens though, not for the others, IMHO. So maybe we should show that with the naming "Keep display on live screens on". Hmm, pretty long.
I'm not sure if we should mix settings and page switchers in the same sidebar. Maybe the Android Design Guidelines have an opinion on that. If one should not mix these, we could use tabs to switch screens. That's a minor thing, though.
All in all, I like the ideas! :+1: One thing I'm missing is: is this supposed to replace the current "Control Center" which lists all devices or is this just replacing the charts?
I think we very much need a replacement for our main UI as well (with its horrible long-press menu, the action bar menu and the double meaning of tapping).
Step Goal screen. I like it very much. Only missing is different time scales (weekly, monthly, ...)
Would you have a separate goal for each time-scale? If you wanted to go down this route, you could multiply up the daily step count, or ask the user to set a step count for each of these time-scales.
Live Heart Rate.... I want to persist these values
The reason I didn't include this functionality is that the phone has to be awake to ask the miband to take a HR reading, and this would drain battery. Perhaps the user could start/stop a "workout" which drains battery only during this period.
You would also have to think about how to display such data.
Interesting idea to use a circle
I borrowed it from the LG health app, screenshot above. I also tinkered with the idea of two 12 hour circles, one nested in the other, but dismissed this as "probably annoying to implement" (tm).
Would it make sense to make a rectangle out of it?
Maybe, yes. We could then allow the user to scroll and zoom it to select a time scale(?) You could then show the stats you suggested for the visible period in the bar. This also solves a gripe I have with the circle: sleep is likely to overflow from one day to the next. The linear nature of the bar captures this.
Sidebar... Hmm, pretty long.
Move the screen awake toggle to to title bar on only screens for which it makes sense. This means we don;t mix settings and pages in the list too.
is this supposed to replace the current "Control Center"
I think so. I guess all of that should move to settings.
A final note: We have a lot of ideas here. We should be careful not to make something too complicated. For reference, look at the "mi band notify and fitness" app in the play store. I installed this and was overwhelmed by the clutter of the UI. Let's make sure we don't end up there too.
I wonder if we can roll these changes out incrementally, as we have a lot of work cut out here. Do we have someone who is capable and willing to build such a UI? Ideally an experienced android developer. Not I sadly.
I'm uploading my inkscape file, so you/others can tweak it. Note that to edit the screens you will have to ungroup objects (sometimes I have nested grouping). Also, if you do edit this, save regularly. Inkscape is a crash factory. It segs if you merely look at it funny.
http://theunixzoo.co.uk/random/UI.svg
Thanks
Would you have a separate goal for each time-scale? If you wanted to go down this route, you could multiply up the daily step count, or ask the user to set a step count for each of these time-scales.
Good question! At least a weekly step goal would be worthwhile, maybe that makes even more sense than a daily goal; not for all, but to a lot of people. The values for the other scales could be extrapolated.
The reason I didn't include this functionality is that the phone has to be awake to ask the miband to take a HR reading, and this would drain battery. Perhaps the user could start/stop a "workout" which drains battery only during this period.
Yes, that's right, but I don't think it's going to be very battery intensive on the phone. It depends on the interval, of course, but taking one measurement per minute for example shouldn't be much of a problem for the phone, I'm fairly sure. It can be done without waking the display, so it's justs some background work.
You would also have to think about how to display such data.
A bar chart for correctness, optionally an interpolated line chart to make it look nicer.
Interesting idea to use a circle
I borrowed it from the LG health app, screenshot above. I also tinkered with the idea of two 12 hour circles, one nested in the other, but dismissed this as "probably annoying to implement" (tm).
You mean like a spiral? Yes, that would make it a tad more complex ;-)
Would it make sense to make a rectangle out of it?
Maybe, yes. We could then allow the user to scroll and zoom it to select a time scale(?) You could then show the stats you suggested for the visible period in the bar. This also solves a gripe I have with the circle: sleep is likely to overflow from one day to the next. The linear nature of the bar captures this.
I'm not sure we need to zoom into the bar. If it's too small, one can turn the mobile into landscape mode.
Move the screen awake toggle to to title bar on only screens for which it makes sense. This means we don;t mix settings and pages in the list too.
Yes!
is this supposed to replace the current "Control Center"
I think so. I guess all of that should move to settings.
Some things like alarms, looking up a lost device should still be available outside the settings.
A final note: We have a lot of ideas here. We should be careful not to make something too complicated. For reference, look at the "mi band notify and fitness" app in the play store. I installed this and was overwhelmed by the clutter of the UI. Let's make sure we don't end up there too.
Totally agree :-)
I wonder if we can roll these changes out incrementally, as we have a lot of work cut out here. Do we have someone who is capable and willing to build such a UI? Ideally an experienced android developer. Not I sadly.
We're all rookie Android developers, but we learn as we go. It'll take some time, as there are also other tasks that need to be done before (like db refactoring, bug reports, support for new devices, ...). But we'll get there, I'm sure.
I'm uploading my inkscape file, so you/others can tweak it. Note that to edit the screens you will have to ungroup objects (sometimes I have nested grouping). Also, if you do edit this, save regularly. Inkscape is a crash factory. It segs if you merely look at it funny.
Alright, thanks a bunch!
Rearranging a new UI I think that should be removed the settings for the non paired devices, for example in my case I paired with GadgetBridge a Pebble Watch so I should not see the config menu for the Mi Band.
Finally how will be the new UI
Just a little thing that it's implicitly been mentioned but I feel it's worth saying explicitly: as it stands there's no clear information on when you fell asleep and when you woke up. It's not shown in the sleep tab, and the general graph only indicates what seem to be random times across the day. It would be really nice to have the sleep start and endpoint being better highlighted.
A couple of suggestions for a UI cleanup and some other ideas.
I like Vext01's Overview 24 hour dial.
I note he's already addressed one thing on there that makes sense. Deep sleep is in Deep blue and Light sleep is in Light blue, currently the Your Sleep view is opposite in colour choice, Deep sleep is Light blue, which I found a bit counter intuitive...
Again on the Your Sleep page. The word Sleep is used 7 times on the Sleep page. More than once is a bit redundant. After the title 'Your Sleep' can the references be shortened to just Light and Deep, and use the extra recovered space to increase the Font size on the sleep pie chart.
Also in general increasing the Font size for step count in the Steps a week view on the pie chart would be good too. As it stands I have trouble reading the small fonts (on a 5" screen phone).
I like the Live Heart Rate view mockup from vext01 also. To that I'd suggest adding a cumulative step count as a numeric value, perhaps as a large grey transparency behind the heart rate graph.
Yep, having a 'live session' view with HR is something any sports person would love for training periods. Even if the phone stays active, the battery use is worth it.
About the heart rate data. During sleep I get readings of 180+ for one sample a few times each night. I am fairly sure this is just a bad HR sample (or I'd need an ambulance sent out regularly).
Can the app filter out these outlier values, discard a reading that is 300% higher than the previous perhaps ?
Again on the HR data, I have found myself scrolling through the past nights data to get an idea of my average sleeping HR. Can the app do this for me on the sleep view, a numeric value for average HR during sleep over the viewed sleep period ?
The current start page could also need a minor tweak, which shouldn't be too complicated to realize: it's not that intuitive (to new users) that for most stuff one needs a devices context menu (long-press):
As cases where users have enough gadgets in use to fill the entire page are most likely pretty rare, why not add a single line of icons below the "icon + device + 'connected'" block?
๐ ๐ ๐ท โง ๐ฆ
(reflecting the contents of the context menu and the on-click activity:
๐ Your Activity
๐ Find lost Device (magnifier or spy glass would be better, but I couldn't find a symbol for that)
๐ท Take Screenshot
โง Disconnect
๐ฆ Apps (again, I didn't find a fitting symbol on my keyboard)
). Not only would that be more intuitive โ it would also save a long-tap to open the context menu :)
To make it easier to learn the symbols, the current context menu could be kept and the symbols added to the corresponding text. For those users with too many devices to fit with that additional line (really? are there any?), there could be an option to hide the line and open it when the โ button is pressed.
If someone is running self-compiled gadgetbridge, you can switch to the new_GUI branch to check a redesigned control center (graphs are left untouched ATM). Mind that you will have two launcher icons, one for the old and one for the new activity and that the new one is work-in-progress. Anyway feedback is appreciated. I can't post screenshots ATM since I'm on mobile.
Hi,
I saw this issue and I suggest just four little ideas for the graphs.
First, the time axis on top is a bad idea, that's rare that data comes that high.
Second, a light grid to follow scale.
Third, put units on graphs.
Four, delete vertical zoom and scroll, it's useless. Only the horizontal one is usefull.
Hi,
When reading though this I have to give my bits as well, especially referencing the post of @vext01 from 22 May 2016:
I really like the idea to represent the day as a 24h circle. But activity data is a level of activity and not just the steps. In my case, using a Mi Band 2, activity is also created when typing this text for example, as both number of and intensity of vibrations/movements are measured by the acceleration sensors. How exactly this is transformed to an activity level is probably the secret of Xiaomi.
So I would suggest to translate the activity in shades of a color. As blue is THE color that is perceived by most people as homogeneous shades (not as red that is seen as pink in light shades or brown on dark ones), I would recommend to use blue for shading activity.
In total this could be categorized in like 8 shades of blue: #CDD9E9, B0BFDB, 92A5CC, 758BBE, 5871B0, 3B57A2, 1D3D93, 002385
(or find your own scale at e.g. http://www.workwithcolor.com/mm-color-blender-01.htm)
A light grey is perfect for inactivity. (#F7F7F7)
Red would be the perfect color for heart rate. Three shades could be used e.g. for
But I don't think, that we can mix activity and heart rate in a circle. That's a real advantage of the histogram used today, that these values can be mixed and matched.
For sleep I can see just the values light and deep sleep. I agree that deep sleep should be represented by the darker color. As blue would be used for activity, green would be a good option I guess:
Not mixing red and green in one diagram has the advantage that people with the relatively common red/green color blindness could still distinguish the data.
I did take a look at http://datavizcatalogue.com to see if there are any other methods to visualize the collected activity/sleep/heart rate data, but I did not come up with something new and fancy.
I also like the idea of @IzzySoft with more details being show on the start page and the weekly step goal.
One of my major issues in build 0.17.5 is switching the pages. I cannot do it on the lower part of the screen for all pages. On live activity this is working in the upper part only. This kind of inconsistency bothers me most.
I don't know the status of redesign taken in v 0.18 so far. The discussions were not so active lately. But I would be happy to help improving the GUI, e.g. in layout decisions for the different screens, helping to decide on proper placements or coloring - and adjusting the user documentation accordingly. Just let me know what is needed.
Hi there,
I've been reading through the redesign topic and I was wondering if someone is already working actively on it. I'm pretty much a newbie when it comes to Android programming, but I know a bit of HTML and CSS. If no one is already going it, I would be willing to make the proposed designs happen :)
Cheers
Unfortunately none of us had the time to actually implement these great proposals. We're a bit overloaded with work, so any help is very welcome!
Then i will proceed to compile all suggestions from this thread + mock ups and start implementing it :)
If you have alternative proposals / ideas for the main activity where the devices are shown do not hesitate to let us know! We just changed its aspect and there is still room for improvements.
Sure I will! I've been brainstorming on the side, I hope to find some time to put it all together in a diagram and see what you think about it, before starting tinkering with the xml files.
BTW: Are they plans to provide kcal spent (for instance, for mi band)? If one could get the HR in a continuous fashion (even if it's for short periods of time AKA workouts), kcal would be a better measure of exercise. That would require some info input from the user (height, age, weight) and so on.
@mrdrgz HPlus devices already provide Calorie information.
@jpbarraca oh, OK. So it might be a mi band specific requirement for the future. Is there any source for the info provided by different devices? It would help me clarify what does each one need in terms of UI
While not necessarily related, I wanted to share that I'm spreading a bit of material design on different layouts, in case you can compile from source, please try the latest master. I am not touching the graphs directly, but I changed the tab appearance for instance.
Perhaps we could rename the issue to mention the graphs, if you're concentrating your efforts to this aspect.
I updated just now to the latest version of Gadgetbridge, really digging the battery status and everything.
1) Though what do you think about removing the three-dot overflow menu from device card, adding an "๐" icon to replace it?
2) Disconnect and connect should also be a button to stay consistent, (long) press to do anything else rather than open a menu or expand a card is rather unintuitive. What do you think?
3) Battery icon should maybe open a battery graph as it currently leaves the impression of being a button?
I wrote a companion app to create nice visualizations of my mi Band data.
It copies the Gadgetbridge database and makes some charts with the ECharts plotting library




The code and an .apk is available here on Github, but it is still an alpha-version:
https://github.com/tomthe/gadgetStats
As of now, it only works with data from the table MI_BAND_ACTIVITY_SAMPLE
I plan to add some more chart types in the next days/weeks - maybe it's a good and fast to develop testbed to see which visualizations would be nice to have in Gadgetbridge.
Wow, very nice! :+1: We certainly need some help in the UI department :-]
No more talk on GUI design and update ? Being a previous fitbit (years ago) and Withings user for last 5 years, I would be happy to give feedback, suggestions or help as I can on that ! I'm a programmer but not on computer things (embedded devices) neither on android but always willing to learn and help ;)
Side note: completed the french translations that was missing few strings !
You can always think of something better, for example: https://github.com/Freeyourgadget/Gadgetbridge/issues/1242
I think that you need to remove the activity graph from the sleep schedule, because he is not needed there.
Let me just say that this app's ui is what I feel like would be best plus it's floss & can thus be used as a base for refactoring the UI for use in gadgetbridge. It is the idealized UI for a slick app.
https://github.com/SecUSo/privacy-friendly-pedometer
And here is the charting library they're using
https://github.com/PhilJay/MPAndroidChart
Edit: you are already using that library
To further the discussion, here are some slides from a New York Times science and health Graphics Designer on suggestions to improve Apple Health, which could also apply to Gadgetbridge
Most helpful comment
Just a little thing that it's implicitly been mentioned but I feel it's worth saying explicitly: as it stands there's no clear information on when you fell asleep and when you woke up. It's not shown in the sleep tab, and the general graph only indicates what seem to be random times across the day. It would be really nice to have the sleep start and endpoint being better highlighted.