Arduino html lcd

Send Text from a Web Page to Arduino LCD

Created on: 24 June 2015

This tutorial shows how to set up an Arduino and Ethernet shield as a web server that hosts an HTML web page on the SD card. The web page allows text to be entered into two text inputs. When the button on the web page is clicked, the text is sent to the LCD that is connected to the Arduino.

An Arduino Uno, Ethernet shield and 2 × 16 LCD display are needed for this tutorial, or similar compatible hardware.

The video below shows the final project being tested. Text is entered into the two text inputs – each text input corresponds to one line of the LCD.

—>

Setting up the Hardware

The following parts are needed for the project:

  • Arduino Uno or similar Arduino, e.g. MEGA
  • Arduino Ethernet shield
  • Micro SD card, e.g. 2GB micro SD card
  • 2 line by 16 character LCD
  • 10k trim. pot (for LCD contrast)
  • Breadboard and wires
  • 39Ω to 47Ω resistor for LCD backlight (optional)
  • Standard USB cable
  • Ethernet patch cable

An Arduino board such as the Arduino Ethernet board can be used in place of a separate Arduino Uno and Ethernet shield.

A card reader or adapter for a micro SD card is needed to copy the HTML file from a PC to the micro SD card.

Books that may interest you:

  • Soldering a pin header to LCD – part of beginner’s soldering tutorial.
  • Connecting an LCD to Arduino – uses different Arduino pins to the ones used in this tutorial.
  • Basic LCD information – your LCD pin numbers / functions may differ.

Connecting the LCD to the Arduino

The default pins used in the Arduino LCD example sketches (i.e. found in the Arduino IDE under File → Examples → LiquidCrystal) for connecting the LCD to the Arduino can not be used when an Ethernet shield is plugged into the Arduino. The pins used for the LCD must be changed so that they are not used by both the Ethernet shield and the Arduino.

In the sketch for this project, the following data pins are connected to the LCD:

These pins correspond to the following code that is used to initialize the LCD:

Double check your LCD connections before powering the Arduino. Not all LCD pin numbering and functions are the same so make sure that you are using the correct pin numbering for your LCD.

LCDs are easily damaged if power is applied to the wrong pin.

The circuit diagram shows the LCD connections to the Arduino.

LCD to Arduino Connection Circuit Diagram

Further Setup

After using a breadboard and wire to connect the LCD to the Arduino with Ethernet shield as shown above, connect the Ethernet shield to the your local network using an Ethernet patch cable.

Before inserting the micro SD card into the socket in the Ethernet shield, copy the HTML index file to it as explained below. Finally power the Arduino from the USB cable and load the sketch.

You can help the Starting Electronics website by making a donation:

Any donation is much appreciated and used to pay the running costs of this website. Click the button below to make a donation.

Arduino Code and HTML for the Web Page to LCD Project

Find the Arduino code and HTML web page for this project below.

Arduino web2lcd Sketch

The following sketch must be loaded to the Arduino. Change the MAC address to the the MAC address found on the sticker under your Arduino Ethernet shield. Set the IP address in the sketch to suit your own network.

HTML and JavaScript index.htm File

The HTML and JavaScript code below must be copied to a file called index.htm on the micro SD card.

You can help the Starting Electronics website by making a donation:

Any donation is much appreciated and used to pay the running costs of this website. Click the button below to make a donation.

Sending Text from the Web Page to the LCD

With the Arduino and Ethernet shield connected to the network, open up a web browser and surf to the IP address set in the Arduino sketch.

If everything is set up correctly, the web page hosted by the Arduino will appear in the web browser. Enter the text in the text fields to send to line 1 and line 2 of the LCD and click the button on the web page.

How the Web to LCD Sketch Works

The sketch is based on the code from the Arduino web server tutorial part 16 that uses Ajax for sending and receiving data between the Arduino web server and web page.

See the above link and also the Arduino web server tutorial for an explanation of the basics of the web server and related technology.

Getting the Text from the Web Page

The GetLcdText() function in the sketch gets the two lines of text for the LCD from the incoming HTTP GET request which is sent from the web browser when the user clicks the button on the web page.

In the GetLcdText() function, the code first looks for line 1 of the LCD text by searching for &L1= which precedes the actual text. The line of the text ends with & which is also the start of the second line of text.

All spaces in the text that are sent are converted to %20 by the browser before sending. While the code is getting the lines of text, it converts the encoded spaces to actual space characters for display on the LCD.

After the first line of text is copied from the HTTP GET request, the code loops to get the second line of text.

Источник

Текстовый экран 16×2: инструкция, примеры использования и документация

Текстовый экран 16×2 пригодится для вывода показаний датчиков, отображения простых меню, подсказок и приветствий.

Видеообзор

Примеры работы для Arduino

В качестве примера подключим дисплей к управляющей плате Arduino Uno.

Подключение к Arduino

Для упрощения работы с LCD-дисплеем используйте встроенную библиотеку Liquid Crystal. В ней вы найдёте примеры кода с подробными комментариями.

Вывод текста

Для вывода первой программы приветствия, воспользуйтесь кодом вроде этого:

Вывод текста: кириллица

Существует два способа вывода кириллицы на текстовые дисплеи:

Рассмотрим оба способа более подробно.

Таблица знакогенератора

Дисплейный модуль хранит в памяти две страницы знакогенератора, которые состоят из различных символов и букв.

Для вывода символа на дисплей необходимо передать его номер в шестнадцатеричной системе из таблицы знакогенератора.

Так букве Я соответствует код B1 в шестнадцатеричной системе. Чтобы передать на экран строку «Яndex», необходимо в явном виде с помощью последовательности \x## встроить в строку код символа:

