whirled_peas 0.11.0 → 0.11.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +0 -2
  3. data/CHANGELOG.md +5 -0
  4. data/README.md +7 -1156
  5. data/doc/application.md +92 -0
  6. data/doc/cli.md +115 -0
  7. data/doc/components.md +55 -0
  8. data/doc/easing.md +257 -0
  9. data/doc/elements.md +69 -0
  10. data/doc/screen_test.md +23 -0
  11. data/doc/settings.md +466 -0
  12. data/doc/template_factory.md +53 -0
  13. data/doc/themes.md +15 -0
  14. data/lib/data/themes.yaml +8 -4
  15. data/lib/whirled_peas/component/list_with_active.rb +3 -3
  16. data/lib/whirled_peas/graphics/container_coords.rb +2 -26
  17. data/lib/whirled_peas/graphics/container_dimensions.rb +24 -0
  18. data/lib/whirled_peas/graphics/container_painter.rb +26 -28
  19. data/lib/whirled_peas/graphics/debugger.rb +1 -0
  20. data/lib/whirled_peas/graphics/graph_painter.rb +31 -24
  21. data/lib/whirled_peas/graphics/scrollbar_helper.rb +31 -29
  22. data/lib/whirled_peas/settings/bg_color.rb +5 -1
  23. data/lib/whirled_peas/settings/border.rb +1 -1
  24. data/lib/whirled_peas/settings/color.rb +8 -4
  25. data/lib/whirled_peas/settings/debugger.rb +2 -0
  26. data/lib/whirled_peas/settings/element_settings.rb +10 -2
  27. data/lib/whirled_peas/settings/text_color.rb +5 -0
  28. data/lib/whirled_peas/settings/theme.rb +28 -7
  29. data/lib/whirled_peas/settings/theme_library.rb +10 -4
  30. data/lib/whirled_peas/version.rb +1 -1
  31. data/screen_test/components/list_with_active/l2r_position_start.frame +1 -1
  32. data/screen_test/components/list_with_active/l2r_separator.frame +1 -1
  33. data/screen_test/components/list_with_active/t2b_position_start.frame +1 -1
  34. data/screen_test/components/list_with_active/t2b_separator.frame +1 -1
  35. data/screen_test/elements/{graph.frame → graph_asc.frame} +1 -1
  36. data/screen_test/elements/{graph.rb → graph_asc.rb} +0 -0
  37. data/screen_test/elements/graph_desc.frame +1 -0
  38. data/screen_test/elements/graph_desc.rb +12 -0
  39. data/screen_test/elements/graph_horiz.frame +1 -0
  40. data/screen_test/elements/graph_horiz.rb +12 -0
  41. data/screen_test/elements/graph_sin.frame +1 -0
  42. data/screen_test/elements/graph_sin.rb +12 -0
  43. data/screen_test/elements/theme.frame +1 -1
  44. data/screen_test/settings/scroll/horiz_box.frame +1 -1
  45. data/screen_test/settings/scroll/vert_box.frame +1 -1
  46. metadata +19 -6
  47. data/bin/easing +0 -33
  48. data/lib/whirled_peas/graphics/mock_screen.rb +0 -26
