search

lvgl / lv_apps

Ready to use UIs and high level components for applications
MIT License
11 stars 12 forks source link

[request] "Settings menu" demo #1

Closed puzrin closed 5 years ago

puzrin commented 5 years ago

A lot of small embedded devices have interface like this:

  1. Main screen
  2. Settings menu with tons of params (mostly numeric, sometime text)

IMHO it would save a lot of time, if everyone could take ready example, and copy-paste code with controls of required type.

What is expected from menu:

kisvegabor commented 5 years ago

Awesome idea! it"s really something which would useful fora lot of people!

It turned out that you have designer skills. Can you create a layout design?

Finally, the user only needs to apply a theme to change the default (plain) appearance.

puzrin commented 5 years ago

It turned out that you have designer skills. Can you create a layout design?

I have no designer skills. Only some experience to see obvious problems in design/usability, and where to take ready solutions when available. My skills are more close to "software architect"

If you give me some time, i will prepare list of exact links to UI guidelines, where to read about each menu element.

seyyah commented 5 years ago

It turned out that you have designer skills. Can you create a layout design?

I'm not very good, but I try still to do a pencil sketch/moqup and share it.

kisvegabor commented 5 years ago

@puzrin Right now, I have no time to immerse in it so deep. Anyway, a list of links would be useful.

@seyyah Thank you, waiting for that!

puzrin commented 5 years ago

@kisvegabor give me 1 week. I'm trying to understand, what can be useable for programmers, to quickly create interface sketches from ready material components. Something like this:

puzrin commented 5 years ago

Tech note.

https://stackblitz.com/edit/mdc-web-quick-start-demo

Nice online IDE. Seems demo can be published on web. That's ~ the same as offline (node.js + webpack), but result can be seen immediately, without install. + anyone can fork & edit.

* does not work in Firefox, open in Chromium/Chrome

investigating...

seyyah commented 5 years ago

[1, 3, 4] maybe inspired us. I am using Pinterest daily and I opened a board [2] and gathering inspirational work here as I meet.

What should be included in the "settings menu"?

What do you think about "home automation demo" idea?

:camera: Pins

A B C D
1
2
3

:clipboard: Reference

  1. https://pttrns.com/?scid=16
  2. https://tr.pinterest.com/5eyyah/uiux-littlevgl/
  3. http://inspired-ui.com/search/settings
  4. http://uiohmy.com/tagfilter.php?name=settings
puzrin commented 5 years ago

What should be included in the "settings menu"?

What do you think about "home automation demo" idea?

I'd say, screens look nice, but there are nothing special in details. All this things are described in UI guidelines. IMO words "home automation" may sound magically, but have nothing special/specific behind. If you follow UI guidlines, it's not a problem to create zillions of such demos. I'd suggest to take existing demo, decide what guideline to follow and fix all deviations.

Scope of this issue is a bit different - provide "almost ready" interface solution for simple projects.

kisvegabor commented 5 years ago

@seyyah It's really inspiring, thank you!

What should be included in the "settings menu"?

  • no keyboard

@puzrin Typing a name for something (room, device name, wifi network etc) is quite commont. IMO we should have a one line text area + keayboard in the example

I'd say, screens look nice, but there are nothing special in details. All this things are described in UI guidelines. IMO words "home automation" may sound magically, but have nothing special/specific behind. If you follow UI guidlines, it's not a problem to create zillions of such demos. I'd suggest to take existing demo, decide what guideline to follow and fix all deviations.

The demo should use the very default lvgl style (white background, blueish buttons) but can be customized by applying a theme. That's the key of the themes. There is a UI with a default appearance but can be completely changed with one line of code. So the themes should follow the UI guidelines.

Scope of this issue is a bit different - provide "almost ready" interface solution for simple projects.

Yes, in this issue we should focus on:

  1. figure out what widgets would be required for a general main screen + settings screen UI.
  2. create a layout design
  3. implement it in lvgl
  4. (create a video for youtube :) )
puzrin commented 5 years ago

Typing a name for something (room, device name, wifi network etc) is quite commont. IMO we should have a one line text area + keyboard in the example

In ideal world, setting menu demo should have everything :). But expences to do keyboard "right" will postpone result significantly. I always check several conditions:

I have nothing against keyboard, but suggest postpone it to second iteration. My answer was not "what demo needs at all", but "what demo needs right now, immediately"

puzrin commented 5 years ago

More comments.

  • figure out what widgets would be required for a general main screen + settings screen UI.

I'd stay aside of main screens. Because variability of main screens is very high, and it's not a big problem to "combine some labels". Trying to generalize - tend to fall into #804.

Suggestion is to focus on settings menu only. It's doable with current possibilities, and result will be valuable.

4. (create a video for youtube :) )

I did not posted anywhere, but suggestion is to make general template for all examples, to simpllify emscripten builds and publish on gh-pages branch.

