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. 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();

  11. None
  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();
  15. None
  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();
  17. None
  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();
  19. None
  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();
  21. None
  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();
  30. None
  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

  39. None
  40. Thanks! @reciam