Revolutionary new UI for ESPEasy

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
4refr0nt
Normal user
Posts: 19
Joined: 10 Feb 2016, 17:46

Revolutionary new UI for ESPEasy

#1 Post by 4refr0nt » 22 Feb 2016, 20:01

Hi!
Our team working now on new ESPEasy UI with new cool features:
  • user customized bootstrap themes from bootswatch.com
  • fully responsive design for desktop, mobile and tablet (win, linux, OSX, iOS, Android - any systems and any browsers)
  • old logic, but fine view
  • json API in ESPEasy firmware
  • we can move all UI code to external webserver (its may be desktop or mobile) and we will get more free memory for other tasks
  • really easy UI development and theme changing: jade for HTML & coffeescript for javascript
This UI generated to progmem vars from jade and coffee code by ESPEasyUI (in development now, nearly completed).
Also you can edit config, run "gulp" and change settings on you ESP8266

jade source + coffee source -> JS+HTML -> minify and uglify -> strings to char arrays -> const char progmem -> header.h

build process fully automatic by gulp (node.js required, runnable on all desktop systems)
ESPEasyUI generate .h files from easy-editable source
After building ESPEasy firmware html and js code stored in ESP8266 PROGMEM, RAM not used.

UI contains links to bootstrap cloud CDN (CSS only, JS not used, but smallest bootstrap.css version stored in progmem for captive portal)
UI communicate with firmware over ESPEasy JSON API (in development now too, nearly completed) with minimum data exchange.
But, very important, we are thinking about maximum free heap memory for sensors and controllers in the every line of code.

We have made a decision for publishing pre-alpha release.
ESPEasy r78 with JSON API (json urls in WebServer.ino, json functions can be found in WebApi.ino in develop branch)
ESPEasyUI

ESPEasy API logic
http://esp8266.ru/images/espeasy/process.png
http://esp8266.ru/images/espeasy/api_config.png
http://esp8266.ru/images/espeasy/api_hardware.png
http://esp8266.ru/images/espeasy/api_devices.png
http://esp8266.ru/images/espeasy/api_wifiscanner.png
http://esp8266.ru/images/espeasy/api_command.png

We are looking for new UI ideas from esp8266.nu users and ready for discuss.

Image
ImageImage
Last edited by 4refr0nt on 23 Feb 2016, 20:57, edited 1 time in total.

highroller
Normal user
Posts: 31
Joined: 09 Feb 2016, 22:16

Re: Revolutionary new UI for ESPEasy

#2 Post by highroller » 22 Feb 2016, 20:33

Looks good!

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Revolutionary new UI for ESPEasy

#3 Post by tozett » 22 Feb 2016, 22:14

What information are missing for the UI?

4refr0nt
Normal user
Posts: 19
Joined: 10 Feb 2016, 17:46

Re: Revolutionary new UI for ESPEasy

#4 Post by 4refr0nt » 22 Feb 2016, 22:27

tozett wrote:What information are missing for the UI?
Now, we announce new tech only for feedback.
We will publish new ESPEasy firmware and ESPEasyUI generator after work finished.

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Revolutionary new UI for ESPEasy

#5 Post by tozett » 22 Feb 2016, 22:35

4refr0nt wrote: We are looking for new UI ideas from esp8266.nu users and ready for discuss.
there this is not actual a demand for discusion? ok. i' ll wait for readyness...
:)

4refr0nt
Normal user
Posts: 19
Joined: 10 Feb 2016, 17:46

Re: Revolutionary new UI for ESPEasy

#6 Post by 4refr0nt » 22 Feb 2016, 22:38

tozett wrote:there this is not actual a demand for discusion? ok. i' ll wait for readyness... :)
Any discussions welcomed!

MarkIngle
Normal user
Posts: 47
Joined: 10 Feb 2016, 05:06

Re: Revolutionary new UI for ESPEasy

#7 Post by MarkIngle » 23 Feb 2016, 05:48

I think the layout and color is great! Below are some recommendations after reviewing the samples.

1. The titles above the input text box probably should be a different color...the shade of blue tends to blend in with the black background so I had to focus in to read the titles. More contracting color might help

2. Move the "Save All" function to the top right of the window. Do this for each window and use an icon instead. This will free up space at the bottom and make for information viewable without having to scroll.

3. Add the build version number to the top of the page. This will help when users post screenshots asking questions for assistance, etc.

Hope this helps! Great work! I look forward to the next version.1

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Revolutionary new UI for ESPEasy