The reason i did not posted this suggestion - because examples are not self-sufficient. Those are more "code snippets". Personally, i hope #750 to be first example of "demo done right" and land settings menu there.

kisvegabor commented 5 years ago

Suggestion is to focus on settings menu only. It's doable with current possibilities, and result will be valuable.

Sound reasonable.

I did not posted anywhere, but suggestion is to make general template for all examples, to simpllify emscripten builds and publish on gh-pages branch.

I don't understand. In "general template for all examples" which examples do you mean for example?

The reason i did not posted this suggestion - because examples are not self-sufficient. Those are more "code snippets". Personally, i hope #750 to be first example of "demo done right" and land settings menu there.

I commented on #750

puzrin commented 5 years ago

I don't understand. In "general template for all examples" which examples do you mean for example?

We do i18n right now. It would be logical to make example for it. Micro demo with "hello world", and dropdown to select language.

It would be convenient to have template of pio config (or Makefile?):

embeddedt commented 5 years ago

@puzrin

I think I didn't understand what you meant. You said "It would be convenient to have template" but from what I can see we already have one of those. Could you please clarify what you mean by "template"?

It would be convenient to have template of pio config (or Makefile?):

  • with settings/deps for SDL build

https://github.com/littlevgl/pc_simulator_sdl_eclipse has a Makefile for those who don't want to use Eclipse.

  • with setting for web build (PIO supports additional platforms, but i did not investigated)

https://github.com/littlevgl/emscripten builds using a Makefile as well.

puzrin commented 5 years ago

@embeddedt

I mean all such things could be convenient in one place. When new "project" (live demo in this case) required, it's convenient to copy skeleton with all settings/scripts instead of learn/collect details.

Also, i think it could be convenient to make examples via platformio, because those are more easy to install.

embeddedt commented 5 years ago

When new "project" (live demo in this case) required, it's convenient to copy skeleton with all settings/scripts instead of learn/collect details.

What details need to be collected? At the moment making a new example merely requires modifying main.c.

puzrin commented 5 years ago

I'd like this things in the same time, in one place:

BrianPugh commented 5 years ago

@puzrin If you feel like digging through my code; I've setup a pretty good system for a 128x64 screen.

https://github.com/joltwallet/jolt_wallet/tree/joltos

https://gfycat.com/DelayedTatteredCopperbutterfly

kisvegabor commented 5 years ago

I'd like this things in the same time, in one place:

  • install deps via platformio (because user can just open folder and wait until pio does everything).
  • able to build for SDL/web/stm32f429-disco in one click.

I'm afraid it won't be that simple with Pio either because you still need to manually install SDL to work in a PC simulator and install the Emscripten SDK to compile javascript.

Despite of it, I believe that Pio is a good direction because it's easy to switch between platforms. Although it wasn't convenient for me to develop the library, it can be good for the users who use the library.

puzrin commented 5 years ago

I'm afraid it won't be that simple with Pio either because you still need to manually install SDL to work in a PC simulator and install the Emscripten SDK to compile javascript.

Ideal is not achievable, but we still can have some benefits & simplify user's life as max as possible:

Also note, PIO is NOT 100% free. After 1 month it requires paid account to run tests & bare metal debug (compilation & upload still works without restrictions). But i still don't know better alternative to manage C dependencies for embedded.

embeddedt commented 5 years ago

After 1 month it requires paid account to run tests & bare metal debug (compilation & upload still works without restrictions).

As an embedded developer, I can say that I probably wouldn't go for a tool like that. The ability to debug is extremely helpful to me and a huge time saver.

i still don't know better alternative to manage C dependencies for embedded.

Why do we need to manage those dependencies in the first place? As an example, if I want to build a LittlevGL application with STM32F746G-DISCO, I just have to download the existing Eclipse-based project. What's wrong with that setup?

puzrin commented 5 years ago

Why do we need to manage those dependencies in the first place?

Many languages (js, ruby, python, php, rust, ...) have package managers. This is VERY convenient and simplify collaborative development. But i don't know how to immediately explain benefits to someone who never used such things.

I can explain my personal feeling (view from another side). After coming from languages with package managers, i feel like returned 10 years back :). It may sound strange, but that's the main reason why i wish switch to Rust.

When you have few projects - you can manage deps manually. But when your repo's count increase - this become a nightmare.

As an example, if I want to build a LittlevGL application with STM32F746G-DISCO, I just have to download the existing Eclipse-based project. What's wrong with that setup?

If something works - nothing can be wrong with it :). If anyone works with stm32 only, Eclipse-based packs like Attolic can be a very good choice.

I can only list PIO features, useful for me, and you decide if they worth your attention:

Note, i'm not sold to PIO and not going to promote it blind. I share both pros and cons honest, to help all make choice, based on their own preferences.

embeddedt commented 5 years ago

I can only list PIO features, useful for me, and you decide if they worth your attention:

