Being Blessed

A talk about how to create TUI's with JavaScript using Blessed, the package made by Christopher Jeffrey (JJ).

More information about the topic in here: http://recodes.co/being-blessed/

This talk was given at Sophilabs in May, 2015.

Transcript

1. Being Blessed
2. @reciam Rodrigo Espinosa Curbelo
3. Curses is not just for C, C++ or…
4. Python
5. They are for JavaScript too!
6. And we :heart: JavaScript
7. So Blessed? npm install blessed
8. “Blessed is a high-level terminal interface library built in node.js that allows us to create impressive terminal applications easily.”
9. Let’s start with some code
10. Init var blessed = require('blessed'); var screen = blessed.screen(); screen.render();
12. Adding events var blessed = require('blessed'); var screen = blessed.screen(); screen.key('q', function () { process.exit(0); }); screen.render();
13. q
14. Adding elements var box = blessed.box({ top: 'center', left: 'center', width: '50%', height: '50%', content: 'Hello {bold}world{/bold}!', tags: true, border: { type: 'line' }, style: { fg: 'white', bg: 'magenta', border: { fg: '#f0f0f0' }, hover: { bg: 'green' } } }); screen.append(box); screen.render();
16. Setting async data var box = blessed.box({ top: 'center', left: 'center', width: '60%', height: '80%', tags: true, style: {fg: 'white', bg: 'blue'} }); screen.append(box); fs.readFile(‘./t.txt', {encoding: 'utf8'}, function (err, data) { box.setText(data); screen.render(); }); screen.render();
18. With padding var box = blessed.box({ top: 'center', left: 'center', width: '60%', height: '80%', tags: true, padding: 3, style: {fg: 'white', bg: 'blue'} }); screen.append(box); fs.readFile(‘./t.txt', {encoding: 'utf8'}, function (err, data) { box.setText(data); screen.render(); }); screen.render();
20. Using tags var box = blessed.box({… tags: true, … }); screen.append(box); fs.readFile('./dummy-text.txt', {encoding: 'utf8'}, function (err, data) { data = data.replace(/illuminati/gi, '{green-fg}{bold}illuminati{/bold}{/green-fg}'); data = data.replace(/illuminatus/gi, '{red-bg}{bold}illuminatus{/bold}{/red-bg}'); box.setContent(data); screen.render(); }); screen.render();
22. Widgets
23. “Blessed comes with a number of high- level widgets so you can avoid all the nasty low-level terminal stuff.”
24. Node
25. Screen
26. Element
27. Box
28. List
29. List example var list = blessed.list({ top: 'center', left: 'center', width: '60%', height: '80%', padding: 3, input: true, style: {fg: 'white', bg: 'blue'} }); screen.append(list); list.setItems([ 'The Illuminati', 'plural of Latin illuminatus', 'enlightened' ]); screen.render();
31. And there are more! more! more!
32. Input Textarea Textbox Button ProgressBar FileManager Checkbox RadioSet RadioButton Prompt Question Message Loading Listbar Log Table Node Screen Element Box Text Line List Form ListTable Terminal Image Layout
33. And if you need even more…
34. There’s blessed- contrib!
35. –Christopher Jeffrey, Blessed creator. “Get people to make cool terminal stuff. It makes the world a better place :) ”
36. Demo time
37. GitterCLI npm install gitter-cli
38. recodes.co
40. Thanks! @reciam