Эксперимент 63. RGB-ночник

В прошлом эксперименте мы уже сделали Wi-Fi RGB-ночник. Это светодиод яркостью и цветом которого можно управлять по Wi-Fi. Его можно использовать в качестве ночника. Но в нем есть один недостаток — нет наглядного выбора цвета. Для установки цвета нам нужно вводить три цифры, три яркости R, G и B. Заранее сложно предсказать какой цвет получится в результате ввода цифр. Также не понятно какие цифры нужно вводить, чтобы получить оранжевый, бирюзовый и другие цвета.

Для упрощения выбора цветов в веб-формах есть специальные типы полей ввода. Например есть текстовые поля, есть кнопки, есть выпадающие списки. Есть и специальное поле для ввода цвета с наглядной палитрой. Можно использовать этот элемент формы для ввода цвета и у нас. Единственная проблема — в HTML принято записывать цвет совсем не так, как мы его устанавливаем в своих программах.

Мы устанавливаем яркость светодиода с помощью сигнала ШИМ со значением от 0 до 1023. А в HTML цвет записывается с помощью 6 шестнадцатеричных символов и символа # перед ними. Например

Первые 2 символа отвечают за красный цвет, вторые два за зеленый и последние за синий цвет. Цвета могут принимать значения от 00 до FF. Это запись в шестнадцатеричной системе счисления чисел от 0 до 255.

Поэтому нам необходимо конвертировать цвет из формата записи в HTML в наш формат трех чисел от 0 до 1023.

Схема эксперимента

Схема эксперимента остается без изменений Рисунок 1. Монтажная схема эксперимента

Программный код эксперимента

color.html
  1. <html>
  2.     <head>
  3.     </head>
  4.     <body>
  5.         <h3>Select color:</h3>
  6.         <form action="/">
  7.             <input type="color" style="height:50px;width:50%;" value="<=VALUE=>" name="color">
  8.             <input type="submit" value="Send">
  9.         </form>
  10.     </body>
  11. </html>

Сохрани эту страницу в корне файловой системы микроконтроллера под именем color.html

Код программы:

Exp63.py
  1. from micropyserver import MicroPyServer
  2. import time
  3. from machine import Pin, PWM
  4. import network
  5. import gc
  6. _init()
  7. gc.collect()
  8.  
  9. LedR = PWM(Pin(13, Pin.OUT))
  10. LedG = PWM(Pin(14, Pin.OUT))
  11. LedB = PWM(Pin(15, Pin.OUT))
  12.  
  13. wlan_id = "Wi-Fi_Name"
  14. wlan_pass = "Wi-Fi_Password"
  15.  
  16. wlan = network.WLAN(network.STA_IF)
  17. wlan.active(True)
  18. wlan.connect(wlan_id, wlan_pass)
  19. time.sleep(2)
  20.  
  21. while wlan.isconnected() == False:
  22.     pass
  23.  
  24. print('Device IP:', wlan.ifconfig()[0])
  25.  
  26.  
  27. def index(request, params):
  28.     html_color = '4AD686'
  29.  
  30.     if ('color' in params):
  31.         html_color = params['color'][3:9]
  32.         print(html_color)
  33.  
  34.         r = html_color[0:2]
  35.         g = html_color[2:4]
  36.         b = html_color[4:6]
  37.  
  38.         r = int(r, 16)
  39.         g = int(g, 16)
  40.         b = int(b, 16)
  41.  
  42.         r = int(r * 1023 / 255)
  43.         g = int(g * 1023 / 255)
  44.         b = int(b * 1023 / 255)
  45.  
  46.         LedR.duty(1023-r)
  47.         LedG.duty(1023-g)
  48.         LedB.duty(1023-b)
  49.  
  50.  
  51.     html_file = open("color.html")
  52.     html = html_file.read()
  53.     html = html.replace('<=VALUE=>', '#' + html_color)
  54.     html_file.close()
  55.     server.send(html, content_type="Content-Type: text/html")
  56.  
  57.  
  58. LedR.duty(0)
  59. LedG.duty(0)
  60. LedB.duty(0)
  61.  
  62.  
  63. server = MicroPyServer()
  64. server.add_route("/", index)
  65. server.start()

Первым делом в коде программы нужно заменить Wi-Fi_Name на имя нужной сети, а Wi-Fi_Password на пароль от нее.

Рассмотрим алгоритм преобразования цвета. Веб форма отправляет на наш сервер цвет в формате #FFFFFF. При этом символ # трансформируется в код символа %23. Поэтому в программе на Python в params['color'] будет что-то вроде %23c400be. С помощью оператора извлечение среза мы выбираем нужные нам символы, а именно с 3 по 9. 

  1.         html_color = params['color'][3:9]

Теперь в переменной html_color находится цвет в формате c400be. Точно так же «разрезаем» его на 3 части: 

  1.         r = html_color[0:2]
  2.         g = html_color[2:4]
  3.         b = html_color[4:6]

Теперь в переменных r, g и b у нас находятся соответствующие цвета записанные строкой в шестнадцатеричной форме. Их нужно перевести в числа: 

  1.         r = int(r, 16)
  2.         g = int(g, 16)
  3.         b = int(b, 16)

Теперь мы получили три числа, которые могут быть от 0 до 255. Нам нужно масштабировать их в диапазон от 0 до 1023. Иначе мы получим лишь четверть от максимальной яркости. 

  1.         r = int(r * 1023 / 255)
  2.         g = int(g * 1023 / 255)
  3.         b = int(b * 1023 / 255)

Теперь мы имеем данные для управления ШИМ сигналом светодиода. Остается только не забыть, что светодиод с общим анодом, поэтому для получения нужного результата наши значения нужно вычесть из 1023. 

  1.         LedR.duty(1023-r)
  2.         LedG.duty(1023-g)
  3.         LedB.duty(1023-b)

При выводе страницы в браузер мы должны заменить метку в шаблоне страницы на актуальный цвет, но в формате HTML. 

  1. html = html.replace('<=VALUE=>', '#' + html_color)

Вот так это выглядит у нас. Но отображение может быть разным в зависимости от браузера.

Теперь управлять цветом светодиода легко и наглядно.