BASHUI

BASHUI — это BASH + UI, а не то что вы подумали.

Начиная работать над sshto я решил не переизобретать велосипед, вернее не переизобретать велосипед целиком а только некоторые его части и в качестве «рамы с педалями» использовал dialog. Это значительно ускорило разработку, но идея написать свой UI на баше с блекджеком и всем остальным ни на секунду не покидала мой воспалённый мозг. Звёзды сошлись, и я решил воплотить этот проект в жизнь(в bash).

Какой UI без кнопок? С(т)ранный, поэтому я начал с элемента — кнопка. Идея заключается в том что кнопка(и остальные элементы UI) будет представлена функцией. Функцию можно использовать из коробки. Но удобнее сделать «обёртку»(функцию) с какими-то предустановленными параметрами и уже эту функцию использовать по назначению. Для всех элементов UI я подготовил примеры(demo_*) их можно найти в репе. Вот как выглядит пример для кнопки:

#!/bin/bash source bashui  mess="RESULT" name="The Button" title="Push the button, will get a result..."  butt(){     # Новая кнопка на основе button из bashui, параметры:     #1 координата X(колонка)     #2 координата Y(строка)     #3 название кнопки     #4 выполняемая функция     #5 цвет текста     #6 цвет рамки     #7 цвет подложки     local x=$((COLUMNS/2-(${#name}/2+2)))     local y=$((LINES/2))     #       1  2    3       4       5      6       7     button $x $y "$name" "result" "$wht" "$ylw" "$bblk" }  # кнопка выполнит эту функцию result(){     local x=$((COLUMNS/2-${#mess}/2))     local y=$((LINES/2+5))     XY           $x $y  "$mess"     (sleep 1; XY $x $y "${mess//[[:print:]]/ }") & }  # все собрано вместе menu(){     cursor off          # отключаем курсор     default_button butt # это необходимо для активации кнопки     XY $((COLUMNS/2-${#title}/2)) $((LINES/2-2)) "$title"     butt # рисуем кнопку      # в цикле опрос клавиатуры и логика     while true; do         read_input         case $_input_ in               enter ) press_button butt;; # нажат enter, нажимаем кнопку               escape) return;;            # нажат escape, выход         esac     done }  clear menu

«Цветовая палитра» для выбора цвета текста, рамки и подложки задана в bashui вот так:

... #-------------------------+--------------------------------+---------+ #       Text color        |       Background color         |         | #-----------+-------------+--------------+-----------------+         | # Base color|Lighter shade| Base color   | Lighter shade   |         | #-----------+-------------+--------------+-----------------+         | BLK='\e[30m'; blk='\e[90m'; BBLK='\e[40m'; bblk='\e[100m' #| Black   | RED='\e[31m'; red='\e[91m'; BRED='\e[41m'; bred='\e[101m' #| Red     | GRN='\e[32m'; grn='\e[92m'; BGRN='\e[42m'; bgrn='\e[102m' #| Green   | YLW='\e[33m'; ylw='\e[93m'; BYLW='\e[43m'; bylw='\e[103m' #| Yellow  | BLU='\e[34m'; blu='\e[94m'; BBLU='\e[44m'; bblu='\e[104m' #| Blue    | MGN='\e[35m'; mgn='\e[95m'; BMGN='\e[45m'; bmgn='\e[105m' #| Magenta | CYN='\e[36m'; cyn='\e[96m'; BCYN='\e[46m'; bcyn='\e[106m' #| Cyan    | WHT='\e[37m'; wht='\e[97m'; BWHT='\e[47m'; bwht='\e[107m' #| White   | #-------------------------{ Effects }----------------------+---------+ DEF='\e[0m'   #Default color and effects                             | BLD='\e[1m'   #Bold\brighter                                         | DIM='\e[2m'   #Dim\darker                                            | CUR='\e[3m'   #Italic font                                           | ...

Этот код также доступен в отдельной репе bash_color. Попробуем получить результат:

Иногда необходимо количество кнопок больше чем одна. И надо как-то равномерно расположить их на экране. Чтобы упростить эту задачу я добавил две вспомогательные функции: x_row и y_row, для горизонтального и вертикального рядов кнопок соответственно, пример:

