How to setup LuCI web framework with Apache on Ubuntu 12.04

While developing LuCI web services, I found this is quite annoying for moving codes back and forth from my machine to the router.

So, I decided to setup a LuCI development environment on my own machine. Below are steps for doing so.

Prerequisites

• Ubuntu 12.04

OS I have tested

• LuCI

If you havn’t installed, please refer to my another blog post

• Apache2 (Version: 2.2.22-1ubuntu1)

Version of Apache2 is not important if you can take care the PATH issues. For example, the HTML root directory.

Command to install apache2

apt-get install apache2

How it work

Below is a simplified diagram. I have not drawn all the components involved.

           CGI

|APACHE| <-----> |         LuCI           |

# Inside LuCI

|cgi-bin/luci| <--> |luci.sgi.cgi| <--> |luci core|

According to above diagram, we only need to setup a CGI script for briding up apache and luci

Steps

1. Checkout cgi directory location

We need to put luci (a cgi script) in there such that Apache can run.

$> cat /etc/apache2/sites-enabled/000-default

...

ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/

...

ScriptAlias means apaches will run a corresponding script in /usr/lib/cgi-bin when there are requests to URL http://HOST/cgi-bin/ANY_CGI_SCRIPT

Therefore, we should put luci in /usr/lib/cgi-bin

2. Get a LuCI repository

I am using version LuCI.0.12 from the github here

3. Get luci from the luci repository

Define <LUCI> to be the path for luci repository

# Get CGI script

$> sudo cp <LUCI>/host/www/cgi-bin/luci /usr/lib/cgi-bin/

# Get CSS html template etc

$> sudo cp -r <LUCI>/host/www/luci-static /var/www

# Change permission

$> sudo chown -R www-data:www-data /var/www/luci-static

$> sudo chmod 755 /usr/lib/cgi-bin/luci

4. Edit Apache configuration /etc/apache2/sites-enabled/000-default

Make sure you have been replaced LUA_PATH, LUA_CPATH, LUCI_SYSROOT and LD_LIBRARY_PATH with your own path.

....

<Directory "/usr/lib/cgi-bin">

        SetEnvIf \

                Request_URI ".*luci.*" \

                LUA_PATH=/home/mondwan/Documents/git/luci/host//usr/lib/lua/?.lua;/home/mondwan/Documents/git/luci/host//usr/lib/lua/?/init.lua;$LUA_PATH; \

                LUA_CPATH=/home/mondwan/Documents/git/luci/host//usr/lib/lua/?.so;$LUA_CPATH; \

                LUCI_SYSROOT=/home/mondwan/Documents/git/luci/host \

                LD_LIBRARY_PATH=/home/mondwan/Documents/git/luci/host/usr/lib:

        AllowOverride None

        Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch

        Order allow,deny

        Allow from all

</Directory>

....

5. Restart apache

$> sudo service apache2 restart

6. Create a directory for LuCI

The directory /etc/config simulates a config system in OpenWRT which LuCI relies on.

$> mkdir -p /etc/config

7. Write following default contents into /etc/config/luci

config core 'main'

    option lang 'auto'

    option mediaurlbase '/luci-static/openwrt.org'

    option resourcebase '/luci-static/resources'

config extern 'flash_keep'

    option uci '/etc/config/'

    option dropbear '/etc/dropbear/'

    option openvpn '/etc/openvpn/'

    option passwd '/etc/passwd'

    option opkg '/etc/opkg.conf'

    option firewall '/etc/firewall.user'

    option uploads '/lib/uci/upload/'

config internal 'languages'

    option en 'English'

config internal 'sauth'

    option sessionpath '/tmp/luci-sessions'

    option sessiontime '3600'

config internal 'ccache'

    option enable '1'

config internal 'themes'

    option Bootstrap '/luci-static/bootstrap'

8. View on browser

Errors are expected :)

Ubuntu and Openwrt are 2 different OS. They build up with different set of commands for managing computational resources.

In other words, most of the application from official repository cannot be reused here unless you have ported all the internal details from Openwrt to Ubuntu.

NOTE: Some of them have been port to Ubuntu in this PPA

9. Remove incompatitable components so that we can run admin interface

$> cd <LUCI>/host/usr/lib/lua/luci/controller

$> mv admin/ ..

$> rm -fr *

$> mv ../admin/ .

# Clean up cache

