Web front-end for an ethernet PIC SBC

I now have a basic web interface with a PIC SBC. It uses ajax to get simple text based information back and forth between the SBC and the browser. This blog looks at building the web front-end to interact with the SBC in a more user-friendly way.
With the limited resources of a PIC, it makes sense to move all the user interface logic to the browser. This will leave just the bare functions within the PIC while still having a reasonably rich UI. Nothing beats understanding a UI by trying it out. Use a dummy version of it to see how it works and study the associated HTML and javascript to explore its inner workings.

As mentioned in a previous blog, the web pages use SPA and ajax. This allows the entire web front-end logic to consist of one html file and one javascript file. There is no page to page navigation involved. All interaction is handled by manipulating the page on display. Unlike some SPA front-ends, no HTML is fetched to build pages. The only interaction with the SBC is fetching the raw data behind a page.

Modes of Operation

There are three modes of operation.

• Acquire Mode
  This mode allows you to sample an existing IR signal and capture its format characteristics. Most remote control devices use a single coding scheme for a device and vary the data sent based on the function.
• Learn Mode
  Once the characteristics of an IR signal format have been captured, the next step is to get the data for each function. This mode allows you to sample an IR signal for a specific function and assign it to the function. This mode is also used to add new Manufacturers, Device Types and Functions.
• Send Mode
  This mode allows you to send IR commands to a device. The functions available on the device and the IR commands have already been captured.

The pages are designed so that all data can be manually entered without having the remote control handy if you can obtain the information from another source.

Home Page

Most of the time, all you wanna do is to operate the unit in send mode. A dropdown lets you pick any of the devices. The keyboard below changes to fit the device controls.

The Learn Mode and Acquire Mode can be selected in the dropdown. Selecting the Learn Mode takes you to the Device Selection Page. Selecting the Acquire Mode takes you to the Acquire Page.

Device Selection Page

This page allows you to select a combination of the Manufacturer and the Device Type. If IR codes for a device are already stored, it will appear as a combination in the dropdown. If it does not, select New Device. Then you can select a Manufacturer and Device Type individually. If either does not exist, you can enter a new one. These are then stored back to the PIC SBC.

Pressing OK takes you to the Learn Mode page.

Learn Mode Page

This page allows you to assign an IR code to a Function name. Press the Read button and then press the corresponding button on your remote control. The results will be be processed and the data extracted. This data is displayed and you can assign it to one of the functions displayed in the table alongside. If the function does not already exist, it allows you to enter a new one and then assign it.

The IR code format is also extracted and displayed. If the code is unknown, an error message is displayed. You can then move onto the next function or press Analyse and go to the Analyse Mode.

Acquire Mode Page

This page is used to analyse a new IR signal format and extract the signal characteristics. Press the Acquire button and press any button on the IR remote control. The details of existing coding schemes are listed for reference.

The characteristics of the signal captured and the waveform are displayed. You can then press the Copy command to copy the values into the fields below. These are the values that get saved eventually. You can then tweak the values and press the Redisp button to see the resulting waveform. The two waveforms can be compared to see the effect of the tweaks. You will also need to enter a name for the coding scheme and the number of repetitions (at the moment, the PIC does not capture this). Once you are happy with the values, you can press Save to save the coding scheme.

Future Enhancements

While the pages themselves do not fetch any HTML elements, the entire raw data is re-fetched after each change. This can get a bit inefficient and I might look at improving it later.

Most interaction with the application from a tablet or smartphone may not go beyond the first page. The rest of the pages are setup related and likely to be used on a bigger screen. It may be worth having a mobile version of the first page - especially for small screens.