Feature #251

Implement network configuration in settings page of web server

Added by Hammel about 7 years ago. Updated almost 7 years ago.

Status:ClosedStart date:24 Nov 2013
Priority:UrgentDue date:
Assignee:Hammel% Done:


Category:04 - Root File System
Target version:0.7.0
Severity:04 - Low


This requires the following basic steps.
  1. Port bui-network-config file management into piboxd
  2. Port bui-network-config UI as a javascript-based front end with CSS
  3. Define the piboxd protocol for passing data from the front end to the backend.

Associated revisions

Revision af8a2bd0
Added by Hammel almost 7 years ago

RM #251: Updated protocol to support request/reply for network configuration (re: settings page).

Revision 502a25dd
Added by Hammel almost 7 years ago

RM #251, RM #236: Migration to simplified UI design. Initial (but unfinished) support for configuring network.

Revision bc8d0114
Added by Hammel almost 7 years ago

RM #251: Initial support (but incomplete) of web-based network configuration.
This supports loading network interface names and their configurations along
with DNS configuration (MA_GETIFLIST, MA_GETIF, MA_GETDNS).

Revision d1400e84
Added by Hammel almost 7 years ago

RM #251: Fix page reload when changing the interface selection.

Revision c080e017
Added by Hammel almost 7 years ago

RM #251: Implement clearIt() to clear static fields.

Revision 5ad9ddd8
Added by Hammel almost 7 years ago

RM #251: Fix test for NOCONFIG when building interface specific display.

Revision 1dfe4295
Added by Hammel almost 7 years ago

RM #251: Add IP check function. Code cleanup - tabs to spaces.

Revision 230dc6cc
Added by Hammel almost 7 years ago

RM #251: Add save handling for IPV4 page and network mode.
Add pop up dialog for messaging to user.
Changed Clear to Reset.
Handle mode setup on page load.

Revision e036bdd0
Added by Hammel almost 7 years ago

RM #251: Implement save functionality for IPV4 page and network mode.
Change use of "name" to "id" in appropriate places.
Add support for getting/setting network mode.

Revision 0aaf5e55
Added by Hammel almost 7 years ago

RM #251: Added styling for new pop up dialog in settings page.

Revision 8a19169b
Added by Hammel almost 7 years ago

RM #251: Added support for saving IPV4 configuration and getting/setting network mode.
Added unit tests for new functionality.
Updated valgrind.sh to allow more detailed output.

Revision 9ed3ffaa
Added by Hammel almost 7 years ago

RM #251: Moved all javascript for settings page to its own js file.
Completed support for wireless client and access point pages.

Revision b5a298e0
Added by Hammel almost 7 years ago

RM #251: Fixed timed test script to allow running any set of tests provided by the unit test script.

Revision cc8dcdbc
Added by Hammel almost 7 years ago

RM #251: Completed support for get/set for wireless client and access point.
Added unit tests to validate this support.
Fixed minor memory leaks in stream handling.
Added missing test data file for testing access point support.

Revision da084b11
Added by Hammel almost 7 years ago

RM #251: Added filter support for PHP.

Revision 09528ccf
Added by Hammel almost 7 years ago

RM #251: Don't allow setting network config on remote browsers, only on a local host browser.

Revision 64041fea
Added by Hammel almost 7 years ago

RM #251: Fix checkbox display in Midori.
Fix mode radio buttons in Midori.
Remove PiBox banner on Settings page - it overlaps the display on small monitors.


#1 Updated by Hammel about 7 years ago

  • Status changed from New to In Progress
  • % Done changed from 0 to 10

jQueryUI can be used for the UI since bui-network-config has very few widget requirements. The download allows for building a custom library and theme. I've chosen the Humanity theme as it has a nice plain but slightly autumny coloring. There is a small getting started guide on the jQuery web site.

#2 Updated by Hammel almost 7 years ago

An alternative to jQueryUI is Bootstrap. There are other alternatives as well.

I need to find something that provides layout capabilities. In jQueryUI you need additional plugins. More jQuery plugins

#3 Updated by Hammel almost 7 years ago

  • % Done changed from 10 to 20