$> sudo rm -fr /tmp/luci-indexcache /tmp/luci-modulecache/

10. Try again

If you can see above picture, you can start developing your own LuCI application under folder <LUCI>/host/usr/lib/lua/luci/controller

NOTES

• ADMIN interface will not work as expected

As stated above, most commands from openwrt are not ported to Ubuntu (eg: ubus). The admin interface will not work as expected.

• Missing folders I mentioned above

Make sure you are using luci-0.12 since the latest luci alters the build process somehow.

If you are using GIT for downloading source codes, here are commands for checking out luci-0.12

$> cd PROJECT_ROOT

$> git checkout luci-0.12

Then follow my blog post for installation

• Apache CGI does not work as expected

Please take a look here and make sure cgi module has been enabled.

• Unable to run /cgi-bin/luci due to permission problem

Try to replace these lines

Order allow,deny

Allow from all

to this

Require all granted

Extras

• Disable cache mechanism by comment 2 lines

By default, LuCI caches Lua files as binaries. Modification in your applications will be ignored if binaries had been created. Here is a way for disabling such mechanism.

$> vi /usr/lib/cgi-bin/luci

-- require "luci.cacheloader"

require "luci.sgi.cgi"

-- luci.dispatcher.indexcache = "/tmp/luci-indexcache"

luci.sgi.cgi.run()

References

• https://sudoroom.org/wiki/Mesh/Firmware/WebAdminDevelopment

• http://code.commotionwireless.net/projects/commotion/wiki/Luci-Development

Updates

• 2015/6/26

  • Update notes contents about missing folder

• 2017/3/5

  • Fix a typo in the script

  • Add a link about enable Apache CGI

  • Add how to fix permission problems from Apache (Thanks +Anton Key )

  • Rewrite certain sentances and unify the style

• 2020/01/05
  • Add a note on ubutnu PPA (from stokito)

How to use git to do development #1

Recall

As mention in previous blog, I will show you my git configuration in this blog.

Notes for reading

• Comments inside the file

Beside showing reasons why we need to write such config, I strongly recommend you to setup configuration marked with MUST. Otherwise, you may messy up your repository’s history.

For example, if you omit user configuration, personal information will not be attached to commits you created.

• Feel free to extend the configuration

To be honest, my configuration sourced from here. You can further edit my configurations as what I do on the source.

What’s next

Views about two major workflows (merge vs rebase)

​

How to delete specific chrome browsing history

To be honest, I have not expected this need a tutorial for a modern browser like chrome.

However, this task is not naive in Chrome. I would like to document down for future reference.

The official usage which is meaningless since it required you to press item one by one.

This is the correct solution. By clicking with shift button, you can select multiple items at the same time.

Unity notes #1: Rigidbody VS Collider

While I am going through the tutorial roll a ball, I found that Rigibody and Collider confuse me a lot. I have to do a bit searching so that I can tell the differences between them.

To be honest, official document states the differences clearly. What I am writing below is a kind of rewording so that I know what is going on.

Definition from unity document

Rigibody enables your game object to act under control of the physics.

Collider defines the shape of an object for the purposes of physical collisions.

Similarity between Rigidbody and Collider

• They are both components that can attach to game objects.
• They both belong to the physics system in Unity.

Differences

Rigidbody

• Usually, there is one rigidbody for a game object
• Where physics take effect (Force, torque)
• Variation of Rigidbody: isKinematic

Colliders

• It is common for a game object to have more than one collider to form a compound collider
• Where collision take effect (2 colliders crashes. Note that at least one Rigidbody must be attached to one of them)
• Variation of Collider: isTrigger

Pitfalls

Game object falls through the floor plane

Reason

1. IsTrigger, property of a collider, has been switched on for that game object. No collision occurs between that game object and the floor. Or
2. There is no colliders attached.

Solution

For 1,

1. Turn off IsTrigger or
2. Turn off Use gravity for the rigidbody or
3. Turn on Is kinematic for the rigidbody

For 2,

1. Attach a collider

Move static colliders

Reason

A static collider means there is at least one collider attached and NO any Rigidbody attached. Unity assumes this kind of colliders won’t move so that they can make optimisations.

If you moving them during game play, it degrades your game performance a lot.

Solution

1. Do not move those colliders. Or
2. Attach a kinematic Rigidbody to that game object

Puzzles

• For colliders, turn on IsTrigger or not?

