├── .gitignore
├── .npmignore
├── README.md
├── bin
└── presenter-cli.js
├── examples
├── doc.xml
├── docs
│ └── images
│ │ ├── charts.png
│ │ └── map.png
├── images
│ ├── charts.png
│ └── map.png
├── rich.xml
└── sample.xml
├── lib
├── document-viewer.js
└── ter-u12n.json
├── package.json
└── server
├── package.json
├── presenter.js
├── server.js
└── test
└── test.txt
/.gitignore:
--------------------------------------------------------------------------------
1 | p.js
2 | node_modules
3 | p.txt
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /server
2 | /test
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WOPR
2 |
3 | WOPR is a simple markup language for creating [rich terminal reports](https://github.com/yaronn/blessed-contrib), presentations and infographics.
4 |
5 | Put [a report](https://raw.githubusercontent.com/yaronn/wopr/master/examples/sample.xml) on the web (e.g. gist) and view it via curl:
6 |
7 | `````bash
8 | $> curl -N tty.zone/\[0-2\]\?auto\&cols=$((COLUMNS))
9 | `````
10 | (If you experience firewall issues replace tty.zone with ec2-23-21-64-152.compute-1.amazonaws.com or use a [local viewer](https://github.com/yaronn/wopr#viewing-reports))
11 |
12 | Created by Yaron Naveh ([@YaronNaveh](https://twitter.com/YaronNaveh))
13 |
14 | 
15 | 
16 |
17 | ##Writing your first terminal report##
18 |
19 | Here is a simple report with a bar chart:
20 |
21 | `````xml
22 |
23 |
24 | -
25 |
26 |
27 |
28 |
29 | `````
30 |
31 | You have 3 options to view this report:
32 |
33 | **Option 1: POST it to the wopr online viewer**
34 |
35 | `````bash
36 | $> curl --data '-
96 |
97 |
98 | -
99 |
100 |
101 |
102 |
103 | `````
104 |
105 | Here, the bar widget is in the first column and row (0-based indexing) and spans three columns and rows.
106 | The box element is in the same page but in a different position.
107 |
108 |
109 | **Widgets**
110 |
111 | The available widgets are the ones that exist in the [blessed](https://github.com/chjj/blessed) and [blessed-contrib](https://github.com/yaronn/blessed-contrib) projects.
112 | You can infer the xml representation of a javascript widget using a simple convention. Assume that you would instantiate some blessed widget with this javascript:
113 |
114 | `````javascript
115 | blessed.widget({ string: "5"
116 | , int: 1
117 | , intArray: [1,2,3]
118 | , stringArray: ["a", "b", "c"]
119 | , multiArray: [ [1,2,3], [4,5,6] ]
120 | , complexArray: [ {a: 1, b: [1,2] }, {a: 3, b: [3,4]} ]
121 | , object: { innerProp: 1, multiArray: [ [1,2], [3,4] ] }
122 | })
123 | `````
124 |
125 | Then here is how you would represent it in xml:
126 |
127 | `````xml
128 |
129 |
130 | 1,2,3
131 | 4,5,6
132 |
133 |
134 | 1,2
135 | 3,4
136 |
137 |
138 |
139 |
140 |
141 |
142 | `````
143 |
144 | You can also look at the [demo xml](https://raw.githubusercontent.com/yaronn/wopr/master/examples/sample.xml) to get more samples.
145 |
146 | 
147 |
148 | ##Viewing Reports##
149 |
150 |
151 | Depending on how you use a report, you have a few ways to view it. On Windows you will probably only be able to use the third option and need to [install the fonts](http://webservices20.blogspot.com/2015/04/running-terminal-dashboards-on-windows.html) for best view.
152 |
153 | **Option 1: POST it to the wopr online viewer**
154 |
155 | `````bash
156 | $> curl --data '-
6 |
7 |
8 |
9 |
10 |
11 |
12 | -
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | -
24 |
25 |
26 |
27 | -
28 |
29 |
30 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/examples/docs/images/charts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaronn/wopr/4cac0914baa82a8b7beb39a4be3292d6b5be6756/examples/docs/images/charts.png
--------------------------------------------------------------------------------
/examples/docs/images/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaronn/wopr/4cac0914baa82a8b7beb39a4be3292d6b5be6756/examples/docs/images/map.png
--------------------------------------------------------------------------------
/examples/images/charts.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaronn/wopr/4cac0914baa82a8b7beb39a4be3292d6b5be6756/examples/images/charts.png
--------------------------------------------------------------------------------
/examples/images/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/yaronn/wopr/4cac0914baa82a8b7beb39a4be3292d6b5be6756/examples/images/map.png
--------------------------------------------------------------------------------
/examples/rich.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | -
7 |
8 |
20 |
21 |
29 |
30 |
38 |
39 |
48 |
49 |
57 |
58 |
63 |
64 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/examples/sample.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | -
8 |
9 |
10 |
11 | *wopr* is a markup format for rich terminal `reports`, `presentations` and `infographics`.
Build the report from any language and view it locally or remotely via curl.
More information:
[https://github.com/yaronn/wopr](https://github.com/yaronn/wopr)
[https://twitter.com/YaronNaveh](https://twitter.com/YaronNaveh)
12 |
13 |
14 |
15 |
16 |
17 | -
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | -
31 |
32 |
33 |
34 |
35 |
36 |
37 | -
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | -
51 |
52 |
53 |
54 | ,1,02:17,21,13,20%,{red-fg}fail{/red-fg}
55 | ,2,02:15,33,11,25%,{blue-fg}pass{/blue-fg}
56 | ,3,03:22,15,12,80%,{red-fg}fail{/red-fg}
57 | ,4,05:00,11,18,12%,{red-fg}fail{/red-fg}
58 | ,5,02:17,17,12,0%,{blue-fg}pass{/blue-fg}
59 | ,6,01:01,23,29,80%,{red-fg}fail{/red-fg}
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | -
73 |
74 |
75 |
76 | *wopr* is a markup format for rich terminal `reports`, `presentations` and `inforgraphics`.
Build the report from any language and view it locally or remotely via curl.
More information:
[https://github.com/yaronn/wopr](https://github.com/yaronn/wopr)
[https://twitter.com/YaronNaveh](https://twitter.com/YaronNaveh)
77 |
78 |
79 |
80 |
81 |
82 | -
83 |
84 |
90 |
91 |
92 |
93 |
94 | -
95 |
96 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 |
146 | -
147 |
148 |
149 |
150 | *Thank you!*
More information:
[https://github.com/yaronn/wopr](https://github.com/yaronn/wopr)
[https://twitter.com/YaronNaveh](https://twitter.com/YaronNaveh)
created by @YaronNaveh
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
--------------------------------------------------------------------------------
/lib/document-viewer.js:
--------------------------------------------------------------------------------
1 | var blessed = require('blessed')
2 | , contrib = require('blessed-contrib')
3 |
4 | function DocumentViewer(document, screen) {
5 | this.document = document
6 | this.screen = screen || blessed.screen()
7 | //console.log(JSON.stringify(document, null, 2))
8 | }
9 |
10 | DocumentViewer.prototype.renderPage = function(pageId, msg) {
11 |
12 | var self = this
13 |
14 | if (typeof(msg)=="undefined") msg = "press Return to continue"
15 |
16 | this.clear()
17 |
18 | var page = this.document.page[pageId]
19 |
20 | var grid = new contrib.grid({rows: 12, cols: 12, hideBorder: true, screen: this.screen, dashboardMargin: 5})
21 |
22 | for (var i in page.item) {
23 | var item = page.item[i]
24 | var className = Object.keys(item)[1]
25 | var ctor = contrib[className] || blessed[className]
26 | if (!ctor) {
27 | return "no such widget: " + className
28 | }
29 | var opts = this.readOptions(item[className][0], ctor)
30 |
31 | //workaround
32 | if (className=="picture") {
33 | opts.onReady = function() { self.screen.render() }
34 | }
35 |
36 | //workaround
37 | if (classname="bigtext" && !opts.font) {
38 | opts.font = __dirname + "/../lib/ter-u12n.json"
39 | }
40 |
41 | //console.log(JSON.stringify(opts, null, 2))
42 | grid.set(item.$.row, item.$.col, item.$.rowSpan, item.$.colSpan, ctor, opts)
43 | }
44 |
45 | var next = blessed.box({top: "90%", content: msg})
46 | this.screen.append(next)
47 |
48 | this.screen.render()
49 | return null
50 | }
51 |
52 | DocumentViewer.prototype.clear = function(node) {
53 | var i = this.screen.children.length
54 | while (i--) this.screen.children[i].detach()
55 | }
56 |
57 | DocumentViewer.prototype.readOptions = function(node, ctor) {
58 |
59 | var optionsMethod = ctor.prototype["getOptionsPrototype"]
60 | var optionsMainProto = optionsMethod==null ? null : optionsMethod()
61 | //console.log(optionsMainProto)
62 | return this.readOptionsInner(node, optionsMainProto)
63 | }
64 |
65 | DocumentViewer.prototype.readOptionsInner = function(node, optionsMainProto) {
66 | var res = {}
67 |
68 | var items = []
69 | for (var attr in node.$) {
70 | items.push({name: attr, value: node.$[attr]})
71 | }
72 |
73 | for (var n in node) {
74 | if (n!='$') items.push( { name: n, value: node[n] } )
75 | }
76 |
77 | for (var i=0; i0) res.push(self.convertArray(s, type[0][0]))
116 | }
117 | return res
118 | }
119 | else if (typeof(type[0])=="object") {
120 | var res = []
121 | for (var i=0; i1) page=parseInt(u.pathname.substr(1)) || 0
17 | var auto = u.query["auto"]==='' || u.query["auto/"]==='' //second can happen in zsh when quoting the string
18 | var msg = auto?'next slide will appear within a few seconds':undefined
19 |
20 | if (!body || body=="") {
21 | return cba("You must upload the document to present as the POST body")
22 | }
23 |
24 |
25 | parse(body, function (err, doc) {
26 | try {
27 |
28 | if (err) {
29 | return cba("Document xml is not valid: " + err)
30 | }
31 |
32 | if (!doc || !doc.document) return cba("document not valid or has no pages")
33 | if (!doc.document.page || doc.document.page.length==0) return cba("document must have at least one page")
34 |
35 | if (page>=doc.document.page.length) {
36 | return cba('\r\n\r\nPresentation has ended (total '+doc.document.page.length+' pages). Press CTRL+C to exit.\r\n\r\n')
37 | }
38 |
39 | req.connection.on('close',function(){
40 | screen = null
41 | });
42 |
43 | var screen = contrib.createScreen(req, res)
44 | if (screen==null) return
45 |
46 | viewer = new Viewer(doc.document, screen)
47 | var err = viewer.renderPage(page, msg)
48 | if (err!==null) {
49 | clean(screen)
50 | return cba(err)
51 | }
52 |
53 | //note the setTimeout is necessary even if delay is 0
54 | setTimeout(function() {
55 | //restore cursor
56 | res.end('\033[?25h')
57 | clean(screen)
58 | return cba()
59 | }, auto?5000:0)
60 |
61 | }
62 |
63 | catch (e) {
64 | return cba(e)
65 | }
66 |
67 |
68 | })
69 | }
70 |
71 | function clean(screen) {
72 | //TODO this code is very sensitive to blessed versions, need to check right version/usage
73 | //screen.program.destroy()
74 | //screen.destroy()
75 | }
76 |
77 | module.exports = present
78 |
79 |
--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
1 |
2 |
3 | var blessed = require('blessed')
4 |
5 | patchBlessed()
6 |
7 | var http = require('http')
8 | , url = require('url')
9 | , fs = require('fs')
10 | , present = require('./presenter')
11 | , contrib = require('blessed-contrib')
12 |
13 | var port = process.env.PORT || 1337
14 |
15 | http.createServer(function (req, res) {
16 |
17 | if (req.method == 'POST') {
18 | var body = '';
19 | req.on('data', function (data) {
20 | body += data;
21 |
22 | // Too much POST data, kill the connection!
23 | if (body.length > 1e6)
24 | req.connection.destroy();
25 | });
26 | req.on('end', function () {
27 | present(req, res, body, function(err) {
28 | if (err) console.log(new Error().stack)
29 | if (err) return contrib.serverError(req, res, err)
30 | })
31 | });
32 | }
33 | else {
34 | if (req.headers["user-agent"] && req.headers["user-agent"].indexOf('curl')!=-1) {
35 |
36 | var content = fs.readFileSync(__dirname+'/../examples/sample.xml')
37 | present(req, res, content, function(err) {
38 | if (err) console.log(new Error().stack)
39 | if (err) return contrib.serverError(req, res, err)
40 | })
41 | return
42 | }
43 | else {
44 | res.writeHead(301, {'Location': 'https://github.com/yaronn/wopr'});
45 | res.end()
46 | return
47 | }
48 | }
49 |
50 |
51 | }).listen(port);
52 |
53 | /*in the context of web server the following code will leak:
54 |
55 | http.createServer(function (req, res) {
56 | var s = contrib.createScreen(req, res)
57 | //alternatively:
58 | //var program = new blessed.Program()
59 |
60 | setTimeout(function() {res.end(Date.now() + "")}, 0)
61 |
62 | }).listen(8080);
63 |
64 | this comes down to event registrations on program (the latest commit here points them https://github.com/yaronn/blessed-patch-temp)
65 | */
66 | function patchBlessed() {
67 | blessed.Program.prototype.listem = function() {}
68 | process.on = function() {}
69 | }
70 |
71 | console.log('Server running at http://127.0.0.1:'+port+'/');
72 |
--------------------------------------------------------------------------------
/server/test/test.txt:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | p=0; while true; do curl -NL --data '