* automatic compiler toolchains install (build)

That is useful. On popular platforms like ARM and operating systems like Ubuntu, installing a toolchain is usually a single command; however, I've found the steps to be a lot more complicated on Windows and less popular embedded platforms.

Note, i'm not sold to PIO and not going to promote it blind. I share both pros and cons honest, to help all make choice, based on their own preferences.

From what I can tell, PIO looks like an attempt to unify the IDE ecosystem into one tool that supports many boards. Is that correct?

puzrin commented 5 years ago

From what I can tell, PIO looks like an attempt to unify the IDE ecosystem into one tool that supports many boards. Is that correct?

That's a correct statement too.

As opensource developper i don't like hard pinning to any IDE. So, prefer to say "it solves some boring everyday tasks for embedded C programmer/user". See list above.

Or consider it as "C-specific kludge", to make development process more "modern". For example, if we consider Rust, it's installed with one line, has package manager and, as a result - quickly growing ecosystem of packages. It still has no solution for easy flash upload, but i posted this moment to wishlist. In the end Rust should be fine without PIO, and let you choose any IDE you like.

puzrin commented 5 years ago

Preliminary sketch:

This is what i mean as "settings menu" and how i'd like it too see. Popup dialogs for params change are not ready yet.

kisvegabor commented 5 years ago

@puzrin Thank you for setting this up!

I'm curiously waiting for the pop-up windows for parameter settings. I think it will be the really interesting part.

puzrin commented 5 years ago

Some screenshots from designer.

EDIT

See updated screenshots https://github.com/littlevgl/lvgl/issues/805#issuecomment-473279547

kisvegabor commented 5 years ago

Have you pushed the updates? I still see the old GUI in online and in your repo the latest commit was 19 days ago.

puzrin commented 5 years ago

I did not planned to update demo. Are screenshots not enougth?

puzrin commented 5 years ago

Final iteration (for public review)

IMPORTANT: here are all possible inputs WITHOUT text field. Reasons:

Settings list

See demo https://github.com/littlevgl/lvgl/issues/805#issuecomment-466734171

Numeric input with slider

input-slider 3-1 input-slider 3-1 no descriptions

Yes/No (checkbox)

input-checkbox

Numeric input, touchscreen

input-digital_3-1 input-digital_3-1 no descriptions

alternate (may be someone like this):

input-digital_3-2 input-digital_3-2 no descriptions

Numeric input, encoder

input-digital_3 encoder 1

Numeric input, joystick

input-digital_3 joystick 2 input-digital_3 joystick 3

"Selectbox"

input-radiobutton

puzrin commented 5 years ago

Seems finished everything promised, except font builder. Can i help with something else?

Where can i be useful:

What i'd like to avoid:

kisvegabor commented 5 years ago

@puzrin Thank you very much! Conceptually looks good to me.

A simple, modular demo can be implemented based on the screenshots.

My view is to make possible to apply themes on this demo too. So let's continue with the discussion of themes in #804

kisvegabor commented 5 years ago

As this issue is related to examples (and not LittlevGL core) I moved to the lv_examples repo.

stale[bot] commented 5 years ago

This issue or pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

puzrin commented 5 years ago

not stale

stale[bot] commented 5 years ago

This issue or pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

puzrin commented 5 years ago

not stale

stale[bot] commented 5 years ago

This issue or pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

puzrin commented 5 years ago

not stale

kisvegabor commented 5 years ago

Reopened because will be done after v6.0 release.

stale[bot] commented 5 years ago

This issue or pull request has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

kisvegabor commented 5 years ago

Not stale

kisvegabor commented 5 years ago

I've started to work on it here.

I've implemented the engine of the settings.

What is working:

What is still required:

settings1

embeddedt commented 5 years ago

@kisvegabor Looks awesome! I can't wait to try it out!

kisvegabor commented 5 years ago

I've improved the app. See this example

lv_ex_settings_2

What do you think?

puzrin commented 5 years ago

What do you think?

Some notes: it diverges from suggested design / MD guidelines in some places.

This comments are not about colors/fonts, but about layout and combinations of different items.

kisvegabor commented 5 years ago

You can put any type and number of items on a page. So you can create one item/page if you want.

puzrin commented 5 years ago

You put any type and number of items on a page. So you can create one item/page if you want.

IMO such things could be done by default, to show consistent interface. Why not combine things exactly as on provided screenshots? Those are balanced and verified. In other case you risk to invent "yet another custom skin without guidelines"

embeddedt commented 5 years ago

you risk to invent "yet another custom skin without guidelines"

How is the number of settings on a page related to the style of the objects on a page?

puzrin commented 5 years ago

How is the number of settings on a page related to the style of the objects on a page?

Not number of settings, but "inlining" into list, instead of separate screen (as i posted in https://github.com/littlevgl/lv_examples/issues/26#issuecomment-473279547).