-
Notifications
You must be signed in to change notification settings - Fork 130
Hacking
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).
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.)
How does the program work, what is the relation between the python code and the javascript code,... see ProgramStructure
Inspecting the HTML code in the WebView can be done using chrome/chromium, running the chrome app. You need to build the chrome extension for this, by using the -DWITH_CHROME=on option of cmake.
This creates a file chrome/hotot-chrome.zip in your build directory. To install this extension in chrome, you have to unpack the zip file somewhere on your file system.
Start chrome, click the button in the top right corner, click 'Tools>' and 'Extensions'. Check the checkbox 'Developer mode', click 'Load unpacked extension', and browse to the place where the app files were unpacked on your file system.
Finally, open a new tab, and click the hotot app. Now you can press Ctrl-Shift-I to open the developer tools. If you click on the maginfier icon on the bottom of the developer tools windows, you can select an item on the hotot page. The code window will then show where this item is located in the html.
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.
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.
For how statuses are being fetched and displayed, see: statuses
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.
- 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.
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.