In term of behaviours, other objects cannot pass through colliders without turning on IsTrigger. Therefore, whether or not turning on IsTrigger depends on your situations.

• For Rigidbody, turn on IsKinematic or not?

(Rigidbody + kinematic + Collider + trigger) behaves similar to a static collider. However, moving this kind of game objects won’t degrade our game performance as the static does.

​

How to use git to do development #0

Preface

As git becomes popular, more and more developers are trying to make use of it in order to manage their project’s revisions.

However, they may not know where to start and how to do better.

For sharing and showing benefits of using git on development, I am going to write several blogs for documenting how and why some approaches are better to follow.

Hopes you will enjoy this series.

Feel free to point out mistakes I have made :).

Learning resources

Newbie

• Try git today

An online tutorial which go through typical usages of git.

Advanced

• Progit

An open source book explains git, including introduction, workflows and demonstrations. I strongly recommend you to go through this book if you would like to master Git.

If above links cannot help you, checkout this one which provided by github.

What’s next

To be honest, this blog just suggest you links so that you know where to start and get help.

In next blog, I will show you my git configurations and explain why I wrote like that.

​

Ways to navigate directories in Linux

Generally speaking, there are 2 types of commands for navigating directories in Linux system.

They are listed in the following.

• cd
• pushd and popd

cd

$> cd <PATH>

Besides jumping to <PATH>, command cd will also remember the last directory you have visited. It means that you can jump back and forth between the current location and the previous location.

# For demonstration, assuming we are staying at dir1 first
$ ~/dir1>

# Go to dir2 
$ ~/dir1> cd ../dir2

$ ~/dir2> 

# Jump back to dir1
$ ~/dir2> cd -

$ ~/dir1>

# Jump back to dir2
$ ~/dir1> cd -

$ ~/dir2>  

pushd and popd

Since command cd is able to remember only one directory, you need to use pushd and popd if you would records more.

# Assume we are staying at dir1
$ ~/dir1>

# Go to directory dir2 and records down
# NOTE:
# There are 2 records. The left one represents current directory while the right 
# one represents the directory you have pushed.
$ ~/dir1> pushd ../dir2
~/dir2 ~/dir1

$ ~/dir2>

# Go to directory dir3 and records down
$ ~/dir2> pushd ../dir3
~/dir3 ~/dir2 ~/dir1

$ ~/dir3>

# Checkout current directory stack
$ ~/dir3> dirs
~/dir3 ~/dir2 ~/dir1

# Go back dir2
$ ~/dir3> popd

$ ~/dir2>

# Go back dir1
$ ~/dir2> popd

$ ~/dir1>

# Errors
$ ~/dir1> popd
bash: popd: directory stack empty

​

Tips for using android studio

About android studio

As you may not know, android studio is a new IDE for developing android application.

Although it seems that this is a kind of introduction, below sharing will not convince you to use this tool. Instead, i am going to talk about how to use this studio wisely.

Recommend websites

• Official website

Better than nothing. It guides you how to setup the android studio on your machine.

If you get errors like missing JVM on MAC OS because of missing STUDIO_JDK environment variable, try putting below scripts in folder ~/Library/LaunchAgents.

$> cat ~/Library/LaunchAgents/android.studio.jdk.setting.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>android.studio.jdk.setting</string>
    <key>ProgramArguments</key>
    <array>
        <string>sh</string>
        <string>-c</string>
        <string>launchctl setenv STUDIO_JDK /Library/Java/JavaVirtualMachines/jdk1.8.0_25.jdk</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>

• Shortcut tips

Someday, when you are getting annoyed by typing dummy codes again and again, you must check out this website. It shows you shortcuts for doing Tasks like generating getter or setter, moving codes around etc. To be honest, it saves my life.

​

Java public static final or private static final

About

This is a blog post about keywords public static final and private static final in JAVA world. To be honest, answers came from Stackoverflow. Putting them together is what I have done in this blog.

About static

There is one and only one copied in the memory. Even though there are millions of instances, they are all accessing the same pieces of memory if it had been specified with static. Refer to here for further explanation.

About final

You are not allowed to change value of a variable if it had been defined with final. Refer to here for explanation.

public final static vs private final static

The best practice is using the latter one. For the explanation, please refer to here

References

• http://blog.kenyang.net/2011/03/java-staticfinal.html
• http://stackoverflow.com/questions/10047802/public-static-final-or-private-static-final-with-getter
• http://stackoverflow.com/questions/413898/what-does-the-static-keyword-do-in-a-class

