Loading...

Ваша корзина пуста.

 
 
 
×

Registration

Profile Informations

Login Datas

or login

First name is required!
Last name is required!
First name is not valid!
Last name is not valid!
This is not an email address!
Email address is required!
This email is already registered!
Password is required!
Enter a valid password!
Please enter 6 or more characters!
Please enter 16 or less characters!
Passwords are not same!
Terms and Conditions are required!
Email or Password is wrong!
Captcha is required!
Captcha is wrong!

Продвинутое приложение Nextion 2: использование глобальных и локальных переменных для передачи данных между страницами

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

Изначальная идея проекта – сделать интерфейс ввода значений тока и напряжения. Нажимая на поле ввода мы переходим на страницу клавиатуры, где можем вводить и удалять цифры.
Итак, начнём. качать HMI файл .

Шаг 1. Создайте .HMI файл

Создайте новый .HMI файл, укажите разрешение 320*240 и альбомную ориентацию. Добавьте изображение в библиотеку изображения проекта. Создайте подходящий шрифт и добавьте его в шрифты проекта. Т.к. у нас два интерфейса, нам понадобятся две страницы. Добавьте ещё одну страницу и назовите её "B". А первая пусть будет "A". Мы для фонов обоих страниц указали pic 0.

Шаг 2. Добавление 4 текстовых полей на страницу A

Добавьте четыре текстовых поля на страницу A. Настройте их размеры как на скриншоте ниже. В качестве фона левых элементов будем использовать кусочки фона страницы. Напишем там текст "Current(A)" и "Voltage(V)". Для полей справа просто укажите цвет фона и сделайте свойство txt пустым.

Обратите внимание, что для t0 и t1 в свойстве vscope мы указали global. Так мы сделали их доступными из всего проекта. Это важно т.к. мы планируем вводить значения этих полей на другой странице.

Далее напишите пользовательский код для t0 и t1. Конечно же это нужно делать только поле того как закончим со страницей B.

Код для t0:


B.va0.val=0   //in page B, vscope of va0 must be set as global
B.t0.txt=""   //in page B, vscope of t0 must be set as global
page B

Для t1:


B.va0.val=1  //in page B, vscope of va0 must be set as global
B.t0.txt=""  //in page B, vscope of t0 must be set as global
page B

На скриншоте ниже вид страницы A.

 

Шаг 3. Размещение текстовых полей и кнопок на странице B

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

В первую очередь, добавьте текстовое поле чтобы отображать введённое значение. Настройте его размер. Не забудьте указать значение global для параметра vscope, выберите цвет фона и шрифт, сделайте пустым значение параметра txt.

Далее, разместите 13 кнопок. По очереди разместите их в нужных местах и укажите размеры. Укажите шрифт, фон и цвет шрифта. В параметр txt впишем значения 0,1,2,3,4,5,6,7,8,9,.,DEL и ENTER в указанном порядке. Чтобы выводить значения в t0, мы должны добавить код к каждой из этих кнопок.

Для кнопки с txt=0 код:


t0.txt=t0.txt+"0"

Для кнопки с txt=9 код:


t0.txt=t0.txt+"9"

Для кнопки с txt=. код


t0.txt=t0.txt+"."

Для кнопки с txt=DEL код:


t0.txt=t0.txt-1

Для кнопки с txt=ENTER код:


if(va0.val==0)
{
A.t0.txt=t0.txt //in page A, vscope of t0 must be set as global
}
if(va0.val==1)
{
A.t1.txt=t0.txt  //in page A, vscope of t1 must be set as global
}
page A

В результате получилась страница как на скриншоте:

Шаг 4. Добавление переменной на страницу B

Добавьте переменную на страницу B. В свойстве vscope укажите global как указано на скриншоте ниже.

Видео демонстрации работы

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

Ну как, проект вас вдохновил? Если есть идеи или проекты, которыми хотите поделиться, вы может сделать это здесь, your sharing is highly appreciated.