Initial thoughts on the UI design

[moorepants]

@sandertyu You probably have some or all of these already in your head, but here are my initial thoughts:

• [x] Each parameter needs units beside the name, like Radius [m]
• [x] Each parameter value should display a reasonable number of significant figures. We need to decide on them, but distances probably only down to mm masses maybe 1/10 kg, etc.
• [x] The width of the parameter table should have a fixed width that leaves minimal horizontal space in the cells.
• [x] The table should be left-right centered.
• [x] The figures should be left-right centered.
• [x] We should choose a color scheme with 3 or 4 colors and stick to that for all elements. You can use sites like: https://mycolor.space/
• [x] I don't see any need for the dark/light mode once we pick a color scheme.
• [x] The bicycle selection box needs a title like "Select a bicycle:" above the box.
• [x] Bicycle selection box should have a fixed with.
• [x] Make the bicycle geometry plot on the left and eigenvalues on the right. (we could also think about addind the bode plot too)
• [x] It seems to work fine for mobile sized screens now, which is good.
• [x] Steer axis tilt should be entered in degrees instead of radians.
• [x] We need a better name for the app. Some ideas:
  • Bicycle Dynamics Analysis App
  • Linearized Bicycle Dynamics
  • Bicycle Parameter App
  • Bicycle Dynamics Design App
  • JBike7 (would have to ask Andrew)

[sandertyu]

Okay, all of this is possible. I have a few questions though.

1. What do you mean by "left-right centered", with regards to the figures and table? Do you mean within the context of the entire page?

2. I can swap the order of the eigen and geometry plots back to how they were. I switched them because I've locally been working on a CSS layout which has the table on the left hand side, and the plots one on top of the other on the right hand side. If you would prefer that it just work vertically from figures to table rather than being in separate columns, I can revert to that.

3. The application does not work properly for me at all. I have my master branch exactly up to date with yours, and yet when I run it (via the py -m bicycleparameters.cycle_app method that we have discussed), the plots are simply all wrong. I went into this more in detail in my replies to your email regarding my 4/16 AIO. This wouldn't be an issue per se, because it works so well on the online website, but I simply cannot debug with it working like this. I have attached a couple images of what this looks like for me.

[moorepants]

Do you mean within the context of the entire page?

Yes, on a wide screen they hug the left side of the page.

I switched them because I've locally been working on a CSS layout which has the table on the left hand side, and the plots one on top of the other on the right hand side.

That sounds good. The best way to go about this is to make some sketches or mockups of what you want the layout to look like. Then we can give feedback based on that before you spend a lot of time coding it. There are even fancy ways to do this, e.g. https://moqups.com/, but a sketch with pencil on paper is sufficient.

The application does not work properly for me at all.

Weird. You should clone the repository in a separate directory and see if you can run it from there. If you can, that means that something is buggered in you main directory you've been working on.

[moorepants]

The background didn't load one time for me and I got this:

I think it looks better with solid background. The halloween color theme can look really good with a black background. I actually may delete the image background in skijumpdesign eventually. It's hard to get it working good in terms of font colors and provide a good visual aesthetic.

[AndrewDressel]

Looks fantastic!

• [x] Please label axes on the bike schematic diagram.
• [ ] Are you planning to indicate size and orientation of principal moments of inertia on the bike schematic diagram?
• [x] I don't know what "contextual parameters" means, but perhaps user might prefer wheel base, trail, and head angle at the top.
• [ ] Are you considering a way for users to enter front assembly inertia components relative to steering axis?
• [x] The first time I selected a new bike, it took a while to draw the new graphs, and I didn't know if I needed to click on some additional control. Consider displaying some kind of indication that work is in progress.
• [ ] It is cool that you label the modes. I'd love to know how you distinguish between the raw eigenvalues. I'm not sure it is working perfectly. It seems with my color scheme that one of the real weave lines is sometimes mistaken for capsize with the benchmark bicycle.
• [x] Could you display grid lines, perhaps optionally?
• [ ] Could you provide a way to download the calculated eigenvalues?
• [ ] Do you plan to provide some way for users to save, import, or export their own named bikes?
• [ ] I'd be fine with JBike7, but it would be a courtesy to check with Jim, Andy, and Arend.
• [x] You probably don't need the second line of the eigenvalue plot title.
• [x] It would be best if you spell eigenvalue consistently. I'd go without the hyphen.
• [ ] Would it be possible to leave items off the legend that do not appear on the graph, such as imaginary capsize and imaginary caster?
• [ ] Will you implement some kind of "About" or "Help" functionality in the UI? For example, How it steer axis tilt measured? It certainly is discoverable, especially if you switch to degrees, but some users, especially the old ones, might prefer just to read it explicitly.
• [ ] Why does the schematic diagram of the benchmark bike show so white space behind the rear wheel?
• [ ] I know why you label the bodies R, B, H, and F, but it might not be clear to the uninitiated, especially because the "R" looks like a "B" when it intersects the rear frame. Perhaps you could move the "R" beind the rear axle.
• [ ] The schematic of some bikes include an ellipse around the "H" center of mass. What does it indicate?
• [x] With my computer in "night mode" I cannot see the numbers in some text boxes once I select it. Perhaps they are different colors in the light of day.
• [ ] it doesn't seem possible for me to edit the existing number, to tweek a just a digit intead of replacing the entire number
• [ ] It seems that I can click on and edit the row labels, such as "mass", and "radius", but I suspect that the program does not read these changes. I cannot edit the column labels. I suppose that's enough whining for now. Keep up the good work!

