ESP8266:Примеры/Селектор цвета с помощью ESP8266

Материал из Онлайн справочника
Перейти к: навигация, поиск

Перевод: Максим Кузьмин (Cubewriter)
Перевел 1874 статей для сайта.

Контакты:

Проверка/Оформление/Редактирование: Мякишев Е.А.


Ambox content.png Черновик


Селектор цвета с помощью ESP8266[1]

В этой статье рассказывается, как создать веб-сервер с ESP8266, дистанционно управляющий RGB-светодиодом. Во-первых, давайте взглянем на видео-версию данного руководства:

[Видео]

Необходимые компоненты

  • Один чип ESP8266-12E
  • Один RGB-светодиод с общим анодом
  • Три резистора на 470 Ом
  • Одна макетная плата

Загрузка на ESP8266 прошивки NodeMCU

В этом руководстве мы воспользуемся прошивкой NodeMCU. О том, как загрузить ее на ESP8266, читайте тут.

Загрузка и установка ESPlorer IDE

Для отправки команд на ESP8266 рекомендую использовать программу ESPlorer IDE, написанную пользователем 4refr0nt. Чтобы загрузить и установить ее на свой компьютер, проделайте следующее:

  1. Кликните здесь, чтобы скачать архив с ESPlorer IDE
  2. Распакуйте скачанный архив
  3. Перейдите в его главную папку
  4. Запустите файл «ESPlorer.jar»
  5. Откройте ESPlorer IDE

В результате должно открыться вот такое окно:

Esplorer-start 1.png

Загрузка кода на ESP8266

  1. Подключите ESP8266-12E (он уже оснащен программатором) к компьютеру
  2. Выберите порт, к которому подключен ESP8266-12E (в моем случае это «COM8»)
  3. Нажмите на кнопку «Open/Close»
  4. Выберите вкладку «NodeMCU+MicroPython»
  5. Создайте новый файл под названием «init.lua»
  6. Нажмите кнопку «Save to ESP»

Все кнопки, меню и вкладки, необходимые для действий выше, показаны на этой картинке:

Esplorer tab 2.png

Код

Используя ESPlorer IDE, загрузите на ESP8266 код, показанный ниже. Ваш файл должен называться «init.lua».

В пятой строчке поменяйте данные на те, что соответствуют вашей сети.

  1. -- Руи Сантос (Rui Santos)
  2. -- Более подробно о проекте на: http://randomnerdtutorials.com
  3.  
  4. wifi.setmode(wifi.STATION)
  5. wifi.sta.config("YOUR_NETWORK_NAME","YOUR_NETWORK_PASSWORD")
  6.  
  7. print(wifi.sta.getip())
  8.  
  9. function led(r, g, b)
  10.     pwm.setduty(1, r)
  11.     pwm.setduty(2, g)
  12.     pwm.setduty(3, b)
  13. end
  14. pwm.setup(1, 1000, 1023)
  15. pwm.setup(2, 1000, 1023)
  16. pwm.setup(3, 1000, 1023)
  17. pwm.start(1)
  18. pwm.start(2)
  19. pwm.start(3)
  20.  
  21. srv=net.createServer(net.TCP)
  22. srv:listen(80,function(conn)
  23.     conn:on("receive", function(client,request)
  24.         local buf = "";
  25.         buf = buf.."HTTP/1.1 200 OK\n\n"
  26.         local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
  27.         if(method == nil)then
  28.             _, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
  29.         end
  30.         local _GET = {}
  31.         if (vars ~= nil)then
  32.             for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
  33.                 _GET[k] = v
  34.             end
  35.         end
  36.         buf = buf.."<!DOCTYPE html><html><head>";
  37.         buf = buf.."<meta charset=\"utf-8\">";
  38.         buf = buf.."<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">";
  39.         buf = buf.."<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
  40.         buf = buf.."<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\">";
  41.         buf = buf.."<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\"></script>";
  42.         buf = buf.."<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>";
  43.         buf = buf.."</head><body><div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1>";      
  44.         buf = buf.."<a type=\"submit\" id=\"change_color\" type=\"button\" class=\"btn btn-primary\">Change Color</a> ";
  45.         buf = buf.."<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div></div>";
  46.         buf = buf.."<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);";      
  47.         buf = buf.."document.getElementById(\"change_color\").href=\"?r=\" + Math.round(picker.rgb[0]*4.0117) + \"&g=\" +  Math.round(picker.rgb[1]*4.0117) + \"&b=\" + Math.round(picker.rgb[2]*4.0117);}</script></body></html>";
  48.        
  49.         if(_GET.r or _GET.g or _GET.b) then
  50.             -- это для RGB-светодиода с общим катодом:
  51.             -- led(_GET.r, _GET.g,_GET.b)
  52.            
  53.             -- это для RGB-светодиода с общим анодом
  54.             led(1023-_GET.r, 1023-_GET.g,1023-_GET.b)  
  55.         end
  56.         client:send(buf);
  57.         client:close();
  58.         collectgarbage();
  59.     end)
  60. end)

Важно! Если вы используете для этого проекта RGB-светодиод с общим катодом, обратите внимание на нижнюю часть кода. В нем есть две строчки кода – для RGB-светодиода с общим катодом и RGB-светодиода с общим анодом. По умолчанию первая закомментирована.

Схема

Подключите друг к другу компоненты согласно этой картинке:

ESP8266-RGB-Color-Picker bbff 3.png

Важно! Если вы используете RGB-светодиод с общим катодом, длинную ножку нужно подключить к GND.

IP-адрес вашей ESP8266

Когда вы перезапустите ESP8266, в мониторе порта ESPlorer IDE появится IP-адрес ESP8266. Запомните или сохраните его где-нибудь, т.к. он вам еще понадобится.

В моем случае это «192.168.1.7». Если у вас возникла на этом этапе какая-то проблема, ее решение можно поискать здесь.

Готово! Теперь проверим, работает ли собранная нами система.

Запуск веб-сервера

Заходим в любой браузер и вводим туда IP-адрес ESP8266. В результате в браузере должно появиться следующее:

RGB-color-picker-main-selecting-color 4.png

Кликните в поле ввода – в результате должно открыться маленькое окошко с меню для выбора цвета. Теперь просто нажмите мышкой или пальцем в нужном месте, чтобы выбрать желаемый цвет для RGB-светодиода:

Selecting-color 5.png

Теперь просто кликните на кнопку «Change Color»:

Changing-color 6.png

Вуаля! Светодиод загорелся синим!

Blue-LED-1 7.png

В начале статьи есть видео, где использование этого проекта показано вживую.

См.также

Внешние ссылки

  1. randomnerdtutorials.com - ESP8266 RGB Color Picker