web interface

[xoseperez]

Originally reported by: Khaled NameZero (Bitbucket: namezero, GitHub: namezero)

---

you include include "static/index.html.gz.h" witch is compressed.
Can you tell me how to compress again the index.html ?
i want to translate the interface to French in first, then i will try to include a french.json (or xml) and compile directly to french if possible.
Thanks

[xoseperez]

Nice!

The procedure to build that file is explained in the wiki here: https://github.com/xoseperez/espurna/wiki/WebInterface

[xoseperez]

Just opened an issue to design and implement a common translations procedure. Please refer to #466 for proposals.

[fork04]

This repository does not have wiki enabled.
Return to the previous page or go back to your dashboard.

[xoseperez]

Yes it does, what do you mean?

[xoseperez]

Oops, that was a link to the old repo. I have updated it. It is now: https://github.com/xoseperez/espurna/wiki/WebInterface

[xoseperez]

I have been testing different gulp plugins. Still not decided which way to go. Do you have any suggestion? @fork04

[varungujjar]

Hey @xoseperez been working on a new UI Design for the web interface :) attached screenshots of the same runnning on my compiled firmware.... Also added a minute field to the UTC time zone since in India the UTC is +5:30

[xoseperez]

Wow @varungujjar, it looks awesome!! Would love to test it! How much does it weight?

The latest dev branch has support for timezones with minutes (see #265 ).

[varungujjar]

@xoseperez the index.html.gz.h size is 281kb
uses minimal bootstrap built from sass & custom css3 i have attached the zip file containing the same
i havent been able to style for colors since i am yet to purchase a rgb module to test it but let me know if rest of the modules work..:)
index.html.gz.zip

[xoseperez]

OK, I can confirm: WOW!

So far I have tested the basic functionalities and everything works. The wifi scan output does not look the same as in your picture, I guess there is some style missing. Of course, there are some changes from 1.12.2 just released that are missing too.

I still have to test other modules (lights, rfbridge, sensors, multiple switches,...).

[varungujjar]

in the Wifi.ino within the void _wifiScan function
had to add the span tags ...heres a reference of the part .. if you could find a way to get the output for each network as
network name and details
network name and details
...
it should work..

WiFi.getNetworkInfo(i, ssid_scan, sec_scan, rssi_scan, BSSID_scan, chan_scan, hidden_scan);

        snprintf_P(buffer, sizeof(buffer),
            PSTR("<span> BSSID: %02X:%02X:%02X:%02X:%02X:%02X SEC: %s RSSI: %3d CH: %2d SSID: %s"),
            BSSID_scan[1], BSSID_scan[2], BSSID_scan[3], BSSID_scan[4], BSSID_scan[5], BSSID_scan[6],
            (sec_scan != ENC_TYPE_NONE ? "YES" : "NO "),
            rssi_scan,
            chan_scan,
            (char *) ssid_scan.c_str()
        );

        DEBUG_MSG_P(PSTR("[WIFI] > %s\n"), buffer);

        #if WEB_SUPPORT
            if (client_id > 0) output =  output + String(buffer) + String("</span>");
        #endif

[varungujjar]

@xoseperez will also will port the new changes when I find time tonight ...

[xoseperez]

OK, a little more in-depth:

General

• I guess we should remove placeholder values or make the text color dimmer(this also applyies to "stock" UI)
• Page header should now be "HOSTNAME - ESPURNA X.X.X" (1.12.2)
• Update heartbeat variables (uptime, heap, current time) (1.12.2)
• Missing some useful info in dashboard (device info) (1.12.2)
• I like the "save settings" button everywhere.
• Some copies have changed (MQTT Root Topic) (1.12.2)

Switches

• Multiple switches does not work

Lights

• Not supported

RF Bridge

• Not supported

NTP:

• I noticed you added an NTP Update Interval field in NTP. Good.
• NTP has now just one server (1.12.2)
• Use explicit timezones (GMT+5:30) (1.12.2)

Sensors

• Read interval dropdown does not populate (probably a name mismatch)

WiFi:

• Scan results do not look like in the picture provided

[varungujjar]

yes for sensors i added in multiples of 5 seconds.. instead of 6 seconds.. cool i'll just fork the new version and get the above working.. for scan results check my previous post.. to get the output..

[xoseperez]

The old snsRead values are required for backwards compatibility. Even if you add new options.

[varungujjar]

Heres the updated file with version 1.12.3

index.html.gz.zip

[xoseperez]

Will test it as soon as I can. I'm pretty busy at the moment. BTW, do you plan to do a pull requests?

[varungujjar]

sure.. i'll do it once I find time in a day or so..

[seetendra]

Guys any update on this. This looks really amazing

[varungujjar]

@xoseperez so can we create a new branch to continue work on this..? already pulled in a recent one and finished work with all categories except online iot services :)
html.zip

attached is the html folder you can test the ones that are completed

[mcspr]

@varungujjar you can do that already btw, just replace the existing html directory and open up a PR.
I do see that some sections are hidden, guess those are the WIP? Sensors are hidden, lights cannot be controlled because colorwheel is missing. I have not tried rfbridge / rfm, but multiple switches and the dashboard are working ok.

How do you visually test it? Perhaps we can use some pre-set data to populate UI with things? processData({...}) can be ran on some preset of specific type of device - lights, sensors, rfbridge etc. when opened from file:/// scheme and stripped from the release build via those special comment tags.