From c1f867f97ca64f398b5c94068eba6c2eab1af28d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1lint=20Bokros?= Date: Fri, 8 Dec 2017 12:00:51 +0100 Subject: [PATCH 1/4] Update readme --- README.md | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index f9b8c62..605c40f 100644 --- a/README.md +++ b/README.md @@ -21,16 +21,19 @@ Run with `docker run -p 4242:4242 ` to bind the container's port to localhos ## Running locally -Open two terminals in the project root. +Create a new virtualenv, preferably with [virtualenvwrapper](https://virtualenvwrapper.readthedocs.io). Install the +dependencies with `pip install tornado pyzmq transitions`. If using virtualenvwrapper, issue `add2virtualenv lib` from +the project root to add the local libraries to the virtualenv's PYTHONPATH. -Issue +To start the project issue ``` cd src/app/ -PYTHONPATH="../../lib/" python app.py +python app.py ``` -in one, and +in one terminal, and ``` cd src/components/ -PYTHONPATH="../../lib/" python event_handler_main.py +python event_handler_main.py ``` -in the other. +in another. Prepend the python commands with `PYTHONPATH="../../lib/"` if the folder weren't added to the PYTHONPATH +permanently. From 642ca7f54ca38fdf8aa129592c3dd7c525609a1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1lint=20Bokros?= Date: Mon, 11 Dec 2017 13:34:08 +0100 Subject: [PATCH 2/4] Implement watching static files --- lib/debug.py | 19 +++++++++++++++++++ src/app/app.py | 3 +++ 2 files changed, 22 insertions(+) create mode 100644 lib/debug.py diff --git a/lib/debug.py b/lib/debug.py new file mode 100644 index 0000000..1127d26 --- /dev/null +++ b/lib/debug.py @@ -0,0 +1,19 @@ +from glob import iglob as glob +from itertools import chain + +from tornado.autoreload import watch + + +# yo dawg, we heard you like generators, so now you can generate generators +# with generators +def _static_files(): + return chain.from_iterable( + glob(pattern) for pattern in ( + 'static/*.js', 'static/*.css', 'templates/*htm?' + ) + ) + + +def watch_static_files(): + for file in _static_files(): + watch(file) diff --git a/src/app/app.py b/src/app/app.py index 0b4a79a..c52833c 100644 --- a/src/app/app.py +++ b/src/app/app.py @@ -7,6 +7,7 @@ from tornado.web import Application from tornado.ioloop import IOLoop from config import WEB_PORT +import debug from handlers import MainHandler, ZMQWebSocketHandler, LoginWebappHandler import ui_modules @@ -23,6 +24,7 @@ if __name__ == '__main__': ui_modules=ui_modules, autoreload=True ) + application.listen(WEB_PORT) logging.getLogger().setLevel(logging.DEBUG) logging.debug('Python version: {}'.format(sys.version[:5])) @@ -30,4 +32,5 @@ if __name__ == '__main__': logging.debug('ZeroMQ version: {}'.format(zmq.zmq_version())) logging.debug('PyZMQ version: {}'.format(zmq.pyzmq_version())) logging.info('Tornado application listening on port {}'.format(WEB_PORT)) + debug.watch_static_files() IOLoop.instance().start() From cb625bf11620fb723d6a49f3ff66d6f57bc0da9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1lint=20Bokros?= Date: Mon, 11 Dec 2017 13:54:38 +0100 Subject: [PATCH 3/4] Replace roll-your-own basic WebIDE with Ace Editor --- README.md | 1 + src/app/static/ws_listener.js | 8 ++++++-- src/app/templates/index.html | 1 + src/app/templates/module-webide.html | 7 ++----- 4 files changed, 10 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 605c40f..0b47212 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ downloaded from the following locations: * [Popper.js](https://github.com/FezVrasta/popper.js#installation) * [Highlight.js](https://highlightjs.org/download/) * [Showdown](https://github.com/showdownjs/showdown/releases) +* [ace](https://github.com/ajaxorg/ace-builds/releases) ## Building and running with Docker diff --git a/src/app/static/ws_listener.js b/src/app/static/ws_listener.js index 0cf9887..dbff144 100644 --- a/src/app/static/ws_listener.js +++ b/src/app/static/ws_listener.js @@ -1,6 +1,11 @@ let ws = new WebSocket('ws://' + document.location.host + '/ws'); let converter = new showdown.Converter(); +// TODO: don't hardcode anchor id +let editor = ace.edit('anchor_webide'); +editor.setTheme('ace/theme/monokai'); +editor.getSession().setMode('ace/mode/python'); +editor.$blockScrolling = Infinity; $('#container').on('click', '.anchor', ( function (event) { let anchorName = $(this).attr('id').replace('_event', ''); @@ -42,8 +47,7 @@ ws.onmessage = function (messageEvent) { console.log(message); let $anchor = $('#' + message['anchor']); if (message['anchor'] === 'anchor_webide') { - let code = hljs.highlightAuto(message['data']); - $anchor.html(code.value); + editor.setValue(message['data'], -1); } else { let formatted_message = converter.makeHtml(message['data']); diff --git a/src/app/templates/index.html b/src/app/templates/index.html index 7445d3b..a898b48 100644 --- a/src/app/templates/index.html +++ b/src/app/templates/index.html @@ -42,6 +42,7 @@ + \ No newline at end of file diff --git a/src/app/templates/module-webide.html b/src/app/templates/module-webide.html index bb716d4..46b410d 100644 --- a/src/app/templates/module-webide.html +++ b/src/app/templates/module-webide.html @@ -1,9 +1,6 @@

Source code

-
-    
-         
-    
-
+
+
From e14946fcb9a82380be00d4dc25e25a8ec684b778 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1lint=20Bokros?= Date: Mon, 11 Dec 2017 13:55:29 +0100 Subject: [PATCH 4/4] Adapt CSS to Ace --- src/app/static/index.css | 4 ++++ src/app/static/module-webide.css | 4 ++++ src/app/templates/index.html | 9 +++++---- src/app/ui_modules/webide.py | 3 +++ 4 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 src/app/static/index.css create mode 100644 src/app/static/module-webide.css diff --git a/src/app/static/index.css b/src/app/static/index.css new file mode 100644 index 0000000..e4934d4 --- /dev/null +++ b/src/app/static/index.css @@ -0,0 +1,4 @@ +.tfw-container { + min-height: 100%; + height: 100%; +} \ No newline at end of file diff --git a/src/app/static/module-webide.css b/src/app/static/module-webide.css new file mode 100644 index 0000000..7938185 --- /dev/null +++ b/src/app/static/module-webide.css @@ -0,0 +1,4 @@ +#anchor_webide { + position: relative; + height: 100%; +} diff --git a/src/app/templates/index.html b/src/app/templates/index.html index a898b48..930b73b 100644 --- a/src/app/templates/index.html +++ b/src/app/templates/index.html @@ -6,12 +6,13 @@ +

Tutorial framework Demo

-
+
-
+
{% module Login('anchor_login') %}
-
+
{% module WebIDE('anchor_webide') %}
-
+
{% module Logger('anchor_logger') %}
diff --git a/src/app/ui_modules/webide.py b/src/app/ui_modules/webide.py index 011c427..e0d0123 100644 --- a/src/app/ui_modules/webide.py +++ b/src/app/ui_modules/webide.py @@ -4,3 +4,6 @@ from tornado.web import UIModule class WebIDE(UIModule): def render(self, anchor_id, *args, **kwargs): return self.render_string('module-webide.html', anchor_id=anchor_id, **kwargs) + + def css_files(self): + return ['module-webide.css']