components.md

Pages

1. Getting started
2. Layouts
3. Styling
4. Components
5. Writing component

Components

Defined in components folder

Description

Below described current list of components

Rect

Defined in rect.sh

Rectangle - a building block, used for defining areas or as a container.

Code from styles.sh in examples folder

source ../src/lib.sh
init_screen

layout.create_from_screen Layout

layout.v_split Layout vbox1 vbox2 
layout.h_split vbox1 hbox1 hbox2 
layout.h_split vbox2 hbox3 hbox4 


rect.new blue_rect
rect.new red_rect
rect.new green_rect
rect.new purple_rect

rect.set_style blue_rect bg_color="0;0;255" fg_color="0;0;0"
rect.set_style red_rect bg_color="255;0;0"
rect.set_style green_rect bg_color="0;255;0"
rect.set_style purple_rect bg_color="255;0;225" fg_color="0;0;0"

rect.set_title blue_rect "blue rect"
rect.set_title red_rect "red rect"
rect.set_title green_rect "green rect"
rect.set_title purple_rect "purple rect"

rect.set_title_style blue_rect reversed
rect.set_title_style red_rect crossed
rect.set_title_style green_rect underlined
rect.set_title_style purple_rect blink


rect.draw blue_rect hbox1
rect.draw red_rect hbox2
rect.draw green_rect hbox3
rect.draw purple_rect hbox4


buffer.flush
sleep 10
exit_screen

Label

Defined in label.sh

Label - draws text, supports multiline mode, where if text too big, it will go to next lines

Code from labels.sh in examples folder

source ../src/lib.sh
init_screen

layout.create_from_screen Layout

label.new label1 "Im from top left"
label.new label2 "Im from top right"
label.new label3 "Im centered!"

label.new label4 "Im Tooooooooooooooooooooooooo big toooooooo beeee shooooooown"

# First argument for x alignment, second for y alignment
label.set_text_align label1 start start
label.set_text_align label2 end start
label.set_text_align label3 center center
label.set_text_align label4 end end

# Enable multiline mode for big text
label.set_multiline_mode label4 1

label.draw label1 Layout
label.draw label2 Layout
label.draw label3 Layout
label.draw label4 Layout

buffer.flush
sleep 10
exit_screen

Gauge

Defined in gauge.sh

Gauge(or progress bar) - displays bar, filled with given percentage, between 0 and 100. Can be vertical or horizontal

Code from gauge.sh in examples folder

source ../src/lib.sh
init_screen

layout.create_from_screen Layout

layout.v_split Layout vbox1 space=5px vbox2
layout.h_split vbox1 layout11 layout12 layout13
layout.h_split vbox2 layout21 layout22 layout23

# Second argument is direction (vertical or horizontal)
gauge.new g1 v
gauge.new g2 v
gauge.new g3 h 
gauge.new g4 h


# Set filled percentage
gauge.set_percentage g1 50
gauge.set_percentage g2 10
gauge.set_percentage g3 34
gauge.set_percentage g4 95

a=30
while [ 1 ]; do
    gauge.draw g1 layout11
    gauge.draw g2 layout13
    gauge.draw g3 layout21
    gauge.draw g4 layout23

    gauge.set_label g1 "$a %" end end
    gauge.set_label g2 "$a %" start start
    gauge.set_label g3 "$a %" end center
    gauge.set_label g4 "$a %"

    gauge.set_percentage g1 $a
    gauge.set_percentage g2 $a
    gauge.set_percentage g3 $a
    gauge.set_percentage g4 $a

    a=$((a + 1))
    if [ $a -gt 100 ]; then 
        a=0
    fi
    buffer.flush

done
exit_screen

List

Defined in list.sh

List - component which will draw multiple items within itself. If all items coudn't fit in layout, you can scroll down or up, to render other items

Code from list.sh in examples folder

source ../src/lib.sh
init_screen

layout.create_from_screen Layout


labels=()
for i in {0..1000}; do
    # Create many labels that coudn't be fit in one frame
    label.new "label$i" "label with $i"
    labels+=("label$i")
done

list.new list1
list.set_items list1 ${labels[@]}
# If size of items is fixed, you can specify it for better perfomance
list.set_fixed_size list1 1
# Set style for selected item
list.set_selected_style list1 reversed


b=0
while [ 1 ]; do
    list.set_selected list1 "$b"
    b=$((b + 1))
    if [ $b -gt 1000 ]; then 
        b=0
    fi
    list.draw list1 Layout

    buffer.flush

done
buffer.flush
sleep 10
exit_screen

Modal

Defined in modal.sh

Modal - inherits all rect components function, the only differ is it clears all styles and symbols, applied and written before.

You can do same manually, but for convenience use that component

Code from modal.sh in examples folder

source ../src/lib.sh
init_screen

layout.create_from_screen Layout

layout.v_split Layout vbox1 vbox2 
layout.h_split vbox1 hbox1 hbox2 
layout.h_split vbox2 hbox3 hbox4 


rect.new blue_rect
rect.set_style blue_rect bg_color="0;0;255" fg_color="0;0;0"
rect.set_title blue_rect "blue rect"
rect.set_title_style blue_rect reversed

rect.get_layout blue_rect rect_layout
label.new label "Im big layout that was overriden :/"
label.set_text_align label center center

rect.draw blue_rect Layout
label.draw label rect_layout

modal.new modal

modal.set_title modal "Im a modal!"
modal.draw modal hbox3

buffer.flush
sleep 10
exit_screen