Введение
Эта статья не будет глубокой, но вместо этого она расскажет вам, как правильно оформлять ваши программы. Я получаю много недавних комментариев к моим историям, GitHub и статьям о том, как именно я работаю с изображениями ASCII, ANSI и даже с некоторыми символами и Unicode, чтобы раскрашивать или украшать свои программы. Так что, несмотря на то, что эта статья посвящена дизайну, она будет не лучшей, а скорее короткой. Сначала я объясню, как именно я работаю с разными веб-сайтами, и перейду к общему дизайну, говоря о различных шестнадцатеричных цветовых кодах или общих двоичных кодах, которые могут сделать ваш фреймворк модным.
Примечание. Это будет ТОЛЬКО для приложений на основе CLI (интерфейс командной строки), логический поток дизайна подойдет для чего угодно, но что касается цветов, шестнадцатеричных символов и репозиториев/инструментов, это будет только для приложений на основе CLI. Конечно, вы можете поместить баннеры ASCII в любой WUI (веб-интерфейс пользователя) или GUI (графический интерфейс пользователя), но это только для общих идей.
Понимание цветовых кодов, общего дизайна и логики
При разработке программы может быть крайне важно, чтобы ваш дизайн был точным, особенно если это программа, которая может потребовать от пользователей ввода данных и получения очень важного вывода. Например, скажем, у вас есть программа, которая сканирует порты и имеет подробный режим, вы бы предпочли инструмент интерфейса командной строки, который выводит все это ужасно, не разделяя данные уникальными тегами и символами, или вы бы предпочли обратное? Во-первых, чтобы разработать и создать приложение с аккуратным дизайном, нам нужно иметь состояние логики, общую дорожную карту того, что именно мы хотим сделать.
- (1) Описание вашего проекта.Первое, что вам нужно понять, это цель вашей программы. Вот несколько вопросов, которые вы можете задать себе на пути к разработке логики и шаблонов проектирования.
- (Q1) → Какова цель моей программы?
- (Q2) → Моя программа современная или классическая?
- (Q3) → Какому предмету посвящена моя программа?
Ответы на эти три вопроса будут даны довольно быстро. Например, в моей последней программе под названием Caster приложение на основе командной строки, которое позволяет вам удаленно управлять и перечислять устройства, имеет баннер, подобный приведенному ниже.
Баннер много говорит о структуре, и вы можете сказать, что это связано. Вот как я смог ответить на эти вопросы, чтобы понять идею. Caster — это современный фреймворк, поскольку он может манипулировать смарт-телевизорами и отображать данные в действительно хорошо организованных таблицах. злоупотреблять API на смарт-телевизорах, таких как Roku, и других устройствах, связанных с IoT. Вы видите, где он начинает формироваться? Вы можете следовать шаблону проектирования, основанному на вашей текущей структуре или инструменте и программе того, что он делает. Вы не хотите, чтобы у Caster были коричневые и белые таблицы или какая-то старая классическая таблица ASCII, на которую просто странно смотреть, поэтому вы делаете ее современной и привлекательной. Эти три вопроса начинают закладывать основу
- (2) Снижение цветов: Caster, который я получил от Casper, первоначальная идея фреймворка заключалась в том, чтобы быть похожим на призрака, который мог исчезать через провода и выслеживать определенные устройства в сети, особенно устройства Google Cast, но теперь, потому что он поддерживает больше устройств, кастер просто подходит. Caster изначально был cast hunter, но из-за призрака Casper, ярлыка / тегов и поддержки других устройств было уместно назвать только framework caster. Кастер — призрак, и обычно призраки ассоциируются с белым цветом или во время Хэллоуина, который связан с оранжевым цветом. Мы используем фиолетовый, чтобы сделать его современным и спать, белый для вывода таблицы из-за Каспера и оранжевый для имени баннера и символов баннера, потому что Хэллоуин → Каспер → призрак и т. д. и т. д.
- (3) Завершение дизайна. Теперь, чем больше мы работаем с платформами и хотим, чтобы они выглядели красиво или с приложениями в целом, нам необходимо убедиться, что мы действительно знаем, что делаем. В нашем текущем примере у нас уже есть цвета, общий дизайн, а также то, что делает наша программа (на этом шаге), теперь пришло время найти баннер. С кастером было немного по-другому. Я хотел, чтобы баннер был жутким после Каспера, а праздничный кастер был не только идеей во время, но и представленным. Этот баннер будет использовать шрифт чего-то жуткого, но современного и маленького, так как я лично не сторонник больших шрифтов или баннеров, поскольку программа не всегда в них нуждается. Поэтому мы выбрали шрифт
Calvin S, который в некоторых случаях выглядит действительно странно и дурацко, что это то, что мы хотим.
Теперь, когда логика спланирована, как именно я или другие на самом деле создам это искусство? Я имею в виду, что мы не тратим часы в день, вручную выписывая эти баннеры? верно? XD, конечно, мы этого не делаем, я имею в виду, что некоторые люди делают, но для большинства людей правильным будет перейти на другие программы, которые могут генерировать эти данные. Это перемещает нас в наш последний раздел
Превращение логики в реальность (старый подход)
В этом разделе мы собираемся написать простую программу на FORTRAN, которая должна принимать текст и находить такие данные, как номера телефонов и электронные письма, как это делается ниже. Эта программа написана на FORTRAN95 (стандарт 2003 г.). Я не буду объяснять, как эта программа работает на уровне FORTRAN, но вы увидите, к чему я клоню.
program find_numbers_and_emails
implicit none
character(len=1024) :: line ! Line of text from the file
integer :: iostat ! Status code for file operations
integer :: unit ! File unit number
logical :: success ! Flag for successful file open
integer :: indexofi
character(len=1024) :: fname ! Name of the input file
fname = "main.txt"
open(unit=unit, file=fname, status='old', action='read', iostat=iostat)
success = (iostat == 0)
if (success) then
! Read the file line by line
do
read(unit, '(A)', iostat=iostat) line
if (iostat == 0) then
indexofi = index(line, "@")
if (indexofi > 0) then
write(*,'(A)') line
end if
end if
end do
else
write(*,'(A)') "Error: Could not open file."
end if
close(unit)
end program find_numbers_and_emails
Этот код просто берет предварительно определенный файл, открывает его, читает и пытается проиндексировать каждую строку для всего, что может содержать символ @, который может указывать на адрес электронной почты. Итак, как именно мы должны сделать программу подходящей для ее временной шкалы и как логика будет апеллировать к этой программе? Давайте сначала вернемся к шагам один за другим, применяя его к этой программе. Как было сказано ранее, давайте рассмотрим первые три вопроса и ответим на них.
- Программа современная? Нет, программа применяет очень старый и хакерский способ поиска электронных писем в тексте и написана на старом языке программирования.
- Какова цель программы? Чтобы найти электронные письма в тексте и вывести строку с помощью обработки текста и данных
- По какому предмету моя программа? Анализ текста/данных
Получив ответы на эти вопросы, мы уже можем определить тему оформления программы. Тема программы и дизайна будет традиционалистской/более классической. Учитывая, что FORTRAN является старым языком, несмотря на его новые стандарты, он все еще имеет дикую сторону и все еще был разработан почти полвека назад. Так как же нам применить эту тему? Что ж, ФОРТРАН — старый язык, конечно, есть и современные применения, но поскольку язык, программа и т. д. — все традиционалистские и основаны на старой школе, мы хотим придать программе более старый вид.
+ ------------------------------------------------------- + | Banner | | title | | here | | | + ------------------------------------------------------- +
Вы понимаете, откуда взялся этот дизайн? Дизайн реализует старое состояние клавиш для компьютеров и действительно выявляет символы ASCII в целом. Вы смотрите на большинство современных программ и видите баннеры, которые более современные, гладкие или незаметные. Учитывая, что мы ищем более старый дизайн, мы хотим сделать баннер более технологичным и олдскульным. Хорошо, как мы назовем нашу программу? Система именования программы может быть дурацкой, но здесь все просто. Наша цель программы - взять текст в файле и найти электронные письма, проверив, содержит ли вся строка в файле или тексте символ @, если это так, она выведет строку файла. Поскольку мы не используем регулярное выражение или какую-либо форму для разделения этих электронных писем или упоминаний, мы просто манипулируем и сравниваем текст. Подумайте об изображениях: что есть у каждого изображения, что добавляет метаданные? EXIF, EXIF является основной частью изображений и структурой метаданных изображения, которая содержит данные всех типов в зависимости от устройства. Ну, наша структура здесь работает с текстом, и, как и данные EXIF в изображении, ожидается, что этот текст будет содержать важную информацию. Итак, мы придумали название TEXIF, которое, как вы можете видеть, происходит от TEX -> TEXT, IF -> EXIF, довольно интересно, верно? Это очень быстрое и простое имя, но оно простое, потому что наша программа старая и простая. Таким образом, мы можем найти баннер и отредактировать его оттуда.
+ ------------------------------------------------------- + | __ __| _) _| | | | -_) \ \ / | _| | | _| \___| _\_\ _| _| | | | + ------------------------------------------------------- +
Этот баннер использует более старый стиль и действительно предлагает интересный способ проектирования или выявления традиционности в самой программе, которая снова является нашей основой дизайна. Теперь переходим к полной форме реализации.
Делая это красиво
Итак, мы получили наш баннер, получили выходной дизайн и т. д. Что осталось? Ну просто нам просто нужно привести это в действие. Теперь, поскольку это была короткая статья, я буду честен и скажу, что иногда внедрение определенных кодов или Unicode, другими словами, иногда может быть утомительным и очень раздражающим. Мы не будем применять эту концепцию раньше к той, что сейчас, поскольку реализация юникода в фортране довольно сложна, и, учитывая, что это была более старая программа, мы просто оставили бы ее стандартной зеленой, а старый формат вывода отстой как [+], но даже фортран становится придирчивым с что так позволяет принять новый подход. Мы не будем создавать программу, но вместо этого этот раздел расскажет вам, как именно вы можете модернизировать программы, и даст вам шаг за шагом современные проекты, такие как баннер ascii в caster. Вот несколько вещей, которые могут сделать ваши баннеры более современными.
- Цвет: Цвет — это очень крутой и хороший способ сделать ваши программы подходящими, но люди упускают из виду, насколько истинный юникод существует для цвета. Основная ошибка, которую люди совершают при форматировании вывода, заключается в использовании библиотек, таких как библиотеки форматирования цвета для таких языков, как python и golang, например вера/цвет. Эти пакеты хороши для простого вывода, но, насколько я понимаю, без работы вы не получите хорошие цветовые коды с высоким разрешением в этих библиотеках. Распространенный вопрос, который я получаю, заключается именно в том, как вы получаете такие красивые цвета с высоким разрешением? Ответ - мое собственное репо и поколение. Теперь ссылка ниже отправит вас на мою страницу github и репозиторий на этой странице, который содержит несколько файлов исходного кода, оформленных и содержащих разные цветовые коды, за которыми следует таблица цветовых кодов.
это содержит следующую диаграмму
Эта диаграмма представляет собой диаграмму каждого возможного цвета в этих файлах исходного кода. Вот где это может быть немного сложно и странно, при работе с юникодом язык программирования интерпретирует все это по-разному, как и операционная система. Например, если вы работали в Windows и пытались использовать цветовой код
\033[31m
который красный в Linux, вы получите очень странный вывод из терминала, такой как странные символы, если вы попытаетесь сделать это в C++, вы просто выведете код, который не является фактическим цветом. Это связано с тем, что в основе каждого языка программирования есть способ интерпретировать юникод, поскольку каждый бит юникода имеет множество форм, то же самое с операционными системами и даже с приложением. Например, если бы мы попробовали \033[31m или тот же код, что и выше, в окне powershell, это не сработало бы, поскольку powershell будет использовать такой формат, как \033[31;1m, для более жирного или более окрашенного красного текста. Преимущество некоторых библиотек цветов заключается в том, что, несмотря на то, что они не всегда поддерживают цветовые коды высокого разрешения, цвета в библиотеке могут быть кроссплатформенными. Теперь, когда мы понимаем верхушку айсберга относительно того, почему некоторые юникоды будут отклонены и почему вы не можете использовать разные юникоды на разных языках, давайте перейдем к тому, как мы можем использовать это репозиторий и диаграмму для соответствия цветам на изображениях. Общая тема с моими программами — жирный белый с высоким разрешением и глубокий темно-жирный фиолетовый или сине-фиолетовый с высоким разрешением. Эти цвета определяются таблицей. Скажем, мы хотим, чтобы у этого книжного персонажа был такой же цвет.
Мы можем взять диаграмму выше и найти оттенок. если вы посмотрите на оттенок и цвет крупье и сравните его с диаграммой, вы увидите число, окрашенное таким образом или окрашенное таким образом на экране терминала, которое заканчивается на 57, это конечный цветовой код в настройках переднего плана, который будет выводиться . Скажем, наша программа написана на C++, мы бы открыли заголовочный файл colors.hpp c++ и опускались до тех пор, пока не увидим следующую строку кода.
#define scrsmwsg "\e[38;5;57m"
Это определение содержит тип настройки цветового кода C++, который заканчивается на 57m, вставьте его в программу C++ с текстом, например hello, и вы увидите, что текст окрашен в этот тип. Вы видите, как баннеры могут работать с этим? вы можете создать простой оператор печати для обработки этого Unicode.
#include <iostream>
#define scrsmwsg "\e[38;5;57m"
using namespace std;
int main()
{
cout<< scrsmwsg << "Hello World";
return 0;
}
будет выводить
видите разницу между обычным фиолетовым и такой формой и оттенком фиолетового? однако, если бы мы попробовали эту escape-последовательность или юникод на таком языке, как go, мы получили бы сообщение об ошибке, говорящее, что эта escape-последовательность неверна и является недопустимым escape-последовательностью.
./prog.go:21:16: unknown escape
вот почему у меня также есть поддержка других языков, если мы перейдем к файлу colors.go и прокрутим вниз, пока снова не увидим 57, мы получим эту escape-последовательность.
const ( //... EWCLSJJK = "\033[38;5;57m" // ... )
это в golang выведет точно такой же цветной текст, как мы видим в программе C++, которую мы написали выше. Видите разницу сейчас? Теперь у вас есть общее представление о том, как заставить современные программы выводить цветовые коды, но как насчет всего остального?
- Символы рисования коробки: символы рисования коробки — это один из лучших способов сделать баннер более современным, гладким и незаметным. Однако, как и в случае с цветовыми кодами, этого также может быть много, в отличие от стандартных баннеров, вы не можете просто добавить символы рисования в файл и заставить их работать. Во-первых, что вообще такое символы рисования коробки? Персонажи для рисования блоков - это старый формат DOS-систем, используемый для рисования блоков, который в то время сделал его намного более современным (с начала 80-х до 2000-х годов).
Эти символы рисования коробки будут выглядеть так
Видите линии, которые образуют коробки? они могут даже появляться в современных фреймворках, инструментах и многих пользовательских интерфейсах, которые выглядят так.
Ну, очевидно, что даже сегодня с правильными цветами это выглядит красиво и модно, как таблица на скриншоте ниже.
У этих символов есть много способов появления, в зависимости от системы, устройства и т. Д. Способы вывода символов на экран могут различаться, и поэтому с ними, по их словам, становится трудно иметь дело. Иногда вам, возможно, даже придется писать программы или функции в программах для вычисления ширины и длины вокруг данных, чтобы блок формировался правильно. В нашем случае здесь у нас есть диаграмма, которая показывает наиболее стандартные и используемые символы на сегодняшний день (те же самые, которые я использую почти для ВСЕХ своих баннеров, таблиц, средств форматирования, консолей, регистраторов, вывода и т. д.)
вы можете найти эту таблицу здесь
Подобно заклинателю, мы можем взять текст ASCII и начать строить баннер, в отличие от обычного текста ASCII и специальных символов на клавиатуре, когда их отступ или расстояние между ними один раз может фактически привести к тому, что символ либо пересечется, либо будет табуляция на 30 пробелов вперед. Например, вы можете подумать, что оператор печати программы заклинателя просто хранится в переменной, подобной этой.
var ( banner = ` ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ ╔═╗╔═╗╔═╗╔╦╗╔═╗╦═╗ ┃ ┃ ║ ╠═╣╚═╗ ║ ║╣ ╠╦╝ ┃ ┃ ╚═╝╩ ╩╚═╝ ╩ ╚═╝╩╚═ ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━┛ ` )
но на самом деле его нельзя хранить в переменной из-за отступа, конечно, он выглядит правильно в программе, но если вы запустите это в программе go, вы получите
┏━━━━━━━━━━━ ━━━━━━━━━━━━━━━━┓ ┃ ╔═╗╔═╗╔═╗╔╦╗╔ ═╗╦═╗ ┃ ┃ ║ ║╣ ╠╦╝ ┃ ┃ ╚═╝╩ ╩╚ ═╝ ╩ ╚═╝╩╚═ ┃ ┗━━━━━━━━━━━━━ ━━━━━━━━━━━━━ ━┛
Вы видите, как это может стать проблемой? У вас действительно есть только два варианта: вы можете написать программу, которая автоматически форматирует данные, как показано ниже, с таблицами.
func DrawUtilsBox(variable string) {
BL := BoxFormat{
TL: "┏",
TR: "┓",
BL: "┗",
BR: "┛",
HZ: "━",
VT: "┃",
}
l := strings.Split(variable, "\n")
var mlen int
for _, lin := range l {
if len(lin) > mlen {
mlen = len(lin)
}
}
fmt.Print("\033[38;5;93m" + BL.TL + strings.Repeat(BL.HZ, mlen) + BL.TR + "\n")
for _, line := range l {
fmt.Print(BL.VT + "\033[38;5;50m" + line + strings.Repeat(" ", mlen-len(line)) + "\033[38;5;93m" + BL.VT + "\n")
}
fmt.Print("\033[38;5;93m" + BL.BL + strings.Repeat(BL.HZ, mlen) + BL.BR + "\n")
}
или вы можете предварительно определить данные, как я сделал в Caster, с уникальными цветовыми кодами и escape-последовательностями, которые мы обсуждали выше.
func Banner() {
fmt.Println("\t\t\033[38;5;57m┏━━━━━━━━━━━━━━━━━━━━━━━━━━━┓")
fmt.Println("\t\t\033[38;5;202m┃ ╔═╗╔═╗╔═╗╔╦╗╔═╗╦═╗\033[38;5;202m ┃")
fmt.Println("\t\t\033[38;5;202m┃ ║ ╠═╣╚═╗ ║ ║╣ ╠╦╝\033[38;5;202m ┃")
fmt.Println("\t\t┃ ╚═╝╩ ╩╚═╝ ╩ ╚═╝╩╚═ ┃")
fmt.Println("\033[38;5;57m\t\t┗━━━━━━━━━━━━━━━━━━━━━━━━━━━┛")
}
В операторах печати, сценарии и функции вы замечаете серию странных отступов, это потому, что, несмотря на то, что в программе они выглядят с отступом, юникод на самом деле идеально подходит, когда вы запускаете это в терминале go, вы получаете красивый фиолетовый жирный баннер глубокого цвета с оранжевый, а также красиво связанные символы рисования коробки. Символы рисования блоков также не похожи на стандартный юникод, они действительно могут помочь сделать таблицы более красивыми, соединяя их друг с другом, как трубы, и делая их более приятными для просмотра. Также обратите внимание на то, как я использую цветовые коды.
\t\t\033[38;5;57m
\t делает отступ в тексте, а код 57m используется после, чтобы дать фиолетовый цвет, затем вы видите 202m, чтобы покрасить баннер в оранжевый цвет, а затем снова оранжевый цвет на концах, прежде чем снова установить его на 57m. Это должно дать вам хорошее представление о том, как хороший стиль и небольшая дополнительная работа могут иметь большое значение.
- Получение ASCII-баннеров
Что-то, что всегда утомительно, — это создавать свои собственные баннеры, иногда вам просто нужен быстрый баннер, но вы не хотите использовать figlet до тех пор, пока вам не захочется умереть внутри, чтобы найти новый шрифт. Я лично предлагаю TAAG, что означает генератор текста в ASCII. Этот тип генератора показан ниже и позволяет вам выбирать более 100 различных шрифтов для каждого текста, еще одна интересная вещь заключается в том, что вместо выбора одного и того же точного шрифта вы можете нажать test all, и он будет запускать каждый отдельный шрифт, поддерживаемый в настоящее время, с вашим текстом, который вы ввели!
https://patorjk.com/software/taag/#p=display&f=Graffiti&t=helloworld
Краткое содержание
Существует множество способов стилизации приложений на основе CLI (интерфейс командной строки), однако все зависит от вашей программы. Пока поток логической обработки и понимания не изменит понимания и дизайна. Это просто уникальный способ сделать ваши инструменты или фреймворки более привлекательными, вам не всегда нужен красивый красивый баннер, но он действительно создает реальный мир, когда в будущем вам может понадобиться создавать приложения на основе TUI или даже GUI, как показано ниже. .
