Simple pruning of OpenWRT Luci interface

Mainly about Luci, and how to modify the Luci interface, does not involve the change of the page style and the background of the interaction Requires knowledge, LUA language, Html,css,uci,linux basic operations 1.A brief introduction to Luci Luci is the default Web interface for OpenWrt, but the trunk or other version of the development package that we started to download does not contain Luci. I download on the official website is openwrt-master, hereinafter referred to as OPENWRT. Since OpenWrt is not Luci by default, we need to download Luci first. According to the development document of the official website Luci, we can execute it under openwrt/ $./scripts/feeds update-a After the list of updates is finished, execute $./scripts/feeds install-a You can also change-A to Luci this will only upgrade Luci, install Luci. 。。 In the OpenWrt development must use the ordinary user, cannot use the root user to operate. When we want to modify the Luci source code is mainly in the following folder to modify And since we are compiling the main use of the default Luci interface (Luci has 4 kinds of Web style to choose) So we just need to modify the files below the Luci-base and Luci-mod-admin-full directories. However, we can directly modify the file behind the router, so that we can preview the effect of the modification more quickly. 2.A brief introduction to the  Luci architectures Luci uses the MVC architecture of the web framework. M refers to Moduel (some source package is model), C refers to the CONTROLLER.V refers to the View.luci In fact, it is the Lua scripting language and the UCI unified Configuration interface collectively. This means that the original OPENWRT provides the UCI API so that you can easily modify the OpenWrt configuration file, whether it is to create, read, modify, deleted. And the UCI command can be implanted into shell scripts and C or LUA scripts. Lua scripts are smaller and run at around 1/30 of the C language. So you'll find that most of the/usr/lib/lua/luci are LUA scripts, It is these LUA scripts that generate the Web pages that we see. We can modify the page by mainly modifying the Lua script below/usr/lib/lua/luci/controller and/USR/LIB/LUA/LUCI/MODEL/CBI. When we visit 192.168.1.1 in the browser, we first visit/www/index.htm, then its <meta> tag is immediately jump to/www/cgi-bin/luci (Luci This is a script that is used to start/ Usr/lib/lua/luci the Lua script below). Then there's a script that should be Dispatcher.lua or Index.lua. Check the entry function for all LUA scripts under the Controller directory and generate a master page, Contains the navigation bar header list, logout, bottom footer. The controller is defined as the Entry function entry () and the Lua script or template () called the CBI () model. Call the HTM template under view. The role of controller is to make call control and so on. That is, the model is for business processing, for example, when the user enters the account password, the/etc/ Config file to modify it. If the controller calls the HTM template for the view, it is displayed directly. Luci is the use of the Lua script to invoke the HTM template and the combination of people that generate a static HTML file so that we can access. 3. into the router background modify the Luci file First of all, we're using $ ssh root@192.168.1.1 To connect to the router, you can connect to the router in a wired or wireless manner, but be aware that the router is turned on wirelessly before using a wireless connection. OpenWrt can only have one root user and the default IP address of most routers is 192.168.1.1, so $ ssh hostname@ip we write $ ssh root@192.168.1.1. However, there are times when remote connections occur We go to the. ssh/directory to delete the know_hosts file or delete the contents. When we successfully connected to the OpenWrt backstage, it will appear This is OpenWrt's backstage directory. And Luci's files are mostly placed under/www and/usr/lib/lua/luci. In addition to the index.htm and Cgi-bin/luci scripts, the/www directory is also stocked with navigation bars header.htm and footer.htm as well as some CSS files, javascript files, icons,gif and other images. We can Usr/lib/lua/luci/view the following HTM template, but if you want to change the style, you can change the style from the CSS file under/www. 4.Step-by-step modification Luci In the first step, we first modify the interface we see first. If we learn the front end, we know that when we visit a server, we first visit index.html (since Luci uses the HTM suffix, the following will use the HTM suffix, which is different from the HTM version). Luci's index.htm is below/www/. We see that the index.htm<meta http-equiv= "Refresh" content= "0; Url=/cgi-bin/luci "/> This is directed to the/www/cgi-bin/luci script, which begins to invoke the Lua script of other files to produce the page we see. This is an HTM page, so we can modify the page just like the HTM file. Modified as follows, when we visit the router, we see a relatively large LCE link <?xml version= "1.0" encoding= "Utf-8"?> <! DOCTYPE HTML PUBLIC "-//w3c//dtd XHTML 1.1//en" "Http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > <meta http-equiv= "Cache-control" content= "No-cache"/> <meta http-equiv= "Refresh" content= "0; Url=/cgi-bin/luci "/> <style type= "Text/css" > Body { width:100%; } div { margin-left:15%; Text-align:center; Text-decoration:none; width:70%; padding-top:200px; } A Text-decoration:none; font-size:200px; Font-family:arial,helvetica,san-serif; Color: #808080; } </style> <body style= "Background-color:white" > <div> <a href= "/cgi-bin/luci" >l C e</a> </div> </body> The second step: when the page is finished, the login screen is entered. The login interface is only the root user's password. Because OpenWrt is a single-user system, it is only the root user. By looking for a file, we find that the login interface is called/usr/lib/lua/luci/view /sysauth.htm. Since OpenWrt is a single user system, in fact you will find that the user name that column is not able to modify the root user name, that is, we do not want the user name can also. So for brevity, We removed the username column. and remove the reset button. Reset because we do not need to use, so you can actually directly put the HTM inside the <input><%:reset%></input> Delete the line. However, the username cannot do this. Because you need to verify the username and password when you log in, that is, it is necessary to verify that the user name is root and that the password is correct before you can log in. So, we also have to make sure that the user name of root is sent to the system for processing. We can include the username <div></div> tag plus <div style= "Display:none" ></div&gt, that is, the user name to be hidden away. The third step: first, we first learn how others add NJIT client page, fast learning. Http://www.cnblogs.com/mayswind/p/3468124.html Learning link, the source can view the contents of the LUCI-APP-H3C folder. So simply put, the first step needs to be in controller/admin/ Here's a LUA script to explain where the page you created will appear on the Luci page. What's the title? What are you going to call? (function, Lua under model, or the HTM template for view). Module ("Luci.controller.admin.network", Package.seeall)//This is a must have, explains where your Lua script is, it generates the page, it is necessary to check this sentence first. Function index () Entry ({"admin", "Network", "H3C"}, CBI ("H3C"), _ (title), order) End Here it is, we want to add a H3C page below the network list under admin (an entire page). Then the page shows the title, and the order sequence. This is the order of the network, and if you delete the "network", H3C appear in the first-level directory, where the order is in the order of the first-level directories. And the CBI means calling the Lua script below/usr/lib/lua/luci/model/cbi/. Call () is called the function defined below Template () is to call the/usr/lib/lua/luci/view/below the HTM file, but to refer to other entry functions to modify the path. Post () seems to be similar to call, but the call () is used under the breaker development environment, so the Luci of the two versions of Openwrt-master and trunk cannot be replaced directly by breaker Luci, Otherwise, he'll prompt post. The function is not yet defined. Well, when we fix the Luci page catalog problem, we always want our page to show something, and what we show is not defined in the Lua script below Controller/amdin, but in model/cbi/'s Lua script or view/ The HTM template defines the. We still use the NJIT client example to illustrate how to modify the page, we look at model/below the H3c.lua Require ("Luci.sys") m = Map ("H3C", Translate ("Campus network Authentication"), Translate ("Please enter your campus network account number and password.")) s = m:section (typedsection, "Login", "") S.addremove = False S.anonymous = True Name = S:option (Value, "username", translate ("username")) pass = S:option (Value, "password", Translate ("password")) Pass.password = True Local apply = Luci.http.formvalue ("cbi.apply") If Apply Then Io.popen ("Sh/etc/init.d/njitclient") End return m The first sentence is still to have, because the Lua language reference is require ("XXX"), so the first sentence is to include Luci/sys.lua The second sentence, that is, you want to modify/etc/config/h3c this file, and then the page H2 title is the campus network certification, in fact, write English can also, but to add a translation in PO/ZH-CN. But we started off with a default Chinese page, but it's better to start with an English page , because there are no translated pages that will allow you to find the code you want faster. Then it shows you which section to modify. Config Login Option username ' root ' Option Password ' admin ' OpenWrt the format of the following config file is like this, But there's something like that. Config login h3c Option username ' root ' Option Password ' admin ' What's the difference between the two? The difference is S = m:section (typedsection, "Login", "") This sentence how to write, if it is the first section, you need to use typedsection. This is telling the system that you want to find a section called login according to the type, and then a description "", This note appears on the Luci interface. But under Config Network this config file The section inside it is like this Config Interface Wan Option Ipadder "" Config Interface LAN Option DNS "" Obviously, if you still use typesection, the system will find two sections so that 2 or more input boxes will appear on top of the Luci. That's when we need to use the namedsection. s = m:section (namedsection, "Wan", "") To select the section of the WAN Name = S:option (Value, "username", translate ("username")) pass = S:option (Value, "password", Translate ("password")) Pass.password = True Then these two sentences are to choose the corresponding option to modify, but to change the password into ******* Local apply = Luci.http.formvalue ("cbi.apply") If Apply Then Io.popen ("Sh/etc/init.d/njitclient") End Then, if you press the app to save, it triggers the/etc/init.d/njitclient script, which is used to start the Njitclient program. Finally returns M, showing the entire page. The following LUA modifications in the model can be changed directly in the browser refresh view, but modifications made under controller you need to reboot the router to see the changes. Finally, we add a h3c config file under/etc/config/and add a njitclient script below/etc/init.d/. So a njitclient page is added successfully. 5.follow the example of Njitclient, continue to modify other pages We want to hide some pages, a relatively simple way is to comment out the entry function Entry ({"admin", "system"}, alias ("admin", "System", "system"), _ ("System"), "("). "Index = True --Entry ({"admin", "System", "system"}, CBI ("Admin_system/system"), _ ("System"), 2) --Entry ({"admin", "system", "Clock_status"}, post_on ({set = true}, "Action_clock_status")) This and comment off the system this level two directory also has clock_status this directory, Lua's annotation method Line Comment-- Block Annotations--[[]]-- Another way is to directly delete the controller/admin/below the Lua script, such as delete I to Status.lua, then the status of the entire directory will not appear, and there is no error, why delete the status instead of the other? Because status mainly shows various information of the whole router, However, these information collection functions are not defined or called by the status. That is, deleting Status.lua directly does not affect the system's data collection. It does not affect the normal function of the router. But System.lua and Network.lua are not recommended to delete directly, For example, if you put too many entry functions in the Network.lua to comment out, there will be a problem, unable to collect data, so that if the program needs some data will not work properly. Because we have said that the entry function can actually use call () to invoke the following functions. When we comment out some of the entry functions, the page becomes simple, but it is best to comment out, rather than simply deleting the entry function, because sometimes we still need to see how other entry functions are written, which files are called, and which functions are called. 6.functions of the other pages to move over I thought the network directory was too complex to set up, so I deleted the network. But I still have to keep the network below the wireless to modify the SSID and the encryption method, as well as the password settings. Page = entry ({"admin", "Network", "Wireless_join"}, Post ("Wifi_join"), nil) Page.leaf = True Page = entry ({"admin", "Network", "Wireless_add"}, Post ("Wifi_add"), nil) Page.leaf = True Page = entry ({"admin", "Network", "Wireless_delete"}, Post ("Wifi_delete"), nil) Page.leaf = True Page = entry ({"admin", "Network", "Wireless_status"}, Call ("Wifi_status"), nil) Page.leaf = True Page=entry ({"admin", "Network", "Wireless_reconnect"}, Post ("Wifi_reconnect"), nil) Page.leaf = True Page=ntry ({"admin", "Network", "Wireless_shutdown"}, Post ("Wifi_shutdown"), nil) Page.leaf = True Page=entry ({"admin", "Network", "Wireless"},arcombine ("Admin_network/wifi_overview"), CBI ("Admin_network /wifi ")), _ (" WiFi "), 15) Page.leaf = True Page.subindex = True Analysis Controller/admin/network.lua The following code, as well as the page above, we should need is Wifi_add this entry function, called the Wifi_add function, but it is not very helpful. But we're in the/model/cbi/. admin_network/below but see WiFi this LUA script. We can find the modified SSID and encryption method, as well as the section of the password, as long as we write to add to the H3C/model/cbi/h3c.lua below, This way the Njitclient page will have an input box to modify the SSID and encrypt it. We still need a cat to/etc/config/wireless what's changed to determine how we're going to write it, to verify that there is no change in the success. After the modification is complete, we can no longer need the network directory, but we have said that if you delete it directly, some of its functions are not called. This will also cause some data collection, This also causes some programs to not function properly. For example njitclient this program needs as long as we open WiFi use that one interface, although we know is eth.0 this interface, but because the data collection is not the interface, there is no write to the config file inside, So the program can not find that we use the interface, it will cause the program can not run. But we can move the rest of the network's entry function and the following functions all to the system's LUA script. So the page can still be displayed normally, but notice that the network in entry is replaced with system, Otherwise, you will not find the network directory. 7.This is a bit special, we need to check the Njitclient's running log But what we've learned for the moment is how to use Luci to modify the config file, which means we don't seem to have much of a way of looking at other files. But since we're all looking at log files, there's a good example of that, which is the System log page. This page is just a simple title system log and a text box displays the syslog. However, the original is not very simple. Entry ({"admin", "status", "Syslog"}, Call ("Action_syslog"), _ ("System Log"), 4) This entry function is the entry function for system log inside the Status.lua. Call ("Action_syslog")//Invoke the following function called Action_syslog It's obvious that you're reading system log. function Action_syslog () Local syslog = Luci.sys.syslog () Luci.template.render ("Admin_status/syslog", {syslog=syslog}) End But how can so few things be called? As we said, including a LUA file is require "Luci.sys" Then it will be used, Luci.sys.syslog () This is called a function called the syslog () under Luci/sys.lua. function Syslog () Return luci.util.exec ("Logread") End When we found it, it was still very short, because it called the function again. Call the EXEC () function below/luci/util.lua function exec (command) Local PP = io.popen (command) Local data = Pp:read ("*a") Pp:close () Return data End The original is to enter a command, so simple, OK, we Google to find out that Logread was originally a Linux command to read the system log. Then we change the logread to LS to try to find that Luci above system log really shows LS out of the content, that is to say we change the order can be. Is there any command to read the other logs? Sorry, the log itself is text, and there is no such command, but we can modify into Cat/tmp/log/text.log OK, so the system log appears to be the content of Text.log. So we followed the entry function of the system log and the HTM template for templates, and we wrote a njitclientlog.htm and a njitclient log entry function. A njitclient log page appears on top of the Luci. 8.summary Now we have learned how to add a page, how to add a page input box, and so on, also through the comments to hide the page we do not want, but also learned to use a command to read the log, you can also use the template () to call a page to add a page we want to display things ( However, this page is very difficult and the system to interact with the data, but we modify it much more convenient, do not need to use the Luci template). Finish this. If you want to further modify the Luci interface, you can modify the CSS file, the CSS file located under/www/luci-status/resources/cbi/, and some pictures. These are some of the document descriptions for adding and removing Luci, and the changes to the CSS files and JavaScript files. See below for what the Lua script can add to the model below. Class Map (Config,title,description) – This is the first map that we need to join and the last one that needs to be return. Classnamedsection? (name,type,title,description) – A section that can be selected by name Classtypedsection? (type,title,description) – Section selected by type Class Value (Option,title,description) – One of the most commonly used elements is the normal input box Classlistvalue? (option,title,description) – There is no doubt that this is a drop-down box Class Flag (Option,title,description) – This is a check, which is a selection box that can be checked or not Classmultivalue? (option,title,description) – Multiple selection boxes Classdummyvalue? (option,title,description) – This is nothing, just output text Classtextvalue? (option,title,description) – This is the usual memo, which is a text input area. Class Button (Option,title,description) – button, click to submit the form, you can detect the element to perform different actions. Classdynamiclist? (option,title,description) These are incomplete and do not describe exactly, but you can try to add them, see what the effect is. But the main use of map,namedsection,typesection,value. You can also refer to how other LUA files are written. There is the root of the Web page, when we start the/www/cgi-bin/luci this script, we may generate a Web page root directory, that is, the Web page can only be accessed by the content of the root directory of the page, that is,/www this folder, you will find the root directory of the Web page is www, In the HTM you invoke if you want to refer to a picture, then SRC cannot be written as src= "/www/luci-status/resources/icons/lodding.gif" and to write src= "/luci-status/resources/icons/lodding.gif" Https://wiki.openwrt.org/zh-cn/doc/techref/uci?s[]=luci#dokuwiki__top Https://wiki.openwrt.org/doc/devel/luci Http://www.cnblogs.com/mayswind/p/3468124.html For more official commentary, please refer to the official wiki of OpenWrt.