[Gargoyle UI/UX] Requesting upgrade from dark ages

[StopSpazzing]

First off want to thank everyone on gargoyle team who works on this project. I have used it for a very long time and have enjoyed the features and stability.

Problem
Currently the pages have iframes, using xhtml doctype and produces 40+ errors on html validation. None of this in good or supporting of mobile devices.

Proposal:
I want to request a design update from the 00's to 2015 and suggest both a rewrite of the html being produced, plus to upgrade to a framework that supports responsive design since most people use mobile devices more than their computers.

Solution:
Either using a min version of bootstrap or material design lite, redesign the UI so that it confirms to new HTML5 Doctype, is supported on mobile devices by default, and gets rid of ugly iframes. This would require a rewrite on the ouput code from the .sh files that are being used + inclusion with it only used parts of whatever framework is chosen. The final design (which I have calc.) will be well below 200Kb in either framework suggested.
On devices with >= 4mb of ram, could only use bare minimum framework or stay with current out-dated design. Most new devices have 8MB+ ram and 200kb shouldnt be an issue.

Links to designs:
Bootstrap Dashboard:
http://ma.onokumus.com/
or on 4.x-alpha(search for dashboard, the actual example is missing code and image of it shows what it should look like)
http://v4-alpha.getbootstrap.com/examples/

Material Design Lite:
http://www.getmdl.io/templates/dashboard/index.html

[nworbnhoj]

Sounds like a great project!
Why don't you fork Gargoyle, make the changes, and then put in a pull request to incorporate them into the main repo. Many hands make light work
https://github.com/ericpaulbishop/gargoyle

[tapper]

Hi just one thing pleas pleas don't brake A11Y! I use a screen reader and the Gargoyle interface is the best router firmware I have ever used for working with a screen reader things read out to me that have never worked with any other firmware. such as the band width graphs, some firmwares cant be used with a screenreader at all. On the plus side i wood test things for you if you do make any changes.

[ispyisail]

Sounds like a great project!
Why don't you fork Gargoyle, make the changes, and then put in a pull request to incorporate them into the main repo. Many hands make light work
https://github.com/ericpaulbishop/gargoyle

+1

[StopSpazzing]

Step 1 Completed - Convert xhtml to html5:
https://github.com/stopspazzing/gargoyle

Using atom.io, replaced the doctype and html tags with html5 versions. Weird thing is, atom.io decided to remove all unnecessary trailing white space in files since there should have been only about ~40 changes, but apparently 1016 changes are made.

If someone checks the code and confirms it wont brick my router, ill test it my on router first.

[Lantis]

Won't brick router. At worst GUI becomes unusable and you just reflash from command line.

Kind of bizarre that it also added an execution bit to every file..?

At the conclusion of your project I'd probably add the changes manually without all these changes getting pushed through as well.



As an aside. I think bootstrap is a great idea and I use it on my website.
I'm just not overly familiar with it so I would struggle to implement.

When you are going about this remember you are working with space constraints.

[nworbnhoj]

I am not a Developer and have not attempted this - but for what it is worth ....

atom.io decided to remove all unnecessary trailing white space in files since there should have been only about ~40 changes, but apparently 1016 changes are made.

1016 is a lot of changes, but the ones I looked at were pretty mundane.

If someone checks the code and confirms it wont brick my router, ill test it my on router first.

That is a lot of checking so I'm not sure you are going to get a guarantee. However, if you build this and flash to a router which already has Gargoyle running correctly then AFAIK it will not touch the inbuilt OpenWRT recovery mechanism. So even if you do brick it, the recovery should be fairly straight forward. http://www.gargoyle-router.com/wiki/dok ... e_recovery

[StopSpazzing]

Won't brick router. At worst GUI becomes unusable and you just reflash from command line.

Kind of bizarre that it also added an execution bit to every file..?

At the conclusion of your project I'd probably add the changes manually without all these changes getting pushed through as well.



As an aside. I think bootstrap is a great idea and I use it on my website.
I'm just not overly familiar with it so I would struggle to implement.

When you are going about this remember you are working with space constraints.

Yeah, not sure why it did that to all those files. Makes sense why you would manually do the changes.

