Revolutionary new UI for ESPEasy

[4refr0nt]

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.

[highroller]

Looks good!

[tozett]

What information are missing for the UI?

[4refr0nt]

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]

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]

there this is not actual a demand for discusion? ok. i' ll wait for readyness...

Any discussions welcomed!

[MarkIngle]

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]

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...

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

[4refr0nt]

Below are some recommendations after reviewing the samples...

ok, all reasonable

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.

[4refr0nt]

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

not completed yet

[NietGiftig]

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]

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...

[costo]

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]

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]

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]

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]

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]

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]

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]

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]

[MarkIngle]

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]

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]

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]

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

Is anything else out there for GUIs?