Skip to content
johanv edited this page Sep 14, 2012 · 14 revisions

Hotot is a python program, that displays a web page. The webpage has a lot of javascript embedded, and the javascript is the actual program. I guess this makes it easy to create the chrome extension (which I did not try yet).

Running the compiled source

Suppose you cloned your code in ~/dev/hotot, and built it as follows:

cd ~/dev/hotot
mkdir build
cd build
cmake ..
make

If you want to run the code, without having to make install it, you can do the following:

export PYTHONPATH=~/dev/hotot/build/hotot
cd ~/dev/hotot
python < build/scripts/hotot

The PYTHONPATH is needed for hotot to find its modules. I start the app from ~/dev/hotot, so it finds its images. And, very strange, if I don't use input redirection (<) to run the script, PYTHONPATH does not seem to work. (Disclaimer: I am new to python.)

Details

Dialog boxes

The different dialog boxes for the user interface, are in data/index.html. The screens are just sections in the html-file, which explains why you can't move windows outside of the main window.

E.g., take the container with id status_box. This contains all the html for the window which allows you to enter a new status. The file data/js/ui.status_box.js contains a kind of Javascript class (note: I am new to Javascript) for a statusupdate. I think this contains both logic for the user interface, as programming logic, which is fine for a small project like this, I guess.

Javascript code

The actual program code is in the files data/js. I find 'data' a strange name for a directory containing actual code, but there is probably a reason for this.

If you're new to Javascript (like me), you might be interested in some Javascript tips.

Tweets/dents

Tweets or dents are represented by a json object, as in this example tweet. They are shown in the UI as html in 'tweetview' divs, like e.g. the home tweetview.

Extensions

Hotot extensions are in 'data/ext'. Every extension sits in its own directory, and contains a file entry.js. This file contains a class, called ext.ExtensionName, with some properties and some 'listeners'.

At the the end of the extension class, there are two functions: enable and disable. These are used to register the listeners. The possible listeners are listed in data/ext/ext.js.

I don't know how to make the extensions appear in the settings menu, except from adding them to the builtins array on data/ext/ext.js.

Listeners

  • ADD_TWEETS_LISTENER_AFTER: you can define a listener that is called after a tweet is added to a view. A nice example can be found in data/ext/org.hotot.sample/entry.js. The listener gets the name of the view, and the tweet, which is a json-object, like this example.

Calling remote services

The file data/js/lib.network.js contains a method do_request, which can be called as e.g. in the file data/ext/org.hotot.shorturl/entry.js.

Now if you need extra information in your callback function (instead of only the service call result), I think you will have to use an explicit jquery call. This is e.g. done in data/ext/org.hotot.expandurls/entry.js.

Clone this wiki locally