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 ConfigurationInterface ),由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+"   "+hours+":"+minutes+":"+seconds+"   "+week;
      document.getElementById("date1").innerHTML = "Welcome To Switch    " + newDate;//在div中写入时间
      setTimeout('getTime()', 500);//每隔500ms执行一次getTime()
    }
    script>
    
    <title>Welcometitle>
    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 rainmarquee> <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)