FTXUI 7.0.3
C++ functional terminal UI.
Loading...
Searching...
No Matches
homescreen.cpp
Go to the documentation of this file.
1// Copyright 2020 Arthur Sonzogni. All rights reserved.
2// Use of this source code is governed by the MIT license that can be found in
3// the LICENSE file.
4#include <stddef.h> // for size_t
5#include <array> // for array
6#include <atomic> // for atomic
7#include <chrono> // for operator""s, chrono_literals
8#include <cmath> // for sin
10#include <functional> // for ref, reference_wrapper, function
11#include <memory> // for allocator, shared_ptr, __shared_ptr_access
12#include <string> // for string, basic_string, char_traits, operator+, to_string
13#include <thread> // for sleep_for, thread
14#include <utility> // for move
15#include <vector>
16
17#include "ftxui/component/app.hpp" // for Component, App
18
19#include "ftxui/component/component.hpp" // for Checkbox, Renderer, Horizontal, Vertical, Input, Menu, Radiobox, ResizableSplitLeft, Tab
20#include "ftxui/component/component_base.hpp" // for ComponentBase, Component
21#include "ftxui/component/component_options.hpp" // for MenuOption, InputOption
22#include "ftxui/component/event.hpp" // for Event, Event::Custom
23#include "ftxui/dom/elements.hpp" // for text, color, operator|, bgcolor, filler, Element, vbox, size, hbox, separator, flex, window, graph, EQUAL, paragraph, WIDTH, hcenter, Elements, bold, vscroll_indicator, HEIGHT, flexbox, hflow, border, frame, flex_grow, gauge, paragraphAlignCenter, paragraphAlignJustify, paragraphAlignLeft, paragraphAlignRight, dim, spinner, LESS_THAN, center, yframe, GREATER_THAN
24#include "ftxui/dom/flexbox_config.hpp" // for FlexboxConfig
25#include "ftxui/screen/color.hpp" // for Color, Color::BlueLight, Color::RedLight, Color::Black, Color::Blue, Color::Cyan, Color::CyanLight, Color::GrayDark, Color::GrayLight, Color::Green, Color::GreenLight, Color::Magenta, Color::MagentaLight, Color::Red, Color::White, Color::Yellow, Color::YellowLight, Color::Default, Color::Palette256, ftxui
26#include "ftxui/screen/color_info.hpp" // for ColorInfo
27#include "ftxui/screen/terminal.hpp" // for Size, Dimensions
28
29using namespace ftxui;
30
31int main() {
32 auto screen = App::Fullscreen();
33
34 // ---------------------------------------------------------------------------
35 // HTOP
36 // ---------------------------------------------------------------------------
37 int shift = 0;
38
39 auto my_graph = [&shift](int width, int height) {
40 std::vector<int> output(width);
41 for (int i = 0; i < width; ++i) {
42 float v = 0.5f;
43 v += 0.1f * sin((i + shift) * 0.1f);
44 v += 0.2f * sin((i + shift + 10) * 0.15f);
45 v += 0.1f * sin((i + shift) * 0.03f);
46 v *= height;
47 output[i] = (int)v;
48 }
49 return output;
50 };
51
52 auto htop = Renderer([&] {
53 auto frequency = vbox({
54 text("Frequency [Mhz]") | hcenter,
55 hbox({
56 vbox({
57 text("2400 "),
58 filler(),
59 text("1200 "),
60 filler(),
61 text("0 "),
62 }),
63 graph(std::ref(my_graph)) | flex,
64 }) | flex,
65 });
66
67 auto utilization = vbox({
68 text("Utilization [%]") | hcenter,
69 hbox({
70 vbox({
71 text("100 "),
72 filler(),
73 text("50 "),
74 filler(),
75 text("0 "),
76 }),
77 graph(std::ref(my_graph)) | color(Color::RedLight),
78 }) | flex,
79 });
80
81 auto ram = vbox({
82 text("Ram [Mo]") | hcenter,
83 hbox({
84 vbox({
85 text("8192"),
86 filler(),
87 text("4096 "),
88 filler(),
89 text("0 "),
90 }),
91 graph(std::ref(my_graph)) | color(Color::BlueLight),
92 }) | flex,
93 });
94
95 return hbox({
96 vbox({
97 frequency | flex,
98 separator(),
99 utilization | flex,
100 }) | flex,
101 separator(),
102 ram | flex,
103 }) |
104 flex;
105 });
106
107 // ---------------------------------------------------------------------------
108 // Compilador
109 // ---------------------------------------------------------------------------
110
111 const std::vector<std::string> compiler_entries = {
112 "gcc",
113 "clang",
114 "emcc",
115 "game_maker",
116 "Ada compilers",
117 "ALGOL 60 compilers",
118 "ALGOL 68 compilers",
119 "Assemblers (Intel *86)",
120 "Assemblers (Motorola 68*)",
121 "Assemblers (Zilog Z80)",
122 "Assemblers (other)",
123 "BASIC Compilers",
124 "BASIC interpreters",
125 "Batch compilers",
126 "C compilers",
127 "Source-to-source compilers",
128 "C++ compilers",
129 "C# compilers",
130 "COBOL compilers",
131 "Common Lisp compilers",
132 "D compilers",
133 "DIBOL/DBL compilers",
134 "ECMAScript interpreters",
135 "Eiffel compilers",
136 "Fortran compilers",
137 "Go compilers",
138 "Haskell compilers",
139 "Java compilers",
140 "Pascal compilers",
141 "Perl Interpreters",
142 "PHP compilers",
143 "PL/I compilers",
144 "Python compilers",
145 "Scheme compilers and interpreters",
146 "Smalltalk compilers",
147 "Tcl Interpreters",
148 "VMS Interpreters",
149 "Rexx Interpreters",
150 "CLI compilers",
151 };
152
153 int compiler_selected = 0;
154 Component compiler = Radiobox(&compiler_entries, &compiler_selected);
155
156 std::array<std::string, 8> options_label = {
157 "-Wall",
158 "-Werror",
159 "-lpthread",
160 "-O3",
161 "-Wabi-tag",
162 "-Wno-class-conversion",
163 "-Wcomma-subscript",
164 "-Wno-conversion-null",
165 };
166 std::array<bool, 8> options_state = {
167 false, false, false, false, false, false, false, false,
168 };
169
170 std::vector<std::string> input_entries;
171 int input_selected = 0;
172 Component input = Menu(&input_entries, &input_selected);
173
174 auto input_option = InputOption();
175 std::string input_add_content;
176 input_option.on_enter = [&] {
177 input_entries.push_back(input_add_content);
178 input_add_content = "";
179 };
180 Component input_add = Input(&input_add_content, "input files", input_option);
181
182 std::string executable_content_ = "";
183 Component executable_ = Input(&executable_content_, "executable");
184
185 Component flags = Container::Vertical({
186 Checkbox(&options_label[0], &options_state[0]),
187 Checkbox(&options_label[1], &options_state[1]),
188 Checkbox(&options_label[2], &options_state[2]),
189 Checkbox(&options_label[3], &options_state[3]),
190 Checkbox(&options_label[4], &options_state[4]),
191 Checkbox(&options_label[5], &options_state[5]),
192 Checkbox(&options_label[6], &options_state[6]),
193 Checkbox(&options_label[7], &options_state[7]),
194 });
195
196 auto compiler_component = Container::Horizontal({
197 compiler,
198 flags,
199 Container::Vertical({
200 executable_,
201 Container::Horizontal({
202 input_add,
203 input,
204 }),
205 }),
206 });
207
208 auto render_command = [&] {
209 Elements line;
210 // Compilador
211 line.push_back(text(compiler_entries[compiler_selected]) | bold);
212 // indicadores
213 for (int i = 0; i < 8; ++i) {
214 if (options_state[i]) {
215 line.push_back(text(" "));
216 line.push_back(text(options_label[i]) | dim);
217 }
218 }
219 // Ejecutable
220 if (!executable_content_.empty()) {
221 line.push_back(text(" -o ") | bold);
222 line.push_back(text(executable_content_) | color(Color::BlueLight) |
223 bold);
224 }
225 // Entrada
226 for (auto& it : input_entries) {
227 line.push_back(text(" " + it) | color(Color::RedLight));
228 }
229 return line;
230 };
231
232 auto compiler_renderer = Renderer(compiler_component, [&] {
233 auto compiler_win = window(text("Compiler"),
234 compiler->Render() | vscroll_indicator | frame);
235 auto flags_win =
236 window(text("Flags"), flags->Render() | vscroll_indicator | frame);
237 auto executable_win = window(text("Executable:"), executable_->Render());
238 auto input_win =
239 window(text("Input"), hbox({
240 vbox({
241 hbox({
242 text("Add: "),
243 input_add->Render(),
244 }) | size(WIDTH, EQUAL, 20) |
245 size(HEIGHT, EQUAL, 1),
246 filler(),
247 }),
248 separator(),
249 input->Render() | vscroll_indicator | frame |
250 size(HEIGHT, EQUAL, 3) | flex,
251 }));
252 return vbox({
253 hbox({
254 compiler_win,
255 flags_win,
256 vbox({
257 executable_win | size(WIDTH, EQUAL, 20),
258 input_win | size(WIDTH, EQUAL, 60),
259 }),
260 filler(),
261 }) | size(HEIGHT, LESS_THAN, 8),
262 hflow(render_command()) | flex_grow,
263 }) |
264 flex_grow;
265 });
266
267 // ---------------------------------------------------------------------------
268 // Spinner
269 // ---------------------------------------------------------------------------
270 auto spinner_tab_renderer = Renderer([&] {
271 Elements entries;
272 for (int i = 0; i < 22; ++i) {
273 entries.push_back(spinner(i, shift / 5) | bold |
274 size(WIDTH, GREATER_THAN, 2) | border);
275 }
276 return hflow(std::move(entries));
277 });
278
279 // ---------------------------------------------------------------------------
280 // Colores
281 // ---------------------------------------------------------------------------
282 auto color_tab_renderer = Renderer([] {
283 auto basic_color_display =
284 vbox({
285 text("16 color palette:"),
286 separator(),
287 hbox({
288 vbox({
289 color(Color::Default, text("Default")),
290 color(Color::Black, text("Black")),
291 color(Color::GrayDark, text("GrayDark")),
292 color(Color::GrayLight, text("GrayLight")),
293 color(Color::White, text("White")),
294 color(Color::Blue, text("Blue")),
295 color(Color::BlueLight, text("BlueLight")),
296 color(Color::Cyan, text("Cyan")),
297 color(Color::CyanLight, text("CyanLight")),
298 color(Color::Green, text("Green")),
299 color(Color::GreenLight, text("GreenLight")),
300 color(Color::Magenta, text("Magenta")),
301 color(Color::MagentaLight, text("MagentaLight")),
302 color(Color::Red, text("Red")),
303 color(Color::RedLight, text("RedLight")),
304 color(Color::Yellow, text("Yellow")),
305 color(Color::YellowLight, text("YellowLight")),
306 }),
307 vbox({
308 bgcolor(Color::Default, text("Default")),
309 bgcolor(Color::Black, text("Black")),
310 bgcolor(Color::GrayDark, text("GrayDark")),
311 bgcolor(Color::GrayLight, text("GrayLight")),
312 bgcolor(Color::White, text("White")),
313 bgcolor(Color::Blue, text("Blue")),
314 bgcolor(Color::BlueLight, text("BlueLight")),
315 bgcolor(Color::Cyan, text("Cyan")),
316 bgcolor(Color::CyanLight, text("CyanLight")),
317 bgcolor(Color::Green, text("Green")),
318 bgcolor(Color::GreenLight, text("GreenLight")),
319 bgcolor(Color::Magenta, text("Magenta")),
320 bgcolor(Color::MagentaLight, text("MagentaLight")),
321 bgcolor(Color::Red, text("Red")),
322 bgcolor(Color::RedLight, text("RedLight")),
323 bgcolor(Color::Yellow, text("Yellow")),
324 bgcolor(Color::YellowLight, text("YellowLight")),
325 }),
326 }),
327 }) |
328 border;
329
330 auto palette_256_color_display = text("256 colors palette:");
331 {
332 std::vector<std::vector<ColorInfo>> info_columns = ColorInfoSorted2D();
333 Elements columns;
334 for (auto& column : info_columns) {
335 Elements column_elements;
336 for (auto& it : column) {
337 column_elements.push_back(
338 text(" ") | bgcolor(Color(Color::Palette256(it.index_256))));
339 }
340 columns.push_back(hbox(std::move(column_elements)));
341 }
342 palette_256_color_display = vbox({
343 palette_256_color_display,
344 separator(),
345 vbox(columns),
346 }) |
347 border;
348 }
349
350 // Visualización de color verdadero.
351 auto true_color_display = text("TrueColors: 24bits:");
352 {
353 int saturation = 255;
354 Elements array;
355 for (int value = 0; value < 255; value += 16) {
356 Elements line;
357 for (int hue = 0; hue < 255; hue += 6) {
358 line.push_back(text("▀") //
359 | color(Color::HSV(hue, saturation, value)) //
360 | bgcolor(Color::HSV(hue, saturation, value + 8)));
361 }
362 array.push_back(hbox(std::move(line)));
363 }
364 true_color_display = vbox({
365 true_color_display,
366 separator(),
367 vbox(std::move(array)),
368 }) |
369 border;
370 }
371
372 return flexbox(
373 {
374 basic_color_display,
375 palette_256_color_display,
376 true_color_display,
377 },
378 FlexboxConfig().SetGap(1, 1));
379 });
380
381 // ---------------------------------------------------------------------------
382 // Medidores
383 // ---------------------------------------------------------------------------
384 auto render_gauge = [&shift](int delta) {
385 float progress = (shift + delta) % 500 / 500.f;
386 return hbox({
387 text(std::to_string(int(progress * 100)) + "% ") |
388 size(WIDTH, EQUAL, 5),
389 gauge(progress),
390 });
391 };
392
393 auto gauge_component = Renderer([render_gauge] {
394 return vbox({
395 render_gauge(0) | color(Color::Black),
396 render_gauge(100) | color(Color::GrayDark),
397 render_gauge(50) | color(Color::GrayLight),
398 render_gauge(6894) | color(Color::White),
399 separator(),
400 render_gauge(6841) | color(Color::Blue),
401 render_gauge(9813) | color(Color::BlueLight),
402 render_gauge(98765) | color(Color::Cyan),
403 render_gauge(98) | color(Color::CyanLight),
404 render_gauge(9846) | color(Color::Green),
405 render_gauge(1122) | color(Color::GreenLight),
406 render_gauge(84) | color(Color::Magenta),
407 render_gauge(645) | color(Color::MagentaLight),
408 render_gauge(568) | color(Color::Red),
409 render_gauge(2222) | color(Color::RedLight),
410 render_gauge(220) | color(Color::Yellow),
411 render_gauge(348) | color(Color::YellowLight),
412 });
413 });
414
415 // ---------------------------------------------------------------------------
416 // Párrafo
417 // ---------------------------------------------------------------------------
418 auto make_box = [](size_t dimx, size_t dimy) {
419 std::string title = std::to_string(dimx) + "x" + std::to_string(dimy);
420 return window(text(title) | hcenter | bold,
421 text("content") | hcenter | dim) |
422 size(WIDTH, EQUAL, dimx) | size(HEIGHT, EQUAL, dimy);
423 };
424
425 auto paragraph_renderer_left = Renderer([&] {
426 std::string str =
427 "Lorem Ipsum is simply dummy text of the printing and typesetting "
428 "industry.\nLorem Ipsum has been the industry's standard dummy text "
429 "ever since the 1500s, when an unknown printer took a galley of type "
430 "and scrambled it to make a type specimen book.";
431 return vbox({
432 window(text("Align left:"), paragraphAlignLeft(str)),
433 window(text("Align center:"), paragraphAlignCenter(str)),
434 window(text("Align right:"), paragraphAlignRight(str)),
435 window(text("Align justify:"), paragraphAlignJustify(str)),
436 window(text("Side by side"), hbox({
437 paragraph(str),
438 separator(),
439 paragraph(str),
440 })),
441 window(text("Elements with different size:"),
442 flexbox({
443 make_box(10, 5),
444 make_box(9, 4),
445 make_box(8, 4),
446 make_box(6, 3),
447 make_box(10, 5),
448 make_box(9, 4),
449 make_box(8, 4),
450 make_box(6, 3),
451 make_box(10, 5),
452 make_box(9, 4),
453 make_box(8, 4),
454 make_box(6, 3),
455 })),
456 }) |
457 vscroll_indicator | yframe | flex;
458 });
459
460 auto paragraph_renderer_right = Renderer([] {
461 return paragraph("<--- This vertical bar is resizable using the mouse") |
462 center;
463 });
464
465 int paragraph_renderer_split_position = Terminal::Size().dimx / 2;
466 auto paragraph_renderer_group =
467 ResizableSplitLeft(paragraph_renderer_left, paragraph_renderer_right,
468 &paragraph_renderer_split_position);
469 auto paragraph_renderer_group_renderer =
470 Renderer(paragraph_renderer_group,
471 [&] { return paragraph_renderer_group->Render(); });
472
473 // ---------------------------------------------------------------------------
474 // Pestañas
475 // ---------------------------------------------------------------------------
476
477 int tab_index = 0;
478 std::vector<std::string> tab_entries = {
479 "htop", "color", "spinner", "gauge", "compiler", "paragraph",
480 };
481 auto tab_selection =
482 Menu(&tab_entries, &tab_index, MenuOption::HorizontalAnimated());
483 auto tab_content = Container::Tab(
484 {
485 htop,
486 color_tab_renderer,
487 spinner_tab_renderer,
488 gauge_component,
489 compiler_renderer,
490 paragraph_renderer_group_renderer,
491 },
492 &tab_index);
493
494 auto exit_button =
495 Button("Exit", [&] { screen.Exit(); }, ButtonOption::Animated());
496
497 auto main_container = Container::Vertical({
498 Container::Horizontal({
499 tab_selection,
500 exit_button,
501 }),
502 tab_content,
503 });
504
505 auto main_renderer = Renderer(main_container, [&] {
506 return vbox({
507 text("FTXUI Demo") | bold | hcenter,
508 hbox({
509 tab_selection->Render() | flex,
510 exit_button->Render(),
511 }),
512 tab_content->Render() | flex,
513 });
514 });
515
516 Loop loop(&screen, main_renderer);
517 while (!loop.HasQuitted()) {
518 // Actualizar el estado de la aplicación.
519 shift++;
520
521 // Solicitar que se dibuje un nuevo fotograma.
522 screen.RequestAnimationFrame();
523
524 // Ejecutar eventos y dibujar el siguiente fotograma.
525 loop.RunOnce();
526
527 // Esperar una corta duración para controlar la velocidad de fotogramas (60 FPS).
528 std::this_thread::sleep_for(std::chrono::milliseconds(1000 / 60));
529 }
530
531 return 0;
532}
Element make_box(int x, int y)
Component Button(ConstStringRef label, std::function< void()> on_click, ButtonOption options=ButtonOption::Simple())
Dibuja un botón. Ejecuta una función cuando se hace clic.
Component Renderer(Component child, std::function< Element()>)
Devuelve un nuevo Component, similar a |child|, pero usando |render| como el evento Component::Render...
Component Checkbox(ConstStringRef label, bool *checked, CheckboxOption options=CheckboxOption::Simple())
Dibuja un elemento marcable.
Component Input(StringRef content, InputOption options={})
Una caja de entrada para editar texto.
Component Radiobox(ConstStringListRef entries, int *selected_, RadioboxOption options={})
Una lista de elementos, donde solo uno puede ser seleccionado.
Component Menu(ConstStringListRef entries, int *selected_, MenuOption options=MenuOption::Vertical())
Una lista de texto. El elemento enfocado está seleccionado.
Component ResizableSplitLeft(Component main, Component back, int *main_size)
Una división horizontal entre dos componentes, configurable usando el ratón.
Element window(Element title, Element content, BorderStyle border=ROUNDED)
Dibuja una ventana con un título y un borde alrededor del elemento.
Element text(std::string_view text)
Muestra un fragmento de texto Unicode codificado en UTF8.
Element paragraphAlignLeft(std::string_view the_text)
Devuelve un elemento que dibuja el párrafo en varias líneas, alineado a la izquierda.
Decorator size(WidthOrHeight direction, Constraint constraint, int value)
Aplica una restricción al tamaño de un elemento.
Element flex(Element child)
Hace que un elemento hijo se expanda proporcionalmente al espacio restante en un contenedor.
Definition flex.cpp:95
Element spinner(int charset_index, size_t image_index)
Útil para representar el efecto del tiempo y/o eventos. Esto muestra un "video" de arte ASCII.
Element center(Element child)
Centra un elemento horizontal y verticalmente.
Element paragraphAlignJustify(std::string_view the_text)
Devuelve un elemento que dibuja el párrafo en varias líneas, alineado utilizando una alineación justi...
Element flex_grow(Element child)
Expandir si es posible.
Definition flex.cpp:113
Element paragraphAlignCenter(std::string_view the_text)
Devuelve un elemento que dibuja el párrafo en varias líneas, alineado al centro.
Element paragraph(std::string_view the_text)
Devuelve un elemento que dibuja el párrafo en varias líneas.
Element bgcolor(Color color, Element child)
Establece el color de fondo de un elemento.
Definition dom/color.cpp:96
Element paragraphAlignRight(std::string_view the_text)
Devuelve un elemento que dibuja el párrafo en varias líneas, alineado a la derecha.
Element separator()
Dibuja una separación vertical u horizontal entre otros dos elementos.
Element filler()
Un elemento que se expandirá proporcionalmente al espacio restante en un contenedor.
Definition flex.cpp:70
Element color(Color color, Element child)
Establece el color de primer plano de un elemento.
Definition dom/color.cpp:81
Element gauge(float progress)
Dibuja una barra de progreso de alta definición.
Element hcenter(Element child)
Centra un elemento horizontalmente.
Element vbox(Elements children)
Un contenedor que muestra elementos verticalmente uno por uno.
Definition vbox.cpp:96
int main()
El espacio de nombres ftxui:: de FTXUI.
Definition animation.hpp:11
@ LESS_THAN
Definition elements.hpp:194
@ GREATER_THAN
Definition elements.hpp:194
Element flexbox(Elements, FlexboxConfig config=FlexboxConfig())
Un contenedor que muestra elementos en filas/columnas y es capaz de ajustarse a la siguiente columna/...
Definition flexbox.cpp:252
FTXUI_EXPORT(DOM) Element gridbox(std Element hflow(Elements)
Un contenedor que muestra elementos en filas de izquierda a derecha. Cuando está lleno,...
Definition flexbox.cpp:270
Element hbox(Elements children)
Un contenedor que muestra elementos horizontalmente uno por uno.
Definition hbox.cpp:94
std::vector< Element > Elements
Definition elements.hpp:26
std::vector< std::vector< ColorInfo > > ColorInfoSorted2D()
Color
Construye un color transparente.
Definition elements.hpp:99
int value
Definition elements.hpp:195
Element graph(GraphFunction graph_function)
Dibuja un gráfico usando una GraphFunction.
std::shared_ptr< ComponentBase > Component
Definition app.hpp:23