Градиенты, или как интерфейс сделать чутка красивее

Ответить
Аватара пользователя
2Qay
Сообщения: 54
Зарегистрирован: 14 окт 2019, 12:58
Откуда: Татарстан
Позывной: ----
Город: Казань
Благодарил (а): 13 раз
Поблагодарили: 11 раз

Градиенты, или как интерфейс сделать чутка красивее

Сообщение 2Qay » 07 сен 2020, 23:11

Доброго времени суток, товарищи.

Введение
Как то потребовалось мне сделать градиентную шкалу на моем TFT экранчике, чтобы красиво и ни как у остальных. Поиски в тырнэтах не дали вразумительного результата, кроме как использовать готовый массив, и то в кодировке RGB888. Но я наткнулся на интересные картинки с вики, на которых изображен градиент и графики для каждого цвета RGB (ниже будет ссылка на архив с самой библиотекой и этими картинками).

Описание библиотеки
Библиотека рассчитана на работу с кодировкой цветов 565, который широко используется в TFT экранчиках. В библиотеки используются только стандартные библиотеки (масло масляное):

Код: Выделить всё

#include "stdlib.h"
#include "stdint.h"
#include "math.h"
По сути, эту библиотеку можно будет использовать не только на стмках(на которой собственно я и запускал), но и на других камнях, скорее тут вопрос совместимости компиляторов....
Сначала покажу результат работы библиотеки:
IMG_20200907_215050-min.jpg
В .h файле объявлены следующие функции

Код: Выделить всё

uint16_t grad_red_yellow_green(uint16_t val, uint16_t val_max, uint16_t val_ntsc);			//grad 1
uint16_t grad_black_blue_green_red_white(uint16_t val, uint16_t val_max, uint16_t val_ntsc);		//grad 2
uint16_t grad_rainbow(uint16_t val, uint16_t val_max, uint16_t val_ntsc); 				//grad 3
uint16_t grad_white_gray_black(uint16_t val, uint16_t val_max); 					//grad 4
uint16_t grad_lava(uint16_t val, uint16_t val_max); 							//grad 5 & 6
uint16_t grad_my_castom(uint16_t val, uint16_t val_max);
uint16_t grad_black_purple_red_yellow(uint16_t val, uint16_t val_max);					//grad 7
(мда, с придумыванием названий я конечно на ВЫ)

Логика работы с этими функциями следующая: например вам нужно построить/отобразить значение с АЦП в виде шкалы, в этом случае значение получаемое с АЦП это переменная val, максимальное значение которое можно получить с АЦП это переменная val_max.

Так же есть переменная ntsc. Я лично понял что это прозрачность цвета, исходя из своих опытов. К примеру возьмем первый градиент(ниже картинка из вики):
grad1.png
На фотке в самом начале этому градиенту соответствует первая и вторая линия. Только в первом случае параметр ntsc рассчитывается согласно графикам, а во втором случае значение этой переменной приравнено к единице, то есть на всем диапазоне цвет отображается "на полную яркость". Опять таки если вернуться к фотографии в начале, то первая и вторая, третья и четвертая, пятая и шестая это градиенты 1, 2 и 3 соответственно, только в четных переменная ntsc приравнена к единице, а в нечетных рассчитывается.
Вообщем поиграться можно, и сделать свою "уникальную" шкалу. Вообщем это весь процесс работы с функциями библиотеки (пока что).
Спасибо за внимание)

P.S. Интерфейс вашего устройства должен быть не только функциональным, но и эстетически прекрасен и приятен взгляду, буду рад если библиотека кому либо из вас поможет.

Ссылка на библиотеку:https://yadi.sk/d/R7fDgL89BNR-ZQ?w=1
градиенты.zip
(1021.35 КБ) 5 скачиваний

Lymes
Сообщения: 1
Зарегистрирован: 11 сен 2020, 08:16
Город: Рим
Поблагодарили: 1 раз

Градиенты, или как интерфейс сделать чутка красивее

Сообщение Lymes » 11 сен 2020, 08:35

Прикольно конечно, но нецелесообразно. Во-первых, градиент шкалы далеко не всегда линеен. Например, шкала S-метра, где участок красного короче зеленого, учитывая переход, да и в начале слабый сигнал красивее начинать бледно-зеленым, постепенно наращивая интенсивность. Во-вторых, если конечно ваш микроконтроллер не пухнет от сна нифига не делая, зачем напрягать его лишними вычислениями.
Все что вам необходимо, это статический массив uint16_t с размером длины вашей шкалы. Рисуете в фотошопе ваш градиент как вам нужно любой сложности, сейвите в rgb565 и берете оттуда линию толщиной в один пиксель. Это и будет ваш массив. Сколько на вашем TFT ширина шкалы? Скажем, 128 пикселей. Массив при этом займет 256 байт. Если используете stm32, запишите этот кусочек памяти в флэш. Можно организовать даже DMA копирование напрямую из флэш в spi экрана (Perif-to-Perif), при этом вы даже не потеряете ни одного полезного такта и не займете RAM.

Аватара пользователя
2Qay
Сообщения: 54
Зарегистрирован: 14 окт 2019, 12:58
Откуда: Татарстан
Позывной: ----
Город: Казань
Благодарил (а): 13 раз
Поблагодарили: 11 раз

Градиенты, или как интерфейс сделать чутка красивее

Сообщение 2Qay » 11 сен 2020, 13:26

Lymes, хммм, а это идея, добавить уточняющий функционал, работаем ли мы с линейной шкалой или какой либо другой.
А по поводу создания изначального массива, можно конечно сделать как вы предлагаете, через фотошоп, но ведь можно так же создать массив, и перед основным циклом просто заполнить его.

Ответить

Вернуться в «Микроконтроллеры и программирование»