#8 Post by tozett » 23 Feb 2016, 07:56

is there a timeline for putting a beta to public? github?
than it would probably easier to play with it and make some substantial suggestions..
me too: looks great! hope it is fast... :mrgreen:

edit:
the ip numbering in the mockup is done with colons, not points. irritation :shock: ???

4refr0nt
Normal user
Posts: 19
Joined: 10 Feb 2016, 17:46

Re: Revolutionary new UI for ESPEasy

#9 Post by 4refr0nt » 23 Feb 2016, 08:25

MarkIngle wrote:Below are some recommendations after reviewing the samples...
ok, all reasonable
tozett wrote:is there a timeline for putting a beta to public? github?
We have made a decision for publishing pre-alpha release.
ESPEasy r78 with JSON API (json urls can be found in WebApi.ino in develop branch)
ESPEasyUI

Please, post you ideas to this forum.
Last edited by 4refr0nt on 23 Feb 2016, 17:35, edited 1 time in total.

4refr0nt
Normal user
Posts: 19
Joined: 10 Feb 2016, 17:46

Re: Revolutionary new UI for ESPEasy

#10 Post by 4refr0nt » 23 Feb 2016, 08:44

tozett wrote:the ip numbering in the mockup is done with colons, not points. irritation :shock: ???
not completed yet :(

NietGiftig
Normal user
Posts: 103
Joined: 16 Sep 2015, 20:32

Re: Revolutionary new UI for ESPEasy

#11 Post by NietGiftig » 23 Feb 2016, 11:00

I have do not the intention to be negative, but i find the UI not as important as you do.
If all is good, I only see it one time after creating an hardware device and configure it.

Then I put it in my network and look at my Home automation software.
So I would say, do not spend to much time and trouble for something that is only seen for about 10 minutes.

I think that Martinus has done a nice job with ESPEasy.
And the UI is sufficient for me

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Revolutionary new UI for ESPEasy

#12 Post by tozett » 23 Feb 2016, 11:14

A home Automation Server with a web GUI in this framework would be gorgoius!!
And i think that actually do not existieren in this quality
But a lot of work to do...
And i like my espnodes more stabile than fashionate..
But go in, looks great...
;)

User avatar
costo
Normal user
Posts: 500
Joined: 21 Nov 2015, 15:03
Location: NL, zw-NB

Re: Revolutionary new UI for ESPEasy

#13 Post by costo » 23 Feb 2016, 15:05

A new user interface that better supports mobile/android devices would be welcomed.
The webgui as it is now is a bit awkward on small screens with touchscreen.

4refr0nt
Normal user
Posts: 19
Joined: 10 Feb 2016, 17:46

Re: Revolutionary new UI for ESPEasy

#14 Post by 4refr0nt » 23 Feb 2016, 16:19

NietGiftig wrote:i find the UI not as important as you do
I'm agree, but not satisfaction for mobile devices

We have nice view as bonus, but, really, its not very important. With JSON API and ESPEasyUI we can move all UI code to external webserver (its may be desktop or mobile) and we will get more free memory for other task. Also, we have powerfull tool for UI generating (with UI built-in variant or external)

Now, for reply to GET requiests from browser, firmware make big String var named "reply", contains many HTML tags (<DIV><TR><TD>, for example).

Any modifivation very hardly (you can see and debug full html code only after flashing firmware and run)
With json API we make "reply" var too, but this var contains only usefull data. Any UI modification very simplest - easy (true) way for making new features.

Try compare: html-based original reply and json API powered reply

Martinus

Re: Revolutionary new UI for ESPEasy

#15 Post by Martinus » 23 Feb 2016, 17:15

I welcome our new developer colleagues from Russia! More developers bring more products so everyone could benefit in some way.
And yes, more developers often bring more discussion as well. So many people, so many opinions...

I had a quick view on this new development and for now, it seems that one track doesn't byte the other anyway.

So let's just be enthousiastic and see were it brings us!

4refr0nt
Normal user
Posts: 19
Joined: 10 Feb 2016, 17:46

Re: Revolutionary new UI for ESPEasy

#16 Post by 4refr0nt » 23 Feb 2016, 21:07

Martinus wrote:I welcome our new developer colleagues from Russia!
Thanks!
ESPEasy - Great job! We love this plugins-based design :)

I'm edit first post and add info about json API logic. Also, I'm add info about "how we make progmem .h files from easy-readable sources"

tozett
Normal user
Posts: 734
Joined: 22 Dec 2015, 15:46
Location: Germany

