BETA: New Emoncms V10 UI *Feedback Request*

emrys · 2019-03-19T17:30:05.081Z

I have modified the navigation in emoncms to use a sidebar. You can navigate between the menu sections without leaving the page. Once you navigate to another page the sidebar will indicate your position by highlighting the current menu item.

delwedd1904×1080 185 KB

Purpose

The idea of this feature is to improve the experience of navigating through emoncms and to re-use the Apps sidebar consistently within all of EmonCMS.

Mobile

On mobile devices (narrower than 870px) the sidebar becomes a “slide out” menu and overlays the content below.

Demo / Testing

You can preview the new sidebar if you use Git to checkout the
sidebar branch of emoncms on GitHub - https://github.com/emoncms/emoncms/tree/sidebar.

cd /var/www/emoncms
git pull
git checkout sidebar

cd Modules/app
git pull
git checkout sidebar
cd..

cd Modules/dashboard
git pull
git checkout sidebar
cd..

cd Modules/graph
git pull
git checkout sidebar
cd..

cd Modules/find
git pull
git checkout sidebar
cd ..

cd Modules/sync
git pull
git checkout sidebar
cd ..

cd Modules/deamandshaper
git pull
git checkout sidebar
cd ..

cd Modules/postprocess
git pull
git checkout sidebar
cd ..

After switching to the sidebar branch clear the browser cache or use private browsing mode to ensure no javascript is cached.

Additional Modules

For optional Modules to make use of the sidebar the "_menu.php" file for each Module must also be changed. We are working to update all the Modules. You can checkout these Modules for testing…

These modules already have a sidebar branch:

GitHub - emoncms/graph: Versatile graphing module for emoncms
GitHub - emoncms/dashboard: dashboard module for emoncms
GitHub - emoncms/app: Emoncms App module: application specific dashboards: includes myelectric, mysolarpv, myheatpump and solar + wind app.
GitHub - emoncms/find: Find OpenEnergyMonitor devices on your local network

Screencast Demo

Here is a video of what the new improvements look like:

borpin · 2019-03-19T20:16:13.389Z

This reminds me, when will the ‘beta features’ be pushed to mainstream?

glyn.hudson · 2019-03-21T17:07:15.075Z

Any thoughts on this new sidebar design? I’ve been using it for a while now on my Emoncms system and it works very well, I think it’s a big improvement in usability. It’s still a work in progress, but we would really like this to be merged into master very soon.

Any feedback would be appreciated, if you find any minor issues please open github issues and assign to @emrys

To complement @emrys, screencast and screen grab above here are some screenshots showing the mobile view in action:

Screenshot_20190321-1644141080×1920 151 KB

Screenshot_20190321-1644291079×1704 96.9 KB

Screenshot_20190321-1645131077×1714 128 KB

Screenshot_20190321-1647411080×1920 125 KB

borpin:

This reminds me, when will the ‘beta features’ be pushed to mainstream?

Assume you’re referring to the device module beta? It’s best start a new thread to discuss this. Currently it’s planned to release the device module, Feed page and sidebar all together since some components depend on each other. This sidebar cannot easily be released as a beta feature toggle since its significant change to the code.

borpin · 2019-03-21T17:13:15.045Z

glyn.hudson:

Assume you’re referring to the device module beta?

Ah I had not appreciated it was linked to the device module - I just thought it was all ‘beta-features’ as it changes the input and feeds page.

I have to say I find the feature confusing, not helped by the name ‘device’ but I like the Inputs and Feeds pages (generally).

Could a beta feature of side bar be added rather than switching branch?

glyn.hudson · 2019-03-21T21:59:45.394Z

borpin:

Ah I had not appreciated it was linked to the device module - I just thought it was all ‘beta-features’ as it changes the input and feeds page.

They are all connected, you are correct there are changes to the feed/input list.

borpin:

Could a beta feature of side bar be added rather than switching branch?

As I mentioned above the sidebar is significant code change to many modules therefore not really easy to deploy as a beta feature toggle. Anyone who wants to test currently needs to checkout the branch as described above. After some more testing we’ll try to get it merged into master branch for further testing. Master branch is kind of like a beta branch since the majority of users are running stable branch (emonSD default).

The screenshots and video on this thread should give a good idea of how the sidebar nav will work.

borpin · 2019-03-21T22:02:31.514Z

glyn.hudson:

After some more testing we’ll try to get it merged into master branch

Is the sidebar branch up to date with master (should really just go and check…)? Does it have it’s own module versions or are the changes to Modules non-breaking?

