Интерфейс кнопки

  Прочитав название, не думайте, что «интерфейс кнопки» это нечто заумное. Нет, это как раз то, с чем мы имеем дело каждый день и бесчисленное количество раз.
  Открыв ноутбук, мы общаемся с программой, кликая по виртуальным кнопкам в окнах экрана. Не говорите, что это иконки, это именно кнопки. Кликая по любому изображению или по надписи на экране, вы выделяете его цветом, и тогда видно, что это кнопка. А если потом кликнуть по пустому полю, то выделение цветом пропадёт, но контуры кнопки останутся, чтобы Вы не забывали, какую кнопку Вы только что кликнули. И такая организация процесса очень удобна, и именно это называется словами «эргономика» или «интерфейс».

  Чтобы Вы кнопку увидели, и чтобы Вам было удобно ею манипулировать, над этим работают и в этом направлении стараются программисты. А если Вы никаких неудобств при работе с компьютером не замечаете, это значит, что они поработали на славу.

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

     ГРАФИЧЕСКАЯ КНОПКА

  Кнопки в среде программирования Вузуал_Бейсик_6 бывают текстовыми и графическими.
  Текстовая кнопка содержит только текст, и её цвет во время выполнения программы менять нельзя. Графическая кнопка может содержать только картинку, или только текст, или картинку и текст, расположенный ниже неё. Цвет фона, на котором расположен текст, в графической кнопке можно менять.
  Примером графических кнопок без картинки являются две кнопки, регулирующие плотность следа. Клики по нижней кнопке уменьшают цифру, выставленную на верхней кнопке, а клики по верхней кнопке увеличивают её. Когда доходим до цифры 9, а это означает 90% плотность, тогда следующий клик окрасит кнопку в более серый цвет, и это сделает след кисти совершенно плотным. Ну, вы меня поняли - кнопка маленькая, а шрифт крупный, цифра большая, и число 10 на кнопке не умещается, а при окрашивании кнопки в серый цвет всё удобно - и цифра хорошо видна и цветовой сигнал понятен.
  Мелкий шрифт и обозначения на кнопках типа – 90% или 100% это очень нехорошо.
 
     ТЕКСТОВАЯ КНОПКА – ДВИЖОК

  Иногда цифры на кнопках менять утомительно, особенно, когда делать это приходится часто. В таком случае, из текста на кнопке можно соорудить оригинальный движок. Для вертикального движка поле кнопки задаётся узким и вертикальным, а надпись на нём делается из пробелов и знака «минус». Кликая по движку мы получаем координату Y, и соответственно меняем положение знака «минус» в надписи среди пробелов. Поскольку ширина кнопки для надписи мала, то знаки размещаются на кнопке по вертикали. Меняя место знака «минус» в череде пробелов, мы перемещаем метку движка вверх или вниз.

  Горизонтальный движок для программы рисования показан на иллюстрации вверху слева. Надпись на нём состоит из знаков подчёркивания и вертикальной черты. Максимальное, крайне правое значение, равно 17, а крайнее левое означает ноль. Это более тонкая градация, чем цифры 0-9, а пользоваться кнопкой так же удобно. Занимает она, правда, несколько больше места. Размер кнопок тоже очень важен – чем больше кнопок, тем больше панель инструментов, и тем меньше то поле, которое остаётся для рисования.
  В моей программе для рисования вообще нет нижней и правой панелей. Есть только короткая правая и более длинная, но зато узкая – верхняя панель. Остальное поле свободно и не ограничено в размерах – смещай картинку кнопками с нарисованными на них стрелками хоть на 20 сантиметров влево и вверх, и рисуй где хочешь. Картинка при таком смещении залезает под панели, но её всегда можно вернуть на обычное место.

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

    КНОПКИ ДВОЙНОГО НАЗНАЧЕНИЯ

  Что это конь стоит и ногу чешет? – говаривал мой начальник, переставляя коня на шахматной доске в обеденный перерыв.
  Так и я, сделав кнопки для управления графикой в стереометрии, вдруг обнаружил, что в режиме рисования эти кнопки оказываются не у дел. Если раньше я эти кнопки использовал при выборе графического элемента, и они показывали название и номер точки или прямой, которые я выбирал кликом, а кнопки рядом показывали цвет точки или прямой, то теперь эти функции кнопок мне совсем не нужны. Не нужны и сами кнопки.
 
  Так подумал я. Потом подумал – но, позвольте, давай-ка я использую эти же кнопки, но по-другому, и совсем для других целей.
  На иллюстрации вы видите три кнопки в двух вариантах – ниже эти кнопки имеют крупные надписи, сделанные полужирным шрифтом (использованный шрифт тоже показан), а выше – эти же кнопки, превращённые в движки.
  Шрифт остался тем же, но использованные знаки «точка» и «вертикальная черта» очень миниатюрны – каждый знак занимает по ширине 4 пикселя (пустой, два чёрных и опять пустой), поэтому на кнопке поместилось 28 таких знаков. А верхний движок на иллюстрации со знаками подчёркивания, даже при большей его длине, способен только на 18 разных позиций.

    РЕАЛИЗАЦИЯ КНОПКИ - ДВИЖКА

  Результат получился хорошим, но надо же его правильно реализовать – как построить программу, чтобы при клике по движку его чёрточка перескакивала точно на место клика? Тут нужны некоторые вычисления.

  Заглянув в свойства кнопки, мы узнаём, что её ширина Width = 1815. Это значение дано в твипах. Чтобы получить внутренний размер кнопки делим 1815 на 15 (в одном пикселе 15 твипов) и вычитаем 4 (бордюр кнопки шириной в 2 пикселя с каждой стороны). Получаем 117.
  В нашем тексте 28 позиций, каждая по 4 пикселя, итого 112. Разница – 5 пикселей находится по краям текста. Чтобы узнать, как эти пиксели распределились, рассматриваем увеличенное в 6 раз изображение кнопки.
  Видим, что слева находятся 3 белых пикселя – 2 от указанной разницы и 1 принадлежит изображению точки. Зазор справа составляет 4 белых пикселя – 1 принадлежит точке и 3 от указанной разницы.

  Теперь, когда с расположением пикселей определились, можно приступать и к программированию наших действий. Красная чёрточка на иллюстрации показывает то место, левее которого мы должны получать 0, а правее - единицу. И это место, как вы можете видеть, имеет координату 6 пикселей, а в твипах это будет 90 (когда мы кликаем по кнопке, то получаем значение X, выраженное в твипах). Поскольку может оказаться, что Х точно равен 90, а предыдущее возможное значение равно 90-15=75, то, взяв серединку, запишем такую формулу  I=(X-82.5)/60
  Она и будет давать нам искомый результат.

     УЛУЧШЕНИЕ ЧУВСТВИТЕЛЬНОСТИ ДВИЖКА

  Казалось бы, прекрасно, разрешение движка стало очень хорошим, однако мы можем пойти дальше. Дело в том, что кнопка отслеживает координаты клика с точностью до пикселя (меняя Х с дискретностью 15 твипов), а мы, используя знаки шрифта, огрубляем получаемую информацию до точности в 4 пикселя.

  Тут возможны два пути. Если нужно видеть результат прямо на кнопке, тогда оставляем всё так, как есть, то есть, уменьшаем чувствительность в 4 раза и видим, что каждое новое значение сопровождается перескоком вертикальной чёрточки на новую позицию.

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

  Вы думаете, зря я писал эту статью? Вовсе не зря. Я во всём и дотошно разобрался. Идея об улучшении чувствительности движка пришла ко мне не сразу, а в процессе размышлений над текстом этой статьи.
  И, представьте, всё это уже работает.

__________
24.07.2023

ПРИЛОЖЕНИЕ
Код подпрограммы, обрабатывающей клики по кнопке движка

Private Sub Command26_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
Dim C As Long, Co As Long, I As Integer, S As String, I4 As Single
  If Button = 1 Then
    If FC21 >= 0 Then Call SNgg(1, 0): Picture1.SetFocus: Exit Sub:
    'Text2 = Str(X): Picture1.SetFocus: Exit Sub ‘test
    I4 = (X - 82.5) / 15: If I4 < 0 Then I4 = 0:
    If I4 > 110 Then I4 = 110:
    I = (X - 82.5) / 60: If I < 0 Then I = 0:
    If I > 27 Then I = 27: '0-27
    FC26 = I4 + 0.1: Text2 = " движок.U =  " + Str(FC26) '0-110
    S = "...........................":
    S = Left(S, I) + "|" + Mid(S, I + 1):
    Command26.Caption = S: Picture1.SetFocus:
  Exit Sub: End If
End Sub