[Gargoyle UI/UX] Requesting upgrade from dark ages

[tapper]

Hi I am going to post some info about accessibility AKA a11y just encase it will help you out. You mite not need to read it all tho if you keep using semantic HTML, it's just for reference.

Understanding screen reader interaction modes
http://tink.uk/understanding-screen-rea ... ion-modes/

HTML 5Semantics and Accessibility:
http://accessiblehtmlheadings.com/

I wood like to post what the Gargoyle interface reads out like to my screenreader:

(start of the Status page)

Gargoyle
Router
Management
Utility
Device Name: Tapper'sAP
Status
Device Name:
Tapper'sAP
Gargoyle Version:
1.8.X (Built 20150913-1909 git@c20c584)
Model:
TP-Link TL-WDR3600 v1
Device Configuration:
Gateway
Memory Usage:
28.2MB / 123.4MB (22.8%)
Swap Memory Usage:
0MB / 243.9MB (0%)
Connections:
498/16384
CPU Load Averages:
0.13 / 0.12 / 0.08  (1/5/15 minutes)
Uptime:
2 days, 22 hours, 27 minutes
Current Date & Time:
23/09/15 10:28 BST
WAN IP Address:
86.27.171.243
WAN Netmask:
255.255.255.0
WAN MAC Address:
E8:DE:27:99:D5:C5
WAN Gateway IP:
86.27.171.1
WAN DNS Server(s):
208.67.220.220
208.67.222.222
LAN IP Address:
192.168.1.1
LAN Netmask:
255.255.255.0
LAN MAC Address:
E8:DE:27:99:D5:C5
Port
Status
LAN1
1Gbps
LAN2
-
LAN3
-
LAN4
1Gbps
Wireless Mode:
Access Point (AP)
Wireless MAC Address:
E8:DE:27:99:D5:C6
2.4 GHz Access Point SSID:
tapper's net
5GHz Access Point SSID:
tapper's net
QoS Upload:
Disabled
QoS Download:
Disabled
link Status
link Overview
link Bandwidth Usage
link B/W Distribution
link Web Usage
link Connected Hosts
link Connection List
link Connection
link Firewall
link System
link Logout
(end of page)

So as you can see all the info is there and easy for me to find. Just thought i would shair just incase i can be of any help.

[StopSpazzing]

Hi I am going to post some info about accessibility AKA a11y just encase it will help you out. You mite not need to read it all tho if you keep using semantic HTML, it's just for reference.

Understanding screen reader interaction modes
http://tink.uk/understanding-screen-rea ... ion-modes/

HTML 5Semantics and Accessibility:
http://accessiblehtmlheadings.com/

I wood like to post what the Gargoyle interface reads out like to my screenreader:

(start of the Status page)

Gargoyle
Router
Management
Utility
Device Name: Tapper'sAP
Status
Device Name:
Tapper'sAP
Gargoyle Version:
1.8.X (Built 20150913-1909 git@c20c584)
Model:
TP-Link TL-WDR3600 v1
Device Configuration:
Gateway
Memory Usage:
28.2MB / 123.4MB (22.8%)
Swap Memory Usage:
0MB / 243.9MB (0%)
Connections:
498/16384
CPU Load Averages:
0.13 / 0.12 / 0.08  (1/5/15 minutes)
Uptime:
2 days, 22 hours, 27 minutes
Current Date & Time:
23/09/15 10:28 BST
WAN IP Address:
86.27.171.243
WAN Netmask:
255.255.255.0
WAN MAC Address:
E8:DE:27:99:D5:C5
WAN Gateway IP:
86.27.171.1
WAN DNS Server(s):
208.67.220.220
208.67.222.222
LAN IP Address:
192.168.1.1
LAN Netmask:
255.255.255.0
LAN MAC Address:
E8:DE:27:99:D5:C5
Port
Status
LAN1
1Gbps
LAN2
-
LAN3
-
LAN4
1Gbps
Wireless Mode:
Access Point (AP)
Wireless MAC Address:
E8:DE:27:99:D5:C6
2.4 GHz Access Point SSID:
tapper's net
5GHz Access Point SSID:
tapper's net
QoS Upload:
Disabled
QoS Download:
Disabled
link Status
link Overview
link Bandwidth Usage
link B/W Distribution
link Web Usage
link Connected Hosts
link Connection List
link Connection
link Firewall
link System
link Logout
(end of page)

So as you can see all the info is there and easy for me to find. Just thought i would shair just incase i can be of any help.

This is actually helpful as I will need to make sure these are properly seen by your reader. There is specific code in bootstrap specific to screen readers and I will be using it to help show content properly.