I've started writing a new settings page with jQuery and idTabs (I may integrate jQueryUI later). From this I'm implementing the backend php to send a request to a modified piboxd which now has some stubs from bui-network-config. Unit tests show that piboxd is handling a new NET request correct and returning the list of available interfaces (the first stub implemented).

I need to test that the php makes the proper request and gets back the data I expect from piboxd. I can do this by building new packages for:
  1. piboxd
  2. piboxwww

Then testing that access to the web page causes generated of the proper list of interfaces in the new settings page.

#4 Updated by Hammel almost 7 years ago

Initial update has been pushed to support this in both piboxd and piboxwww. These now support MA_GETIFLIST, MA_GETIF, MA_GETDNS, which means the web interface can now
  1. get a list of available interfaces
  2. get the configuration of each interface by name
  3. get the current dns configuration.

There is still much work to be done, but the UI for the IPV4 page is now complete. It just needs functions implemented for each feature/button.

Next up:
  1. Fix Enable radio buttons to be set based on interface configuration.
  2. Fix php (as needed) to change configuration if interface option is changed. This already has javascript for it but I think it needs to switch from document.location.href to window.location.
  3. Implement clear button to clear visible fields.
  4. Implement save button to collect and submit field data.

#5 Updated by Hammel almost 7 years ago

  • % Done changed from 20 to 90

The web interface along with server side and piboxd updates are completed. This includes unit tests for updates to piboxd and assorted javascript and php on the web server side. It all seems to work quite well.

However, I realized when doing this that I was passing a clear text password via the Javascript. There is no good way to encrypt this (though there are some close options) so I decided to limit configuration of the device to only local browser access. To do this I need to added javascript in index.html to request that content to display. The server will test the IP of the requesting browser and if it matches the RPi then it will allow access to the settings page. If not, only the webcam streaming will be provided.

Once this final addition is added this issue can be closed.

#6 Updated by Hammel almost 7 years ago

Updated index.html to support testing where the browser is located to determine which functions to provide. This works, but the display is not clean when running midori on the RPi. I still need to clean this up, either by fixing up the content or by using a different browser. I only have two browsers: midori and surf. Midori displays it incorrectly (radio and check buttons are misaligned) and surf crashes on it. I'll either need a different browser or figure out why midori doesn't work and/or surf crashes.

#7 Updated by Hammel almost 7 years ago

midori 0.5.2 (latest available from xfce download site, which is where it's being retrieved from currently by buildroot) performs the same as the 0.4.6 version. So no help there.

#8 Updated by Hammel almost 7 years ago

Latest surf requires a patch to remove a previously applied patch. Once that's done, I can build from git. This version doesn't crash. However, it displays the same problems that midori has. So this may just be a problem with my code. Specifically, it may be a problem with the css. I'll have to play with it to try and clean up the radio buttons on the wireless client and access point pages, as well as making the box around the mode buttons larger (or the font smaller).

Kind of sucks that this is the case. I don't have this problem on android or in Firefox. Looks like it may be a WebKit bug since both midori and surf are based on webkit. I may be able to verify by installing midori on my desktops but that will require hacking around the recent update to prevent the settings page from showing up on non-localhost browsers.

#9 Updated by Hammel almost 7 years ago

I found that I don't need to update midori. The problem was that midori interpreted the CSS for the checkbox fields differently than firefox. The fix was to apply a "width:100%" definition that applied only to text input and select fields, not to checkbox input fields. That fix is applied and pushed.

The bui-network-config UI is now ported to the piboxwww tree and and the backend code is ported to piboxd. All that's left is to switch from bui-network-config in the desktop menus to Midori (or Surf) launched to the localhost:2001 URL. Surf would be better since it doesn't give an option to move to a different URL.

#10 Updated by Hammel almost 7 years ago

  • Target version changed from 0.8.0 to 0.7.0

#11 Updated by Hammel almost 7 years ago

  • Status changed from In Progress to Closed
  • % Done changed from 90 to 100

Verified implemented and working for wireless client case. Not fully tested with respect to running as an access point. Will make that a different issue so 0.7.0 can be released.

Closing this issue.

Also available in: Atom PDF