openwrt之修改Luci界面

1. 名词解释

Lua：解释性脚本语言

openwrt实践 | Lua快速入门教程
Uci：(Unified Configuration Interface)，OpenWrt中为实现所有系统配置的一个统一接口，如/etc/config/network的部分配置
```
config interface 'loopback'
option ifname 'lo'
option proto 'static'
option ipaddr '127.0.0.1'
option netmask '255.0.0.0'
```
Luci：(Lua ConﬁgurationInterface )，由Lua实现的Openwrt网页系统配置接口

Openwrt开发与Luci介绍
MVC 框架：(model+view+controller )，要开发一个新的功能页面，开发者只要根据 MVC 框架写些简单的 Lua 脚本，剩下的部分由Openwrt为你自动完成
CBI：(Configuration Binding Interface)，CBI模型位于lua\luci\model\cbi

openwrt的CBI控件简单说明

luci cbi模块详解

2. 实例

在Luci界面上添加一个欢迎页面和两个按钮，并调用系统shell脚本控制舵机(硬件使用Widora)

第一步：/usr/lib/lua/luci/controller/admin/switch.lua中注册选模块

-- vim switch.lua
module("luci.controller.admin.switch", package.seeall)
function index()
    entry({"admin", "switch"}, firstchild(), "Light", 30).dependent=false
    entry({"admin", "switch", "welcome"}, template("switch"), _("Welcome"), 1) --调用view目录下的switch.htm文件
    entry({"admin", "switch", "on"}, call("turn_on"), _("TurnON"), 2) --调用函数
    entry({"admin", "switch", "off"}, call("turn_off"), _("TurnOFF"), 3)
end

function turn_on()  
luci.util.exec("/usr/pwm.sh 1500000") --运行脚本
end

function turn_off()  
luci.util.exec("/usr/pwm.sh 2500000") --运行脚本
end

第二步：在 view 目录下添加相应的 switch.htm 文件，以显示欢迎界面(网上随便抄一个)

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
function getTime() {

  var dateObj = new Date();

  var year = dateObj.getFullYear();//年
  var month = dateObj.getMonth()+1;//月  (注意：月份+1)
  var date = dateObj.getDate();//日
  var day = dateObj.getDay();
  var weeks = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
  var week = weeks[day];//根据day值，获取星期数组中的星期数。
  var hours = dateObj.getHours();//小时
  var minutes = dateObj.getMinutes();//分钟
  var seconds = dateObj.getSeconds();//秒

  if(month<10){
      month = "0"+month;
  }
  if(date<10){
      date = "0"+date;
  }
  if(hours<10){
      hours = "0"+hours;
  }
  if(minutes<10){
      minutes = "0"+minutes;
  }
  if(seconds<10){
      seconds = "0"+seconds;
  }

  var newDate = year+"-"+month+"-"+date+"&nbsp &nbsp"+hours+":"+minutes+":"+seconds+"&nbsp &nbsp"+week;
  document.getElementById("date1").innerHTML = "Welcome To Switch &nbsp &nbsp" + newDate;//在div中写入时间
  setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
}
</script>

<title>Welcome</title>
</head>
<body onload="getTime()">
  <div style="width:100%;text-align:center" id="date1"></div>
</body>

<body  text=#d22370  bgcolor=#282923>
<marquee direction=left>You say that you love rain</marquee> <p>
<marquee direction=right>but you open your umbrella when it rains...</marquee> <p>
<marquee direction =left behavior=scroll>You say that you love the sun,</marquee > <p>
<marquee direction=right>but you find a shadow spot when the sun shines...</marquee> <p>
<marquee direction =left behavior=scroll>You say that you love the wind,</marquee > <p>
<marquee direction =right behavior=scroll>But you close your windows when wind blows...</marquee > <p>
</marquee > <p>
</body>

</html>

第三步：编写pwm.sh脚本


#vim /usr/pwm.sh

cd /sys/class/pwm/pwmchip0
echo 0 > export
cd pwm0
echo 1 > enable
echo 20000000 > period
echo ${1} > duty_cycle
exit 0

#chmod 755 pwm.sh

重启生效

3. 其他参考

开发OpenWrt路由器上LuCI的模块
 OpenWrt Luci编写小技巧

openwrt之修改Luci界面

1. 名词解释

2. 实例

3. 其他参考

猜你喜欢