Сегодня разберём скрипт, который позволяет выбрать цвет, двигая ползунки для красного, зелёного и синего цвета. Это стандартный формат представления цвета в компьютере, где для каждого цвета выделяется один байт. Каждый цвет может принимать значение от 0 до 255 или в шестнадцатеричном представлении от 0 до FF.
Сверху отображается цвет фона, который мы создали и на нём есть текст и фигуры, окрашенные цветом для текста. Какой цвет мы сейчас редактируем (цвет фона или цвет текста) зависит от радиокнопок в правом верхнем углу.
Кликая по верхней радиокнопке - выбираем цвет фона.
Кликая по нижней радиокнопке - выбираем цвет текста.
Под кнопками отображается созданный цвет в формате RGB.
Первая пара цифр - это красная составляющая(Red), вторая пара - зелёная(Green) и третья пара - это синяя составляющая(Blue) цвета.
В таком виде цвет записывают при программировании. В Pixilang надо спереди добавить символ решётки.
Ну а снизу находятся ползунки, двигая которые мы и будем изменять цвет.
Объявляем переменные
Строке 5. Переменные, куда будут записываться координаты курсора/пальца.
Строки 8-10. Координаты верхнего левого угла(X,Y) ползунков для каждого цвета. Изначально они находятся в крайней левой позиции и символизируют чёрный цвет начального фона.
Строки 12-13. Переменные, куда будем записывать три составляющие( Red, Green, Blue) для цвета фона и три составляющие для цвета текста.
Строка 15. Какой ползунок сейчас активен. 1-красный, 2-зелёный, 3-синий.
Если ни один ползунок сейчас не активен, то переменная равна 0.
Строка 18. Флажок, с каким цветом мы сейчас работаем, с цветом фона(0) или цветом текста(1).
Рисуем интерфейс
Строки 22-27. Рисуем ползунки. В строках 22-24 рисуем сами прямоугольники ползунков соответствующего цвета, а в строках 25-27 рисуем границы движения ползунков.
Строки 30-32. Рисуем радиокнопки и подписи к ним. В строке 31 выделяем верхнюю кнопку
Строка 35-37. Подписываем значение цвета под радиокнопками. Каждая из функций (R_hex(), G_hex(), B_hex()) пишет 2 цифры своего цвета(красный, зелёный, синий) под выделенной радиокнопкой. Поэтому сначала записываем цвет под нижней радиокнопкой (строка 35), затем делаем текущим цвет фона (строка 36) и и записываем значение цвета фона под верхней радиокнопкой (строка 37).
Потом разберём код этих функций.
Основной бесконечный цикл
Строки 41-68. Бесконечный цикл. Большую его часть занимает обработка кликов и движений мышки/пальца по экрану.
Строка 43. Делаем запрос к устройству с помощью get_event(). После этого запроса, действия пользователя с экраном сохраняются в массиве EVT[ ]. В этом массиве нас будут интересовать EVT_TYPE ( тип действия ) и EVT_X, EVT_Y - координаты курсора.
Строка 46-53. Если был клик по экрану ( событие EVT_MOUSEBUTTONDOWN), то смотрим, не кликнули ли мы по ползунку или по радиокнопке. Для этого используется логическое И (&&).
Например в строке 49 записано:
Если Y-координата клика была больше 40 И меньше 110 И X-координата была больше x-координаты левого угла красного ползунка И меньше х-координаты правого угла красного ползунка, то будем двигать правый ползунок и менять красную составляющую цвета.
Строки 52-53. Если кликнули по одной из радиокнопок, то выделяем её и переходим к соответствующему режиму.
Строка 56-59. Отслеживаем движение мышки/пальца по экрану ( событие EVT_MOUSEMOVE) и передаём её функции move_button(). Если сейчас выбран какой то ползунок, то функция двигает его и меняет соответствующую составляющую цвета.
Строка 62. Если оторвали палец от экрана/отпустили кнопку мыши ( событие EVT_MOUSEBUTTONUP) , то теперь ни один цвет не выбран для редактирования. (Current_color=0).
Строка 66-67. Отображаем на экране полученный цвет для фона и пишем на нём текст цветом для текста с помощью функции ColorShow() (потом разберём её) и обновляем экран.
Функции
Ну а теперь разберём используемые функции.
Функция d2h() получает на вход число от 0 до 255 и возвращает строку, с записью этого числа в шестнадцатеричном виде.
В компьютере на нижнем уровне используется двоичная система, как самая простая для реализации в железе.
Есть напряжение - нет напряжения, есть дырка в перфокарте - нет дырки в перфокарте, транзистор открыт - транзистор закрыт.
Для записи, двоичный код слишком длинный, поэтому программисты используют шестнадцатеричный код. Каждая цифра при этом представляет 4 бита.
Строка 78. Здесь выписаны все цифры шестнадцатеричной записи.
Строка 80. Мы делим без остатка полученное в качестве параметра число на 16, что равносильно удалению 4 крайних правых битов в числе (в двоичном виде). Полученное число (4 бита) используется в качестве индекса, что бы получить первую цифру из массива $table.
Строка 81. Мы в начале делаем побитовую операцию И над числом, которое получили на входе и числом, которое имеет двоичный вид 00001111. Эта операция равносильна удалению 4 крайних левых бит. Полученное число (4 бита) используется в качестве индекса, что бы получить вторую цифру из массива $table.
Не стоит путать логические операции ( логическое И ( && ), логическое ИЛИ ( || ) ), которые мы использовали при определении условий и побитовые операции ( побитовое И ( & ), побитовоее ИЛИ ( | ) ) .
Функции R_hex, G_hex, B_hex выводят выводят значение составляющей цвета (красную, зелёную или синею) в шестнадцатеричном виде в нужное место на экране, в зависимости от того, какой цвет сейчас редактируется, цвет фона или текста.
Строка 89. Здесь используется встроенная функция t_scale(), которая масштабирует вывод по осям. Здесь мы увеличили в 2 раза размеры выводимых символов. При этом увеличиваются также все расстояния, поэтому, прописывая координаты, мы уменьшаем их в 2 раза.
Строка 100. Возвращаем масштаб к стандартному с помощью встроенной функции t_reset().
Функция ColorShow() - используется в главном цикле и выводит изображение с полученными цветами на экран.
Строка 143-144. Получаем цвет с помощью встроенной функции get_color(), на вход которой нужно подать значение красной, зелёной и синей составляющей.
Строка 145-148. Выводим прямоугольники и текст на экран в полученном цвете.
Функция select() которая выполняется, когда пользователь кликает по радиокнопке. В качестве параметров её передаётся значение для флага Back_or_Text, который отвечает, что сейчас редактируется, цвет фона или текста.
Строка 153. Записываем значение в переменную Back_or_Text .
Строка 154. Закрашиваем все ползунки чёрным (удаляем их на изображении).
Строка 158 и 163. Закрашиваем белый квадратик на одной радиокнопке и рисуем на другой.
Строка 159 и 164. Вычисляем X-координаты для ползунков из значений составляющих цвета. Каждая составляющая цвета имеет диапазон от 0 до 255, а ход ползунка равен 510, то есть в два раза больше максимального значения. Поэтому мы значение составляющей цвета умножаем на 2. А так как ползунки смещены от начала координат на 350 пикселей, мы вычитаем из полученного значения 350. Х-координата ползунка получается в диапазоне от -350 до 160.
Строка 166. Рисуем ползунки на новых позициях.
И последняя функция, которая отвечает за движение ползунков вместе с движением курсора/пальца по экрану. В качестве параметра в функцию передаётся х-координата курсора. Если ни один из ползунков не выбран при нажатию кнопки мыши/прикосновению пальца к экрану (EVT_MOUSEBUTTONDOWN), то функция ничего не выполняет. Рассмотрим случай, когда выбран красный ползунок.
Строка 174. Удаляем с экрана изображение ползунка на старой позиции, закрашивая его чёрным.
Строка 175. Х-координата ползунка означает левую кромку ползунка, а ширина ползунка равна 50 пикселей, Присваиваем х-координате ползунка новое значение, равное координате курсора минус 25, что бы курсор указывал на центр ползунка.
Строки 176-177. Ограничиваем движение ползунка от -350 до 160.
Строки 179-180. Вычисляем новое значение цвета. Это будет либо цвет фона, либо цвет текста. Для этого к х-координате ползунка прибавляем 350, получается диапазон от 0 до 510 и делим полученный результат на 2, получая значение от 0 до 255.
Исходники
Исходный файл на Яндекс Диске.