Drone Settings rework

[jason4short]

A lot of functionality has been added to the drone settings section and I wanted to clean this up layout-wise to make it more consistent and compliant.

A key aspect of the new design is the ability to watch a video while moving through IMU and compass – both complex and physical actions that are better viewed than read.

Navigation has been moved to a tab system rather than the pull-downs which aren't working or discoverable in my opinion.

I don't think there are any new assets, but please request any

Radio:

Flight modes:

Channel options:

Servo:

IMU:

Compass:

Failsafes:

Checklist:

Tuning:

[jason4short]

The videos can live on youtube for now. We will produce professional versions, but may have low budg ones in the meantime.

[m4gr3d]

@jason4short I think having two tab systems right on top of each other is bad because, both on phone and tablet, it will eat significantly into the screen space.
It will also confuse the user. Right now, the user can swipe to move from one tab to the other. With the two tab systems, a swipe will have different result based on which 'outer' tab the user is currently in.

If we're planning to use tab instead of pull downs for these screens, I think we should remove the 'outer' tab system, and replace it with a navigation drawer (https://developer.android.com/design/patterns/navigation-drawer.html).
The first time the 'Drone Setup' section is accessed, the navigation drawer will automatically show to let the user know how to use it.
It will improve navigation throughout the app as it allows the user to see at a glance all the app sections, and access them directly.

Additional advantage is that the layout will adapt nicely to phone as well.

[arthurbenemann]

Heaving the videos embedded on the drone setup shouldn't be too hard,
because its an standard feature of Android. I assume you want to fetch them
from the network, correct? Because storing them would take too much space
and harden the system for changes.

About the drop-downs, I agree they are not optimal but two layers of tabs
don't take too much space? Maybe nesting the sub setups in a new screen
under drone setup? ( does that makes sense?) With two tabs sure it would
work for tables, but since we want to support phones as well we have to
consider the burden of needing a different layout then.
On Feb 5, 2014 7:58 PM, "jason4short" [email protected] wrote:

A lot of functionality has been added to the drone settings section and I
wanted to clean this up layout-wise to make it more consistent and
compliant.

A key aspect of the new design is the ability to watch a video while
moving through IMU and compass - both complex and physical actions that are
better viewed than read.

Navigation has been moved to a tab system rather than the pull-downs which
aren't working or discoverable in my opinion.

I don't think there are any new assets, but please request any

Radio:
[image: settings rework-01]https://f.cloud.github.com/assets/3344856/2089593/3b8d102a-8e89-11e3-9607-b01909bd9301.png

[image: settings rework-02]https://f.cloud.github.com/assets/3344856/2089595/44f3983c-8e89-11e3-8f85-8f99e31039a3.png

[image: settings rework-03]https://f.cloud.github.com/assets/3344856/2089596/47a9aa26-8e89-11e3-9f20-59a122402605.png

[image: settings rework-04]https://f.cloud.github.com/assets/3344856/2089598/4dab1216-8e89-11e3-9648-2ae4c030d2d0.png

Flight modes:
[image: settings rework-05]https://f.cloud.github.com/assets/3344856/2089601/60851b34-8e89-11e3-9127-57e6cb583c99.png

Channel options:
[image: settings rework-06]https://f.cloud.github.com/assets/3344856/2089807/d04f758e-8e8b-11e3-9ecf-52ea38cdc7be.png

Servo:
[image: settings rework-11]https://f.cloud.github.com/assets/3344856/2089619/7bd10e0c-8e89-11e3-83bb-aec426302d08.png

IMU:
[image: settings rework-07]https://f.cloud.github.com/assets/3344856/2089628/93ab16bc-8e89-11e3-9af4-682ec6405f5e.png
[image: settings rework-08]https://f.cloud.github.com/assets/3344856/2089629/93ac2d36-8e89-11e3-9752-e33946826085.png
[image: settings rework-09]https://f.cloud.github.com/assets/3344856/2089626/93a4438c-8e89-11e3-84ec-4b0c54dad61a.png
[image: settings rework-10]https://f.cloud.github.com/assets/3344856/2089627/93a51730-8e89-11e3-88c7-f43418ef1f2d.png

Compass:
[image: settings rework-13]https://f.cloud.github.com/assets/3344856/2089633/b290105a-8e89-11e3-9da8-26b3132989af.png
[image: settings rework-14]https://f.cloud.github.com/assets/3344856/2089634/b2910d98-8e89-11e3-80ed-5c92d3365734.png
[image: settings rework-15]https://f.cloud.github.com/assets/3344856/2089635/b2941ad8-8e89-11e3-86aa-85ee4ba59bef.png

Failsafes:
[image: settings rework-19]https://f.cloud.github.com/assets/3344856/2089639/bec527ac-8e89-11e3-8c38-6d8deb2908df.png