I'm trying to keep the code to a minimum as possible. There is no reason to add 5mb of code if only framework and icons is needed. However, that being said, all images can be converted to svg or replaced by bootstrap icons for instance which would free up space as obv, code < picture in size. So the trade off could be worth it.

While I'm on the subject, since you guys are already using javascript, why not move to Node.js and remove the sh files all together? Would be first firmware to use Node.js and speed things up immensely.

I am not a Developer and have not attempted this - but for what it is worth ....

atom.io decided to remove all unnecessary trailing white space in files since there should have been only about ~40 changes, but apparently 1016 changes are made.

1016 is a lot of changes, but the ones I looked at were pretty mundane.

If someone checks the code and confirms it wont brick my router, ill test it my on router first.

That is a lot of checking so I'm not sure you are going to get a guarantee. However, if you build this and flash to a router which already has Gargoyle running correctly then AFAIK it will not touch the inbuilt OpenWRT recovery mechanism. So even if you do brick it, the recovery should be fairly straight forward. http://www.gargoyle-router.com/wiki/dok ... e_recovery

Yeah, softbricks are fine. Thanks for linking me to the recovery wiki page. Hopefully I wont need it tho. Time to compile the code.

[StopSpazzing]

Changes confirmed working. (removed the javascript for obvious reasons).

Code: Select all

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Gargoyle Router Management Utility</title>
	<link rel="shortcut icon" href="/themes/Gargoyle/images/favicon.png" type="image/png"/>
	<style>
		.unselected_submenu_container	{ display:none; }
		#nav_internal_container2 #selected_header_link	{ display:inline; padding:0; color:#000; cursor:default; }
		#nav_internal_container2 #selected_header_link:hover	{ color:#000; cursor:default; }
		#nav_internal_container2 #selected_header_link:visited	{ color:#000; cursor:default; }
		#nav_internal_container2 #selected_header_link:active	{ color:#000; cursor:default; }
	</style>
	<link rel="stylesheet" href="/themes/Gargoyle/common.css?1.8.X--Built-20150922-0340-git-04e6ec1-" type="text/css"/>
	<link rel="stylesheet" href="/themes/Gargoyle/internal.css?1.8.X--Built-20150922-0340-git-04e6ec1-" type="text/css"/>
	<script language="javascript" type="text/javascript" src="/js/common.js?1.8.X--Built-20150922-0340-git-04e6ec1-"></script>
	<script language="javascript" type="text/javascript" src="/js/overview.js?1.8.X--Built-20150922-0340-git-04e6ec1-"></script>
	<script language="javascript" type="text/javascript" src="/js/table.js?1.8.X--Built-20150922-0340-git-04e6ec1-"></script>
	<script language="javascript" type="text/javascript" src="i18n/English-EN/strings.js?1.8.X--Built-20150922-0340-git-04e6ec1-"></script>
	<script language="javascript" type="text/javascript" src="/i18n/English-EN/overview.js?1.8.X--Built-20150922-0340-git-04e6ec1-"></script>
</head>
<body>
	<div id="darken"><iframe id="d_iframe" class="select_free"></iframe></div>
	<div id="wait_msg">
		<div id="wait_txt">
			Please Wait While Settings Are Applied
		</div>
		<div id="wait_icon">
			<img src="/themes/Gargoyle/images/wait_icon.gif"/>
		</div>
		<iframe id="m_iframe" class="select_free"></iframe>
	</div>
	<div id="outer_logo">
		<div id="inner_logo">
			<div id="garg_title">Gargoyle</div>
			<div id="garg_desc">Router <br/>Management <br/>Utility</div>
			<div id="garg_host">Device Name: Gargoyle</div>
		</div>
	</div>
	<div id="outer_header"></div>
	<div id="outer_container">
		<div id="main_external_container">
			<div id="main_top"></div>
			<div id="main_internal_container">

