Add an entry to LuCi web interface

You are here:
Estimated reading time: 2 min

Create the LuCi application files

It is also possible to add entries to OpenWrt’s web interface that will allow you to generate custom configuration files for your applications.

Following the folder structure defined for the Maestro vagrant box, add a new application:

mkdir -p ~/workspace/packages/tutorial/luci-helloworld/src

Register the new node that will be created

This section will determine where the new entry will be placed within the web interface menu. In this case, the entry will be added to Maestro Dev > Hello World.

Create the following directory:

mkdir -p ~/workspace/packages/tutorial/luci-helloworld/src/usr/lib/lua/luci/controller

Create a ‘helloworld.lua’ file:

touch ~/workspace/packages/tutorial/luci-helloworld/src/usr/lib/lua/luci/controller/helloworld.lua

Paste the following content in the newly created file:

module("luci.controller.helloworld", package.seeall)

function index()
        if not nixio.fs.access("/etc/config/helloworld") then
                return
        end

        local page

        entry({"admin", "maestro-tutorial"}, firstchild(), "Maestro Dev", 60).dependent = false
        page = entry({"admin", "maestro-tutorial", "helloworld"}, alias("admin", "maestro-tutorial", "helloworld", "settings"), _("Hello World"), 1)
        page.dependent = true
        page = entry({"admin", "maestro-tutorial", "helloworld", "settings"}, cbi("helloworld/helloworld"), _("Settings"), 1)
        page.dependent = true
end

Add the form component

A model script is also needed for the new configuration page. This script is responsible of creating the web form that will allow the user to select the desired settings.

Create the needed directory:

mkdir -p ~/workspace/packages/tutorial/luci-helloworld/src/usr/lib/lua/luci/model/cbi/helloworld

Create a ‘helloworld.lua’ file:

touch ~/workspace/packages/tutorial/luci-helloworld/src/usr/lib/lua/luci/model/cbi/helloworld/helloworld.lua
Paste the following content in the newly created file:
m = Map("helloworld", translate("Helloworld"))

s = m:section(TypedSection, "helloworld", translate("Settings"))
s.anonymous = true

name = s:option(Value, "name", "Name", "Enter your name")

greeting = s:option(ListValue, "greeting", "Greeting")
greeting:value("hi", "Hello")
greeting:value("bye", "Goodbye")

return m

This script will add the form to the HTML page. Only two elements are being added; name (an input box) and greeting (a drop down list with two options).

Create the shell script to be run

This shell script will be executing every time the settings of the app are updated from the web interface, i.e. when the user clicks on Save & Apply.

Create the directory:

mkdir -p ~/workspace/packages/tutorial/luci-helloworld/src/usr/sbin

Create a ‘helloworld.sh’ file:

touch ~/workspace/packages/tutorial/luci-helloworld/src/usr/sbin/helloworld.sh

Paste following content into the newly created file:

#!/bin/sh

name=$(uci get helloworld.@helloworld[0].name)
greeting=$(uci get helloworld.@helloworld[0].greeting)

if [ "$greeting" == "hi" ]; then
    echo "Hello, $name" >> /tmp/helloworld.txt
else
    echo "Goodbye, $name" >> /tmp/helloworld.txt
fi

Make sure that the script has execution privileges:

chmod u+x ~/workspace/packages/tutorial/luci-helloworld/src/usr/sbin/helloworld.sh

Define the default behaviour on Save & Apply

It is needed to define what actions to perform when the user clicks on Save & Apply after editing the settings of the application.

Create the following directory:

mkdir -p ~/workspace/packages/tutorial/luci-helloworld/src/etc/uci-defaults

Create a ‘luci-helloworld’ file:

touch ~/workspace/packages/tutorial/luci-helloworld/src/etc/uci-defaults/luci-helloworld

Paste following content into the newly created file:

#!/bin/sh

uci -q batch <<-EOF >/dev/null
	del ucitrack.@helloworld[-1]
	add ucitrack helloworld
	set ucitrack.@helloworld[-1].exec="/usr/sbin/helloworld.sh"
	commit ucitrack
EOF

rm -rf /tmp/luci-indexcache /tmp/luci-modulecache

exit 0

Make sure the file has execution privileges:

chmod u+x ~/workspace/packages/tutorial/luci-helloworld/src/etc/uci-defaults/luci-helloworld

Add the config file

It is also needed to add the config file so it is copied to the router’s filesystem when installing the application:

mkdir -p ~/workspace/packages/tutorial/luci-helloworld/src/etc/config
touch ~/workspace/packages/tutorial/luci-helloworld/src/etc/config/helloworld

With your favourite text editor, add the following content to the file helloworld you have just created:

config helloworld

Create a package for the application

Create the manifest file for the package:

touch ~/workspace/packages/tutorial/luci-helloworld/Makefile

Paste following content into the Makefile:

include $(TOPDIR)/rules.mk

PKG_NAME:=luci-helloworld
PKG_VERSION:=1.0.0
SOURCE_DIR:=./src

include $(INCLUDE_DIR)/package.mk

define Package/$(PKG_NAME)
  SECTION:=LuCI
  CATEGORY:=MaestroDev
  SUBMENU:=Tutorial
  TITLE:=LuCI helloworld
endef

define Package/$(PKG_NAME)/description
LuCi Hello World package.
endef

define Build/Compile
endef

define Package/$(PKG_NAME)/conffiles
/etc/config/helloworld
endef

define Package/$(PKG_NAME)/install
        $(CP) $(SOURCE_DIR)/* $(1)
endef

define Package/$(PKG_NAME)/postinst
endef

define Package/$(PKG_NAME)/prerm
endef

$(eval $(call BuildPackage,$(PKG_NAME)))

Follow the instructions detailed in the Build and test the package article to compile your package and install it into the router.

Test the package

After having installed the package, reboot your router. This is needed so the script defined in the uci-defaults folder is loaded properly (this is only done once during the boot process).

After rebooting the device, log in to the web interface and go to ‘Maestro Dev > Hello World’:

web interface

Enter the desired settings and click on Save & Apply at the bottom. After doing that, get SSH access to the router and check the contents of the file /tmp/helloworld.txt:

cat /tmp/helloworld.txt
Hello, MaestroDev
Goodbye, MaestroDev

Please, continue to the next article: Packaging a service.

Was this article helpful?
Dislike 1 1 of 2 found this article helpful.
Views: 2348
Back to Top