Checklist:
[image: settings rework-25]https://f.cloud.github.com/assets/3344856/2089642/d34c1b5e-8e89-11e3-881c-d39d05924d64.png

Tuning:
[image: settings rework-22]https://f.cloud.github.com/assets/3344856/2092798/4253d1ba-8eb0-11e3-9e83-f7a24efbec6f.png
[image: settings rework-23]https://f.cloud.github.com/assets/3344856/2092799/4253ecfe-8eb0-11e3-834b-738ae219e944.png
[image: settings rework-24]https://f.cloud.github.com/assets/3344856/2092800/4254aa5e-8eb0-11e3-9eff-fcb0750c5459.png
[image: settings rework-20]https://f.cloud.github.com/assets/3344856/2092809/512e898c-8eb0-11e3-8729-3a69a1e5c853.png
[image: settings rework-21]https://f.cloud.github.com/assets/3344856/2092802/4755f076-8eb0-11e3-9056-9cf4546296e0.png

Reply to this email directly or view it on GitHubhttps://github.com//issues/626
.

[azrin1972]

Ok Jason, If we agree all agree on this, I will start reworking on them next week. I’m taking these few weeks off for other commitments.
Currently, I have the failsafe settings in progress. if you have any suggestion for the layout, I can straight away implement them.

On Feb 6, 2014, at 6:33 AM, Arthur Benemann [email protected] wrote:

Heaving the videos embedded on the drone setup shouldn't be too hard,
because its an standard feature of Android. I assume you want to fetch them
from the network, correct? Because storing them would take too much space
and harden the system for changes.

About the drop-downs, I agree they are not optimal but two layers of tabs
don't take too much space? Maybe nesting the sub setups in a new screen
under drone setup? ( does that makes sense?) With two tabs sure it would
work for tables, but since we want to support phones as well we have to
consider the burden of needing a different layout then.
On Feb 5, 2014 7:58 PM, "jason4short" [email protected] wrote:

A lot of functionality has been added to the drone settings section and I
wanted to clean this up layout-wise to make it more consistent and
compliant.

A key aspect of the new design is the ability to watch a video while
moving through IMU and compass - both complex and physical actions that are
better viewed than read.

Navigation has been moved to a tab system rather than the pull-downs which
aren't working or discoverable in my opinion.

I don't think there are any new assets, but please request any

Radio:
[image: settings rework-01]https://f.cloud.github.com/assets/3344856/2089593/3b8d102a-8e89-11e3-9607-b01909bd9301.png

[image: settings rework-02]https://f.cloud.github.com/assets/3344856/2089595/44f3983c-8e89-11e3-8f85-8f99e31039a3.png

[image: settings rework-03]https://f.cloud.github.com/assets/3344856/2089596/47a9aa26-8e89-11e3-9f20-59a122402605.png

[image: settings rework-04]https://f.cloud.github.com/assets/3344856/2089598/4dab1216-8e89-11e3-9648-2ae4c030d2d0.png

Flight modes:
[image: settings rework-05]https://f.cloud.github.com/assets/3344856/2089601/60851b34-8e89-11e3-9127-57e6cb583c99.png

Channel options:
[image: settings rework-06]https://f.cloud.github.com/assets/3344856/2089807/d04f758e-8e8b-11e3-9ecf-52ea38cdc7be.png

Servo:
[image: settings rework-11]https://f.cloud.github.com/assets/3344856/2089619/7bd10e0c-8e89-11e3-83bb-aec426302d08.png

IMU:
[image: settings rework-07]https://f.cloud.github.com/assets/3344856/2089628/93ab16bc-8e89-11e3-9af4-682ec6405f5e.png
[image: settings rework-08]https://f.cloud.github.com/assets/3344856/2089629/93ac2d36-8e89-11e3-9752-e33946826085.png
[image: settings rework-09]https://f.cloud.github.com/assets/3344856/2089626/93a4438c-8e89-11e3-84ec-4b0c54dad61a.png
[image: settings rework-10]https://f.cloud.github.com/assets/3344856/2089627/93a51730-8e89-11e3-88c7-f43418ef1f2d.png

Compass:
[image: settings rework-13]https://f.cloud.github.com/assets/3344856/2089633/b290105a-8e89-11e3-9da8-26b3132989af.png
[image: settings rework-14]https://f.cloud.github.com/assets/3344856/2089634/b2910d98-8e89-11e3-80ed-5c92d3365734.png
[image: settings rework-15]https://f.cloud.github.com/assets/3344856/2089635/b2941ad8-8e89-11e3-86aa-85ee4ba59bef.png

Failsafes:
[image: settings rework-19]https://f.cloud.github.com/assets/3344856/2089639/bec527ac-8e89-11e3-8c38-6d8deb2908df.png

Checklist:
[image: settings rework-25]https://f.cloud.github.com/assets/3344856/2089642/d34c1b5e-8e89-11e3-881c-d39d05924d64.png

