Comments (8)
Hello @Biobots!
I am not totally sure of what you want. Let me present the two potential solution:
static dom (non interactive)
You can use:
auto document = hbox(paragraph(long_string))
hflow
implements the flow layout.- the helper function
paragraph
helps breaking a long string into a list of words.
Try with the example:
https://arthursonzogni.com/FTXUI/doc/_2examples_2dom_2paragraph_8cpp-example.html#a3
interactive component (using keyboard)
I don't have anything built-in.
Here is an example you can adapt:
https://github.com/ArthurSonzogni/chrome-log-beautifier/blob/master/src/ui/log_displayer.cpp#L28
Selected parts:
Element LogDisplayer::RenderLines(const std::vector<std::string>& lines) {
Elements list;
for (auto& line : lines) {
Decorator line_decorator = nothing;
if (index++ == selected_) {
if (Focused())
line_decorator = focus | inverted;
else
line_decorator = focus;
}
list.push_back(text(line) | line_decorator)
}
return vbox(std::move(list)) | frame | border;
}
bool LogDisplayer::OnEvent(Event event) {
if (!Focused())
return false;
int old_selected = selected_;
if (event == Event::ArrowUp || event == Event::Character('k'))
selected_--;
if (event == Event::ArrowDown || event == Event::Character('j'))
selected_++;
if (event == Event::Tab && size)
selected_ = (selected_ + 1) % size;
if (event == Event::TabReverse && size)
selected_ = (selected_ + size - 1) % size;
selected_ = std::max(0, std::min(size-1, selected_));
if (selected_ != old_selected) {
return true;
}
return false;
}
from ftxui.
@ArthurSonzogni Thanks a lot! I'm trying the second solution now. However. there's another problem. It seems that in interactive mode, the 'render()' function is only called when there are some keyboard input. Is it possible to render the screen at a fixed speed like 30FPS since the output log should be automatically updated?
My logger's render function is called by logger.RenderLog()
which is defined as:
class LogDisplayer : public Component
{
private:
vector<string> _payload;
public:
LogDisplayer() = default;
void getLog(string str)
{
istringstream ss(str);
string tmp;
while(getline(ss, tmp))
{
_payload.push_back(tmp);
}
}
Element RenderLog()
{
Elements list;
for(int i = _payload.size() - 13; i < _payload.size(); i++)
{
Element doc = hbox({
text(buildwstring(_payload[i])),
}) | flex;
list.push_back(doc);
}
if(list.empty()) list.push_back(text(L"empty"));
return window(text(L"test"), vbox(list) | flex);
}
};
from ftxui.
You can post custom event using PostEvent
and a Event::Custom
. Those will refresh the view.
You usually want to send them after you know some data have been added. However, I guess in your case you are not actively waiting, but are checking periodically if there are updates. In this case, I guess you can create a new thread that will periodically send such events.
std::thread update([&screen]() {
for (;;) {
using namespace std::chrono_literals;
std::this_thread::sleep_for(0.05s);
screen.PostEvent(Event::Custom);
}
});
From the example:
FTXUI/examples/component/homescreen.cpp
Line 370 in 92ec5ab
from ftxui.
Actually I evoked a new thread to keep query for log needed. By adding PostEvent
, it indeed worked as I expected.
system("clear");
auto screen = ScreenInteractive::FixedSize(100, 30);
MainWindow component;
thread t([&](){
AsyncCommand cmd(std::string("logcat"));
cmd.execute();
while(!cmd.isDone())
{
string log = cmd.getOutput();
if(log.length() > 0)
{
component.getLog(log);
screen.PostEvent(Event::Custom);
}
}
});
t.detach();
screen.Loop(&component);
However, another problem I've met is that it's a bit unconvenient when the length of a sentence is greater than the maximum width of the screen. Though this can be implemented by the user, I'm still wondering if you are considering adding a built-in textarea which can automatically increase its height when there's not enough space to show one sentence without line break.
from ftxui.
The difficulty is:
The children pass their Requirement
to their parent:
FTXUI/include/ftxui/dom/node.hpp
Line 27 in 92ec5ab
Then the parent give them a Box
where they are allowed to draw themselves.
FTXUI/include/ftxui/dom/node.hpp
Line 31 in 92ec5ab
For the hflow
layout, it is very difficult to provide a Requirement
. Because the dependencies are inversed. We need to know the parent's final width to determine the children required height.
For now, the hflow
layout just require a 1x1 pixel to draw itself and declare themselves to be happy about being expanded if possible:
Line 13 in 92ec5ab
I regret I don't have something built-in for this use case.
from ftxui.
Thanks! Another question:
This is how I define the movement of the window:
bool OnEvent(Event e)
{
if(!Focused()) return false;
if(e == Event::ArrowUp) _yoffset++;
if(e == Event::ArrowDown) _yoffset--;
if(e == Event::ArrowRight) _xoffset++;
if(e == Event::ArrowLeft) _xoffset--;
return true;
}
Once the component I defined is activated, I can never focus to the other part of the screen. I also tried hjkl
to define the movement, but the the focused component still stays fixed using the arrow button.
from ftxui.
I guess it depends on which component contains your component.
When the parent receives an event, it:
- Check if the active child can process the event. If yes, return.
- Process the event itself, which likely make the active child to become the next one.
Your component, as a children seems to accept any event.
See for instance the default implementation Container, which is used in most built-in component:
FTXUI/src/ftxui/component/container.cpp
Line 32 in 92ec5ab
bool Container::OnEvent(Event event) {
if (!Focused())
return false;
if (ActiveChild() && ActiveChild()->OnEvent(event))
return true;
return (this->*event_handler_)(event);
}
I guess in your case:
(ActiveChild() && ActiveChild()->OnEvent(event))
is always true when the ActiveChild() is your component.
Then this->*event_handler_ is never called. So the current ActiveChild stays the same.
from ftxui.
Thanks. It seems that my OnEvent
function is always returning true once focused. After fixing that, I'm able to enter the other component.
from ftxui.
Related Issues (20)
- when will release new version HOT 4
- Simulate a timeline HOT 2
- dropdown example bugs HOT 2
- Creating an input window, and outputting entered text after hitting enter or special key. HOT 3
- how to hide the cursor HOT 2
- About Support for Full width Characters in FTXUI HOT 10
- Is there an Event handling when CTRL+SHIFT+C is pressed? HOT 2
- From ftxui::Element to std::string or char* HOT 3
- focus problem HOT 2
- Untidy exit on std::terminate() HOT 1
- Do you have any recommended fonts? The font provided by windows is not very beautiful HOT 2
- How to highlight text inside ftxui::text() or ftxui::paragraph() HOT 1
- Is there a bug between full width characters and vertical?
- Running tests alters the terminal state HOT 2
- The scrollbar doesn't work in the "homescreen.cpp" demo HOT 3
- [feature request] Scatter plots HOT 1
- Dynamically adding elements to Checkboxes HOT 5
- Correctness of layout requirement for flexbox. Scrollbar implementation. HOT 1
- I've tried everything. I need help HOT 1
- Compression priority when rendering a vbox with inadequate space. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ftxui.