#!/bin/bash source bashui  defb(){     # Новая кнопка на основе button из bashui, параметры:     #1 координата X(колонка)     #2 координата Y(строка)     #3 название кнопки     #4 выполняемая функция     #5 цвет текста     #6 цвет рамки     #7 цвет подложки     #        1    2      3          4          5      6      7     button "$1" "$2" "butt $3" "fun_${3,,}" "$wht" "$ylw" "$bblk" }  # зачистка вывода clr(){ for i in {5..9}; do XY 15 $i "%$((COLUMNS-15))s"; done; }  but_a(){ defb "$1" "$2" A; } # клонирую but_b(){ defb "$1" "$2" B; } # кнопку but_c(){ defb "$1" "$2" C; } # по but_d(){ defb "$1" "$2" D; } # умолчанию but_e(){ defb "$1" "$2" E; } # шесть but_f(){ defb "$1" "$2" F; } # раз  fun_a(){ clr; XY 15 5 "butt A pressed(${_button_[*]})"; } # создаю fun_b(){ clr; XY 15 5 "butt B pressed(${_button_[*]})"; } # функцию fun_c(){ clr; XY 15 5 "butt C pressed(${_button_[*]})"; } # для fun_d(){ clr; XY 15 5 "butt D pressed(${_button_[*]})"; } # выполнения fun_e(){ clr; XY 15 5 "butt E pressed(${_button_[*]})"; } # каждой fun_f(){ clr; XY 15 5 "butt F pressed(${_button_[*]})"; } # кнопкой  # ряды кнопок это два массива ybuttons=(but_a but_b but_c) # вертикальные кнопки  xbuttons=(but_d but_e but_f) # горизонтальные кнопки  # оба обработчика(все кнопки) собраны в одну функцию для удобства butts(){     y_row    2   "${ybuttons[@]}"     x_row $LINES "${xbuttons[@]}" }  menu(){     cursor off     default_button but_b     XY 1 1 "$red Esc to exit"      while true; do         butts         read_input         case $_input_ in              up     ) select_prev_butt "${ybuttons[@]}";;              down   ) select_next_butt "${ybuttons[@]}";;              left   ) select_prev_butt "${xbuttons[@]}";;              right  ) select_next_butt "${xbuttons[@]}";;              enter  ) press_button      butts          ;;              escape ) return                           ;;         esac     done }  clear menu

Обратите внимание что у кнопок контролируемых через *row функции не установлены явно координаты, значения установлены в "$1" "$2", реальные значения координат передаются в кнопки из *row функций. В качестве аргументов *row функции принимают: позиция на экране(столбец или строка в зависимости от типа функции) и список кнопок. Кнопки(функции) можно просто перечислить так:

x_row 1 but_a but_b but_c

Но тогда придется копипастить список для функций select_(prev|next)_butt что не очень удобно при изменении количества кнопок . Придется редактировать и там тут. Удобней создать массивы для каждого ряда и использовать их в функциях.

Клавиши «вверх», «вниз» выбирают кнопки из вертикального столбика. Клавиши «влево», «вправо» выбирают кнопки из горизонтального ряда. Вместо тысячи слов:

Строка ввода. Сначала я сделал окно ввода информации ограниченное со всех сторон рамками но выяснилось что read с некоторыми ключами при нажатии backspace ведет себя с(т)ранно…

Пришлось отказаться от окна и сделать простую строку во весь экран, пример оформления:

#!/bin/bash source bashui  my_reader(){     # Новое окно ввода на основе reader из bashui, параметры:     #1 строка на которой появится окно ввода     #2 максимальное кол-во символов     #3 имя окна ввода     #4 имя переменной в которую будет записан текст     #5 текст по умолчанию     #5 цвет текста     #6 цвет рамки     #7 цвет подложки     #      1  2          3         4    5      6      7      8     reader 10 20 'test data input' td "$td" "$wht" "$ylw" "$bblk" }  td='initial text' clear my_reader clear bye "$td"

Ну и самое интересное — список. Это окно с произвольным количеством колонок в котором построчно отображаются какие-то данные. Количество колонок задается в диапазоне от 1 до N, где N = сколько_влезет_в_окно_терминала и определяется методом научного тыка. Выбор элементов осуществляется при помощи клавиш курсора, pgUp/Down и горячих клавиш. Каждому элементу первого столбца в таблице присваивается горячая клавиша соответствующая первому символу. Вот пример создания меню из списка и нескольких кнопок:

