integrationofcustomwebuis intoopenwrt · implementation-frontend wifi device (mobile phone) router...
TRANSCRIPT
![Page 1: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/1.jpg)
OPENWRT SUMMIT 2017
Integration of custom Web UIsinto OpenWrtDavor Popović
![Page 2: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/2.jpg)
About the presenter
◦ Davor Popović
![Page 3: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/3.jpg)
![Page 4: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/4.jpg)
![Page 5: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/5.jpg)
Web UI
◦ Main communication with users
◦ Simplifies router setup and customization
◦ Displays router statistics and data
![Page 6: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/6.jpg)
Existing OpenWrt Web UI flavors
◦ LuCI
◦ LuCI 2
◦ Gargoyle
![Page 7: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/7.jpg)
Rolling your own Web UI
◦ Product differentiator
◦ UI/UX design
◦ Implementation
◦ Integration
![Page 8: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/8.jpg)
Product differentiator
◦ Define who will use the router
◦ Define how often the router will be used
◦ Define special HW or SW features
![Page 9: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/9.jpg)
Web UI/UX design
◦ Design based on target audience
◦ Importance of an experienced UX team
![Page 10: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/10.jpg)
Implementation - Back end
◦ Three utilities of interest in OpenWrt ecosystem
• ubus• UCI• rpcd
◦ Front end invoking different RPC calls to change routerbehavior
![Page 11: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/11.jpg)
Implementation - Back end
◦ Accessing and modifying UCI files – straightforward
◦ Additional functionallities – additional rpcd modules
• Using existing OpenWrt packages• Implementing your own
![Page 12: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/12.jpg)
Implementation - Front end
◦ Two development approaches:
• Directly from host PC• From host PC through proxy on host PC
![Page 13: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/13.jpg)
Implementation - Front end
WiFi device(mobile phone) Router PC / Laptop
Web
Proxy
Wired connection
Changes
WiFi connection
192.168.1.x:port request
![Page 14: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/14.jpg)
Implementation - Front end
◦ Development components:
• Bundler• JS Framework• HTML + CSS
◦ Example:
• Webpack + Vue.js + HTML & CSS preprocesors
![Page 15: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/15.jpg)
Integration
.js
.png
.css
.css OpenWrt package
.png
.js
.jsuci-defaults etc rpcd ...
.js
.json
Bundler
![Page 16: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/16.jpg)
Integration
◦ Potential hickups:
• Timeouts• Adding additional functionality (Captive Portal, Wizard, …)• Security considerations (e.g. cgi-bin)• 3rd party software bugs
![Page 17: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/17.jpg)
ExamplesSome Web UI design & functionality examples
![Page 18: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/18.jpg)
![Page 19: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/19.jpg)
![Page 20: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/20.jpg)
![Page 21: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/21.jpg)
![Page 22: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/22.jpg)
![Page 23: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/23.jpg)
![Page 24: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/24.jpg)
![Page 25: IntegrationofcustomWebUIs intoOpenWrt · Implementation-Frontend WiFi device (mobile phone) Router PC / Laptop Web Proxy Wired connection Changes WiFi connection 192.168.1.x:port](https://reader030.vdocuments.site/reader030/viewer/2022040912/5e87ecefad7cc302772c6064/html5/thumbnails/25.jpg)