Being Blessed

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. 4.
  2. 8.

    “Blessed is a high-level terminal interface library built in node.js

    that allows us to create impressive terminal applications easily.”
  3. 11.
  4. 12.

    Adding events var blessed = require('blessed'); var screen = blessed.screen();

    screen.key('q', function () { process.exit(0); }); screen.render();
  5. 13.

    q

  6. 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();
  7. 15.
  8. 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();
  9. 17.
  10. 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();
  11. 19.
  12. 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();
  13. 21.
  14. 22.
  15. 23.

    “Blessed comes with a number of high- level widgets so

    you can avoid all the nasty low-level terminal stuff.”
  16. 24.
  17. 25.
  18. 26.
  19. 27.

    Box

  20. 28.
  21. 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();
  22. 30.
  23. 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
  24. 35.
  25. 36.
  26. 39.