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.
- checksums.yaml +4 -4
- data/.gitignore +0 -2
- data/CHANGELOG.md +5 -0
- data/README.md +7 -1156
- data/doc/application.md +92 -0
- data/doc/cli.md +115 -0
- data/doc/components.md +55 -0
- data/doc/easing.md +257 -0
- data/doc/elements.md +69 -0
- data/doc/screen_test.md +23 -0
- data/doc/settings.md +466 -0
- data/doc/template_factory.md +53 -0
- data/doc/themes.md +15 -0
- data/lib/data/themes.yaml +8 -4
- data/lib/whirled_peas/component/list_with_active.rb +3 -3
- data/lib/whirled_peas/graphics/container_coords.rb +2 -26
- data/lib/whirled_peas/graphics/container_dimensions.rb +24 -0
- data/lib/whirled_peas/graphics/container_painter.rb +26 -28
- data/lib/whirled_peas/graphics/debugger.rb +1 -0
- data/lib/whirled_peas/graphics/graph_painter.rb +31 -24
- data/lib/whirled_peas/graphics/scrollbar_helper.rb +31 -29
- data/lib/whirled_peas/settings/bg_color.rb +5 -1
- data/lib/whirled_peas/settings/border.rb +1 -1
- data/lib/whirled_peas/settings/color.rb +8 -4
- data/lib/whirled_peas/settings/debugger.rb +2 -0
- data/lib/whirled_peas/settings/element_settings.rb +10 -2
- data/lib/whirled_peas/settings/text_color.rb +5 -0
- data/lib/whirled_peas/settings/theme.rb +28 -7
- data/lib/whirled_peas/settings/theme_library.rb +10 -4
- data/lib/whirled_peas/version.rb +1 -1
- data/screen_test/components/list_with_active/l2r_position_start.frame +1 -1
- data/screen_test/components/list_with_active/l2r_separator.frame +1 -1
- data/screen_test/components/list_with_active/t2b_position_start.frame +1 -1
- data/screen_test/components/list_with_active/t2b_separator.frame +1 -1
- data/screen_test/elements/{graph.frame → graph_asc.frame} +1 -1
- data/screen_test/elements/{graph.rb → graph_asc.rb} +0 -0
- data/screen_test/elements/graph_desc.frame +1 -0
- data/screen_test/elements/graph_desc.rb +12 -0
- data/screen_test/elements/graph_horiz.frame +1 -0
- data/screen_test/elements/graph_horiz.rb +12 -0
- data/screen_test/elements/graph_sin.frame +1 -0
- data/screen_test/elements/graph_sin.rb +12 -0
- data/screen_test/elements/theme.frame +1 -1
- data/screen_test/settings/scroll/horiz_box.frame +1 -1
- data/screen_test/settings/scroll/vert_box.frame +1 -1
- metadata +19 -6
- data/bin/easing +0 -33
- data/lib/whirled_peas/graphics/mock_screen.rb +0 -26
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 16dc58df5e4b6dbb2bdf51d95841d02bc9172f1e116efd8afd0633df592a7c8e
|
4
|
+
data.tar.gz: 0a2a14b167b502954a9ec2e58d762b32b60a2ab62e136d976b7d1d70e5630189
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 94d96284d6b3201496456fad7b464f3b71ab02c51878817e81856331fa3cb763a36383198ffe2be31f2e9747580656cb13a587b630f4f5866cd40340c1617744
|
7
|
+
data.tar.gz: 51e6271630fda2450af38f59f9c8d888b2b9338efacb6f8c7664393b1fdea8e616f00e20eec47b8bba59c25db510cade9a359119e06d02f8ac9c8de79f372664
|
data/.gitignore
CHANGED
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,10 @@
|
|
1
1
|
# Changelog
|
2
2
|
|
3
|
+
## v0.11.1 - 2021-01-31
|
4
|
+
|
5
|
+
- [36e48cf](https://github.com/tcollier/whirled_peas/tree/36e48cf6731706539c6c41ce0ef66e86c62380a5): Add highlight colors and border style to theme
|
6
|
+
- [93b1034](https://github.com/tcollier/whirled_peas/tree/93b1034b9401fe9e31cd3199a5e2426d7a893ed6): Better handling of non-ascending graphs
|
7
|
+
|
3
8
|
## v0.11.0 - 2021-01-30
|
4
9
|
|
5
10
|
- [c1f3d94](https://github.com/tcollier/whirled_peas/tree/c1f3d944a35305c3032681db13ffd6142a7e19e4): Add component support
|
data/README.md
CHANGED
@@ -38,10 +38,10 @@ Or install it yourself as:
|
|
38
38
|
|
39
39
|
## Usage
|
40
40
|
|
41
|
-
A Whirled Peas application consists of the following pieces
|
41
|
+
A Whirled Peas application consists of the following required pieces
|
42
42
|
|
43
|
-
- The application
|
44
|
-
- The
|
43
|
+
- [The application](doc/application.md) - the code that is to be visualized, it dictates the frame contents and playback speed
|
44
|
+
- [The template factory](doc/template_factory.md) - builds templates to convert frame from the application into terminal graphics
|
45
45
|
|
46
46
|
These pieces are configured as following
|
47
47
|
|
@@ -74,1168 +74,19 @@ WhirledPeas.configure do |config|
|
|
74
74
|
end
|
75
75
|
```
|
76
76
|
|
77
|
-
Then the visualizer is started on the command line with
|
77
|
+
Then the visualizer is started on the [command line](doc/cli.md) with
|
78
78
|
|
79
79
|
```
|
80
80
|
$ whirled_peas play visualize.rb
|
81
81
|
```
|
82
82
|
|
83
|
-
### Application
|
84
|
-
|
85
|
-
The application is code to be visualized that integrates with Whirled Peas by providing the signature below
|
86
|
-
|
87
|
-
```ruby
|
88
|
-
# Start the application and pass frame events to the producer to be rendered
|
89
|
-
# by the UI
|
90
|
-
#
|
91
|
-
# @param producer [Producer] frame producer that sends events to the UI
|
92
|
-
def start(producer)
|
93
|
-
# application code here
|
94
|
-
end
|
95
|
-
```
|
96
|
-
|
97
|
-
The producer provides the following methods
|
98
|
-
|
99
|
-
```ruby
|
100
|
-
# Add a frame to be displayed
|
101
|
-
#
|
102
|
-
# @param name [String] (required) application defined name for the frame. The
|
103
|
-
# template factory will be provided this name
|
104
|
-
# @param duration [Number] (optional) time in seconds this frame should be
|
105
|
-
# displayed for (defaults to 1 frame)
|
106
|
-
# @param args [Hash<Symbol, Object>] (optional) key/value pairs to send as
|
107
|
-
# arguments to the template factory
|
108
|
-
def add_frame(name, duration:, args:)
|
109
|
-
end
|
110
|
-
|
111
|
-
# Create and yield a frameset instance that allows applications to add multiple
|
112
|
-
# frames to play over the given duration. Adding frames to the yielded frameset
|
113
|
-
# will result in playback that is eased by the given `easing` and `effect`
|
114
|
-
# arguments (default is `:linear` easing)
|
115
|
-
#
|
116
|
-
# @param duration [Number] (required) total duration for which all frames in
|
117
|
-
# frameset will be displayed
|
118
|
-
# @param easing [Symbol] (optional) easing function to be used to transition
|
119
|
-
# through all frames (defaults to `:linear`)
|
120
|
-
# @param effect [Symbol] (optional) how to apply the easing function (defaults
|
121
|
-
# to `:in_out`, also available are `:in` and `:out`)
|
122
|
-
# @yield [Frameset] instance that provides `#add_frame(name, args:)`
|
123
|
-
def frameset(duration, easing:, effect:, &block)
|
124
|
-
end
|
125
|
-
```
|
126
|
-
|
127
|
-
A frameset instance provides one method
|
128
|
-
|
129
|
-
```ruby
|
130
|
-
# Add a frame to be displayed, the duration will be determine by the number of
|
131
|
-
# frames in the frameset along with the duration and easing of the frameset
|
132
|
-
#
|
133
|
-
# @param name [String] (required) application defined name for the frame. The
|
134
|
-
# template factory will be provided this name
|
135
|
-
# @param args [Hash<Symbol, Object>] (optional) key/value pairs to send as
|
136
|
-
# arguments to the template factory
|
137
|
-
def add_frame(name, args:)
|
138
|
-
end
|
139
|
-
```
|
140
|
-
|
141
|
-
**IMPORTANT**: the keys in the `args` hash must be symbols!
|
142
|
-
|
143
|
-
#### Example
|
144
|
-
|
145
|
-
Simple application that loads a set of numbers and looks for a pair that adds up to 1,000
|
146
|
-
|
147
|
-
```ruby
|
148
|
-
class Application
|
149
|
-
def start(producer)
|
150
|
-
numbers = File.readlines('/path/to/numbers.txt').map(&:to_i)
|
151
|
-
producer.add_frame('load-numbers', duration: 3, args: { numbers: numbers })
|
152
|
-
numbers.sort!
|
153
|
-
producer.add_frame('sort-numbers', duration: 3, args: { numbers: numbers })
|
154
|
-
low = 0
|
155
|
-
high = numbers.length - 1
|
156
|
-
while low < high
|
157
|
-
sum = numbers[low] + numbers[high]
|
158
|
-
if sum == 1000
|
159
|
-
producer.add_frame('found-pair', duration: 5, args: { low: low, high: high, sum: sum })
|
160
|
-
return
|
161
|
-
elsif sum < 1000
|
162
|
-
producer.add_frame('too-low', args: { low: low, high: high, sum: sum })
|
163
|
-
low += 1
|
164
|
-
else
|
165
|
-
producer.add_frame('too-high', args: { low: low, high: high, sum: sum })
|
166
|
-
high -= 1
|
167
|
-
end
|
168
|
-
end
|
169
|
-
producer.add_frame('no-solution', duration: 5)
|
170
|
-
end
|
171
|
-
end
|
172
|
-
```
|
173
|
-
|
174
|
-
### Template Factory
|
175
|
-
|
176
|
-
To render the frame events sent by the application, the application requires a template factory. This factory will be called for each frame event, with the frame name and the arguments supplied by the application. A template factory can be an instance of ruby class and thus can maintain state. Whirled Peas provides a few basic building blocks to make simple, yet elegant terminal-based UIs.
|
177
|
-
|
178
|
-
#### Building Blocks
|
179
|
-
|
180
|
-
A template is created with `WhirledPeas.template`, which yields a `Composer` object for a `Box` and `BoxSettings`. 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
|
181
|
-
|
182
|
-
- `margin` - all margin will be set to 0
|
183
|
-
- `width` - will be set to the screen's width
|
184
|
-
- `height` - will be set to the screen's height
|
185
|
-
- `sizing` - will be set `:border` to ensure the entire box fits on the screen and fills it entirely.
|
186
|
-
|
187
|
-
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).
|
188
|
-
|
189
|
-
- `add_box` - yields a `Composer` for a `Box` and a `BoxSettings`, which will be added to the parent's children
|
190
|
-
- `add_graph` - yields a `nil` and a `GraphSettings`, which will be added to the parent's children, the block should return an array of numbers
|
191
|
-
- `add_grid` - yields a `Composer` for a `Grid` and a `GridSettings`, which will be added to the parent's children
|
192
|
-
- `add_text` - yields `nil` and a `TextSettings`, which will be added to the parent's children
|
193
|
-
|
194
|
-
E.g.
|
195
|
-
|
196
|
-
```ruby
|
197
|
-
WhirledPeas.template do |composer, settings|
|
198
|
-
settings.bg_color = :blue
|
199
|
-
composer.add_grid do |composer, settings|
|
200
|
-
settings.num_cols = 10
|
201
|
-
100.times do |i|
|
202
|
-
composer.add_text { i }
|
203
|
-
end
|
204
|
-
end
|
205
|
-
end
|
206
|
-
```
|
207
|
-
|
208
|
-
The above template can also be broken down into more manageable methods, e.g.
|
209
|
-
|
210
|
-
```ruby
|
211
|
-
def number_grid(_composer, settings)
|
212
|
-
settings.num_cols = 10
|
213
|
-
100.times.map(&:itself)
|
214
|
-
end
|
215
|
-
|
216
|
-
WhirledPeas.template do |composer, settings|
|
217
|
-
settings.bg_color = :blue
|
218
|
-
composer.add_grid(&method(:number_grid))
|
219
|
-
end
|
220
|
-
```
|
221
|
-
|
222
|
-
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
|
223
|
-
|
224
|
-
```ruby
|
225
|
-
template.add_grid do |composer|
|
226
|
-
100.times do |i|
|
227
|
-
composer.add_text { i }
|
228
|
-
end
|
229
|
-
end
|
230
|
-
|
231
|
-
template.add_grid do
|
232
|
-
100.times.map(&:itself)
|
233
|
-
end
|
234
|
-
```
|
235
|
-
|
236
|
-
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
|
237
|
-
|
238
|
-
```ruby
|
239
|
-
template.add_box do |composer|
|
240
|
-
composer.add_text { "Hello!" }
|
241
|
-
end
|
242
|
-
|
243
|
-
template.add_box do
|
244
|
-
"Hello!"
|
245
|
-
end
|
246
|
-
```
|
247
|
-
|
248
|
-
#### Components
|
249
|
-
|
250
|
-
A component is a composition of the core building blocks. This gem includes a handful of components and third parties can also add components using `WhirledPeas.register_component(name, component_class)` (the convention for `name` is a snake cased symbol). A component class must be constructed with no arguments, though can supply basic setters to allow for customizations. A component must also implement `#compose(composer, settings)`, which should attach elements to the composer. Thus a template can integrate with the component like
|
251
|
-
|
252
|
-
```ruby
|
253
|
-
WhirledPeas.template do |composer, settings|
|
254
|
-
# Attach the component registered with the name `:my_component` to the template
|
255
|
-
WhirledPeas.component(composer, settings, :my_component) do |component|
|
256
|
-
# Configure the component
|
257
|
-
end
|
258
|
-
end
|
259
|
-
```
|
260
|
-
|
261
|
-
##### `:list_with_active`
|
262
|
-
|
263
|
-
This component presents a list of content (either horizontally of vertically) and places the item specified by `active_index` in the preferred position.
|
264
|
-
|
265
|
-
```
|
266
|
-
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
267
|
-
┃ green, blue, *indigo*, viole┃
|
268
|
-
┃ ▗▄▄▄▄▄▄▄▄▄▄▄▄▄▄▖ ┃
|
269
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
270
|
-
```
|
271
|
-
|
272
|
-
Note: in the diagram above, the item specified by the active index is highlighted with `*`s, these are for illustration onlhy. The component can highlight the item with a color and/or background color, but will _not_ add the `*`s.
|
273
|
-
|
274
|
-
This component takes the following options
|
275
|
-
|
276
|
-
**Required**
|
277
|
-
|
278
|
-
- `active_index` - the index of the active item
|
279
|
-
- `items` - the array of items to be displayed in the box
|
280
|
-
|
281
|
-
**Optional**
|
282
|
-
|
283
|
-
- `active_bg_color` - background color of the active item
|
284
|
-
- `active_color` - text color of the active item
|
285
|
-
- `flow` - `:l2r` or `:t2b`
|
286
|
-
- `separator` - string used to separate items in the list, e.g. `", "` for a horizontal list or `"----"` for a vertical list
|
287
|
-
- `viewport_size` - number of characters of the viewport in the flow direction
|
288
|
-
|
289
|
-
**Example**
|
290
|
-
|
291
|
-
```ruby
|
292
|
-
WhirledPeas.template do |composer, settings|
|
293
|
-
WhirledPeas.component(composer, settings, :list_with_active) do |component|
|
294
|
-
component.items = %w[red orange yellow green blue indigo violet]
|
295
|
-
component.separator = ', '
|
296
|
-
component.active_index = active
|
297
|
-
component.viewport_size = 27
|
298
|
-
component.active_color = :blue
|
299
|
-
component.active_bg_color = :bright_yellow
|
300
|
-
end
|
301
|
-
end
|
302
|
-
```
|
303
|
-
|
304
|
-
#### Settings
|
305
|
-
|
306
|
-
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 (`Grid` and `Box` are containers)
|
307
|
-
|
308
|
-
| Setting | Description | Default | Availability | Inherited |
|
309
|
-
| --------------- | -------------------------------------------------------------------------------- | ---------- | ------------ | -------------------- |
|
310
|
-
| `align` | Justifies the content in the horizontal direction | `:left` | containers | No |
|
311
|
-
| `axis_color` | Color used to paint the axes of the graph (see [Colors](#colors)) | | `Graph` | No |
|
312
|
-
| `bg_color` | Background color (see [Colors](#colors)) | | all | Yes |
|
313
|
-
| `bold` | `true` makes the font bold | `false` | all | Yes |
|
314
|
-
| `border` | Set the border for the lements | none | containers, | Only style and color |
|
315
|
-
| `color` | Foreground text color (see [Colors](#colors)) | | all | Yes |
|
316
|
-
| `flow` | Flow to display child elements (see [Display Flow](#display-flow)) | `:l2r` | containers | No |
|
317
|
-
| `height` | Override the calculated height of an element's content area | | all | No |
|
318
|
-
| `margin` | Set the (left, top, right, bottom) margin of the element | `0` | containers | No |
|
319
|
-
| `num_cols` | Number of columns in the grid (must be set!) | | `Grid` | No |
|
320
|
-
| `padding` | Set the (left, top, right, bottom) padding of the element | `0` | containers | No |
|
321
|
-
| `content_start` | Set the (left, top, right, bottom) position of children | `0` | containers | No |
|
322
|
-
| `scrollbar` | Display a scroll bar for vertical or horizontal scrolling | | `Box` | No |
|
323
|
-
| `sizing` | Sizing model (`:content` or `:border`) used in conjunction with `width`/`height` | `:content` | `Box` | No |
|
324
|
-
| `title_font` | Font used for "large" text (see [Large Text](#large-text), ignores `underline`) | | `Text` | No |
|
325
|
-
| `underline` | `true` underlines the font | `false` | all | Yes |
|
326
|
-
| `width` | Override the calculated width of an element's content area | | all | No |
|
327
|
-
| `valign` | Justifies the content in the vertical direction | `:top` | containers | No |
|
328
|
-
|
329
|
-
##### Themes
|
330
|
-
|
331
|
-
The template builder (`WhirledPeas.template`) takes an optional `theme` argument. You can provide the name of a predefined theme (run `whirled_peas themes` to see a list with samples) or define you own with the following
|
332
|
-
You can define your own theme
|
333
|
-
|
334
|
-
```ruby
|
335
|
-
WhirledPeas.register_theme(:my_theme) do |theme|
|
336
|
-
theme.bg_color = :bright_white
|
337
|
-
theme.color = :blue
|
338
|
-
theme.border_color = :bright_green
|
339
|
-
theme.axis_color = :bright_red
|
340
|
-
theme.title_font = :default
|
341
|
-
end
|
342
|
-
```
|
343
|
-
|
344
|
-
Theme settings will be used as default settings throughout the template, however theme settings can be overridden on any element.
|
345
|
-
|
346
|
-
##### Alignment
|
347
|
-
|
348
|
-
The `align` setting takes one of several values
|
349
|
-
|
350
|
-
- `:left` - align content starting at the leftmost edge of the container's content area
|
351
|
-
|
352
|
-
```
|
353
|
-
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
354
|
-
┃[child 1][child 2][child 3] ┃
|
355
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
356
|
-
```
|
357
|
-
|
358
|
-
- `:right` - align content starting at the rightmost edge of the container's content area
|
359
|
-
|
360
|
-
```
|
361
|
-
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
362
|
-
┃ [child 1][child 2][child 3]┃
|
363
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
364
|
-
```
|
365
|
-
|
366
|
-
- `:center` - align content starting in the horizontal center of the container's content area
|
367
|
-
|
368
|
-
```
|
369
|
-
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
370
|
-
┃ [child 1][child 2][child 3] ┃
|
371
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
372
|
-
```
|
373
|
-
|
374
|
-
- `:between` - distribute children so there is equal space between children no space outside of the children
|
375
|
-
|
376
|
-
```
|
377
|
-
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
378
|
-
┃[child 1] [child 2] [child 3]┃
|
379
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
380
|
-
```
|
381
|
-
|
382
|
-
- `: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.
|
383
|
-
|
384
|
-
```
|
385
|
-
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
386
|
-
┃ [child 1] [child 2] [child 3] ┃
|
387
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
388
|
-
```
|
389
|
-
|
390
|
-
- `:evenly` - distribute children so there is even spacing between any two children (or space to the edge)
|
391
|
-
|
392
|
-
```
|
393
|
-
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
394
|
-
┃ [child 1] [child 2] [child 3] ┃
|
395
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
396
|
-
```
|
397
|
-
|
398
|
-
The `valign` setting takes one of several values
|
399
|
-
|
400
|
-
- `:top` - align content starting at the top of the container's content area
|
401
|
-
|
402
|
-
```
|
403
|
-
┏━━━━━━━━━┓
|
404
|
-
┃[child 1]┃
|
405
|
-
┃[child 2]┃
|
406
|
-
┃[child 3]┃
|
407
|
-
┃ ┃
|
408
|
-
┃ ┃
|
409
|
-
┃ ┃
|
410
|
-
┃ ┃
|
411
|
-
┃ ┃
|
412
|
-
┃ ┃
|
413
|
-
┃ ┃
|
414
|
-
┃ ┃
|
415
|
-
┃ ┃
|
416
|
-
┃ ┃
|
417
|
-
┃ ┃
|
418
|
-
┃ ┃
|
419
|
-
┗━━━━━━━━━┛
|
420
|
-
```
|
421
|
-
|
422
|
-
- `:bottom` - align content starting at the bottom of the container's content area
|
423
|
-
|
424
|
-
```
|
425
|
-
┏━━━━━━━━━┓
|
426
|
-
┃ ┃
|
427
|
-
┃ ┃
|
428
|
-
┃ ┃
|
429
|
-
┃ ┃
|
430
|
-
┃ ┃
|
431
|
-
┃ ┃
|
432
|
-
┃ ┃
|
433
|
-
┃ ┃
|
434
|
-
┃ ┃
|
435
|
-
┃ ┃
|
436
|
-
┃ ┃
|
437
|
-
┃ ┃
|
438
|
-
┃[child 1]┃
|
439
|
-
┃[child 2]┃
|
440
|
-
┃[child 3]┃
|
441
|
-
┗━━━━━━━━━┛
|
442
|
-
```
|
443
|
-
|
444
|
-
- `:middle` - align content starting in the vertical middle of the container's content area
|
445
|
-
|
446
|
-
```
|
447
|
-
┏━━━━━━━━━┓
|
448
|
-
┃ ┃
|
449
|
-
┃ ┃
|
450
|
-
┃ ┃
|
451
|
-
┃ ┃
|
452
|
-
┃ ┃
|
453
|
-
┃ ┃
|
454
|
-
┃[child 1]┃
|
455
|
-
┃[child 2]┃
|
456
|
-
┃[child 3]┃
|
457
|
-
┃ ┃
|
458
|
-
┃ ┃
|
459
|
-
┃ ┃
|
460
|
-
┃ ┃
|
461
|
-
┃ ┃
|
462
|
-
┃ ┃
|
463
|
-
┗━━━━━━━━━┛
|
464
|
-
```
|
465
|
-
|
466
|
-
- `:between` - distribute children so there is equal space between children no space outside of the children
|
467
|
-
|
468
|
-
```
|
469
|
-
┏━━━━━━━━━┓
|
470
|
-
┃[child 1]┃
|
471
|
-
┃ ┃
|
472
|
-
┃ ┃
|
473
|
-
┃ ┃
|
474
|
-
┃ ┃
|
475
|
-
┃ ┃
|
476
|
-
┃ ┃
|
477
|
-
┃[child 2]┃
|
478
|
-
┃ ┃
|
479
|
-
┃ ┃
|
480
|
-
┃ ┃
|
481
|
-
┃ ┃
|
482
|
-
┃ ┃
|
483
|
-
┃ ┃
|
484
|
-
┃[child 3]┃
|
485
|
-
┗━━━━━━━━━┛
|
486
|
-
```
|
487
|
-
|
488
|
-
- `: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.
|
489
|
-
|
490
|
-
```
|
491
|
-
┏━━━━━━━━━┓
|
492
|
-
┃ ┃
|
493
|
-
┃ ┃
|
494
|
-
┃[child 1]┃
|
495
|
-
┃ ┃
|
496
|
-
┃ ┃
|
497
|
-
┃ ┃
|
498
|
-
┃ ┃
|
499
|
-
┃[child 2]┃
|
500
|
-
┃ ┃
|
501
|
-
┃ ┃
|
502
|
-
┃ ┃
|
503
|
-
┃ ┃
|
504
|
-
┃[child 3]┃
|
505
|
-
┃ ┃
|
506
|
-
┃ ┃
|
507
|
-
┗━━━━━━━━━┛
|
508
|
-
```
|
509
|
-
|
510
|
-
- `:evenly` - distribute children so there is even spacing between any two children (or space to the edge)
|
511
|
-
|
512
|
-
```
|
513
|
-
┏━━━━━━━━━┓
|
514
|
-
┃ ┃
|
515
|
-
┃ ┃
|
516
|
-
┃ ┃
|
517
|
-
┃[child 1]┃
|
518
|
-
┃ ┃
|
519
|
-
┃ ┃
|
520
|
-
┃ ┃
|
521
|
-
┃[child 2]┃
|
522
|
-
┃ ┃
|
523
|
-
┃ ┃
|
524
|
-
┃ ┃
|
525
|
-
┃[child 3]┃
|
526
|
-
┃ ┃
|
527
|
-
┃ ┃
|
528
|
-
┃ ┃
|
529
|
-
┗━━━━━━━━━┛
|
530
|
-
```
|
531
|
-
|
532
|
-
##### Content Start
|
533
|
-
|
534
|
-
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.
|
535
|
-
|
536
|
-
To set these values, use
|
537
|
-
|
538
|
-
- `set_content_start(left:, top:, right:, bottom:)`
|
539
|
-
- `content_start.left=`
|
540
|
-
- `content_start.top=`
|
541
|
-
- `content_start.right=`
|
542
|
-
- `content_start.bottom=`
|
543
|
-
|
544
|
-
Note: setting `left` and `right` or `top` and `bottom` is not supported
|
545
|
-
|
546
|
-
##### Sizing Model
|
547
|
-
|
548
|
-
The sizing model determines how to interpret the `width` and `height` settings. 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.
|
549
|
-
|
550
|
-
###### Examples
|
551
|
-
|
552
|
-
In the examples below, the `~` character represents padding and would not be displayed in the acutal rendered screen.
|
553
|
-
|
554
|
-
```ruby
|
555
|
-
settings.width = 10
|
556
|
-
settings.height = 3
|
557
|
-
settings.set_padding(left: 3, top: 1, right: 3, bottom: 1)
|
558
|
-
settings.full_border
|
559
|
-
|
560
|
-
## Content sizing
|
561
|
-
settings.sizing = :content
|
562
|
-
|
563
|
-
# Results in the box
|
564
|
-
#
|
565
|
-
# ┏━━━━━━━━━━━━━━━━┓
|
566
|
-
# ┃~~~~~~~~~~~~~~~~┃
|
567
|
-
# ┃~~~1234567890~~~┃
|
568
|
-
# ┃~~~1234567890~~~┃
|
569
|
-
# ┃~~~1234567890~~~┃
|
570
|
-
# ┃~~~~~~~~~~~~~~~~┃
|
571
|
-
# ┗━━━━━━━━━━━━━━━━┛
|
572
|
-
|
573
|
-
## Border sizing
|
574
|
-
settings.sizing = :border
|
575
|
-
|
576
|
-
# Results in the box
|
577
|
-
#
|
578
|
-
# ┏━━━━━━━━┓
|
579
|
-
# ┃~~~12~~~┃
|
580
|
-
# ┗━━━━━━━━┛
|
581
|
-
```
|
582
|
-
|
583
|
-
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.
|
584
|
-
|
585
|
-
##### Margin
|
586
|
-
|
587
|
-
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
|
588
|
-
|
589
|
-
- `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)
|
590
|
-
- `margin.left=(value)` - set left margin
|
591
|
-
- `margin.top=(value)` - set top margin
|
592
|
-
- `margin.right=(value)` - set right margin
|
593
|
-
- `margin.bottom=(value)` - set bottom margin
|
594
|
-
- `margin.horiz=(value)` - set left and right margin to the same value
|
595
|
-
- `margin.vert=(value)` - set top and bottom margin to the same value
|
596
|
-
|
597
|
-
Note: values cannot be negative
|
598
|
-
|
599
|
-
##### Padding
|
600
|
-
|
601
|
-
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
|
602
|
-
|
603
|
-
- `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)
|
604
|
-
- `padding.left=(value)` - set left padding
|
605
|
-
- `padding.top=(value)` - set top padding
|
606
|
-
- `padding.right=(value)` - set right padding
|
607
|
-
- `padding.bottom=(value)` - set bottom padding
|
608
|
-
- `padding.horiz=(value)` - set left and right padding to the same value
|
609
|
-
- `padding.vert=(value)` - set top and bottom padding to the same value
|
610
|
-
|
611
|
-
Note: values cannot be negative
|
612
|
-
|
613
|
-
##### Scrollbar
|
614
|
-
|
615
|
-
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)
|
616
|
-
|
617
|
-
- `set_scrollbar(horiz:, vert:)` - set both scrollbar settings
|
618
|
-
- `scrollbar.horiz=(flag)` - show/hide the horizontal scrollbar
|
619
|
-
- `scrollbar.vert=(flag)` - show/hide the vertical scrollbar
|
620
|
-
|
621
|
-
Note: there is a know bug with scrollbars and `center`/`right` alignments. Using `left` alignment is the supported workaround
|
622
|
-
|
623
|
-
##### Border
|
624
|
-
|
625
|
-
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
|
626
|
-
|
627
|
-
- `set_border(left:, top:, right:, bottom:, inner_horiz:, inner_vert:, color:, style:)` - set any combination of border settings
|
628
|
-
- `full_border(style:, color:)` - set all borders to true and optionally set the style or color
|
629
|
-
- `border.left=(flag)` - show/hide left border
|
630
|
-
- `border.top=(flag)` - show/hide top border
|
631
|
-
- `border.right=(flag)` - show/hide right border
|
632
|
-
- `border.bottom=(flag)` - show/hide bottom border
|
633
|
-
- `border.inner_horiz=(flag)` - show/hide inner horizontal border (dividing grid rows)
|
634
|
-
- `border.inner_vert=(flag)` - show/hide inner vertical border (dividing grid columns)
|
635
|
-
- `border.color=(text_color)` - set the border color
|
636
|
-
- `border.style=(style)` - set the border style
|
637
|
-
|
638
|
-
Available border styles are
|
639
|
-
|
640
|
-
- `:bold` (default)
|
641
|
-
|
642
|
-
```
|
643
|
-
┏━━┳━━┓
|
644
|
-
┃ ┃ ┃
|
645
|
-
┣━━╋━━┫
|
646
|
-
┃ ┃ ┃
|
647
|
-
┗━━┻━━┛
|
648
|
-
```
|
649
|
-
|
650
|
-
- `:double`
|
651
|
-
|
652
|
-
```
|
653
|
-
╔══╦══╗
|
654
|
-
║ ║ ║
|
655
|
-
╠══╬══╣
|
656
|
-
║ ║ ║
|
657
|
-
╚══╩══╝
|
658
|
-
```
|
659
|
-
|
660
|
-
- `:soft`
|
661
|
-
|
662
|
-
```
|
663
|
-
╭──┬──╮
|
664
|
-
│ │ │
|
665
|
-
├──┼──┤
|
666
|
-
│ │ │
|
667
|
-
╰──┴──╯
|
668
|
-
```
|
669
|
-
|
670
|
-
##### Display Flow
|
671
|
-
|
672
|
-
Child elements can flow in one of 4 directions
|
673
|
-
|
674
|
-
- `:l2r` left-to-right
|
675
|
-
|
676
|
-
```
|
677
|
-
# In a Box
|
678
|
-
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
679
|
-
┃[child 1] [child 2] ... [child N]┃
|
680
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
681
|
-
|
682
|
-
# In a Grid
|
683
|
-
┏━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━┓
|
684
|
-
┃[child 1]┃[child 2]┃[child 3]┃
|
685
|
-
┣━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━┫
|
686
|
-
┃[chiid 4]┃[child 5]┃ ┃
|
687
|
-
┗━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━┛
|
688
|
-
```
|
689
|
-
|
690
|
-
- `:r2l` right-to-left
|
691
|
-
|
692
|
-
```
|
693
|
-
# In a Box
|
694
|
-
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
695
|
-
┃[child N] [child N - 1] ... [child 1]┃
|
696
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
697
|
-
|
698
|
-
# In a Grid
|
699
|
-
┏━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━┓
|
700
|
-
┃[child 3]┃[child 2]┃[child 1]┃
|
701
|
-
┣━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━┫
|
702
|
-
┃ ┃[chiid 5]┃[child 4]┃
|
703
|
-
┗━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━┛
|
704
|
-
```
|
705
|
-
|
706
|
-
- `:t2b` top-to-bottom
|
707
|
-
|
708
|
-
```
|
709
|
-
# In a Box
|
710
|
-
┏━━━━━━━━━┓
|
711
|
-
┃[child 1]┃
|
712
|
-
┃[child 2]┃
|
713
|
-
┃ ... ┃
|
714
|
-
┃[child N]┃
|
715
|
-
┗━━━━━━━━━┛
|
716
|
-
|
717
|
-
# In a Grid
|
718
|
-
┏━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━┓
|
719
|
-
┃[child 1]┃[child 3]┃[child 5]┃
|
720
|
-
┣━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━┫
|
721
|
-
┃[child 2]┃[child 4]┃ ┃
|
722
|
-
┗━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━┛
|
723
|
-
```
|
724
|
-
|
725
|
-
- `:b2t` bottom-to-top
|
726
|
-
|
727
|
-
```
|
728
|
-
# In a Box
|
729
|
-
┏━━━━━━━━━━━━━┓
|
730
|
-
┃[child N] ┃
|
731
|
-
┃[child N - 1]┃
|
732
|
-
┃ ... ┃
|
733
|
-
┃[child 1] ┃
|
734
|
-
┗━━━━━━━━━━━━━┛
|
735
|
-
|
736
|
-
# In a Grid
|
737
|
-
┏━━━━━━━━━┳━━━━━━━━━┳━━━━━━━━━┓
|
738
|
-
┃[child 2]┃[child 4]┃ ┃
|
739
|
-
┣━━━━━━━━━╋━━━━━━━━━╋━━━━━━━━━┫
|
740
|
-
┃[child 1]┃[child 3]┃[child 5]┃
|
741
|
-
┗━━━━━━━━━┻━━━━━━━━━┻━━━━━━━━━┛
|
742
|
-
```
|
743
|
-
|
744
|
-
##### Colors
|
745
|
-
|
746
|
-
Below is the list of available colors (for both foreground and background)
|
747
|
-
|
748
|
-
- `:black`
|
749
|
-
- `:blue`
|
750
|
-
- `:cyan`
|
751
|
-
- `:gray`
|
752
|
-
- `:green`
|
753
|
-
- `:magenta`
|
754
|
-
- `:red`
|
755
|
-
- `:white`
|
756
|
-
- `:yellow`
|
757
|
-
|
758
|
-
Many of these also have a "bright" option:
|
759
|
-
|
760
|
-
- `:bright_blue`
|
761
|
-
- `:bright_cyan`
|
762
|
-
- `:bright_green`
|
763
|
-
- `:bright_magenta`
|
764
|
-
- `:bright_red`
|
765
|
-
- `:bright_yellow`
|
766
|
-
|
767
|
-
##### Large Text
|
768
|
-
|
769
|
-
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
|
770
|
-
|
771
|
-
```
|
772
|
-
██████╗ ███████╗███████╗ █████╗ ██╗ ██╗██╗ ████████╗
|
773
|
-
██╔══██╗██╔════╝██╔════╝██╔══██╗██║ ██║██║ ╚══██╔══╝
|
774
|
-
██║ ██║█████╗ █████╗ ███████║██║ ██║██║ ██║
|
775
|
-
██║ ██║██╔══╝ ██╔══╝ ██╔══██║██║ ██║██║ ██║
|
776
|
-
██████╔╝███████╗██║ ██║ ██║╚██████╔╝███████╗ ██║
|
777
|
-
╚═════╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚══════╝ ╚═╝
|
778
|
-
```
|
779
|
-
|
780
|
-
To print out a list of all available fonts as well as sample text in that font, run
|
781
|
-
|
782
|
-
```
|
783
|
-
$ whirled_peas title_fonts
|
784
|
-
```
|
785
|
-
|
786
|
-
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.
|
787
|
-
|
788
|
-
#### Easing
|
789
|
-
|
790
|
-
The play duration of a frame within a frameset is determined by the easing function and effect along with the frames relative position within the frameset. The three effects are
|
791
|
-
|
792
|
-
- `:in` - apply easing only to the start of the frameset
|
793
|
-
- `:out` - apply easing only to the end of the frameset
|
794
|
-
- `:in_out` - apply easing to the start and end of the frameset
|
795
|
-
|
796
|
-
The available easing functions are
|
797
|
-
|
798
|
-
- `:bezier`
|
799
|
-
|
800
|
-
```
|
801
|
-
# bezier (in)
|
802
|
-
┃ ▄▀
|
803
|
-
┃ ▄▄▀
|
804
|
-
┃ ▄▀
|
805
|
-
┃ ▄▀▀
|
806
|
-
┃ ▄▄▀
|
807
|
-
┃ ▄▄▀
|
808
|
-
┃ ▄▄▀
|
809
|
-
┃ ▄▀
|
810
|
-
┃ ▄▄▀▀
|
811
|
-
┃ ▄▄▀
|
812
|
-
┃ ▄▀▀
|
813
|
-
┃ ▄▄▀▀
|
814
|
-
┃ ▄▄▀▀▀
|
815
|
-
┃ ▄▄▄▀▀▀
|
816
|
-
┃▄▄▄▄▄▄▄▄▄▄▀▀▀
|
817
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
818
|
-
```
|
819
|
-
|
820
|
-
```
|
821
|
-
# bezier (out)
|
822
|
-
┃ ▄▄▄▀▀▀▀▀▀▀▀▀
|
823
|
-
┃ ▄▄▄▀▀▀
|
824
|
-
┃ ▄▄▄▀▀
|
825
|
-
┃ ▄▄▀▀
|
826
|
-
┃ ▄▄▀
|
827
|
-
┃ ▄▀▀
|
828
|
-
┃ ▄▄▀▀
|
829
|
-
┃ ▄▀
|
830
|
-
┃ ▄▀▀
|
831
|
-
┃ ▄▀▀
|
832
|
-
┃ ▄▀▀
|
833
|
-
┃ ▄▄▀
|
834
|
-
┃ ▄▀
|
835
|
-
┃ ▄▀▀
|
836
|
-
┃▄▄▀
|
837
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
838
|
-
```
|
839
|
-
|
840
|
-
```
|
841
|
-
# bezier (in_out)
|
842
|
-
┃ ▄▄▄▀▀▀▀▀▀
|
843
|
-
┃ ▄▄▀▀
|
844
|
-
┃ ▄▀▀
|
845
|
-
┃ ▄▀▀
|
846
|
-
┃ ▄▀▀
|
847
|
-
┃ ▄▀▀
|
848
|
-
┃ ▄▄▀
|
849
|
-
┃ ▄▀
|
850
|
-
┃ ▄▀▀
|
851
|
-
┃ ▄▄▀
|
852
|
-
┃ ▄▄▀
|
853
|
-
┃ ▄▄▀
|
854
|
-
┃ ▄▄▀
|
855
|
-
┃ ▄▄▀▀
|
856
|
-
┃▄▄▄▄▄▄▄▀▀▀
|
857
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
858
|
-
```
|
859
|
-
|
860
|
-
`:linear`
|
861
|
-
|
862
|
-
```
|
863
|
-
# linear (in)
|
864
|
-
┃ ▄▄▀
|
865
|
-
┃ ▄▄▀▀
|
866
|
-
┃ ▄▄▀▀
|
867
|
-
┃ ▄▄▀▀
|
868
|
-
┃ ▄▄▀▀
|
869
|
-
┃ ▄▄▀▀
|
870
|
-
┃ ▄▄▀▀
|
871
|
-
┃ ▄▄▀▀
|
872
|
-
┃ ▄▄▀▀
|
873
|
-
┃ ▄▄▀▀
|
874
|
-
┃ ▄▄▀▀
|
875
|
-
┃ ▄▄▀▀
|
876
|
-
┃ ▄▄▀▀
|
877
|
-
┃ ▄▄▀▀
|
878
|
-
┃▄▄▀▀
|
879
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
880
|
-
```
|
881
|
-
|
882
|
-
```
|
883
|
-
# linear (out)
|
884
|
-
┃ ▄▄▀
|
885
|
-
┃ ▄▄▀▀
|
886
|
-
┃ ▄▄▀▀
|
887
|
-
┃ ▄▄▀▀
|
888
|
-
┃ ▄▄▀▀
|
889
|
-
┃ ▄▄▀▀
|
890
|
-
┃ ▄▄▀▀
|
891
|
-
┃ ▄▄▀▀
|
892
|
-
┃ ▄▄▀▀
|
893
|
-
┃ ▄▄▀▀
|
894
|
-
┃ ▄▄▀▀
|
895
|
-
┃ ▄▄▀▀
|
896
|
-
┃ ▄▄▀▀
|
897
|
-
┃ ▄▄▀▀
|
898
|
-
┃▄▄▀▀
|
899
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
900
|
-
```
|
901
|
-
|
902
|
-
```
|
903
|
-
# linear (in_out)
|
904
|
-
┃ ▄▄▀
|
905
|
-
┃ ▄▄▀▀
|
906
|
-
┃ ▄▄▀▀
|
907
|
-
┃ ▄▄▀▀
|
908
|
-
┃ ▄▄▀▀
|
909
|
-
┃ ▄▄▀▀
|
910
|
-
┃ ▄▄▀▀
|
911
|
-
┃ ▄▄▀▀
|
912
|
-
┃ ▄▄▀▀
|
913
|
-
┃ ▄▄▀▀
|
914
|
-
┃ ▄▄▀▀
|
915
|
-
┃ ▄▄▀▀
|
916
|
-
┃ ▄▄▀▀
|
917
|
-
┃ ▄▄▀▀
|
918
|
-
┃▄▄▀▀
|
919
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
920
|
-
```
|
921
|
-
|
922
|
-
`:parametric`
|
923
|
-
|
924
|
-
```
|
925
|
-
# parametric (in)
|
926
|
-
┃ ▄
|
927
|
-
┃ ▄▀
|
928
|
-
┃ ▄▀
|
929
|
-
┃ ▄▄▀
|
930
|
-
┃ ▄▀
|
931
|
-
┃ ▄▀
|
932
|
-
┃ ▄▀
|
933
|
-
┃ ▄▄▀
|
934
|
-
┃ ▄▀
|
935
|
-
┃ ▄▀▀
|
936
|
-
┃ ▄▀▀
|
937
|
-
┃ ▄▄▀▀
|
938
|
-
┃ ▄▄▄▀▀
|
939
|
-
┃ ▄▄▄▄▀▀
|
940
|
-
┃▄▄▄▄▄▄▄▄▄▄▄▄▄▄▀▀▀▀▀
|
941
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
942
|
-
```
|
943
|
-
|
944
|
-
```
|
945
|
-
# parametric (out)
|
946
|
-
┃ ▄▄▄▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀
|
947
|
-
┃ ▄▄▀▀▀▀
|
948
|
-
┃ ▄▄▀▀▀
|
949
|
-
┃ ▄▄▀▀
|
950
|
-
┃ ▄▄▀
|
951
|
-
┃ ▄▄▀
|
952
|
-
┃ ▄▀
|
953
|
-
┃ ▄▀▀
|
954
|
-
┃ ▄▀
|
955
|
-
┃ ▄▀
|
956
|
-
┃ ▄▀
|
957
|
-
┃ ▄▀▀
|
958
|
-
┃ ▄▀
|
959
|
-
┃ ▄▀
|
960
|
-
┃▄▀
|
961
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
962
|
-
```
|
963
|
-
|
964
|
-
```
|
965
|
-
# parametric (in_out)
|
966
|
-
┃ ▄▄▄▀▀▀▀▀▀▀▀▀
|
967
|
-
┃ ▄▄▀▀
|
968
|
-
┃ ▄▀▀
|
969
|
-
┃ ▄▄▀
|
970
|
-
┃ ▄▀
|
971
|
-
┃ ▄▀
|
972
|
-
┃ ▄▀
|
973
|
-
┃ ▄▀
|
974
|
-
┃ ▄▀
|
975
|
-
┃ ▄▀
|
976
|
-
┃ ▄▀
|
977
|
-
┃ ▄▀▀
|
978
|
-
┃ ▄▄▀
|
979
|
-
┃ ▄▄▀▀
|
980
|
-
┃▄▄▄▄▄▄▄▄▄▄▀▀▀
|
981
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
982
|
-
```
|
983
|
-
|
984
|
-
`:quadratic`
|
985
|
-
|
986
|
-
```
|
987
|
-
# quadratic (in)
|
988
|
-
┃ ▄▄
|
989
|
-
┃ ▄▀
|
990
|
-
┃ ▄▀
|
991
|
-
┃ ▄▀
|
992
|
-
┃ ▄▀
|
993
|
-
┃ ▄▀▀
|
994
|
-
┃ ▄▀
|
995
|
-
┃ ▄▀▀
|
996
|
-
┃ ▄▀▀
|
997
|
-
┃ ▄▀▀
|
998
|
-
┃ ▄▄▀▀
|
999
|
-
┃ ▄▄▀▀
|
1000
|
-
┃ ▄▄▄▀▀
|
1001
|
-
┃ ▄▄▄▀▀▀
|
1002
|
-
┃▄▄▄▄▄▄▄▄▄▄▄▀▀▀▀▀
|
1003
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
1004
|
-
```
|
1005
|
-
|
1006
|
-
```
|
1007
|
-
# quadratic (out)
|
1008
|
-
┃ ▄▄▄▄▄▀▀▀▀▀▀▀▀▀▀
|
1009
|
-
┃ ▄▄▄▀▀▀
|
1010
|
-
┃ ▄▄▀▀▀
|
1011
|
-
┃ ▄▄▀▀
|
1012
|
-
┃ ▄▄▀▀
|
1013
|
-
┃ ▄▄▀
|
1014
|
-
┃ ▄▄▀
|
1015
|
-
┃ ▄▄▀
|
1016
|
-
┃ ▄▀
|
1017
|
-
┃ ▄▄▀
|
1018
|
-
┃ ▄▀
|
1019
|
-
┃ ▄▀
|
1020
|
-
┃ ▄▀
|
1021
|
-
┃ ▄▀
|
1022
|
-
┃▄▀▀
|
1023
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
1024
|
-
```
|
1025
|
-
|
1026
|
-
```
|
1027
|
-
# quadratic (in_out)
|
1028
|
-
┃ ▄▄▄▀▀▀▀▀▀▀
|
1029
|
-
┃ ▄▄▀▀▀
|
1030
|
-
┃ ▄▀▀
|
1031
|
-
┃ ▄▀▀
|
1032
|
-
┃ ▄▄▀
|
1033
|
-
┃ ▄▀
|
1034
|
-
┃ ▄▀
|
1035
|
-
┃ ▄▀
|
1036
|
-
┃ ▄▀
|
1037
|
-
┃ ▄▀
|
1038
|
-
┃ ▄▀▀
|
1039
|
-
┃ ▄▄▀
|
1040
|
-
┃ ▄▄▀
|
1041
|
-
┃ ▄▄▄▀▀
|
1042
|
-
┃▄▄▄▄▄▄▄▄▀▀▀
|
1043
|
-
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
1044
|
-
```
|
1045
|
-
|
1046
|
-
### Full template example
|
1047
|
-
|
1048
|
-
```ruby
|
1049
|
-
class TemplateFactory
|
1050
|
-
def build(frame, args)
|
1051
|
-
set_state(frame, args)
|
1052
|
-
WhirledPeas.template do |composer, settings|
|
1053
|
-
settings.flow = :l2r
|
1054
|
-
settings.align = :center
|
1055
|
-
|
1056
|
-
composer.add_box('Title', &method(:title))
|
1057
|
-
composer.add_box('Sum', &method(:sum))
|
1058
|
-
composer.add_grid('NumberGrid', &method(:number_grid))
|
1059
|
-
end
|
1060
|
-
end
|
1061
|
-
|
1062
|
-
private
|
1063
|
-
|
1064
|
-
def set_state(frame, args)
|
1065
|
-
@frame = frame
|
1066
|
-
@numbers = args.key?(:numbers) ? args[:numbers] || []
|
1067
|
-
@sum = args[:sum] if args.key?(:sum)
|
1068
|
-
@low = args[:low] if args.key?(:low)
|
1069
|
-
@high = args[:high] if args.key?(:high)
|
1070
|
-
end
|
1071
|
-
|
1072
|
-
def title(_composer, settings)
|
1073
|
-
settings.underline = true
|
1074
|
-
"Pair Finder"
|
1075
|
-
end
|
1076
|
-
|
1077
|
-
def sum(_composer, settings)
|
1078
|
-
settings.color = @frame == 'found-pair' ? :green : :red
|
1079
|
-
@sum ? "Sum: #{@sum}" : 'N/A'
|
1080
|
-
end
|
1081
|
-
|
1082
|
-
def number_grid(composer, settings)
|
1083
|
-
settings.full_border
|
1084
|
-
@numbers.each.with_index do |num, index|
|
1085
|
-
composer.add_text do |_, settings|
|
1086
|
-
settings.bg_color = (@low == index || @high == index) ? :cyan : :white
|
1087
|
-
num
|
1088
|
-
end
|
1089
|
-
end
|
1090
|
-
end
|
1091
|
-
end
|
1092
|
-
```
|
1093
|
-
|
1094
|
-
### Full usage
|
1095
|
-
|
1096
|
-
```
|
1097
|
-
Usage: whirled_peas <command> [command options]
|
1098
|
-
|
1099
|
-
Available commands:
|
1100
|
-
|
1101
|
-
debug Print template tree for specified frame
|
1102
|
-
fonts List installed title fonts with sample text
|
1103
|
-
frames Print out list of frames generated by application
|
1104
|
-
help Show detailed help for a command
|
1105
|
-
play Play an animation from an application or prerecorded file
|
1106
|
-
record Record animation to a file
|
1107
|
-
still Show the specified still frame
|
1108
|
-
themes List all themes with sample template rendered in the theme
|
1109
|
-
```
|
1110
|
-
|
1111
|
-
#### `debug`
|
1112
|
-
|
1113
|
-
Print the template tree for specified frame.
|
1114
|
-
|
1115
|
-
```
|
1116
|
-
# Usage: whirled_peas debug <config file> <frame> [args as a JSON string]
|
1117
|
-
% whirled_peas debug my_app.rb greeting '{"name":"World"}'
|
1118
|
-
* WhirledPeas::Graphics::BoxPainter(TEMPLATE)
|
1119
|
-
- Dimensions(outer=140x27, content=120x15, grid=1x1)
|
1120
|
-
- Settings
|
1121
|
-
WhirledPeas::Settings::BoxSettings
|
1122
|
-
padding: Padding(left: 10, top: 6, right: 10, bottom: 6)
|
1123
|
-
align: :center
|
1124
|
-
width: 120
|
1125
|
-
flow: :t2b
|
1126
|
-
bold: true
|
1127
|
-
bg_color: BgColor(code=107, bright=true)
|
1128
|
-
- Children
|
1129
|
-
* WhirledPeas::Graphics::BoxPainter(Element-1)
|
1130
|
-
- Dimensions(outer=64x6, content=64x6, grid=1x1)
|
1131
|
-
```
|
1132
|
-
|
1133
|
-
#### `fonts`
|
1134
|
-
|
1135
|
-
List all installed title fonts with sample text.
|
1136
|
-
|
1137
|
-
```
|
1138
|
-
# Usage: whirled_peas fonts
|
1139
|
-
```
|
1140
|
-
|
1141
|
-
#### `frames`
|
1142
|
-
|
1143
|
-
Print out list of frames generated by application.
|
1144
|
-
|
1145
|
-
```
|
1146
|
-
# Usage: whirled_peas frames <config file>
|
1147
|
-
% whirled_peas frames my_app.rb
|
1148
|
-
Frame 'intro' displayed for 3 second(s) '{"title":"Foo"}'
|
1149
|
-
Frame 'greet' displayed for 0.3 second(s)
|
1150
|
-
...
|
1151
|
-
```
|
1152
|
-
|
1153
|
-
#### `help`
|
1154
|
-
|
1155
|
-
Print out command-specific help message
|
1156
|
-
|
1157
|
-
```
|
1158
|
-
Usage: whirled_peas help <command>
|
1159
|
-
```
|
1160
|
-
|
1161
|
-
#### `play`
|
1162
|
-
|
1163
|
-
Play an animation from an application or prerecorded file
|
1164
|
-
|
1165
|
-
```
|
1166
|
-
# Usage: whirled_peas play <config/wpz file>
|
1167
|
-
|
1168
|
-
# Play animation directly from app
|
1169
|
-
% whirled_peas play my_app.rb
|
1170
|
-
# Animation plays
|
1171
|
-
|
1172
|
-
# Play animation from previously recorded file
|
1173
|
-
% whirled_peas play my_animation.wpz
|
1174
|
-
# Animation plays
|
1175
|
-
```
|
1176
|
-
|
1177
|
-
#### `record`
|
1178
|
-
|
1179
|
-
Record animation to a file
|
1180
|
-
|
1181
|
-
```
|
1182
|
-
# Usage: whirled_peas record <config file> <output file>
|
1183
|
-
% whirled_peas record my_app.rb my_animation.wpz
|
1184
|
-
# Record animation to my_animation.wpz
|
1185
|
-
```
|
1186
|
-
|
1187
|
-
#### `still`
|
1188
|
-
|
1189
|
-
Show the specified still frame
|
1190
|
-
|
1191
|
-
```
|
1192
|
-
# Usage: whirled_peas still <config file> <frame> [args as a JSON string]
|
1193
|
-
% whirled_peas still my_app.rb greeting '{"name":"World"}'
|
1194
|
-
# Still frame is displayed
|
1195
|
-
```
|
1196
|
-
|
1197
|
-
#### `themes`
|
1198
|
-
|
1199
|
-
List all themes and display a small sample screen in each. Running this with no extra command line arguments will display all the built-in themes. Adding the path to a Whirled Peas configuration file will inlcude any themes defined in that configuration.
|
1200
|
-
|
1201
|
-
```
|
1202
|
-
# Usage: whirled_peas themes [config file]
|
1203
|
-
% whirled_peas themes
|
1204
|
-
# Display all system themes
|
1205
|
-
|
1206
|
-
% whirled_peas themes my_app.rb
|
1207
|
-
# Display app-defined themes and all system themes
|
1208
|
-
```
|
1209
|
-
|
1210
83
|
## Development
|
1211
84
|
|
1212
|
-
After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake
|
85
|
+
After checking out the repo, run `bin/setup` to install dependencies. Then, run `bundle exec rake` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
|
1213
86
|
|
1214
|
-
|
1215
|
-
|
1216
|
-
### Testing
|
1217
|
-
|
1218
|
-
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.
|
1219
|
-
|
1220
|
-
Note: viewing `.frame` files with `cat` works better than most other text editors.
|
1221
|
-
|
1222
|
-
```
|
87
|
+
Tests inclued standard RSpec tests for application logic as well as custom [screen tests](doc/screen_test.md) to validate the rendered graphics.
|
1223
88
|
|
1224
|
-
|
1225
|
-
|
1226
|
-
If not file or options are provide, all tests are run
|
1227
|
-
|
1228
|
-
If no file is provided, the supported options are
|
1229
|
-
--help print this usage statement and exit
|
1230
|
-
--view-pending interactively display and optionally save rendered output for each pending test
|
1231
|
-
--view-failed interactively display and optionally save rendered output for each faiing test
|
1232
|
-
|
1233
|
-
If a screen test file is provided as the first argument, the supported options are
|
1234
|
-
--run run screen test for given file
|
1235
|
-
--view interactively display and optionally save the file's test output
|
1236
|
-
--template print out template tree for the test template
|
1237
|
-
--debug render the test template without displying it, printing out debug information
|
1238
|
-
```
|
89
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
1239
90
|
|
1240
91
|
## Contributing
|
1241
92
|
|