• LuCI is the standard Web User Interface that comes with OpenWRT.
• LuCI comes with a few themes to choose from.
• LuCI is easy to extend and uses MVC architecture.
• If the device you plan to install the MESHdesk firmware on has 8M Flash or more, you can include LuCI with the firmware.

• We assume you have followed the instructions in the Wiki Page to build the MESHdesk firmware using LEDE.
• The instructions on this page will be progressive, stating with the basics and then cover the more advanced things under their own heading.
• We start with the basics first.

• These instructions is to include the plain vanilla LuCI with your MESHdesk firmware.

cd ~/lede/source
./scripts/feeds update
./scripts/feeds install luci

• Run the make menuconfig pattern.
• Go to LuCI → Collections select to include luci.
• By selecting this collection we ensure all the required dependent packages are automatically included.
• Save and exit the cursors interface.
• Run the make command and make sure it compiles fine.
• Next we will create a build with the meshdesk application.

• The LuCI package by default include some bundled applications. They are located under ~/lede/source/feeds/luci/applications/
• These applications are named according to the convention luci-app-<application name>.
• If we want to include any of these bundled applications, we have to do two things.
  • We need to install the application eg ./scripts/feeds install luci-app-coovachilli
  • We then need to select the application under the Luci configuration when we run the make menuconfig pattern.
  • In our case we will actually be adding our own application to the already existing bundles of applications.

#Create the following directories
mkdir ~/lede/source/feeds/luci/applications/luci-app-meshdesk/
mkdir ~/lede/source/feeds/luci/applications/luci-app-meshdesk/luasrc/
mkdir ~/lede/source/feeds/luci/applications/luci-app-meshdesk/luasrc/controller
mkdir ~/lede/source/feeds/luci/applications/luci-app-meshdesk/luasrc/model
mkdir ~/lede/source/feeds/luci/applications/luci-app-meshdesk/luasrc/model/cbi

• Under ~/lede/source/feeds/luci/applications/luci-app-meshdesk/ create a Makefile with the following contents:

Makefile

#
# Copyright (C) 2008-2015 The LuCI Team <luci@lists.subsignal.org>
#
# This is free software, licensed under the Apache License, Version 2.0 .
#
 
include $(TOPDIR)/rules.mk
 
PKG_NAME:=luci-app-meshdesk
 
# Version == major.minor.patch
# increase "minor" on new functionality and "patch" on patches/optimization
PKG_VERSION:=5.0.0
 
# Release == build
# increase on changes of translation files
PKG_RELEASE:=5
 
PKG_LICENSE:=Apache-2.0
PKG_MAINTAINER:=Dirk van der Walt   <dirk@mymail.com>
 
# LuCI specific settings
LUCI_TITLE:=LuCI Support for MESHdesk firmware
LUCI_DEPENDS:=+luci-mod-admin-full
LUCI_PKGARCH:=all
 
define Package/$(PKG_NAME)/config
# shown in make menuconfig <Help>
help
        $(LUCI_TITLE)
        .
        Version: $(PKG_VERSION)-$(PKG_RELEASE)
        $(PKG_MAINTAINER)
endef
 
include ../../luci.mk
 
# call BuildPackage - OpenWrt buildroot signature

• Under ~/lede/source/feeds/luci/applications/luci-app-meshdesk/luasrc/controller create meshdesk.lua controller with the following contents:

meshdesk.lua

-- Copyright 2016 Dirk van der Walt <dirk@mymail.com>
-- Licensed to the public under the Apache License 2.0.
 
module("luci.controller.meshdesk", package.seeall)
 
function index()
        local cc
        cc = entry( { "admin", "system", "meshdesk" },       cbi("meshdesk"),         _("Cloud Controller"),                90)
end

• Under ~/lede/source/feeds/luci/applications/luci-app-meshdesk/luasrc/model/cbi create meshdesk.lua CBI file with the following contents:

meshdesk.lua