glyn.hudson · 2019-03-21T22:04:25.145Z

borpin:

Is the sidebar branch up to date with master (should really just go and check…)? Does it have it’s own module versions or are the changes to Modules non-breaking?

Yes I think it’s uptodate with master, I don’t think version numbers have been changed yet. The modules just need to be updated to make them appear in the sidebar. Updating just the core will show the sidebar with a few modules missing.

borpin · 2019-03-21T22:05:46.194Z

So it should be as simple as doing a full update and switching branch on emoncms?

glyn.hudson · 2019-03-21T23:33:30.887Z

yes, just $ git pull then $ git checkout sidebar as mentioned in @emrys post above

borpin · 2019-03-22T08:09:20.837Z

OK, modified the update script in my usefulscripts folder too lazy to do all that every time.

#!/bin/sh
# emoncms updater script

EMONCMS_DIR=/var/www/emoncms
printf "\nUpdate emoncms and switch to sidebar....\n"

git -C $EMONCMS_DIR pull
git -C $EMONCMS_DIR status
git -C $EMONCMS_DIR describe --tags
git -C $EMONCMS_DIR checkout sidebar

for M in $EMONCMS_DIR/Modules/*
  do
    if [ -d "$M/.git" ]; then
      printf "\nUpdate emoncms/$(basename $M)....\n"
      git -C $M pull
      git -C $M status
      git -C $M describe --tags
    fi
  done

git -C $EMONCMS_DIR/Modules/app checkout sidebar
git -C $EMONCMS_DIR/Modules/dashboard checkout sidebar
git -C $EMONCMS_DIR/Modules/graph checkout sidebar
git -C $EMONCMS_DIR/Modules/find checkout sidebar

First thing of note, it chops off the top of my dashboards

image742×343 19.2 KB

Secondly, I like the dashboard available on the top. Now I have to click twice to get there, and as it is one of the most common things I do…

The Old

image768×333 16.4 KB

Server Information


Services
	emoncms_mqtt	Active Running
	feedwriter	Active Running - sleep 10s
	service-runner	Active Running
	redis-server	Active Running
Emoncms	Version	low-write 9.9.9-beta
	Modules	Administration : App v1.2.1 : Backup v1.1.6 : Dashboard v1.3.3 : Device v1.2.1 : EventProcesses : Feed : Graph v1.2.3 : Input : CoreProcess : Schedule : Time : User : Visualisation
	Git	URL: GitHub - emoncms/emoncms: Web-app for processing, logging and visualising energy, temperature and other environmental data : Branch: * sidebar : Describe: 9.9.8-43-g0a751ea2
Server	OS	Linux 4.9.0-6-amd64
	Host	DietPi-EmoncmsVM : DietPi-EmoncmsVM : (192.168.7.47)
	Date	2019-03-22 08:08:06 UTC
	Uptime	08:08:06 up 8 days, 10:11, 1 user, load average: 0.11, 0.09, 0.04
HTTP	Server	lighttpd/1.4.45 HTTP/1.1 CGI/1.1 443
MySQL	Version	5.5.5-10.1.26-MariaDB-0+deb9u1
	Host	localhost (127.0.0.1)
	Date	2019-03-22 08:08:06 (UTC 00:00‌)
	Stats	Uptime: 727872 Threads: 2 Questions: 2576779 Slow queries: 0 Opens: 42 Flush tables: 1 Open tables: 36 Queries per second avg: 3.540
Redis	Version	3.2.6
	Host	localhost:6379 (127.0.0.1)
	Size
	Uptime	8 days
MQTT Server	Version	Mosquitto
	Host	192.168.7.50:1883 (192.168.7.50)
Memory	RAM	Used: 33.56% Total: 492.5 MB Used: 165.29 MB Free: 327.22 MB
	Swap	Used: 0.00% Total: 1.52 GB Used: 0 B Free: 1.52 GB
Disk	Mount	Stats
	/	Used: 39.48% Total: 7.81 GB Used: 3.08 GB Free: 4.63 GB
PHP	Version	7.0.30-0+deb9u1 (Zend Version 3.0.0)
	Modules	apcu v5.1.8 : calendar v7.0.30-0+deb9u1 : cgi-fcgi : Core v7.0.30-0+deb9u1 : ctype v7.0.30-0+deb9u1 : curl v7.0.30-0+deb9u1 : date v7.0.30-0+deb9u1 : dom v20031129 : exif v7.0.30-0+deb9u1 : fileinfo v1.0.5 : filter v7.0.30-0+deb9u1 : ftp v7.0.30-0+deb9u1 : gd v7.0.30-0+deb9u1 : gettext v7.0.30-0+deb9u1 : hash v1.0 : iconv v7.0.30-0+deb9u1 : json v1.4.0 : libxml v7.0.30-0+deb9u1 : mbstring v7.0.30-0+deb9u1 : mcrypt v7.0.30-0+deb9u1 : mosquitto v0.4.0 : mysqli v7.0.30-0+deb9u1 : mysqlnd vmysqlnd 5.0.12-dev - 20150407 - $Id: b5c5906d452ec590732a93b051f3827e02749b83 $ : openssl v7.0.30-0+deb9u1 : pcre v7.0.30-0+deb9u1 : PDO v7.0.30-0+deb9u1 : pdo_mysql v7.0.30-0+deb9u1 : Phar v2.0.2 : posix v7.0.30-0+deb9u1 : readline v7.0.30-0+deb9u1 : redis v3.1.6 : Reflection v7.0.30-0+deb9u1 : session v7.0.30-0+deb9u1 : shmop v7.0.30-0+deb9u1 : SimpleXML v7.0.30-0+deb9u1 : sockets v7.0.30-0+deb9u1 : SPL v7.0.30-0+deb9u1 : standard v7.0.30-0+deb9u1 : sysvmsg v7.0.30-0+deb9u1 : sysvsem v7.0.30-0+deb9u1 : sysvshm v7.0.30-0+deb9u1 : tokenizer v7.0.30-0+deb9u1 : wddx v7.0.30-0+deb9u1 : xml v7.0.30-0+deb9u1 : xmlreader v7.0.30-0+deb9u1 : xmlwriter v7.0.30-0+deb9u1 : xsl v7.0.30-0+deb9u1 : Zend OPcache v7.0.30-0+deb9u1 : zip v1.13.5 : zlib v7.0.30-0+deb9u1

Client Information


HTTP	Browser	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36
Screen	Resolution	1920 x 1080
Window	Size	1763 x 889

ian · 2019-03-22T14:32:55.337Z

Hi @borpin

Is it possible you could add demandshaper to update script at some time please?

cd /home/pi/demandshaper
git pull

borpin · 2019-03-22T14:56:57.149Z

ian:

Is it possible you could add demandshaper to update script at some time please?

Once the module is installed, the script in the usefulscripts repository will update everything under the Modules folder.

This is just an addition to that script, to update and switch to sidebar.

borpin · 2019-03-22T15:11:48.110Z

I noticed it says Setup at the top.

When you are on the Graphs menu.

It is not immediately obvious how to get back to the full set of menu items.

If you have a PiHole setup, have a look at their menu. If you haven’t, you should

borpin · 2019-03-23T09:15:58.539Z

Left overnight (on graph) and I now have a ‘Login’ on the top right. Great, except when I click on the ‘Login’ it it stubbornly stays on the graph page.

If I edit the ‘graph’ out of the URL it drops me into the login page and all is well except it does not take me back to where I was, but drops me into the default ‘home’ page.

BTW this is Lighttpd and SSL enabled (in case there is an issue replicating it).

borpin · 2019-03-23T10:34:09.763Z

glyn.hudson:

yes, just $ git pull then $ git checkout sidebar

As a note to others, restart the emoncms_mqtt service. It looks like it is running but for me was not doing anything. Restarting this unit brought the data in again (MQTT is on a separate broker). I did the 'what on earth did I change 16 Hrs ago! It may just have been the git pull that caused it.

borpin · 2019-03-24T13:00:04.540Z

Hi @glyn.hudson I have noticed that if the user session has expired, the page redirection does not work correctly if on a sub page, and you just refresh the page. Also the ‘login’ button does not work.

glyn.hudson · 2019-03-25T13:50:15.959Z

borpin:

Hi @glyn.hudson I have noticed that if the user session has expired, the page redirection does not work correctly if on a sub page, and you just refresh the page. Also the ‘login’ button does not work.

Is this an issue which only effect the sidebar branch

borpin · 2019-03-26T08:33:18.684Z

Certainly the behaviour is different!

glyn.hudson · 2019-03-26T18:25:17.795Z

Could this be a browser cache issue? Do you experience the same issues in private browsing mode?

borpin · 2019-03-26T21:47:32.259Z

glyn.hudson:

Could this be a browser cache issue?

I do not think so but I’ll try it and see (just need to leave it to expire the session).

What I try is to reload the page so /emoncms/feed/list, browser load to a blank page with ‘logon’ in top right, but clicking on that doesn’t do anything.

Not clicking ‘remember me’ at login time.