Вы можете смешивать в одной строке обычные символы и явные коды как угодно. Единственный нюанс в том, что после того, как компилятор в строке видит последовательность \x , он считывает за ним все символы, которые могут являться разрядами шестнадцатеричной системы даже если их больше двух. Из-за этого нельзя использовать символы из диапазона 0-9 и A-F следом за двузначным кодом символа, иначе на дисплее отобразится неправильная информация. Чтобы обойти этот момент, можно использовать тот факт, что две записанные рядом строки склеиваются.

Сравните две строки кода для вывода надписи «Яeee»:

Используя полученную информацию выведем на дисплей сообщение «Привет, Амперка!»:

Переключение страниц знакогенератора

Дисплейный модуль хранит в памяти две страницы знакогенератора. По умолчанию установлена нулевая страница. Для переключения между страницами используйте методы:

Дисплей не может одновременно отображать символы разных страниц.

Рассмотрим пример, в котором одна и та же строка будет отображаться по-разному — в зависимости от выбранной страницы.

Полную таблицу символов с кодами можно найти в документации к экрану.

Использование библиотеки LiquidCrystalRus

Совсем не обязательно мучатся со знакогенератором, чтобы вывести русский символ. Для решения проблемы скачайте и установите библиотеку LiquidCrystalRus.

Это копия оригинальной библиотеки LiquidCrystal с добавлением русского языка. Добавленный в библиотеку код трансформирует русские символы UTF8 в правильные коды для текстового экрана.

В качестве примера выведем фразу «Привет от Амперки» на дисплей.

Примеры работы для Espruino

В качестве примера подключим дисплей к управляющей плате Iskra JS.

Подключение к Iskra JS

Для работы с LCD-дисплеем из среды Espruino существует библиотека HD44780.

Вывод текста

Для вывода программы приветствия, воспользуйтесь скриптом:

Кирилица

Вывод кирилицы на дисплей с помощью платформы Iskra JS доступен через встроенную в дисплей таблицу знакогенератора.

Таблица знакогенератора

Дисплейный модуль хранит в памяти две страницы знакогенератора, которые состоят из различных символов и букв.

Для вывода символа на дисплей необходимо передать его номер в шестнадцатеричной системе из таблицы знакогенератора.

Так букве Я соответствует код B1 в шестнадцатеричной системе. Чтобы передать на экран строку «Яndex», необходимо в явном виде с помощью последовательности \x## встроить в строку код символа:

Вы можете смешивать в одной строке обычные символы и явные коды как угодно. Единственный нюанс в том, что после того, как компилятор в строке видит последовательность \x , он считывает за ним все символы, которые могут являться разрядами шестнадцатеричной системы даже если их больше двух. Из-за этого нельзя использовать символы из диапазона 0–9 и A–F следом за двузначным кодом символа, иначе на дисплее отобразится неправильная информация. Чтобы обойти этот момент, можно использовать тот факт, что две строки записанные рядом склеиваются.

Сравните две строки кода для вывода надписи «Яeee»:

Используя полученную информацию выведем на дисплей сообщение «Привет, Амперка!»:

Переключение страниц знакогенератора

Дисплейный модуль хранит в памяти две страницы знакогенератора. По умолчанию установлена нулевая страница. Для переключения между страницами используйте методы:

Дисплей не может одновременно отображать символы разных страниц.

Рассмотрим пример, в котором одна и та же строка будет отображаться по-разному — в зависимости от выбранной страницы.

Полную таблицу символов с кодами можно найти в документации к экрану.

Элементы платы

Дисплей

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

Экран выполнен на жидкокристаллической матрице, которая отображает 2 строки по 16 символов. Каждый символ состоит из отдельного знакоместа 5×8 пикселей.

Контроллер дисплея

Матрица индикатора подключена к встроенному чипу КБ1013ВГ6 с драйвером расширителя портов, которые выполняют роль посредника между экраном и микроконтроллером.

Контроллер КБ1013ВГ6 аналогичен популярным чипам зарубежных производителей HD44780 и KS0066, что означает совместимость со всеми программными библиотеками.

Контакты подключения

На плате дисплея выведено 16 контактов для подведения питания и взаимодействия с управляющей электроникой.

Вывод Обозначение Описание
1 GND Общий вывод (земля)
2 VCC Напряжение питания (5 В)
3 VO Управление контрастностью
4 RS Выбор регистра
5 R/W Выбор режима записи или чтения
6 E Разрешение обращений к индикатору (а также строб данных)
7 DB0 Шина данных (8-ми битный режим)(младший бит в 8-ми битном режиме)
8 DB1 Шина данных (8-ми битный режим)
9 DB2 Шина данных (8-ми битный режим)
10 DB3 Шина данных (8-ми битный режим)
11 DB4 Шина данных (8-ми и 4-х битные режимы)(младший бит в 4-х битном режиме)
12 DB5 Шина данных (8-ми и 4-х битные режимы)
13 DB6 Шина данных (8-ми и 4-х битные режимы)
14 DB7 Шина данных (8-ми и 4-х битные режимы)
15 LED+ Питания подсветки (+)
16 LED– Питания подсветки (–)

Обратите внимания, что физические контакты подсветки экрана 15 и 16 расположены не в порядком соотношении с другими пинами экрана.

Питание

Экран совместим со всеми контроллерами с логическим напряжением от 3,3 до 5 вольт. Но для питания самого индикатора (пин VCC) необходимо строго 5 вольт. Если в вашем проекте нет линии 5 вольт, обратите внимание на дисплей текстовый экран 16×2 / I²C / 3,3 В.

Интерфейс передачи данных

Дисплей может работать в двух режимах:

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

Источник

Adblock
detector