<fieldset>
	<legend class="sectionheader">Status</legend>

	<div id="device_container">
		<div>
			<span class='leftcolumn'>Device Name:</span><span id="device_name" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>Gargoyle Version:</span><span id="gargoyle_version" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>Model:</span><span id="device_model" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>Device Configuration:</span><span id="device_config" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>Memory Usage:</span><span id="memory" class='rightcolumn'></span>
		</div>
		<div id="swap_container">
			<span class='leftcolumn'>Swap Memory Usage:</span><span id="swap" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>Connections:</span><span id="connections" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>CPU Load Averages:</span><span id="load_avg" class='rightcolumn'></span><span>&nbsp;&nbsp;(1/5/15 minutes)</span>
		</div>
		<div class="internal_divider"></div>
	</div>

	<div id="time_container">
		<div>
			<span class='leftcolumn'>Uptime:</span><span id="uptime" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>Current Date & Time:</span><span id="current_time" class='rightcolumn'></span>
		</div>
		<div class="internal_divider"></div>
	</div>

	<div id="bridge_container">
		<div>
			<span class='leftcolumn'>Bridge IP Address:</span><span id="bridge_ip" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>Bridge Netmask:</span><span id="bridge_mask" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>Bridge MAC Address:</span><span id="bridge_mac" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>LAN Gateway IP:</span><span id="bridge_gateway" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>Connected via:</span><span id="bridge_mode" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>Bridge SSID:</span><span id="bridge_ssid" class='rightcolumn'></span>
		</div>
		<div class="internal_divider"></div>
	</div>

	<div id="wan_container">
		<div>
			<span class='leftcolumn'>WAN IP Address:</span><span id="wan_ip" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>WAN Netmask:</span><span id="wan_mask" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>WAN MAC Address:</span><span id="wan_mac" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>WAN Gateway IP:</span><span id="wan_gateway" class='rightcolumn'></span>
		</div>
		<div id="wan_dns_container">
			<span class='leftcolumn'>WAN DNS Server(s):</span><span id="wan_dns" class='rightcolumn'></span>
		</div>
		<div id="wan_pppoe_container">
			<span class='leftcolumn'>WAN (PPPoE) Uptime:</span><span id="wan_pppoe_uptime" class='rightcolumn'></span>
		</div>
		<div id="wan_3g_container">
			<span class='leftcolumn'>WAN (3G) Signal Strength:</span><span id="wan_3g" class='rightcolumn'></span>
		</div>
		<div class="internal_divider"></div>
	</div>

	<div id="lan_container">
		<div>
			<span class='leftcolumn'>LAN IP Address:</span><span id="lan_ip" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>LAN Netmask:</span><span id="lan_mask" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>LAN MAC Address:</span><span id="lan_mac" class='rightcolumn'></span>
		</div>
		<div>
			<span class="rightcolumnonly"><div id="ports_table_container"></div></span>
		</div>
		<div class="internal_divider"></div>
	</div>

	<div id="wifi_container">
		<div>
			<span class='leftcolumn'>Wireless Mode:</span><span id="wireless_mode" class='rightcolumn'></span>
		</div>
		<div id="wireless_mac_div">
			<span class='leftcolumn'>Wireless MAC Address:</span><span id="wireless_mac" class='rightcolumn'></span>
		</div>
		<div id="wireless_apssid_div">
			<span class='leftcolumn' id="wireless_apssid_label">Access Point SSID:</span><span id="wireless_apssid" class='rightcolumn'></span>
		</div>
		<div id="wireless_apssid_5ghz_div">
			<span class='leftcolumn' id="wireless_apssid_5ghz_label">5GHz Access Point SSID:</span><span id="wireless_apssid_5ghz" class='rightcolumn'></span>
		</div>
		<div id="wireless_otherssid_div">
			<span class='leftcolumn' id="wireless_otherssid_label">SSID Joined By Client:</span><span id="wireless_otherssid" class='rightcolumn'></span>
		</div>
		<div class="internal_divider"></div>
	</div>

	<div id="services_container">
		<div>
			<span class='leftcolumn'>QoS Upload:</span><span id="qos_upload" class='rightcolumn'></span>
		</div>
		<div>
			<span class='leftcolumn'>QoS Download:</span><span id="qos_download" class='rightcolumn'></span>
		</div>
	</div>

</fieldset>

<script>
<!--
	resetData();