#!/bin/bash source bashui  defb(){     # Новая кнопка на основе button из bashui, параметры:     #1 координата X(колонка)     #2 координата Y(строка)     #3 название кнопки     #4 выполняемая функция     #5 цвет текста     #6 цвет рамки     #7 цвет подложки     #        1    2      3          4          5      6      7     button "$1" "$2" "butt $3" "fun_${3,,}" "$wht" "$ylw" "$bblk" }  clr(){ for i in {1..4}; do XY 1 $i "%${COLUMNS}s"; done; } # clear output area but_d(){ defb "$1" "$2" D; } but_e(){ defb "$1" "$2" E; } but_f(){ defb "$1" "$2" F; }  fun_d(){ clr; XY 1 1 "butt D; target: $_target_"; } fun_e(){ clr; XY 1 1 "butt E; description: ${_target_[1]}"; } fun_f(){ clr; XY 1 1 "butt F; all items of target:"               printf -v text -- '%s\n' "${_target_[@]}"               XY 1 2  "$text"; } clear w=$((COLUMNS-10)) my_items(){     # Новый список на основе items, параметры:     #1 координата X(колонка)     #2 координата Y(строка)     #3 ширина окна     #4 высота окна, мин. 5     #5 кол-во колонок, N или в % от ширины     #6 название списка     #7 цвет текста     #8 цвет рамки     #9 цвет подложки     local mess="Columns via number(${bred}Esc to continue$bblk)"     #     1  2  3  4      5        6      7       8      9    data     items 10 5 $w 15      3     "$mess" "$wht" "$ylw" "$bblk" "$@" } my_items2(){     local mess="Columns via percent of Width(${bred}Esc to exit$bblk)"     #     1  2  3  4      5        6      7       8      9    data     items 10 5 $w 15 '30 55 15' "$mess" "$wht" "$ylw" "$bblk" "$@" }  data=(               # массив с тестовыми данными     #-------------{ first line - column descriptions }-------------------- $red'Item name'        $blu'Item description'                 $grn'Status'     #-----------------------{ the data }----------------------------------     'first'        $BLD$ylw'Long description text'                'true'     'second'               'Description 2'                        'O_o'     'third'                'description 3'                        'false'     'fourth'         "${red}Long ${grn}description ${blu}text"    'true'     ''                     ''                                     '' $ylw'fifth'                'Description 2'                        'O_o'     'sixth'                'description 3'                        'false'     'midle'            $grn'Long description text'                'true'     'long name row2'       'Description 2'                        'O_o'     ''                     ''                                      ''     'row 3'                'description 3'                        'false'     'row1'             $blu'Long description text'                'true'     'row1'                 'Long description text'                'true'     'last'                 'Description 2'                        'O_o' )  xbuttons=(but_d but_e but_f) butts (){ x_row $LINES "${xbuttons[@]}"; } ilist (){ my_items     "${data[@]}"    ; } ilist2(){ my_items2    "${data[@]}"    ; } menu  (){     cursor off     default_button but_d     while true; do         $1; butts         read_input         case $_input_ in              up     ) select_prev_item "${data[@]}"    ;;              down   ) select_next_item "${data[@]}"    ;;              left   ) select_prev_butt "${xbuttons[@]}";;              right  ) select_next_butt "${xbuttons[@]}";;              enter  ) press_button         butts       ;;              escape ) return;;              pgup   ) select_prev_item  --fast   "${data[@]}";;              pgdown ) select_next_item  --fast   "${data[@]}";;              *      ) select_by_hot_key $_input_ "${data[@]}";;         esac     done }  menu ilist  # Columns via number menu ilist2 # Columns via percent

В примере создается список из трех стобцов, поэтому данные в массиве data оформлены в виде таблицы с тремя столбцами, чтобы визуально сразу представить как данные будут отображаться в списке. Первые 3(по количеству столбцов) элемента из массива данных, будут использованы в качестве названий стобцов и не отображаются в списке. Элементы можно «раскрашивать» разными цветами, добавляя соответствующие цветовые коды в начало элемента данных. Предусмотрено два способа установки ширины столбца:

• автоматический, вы указываете только количество столбцов, ширина столбцов в этом случае определяется как ширина_окна/количество_столбцов и одинакова для всех столбцов

  

• % от ширины окна, в этом случае в 5-й аргумент необходимо передать не цифру количества столбцов а строку, содержащую несколько(по количеству столбцов) значений в %, сумма которых должна составить 100%, например '30 55 15'

  

Основным является первый столбец, но можно получить информацию из всех столбцов и строить рабочий процесс соответствующим образом. Полазим по менюшке:

В гифке продемонстрированы все типы перемещения: курсором, pgUp/Down и через горячие кнопки. А вот как реализован опрос клавиатуры:

read_input(){     read -rsN1 _input_     case ${_input_,,} in             # One symbol keys support                 ' '*) _input_=space;;               $'\t'*) _input_=tab  ;;               $'\n'*) _input_=enter;;             # escape sequences additional check             $'\u1b'*) read -rsN4 -t 0.001 _input_                       case ${_input_,,} in                                    # arrows, pgUp/Down and escape support                                    *a*) _input_=up    ;;                                    *b*) _input_=down  ;;                                    *d*) _input_=left  ;;                                    *c*) _input_=right ;;                                    *5*) _input_=pgup  ;;                                    *6*) _input_=pgdown;;                                     '') _input_=escape;;                       esac;;                    # the rest, return 1 symbol in lowercase                    *) _input_=${_input_,,}                       _input_=${_input_:0:1};;     esac }

Я опробовал этот bashui’вый интерфейс на одном из своих проектов sshto, посмотрите что из этого получилось demo_sshto

Проект находится на ранней стадии развития, абсолютно всё может поменяться как в лучшую так и в худшую сторону неоднократно, смело тащите в прод!)

Потрогать мой bashui можно тут.

кстати, что касается …hui(18+)

Разное касается, лично я предпочитаю класическую схему. Но иногда выдаю вот такое вот, для своей bash игры piu-piu я добавил режим penis’а О_о

Активируется он так:

penis=big ./piu-piu

В этом режиме вертолет заменяется на гигантский фалоимитатор с пропеллером. Вместо бонусов таблетки виагры от которых он увеличивается в размерах и стреляет эм, известно чем. Выглядит всё это непотребство как-то так:

Режим кооператива и дуэль тоже оху… там все еще хуже О_о

Творите, выдумывайте, пробуйте!)

Лайки, пальцы.