Community
OpenEnergyMonitor

Community

BETA: New Emoncms V10 UI *Feedback Request*

Tags: #<Tag:0x00007fdb6b008810> #<Tag:0x00007fdb6b0086d0>

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.

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:

Screencast Demo

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

4 Likes

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

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:

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.

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?

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

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.

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.

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

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

1 Like

OK, modified the update script in my usefulscripts folder :smile: 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

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

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: https://github.com/emoncms/emoncms.git : 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

Hi @borpin

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

cd /home/pi/demandshaper
git pull

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.

I noticed it says Setup at the top.

image

When you are on the Graphs menu.

image

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 :laughing:

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

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.

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

Certainly the behaviour is different!

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

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.