CODEWITHSUNDEEP
javascriptnode.jsuser-interfaceterminalblessed
Tanel Tammik
Tanel Tammik

Reputation: 17199

How to create a scrollable box with blessed/nodejs

I cannot figure out, how to create a scrollable box with blessed.

https://github.com/chjj/blessed

According to the docs, it should be like this:

"use strict";

const blessed = require('blessed');

const screen = blessed.screen({
    smartCSR: true
});

let box = blessed.box({
    top: 0,
    left: 0,
    width: '80%',
    height: '80%',
    style: {
        bg: 'red'
    },
    alwaysScroll:true,
    scrollable: true,
    scrollbar: true
});

screen.append(box);
screen.render();

for (let i = 0; i < 200; i++) {
    box.insertLine(0, 'texting ' + i);
    box.screen.render();
}

The box window shows, it gets filled, but no scrollbar. What am i missing?

Upvotes: 4

Views: 3421

Answers (1)

Badacadabra
Badacadabra

Reputation: 8507

Your code is correct but you need a bit more configuration to make it work. I added keys and vi properties to your box and defined a style for your scrollbar. With the following code, you should be able to scroll using arrow keys or Vi-like key mappings (j to go down, k to go up, g to jump to the first line, G to jump to the last line).

"use strict";

const blessed = require('blessed');

const screen = blessed.screen({
    smartCSR: true
});

let box = blessed.box({
    parent: screen,
    top: 0,
    left: 0,
    width: '80%',
    height: '80%',
    style: {
        bg: 'red'
    },
    keys: true,
    vi: true,
    alwaysScroll:true,
    scrollable: true,
    scrollbar: {
      style: {
        bg: 'yellow'
      }
    }
});

screen.render();

for (let i = 0; i < 200; i++) {
    box.insertLine(0, 'texting ' + i);
    box.screen.render();
}

Upvotes: 6

Related Questions