====== Building the MESHdesk firmware on LEDE to include LuCI ======
===== Introduction =====
  * 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.

---------------
===== Adding LuCI to the MESHdesk build =====
  * 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.

====   Install the LuCI package. ====
  * These instructions is to include the plain vanilla LuCI with your MESHdesk firmware.
<code bash>
cd ~/lede/source
./scripts/feeds update
./scripts/feeds install luci
</code>
  * 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.

====   Include 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.
<code bash>
#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
</code>
  * Under  ~/lede/source/feeds/luci/applications/luci-app-meshdesk/ create a **Makefile** with the following contents:
<file make 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
</file>
  * Under ~/lede/source/feeds/luci/applications/luci-app-meshdesk/luasrc/controller create **meshdesk.lua** controller with the following contents:
<file lua 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

</file>
  * Under ~/lede/source/feeds/luci/applications/luci-app-meshdesk/luasrc/model/cbi create **meshdesk.lua** CBI file with the following contents:
<file lua 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
</file>
  * 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:
<code bash>
#  -i :           Recreate the index only. No feed update from repository is performed.
~/lede/source/scripts/feeds update -i
</code>
  * Now we can install the application
<code bash>
~/lede/source/scripts/feeds install luci-app-meshdesk
</code>
  * 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.

====  Modify the LuCI 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.
<code bash>
~/lede/source/scripts/feeds install luci-theme-material
</code>
  * 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:
<code html>
 <a class="brand" href="#"><%=boardinfo.hostname or "?"%></a>
</code>
  * You might want to change it to this:
<code html>
<a class="brand" href="#">MESHdesk</a>
</code>
  * 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:
<code>
  <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>
</code>
  * You might want to change it to this:
<code html>
<footer class="mobile-hide">
           MESHdesk project 2016
</footer>
</code>
  * 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.

{{ :user_guide:md:luci-app-meshdesk.png?nolink |}}