juci, 用于运行OpenWRT的嵌入式设备的JUCI JavaScript Webgui

分享于 

25分钟阅读

GitHub

  繁體 雙語
LuCI version using angular.js
  • 源代码名称:juci
  • 源代码网址:http://www.github.com/mkschreder/juci
  • juci源代码文档
  • juci源代码下载
  • Git URL:
    git://www.github.com/mkschreder/juci.git
    Git Clone代码到本地:
    git clone http://www.github.com/mkschreder/juci
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/mkschreder/juci
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    用于嵌入式路由器的 JUCI Webgui

    
    Date: 19 Dec 2016
    
    
    Author: Martin K. Schröder <mkschreder.uk@gmail.com>
    
    
    
    

    更新:新的生成指令可用 !

    JUCI是为基于openwrt的嵌入式设备开发的现代网络界面。 它使用HTML5和 angular.js 构建,使用 web socket与 compact 和运行在嵌入式设备上的快速lua后端进行通信。 你可以独立地构建前端应用程序和后端服务器,并分别使用它们。

    OrangeRPCD项目,JUCI使用基于 web socket的后端RPC服务器,可以在这里找到: https://github.com/mkschreder/orangerpcd.git

    可以在以下位置找到HTML文档的JUCI文档: http://mkschreder.github.io/juci

    建议你从阅读juci如何工作的概述开始: http://mkschreder.github.io/juci/manual/how-juci-works.html

    JUCI Flash 和内存需求( 实际运行时使用情况):

    • ~5M Flash 用于完整的前端安装( 包括http服务器)
    • 用于后端rpc服务器的~160k Flash ( revorpcd )
    • 16M内存( revorpcd + lighttpd服务器)

    JUCI架构大致如下所示:

    JUCI Architecture

    JUCI前端是用 html5,angularjs和 Bootstrap 构建的:

    Desktop

    JUCI的主题可以和完全移动就绪( 响应):

    Mobile

    新闻

    juci的最新版本为 2.16.05. juci的最新版本是 2.16.02 ( 橙色 Sunrize )

    发行说明:

    • 删除了无法在OpenWRT上工作的插件。

    发行说明版本 2.16.03:

    • 将后端移到专用juci服务器,并删除了后端中ubus的依赖性( 请参阅 motivation below )。

    删除ubus依赖项( Feb )

    原始juci服务器使用ubus作为组织后端组件的主要方式。 这在juci项目启动时似乎是一个非常好的想法。 每个人都要把一切都准备好。 但随着时间的推移,good的pain。 我将试着解释"ubusifying"所有的below的含义。

    Ubus是一种出色的进程间通信系统。 但是,使用它来组织单个应用程序的组件是一个非常糟糕的想法。 它导致了最适合"微内核"设计的东西。 这甚至强制最简单的任务,比如检查用户是否拥有对某些资源的访问权限,以要求对参数( 两次) 进行序列化和反序列化。 Micokernel是没有区别的,因为它强制一切都是服务。 从经验来看,微核从来没有成功过,因为它们的性能非常明显,因为( 最后,你将大部分时间花在打包和解包消息上,而不是仅仅做简单的方法调用) 非常明显。

    所以最新版本的juci消除了所有无意义的rpc消息传递,取而代之的是实现一个lua后端服务器,并直接为所有已经安装的后端组件提供对rpc调用的所有必要的服务。 现在的后端组件不是所有的后端组件,而是直接调用后端服务器,这样做的效率会更高,然后所有不必要的内部调用都会变得更加高效。

    Ubus仍然支持,事实上你应该使用Ubus作为与系统上运行的它的他程序的通信方式。 但是,juci后端ubus的组件不再使用。 一个后端服务器目前是我所尝试的最好的解决方案。 我还尝试使用CGI和lua脚本,但对该解决方案的性能不太满意。 很重要的是能够支持大量的rpc调用和专门的juci服务器使这很容易做到。

    什么是 JUCI?

    如果为你提供以下信息:

    • 你的路由器只需运行核心函数( 可以用C 写) 和gui本身运行的浏览器完全是 inside。 你的路由器只计算和发送必要的信息。
    • 完全移动支持
    • 易于使用- 代码使用 angular.js 和 html5,使得将新的gui元素添加到gui中非常容易。
    • 完全控制和灵活性- 还有许多现成的组件: 允许你选择你想要开发的级别。 你的gui的外观和感觉没有限制。
    • 动态主题在运行时可以使用颜色主题。
    • 完整的语言支持- 允许你的gui完全本地化。 语言文件生成甚至是部分自动( html文本)。 还支持在页面上动态更改语言,无需重新加载应用程序。 在你可以看到当前使用的语言包中缺少哪些字符串的翻译模式中,还具有快速调试模式。

    如何支持 JUCI

    为了支持JUCI项目( 或者其他任何GPL项目),你可以在合同基础上雇佣JUCI开发者之一,帮助你开发你的产品。 你可以在GPL的条款下免费获得大量代码,而且你也可以在你的需求中增加大量新特性。 开发人员可能会根据他们的可用性,在你的项目中投入时间。 你可以克隆这里 repo 并运行 git shortlog命令来获取JUCI开发人员列表。

    
    git shortlog -s -e -n
    
    
    
    

    因为JUCI是以GPL的形式分发的,所以你还必须注意,任何功能都必须被定义。

    在上的使用

    下面是构建 user-mode-linux juci测试构建的方法。 对于其他架构,这些指令大部分是相同的( 除了uml选项)。 UML映像将整个系统作为主机上的单个可执行文件运行,因此你无需使用任何类型的模拟器。

    
    # go to your openwrt directory
    
    
    cd openwrt
    
    
    
    # do a full clean (at least delete all your feeds first because we will be overriding things)
    
    
    make distclean
    
    
    
    # add juci feed to feeds conf
    
    
    echo"src-git-full juci https://github.com/mkschreder/juci-openwrt-feed.git">> feeds.conf.default
    
    
    
    # update your feeds
    
    
    ./scripts/feeds update -a 
    
    
    
    # first install all juci packages with force flag
    
    
    ./scripts/feeds install -f -a -p juci
    
    
    
    # THEN install all openwrt packages
    
    
    ./scripts/feeds install -a
    
    
    
    # select a few top level packages
    
    
    cat>> . config
    
    
    CONFIG_TARGET_uml=y
    
    
    CONFIG_PACKAGE_juci-full-openwrt=y
    
    
    CONFIG_PACKAGE_orange-rpcd=y
    
    
    CONFIG_BUSYBOX_CUSTOM=y
    
    
    CONFIG_BUSYBOX_CONFIG_SHA1SUM=y
    
    
    ^D
    
    
    
    # fill out the rest of the selections
    
    
    make defconfig
    
    
    
    # build your image 
    
    
    make 
    
    
    
    # image will be in bin/uml
    
    
    
    

    测试映像之前,需要在主机上设置tuntap网络设备,以便能够连接到uml映像上的gui:

    
    # install user mode linux utils
    
    
    sudo apt-get install uml-utilities
    
    
    
    # create a tuntap network device
    
    
    sudo tunctl -n <your user id>
    
    
    
    # set ip address of our tap 
    
    
    sudo ifconfig tap0 192.168.2.254
    
    
    
    # enable ip forwarding 
    
    
    bash -c 'echo 1>/proc/sys/net/ipv4/ip_forward'
    
    
    
    # add route
    
    
    sudo route add -host 192.168.2.100 dev tap0
    
    
    
    

    现在你可以启动你的uml映像:

    
    cd openwrt/bin/uml/
    
    
    
    # starm uml image with tun tap network interface
    
    
    ./openwrt-uml-vmlinux ubd0=/data/software/openwrt-cc/bin/uml/openwrt-uml-ext4.img eth0=tuntap,tap0
    
    
    
    

    在openwrt中执行以下操作:

    
    # add orangerpcd user admin
    
    
    orangectl adduser admin
    
    
    
    # set password for juci user admin
    
    
    orangectl passwd admin admin
    
    
    
    # set network ip of openwrt to correct ip 
    
    
    uci set network.lan.ipaddr=192.168.2.100
    
    
    uci commit
    
    
    ubus call network reload
    
    
    
    # you will probably need to reboot because tuntap seems to be broken without it 
    
    
    poweroff
    
    
    
    

    现在再次重新启动uml映像,你应该能够使用浏览器在 192.168.2.100 处访问 gui。

    菜单将由juci-full-openwrt软件包uci缺省脚本自动配置。 如果你想在自定义固件中使用 JUCI,通常会创建一个自定义 metapackage,并根据自定义需求配置 JUCI。

    如果你转到路由器 ip,你应该看到登录屏幕。 默认情况下,管理员用户用于登录,但是如果你没有为管理员用户设置密码,你将无法登录。 然后进入控制台,设置管理员用户密码或者更改用于通过编辑/etc/config/rpcd 登录的用户,然后执行/etc/init. d/rpcd重启。

    如果不能登录,可能是你没有正确安装所有juci包。 JUCI需要经过修改的rpcd和uhttpd版本。 在没有使用"-f"选项安装提要的情况下,你将不会重写 rpcd,因这里你将无法登录。

    JUCI还包括一个nodejs服务器,你可以在本地测试和在测试( juci-local-server ) 期间将jsonrpc调用转发到路由器。

    GPL

    GPL Compatibility

    因为GPL是一个保护软件自由的许可证,所以JUCI项目选择 GPL。 软件自由意味着软件可以在世界各地移动,每个开发人员都可以自由地采用软件来解决他的特定问题。 但是,为了持久性和永久性,必须遵循这里软件的收件人也必须向它的他任何人提供相同的权限。

    GPL把这个想法变成了书面形式。 因这里,JUCI作为最灵活的自由许可以证,可以保护软件和你自由的自由。

    GPL ( 不考虑版本) 意味着你作为JUCI项目的用户,总是按法律来执行GPL软件四个自由:

    • 运行它的自由
    • 学习它的自由
    • 重新发布的自由
    • 可以根据自己的需要和自己的产品自由。

    你可以用这个软件做任何你想要的事,但是你不能把这些自由带出去。 这些自由由GPL授予你,只有在你从不将它们接收或者拒绝到它的他人时才允许这些自由。 而且你也必须保护那些可能试图把他们带走的人。

    捐赠

    如果你想要使用juci或者你自己使用juci修改它,通常是一个好主意,如果你将修改作为修补程序。 通过使用"git format-patch --stdout",然后通过电子邮件或者在 https://github.com/mkschreder/juci.git 页面的JUCI github页面提交补丁,可以完成这一操作。

    有关如何提交补丁的详细说明,请参阅: 提交修补程序

    在JUCI中,如果你对项目有重大的需求,如果在几个月内将它们提交到主项目项目中,这很好,因为你的更改可能在几个月内过时,除非它们被集成到主。

    版权分配

    作为JUCI项目的贡献者,你仍然作为你自己贡献的版权所有者。 在任何情况下,即使版权被重新分配给其他人,你作为贡献的原始所有者仍然保留版权持有者的所有权利和利益,并将代码重新发布为你自己的code。 ( 请注意,GPL代码曾在GPL中发布过,因为它已经发布过了。 如果你是版权持有者,那么只有更高版本的版本才会出现。不过,除非有人决定违反GPL并做一些蠢事,否则这种情况很可能会发生。

    很好知道

    插件可以在juci之上开发,创建安装js和css文件到路由器/www 文件夹,然后在 postinstall ( index.html 实际上是自动生成的) 运行juci更新的包。

    在大多数情况下,你永远不需要修改核心juci代码。 如果需要更改某些函数的行为,可以始终在javascript中覆盖 public 函数,而不必修改原始实现。

    Juci使用经过修改的uhttpd版本,它可以根据实际的压缩内容为gz文件提供适当的内容类型。

    JUCI还在openwrt上使用了ubus和rpcd的修改版本,你也可以从提要( 使用-f选项) 中安装。

    正在启动

    新:你现在可以在这里找到编译的juci手册: http://mkschreder.github.io/juci/

    JUCI主要用于基于OpenWRT的系统。 即使你可以在其他系统上使用这里代码,也可以使用OpenWRT工具和包在后端实现许多功能。 因此,你自然需要使用openwrt构建你的固件来获得大部分 juci。

    安装JUCI所需的工具可以使用./scripts/ubuntu-bootstrap.sh. 运行它。

    JUCI是包含单个javascript文件。html模板。翻译和样式( 用更少的)的许多文件的Collection。 所有这些文件都需要构建到一组模块中,然后可以将它们作为脚本包含到 index.html 页面中。 这是用make做的。

    
    make - without any arguments builds production files (minified and gzipped). 
    
    
    make debug - builds uncompressed files for use with juci-local-server. 
    
    
    
    

    开发时,使用本地服务器是非常好的,因为它允许你在本地持续地测试更改。 本地服务器是使用 node.js 编写的一个小程序,它在将ubus调用转发到一个真正的框时启动一个本地http服务器。

    要在开发期间运行本地服务器测试新的gui元素,请执行以下操作:

    
    ./juci-local-server --host <your router ip with juci installed>
    
    
    
    now go to http://localhost:3000/to see the local gui. 
    
    
    
    when you make changes in code, run make debug again and reload the local page. 
    
    
    
    

    常见问题

    • 我浏览主页,什么也看不到。 主页为空。

      解决方案:打开浏览器控制台,看看是否有打印出的错误。

    • Juci无法启动表示 juci.ui.menu ubus调用丢失。

      解决方案:确保 ubus-scriptd正在路由器上运行。 并且确保它加载了所有没有错误的脚本。 要检查,执行/etc/init./ubus-scriptd停止,然后运行 ubus-scriptd。 它会打印痕迹。 现在用ctrl+c取消它,修复错误后,使用/etc/init. d/ubus-scriptd start重启它。 然后确保在"ubus列表of中存在必要的调用"

    • 我进入登录页面,但无法登录。 密码是什么?

      解决方案:在/etc/config/rpcd. 密码中设置登录用户是该用户的unix密码。

    • 我可以登录,但得到一个大的错误框,其中有很多文本提到 Angular。

      解决方案:这意味着某些 MODULE 完全无法初始化,或者你有语法错误,或者你有重复的控制器名称,或者你有重复的控制器名称,将导致在 Angular 中发生异常。 通常要做的第一件事是在错误之前检查浏览器控制台。 然后检查错误中提到的anuglar消息,得到下一步应该做什么。

    • 我的网页xyz无法访问 ubus。 我在浏览器控制台中得到"拒绝访问"。

      解决方案:检查是否在插件( 如果它不存在,那么创建它- 使用现有插件来查看) 中的access.json 文件中配置了适当的acl权限。 然后将这里文件复制到路由器并重新启动 rpcd (/etc/init.d/rpcd 重新启动)。 那它应该能。

    • 我的构建过程在包含"npm"的行上挂起"

      解决方案:构建过程需要连接到因特网,以便为某些构建脚本下载必要的依赖项。 如果不可能,那么像"npm"这样的程序可能会 block indefinetely。

    • 编译在编译 css/。juci。css失败。"

      解决方案:当 yui-compressor ( css minifier ( 用java编写) ) 耗尽内存时发生这种情况。 这个文件会变得很大,而minifier需要更多的内存。 确保你的java虚拟机配置为使用更大的堆栈大小( 我发现java总是浪费内存)。

    单元测试

    注意:现在不再支持单元测试,因为 2015年月 ! 但旧文件还在。

    以前,可以在 node js 中运行juci内核,并直接从 命令行 发出ubus调用。 这个功能仍然存在,并在测试目录的lib-juci中实现,但是它没有被使用过一段时间,所以可能已经过时了。 将来实际上使大多数 Angular 工厂的独立模块可以用于nodejs会很好。 因为代码本身很容易成为独立库而不依赖于 Angular,所以这不是一个困难的任务。

    这是要做的事情的清单。

    从web控制台使用 UCI

    可以直接从你的浏览器控制台使用 UCI。 打开控制台时,你将在应用程序中定义一个全局uci对象。

    
    $uci.$sync("wireless")//will sync the wireless table
    
    
    $uci.$sync(["wireless","hosts"])//will sync both wireless and hosts configs. 
    
    
    
    $uci.wireless.wl0.channel.value = 1//will set channel value to 1 
    
    
    
    $uci.$save()//will save the uci config
    
    
    
    

    所有的上面 方法都返回一个 promise。 因此,如果在操作完成后需要运行代码,则必须为返回的承诺设置完成的( 或者失败/总是) 回调。 你这样做:

    
    $uci.$sync("wireless").done(function(){
    
    
     console.log("Channel:"+$uci.wireless.wl0.channel.value); 
    
    
    }).fail(function(){
    
    
     console.log("Failed to sync tables!"); 
    
    
    }).always(function(){
    
    
     console.log("Done!"); 
    
    
    }); 
    
    
    
    

    当调用 $sync() 时,uci代码将把指定的配置加载到内存中。 配置类型必须首先在插件中定义,因这里,配置中不存在的字段可以创建它们的默认值。

    有关如何完成这里操作的更多细节,请查看 src/文件夹( 不是页面和小部件,而是主插件文件,通常叫做 plugin-name.js 或者 main.js ) 下的插件中的. js 文件。

    与 命令行 uci中一样,JUCI提供了几种访问配置元素的方法:

    
    $uci.wireless["@all"]//list of all sections in the wireless config
    
    
    $uci.wireless["@wifi-device"]//list of only the wifi device sections
    
    
    $uci.wireless.wl0//access wl0 section by name (all sections that have a name can be accessed like this)
    
    
    $uci.wireless.cfg012345//access a section with an automatically created uci name. 
    
    
    
    

    uci部分中的每个字段都有一个"值"成员,该成员是该字段的当前值。 因此,如果你在gui元素中使用uci部分,你必须使用. value 来设置它们的值。

    JUCI还保留每个字段的默认值和原始值,以便你可以将值恢复为加载配置时所使用的值。

    还可以将确认器附加到每个字段。 uci.js 文件中的示例。

    后端代码

    Juci后端主要由实现ubus函数的脚本组成,这些脚本通过 json rpc提供给gui代码。 这些脚本是juci用来与系统的其他部分交互的简单胶水。 你可以将这些脚本放置在插件的ubus/文件夹中。 每个脚本应该有一个全局唯一的NAME ( 最好是 NAME,它将它标识为特定插件的一部分),它将被放置到路由器的/usr/lib/ubus/juci 文件夹中。

    然后,ubus-scriptd服务在路由器上管理所有这些脚本,然后在ubus上可用。

    ubus-scriptd支持批处理脚本和服务。 大多数juci后端任务通常是批处理脚本,它们成为ubus对象。

    进一步的信息

    JUCI文档绝对可以改进。 你可以将问题发布到 juci github页面( https://github.com/mkschreder/juci/issues ) 上的问题板上,从而加快这个过程。

    我是一个自由顾问,我喜欢开发软件。 当我可以自由应用我的知识以满足客户需求并采取免费软件解决特定客户问题时工作。 只要与我现有的义务和职责兼容,我就可以接受来自任何人的工作。 我不是专门为任何人工作- 它不激励我,我发现它对性能有不利影响。 我发现,当我将软件与自由软件共振的各种不同情况下,我得到了最好的结果。 如果你觉得我可以给你的产品增加价值,你一定要给我发邮件给 mkschreder.uk@gmail.com 公司。

    许可证通知

    
    All individual parts in JUCI are Copyright of their respective authors. 
    
    
    
    Current list of contributors: 
    
    
    
     Reidar Cederqvist <reidar.cederqvist@gmail.com>
    
    
     Stefan Nygren <stefan.nygren@hiq.se>
    
    
     Martin K. Schröder <mkschreder.uk@gmail.com>
    
    
     Charlie Robbins <http://nodejitsu.com>
    
    
     Craig Mason-Jones
    
    
     Kord Campbell <kord@loggly.com>
    
    
     Mihai Bazon
    
    
     Philippe Rathé <prathe@gmail.com>
    
    
    
    This program is free software; you can redistribute it and/or
    
    
    modify it under the terms of the GNU General Public License
    
    
    version 3 as published by the Free Software Foundation.
    
    
    
    This program is distributed in the hope that it will be useful, but
    
    
    WITHOUT ANY WARRANTY; without even the implied warranty of
    
    
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
    
    
    General Public License for more details.
    
    
    
    You should have received a copy of the GNU General Public License
    
    
    along with this program; if not, write to the Free Software
    
    
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
    
    
    02110-1301 USA
    
    
    
    

    相关文章