Re: Revolutionary new UI for ESPEasy

#17 Post by tozett » 24 Feb 2016, 08:02

i am no developer, so a simple question arises for my on thinking about the complexity of components coming all together,
is this web-api-thing designed as an addition?
so that i can switch on the ESPeasy from the normal 'easy/simple'-gui to this json-api-revolutin-GUI..
and back again, without changing/flashing anything else..?

so than it could be next to make this additional json-web-api an additional ...'plugin'...
to have it tested?
without harming the rest of the development?

alexsus
New user
Posts: 5
Joined: 13 Feb 2016, 17:10

Re: Revolutionary new UI for ESPEasy

#18 Post by alexsus » 24 Feb 2016, 09:01

I develop a of JS part alternative Web UI.

Stable Web UI generate String that are sent to the client. This results to memory usage peaks in a time of report generation. If the String will be more than free memory, ESP crash.

In case Rest api, the most strings are send directly from PROGMEM. This greatly reduce usage the memory. According to my estimation kilobytes.


And more the API is allows:

1. Use some other host to place WebUI. in the example on http://www.esp8266.nu/config

2. Make the scripts for managing ESP or ESPs


We do this as a hobby project, but we have to develop more than 20 years.
Do not judge us severely, we are doing this is less than 2 weeks.

NietGiftig
Normal user
Posts: 103
Joined: 16 Sep 2015, 20:32

Re: Revolutionary new UI for ESPEasy

#19 Post by NietGiftig » 24 Feb 2016, 10:04

4refr0nt wrote: We have nice view as bonus, but, really, its not very important. With JSON API and ESPEasyUI we can move all UI code to external webserver (its may be desktop or mobile) and we will get more free memory for other task. Also, we have powerfull tool for UI generating (with UI built-in variant or external)
That is a different story, you did not say in your first post.
This is much more important then an UI.
Better change the title of the topic to "Create More Free Memory for ESPEasy with new UI"

alexsus
New user
Posts: 5
Joined: 13 Feb 2016, 17:10

Re: Revolutionary new UI for ESPEasy

#20 Post by alexsus » 24 Feb 2016, 10:56

We hope to solve some problems:

1. Memory Savings
steps in this direction I have described

2. Easy of development
   Divide the UI and code for simplicity. Using the latest good solutions from web development world to automate the develop process.

3. Automatic test & build & deploy.
The computer must to do all what can to do!

4. Transfer part logic to the client browser. In this case, the cpu and memory resource in the client more than ESP.

It is necessary to make a thick client.

4refr0nt
Normal user
Posts: 19
Joined: 10 Feb 2016, 17:46

Re: Revolutionary new UI for ESPEasy

#21 Post by 4refr0nt » 25 Feb 2016, 20:44

Image

MarkIngle
Normal user
Posts: 47
Joined: 10 Feb 2016, 05:06

Re: Revolutionary new UI for ESPEasy

#22 Post by MarkIngle » 27 Feb 2016, 01:55

I think the effort is worth it. I can think of several use cases where the ESP and a smartphone alone can offer "making life easier" opportunities. Keeping the memory footprint low and optimized would be good. Let me know how I can help test

4refr0nt
Normal user
Posts: 19
Joined: 10 Feb 2016, 17:46

Re: Revolutionary new UI for ESPEasy

#23 Post by 4refr0nt » 27 Feb 2016, 06:00

MarkIngle wrote:I think the effort is worth it. I can think of several use cases where the ESP and a smartphone alone can offer "making life easier" opportunities. Keeping the memory footprint low and optimized would be good. Let me know how I can help test
You can clone dev firmware (develop branch) and UI (master branch) and start testing.
If you need help, send any questions to our team ESPEasyUI@gmail.com

MarkIngle
Normal user
Posts: 47
Joined: 10 Feb 2016, 05:06

Re: Revolutionary new UI for ESPEasy

#24 Post by MarkIngle » 27 Feb 2016, 23:34

Thanks! Will do! I will need to install the setup on my Windows 7 laptop since the arduino.esp8266.com site is down. I only have 1.6.4 on my Mac.

tempbmx
New user
Posts: 6
Joined: 26 Oct 2020, 03:41

Re: Revolutionary new UI for ESPEasy

#25 Post by tempbmx » 11 Jun 2021, 02:07

BUMP!?! God good lord sweet baby jesus why has no one picked this back up?

Is anything else out there for GUIs?

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot] and 28 guests