Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Cleaned up glandslide and sample slideshows

  • Loading branch information...
commit 517783e2e861b5c8d9516ff6d75d9cacfc6079c3 1 parent b5e04d3
R. Saravanan authored
12 README.rst
View
@@ -113,7 +113,11 @@ Documentation and updates can be found on the project home page,
`info.mindmeldr.com/code/graphterm <http://info.mindmeldr.com/code/graphterm>`_,
which also has some
`tutorials and examples <http://info.mindmeldr.com/code/graphterm/graphterm-tutorials>`_
-for using GraphTerm.
+for using GraphTerm. You can also use the following command::
+
+ glandslide -o graphterm-talk1.md | giframe
+
+to view a slideshow about GraphTerm within GraphTerm.
**NEW**
There is a `Google Groups mailing list <https://groups.google.com/group/graphterm>`_
@@ -366,9 +370,11 @@ Slideshows
The ``glandslide`` command, which is a slightly modified version of the
web-based slide slideshow program `Landslide <https://github.com/adamzap/landslide>`_,
can be used to create a slideshow from Markdown (.md) or reStructured
-Text (.rst) files::
+Text (.rst) files. A few sample ``.md`` files are provided in the
+``docs`` directory of the distribution. To view a slideshow about
+GraphTerm, type::
- glandslide -o slides.md | giframe
+ glandslide -o graphterm-talk1.md | giframe
(The unmodified Landslide program can also be used, with the ``-i``
option, but remote sharing will not work.)
BIN  doc-images/gt-architecture.png
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
260 docs/graphterm-talk1.md
View
@@ -0,0 +1,260 @@
+Reimagining the command line in the Tablet Age
+===============================================
+
+<p>&nbsp;</p>
+<p>&nbsp;</p>
+
+R. Saravanan
+
+Texas A&M University
+
+**sarava@mindmeldr.com**
+
+Derived from talks give at:
+
+- *Texas Linux Festival, San Antonio, August 4, 2012*
+- *PyTexas, College Station, September 16, 2012*
+
+---
+
+**A GUI gives you sentences you can say to express yourself.**
+
+**A command line interface gives you words.**
+
+*Anonymous*
+
+
+---
+Advantages of the CLI
+==================================
+
+- More powerful and flexible than the GUI
+ - Not limited to actions that can be fitted on the screen
+ - Pipe output of one command to another
+ - i.e., form your own sentences using words!
+ - Wild-carding, command completion, history recall
+
+- Efficient use of screen real-estate
+ - Easy to use on small screens and remotely
+ (Mobile phones tend to use a menu-driven text UI, although not a CLI)
+
+- Self-documenting
+ - Useful for scripting and automation, especially on the server-side
+
+
+---
+Disadvantages of the Command-Line Interface (CLI)
+======================================================
+<p>&nbsp;</p>
+
+- “Newbies” find a blank terminal screen confusing
+ - Steep learning curve (need to learn basic commands first)
+ - Abbreviated commands (efficient, but cryptic!)
+ - Command have to be typed precisely (unlike natural language)
+ - Poor feedback on the results of commands; difficult to undo
+ - A GUI with good icons is more intuitive
+ - Relies upon recognition rather than recall
+
+- Looks dull and archaic (does not use rich monitor display)
+ - Sometimes a picture is worth a thousand words
+
+- Does not use the analog input capabilities of the mouse
+
+---
+
+XMLTerm (Mozilla; ca. 2000)
+=========================================================
+
+<img width="50%" height="50%" src="https://dl.dropbox.com/u/72208800/code/images/xmlterm1.jpeg">
+
+
+---
+
+AjaxTerm (Python+HTML; ca. 2006)
+=========================================================
+
+<img width="70%" height="70%" src="https://dl.dropbox.com/u/72208800/code/images/ajaxterm.png">
+
+
+---
+
+TermKit (Webkit; 2011)
+=========================================================
+
+<img width="80%" height="80%" src="https://dl.dropbox.com/u/72208800/code/images/termkit.png">
+
+
+---
+
+Terminal multiplexers
+==================================================================
+
+- GNU Screen
+- tmux
+- Byobu
+
+---
+
+GraphTerm
+============
+
+**A Graphical Terminal Interface**
+
+- Aims to seamlessly blend the CLI and the GUI
+- Fully backwards-compatible terminal emulator for xterm.
+ - Use it just like a regular terminal interface, accessing additional graphical features only as needed
+
+- Builds upon two earlier projects, XMLTerm and AjaxTerm
+- Alpha quality (dogfood status for the past 7 weeks!)
+
+- Project Page
+ **http://info.mindmeldr.com/code/graphterm**
+
+- Source code (BSD License)
+ **https://github.com/mitotic/graphterm**
+
+
+---
+GraphTerm Architecture
+=======================
+
+<img width="85%" height="85%" src="https://github.com/mitotic/graphterm/raw/master/doc-images/gt-architecture.png">
+
+
+---
+
+GraphTerm Implementation
+=======================================================================
+- Server: ~4500 lines of python
+ - Tornado webserver, code from AjaxTerm
+ - Websocket (2-way HTTP) connections between browser and server
+
+- Client: ~2500 lines of HTML+JS+CSS
+ - jQuery, AJAX editor (ACE)
+
+- Adds a new xterm “escape” sequence to switch to a graphical screen mode to display HTML fragments (“pagelets”)
+ - GraphTerm-aware programs can be written in any language: gls, gvi, …
+
+- Browser connects to GraphTerm server using websockets
+ - Host computers where the terminal session runs also connect to the same server (on a different port)
+
+---
+
+Installing and running GraphTerm
+======================================================================
+
+- Install
+ - **sudo easy_install graphterm**
+ - **sudo gterm_setup**
+- Start server
+ - **gtermserver –auth_code=none**
+- Open terminal in browser (to connect to localhost)
+ - **http://localhost:8900**
+ - Terminal sessions have URLs of the form:
+ - **http://localhost:8900/&lt;hostname&gt;/tty1**
+ - **http://localhost:8900/*/tty1** (wildcard)
+ - First user owns the terminal session; others can watch/steal it
+- Connect additional hosts to server
+ - **gtermhost --server_addr=domain &lt;hostname&gt;**
+
+---
+
+GraphTerm Features
+================================================================
+
+- Backwards compatible with CLI, plus incremental feature set
+- Clickable (hyperlinked) text for filenames and commands
+ - *Adaptive* paste behavior (depending upon the current command line)
+- Optional icons for file listings etc.
+- Platform-independent client (HTML+Javascript)
+ - Themable using CSS
+- Pure python server (should work on any Unix-ish system)
+- Touch-friendly
+ - Translate clicks, taps, and drops into textual commands
+- Cloud and collaboration-friendly
+ - Single (tabbed) browser window to connect to multiple hosts
+ - Drag and drop to copy files between different hosts
+ - **Screen sharing**: A terminal session can be shared by multiple users
+
+
+---
+
+ls vs. gls
+=========================================================
+
+<img width="80%" height="80%" src="https://github.com/mitotic/graphterm/raw/master/doc-images/gt-screen-ls-gls.png">
+
+
+---
+
+Checking the weather using Yahoo Weather API
+=========================================================
+
+<img width="80%" height="80%" src="https://github.com/mitotic/graphterm/raw/master/doc-images/gt-screen-yweather2.png">
+
+
+---
+
+Collapse command output
+=========================================================
+
+<img width="80%" height="80%" src="https://github.com/mitotic/graphterm/raw/master/doc-images/gt-screen-collapsed.png">
+
+
+---
+
+CSS-themable (3D perspective)
+=========================================================
+
+<img width="80%" height="80%" src="https://github.com/mitotic/graphterm/raw/master/doc-images/gt-screen-stars3d.png">
+
+
+---
+
+Graphical editing in the “cloud” using gvi
+=========================================================
+
+<img width="80%" height="80%" src="https://github.com/mitotic/graphterm/raw/master/doc-images/gt-screen-gvi.png">
+
+
+---
+
+Split-screen scrolling
+=========================================================
+
+<img width="80%" height="80%" src="https://github.com/mitotic/graphterm/raw/master/doc-images/gt-screen-split.png">
+
+
+---
+
+Emacs in the browser
+=========================================================
+
+<img width="80%" height="80%" src="https://github.com/mitotic/graphterm/raw/master/doc-images/gt-screen-emacs.png">
+
+
+---
+
+Potential Applications for GraphTerm
+==========================================
+
+- A more fun (and powerful) replacement for the terminal
+- A replacement for screen/tmux (detachable terminal)
+- Manage a collection of computers using the browser
+ - Wildcard remote access
+ - Audit history of all commands
+ - Debug Python programs using otrace
+- For collaboration with other developers
+ - Screen sharing and screen stealing
+- For demonstrating or teaching CLI-based software
+ - Create a virtual computer lab using the cloud
+ - Receive live feedback from audience
+
+
+---
+
+The End
+==========================
+
+.qr: 450|https://github.com/mitotic/graphterm
+
0  docs/slides.md → docs/landslides.md
View
File renamed without changes
145 docs/tornado-talk.md
View
@@ -0,0 +1,145 @@
+Tornado Web Server
+======================
+
+R. Saravanan
+
+sarava@mindmeldr.com
+
+PyTexas, College Station, Texas, Sep 16, 2012
+
+
+![tornado](http://www.tornadoweb.org/static/tornado.png)
+
+---
+
+C10K problem
+===============================
+
+10,000 concurrent connections
+--------------------------------------------
+
+- Multi-threaded web servers (like Apache)
+
+ - 1 thread per-client with blocking I/O
+ - Pool of worker threads
+
+- Asynchronous web servers
+ - Single-threaded
+ - Non-blocking network I/O
+ - Python: asyncore, twisted, tornado, gevent*
+ - Others: nginx, node.js
+
+---
+
+Tornado Web Server
+===================================================================
+
+- Asynchronous python library
+ - Web server with simple templating
+ - Async networking (similar to Twisted)
+ - Authentication (OAuth: Facebook, Twitter, Google, ..)
+ - WSGI
+ - Can be used in Google App Engine
+
+- Relatively lightweight; easy to understand
+
+- History
+ - Developed by Friendfeed/Facebook
+ - Open sourced in 2009
+ - Used by: Friendfeed/Facebook, Quora, Bitly, Hipmunk, …
+
+---
+
+Hello World using Tornado
+====================================================
+
+ !python
+ import tornado.ioloop
+ import tornado.web
+
+ class MainHandler(tornado.web.RequestHandler):
+ def get(self):
+ self.write("Hello, world")
+
+ application = tornado.web.Application([
+ (r"/", MainHandler),
+ ])
+
+ if __name__ == "__main__":
+ application.listen(8888)
+ tornado.ioloop.IOLoop.instance().start()
+
+
+---
+
+Two ways of handling async requests
+=====================================================================
+
+ !python
+ class AsyncHandler(RequestHandler):
+ @asynchronous
+ def get(self):
+ http_client = AsyncHTTPClient()
+ http_client.fetch("http://example.com", callback=self.on_fetch)
+
+ def on_fetch(self, response):
+ do_something_with_response(response)
+ self.render("template.html")
+
+ class GenAsyncHandler(RequestHandler):
+ @asynchronous
+ @gen.engine
+ def get(self):
+ http_client = AsyncHTTPClient()
+ response = yield gen.Task(http_client.fetch, "http://example.com")
+ do_something_with_response(response)
+ self.render("template.html")
+
+---
+
+Websockets
+===================================================================
+
+- Bi-directional HTTP
+ - Like TCP
+ - Send and receive messages (packets) instead of request/response
+
+- Protocol
+ - Draft protocol (version 76): May 2010
+ - Final version: December 2011 (RFC 6455)
+
+---
+
+Websocket handling in Tornado
+==================================================================
+
+ !python
+ class EchoWebSocket(websocket.WebSocketHandler):
+ def open(self):
+ print "WebSocket opened"
+
+ def on_message(self, message):
+ self.write_message(u"You said: " + message)
+
+ def on_close(self):
+ print "WebSocket closed"
+
+Javascript
+
+ !javascript
+ var ws = new WebSocket("ws://localhost:8888/websocket");
+ ws.onopen = function() {
+ ws.send("Hello, world");
+ };
+ ws.onmessage = function (evt) {
+ alert(evt.data);
+ };
+
+
+---
+
+The End
+==========================
+
+.qr: 450|http://tornadoweb.org
+
2  graphterm/bin/giframe
View
@@ -54,7 +54,7 @@ headers = {"opacity": options.opacity}
frameId = "giframe%09d" % random.randrange(0, 10**9)
IFRAMEFORMAT = '<iframe id="'+frameId+'" class="gterm-iframe" src="%s" width="100%%" height="'+str(100 if options.nofooter else 95)+'%%"></iframe>'
if not options.nofooter:
- IFRAMEFORMAT = '<span class="gterm-iframeclose gterm-iframeheader">&#215;</span><p>' + IFRAMEFORMAT
+ IFRAMEFORMAT = '<span class="gterm-iframeclose gterm-iframeheader">&#215;</span>' + IFRAMEFORMAT
gtermapi.write_html(IFRAMEFORMAT % iframe_url, display="fullscreen", add_headers=headers)
6 graphterm/bin/landslide/generator.py
View
@@ -94,6 +94,12 @@ def __init__(self, source, **kwargs):
# Only output html in direct output mode, not log messages
self.verbose = False
+ if source and not os.path.exists(source) and not os.path.isabs(source):
+ # Look in graphterm/docs directory
+ docs_source = os.path.normpath(os.path.join(os.path.dirname(__file__), "..", "..", "..", "docs", source))
+ if os.path.exists(docs_source):
+ source = docs_source
+
if not source or not os.path.exists(source):
raise IOError(u"Source file/directory %s does not exist"
% source)
6 graphterm/bin/landslide/macro.py
View
@@ -136,9 +136,9 @@ def process(self, content, source=None):
re.DOTALL | re.UNICODE)
for image in images:
- full_path = os.path.join(base_url, image)
-
- content = content.replace(image, full_path)
+ if not image.startswith("http://") and not image.startswith("https://"):
+ full_path = os.path.join(base_url, image)
+ content = content.replace(image, full_path)
return content, classes
3  graphterm/bin/landslide/utils.py
View
@@ -34,6 +34,9 @@
def get_abs_path_url(path, blob=False):
""" Returns the absolute url for a given local path.
"""
+ if path.startswith("http://") or path.startswith("https://"):
+ return path
+
if not gtermapi or not gtermapi.Lterm_cookie:
return "file://%s" % os.path.abspath(path)
4 graphterm/www/graphterm.css
View
@@ -382,6 +382,10 @@ input.gterm-input-arg[type=text] {
border-style: none;
}
+.gterm-iframeheader {
+ color: red;
+}
+
.gterm-iframe:not(.noheader) {
margin-top: 1em;
}
1  graphterm/www/graphterm.js
View
@@ -2475,6 +2475,7 @@ GTFrameDispatcher.prototype.open = function(frameController, frameObj) {
}
if (!gMobileDisplay) {
$("#"+frameId).addClass("noheader");
+ $("#"+frameId).attr("height", "100%");
$(".gterm-iframeheader").hide();
}
$("#"+frameId).focus();
Please sign in to comment.
Something went wrong with that request. Please try again.