Feature #251


Implement network configuration in settings page of web server

Added by Hammel over 9 years ago. Updated about 9 years ago.

04 - Root File System
Target version:
Start date:
24 Nov 2013
Due date:
% Done:


Estimated time:
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.
Actions #1

Updated by Hammel over 9 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.

Actions #2

Updated by Hammel over 9 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

Actions #3

Updated by Hammel over 9 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.

Actions #4

Updated by Hammel about 9 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.
Actions #5

Updated by Hammel about 9 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.

Actions #6

Updated by Hammel about 9 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.

Actions #7

Updated by Hammel about 9 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.

Actions #8

Updated by Hammel about 9 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.

Actions #9

Updated by Hammel about 9 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.

Actions #10

Updated by Hammel about 9 years ago

  • Target version changed from 0.8.0 to 0.7.0
Actions #11

Updated by Hammel about 9 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