Introduction to WebUI

WebUI is a graphical user interface that is available to the connected devices. It acts as an application running on the RDK-B stack and performs the functions of a device management interface similar to TR69 & SNMP. A user can monitor and modify RDK-B feature settings/rules using WebUI. It is a client–server application, client runs in a web browser (as part of devices connected over LAN) and Lighttpd on the RDK-B stack acts as server.

The functions in WebUI are defined in C and are called from PHP using ZEND_API. PHP and the Zend Engine manage [exchange] variables internally over the D-Bus.

Architecture

This is the architecture of WebUI component.

...

WebUI component uses HTML and JavaScript on Client side [ browser ] and PHP on Server side [ Lighttpd ]. Zend Engine (ZE) analyses the input code, translates it, and executes it. PHP is functionality of the language (its functions, classes, etc.) and interface is the part that talks to the Web server. "cosa.so" [ ZEND library ] is loaded at runtime using the extension tag in php.ini. In case of Dual core architecture, separate Lighttpd instances run on each core and one will act as a proxy.

Core functions that interact with RDK-B’s components are:

• getStr(Obj)

  • GET value by Object name

• setStr(Obj, Value, Flag)

  • SET value by Object name

• getInstanceIDs(Obj)

  • GET table indexes as string of “,” separated values

• DmExtGetInstanceIds(Obj)

  • GET table indexes as an array

• addTblObj(RootObj)

  • Create new index in a table

• delTblObj(RootObjIndex)

  • Delete an existing index in a table

• DmExtGetStrsWithRootObj(RootObj, ObjArray)

  • GET values by Object name and Index

• DmExtSetStrsWithRootObj(RootObj, Flag, 2D-Array)

  • SET values by Object name and Index

Flow diagram for getStr(Obj):

...

As part of TinyRDK initiative, WebUI is developed in Java script using duktape as JavaScript engine with a focus on portability and compact footprint. All php pages will be in Java script. User interface remains the same.

What is duktape and why it is required?

• Duktape is a lightweight javascript engine (https://duktape.org/).
• Alone it does not provide a web development engine. Therefore, a template engine(called jst) and web server api is built on top of duktape.
• Duktape provides an API to bind javascript to C functions.

Focus on migration                    

• To make migration as easy as possible the template and api signature will match php as closely as possible.  
• Many php functions and variables will be rewritten in javascript, so that changes to the exits code are minimized.
• The template engine will provide the same features as php's basic templating where php code, embedded in <?php...?> tags, can be mixed with raw html. 
• The pages are jst pages and the script tags are <?% ... %>, which is similar to other engines like EJS and JavaServer pages.

How jst changes are handled in code?

• All the pages in php are converted to jst by compiling and running the script build_php2jst.sh.
• With latest code , jst is enabled by default in CMF using DISTRO_FEATURES.

Flow diagram for setStr(Obj, Value, Flag):

...

Features 

Gateway

At a Glance, Email Notification, Connection Status, Local IP Network, Wi-Fi, MTA, MoCA, Firewall IPv4 / IPv6, Software, Hardware, etc.

Image Removed

Connected Devices

Connected Devices and Range Extenders

Image Removed

Parental Control

Managed Sites, Managed Services, Managed Devices and Reports

Image Removed

Advanced

Port Forwarding, Port Triggering, Remote Management, DMZ, etc.

Image Removed

Troubleshooting

Troubleshooting Logs, Diagnostic Tools, Reset/Restore Gateway, Change Password, etc.

Image Removed

• Only MSO has access to monitor / modify Email Notification, Wi-Fi Home Security and Community Wi-Fi

Note: The name Zend refers to the language engine [ PHP's core ]

Code Flow

WebUI on the Device:

• “/etc/webgui.sh” will modify “/etc/lighttpd.conf” on runtime and create “/tmp/lighttpd.conf”
• Command to run lighttpd is “lighttpd –f /tmp/lighttpd.conf”
• “cosa.so” is linked as an extension to “php” in “/etc/php.ini”
• document-root = “/usr/www/”
• Inside “/usr/www/” we have,
  1. actionHandler folderhandles PHP SET actions
  2. cmn folder has css, fonts, img and js [Styling & JS Lib]
  3. includes folder has header.php, footer.php. nav.php, userbar.php and utility.php

WebUI on RDK-B Yocto Repo

• On RDK-B, Web UI source code resides in the path –

...

• Recipe files in source code
  meta-rdk-broadband/recipes-ccsp/ccsp/ccsp-webui-jst.bb
  meta-rdk-ext/recipes-support/duktape/duktape_2.2.0.bb
  meta-rdk-broadband/recipes-ccsp/ccsp/jst.bb
• Webui jst source code is available at

• rdkb/components/opensource/ccsp/webui/

...

• source/Styles/xb3

...

• /jst
• Files in GW

jst file path - /usr/www2
css, img, js, syndication partner logo - /usr/www2/cmn/
set actions are handled in /usr/www2/actionHandler
javascript implementation for php api - /usr/www2/includes/php.jst

• "/etc/webgui.sh" will modify "/etc/lighttpd.conf" on runtime and create "/tmp/lighttpd.conf"

...

• During build time “code” folder is moved to “/usr/www/”
• On yocto for build we can have specific target and what to build

$ repo init -u https://code.rdkcentral.com/r/manifests -b rdk-next -m rdkb-extsrc.xml
$ repo sync -j4 --no-clone-bundle

        $ source meta-cmf-raspberrypi/setup-environment (Select option raspberrypi-rdk-broadband.conf)

        $ bitbake rdk-generic-broadband-image

        $ bitbake –c compile –f lighttpd

...