@@ -0,0 +1,69 @@
1
+ ## Building Blocks
2
+
3
+ A template is created with `WhirledPeas.template`, which yields a composer object for a box and its associated settings. The composer allows for attaching child elements and the settings for setting layout options. The following attributes of the template's settings will be overridden before it is rendered to ensure that it fills the screen exactly
4
+
5
+ - `margin` - all margin will be set to 0
6
+ - `width` - will be set to the screen's width
7
+ - `height` - will be set to the screen's height
8
+ - `sizing` - will be set `:border` to ensure the entire box fits on the screen and fills it entirely.
9
+
10
+ A composer provides the following methods to add child elements, each of these takes an optional string argument that is set as the name of the element (which can be useful when debugging).
11
+
12
+ - `add_box` - yields a composer for a box and associated settings, which will be added to the parent's children
13
+ - `add_graph` - yields a `nil` and settings for a graph element, which will be added to the parent's children, the block should return an array of numbers to be plotted
14
+ - `add_grid` - yields a composer for a grid and associated settings, which will be added to the parent's children
15
+ - `add_text` - yields `nil` and settings for a text element, which will be added to the parent's children
16
+
17
+ E.g.
18
+
19
+ ```ruby
20
+ WhirledPeas.template do |composer, settings|
21
+ settings.bg_color = :blue
22
+ composer.add_grid do |composer, settings|
23
+ settings.num_cols = 10
24
+ 100.times do |i|
25
+ composer.add_text { i }
26
+ end
27
+ end
28
+ end
29
+ ```
30
+
31
+ The above template can also be broken down into more manageable methods, e.g.
32
+
33
+ ```ruby
34
+ def number_grid(_composer, settings)
35
+ settings.num_cols = 10
36
+ 100.times.map(&:itself)
37
+ end
38
+
39
+ WhirledPeas.template do |composer, settings|
40
+ settings.bg_color = :blue
41
+ composer.add_grid(&method(:number_grid))
42
+ end
43
+ ```
44
+
45
+ Additionally, if no child element is explicitly added to a `Grid`, but the block returns an array of strings or numbers, those will be converted to `Text` elements and added as children to the `Grid`. For example, these are identical ways to create a grid of strings
46
+
47
+ ```ruby
48
+ template.add_grid do |composer|
49
+ 100.times do |i|
50
+ composer.add_text { i }
51
+ end
52
+ end
53
+
54
+ template.add_grid do
55
+ 100.times.map(&:itself)
56
+ end
57
+ ```
58
+
59
+ Similarly, if no child element is explicilty added to a `Box`, but the block returns a string or number, that value will be converted to a `Text` and added as a child. For example, these are identical ways to create a box with string content
60
+
61
+ ```ruby
62
+ template.add_box do |composer|
63
+ composer.add_text { "Hello!" }
64
+ end
65
+
66
+ template.add_box do
67
+ "Hello!"
68
+ end
69
+ ```
@@ -0,0 +1,23 @@
1
+ ## Screen Tests
2
+
3
+ In addition to standard RSpec tests, WhirledPeas has custom tests for rendered templates. These files live in `screen_test/`. Each ruby file is expected to define a class named `TemplateFactory` that responds to `#build(name, args)` returning a template (the standard template factory role). Each file should also be accompanied by a `.frame` file with the same base name. This file will contain the output of the rendered screen and is considered the correct output when running tests.
4
+
5
+ Note: viewing `.frame` files with `cat` works better than most other text editors.
6
+
7
+ ```
8
+
9
+ Usage: screen_test [file] [options]
10
+
11
+ If not file or options are provide, all tests are run
12
+
13
+ If no file is provided, the supported options are
14
+ --help print this usage statement and exit
15
+ --view-pending interactively display and optionally save rendered output for each pending test
16
+ --view-failed interactively display and optionally save rendered output for each faiing test
17
+
18
+ If a screen test file is provided as the first argument, the supported options are
19
+ --run run screen test for given file
20
+ --view interactively display and optionally save the file's test output
21
+ --template print out template tree for the test template
22
+ --debug render the test template without displying it, printing out debug information
23
+ ```
@@ -0,0 +1,466 @@
1
+ ## Settings
2
+
3
+ Each element type has an associated settings type, which provide a custom set of options to format the output. Child settings will inherit from the parent, where applicable. The table below lists all settings along with which element types the settings can be applied to (`container` referes to either a `grid` or `box`)
4
+
5
+ | Setting | Description | Default | Availability | Inherited |
6
+ | --------------- | --------------------------------------------------------------------------------------- | ---------- | ------------ | -------------------- |
7
+ | `align` | Justifies the content in the horizontal direction (see [Alignment](#alignment)) | `:left` | containers | No |
8
+ | `axis_color` | Color used to paint the axes of the graph (see [Color](#color)) | | graph | No |
9
+ | `bg_color` | Background color (see [Color](#color)) | | all | Yes |
10
+ | `bold` | `true` makes the font bold | `false` | all | Yes |
11
+ | `border` | Set the border for the element (see [Border](#border)) | none | containers, | Only style and color |
12
+ | `color` | Foreground text color (see [Color](#color)) | | all | Yes |
13
+ | `flow` | Flow to display child elements (see [Display Flow](#display-flow)) | `:l2r` | containers | No |
14
+ | `height` | Override the height of an element's content area (see [Dimension](#dimension)) | | all | No |
15
+ | `margin` | Set the margin of the element (see [Margin](#margin)) | `0` | containers | No |
16
+ | `num_cols` | Number of columns in the grid (must be set!) | | grid | No |
17
+ | `padding` | Set the padding of the element (see [Padding](#padding)) | `0` | containers | No |
18
+ | `content_start` | Set the position of children (see [Content Start](#content-start)) | `0` | containers | No |
19
+ | `scrollbar` | Display a scroll bar for vertical or horizontal scrolling (see [Scrollbar](#scrollbar)) | | box | No |
20
+ | `sizing` | Model that determines how width/height is calculated (see [Dimension](#dimension)) | `:content` | box | No |
21
+ | `title_font` | Font used for "large" text (see [Large Text](#large-text), ignores `underline`) | | text | No |
22
+ | `underline` | `true` underlines the font | `false` | all | Yes |
23
+ | `width` | Override the width of an element's content area (see [Dimension](#dimension)) | | all | No |
24
+ | `valign` | Justifies the content in the vertical direction (see [Alignment](#alignment)) | `:top` | containers | No |
25
+
26
+ ### Alignment
27
+
28
+ The `align` setting takes one of several values
29
+
30
+ - `:left` - align content starting at the leftmost edge of the container's content area
31
+
32
+ ```
33
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
34
+ ┃[child 1][child 2][child 3] ┃
35
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
36
+ ```
37
+
38
+ - `:right` - align content starting at the rightmost edge of the container's content area
39
+
40
+ ```
41
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
42
+ ┃ [child 1][child 2][child 3]┃
43
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
44
+ ```
45
+
46
+ - `:center` - align content starting in the horizontal center of the container's content area
47
+
48
+ ```
49
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
50
+ ┃ [child 1][child 2][child 3] ┃
51
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
52
+ ```
53
+
54
+ - `:between` - distribute children so there is equal space between children no space outside of the children
55
+
56
+ ```
57
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
58
+ ┃[child 1] [child 2] [child 3]┃
59
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
60
+ ```
61
+
62
+ - `:around` - distribute children so that they have equal spacing around them, space between two children is twice the space between an edge and a child.
63
+
64
+ ```
65
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
66
+ ┃ [child 1] [child 2] [child 3] ┃
67
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
68
+ ```
69
+
70
+ - `:evenly` - distribute children so there is even spacing between any two children (or space to the edge)
71
+
72
+ ```
73
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
74
+ ┃ [child 1] [child 2] [child 3] ┃
75
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
76
+ ```
77
+
78
+ The `valign` setting takes one of several values
79
+
80
+ - `:top` - align content starting at the top of the container's content area
81
+
82
+ ```
83
+ ┏━━━━━━━━━┓
84
+ ┃[child 1]┃
85
+ ┃[child 2]┃
86
+ ┃[child 3]┃
87
+ ┃ ┃
88
+ ┃ ┃
89
+ ┃ ┃
90
+ ┃ ┃
91
+ ┃ ┃
92
+ ┃ ┃
93
+ ┃ ┃
94
+ ┃ ┃
95
+ ┃ ┃
96
+ ┃ ┃
97
+ ┃ ┃
98
+ ┃ ┃
99
+ ┗━━━━━━━━━┛
100
+ ```
101
+
102
+ - `:bottom` - align content starting at the bottom of the container's content area
103
+
104
+ ```
105
+ ┏━━━━━━━━━┓
106
+ ┃ ┃
107
+ ┃ ┃
108
+ ┃ ┃
109
+ ┃ ┃
110
+ ┃ ┃
111
+ ┃ ┃
112
+ ┃ ┃
113
+ ┃ ┃
114
+ ┃ ┃
115
+ ┃ ┃
116
+ ┃ ┃
117
+ ┃ ┃
118
+ ┃[child 1]┃
119
+ ┃[child 2]┃
120
+ ┃[child 3]┃
121
+ ┗━━━━━━━━━┛
122
+ ```
123
+
124
+ - `:middle` - align content starting in the vertical middle of the container's content area
125
+
126
+ ```
127
+ ┏━━━━━━━━━┓
128
+ ┃ ┃
129
+ ┃ ┃
130
+ ┃ ┃
131
+ ┃ ┃
132
+ ┃ ┃
133
+ ┃ ┃
134
+ ┃[child 1]┃
135
+ ┃[child 2]┃
136
+ ┃[child 3]┃
137
+ ┃ ┃
138
+ ┃ ┃
139
+ ┃ ┃
140
+ ┃ ┃
141
+ ┃ ┃
142
+ ┃ ┃
143
+ ┗━━━━━━━━━┛
144
+ ```
145
+
146
+ - `:between` - distribute children so there is equal space between children no space outside of the children
147
+
148
+ ```
149
+ ┏━━━━━━━━━┓
150
+ ┃[child 1]┃
151
+ ┃ ┃
152
+ ┃ ┃
153
+ ┃ ┃
154
+ ┃ ┃
155
+ ┃ ┃
156
+ ┃ ┃
157
+ ┃[child 2]┃
158
+ ┃ ┃
159
+ ┃ ┃
160
+ ┃ ┃
161
+ ┃ ┃
162
+ ┃ ┃
163
+ ┃ ┃
164
+ ┃[child 3]┃
165
+ ┗━━━━━━━━━┛
166
+ ```
167
+
168
+ - `:around` - distribute children so that they have equal spacing around them, space between two children is twice the space between an edge and a child.
169
+
170
+ ```
171
+ ┏━━━━━━━━━┓
172
+ ┃ ┃
173
+ ┃ ┃
174
+ ┃[child 1]┃
175
+ ┃ ┃
176
+ ┃ ┃
177
+ ┃ ┃
178
+ ┃ ┃
179
+ ┃[child 2]┃
180
+ ┃ ┃
181
+ ┃ ┃
182
+ ┃ ┃
183
+ ┃ ┃
184
+ ┃[child 3]┃
185
+ ┃ ┃
186
+ ┃ ┃
187
+ ┗━━━━━━━━━┛
188
+ ```
189
+
190
+ - `:evenly` - distribute children so there is even spacing between any two children (or space to the edge)
191
+
192
+ ```
193
+ ┏━━━━━━━━━┓
194
+ ┃ ┃
195
+ ┃ ┃
196
+ ┃ ┃
197
+ ┃[child 1]┃
198
+ ┃ ┃
199
+ ┃ ┃
200
+ ┃ ┃
201
+ ┃[child 2]┃
202
+ ┃ ┃
203
+ ┃ ┃
204
+ ┃ ┃
205
+ ┃[child 3]┃
206
+ ┃ ┃
207
+ ┃ ┃
208
+ ┃ ┃
209
+ ┗━━━━━━━━━┛
210
+ ```
211
+
212
+ ### Content Start
213
+
214
+ Content start settings dictate the relative position from the content area where the children will get painted. Positive values for `left`/`top` result in moving the children leftward/downward, negative values shift children rightward/upward. Setting `right` or `bototm` will result in the end of the children to be painted relative to the right/bottom of the content area.
215
+
216
+ To set these values, use
217
+
218
+ - `set_content_start(left:, top:, right:, bottom:)`
219
+ - `content_start.left=`
220
+ - `content_start.top=`
221
+ - `content_start.right=`
222
+ - `content_start.bottom=`
223
+
224
+ Note: setting `left` and `right` or `top` and `bottom` is not supported
225
+
226
+ ### Dimension
227
+
228
+ By default, the width and height of a container is calculated based on the width and height of its children. These values can be explicitly overridden to force the content into a specified dimensions. There are two sizing models that determine how the `width` and `height` settings are used to calculate the dimensions. The default sizing model is `:content`, which sets the width and height of the cotent area, whereas `:border` sets the width and height of the element inlcuding the padding and border and scroll bars.
229
+
230
+ #### Examples
231
+
232
+ In the examples below, the `~` character represents padding and would not be displayed in the acutal rendered screen.
233
+
234
+ ```ruby
235
+ settings.width = 10
236
+ settings.height = 3
237
+ settings.set_padding(left: 3, top: 1, right: 3, bottom: 1)
238
+ settings.full_border
239
+
240
+ ## Content sizing
241
+ settings.sizing = :content
242
+
243
+ # Results in the box
244
+ #
245
+ # ┏━━━━━━━━━━━━━━━━┓
246
+ # ┃~~~~~~~~~~~~~~~~┃
247
+ # ┃~~~1234567890~~~┃
248
+ # ┃~~~1234567890~~~┃
249
+ # ┃~~~1234567890~~~┃
250
+ # ┃~~~~~~~~~~~~~~~~┃
251
+ # ┗━━━━━━━━━━━━━━━━┛
252
+
253
+ ## Border sizing
254
+ settings.sizing = :border
255
+
256
+ # Results in the box
257
+ #
258
+ # ┏━━━━━━━━┓
259
+ # ┃~~~12~~~┃
260
+ # ┗━━━━━━━━┛
261
+ ```
262
+
263
+ Notice that a box rendered with `:border` sizing would fit exactly in the content area of a box with the same `width` and `height` that is rendered with `:content` sizing. For containers with no padding and no border, the resulting size is the same for either sizing model.
264
+
265
+ ### Margin
266
+
267
+ Margin settings dictate the spacing on the outside (i.e. outside of the border) of each of the 4 sides of the container independently. To set these values, use
268
+
269
+ - `set_margin(left:, top:, right:, bottom:, horiz:, vert:)` - set any combination of margin (note: setting `horiz` and `left`/`right` or setting `vert` and `top`/`bottom` is not allowed)
270
+ - `margin.left=(value)` - set left margin
271
+ - `margin.top=(value)` - set top margin
272
+ - `margin.right=(value)` - set right margin
273
+ - `margin.bottom=(value)` - set bottom margin
274
+ - `margin.horiz=(value)` - set left and right margin to the same value
275
+ - `margin.vert=(value)` - set top and bottom margin to the same value
276
+
277
+ Note: values cannot be negative
278
+
279
+ ### Padding
280
+
281
+ Padding settings dictate the spacing on the inside (i.e. inside of the border) of each of the 4 sides of the container independently. To set these values, use
282
+
283
+ - `set_padding(left:, top:, right:, bottom:, horiz:, vert:)` - set any combination of padding (note: setting `horiz` and `left`/`right` or setting `vert` and `top`/`bottom` is not allowed)
284
+ - `padding.left=(value)` - set left padding
285
+ - `padding.top=(value)` - set top padding
286
+ - `padding.right=(value)` - set right padding
287
+ - `padding.bottom=(value)` - set bottom padding
288
+ - `padding.horiz=(value)` - set left and right padding to the same value
289
+ - `padding.vert=(value)` - set top and bottom padding to the same value
290
+
291
+ Note: values cannot be negative
292
+
293
+ ### Scrollbar
294
+
295
+ Scroll settings dictate whether the scrollbar will be shown when child content is larger the the container's viewport. A scrollbar adds a unit to the dimensions of a container (as opposed to overwriting the leftmost/bottommost padding)
296
+
297
+ - `set_scrollbar(horiz:, vert:)` - set both scrollbar settings
298
+ - `scrollbar.horiz=(flag)` - show/hide the horizontal scrollbar
299
+ - `scrollbar.vert=(flag)` - show/hide the vertical scrollbar
300
+
301
+ Note: there is a know bug with scrollbars and `center`/`right` alignments. Using `left` alignment is the supported workaround
302
+
303
+ ### Border
304
+
305
+ The border settings consist of 6 boolean values (border are either width 1 or not shown), the 4 obvious values (`left`, `top`, `right`, and `bottom`) along with 2 other values for inner borders (`inner_horiz` and `inner_vert`) in a grid. A border also has a foreground color (defaults to `:white`) and a style. The background color is determined by the `bg_color` of the element. Border values can be set with
306
+
307
+ - `set_border(left:, top:, right:, bottom:, inner_horiz:, inner_vert:, color:, style:)` - set any combination of border settings
308
+ - `full_border(style:, color:)` - set all borders to true and optionally set the style or color
309
+ - `border.left=(flag)` - show/hide left border
310
+ - `border.top=(flag)` - show/hide top border
311
+ - `border.right=(flag)` - show/hide right border
312
+ - `border.bottom=(flag)` - show/hide bottom border
313
+ - `border.inner_horiz=(flag)` - show/hide inner horizontal border (dividing grid rows)
314
+ - `border.inner_vert=(flag)` - show/hide inner vertical border (dividing grid columns)
315
+ - `border.color=(text_color)` - set the border color
316
+ - `border.style=(style)` - set the border style
317
+
318
+ Available border styles are
319
+
320
+ - `:bold` (default)
321
+
322
+ ```
323
+ ┏━━┳━━┓
324
+ ┃ ┃ ┃
325
+ ┣━━╋━━┫
326
+ ┃ ┃ ┃
327
+ ┗━━┻━━┛
328
+ ```
329
+
330
+ - `:double`
331
+
332
+ ```
333
+ ╔══╦══╗
334
+ ║ ║ ║
335
+ ╠══╬══╣
336
+ ║ ║ ║
337
+ ╚══╩══╝
338
+ ```
339
+
340
+ - `:soft`
341
+
342
+ ```
343
+ ╭──┬──╮
344
+ │ │ │
345
+ ├──┼──┤
346
+ │ │ │
347
+ ╰──┴──╯
348
+ ```
349
+
350
+ ### Display Flow
351
+
352
+ Child elements can flow in one of 4 directions
353
+
354
+ - `:l2r` left-to-right
355
+
356
+ ```
357
+ # In a Box
358
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
359
+ ┃[child 1] [child 2] ... [child N]┃
360
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
361
+
362
+ # In a Grid
363
+ ┏━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━┓
364
+ ┃[child 1]┃[child 2]┃[child 3]┃
365
+ ┣━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━┫
366
+ ┃[chiid 4]┃[child 5]┃ ┃
367
+ ┗━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━┛
368
+ ```
369
+
370
+ - `:r2l` right-to-left
371
+
372
+ ```
373
+ # In a Box
374
+ ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
375
+ ┃[child N] [child N - 1] ... [child 1]┃
376
+ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
377
+
378
+ # In a Grid
379
+ ┏━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━┓
380
+ ┃[child 3]┃[child 2]┃[child 1]┃
381
+ ┣━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━┫
382
+ ┃ ┃[chiid 5]┃[child 4]┃
383
+ ┗━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━┛
384
+ ```
385
+
386
+ - `:t2b` top-to-bottom
387
+
388
+ ```
389
+ # In a Box
390
+ ┏━━━━━━━━━┓
391
+ ┃[child 1]┃
392
+ ┃[child 2]┃
393
+ ┃ ... ┃
394
+ ┃[child N]┃
395
+ ┗━━━━━━━━━┛
396
+
397
+ # In a Grid
398
+ ┏━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━┓
399
+ ┃[child 1]┃[child 3]┃[child 5]┃
400
+ ┣━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━┫
401
+ ┃[child 2]┃[child 4]┃ ┃
402
+ ┗━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━┛
403
+ ```
404
+
405
+ - `:b2t` bottom-to-top
406
+
407
+ ```
408
+ # In a Box
409
+ ┏━━━━━━━━━━━━━┓
410
+ ┃[child N] ┃
411
+ ┃[child N - 1]┃
412
+ ┃ ... ┃
413
+ ┃[child 1] ┃
414
+ ┗━━━━━━━━━━━━━┛
415
+
416
+ # In a Grid
417
+ ┏━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━┓
418
+ ┃[child 2]┃[child 4]┃ ┃
419
+ ┣━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━┫
420
+ ┃[child 1]┃[child 3]┃[child 5]┃
421
+ ┗━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━┛
422
+ ```
423
+
424
+ ### Color
425
+
426
+ Below is the list of available colors (for both foreground and background)
427
+
428
+ - `:black`
429
+ - `:blue`
430
+ - `:cyan`
431
+ - `:gray`
432
+ - `:green`
433
+ - `:magenta`
434
+ - `:red`
435
+ - `:white`
436
+ - `:yellow`
437
+
438
+ Many of these also have a "bright" option:
439
+
440
+ - `:bright_blue`
441
+ - `:bright_cyan`
442
+ - `:bright_green`
443
+ - `:bright_magenta`
444
+ - `:bright_red`
445
+ - `:bright_yellow`
446
+
447
+ ### Large Text
448
+
449
+ The `title_font` setting for `Text`s converts the standard terminal font into a large block font. The available fonts vary from system to system. Every system will have a `:default` font available, this font could look like
450
+
451
+ ```
452
+ ██████╗ ███████╗███████╗ █████╗ ██╗ ██╗██╗ ████████╗
453
+ ██╔══██╗██╔════╝██╔════╝██╔══██╗██║ ██║██║ ╚══██╔══╝
454
+ ██║ ██║█████╗ █████╗ ███████║██║ ██║██║ ██║
455
+ ██║ ██║██╔══╝ ██╔══╝ ██╔══██║██║ ██║██║ ██║
456
+ ██████╔╝███████╗██║ ██║ ██║╚██████╔╝███████╗ ██║
457
+ ╚═════╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚══════╝ ╚═╝
458
+ ```
459
+
460
+ To print out a list of all available fonts as well as sample text in that font, run
461
+
462
+ ```
463
+ $ whirled_peas title_fonts
464
+ ```
465
+
466
+ Note: when using a title font with WhirledPeas for the first time on a system, the gem loads all fonts to check which ones are available. This can be a slow process and may cause a noticeable delay when running a visualization. Running the command above will cache the results and thus when a WhirledPeas visualization is run, there will be no lag from loading fonts.