//-->
</script>

			</div>
			<div id="main_bottom"></div>
		</div>
		<div id="nav_external_container" onClick="return true">
			<div id="nav_top"></div>
			<div id="nav_internal_container1">
				<div id="nav_internal_container2">
					<div class="nav_internal_end1"></div>
					<div class="nav_selected_divider_end1"></div>
					<div class="nav_selected_end1">
						<div class="nav_selected_container_end1">
							<a id="selected_header_link" a onClick="return true">
								<div class="selected_header">Status</div>
							</a>
							<div id="submenu_container">
								<div class="submenu_selected">Overview</div>
								<a href="/bandwidth.sh">Bandwidth Usage</a>
								<a href="/bandwidth_distribution.sh">B/W Distribution</a>
								<a href="/webmon.sh">Web Usage</a>
								<a href="/qos_distribution.sh">QoS Distribution</a>
								<a href="/hosts.sh">Connected Hosts</a>
								<a href="/conntrack.sh">Connection List</a>
							</div>
						</div>
					</div>
					<div class="nav_selected_divider2"></div>
					<div class="nav_unselected_container">
						<div class="nav_unselected">
							<a href="/basic.sh" onClick="return true">Connection</a>
						</div>
						<div class="unselected_submenu_container">
							<a href="/basic.sh">Basic</a>
							<a href="/dhcp.sh">DHCP</a>
							<a href="/openvpn.sh">OpenVPN</a>
							<a href="/ddns.sh">Dynamic DNS</a>
							<a href="/routing.sh">Routing</a>
							<a href="/wol.sh">Wake on LAN</a>
						</div>
					</div>
					<div class="nav_unselected_divider"></div>
					<div class="nav_unselected_container">
						<div class="nav_unselected">
							<a href="/port_forwarding.sh" onClick="return true">Firewall</a>
						</div>
						<div class="unselected_submenu_container">
							<a href="/port_forwarding.sh">Port Forwarding</a>
							<a href="/connlimits.sh">Connection Limits</a>
							<a href="/restriction.sh">Restrictions</a>
							<a href="/quotas.sh">Quotas</a>
							<a href="/qos_upload.sh">QoS (Upload)</a>
							<a href="/qos_download.sh">QoS (Download)</a>
						</div>
					</div>
					<div class="nav_unselected_divider"></div>
					<div class="nav_unselected_container">
						<div class="nav_unselected">
							<a href="/access.sh" onClick="return true">System</a>
						</div>
						<div class="unselected_submenu_container">
							<a href="/access.sh">Router Access</a>
							<a href="/identification.sh">Identification</a>
							<a href="/time.sh">Time</a>
							<a href="/plugins.sh">Plugins</a>
							<a href="/usb_storage.sh">USB Storage</a>
							<a href="/printers.sh">USB Printer</a>
							<a href="/backup.sh">Backup / Restore</a>
							<a href="/update.sh">Update Firmware</a>
							<a href="/reboot.sh">Reboot</a>
							<a href="/about.sh">About</a>
						</div>
					</div>
					<div class="nav_unselected_divider"></div>
					<div class="nav_unselected_container">
						<div class="nav_unselected">
							<a href="/logout.sh" onClick="return true">Logout</a>
						</div>
					</div>
					<div class="nav_unselected_divider_end2"></div>
					<div class="nav_internal_end2"></div>
				</div>
			</div>
			<div id="nav_bottom"></div>
		</div>
	</div>
	<div id="outer_footer"></div>
</body>
</html>

Now if you verify this code on https://validator.w3.org you will see only 3 errors. Suprisingly, 1 of them is a goof up in the code:

Code: Select all

<a id="selected_header_link" a onClick="return true">

So step one is confirmed working. Step 2+ are the hard ones. I'll start with framework next, which means removing all css and starting from scratch. That build took forever. Ran out of diskspace on my VM so had to do it a second time with a new VM on debian 8 64bit with 100GB HDD space.

Will rebuild rebuild that last build I made? or do I have to specify the chipset again?

[Lantis]

Specify chipset again.
Also this time don't do a FULL_BUILD=true.
I believe cause you're just messing with the gargoyle package itself you can do this and save significant time.