Tuning:
[image: settings rework-22]https://f.cloud.github.com/assets/3344856/2092798/4253d1ba-8eb0-11e3-9e83-f7a24efbec6f.png
[image: settings rework-23]https://f.cloud.github.com/assets/3344856/2092799/4253ecfe-8eb0-11e3-834b-738ae219e944.png
[image: settings rework-24]https://f.cloud.github.com/assets/3344856/2092800/4254aa5e-8eb0-11e3-9eff-fcb0750c5459.png
[image: settings rework-20]https://f.cloud.github.com/assets/3344856/2092809/512e898c-8eb0-11e3-8729-3a69a1e5c853.png
[image: settings rework-21]https://f.cloud.github.com/assets/3344856/2092802/4755f076-8eb0-11e3-9056-9cf4546296e0.png

Reply to this email directly or view it on GitHubhttps://github.com//issues/626
.

—
Reply to this email directly or view it on GitHub.

[jason4short]

I'd be open to the drawer idea. I chose the tab system because I wanted all the options to be clearly laid out for the user. The pulldown was in an odd place and hid the options from view.
I laid everything out to make sure we didn't have unnecessary titles eating into our vertical space.
I also wanted to simplify the right info/guide panel so it only had a contextual title, info and actions.
The tuning screen violates this a little by putting GUI elements in the right side. If that could be avoided I would be interested in trying something else like moving them to the main area and toggling the graph.
Hopefully this unifies all the layouts and we can extend it as needed.
Thanks for you help!
Jason

[azrin1972]

Since we already use pageviewer for the first level, we might need to disable swipe capability on the second layer pageviewer.
Anyhow, I don’t think it would take a lot of changes - maybe the base classes need to be reworked a little bit, it will be mostly on the layout part (I’m just guessing).

On Feb 6, 2014, at 12:24 PM, jason4short [email protected] wrote:

I'd be open to the drawer idea. I chose the tab system because I wanted all the options to be clearly laid out for the user. The pulldown was in an odd place and hid the options from view.
I laid everything out to make sure we didn't have unnecessary titles eating into our vertical space.
I also wanted to simplify the right info/guide panel so it only had a contextual title, info and actions.
The tuning screen violates this a little by putting GUI elements in the right side. If that could be avoided I would be interested in trying something else like moving them to the main area and toggling the graph.
Hopefully this unifies all the layouts and we can extend it as needed.
Thanks for you help!
Jason

—
Reply to this email directly or view it on GitHub.

[m4gr3d]

@azrin1972 this is one of the issue I was alluding to. With the current android design guideline, almost every android user expects a view with tabs to have swipe capabilities, so I'd argue against disabling it for the 'outer' layer.
However, this is what the 'navigation drawer' (https://developer.android.com/design/patterns/navigation-drawer.html) is supposed to solve: allowing the user to easily visualize, and navigate through multiple layers. Hence, why I suggested reworking the proposed design to include 'navigation drawer'.

Additionally, this current design will not work on phone and small screen devices, requiring us to develop another layout, and possible set of logic to support them.
That being said, due to their different form factor, tablets and phones might often require different layouts and logic. But in this case, I think one layout making use of 'navigation drawer' should accommodate both.

[jason4short]

I would love to see a drawer implementation. it's a good alternative. Just want to make sure we're still intuitive and functions are easy to discover.

Would be cool to see the flight checklist include some of these setups as checkboxes. So you can see what steps you need to complete for your vehicle. They can be checked off as you do them.
Jason

[azrin1972]

Jason,

The checklist is on my to do list. My plan is to have it customisable by users to suite their need.

On Feb 7, 2014, at 8:25 AM, jason4short [email protected] wrote:

I would love to see a drawer implementation. it's a good alternative. Just want to make sure we're still intuitive and functions are easy to discover.

Would be cool to see the flight checklist include some of these setups as checkboxes. So you can see what steps you need to complete for your vehicle. They can be checked off as you do them.
Jason

—
Reply to this email directly or view it on GitHub.

[m4gr3d]

@jason4short I will create a branch that make use of the navigation drawer throughout the app so you can see if it would fit our purposes.

[arthurbenemann]

@jason4short I think the navigation will work well, the google guys spent a lot of time on UX design. And it even makes it similar to MP in some aspects.

@ne0fhyk I'll wait for your branch.

[azrin1972]

Yes, Once the new UI is done, I can start porting all the settings fragments to it.

Azrin Aris

On 12/02/2014, at 2:51, Arthur Benemann [email protected] wrote:

@jason4short I think the navigation will work well, the google guys spent a lot of time on UX design. And it even makes it similar to MP in some aspects.

@ne0fhyk I'll wait for your branch.

—
Reply to this email directly or view it on GitHub.

[arthurbenemann]

I'm closing this issue since we are not going to do the RC calibrations screens, and the magnetometer screen has changed a lot since this issue was created.