​

How to use Google trend

About

Google trend, as the name, records and reports the search trend during a certain period. So, how can you benefits from them? Below is my sharing on analyse the behaviour of MPF’s price.

The fact….

While reading the MPF reports, there is a huge drop between 2013/1/1 ~ 2013/6/30. Due to curiosity (and I bought a lot), I would like to find out reasons for this drop.

Start working….

Before using google trend, it is better for us to know the starting point of the drops.

The peak value is around 13.4160 HKD and it seems starting at the beginning of the 2013. By the help of filters from the finance report, we get below graph.

April 2013 is the starting point.

Heading to Gooooooogle trend

OK. Let’s look at the overview of year 2013 in Hong Kong.

In 2013, we could see h7n9 was a hot topic in Hong Kong.

To confirm the drops and H7N9

How can we link up these two facts?

Let’s filter results by setting date from 2013/3/1 to 2014/1/1.

H7N9 is the only one which affect the MPF’s price.

Let’s see the searching trend of H7N9.

Perfect match. According the facts that MPF’s price drop at April 2013 and H7N9 searching trend starting at April 2013, we can see the relationships between them and that’s the critical factor for the poor drops.

​

AngularJS: this VS $scope in controller

While wring angular application, I found that there are 2 choices to wire up controller’s attributes with html template.

So, I am wondering which one is the best programming practise.

Official documents shows usage for both of them. For example, here shows you how to do the linking by using this and controller as syntax while here shows you how to do that by using $scope angular service.

However, after digesting the most common answers from stackoverflow, I decided to use the this way to write my angular application.

Well, syntax in the first approach is more native and without the necessity to inject $scope to my controller is another good thing to point out.

​

Sharing on customizing ubuntu image and create USB stick

Background

Currently, installing the Ubuntu and setting up those machines are my jobs. In order to minimize the duplicated workloads (eg: install apache, python etc), I decided to build a custom image which bundled with those necessary packages at first instead of using the official one directly.

Prerequisite

• ubuntu customization kit (aka UCK)

sudo apt-get install uck

• unetbootin

sudo apt-get install unetbootin

• ubuntu image

A base image for customization.

Steps

• follow instructions here

the link above guides you how to use UCK and create a USB drive from this image.

• Alternative for creating USB

In case, the above link does not work for you. UnetBootin is an alternative for you.

• Further customization

You do not need to add all the things at once. You can always replaced the base image with the one you have built. However, I am still looking for a VCS for this process. Let me know if you have any idea.

References

1. http://www.linux.com/learn/tutorials/739139-roll-your-own-customized-ubuntu-with-uck
2. http://www.howtogeek.com/109736/how-to-create-a-custom-ubuntu-live-cd-or-usb/
3. http://www.geekyprojects.com/ubuntu/build-your-own-custom-ubuntu-livecd/

​

Customize MAC OS Terminal

To be honest, I am not satisfy with the default terminal on MAC OS X. Below are my suggestions for heavy working with terminal on OSX.

ITERM2

Make sure you have installed iTerm2 for replacing the default terminal application.

Most of my works rely on VIM. However, the mouse option will not work on default terminal. So, I change to iTerm2.

Terminal Sexy

Here provides you bunch of the colour profiles for your terminal. Personally, I love hybird, pretty and pastel and x dot share.

BetterTouchTool

Besides the configuration on iTerm, I need short cuts for calling out, maximising, minimising, etc the iTerm application. I am using this for achieving this purpose.

Word jumping

Besides commands from here, I have setup another commands for word jumping on terminal.
Answer from superuser helps me a lot.

​

Notes on using macport

What is macport

Macport is a package manager tools on MAC OSX. It works like what apt-get does on Debian system.

Tricks

To save my time in the futures, here are experiences which learnt from painful try and error process.

BASH AUTO competition

There is no auto completion (IE Tab will not work) by default. Please read this for setting up an auto completion.

List of common commands

• port search PKG or port search —regex ‘PKG‘

A command for you to search packages.

• port install PKG

Install a package from macport

• port uninstall PKG

Uninstall a package from macport

• port select PKG VERSION

Select a version for a package. Sometime, packages come with more than one version (py27, py3). This command allows you to select which version will be used when you call python instead of calling python2.7 explicitly.

• man port

A command for reading the manual page of port.

​