{"id":9751,"date":"2022-06-21T13:53:07","date_gmt":"2022-06-21T13:53:07","guid":{"rendered":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/"},"modified":"2025-03-25T05:18:34","modified_gmt":"2025-03-25T05:18:34","slug":"webui","status":"publish","type":"page","link":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/","title":{"rendered":"Webui"},"content":{"rendered":"\n <p><br><\/p><div class=\"toc-macro client-side-toc-macro  conf-macro output-block\" data-headerelements=\"H1,H2,H3,H4,H5,H6,H7\" data-hasbody=\"false\" data-macro-name=\"toc\"> <\/div><h2 class=\"wp-main-header wp-block-heading\">Introduction<\/h2><p>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 &amp; SNMP. A user can monitor and modify RDK-B feature settings\/rules using WebUI. It is a client&ndash;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.<\/p><h2 class=\"wp-main-header wp-block-heading\">Architecture<\/h2><p>This is the architecture of WebUI component.<\/p><p>    \n\n<\/p><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/webui%20architecture.drawio.png\"><p>Figure 1. WebUI Architecture<\/p><p>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. &#8220;cosa.so&#8221; [ 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.<\/p><p>Core functions that interact with RDK-B&rsquo;s components are:<\/p><ul><li><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">getStr(Obj)<\/pre><ul><li><p>GET value by Object name<\/p><\/li><\/ul><\/li><li><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">setStr(Obj, Value, Flag)<\/pre><ul><li><p>SET value by Object name<\/p><\/li><\/ul><\/li><li><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">getInstanceIDs(Obj)<\/pre><ul><li><p>GET table indexes as string of &ldquo;,&rdquo; separated values<\/p><\/li><\/ul><\/li><li><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">DmExtGetInstanceIds(Obj)<\/pre><ul><li><p>GET table indexes as an array<\/p><\/li><\/ul><\/li><li><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">addTblObj(RootObj)<\/pre><ul><li><p>Create new index in a table<\/p><\/li><\/ul><\/li><li><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">delTblObj(RootObjIndex)<\/pre><ul><li><p>Delete an existing index in a table<\/p><\/li><\/ul><\/li><li><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">DmExtGetStrsWithRootObj(RootObj, ObjArray)<\/pre><ul><li><p>GET values by Object name and Index<\/p><\/li><\/ul><\/li><li><pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">DmExtSetStrsWithRootObj(RootObj, Flag, 2D-Array)<\/pre><ul><li><p>SET values by Object name and Index<\/p><\/li><\/ul><\/li><\/ul><p>Flow diagram for getStr(Obj):<\/p><p>    \n\n<\/p><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/Flow%20diagram%20for%20getStr%28Obj%29.drawio.png\"><p><br><\/p><p>Flow diagram for setStr(Obj, Value, Flag):<\/p><p>    \n\n<\/p><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/Flow%20diagram%20for%20getStr%28Obj%2C%20Value%2C%20Flag%29.drawio.png\"><p><br><\/p><p>Note:&nbsp;The name Zend refers to the language engine [ PHP&#8217;s core ]<\/p><h2 class=\"wp-main-header wp-block-heading\">Features&nbsp;<\/h2><h3 class=\"wp-sub-header\">Gateway<\/h3><p>At a Glance, Connection Status, Local IP Network, Wi-Fi, MTA, MoCA, Firewall IPv4 \/ IPv6, Software, Hardware, etc.<\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/Gateway_atglance.jpg\"><\/span><\/p><h3 class=\"wp-sub-header\">Connected Devices<\/h3><p>Connected Devices and Range Extenders<\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/connected%20devices.jpg\"><\/span><\/p><h3 class=\"wp-sub-header\">Parental Control<\/h3><p>Managed Sites, Managed Services, Managed Devices and Reports<\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/parental_control-managed%20sites.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/parental_control_managedservice.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/parental_control_manageddevices.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/parental_control_reports.jpg\"><\/span><\/p><p><br><\/p><h3 class=\"wp-sub-header\">Advanced<\/h3><p>Port Forwarding, Port Triggering, Remote Management, DMZ, Device Discovery.<\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/advanced_portforwarding.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/Advanced_porttriggering.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/advanced_remotemanagement.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/advanced_dmz.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/advanced_Device_Discovery.jpg\"><\/span><\/p><p><br><\/p><h3 class=\"wp-sub-header\">Troubleshooting<\/h3><p>Troubleshooting Logs, Diagnostic Tools, Wi-Fi Spectrum Analyzer, MoCA Diagnostics, Reset\/Restore Gateway, Change Password, etc.<\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/Troubleshooting_logs.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/Troubleshooting_Network_Daignostic_tools.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/Troubleshooting_wifi_spectrum_analyzer.jpg\"><\/span><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/Troubleshooting_moca_Daignostics.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/Troubleshooting_Reset_Restore%20Gateway.jpg\"><\/span><\/p><p><br><\/p><p><span class=\"confluence-embedded-file-wrapper confluence-embedded-manual-size\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/sites\/16\/2023\/09\/Troubleshooting_changepassword.jpg\"><\/span><\/p><p><br><\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<\/p><p>Note: Only MSO has access to monitor \/ modify Email Notification (Gateway -&gt;&nbsp;At a Glance, Wi-Fi Home Security and Community Wi-Fi<\/p><p><br><\/p><h2 class=\"wp-main-header wp-block-heading\">Code Flow<\/h2><h3 id=\"Webui-WebUIontheDevice:\">WebUI on the Device:<\/h3><ul><li>&ldquo;\/etc\/webgui.sh&rdquo; will modify &ldquo;\/etc\/lighttpd.conf&rdquo; on runtime and create &ldquo;\/tmp\/lighttpd.conf&rdquo;<\/li><li>Command to run lighttpd is &ldquo;lighttpd &ndash;f \/tmp\/lighttpd.conf&rdquo;<\/li><li>&ldquo;cosa.so &rdquo; is linked as an extension to &ldquo;php&rdquo; in &ldquo;\/etc\/php.ini&rdquo;<\/li><li>document-root = &ldquo;\/usr\/www\/&rdquo;<\/li><li>Inside &ldquo;\/usr\/www\/&rdquo; we have,<ol><li>actionHandler folderhandles PHP SET actions<\/li><li>cmn folder has css, fonts, img and js [Styling &amp; JS Lib]<\/li><li>includes folder has header.php, footer.php. nav.php, userbar.php and utility.php<\/li><\/ol><\/li><\/ul><h3 id=\"Webui-WebUIonRDK-BYoctoRepo\">WebUI on RDK-B Yocto Repo<\/h3><ul><li>On RDK-B, Web UI source code resides in the path &ndash;<\/li><\/ul><p><a href=\"https:\/\/code.rdkcentral.com\/r\/plugins\/gitiles\/rdkb\/components\/opensource\/ccsp\/webui\/+\/refs\/heads\/rdk-next\/source\/Styles\/xb3\/code\/\" class=\"external-link\" rel=\"nofollow\">&nbsp; code.rdkcentral.com\/rdkb\/components\/opensource\/ccsp\/webui\/generic\/source\/Styles\/xb3\/code<\/a><\/p><ul><li>During build time &ldquo;code&rdquo; folder is moved to &ldquo;\/usr\/www\/&rdquo;<\/li><li>On yocto for build we can have specific target and what to build<\/li><\/ul><p>$ repo init -u https:\/\/code.rdkcentral.com\/r\/manifests<\/a>&nbsp;-b rdk-next -m rdkb-extsrc.xml<br>$ repo sync -j4 &#8211;no-clone-bundle<\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; $ source meta-cmf-raspberrypi\/setup-environment (Select option raspberrypi-rdk-broadband.conf)<\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; $ bitbake rdk-generic-broadband-image<\/p><p>&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;$ bitbake &ndash;c compile &ndash;f lighttpd<\/p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$ bitbake &ndash;c compile &ndash;f ccsp-webui<\/p><p class=\"with-breadcrumbs\"><br><\/p><p>For details on WebUI Migration to jst,&nbsp; go to <a href=\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui_migration_to_jst\/\" rel=\"nofollow\">WebUI Migration to jst<\/a><\/p><p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction WebUI is a graphical user interface that is available to the connected devices. It [&hellip;]<\/p>\n","protected":false},"author":28,"featured_media":0,"parent":9575,"menu_order":31,"comment_status":"open","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"class_list":["post-9751","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Webui - RDK Documentation Portal | Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Webui - RDK Documentation Portal | Documentation\" \/>\n<meta property=\"og:description\" content=\"Introduction WebUI is a graphical user interface that is available to the connected devices. It [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/\" \/>\n<meta property=\"og:site_name\" content=\"RDK Documentation Portal | Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-25T05:18:34+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/\",\"url\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/\",\"name\":\"Webui - RDK Documentation Portal | Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/developer.rdkcentral.com\/documentation\/#website\"},\"datePublished\":\"2022-06-21T13:53:07+00:00\",\"dateModified\":\"2025-03-25T05:18:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/developer.rdkcentral.com\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Documentation\",\"item\":\"https:\/\/developer.rdkcentral.com\/documentation\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"RDK Broadband\",\"item\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Components\",\"item\":\"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Webui\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/developer.rdkcentral.com\/documentation\/#website\",\"url\":\"https:\/\/developer.rdkcentral.com\/documentation\/\",\"name\":\"RDK Documentation Portal | Documentation\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/developer.rdkcentral.com\/documentation\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Webui - RDK Documentation Portal | Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/","og_locale":"en_US","og_type":"article","og_title":"Webui - RDK Documentation Portal | Documentation","og_description":"Introduction WebUI is a graphical user interface that is available to the connected devices. It [&hellip;]","og_url":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/","og_site_name":"RDK Documentation Portal | Documentation","article_modified_time":"2025-03-25T05:18:34+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/","url":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/","name":"Webui - RDK Documentation Portal | Documentation","isPartOf":{"@id":"https:\/\/developer.rdkcentral.com\/documentation\/#website"},"datePublished":"2022-06-21T13:53:07+00:00","dateModified":"2025-03-25T05:18:34+00:00","breadcrumb":{"@id":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/webui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/developer.rdkcentral.com\/documentation\/"},{"@type":"ListItem","position":2,"name":"Documentation","item":"https:\/\/developer.rdkcentral.com\/documentation\/"},{"@type":"ListItem","position":3,"name":"RDK Broadband","item":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/"},{"@type":"ListItem","position":4,"name":"Components","item":"https:\/\/developer.rdkcentral.com\/documentation\/documentation\/rdk_broadband_documentation\/components\/"},{"@type":"ListItem","position":5,"name":"Webui"}]},{"@type":"WebSite","@id":"https:\/\/developer.rdkcentral.com\/documentation\/#website","url":"https:\/\/developer.rdkcentral.com\/documentation\/","name":"RDK Documentation Portal | Documentation","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/developer.rdkcentral.com\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/pages\/9751","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/users\/28"}],"replies":[{"embeddable":true,"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/comments?post=9751"}],"version-history":[{"count":6,"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/pages\/9751\/revisions"}],"predecessor-version":[{"id":11763,"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/pages\/9751\/revisions\/11763"}],"up":[{"embeddable":true,"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/pages\/9575"}],"wp:attachment":[{"href":"https:\/\/developer.rdkcentral.com\/documentation\/wp-json\/wp\/v2\/media?parent=9751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}