Differences between revisions 26 and 27
Revision 26 as of 2014-11-01 23:40:10
Size: 7105
Comment: alixcab's all have 2014 splash with two offline exceptions
Revision 27 as of 2014-11-02 00:59:19
Size: 7115
Comment: add counts for buffalo and netgear ar71xx devices
Deletions are marked like this. Additions are marked like this.
Line 13: Line 13:
 * Next up, either the Buffalo WZR600DHP or the Netgear WNDR3800s.  * Next up, either the Buffalo WZR600DHP (22) or the Netgear WNDR3800s (16).

We're slowly (but surely!) implementing the SplashPage redesign efforts.

Splash Page 2014 Update

An effort to modernize our woefully dated splash page.

Progress as of November 2

  • Over the last 24 hours, 14 AlixCab network have had their firmware updated to r43140 with the new splash page. Only two deployed Alixes have not been updated: NodeBasementPub; NodeLabarre (both offline). Only one of the updates was botched sufficiently that it required a visit to correct (NodeGooseHollow had a two hour outage until I could drop in a replacement, I had muffed the (unused) private network configuration). NodeFreshPot seems to have a problem with its radio sensitivity. It might be a bad radio, or perhaps an antenna problem. I needs a look-see.

  • Next up, either the Buffalo WZR600DHP (22) or the Netgear WNDR3800s (16).

Next Steps as of Wed Oct 15th 2014

  • some new nodes have been installed with the New Splash Page
  • node Marshall
  • 18 nodes can be updated in the near term!!
  • Russell will start to flash routers when he has the time to do such
  • Russell estimates it will take three hours to reflash these 18
  • Steve will follow up with NodeYukonTavern to check on their contact info

Next Steps as of Wed Sep 24th 2014

Next Steps as of Wed Sep 17th 2014

  • contact node hosts describing the change that is coming to the splash page
  • Russell is going to flash widget at NodeTB and fifteen at NodeBarXV

  • Steve is going to assemble emails to node hosts using the template provided by Russell and information from the datamanager

Current status:

  • of 59 nodes scanned
  • 34 do not have the new splash page 25 do
  • most recent one is 'jodie' NodeFirstUnitarian on September 8th

Next Steps as of Wed Mar 5th 2014

  • contact node hosts describing the change that is coming to the splash page
  • default logo when node does not supply one
  • start using live donor data
  • plan to push to other nodes

The Code

The redesign uses a modern Single Page App approach to provide a rich HTML page which is augmented by logic, design and data from a ptp central server.

There are three code repositories used, each with a separate concern...

ptp-splash-page

https://github.com/personaltelco/ptp-splash-page

Containing the HTML, images, javascript, css and fonts which live on the router. It makes calls to...

ptp-splash-server

https://github.com/personaltelco/ptp-splash-server

Containing the javascript, css and images which are served from a central server. It in turn gets data from...

ptp-api

https://github.com/personaltelco/ptp-api

A Nodejs server which gathers data from various sources and offers them up via a RESTFUL api.

Technologies Used

  • nodejs - in addition to it's role as the server for ptp-api, node is used to support the development and build environments for ptp-splash-page and ptp-splash-server

  • npm - node's little buddy the Node Packaged Modules tool downloads the modules for each code base and places them in node_modules

  • bootstrap - an HTML and css design framework that helps to build single page apps targeting multiple devices and screen sizes

  • jquery - a javascript DOM manipulation swiss army knife

  • fontawesome - an iconography library to add nice icons to bootstrap designs

  • dustjs - a handlebars style templating tool

  • async - js asynchronous workflow library

  • grunt - a javascript 'task runner' to automate development chores including

    • compiling templates
    • combining and minifying javascript
    • combining and minifying css

The Lifecycle of a Page Load from the Browser Perspective

  • The typical user experience as documented in SplashPage applies (captured by captive portal)

  • The HTML page loads from the router
  • ptp-splash-page.min.js loads from the router
  • ptp-splash-server.min.js loads from a central ptp server (on donk at this time)
  • the Document.load event is issued
  • json is loaded from ptp-api and combined with dust templates
  • these combined elements are then added dynamically to the DOM
  • upon successful load, the 'news' navigation element is added to the page

If the browser can't load ptp-splash-server.min.js, then it will fail well and serve a respectable splash page which provides the basics of terms of service, node information and a click through to the internet.

How this happened

In late 2012 and early 2013 BenjaminFoote (bfoote) had the idea of trying to improve the splash page. He wasn't the first and he won't be the last.

We started gathering some requirements in NewCaptivePortalFeatures and there was a review of other efforts including SplashPageRedesign NodeSplashPages MobileSplash.

Then bfoote went off and traveled for a while.

In late 2013 after returning to Portland bfoote went and started in on the redesign in earnest. It became a labor of love.

completed tasks

  • setup ptp-api and ptp-splash-server (see github) reverse proxied through ptp's Apache SSL server
  • integrate htdocs output of ptp-splash-spage into ptp-openwrt-files
  • setup Lucky Lab Overlook as first public node hosting the splash page by March 24th
  • debug font serving issues (nocat auth)

SplashPage2014 (last edited 2014-11-10 02:02:02 by RussellSenior)