m = Map("meshdesk", translate("Cloud Controller"), translate("Supply the following details"))
 
        d = m:section(NamedSection,"settings", "settings","Activation" )  -- info is the section called info in cbi_file
                a = d:option(ListValue, "mode", "Mode");
                a.optional=false;
                a.rmempty = false;
                a:value("off","OFF");
                a:value("mesh","Mesh");
                a:value("ap","AP");
 
        local s_internet = m:section(NamedSection,"internet1","internet","Settings");
                local protocol = s_internet:option(ListValue,"protocol", "Protocol");
                protocol:value("http","HTTP");
                protocol:value("https","HTTPS");
                local ip = s_internet:option(Value,'ip','IP Address','IP Address of Cloud Controller');
 
m.on_parse = function(self)
        -- all written config names are in self.parsechain
        local current_mode = uci.get("meshdesk", "settings", "mode");
        local new_mode  = a:formvalue("settings")
        if(current_mode ~= new_mode)then
                if(new_mode == 'off')then
                        nixio.fs.copy("/etc/MESHdesk/configs/wireless_original","/etc/config/wireless");
                        nixio.fs.copy("/etc/MESHdesk/configs/network_original","/etc/config/network");
                end
        end
end
 
return m

• Now we completed all the files needed for our LuCI application.
• Next we need to inform our build environment about this new kid on the block.
• For this we issue the following command:

#  -i :           Recreate the index only. No feed update from repository is performed.
~/lede/source/scripts/feeds update -i

• Now we can install the application

~/lede/source/scripts/feeds install luci-app-meshdesk

• Run the make menuconfig pattern and go to LuCI → Applications and select luci-app-meshdesk.
• At this stage you also might want to check that the mode of the MESHdesk firmware is set to off as specified in the initial instructions on the different mode options.
• This will ensure you can reach the device on the LEDE default IP Address 0f 192.168.1.1 on the LAN port.
• Save this changes and do another make to confirm it compiles right.
• Next we will cover the changing and modifying of the theme.

• LuCI comes by default with the Bootstrap theme.
• Themes are like fashion, and music, what is hot today is old news in a year or two.
• The current cool theme is Material and LuCI has a Material theme available for us to use.
• Again like the LuCI applications we have to first install the theme and then select it.

~/lede/source/scripts/feeds install luci-theme-material

• Run make menuconfig and go to Luci → Collections.
• Deselect luci. This will allow you to go back one step and de-select the luci-theme-bootstrap and select luci-theme-material under Themes.
• Save the configuration and do another make to confirm it compiles right.
• You might want to do some of your own branding on the header and the footer of the theme.
• For the header edit the following file: ~/lede/source/feeds/luci/themes/luci-theme-material/luasrc/view/themes/material/header.htm.
• Look for this bit:

 <a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>

• You might want to change it to this:

<a class="brand" href="#">MESHdesk</a>

• For the footer edit the following file: ~/lede/source/feeds/luci/themes/luci-theme-material/luasrc/view/themes/material/footer.htm.
• Look for this bit:

  <footer class="mobile-hide">
                    <a href="https://github.com/openwrt/luci">Powered by <%= ver.luciname %> (<%= ver.luciversion %>)</a> /
                    <a href="https://openwrt.org/"><%= ver.distversion %></a>
                    <% if #categories > 1 then %>
                    <ul class="breadcrumb pull-right" id="modemenu">
                        <% for i, r in ipairs(categories) do %>
                        <li<% if request[1] == r then %> class="active"<%end%>><a href="<%=controller%>/<%=r%>/"><%=striptags(translate(tree.nodes[r].title))%></a> <span class="divider">|</span></li>
                        <% end %>
                    </ul>
                    <% end %>
                </footer>

• You might want to change it to this:

<footer class="mobile-hide">
           MESHdesk project 2016
</footer>

• After these changes you can do the make routine to confirm it compiles.
• Once the compile if finish you can flash it and give it a spin. The Meshdesk application is refered to as Cloud Controller under the System menu.