Sunday, January 27, 2013

Run Codes On the Webpage!

Fun little project where..
1. Copy your source code (Live shell script, Python, Html, and Perl) and paste them into the text box.
2.Click the run button corresponding to each language the code belongs to.
3. See the output below the buttons. (No page reload needed, using JQuery)
(I am not going to reveal the url for this webpage, because this opens lots and lots of security holes to my server..,., Just a proof of concept.)
 


It was fun.  Here is the JQuery that
1)gets the code in the text box,
2) sends to the Django web server,
3)Gets the result,
4)show it to the webpage without reloading


$('button').mouseenter(function(event) {
    var text = $('textarea').val();
    var language = event.target.id;

     $.get(
       "ec2-xxxx-xxxxx-xxxxx-xxxxx.compute-1.amazonaws.com/blahblahblah",
       {user: text,lng:language}, 
       function(data) {$('a#friend').html(data);}
             );
       }); 

Also you can deal with this age-old problem about how to insert the tab in the text box by: (Found by googling it)


$("textarea#1").keydown(function(e) {
    if(e.keyCode === 9) { // tab was pressed
        // get caret position/selection
        var start = this.selectionStart;
        var end = this.selectionEnd;

        var $this = $(this);
        var value = $this.val();

        // set textarea value to: text before caret + tab + text after caret
        $this.val(value.substring(0, start)
                    + "\t"
                    + value.substring(end));

        // put caret at right position again (add one for the tab)
        this.selectionStart = this.selectionEnd = start + 1;

        // prevent the focus lose
        e.preventDefault();
    }
});

Real-Time GPS Tracking of my Android Phone

I made a website to track the location of my Android Phone real time.
Aww it was a pleasant project. But of course I cannot show the url to this for privacy reasons ;)





This is the step I took..
1 Download Android SDK. This includes IDE (eclipse with Android SDK plugin installed).  So you can create an android app project right away. Basic Android App dev tutorial
2. Give permission requests in the manifest file (internet and gps device), and follow this tutorial to get the source code to get the access to GPS device.
3. In the main java code, do http get request to send the latitude and longitude of the location to the django loaded in amazon web services. Such request is made every 5 seconds within android view.
4. Using USB debugging mode, upload and install the app.
5. Have a Django views.py to save the location info into a text file (LOL).
6. On the webpage, use JQuery to send repetitive HTTP GET requests (every 3 seconds using setInterval() method. There is no such thing as sleep() method to put in while loop) to get current location. 
7. Use Javascript to do real-time update of the location of marker using Google maps API.
Of course the API key registration needs to be done.

Here goes the source code

Real Time Control of my Arduino Device through Webpage

I made a website where an anonymous visitor can turn on/off an LED light in my Arduino device on my desk real-time. Live video broadcast shows the LED light for live feedback. Visit http://ec2-50-19-51-195.compute-1.amazonaws.com/live/
But this is now a downtime.
(What I learned here turned out to be a help for the next project. Nice)



The mechanism is:
1.You click a button.
2.JQuery detects the event and send a HTTP request. (To prevent the page from reloading)
3.The Django mounted on Ubuntu Server (amazon web services micro instance) serves the HTTP request.
4. The Django view writes to a text file saying the button was clicked.
5. And every 1 second the python program in my laptop makes ssh request to read the file to know the state (I know this is really akward)
6. The python program talks to my Arduino to turn on and off via a protyping module
7. The Ustream app on my Android Phone does live broadcasting on the LED.
8. The streaming is shown on the channel embeded to the browser
9. Additionally, I embeded a facebook comment tab.

From this point, many things can be tried to extend this idea. 

Well now is a downtime.

Friday, January 11, 2013

Analyzing the Bible with a Web Server

Finally, it's the weekend. As a celebration, I made a website that searches all the bible verses that include a keyword you want. Type in the word in the text box and submit it. The reference bible is New International Version.
Visit:  http://ec2-50-19-51-195.compute-1.amazonaws.com/bible/

Aw, this website is run on amazon web services micro instance (free tier) so please limit your searches (<100)... Also feel free to comment on the Facebook comments window.