Here is a very very basic alpha design. The colors for the navigation are too dark in this design, I still have to match the color combinations of current theme. And that legendary Logo still needs to be added. Sub menus have yet to be added also. Modals will be used for popup information, to move away from those horrific iframes.

https://github.com/stopspazzing/Gargoyl ... e-Redesign

The full space it takes up is <160KB. I had to custom compile jQuery and Bootstrap to remove unless eye candy that takes up too much space. I probably could squeeze some more space out, but I will worry about that later.

Question 1:
I noticed Gargoyle uses a bunch of files to generate the html, why not just parse a single file (ex. index.html) and string replace {stuff in brackets} in the code?

Question 2:
Wouldn't moving to 100% javascript be more efficient, aka using Node.js with Express.js and creating the pages using pure javascript? Node.js can interact with system files and reboot basically control the whole system. Could then get rid of the sh files all together.

[Lantis]

I'm not the best to answer these questions. I suggest you contact Eric by email. He will have the answers and is always interested in people who want to help develop.

Currently gargoyle uses:
Shell file (generates the web page, performs initial interface with the system e.g. Grabbing variables from the system for use by the JavaScript)
JavaScript file (main application, where all the logic is)
JavaScript language file (replaces strings in the page with their international counterparts)
SVG files (for graphs)

This is all processed through the Haserl interpreter.

I'm not familiar with NodeJS but the current implementation is used to move the burden of the GUI off the router and into the user looking at the page, making it, whilst less efficient, more efficient for the router itself.


That is my understanding.
I've now subscribed to this thread. Very interested.

[StopSpazzing]

Well, you could get rid of all those steps and just process it all with node.js and express.js. At least from what I am understanding, there is also a uhttp program that controls the website portion,that can go too since node.js can do it all.

Example code to create a webpage using node.js and express.js:

Code: Select all

var connect = require('connect'),
    http = require('http');

var app = connect()
    .use(function(req, res, next) {
        console.log("That's my first middleware");
        next();
    })
    .use(function(req, res, next) {
        console.log("That's my second middleware");
        next();
    })
    .use(function(req, res, next) {
        console.log("end");
        res.end("hello world");
    });

http.createServer(app).listen(3000);

Also, node.js is asynchronous so there is no thread blocking so pages would load faster since data would be already available.

[Lantis]

That all sounds great.

How do you propose to handle different languages?
Also the current system generates the menu dynamically which allows us to install plugins and have them show up on the menu.

[StopSpazzing]

That all sounds great.

How do you propose to handle different languages?
Also the current system generates the menu dynamically which allows us to install plugins and have them show up on the menu.

Socket.io is that solution.Web Sockets allow the server-side to directly communicate and send messages to the client-side.

Let me dive deeper into gargoyle's http code to better understand how it works so I can come up with a sound solution. I am no node.js guru but I will see what I can come up with.

[ispyisail]

I'm not the best to answer these questions. I suggest you contact Eric by email. He will have the answers and is always interested in people who want to help develop.

Based on old posts Eric welcomes all contributors

I think we need to get you connected to the "gargoyle admin google group"

I don't think Eric follows all topics on this forum but based on experience you will get a near instant answer with the "gargoyle google group".

I'm not sure how he has set it up but I suspect it an invite only group?

[marrco]

I hope you realize the interface is somewhat dynamic. If you compile your own build for the EC where channels 12 and 13 are allowed (it's just a small change, setting CONFIG_ATH_USER_REGD=y before building) the menu interface automagically changes and new channels appear depending on the region setting.
So please don't make the new interface static. Large part gets automatically generated behind the scenes.

[StopSpazzing]

I hope you realize the interface is somewhat dynamic. If you compile your own build for the EC where channels 12 and 13 are allowed (it's just a small change, setting CONFIG_ATH_USER_REGD=y before building) the menu interface automagically changes and new channels appear depending on the region setting.
So please don't make the new interface static. Large part gets automatically generated behind the scenes.

This will show you proof of concept of all the "dynamic" questions everyone is having. Remember, the code will be non thread blocking and real-time, graphs and stats will show the literal current info. No parsing, no interpreting needed.

http://socket.io/

Edit: What I can do is make a simple demo with the dashboard I have already been working on. I will have buttons to select language, which will change the language of specific things as a demo.

[StopSpazzing]

So, after massive amount of research, the smallest size I can get out of custom compiling node.js will be too large. So, unfortunately will have to drop this awesome idea of using node.js (for now). Maybe in the future when the default sizes of routers is greater than 20mb, will be more than feasible.

I will continue to look for ways of improving the development of gargoyle however, and I'm still working on the new responsive design for webpage.

If anyone is still interested in checking out source for node.js, check out the files here: https://nodejs.org/dist/v4.1.1/ Maybe there is something I missed?