Separator not displayed

[xander-m2k]

I have the following code:

auto style = size(WIDTH, GREATER_THAN, 30) | border |
               size(HEIGHT, GREATER_THAN, 60) | size(WIDTH, LESS_THAN, 150);

Element print_queue(msgs::msg::Queue queue)
{
    Elements list;
    auto header = hbox({
                        text("SCRIPT_ID") | bold | underlined | size(WIDTH, EQUAL, 50),
                        text("LOCAL_TAG") | bold | underlined | size(WIDTH, EQUAL, 25),
                        text("EXT_TAG") | bold | underlined | size(WIDTH, EQUAL, 25),
                        text("STATUS") | bold | underlined | size(WIDTH, EQUAL, 50)});

    for(auto item : queue.motion_queue){
        std::string status;
        // ss << item.script_id << ",\t";
        // ss  << item.local_tag_id << ",\t";
        switch(item.status){
            case tm_msgs::msg::QueueItem::DONE:
                status = "DONE";
                break;
            case tm_msgs::msg::QueueItem::BUSY:
                status = "BUSY";
                break;
            case tm_msgs::msg::QueueItem::WAITING:
                status = "WAITING";
                break;
            case tm_msgs::msg::QueueItem::NONE:
                status = "NONE";
                break;
            case tm_msgs::msg::QueueItem::FAILED:
                status = "FAILED";
                break;
            default:
                status = "ERROR";
        }

        list.push_back(hbox({
                        text(item.script_id) | size(WIDTH, EQUAL, 50) ,
                        text(std::to_string(item.local_tag_id)) | size(WIDTH, EQUAL, 25) ,
                        text(std::to_string(item.external_tag_id)) | size(WIDTH, EQUAL, 25) ,
                        text(status) | size(WIDTH, EQUAL, 50)}));
    }
    return vbox({
        header,
        separator(),
        vbox(list)
    });
}

auto tm_queue = print_queue(fb.motion_queue); // <--- fb.motion_queue is the input

Element TmrInterface::create_box_queue(std::string title, Element content, size_t dimx, size_t  dimy)
{
    return window(text(title) | hcenter | bold,
                    content) |
        size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);
}

auto document = vflow({
        create_box_queue("Queue", tm_queue, 80, queue_length),
    }) | style;

I have slimmed it down a bit to just focus on the part that is important. The problem I am having is that the separator() function does not do anything. I also tried adding it to the header hbox() to add vertical separators, but that also does nothing.

Also, underlined does not work, but this may not work because bold is already in place.

If there are any questions about my code, please feel free to ask. Please advice on how to solve.

[ArthurSonzogni]

Seems to work my side:

Notes about your code:

1. There are many use of size. Maybe what you need is a table instead? See demo.
2. I believe you problem might be about create_box_queue("Queue", tm_queue, 80, queue_length). It seem queue_length is too small. You have to take into account the title, the separator and the border. So you need queue_length + 4. I don't recommend using size the way you do.

Note: It would be best if you could provide minimal reproducing example, to avoid the need for me to speculate. Here is my interpretation:

#include <iostream>

#include "ftxui/dom/elements.hpp"
#include "ftxui/screen/screen.hpp"
#include "ftxui/screen/string.hpp"

using namespace ftxui;
Element print_queue() {
  {
    Elements list;
    auto header =
        hbox({text("SCRIPT_ID") | bold | underlined | size(WIDTH, EQUAL, 50),
              text("LOCAL_TAG") | bold | underlined | size(WIDTH, EQUAL, 25),
              text("EXT_TAG") | bold | underlined | size(WIDTH, EQUAL, 25),
              text("STATUS") | bold | underlined | size(WIDTH, EQUAL, 50)});

    list.push_back(hbox({
        text("item.script_id") | size(WIDTH, EQUAL, 50),
        text(std::to_string(4)) | size(WIDTH, EQUAL, 25),
        text(std::to_string(5)) | size(WIDTH, EQUAL, 25),
        text("status") | size(WIDTH, EQUAL, 50),
    }));

    list.push_back(hbox({
        text("item.script_id") | size(WIDTH, EQUAL, 50),
        text(std::to_string(4)) | size(WIDTH, EQUAL, 25),
        text(std::to_string(5)) | size(WIDTH, EQUAL, 25),
        text("status") | size(WIDTH, EQUAL, 50),
    }));

    return vbox({header, separator(), vbox(list)});
  }
}

Element create_box_queue(std::string title,
                         Element content,
                         size_t dimx,
                         size_t dimy) {
  return window(text(title) | hcenter | bold, content) |
         size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);
}

int main(void) {
  using namespace ftxui;

  auto tm_queue = print_queue();

  auto style = size(WIDTH, GREATER_THAN, 30) | border |
               size(HEIGHT, GREATER_THAN, 60) | size(WIDTH, LESS_THAN, 150);

  auto document = vflow({
                      create_box_queue("Queue", tm_queue, 80, 4 + 2),
                  }) |
                  style;

  auto screen = Screen::Create(Dimension::Full(), Dimension::Fit(document));
  Render(screen, document);

  std::cout << screen.ToString() << std::endl;

  return EXIT_SUCCESS;
}

[xander-m2k]

I'm sorry for not providing a full example. Regarding the queue_length, I already did take this into account by defining my queue_length like this, just forgot to include it:

int queue_length = 4 + fb.motion_queue.motion_queue.size();

The problem was related to the ROS framework, which is where I used FTXUI in. Again, I am sorry for disturbing your day, this was a non-issue.

Apart from this want to give some feedback on the documentation, I am really missing visuals with the examples. Nevertheless, this is a very well working library, loving this!

[ArthurSonzogni]

Great to hear you managed to fix your issue!

I just updated the README.md with more visuals: https://github.com/ArthurSonzogni/FTXUI/commit/188cffc5f6db6fc6331ab27451aa6dea2fd562f5

You can also read the examples: https://github.com/ArthurSonzogni/FTXUI/tree/master/examples and even execute them inside your browser: https://arthursonzogni.com/FTXUI/examples/

[xander-m2k]

It would be especially handy here: https://arthursonzogni.github.io/FTXUI/examples.html That's a lot more work to do, but it would be an improvement!