Adding new elements to LuCI
This is a sample to show how to add a new element to the LuCI interface
NOTE: Some of the information provided in this Wiki might be redundant from http://luci.subsignal.org/trac/wiki/Documentation/ModulesHowTo
As the examples show in the LuCI wiki, here are 2 ways to do this:
- CBI
- View (Template)
Adding a new top level tab
First we are going to add a new tab to the top navigation. Normally one can see: Freifunk | Status | System | Services | Network, etc
One can do this by adding a file to the controller directory in your <luci-path>/applications/luci-myapplication/luasrc/controller/myapp
<luci-path> is the path of your LuCI source files
luci-myapplication is a new directory created for these examples. The name of the directory has to start with luci- so that it is recognized by make menuconfig and show up as a module to be compiled.
controller is the default directory for any UI control (i.e. new tab)
myapp is also a custom directory for this particular application
We will call this file new_tab.lua
The content is as follows:
module("luci.controller.myapp.new_tab", package.seeall) – notice that new_tab is the name of the file new_tab.lua
function index()
entry({"admin", "new_tab"}, firstchild(), "New tab", 30).dependent=false – this adds the top level tab and defaults to the first sub-tab (tab_from_cbi), also it is set to position 30
entry({"admin", "new_tab", "tab_from_cbi"}, cbi("myapp-mymodule/cbi_tab"), "CBI Tab", 1) – this adds the first sub-tab that is located in <luci-path>/luci-myapplication/model/cbi/myapp-mymodule and the file is called cbi_tab.lua, also set to first position
entry({"admin", "new_tab", "tab_from_view"}, template("myapp-mymodule/view_tab"), "View Tab", 2) – this adds the second sub-tab that is located in <luci-path>/luci-myapplication/view/myapp-mymodule and the file is called view_tab.lua, also set to the second position
end |
Adding the cbi_tab code
As specified above, we need to create a file called cbi_tab.lua in <luci-path>/luci-myapplication/model/cbi/myapp-mymodule
We will include the following code:
m = Map("cbi_file", translate("First Tab Form"), translate("Please fill out the form below")) – cbi_file is the config file in /etc/config
d = m:section(TypedSection, "info", "Part A of the form") – info is the section called info in cbi_file
a = d:option(Value, "name", "Name"); a.optional=false; a.rmempty = false; – name is the option in the cbi_file
return m |
Adding the cbi_file
From the code above, we know we need a config file that has the appropriate sections and options. In our case, we will create the file cbi_file in /etc/config which looks like this:
config 'info' 'A'
option 'name' 'OpenWRT' |
Adding the view_tab code
The view_tab.lua file needs to go in <luci-path>/applications/luci-myapplication/luasrc/model/cbi/myapp-mymodule/
Here are the contents of the file:
<%+header%> – default header
<% local ice_cream = luci.model.uci.cursor():get("ice_cream", "tub", "flavor") %> – store the ice cream flavors in the ice_cream variable from the config file ice_cream with type tub and list flavor
<% local eating = luci.model.uci.cursor():get("current", "ice", "flavor") %> – store the current flavor you are eating in the eating variable from the config file current with type ice and option flavor
<div class="cbi-map" id="cbi-ice_cream"> – formatting to look like the other pages
<h2><a id="content" name="content">Ice Cream Information</a></h2>
<div class="cbi-map-descr">This is the selected ice cream flavor</div>
<fieldset class="cbi-section" id="cbi-ice_cream-flavor">
<legend>Ice Cream Flavor</legend>
<div class="cbi-section-descr"></div>
<ul><li> Flavor <%=eating%></li></ul> – use the eating variable to display the current flavor being eaten
</fieldset>
<br></br>
<div class="cbi-map-descr">These are the available flavors at your location</div>
<fieldset class="cbi-section" id="cbi-ice_cream-flavor>
<legend>Available Ice Cream Flavor</legend>
<div class="cbi-section-descr"></div>
<ul><li> <%= table.concat(ice_cream, "</li><br /><li> ") %></li></ul></fieldset> – use the ice_cream available flavors to display them
</div>
<%+footer%> – default footer
|
doc/devel/luci.txt · Last modified: 2013/02/01 04:43 by slickkitten
This text is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.