[moorepants]

Thank @AndrewDressel ! I'll comment on a few of them.

Are you planning to indicate size and orientation of principal moments of inertia on the bike schematic diagram?

There is a light colored inertia ellipse for each body, but we can eventually swap to these:

Are you considering a way for users to enter front assembly inertia components relative to steering axis?

We can do this. Maybe a check box would swap the table entries for inertia aligned with steer axis.

The first time I selected a new bike, it took a while to draw the new graphs, and I didn't know if I needed to click on some additional control. Consider displaying some kind of indication that work is in progress.

@sandertyu dash has a feature to change the mouse curse to a waiting icon or you can grey the screen while it calculates.

These things can be sped up too. Right now things aren't optimized in any way.

It seems with my color scheme that one of the real weave lines is sometimes mistaken for capsize with the benchmark bicycle.

The algorithm isn't full proof. I could do some work to improve. I wrote that a decade ago now!

Do you plan to provide some way for users to save, import, or export their own named bikes?

Yes, that is definitely something we want to support.

Will you implement some kind of "About" or "Help" functionality in the UI?

Yes, I think this might be the next major task.

The schematic of some bikes include an ellipse around the "H" center of mass. What does it indicate?

That's the inertia ellipse.

All other feedback is very helpful. We'll get them taken care of as we iterate.

[moorepants]

Oh yeah, on the name JBike7. Do you want it named that? If so, I can ping Andy and others.

[moorepants]

Is JBike Jim-Bike?

[AndrewDressel]

That is my understanding, yes.

Andrew Dressel, PhD Depts of Civil & Mech Eng University of Wisconsin-Milwaukee

---

From: Jason K. Moore notifications@github.com Sent: Tuesday, April 21, 2020 9:33:19 AM To: moorepants/BicycleParameters BicycleParameters@noreply.github.com Cc: AndrewDressel AndrewDressel@hotmail.com; Mention mention@noreply.github.com Subject: Re: [moorepants/BicycleParameters] Initial thoughts on the UI design (#39)

Is JBike Jim-Bike?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmoorepants%2FBicycleParameters%2Fissues%2F39%23issuecomment-617218295&data=02%7C01%7C%7C97761032f8654601d41108d7e600f073%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637230764006796780&sdata=ius8EWB8n6d%2BMZSxIrDaXe%2F%2FPmaZldgqQ4Q%2Bi2nyFr4%3D&reserved=0, or unsubscribehttps://nam11.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAPIZNOQM6ZJ77KFZGPNCJVLRNWVC7ANCNFSM4MKZ7SFA&data=02%7C01%7C%7C97761032f8654601d41108d7e600f073%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637230764006806774&sdata=Xb0bQU3s70VLA4iXBclQ9TCAw%2BTatv9aG5lUW80EGLI%3D&reserved=0.

[AndrewDressel]

That would be the next version in the series, yes, and sure, please also check with the others.

Andrew Dressel, PhD Depts of Civil & Mech Eng University of Wisconsin-Milwaukee

---

From: Jason K. Moore notifications@github.com Sent: Tuesday, April 21, 2020 9:32:57 AM To: moorepants/BicycleParameters BicycleParameters@noreply.github.com Cc: AndrewDressel AndrewDressel@hotmail.com; Mention mention@noreply.github.com Subject: Re: [moorepants/BicycleParameters] Initial thoughts on the UI design (#39)

Oh yeah, on the name JBike7. Do you want it named that? If so, I can ping Andy and others.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHubhttps://nam03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fmoorepants%2FBicycleParameters%2Fissues%2F39%23issuecomment-617218043&data=02%7C01%7C%7C476a6ec58a6c4f799f3508d7e600e2d9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637230763779614855&sdata=y7Z0S4xjn5vmW4mnoTFIAZSkOIuqkVSUaqEFqGKVA2g%3D&reserved=0, or unsubscribehttps://nam03.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAPIZNOTEDVX7O7ZUGWJ5OE3RNWVBTANCNFSM4MKZ7SFA&data=02%7C01%7C%7C476a6ec58a6c4f799f3508d7e600e2d9%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637230763779624863&sdata=rhAHZz0fSbgS6ymna5WplGf78lWPuULKzBFmK15VjAE%3D&reserved=0.

[moorepants]

We've resolved a fair number of these. See the current app version at:

https://bicycleparameters.herokuapp.com/

I've opened new separate issues for remaining things to fix and improve. Closing this.