Data icon что это за программа

Содержание

В данной статье поработаем с программным обеспечение DGUS (DWIN Graphic Utilized Software). Познакомимся с некоторыми элементами программы, ознакомимся с протоколом передачи данных с дисплея и создадим первый проект «HELLO WORLD».

Прошлые статьи:

Продолжаем работать с дисплеем DMG80480Y070_01NR с TN матрицей, разрешением экрана 800 на 480 точек и резистивной сенсорной панелью.

Дисплей DMG80480Y070_01NR вид спереди

Далее рассмотрим программу DGUS (сокращение от DWIN Graphic Utilized Software) и основные формируемые файлы для работы. Ниже представлена краткая диаграмма разработки ПО.

С системой на кристалле T5L можно работать напрямую, программируя ядро, например, через Keil и с помощью программы DGUS через визуальный интерфейс. В программу DGUS загружаются изображения, иконки, аудиофайлы, шрифты. Далее при работе формируются взаимодействия элементов дисплея, элементов сенсорной панели, размечается область памяти для переменных. После загрузки файлов на дисплей происходит взаимодействие через графический интерфейс и через асинхронный порт UART (TTL/RS232/RS485).

Fix Mobile data icon disappeared repair from notifications

Диаграмма разработки ПО

Для того чтобы понять как работать с программой напишем «Hello World». В него будет включена работа с переменными, элементами управления, формированием клавиатуры для ввода цифр, приемом и отправкой данных через UART на компьютер и выводом полученной информации на дисплее.

Для начала необходимо скачать саму программу DGUS, сделать это можно по ссылке на GitHub , далее во всех статьях будет по умолчанию использоваться расположение программы и проекта в директории «D:DWINDWIN-Project» программа DGUS будет располагаться по пути «D:DWINDWIN-ProjectDGUS_V7624».

Необходимо запустить программу DGUS, нажать на значок New, в появившемся окне выбрать разрешение экрана 800х480 и папку где будет храниться проект в данном случае «D:DWINDWIN-ProjectLesson 1».

Меню программы DGUS

Если интерфейс программы на китайском языке необходимо перейти в последнюю вкладу и поле «Language» выбрать «English».

Меню программы DGUS

Воспользуемся бесплатным стоком изображений freepik для поиска фона и иконок. Фоновое изображение сохраняем в папке DWIN_SET (фоновые изображения лучше сохранять с цифирным обозначением в начале названия, например, 0_fon.png), иконки в папке Icon.

Далее переходим во вкладку «Touch and display config» нажимаем на плюс, переходим в папку DWIN_SET и добавляем три фоновых изображения.

Формируем фоновый файл для дисплея, для этого переходим на вкладку «Welcome» и нажимаем на пункт DWIN ICL Generator.

Меню программы DGUS

Открывается окно формирования ICL файла.

1. Выбираем директорию где сохранены изображения в нашем случае DWIN_SET.
2. Выставляем качество изображения на 100%.
3. Выбираем пункт применить ко всем.
4. Проверяем чтобы на всех изображениях применились новые параметры.

Mobile Data Switch — Mobile Data icon missing on notification bar quick launch tiles, SOLVED

5. Генерируем файл ICL в папку DWIN_SET.
!ВАЖНО, файл фона должен начинаться с цифры 32(это связанно с архитектурой памяти). Можно оставить 32.ICL.

Генерация файла фоновых изображений
Разметка памяти дисплея

Точно также формируем файл иконок. Директория хранения изображений иконок будет Icon. Генерируемый файл сохраняем в папку DWIN_SET, но присваиваем имя 46.ICL.

Для формирования шрифта необходимо перейти на вкладку «Welcome» и в поле «DGUS config tool» нажать «0# word bank generating».

Включение генерации шрифтов

Откроется окно генерации шрифта. Нажатием на кнопку «Font» выбираем подходящий шрифт и выставляем параметры так, чтобы все буквы не были срезаны, отследить это можно в левой половине окна. Далее нажатием на кнопку «Create 0_DWIN_ASC.HZK» формируем файл шрифта. Файл генерируется в корневой папке программы DGUS(DWIN-ProjectDGUS_V7624), его необходимо перенести в папку Lesson1DWIN_SET.

Окно генерации шрифта

Откроем вкладку «Touch and display config», в верхнем выберем пункт «Text Display». В правой стороне появится окно редактирования элемента. В первых двух строчках устанавливается положение верхней левой точки, и размер окна.

Добавление элемента «text display»

Устанавливаем значение на X = 200, Y = 21, W =400, H = 64.

Далее идут такие элементы как:
«Name» название элемента;
«SP» указатель описания элемента, в данной статье не будем его затрагивать;
«VP» адрес памяти начала элемента (адреса с 0x0000 по 0x0FFF используются системой, 0x1000-0x4FFF используется для вывода графиков, 0x5000-0xFFFF отведено для пользователя);

Адресное пространство переменных

«Encoding Mode» режим декодирования, выставляем 0x01 для правильного отображения информации;
«Automatic character spacing adjustment» ставим галочку для автоматического выравнивания межсимвольного расстояния;
«Text Length» количество символов надписи. Надпись будет состоять из 11 символов «HELLO WORLD», что и указываем в этом поле.
FONT0_ID выбор банка шрифтов, оставляем 0;
Следующие два поля отвечают за размер букв, стоит соблюдать отношение 1:2.
Далее идут поля отвечающие за горизонтальный и вертикальный интервалы между букв, так как мы выставили галочку на автоматическое выравнивание, то эти поля не задействуются.
И наконец в последнем поле вводится сама надпись «HELLO WORLD».

FONTДобавление элементов «Data variables display»

Добавим поля отображения переменных. Переменных будет 4, для них на фоновом изображении отведены места и указаны области памяти в которые мы и будем их записывать. Переменные обозначим типом INT(16 бит) который занимает по 2 байта информации. Поэтому адреса переменных будут 5000, 5002, 5004 и 5006.

Для добавления элемента в верхнем меню выбираем иконку «Data variables» и размещаем на отведенных областях фона. Окно редактирования элемента содержит поля:
«Name» название элемента;
SP» указатель описания элемента, в данной статье не будем его затрагивать;
«VP» адрес памяти для переменной;
«Show Colour» для выбора цвета цифры;
«Word Bank ID» выбор шрифта, это поле оставляем 0;
«Font size» установка размера шрифта;
«Alignment» выравнивание, можно установить по левому краю, по правому краю и по центру;
«Automatic character spacing adjustment» автоматическое выставления межсимвольного расстояния;
«Display invalid zero» показывает незначащие нули;
«Variable type» позволяет выбрать несколько вариантов типов переменных, если переменные будут не 2 байта необходимо учесть это в разметки памяти. В данной случае тип остаётся int (2 bytes);
«Integer digits» количество цифр;
«Decimal digit» количество цифр после запятой;
«Variable unit length» длина названия единиц изменения;
«Show unit» названия единиц измерения;
«Initial value» начальное значение переменной.

Читайте также:

Для чего программа realband

Установим «Initial value» для переменной по адресу 5000 — 0, 5002 — 100, 5004 — 100, 5006 — 50.

Добавление элемента «variables Icon»

Раз уже сформировали файл иконок то добавим и их. Для добавления в меню сверху выбираем «variables Icon». Рассмотрим какие параметры у этого элемента:
«Name» название элемента;
«SP» указатель описания элемента, в данной статье не будем его затрагивать;
«VP»адрес памяти для переменной относительно которой будет изменяться иконка;
«Icon file» файл в котором находятся изображения иконок, был создан файл 46.icl, его и указываем;
«Minimum» минимальное значение переменной;
«Icon ID» ID иконки отображаемой при достижении минимального значения переменной;
«Maximum» максимальное значение переменной;
«Icon ID» ID иконки отображаемой при достижении максимального значения переменной;
«Display mode» режим отображения, прозрачный фон или фон изображения;
«Filter Set» Значение фильтра в режиме прозрачности;
«Initial value»начальное значение переменной;
«Background transparent Mode» режим прозрачности.

Выставим адрес переменной VP 5006, поле Minimum — 50, Maximum — 101,Initial value 50, Icon ID минимального значения выставим 0, максимального 1. В файле иконок присутствует только одна иконка с номером 0, она и будет отображаться на дисплее.

Добавление элемента «Incremental Adjustment»

Добавим два элемент «Incremental Adjustment» для изменения переменной. Для этого в верхнем меню переходим на вкладку «Touch Control» выбираем соответствующий элемент.

Настройка элемента содержит:
Позицию элемента и его геометрические размеры;
«Key Ct Value» значение кнопки — оставляем 0;
«Audio ID» если установить галочку активируется возможность воспроизведения звука при касании;
«Name» название элемента;
«Data auto-uploading» автоматическая отправка данных при нажатии;
«Button effect» действие при нажатии;
«VP»адрес памяти для переменной над которой будет произведена операция;
Выбор типа переменной;
«Adjust method» приращение или уменьшение переменной;
«Over limith Operation» действие при достижении лимита. Два варианта: остановиться (STOP) или продолжать действие циклически(Cycle);
«Adjusting step length» шаг операции;
«Lower limit» нижний лимит;
«Upper limit» верхний лимит;
«Touch effect» эффект при прикосновении, два варианта: Constant постоянное приращение или вычитание и Disposable одноразовое приращение или вычитание;

Один из созданных элементов будет осуществлять приращение переменной 5006, второй элемент будет уменьшать переменную. Выставим пределы изменения переменной 0 и 100, шаг приращения 1, тип приращения Constant и остановку при достижении лимита. Также выставим действие при нажатии на смену фонового изображения на 1 и включим воспроизведение аудио №2. Установим расположение элементов на кнопке «-» и «+» соответственно.

Благодаря добавленным элементам можно изменять переменные на дисплее, но этого мало, и нужно вывести эти данные во внешний мир, сделаем это с помощью элемента «Synchrodata return» который позволяет отправлять данные через асинхронный порт. Добавить его можно через верхнее меню и вкладку «Touch Control» выбрав соответствующий элемент.

Добавление элемента «Synchrodata return»

Настройка элемента содержит:
Позицию элемента и его геометрические размеры.
«Key Ct Value» значение кнопки — оставляем 0;
«Audio ID» активация аудиофайла. Если установить галочку появится возможность воспроизведения звука при касании;
«Name» название элемента;
«Button effect» действие при нажатии;
«Page switching» переход на другую страницу при нажатии;
Далее идёт три настройки «First press» первое нажатие, «Continuous pressing» продолжительное нажатие и «Loosen pressing» завершение нажатия. Настройки содержат пункты:
«Mode» режим, 0x00 не задействуется, 0x01 активирован, остальные режимы не задействованы.
«VP*S» адрес считывания данных;
«VP*T» адрес записи данных;
«Data length» длинна переменной в байтах.

Создадим элемент с отображением 1 фона при нажатии, включим воспроизведение аудио №2, считыванием данных с переменной 5006 при первом касании и зададим расположение на кнопке «SEND».

Для переменной по адресу 5000 сделаем ввод значения с клавиатуры. Чтобы это сделать необходимо создать клавиатуру. Для неё выделен отдельный фон под номером 2. Перейдём на него в меню слева.

Добавление клавиатуры

Каждой кнопке необходимо задать действие, в нашем случае это ввод цифры соответствующей цифре на изображении. Для этого в верхнем меню переходим на вкладку «Touch Control» и выбираем элемент «Basic touch module». Рассмотрим настройки этого модуля:
В первых строках настраивается положение модуля и его размеры, размеры кнопки равны 50х50, поэтому выставим данные параметры в поля W и H. Расположение кнопки выставим поверх соответствующего изображения;
«Name» название элемента;
«Button effect» действие при нажатии;
«Page switching» переход на другую страницу при нажатии;
«key value» значение передаваемое кнопкой при нажатии;
«Hold Time» время удержания необходимого для срабатывания.

В примечании ниже указано какие значения кнопок стоит выставлять для присвоения им действий.
значения 0x0030-0x0039 соответствуют цифрам от 0 до 9;
0x002E точка;
0x002D +/-;
0x00F0 отмена;
0x00F1 ввод;
0x00F2 стереть символ;
Соответственно этому примечанию заполняем полня Key Value.
Цифры от 0 до 9 значениями 0x0030-0x0039;
C 0x00F2;
OK 0x00F1.

Клавиатура готова, теперь нужно научиться её вызывать. Сделать это можно используя элемент «Variable data Input» найти его можно в верхнем меню в вкладке «Touch Control» нажав на элемент «Variable Input»;

Настройки модуля:
Расположение и размер элемента;
«Key Ct Value» значение кнопки — оставляем 0;
«Audio ID» активация аудиофайла;
«Name» название элемента;
«Data auto-uploading» автоматическая отправка данных в порт;
«Button effect» действие при нажатии;
«Page switching» переход на другую страницу при нажатии;
«VP» адрес переменной в которую будет производиться запись;»
Variable type» позволяет выбрать несколько вариантов типов переменных; В данной случае тип Int соответствующий тип полю «Data variables» установленному ранее для переменной по адресу 5000;
«Integer digits» количество цифр;
«Decimal digit» количество цифр после запятой;
«Show location» область клавиатуры в которую будет совершаться ввод данных;
«Show Colour» для выбора цвета цифры;
«Font ID» выбор шрифта, это поле оставляем 0;
«Font size» установка размера шрифта;
«Cursor color» цвет курсора при вводе, есть два варианта «White»(белый) и «Black»(черный);
«Display Method» режим отображения вводимой информации «Show *» ввод звездочками или «Direct display» ввод цифр;
«Keyboard location» расположение клавиатуры на данном фоне «Current page» или на другой странице «Other page»;
«Keyboard setting» настройка клавиатуры, после нажатия на кнопку откроется меню (изображения есть выше в галереи Настройка элемента «Variable data Input») в котором необходимо выбрать страницу с клавиатурой и выбрать второй фон, после чего нажать на кнопку «OK» откроется следующее меню в котором необходимы выделить область клавиатуры. Должны получиться координаты (значения могут +/- отличаться) x1 = 352, y1 = 121, x2 = 571, y2 = 461, после чего нажать «OK»;
«Current page» номер выбранной страницы с клавиатурой;
«Keyboard area» область выбранной клавиатуры;
«Show location» область отображения клавиатуры на текущей странице, устанавливаем значения x = 350, y = 130;
«Background transparency» прозрачность фона, выставляем 0;
«Enabling limits» область ввода значений с клавиатуры, устанавливаем от 0 до 999;
«Loading data when input» при установке галочки происходит ввод данных из переменной;
«Data address» адрес переменной для отображения при включении клавиатуры;
«Download data» установка цвета кодом в десятичном формате, не используем оставляем 0.
Область «Show location» заполняется после установки клавиатуры через настройку «Keyboard setting». При нажатии на кнопку «Set» возле пункта «Show location» в появившемся окне ставим галочку возле пункта «Displayed Keyboard» и ставим точку в правой точке поля где должен совершаться ввод(последнее изображение в галерее Настройка элемента «Variable data Input»).

атрибут data-icon список значений

Это к сожалению далеко не все. Помню использовал иконки человечика, чемоданчик, домик. а вот примеров найти не могу.

На сайте с 02.06.2010
11 марта 2014, 18:53

Вообще data-***** стандартного атрибута такого нет (ни у html5 и ни у jquery ). Вместо звездочек может использоваться что угодно — это все зависит от разработчика. Скорей всего список иконок в вашем случае зависит от используемого js-плагина. Вам нужно узнать через какой плагин вы выводили те иконки и после этого будет возможность найти нужный вам список..

На сайте с 28.06.2008
11 марта 2014, 18:55
Наверное что-то типо этого http://fontello.com/
На сайте с 02.06.2010
11 марта 2014, 19:02

На сайте с 28.06.2008
11 марта 2014, 19:02
Нашел — вот http://potapov.com.ua/library/50/ Можно прям иконки вставлять data-icon=»✈»
На сайте с 02.06.2010
11 марта 2014, 19:08

Скачивайте тот плагин с формой, там есть шрифты, заберите только их: http://tympanus.net/Tutorials/LoginRegistrationForm/LoginRegistrationForm.zip В CSS внесите эти строки, подправив верные пути до шрифтов от корня вашего проекта.

По идеи все. Теперь должны работать data-icon=»a-z и другие буквы», но не проверял))), спать уже иду. Удачи!:)

Источник: searchengines.guru

Используйте фавиконки правильно

Фавиконка (favicon) — это иконка, которая отображается во вкладке браузера перед названием страницы. Также эта иконка отображается в закладках и на рабочем столе для веб-приложений.

Фавиконка при установке веб-приложения Фавиконка на вкладке в браузере

Подключение

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

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

Обязательная фавиконка

Все — старые и новые — веб-серверы и браузеры поддерживают .ico-формат.

Для подключения нужно добавить в :

Обратите внимание на две детали: размер и расположение.

Размер. В интернете можно найти информацию, что нужно подключать фавиконку в формате .ico в размере 16×16. Это так и не так. Дело в том, что контейнер ico динамический и он может изменять размеры «на лету». Поэтому браузеры, которые понимают размер 16×16, сами сожмут 32×32 до необходимого. В каком случае нужно создавать favicon.ico в размере 16×16?

Когда фавиконка размером 32×32 при сжатии начнёт мылиться (будет нечёткой). Это можно проверить вручную, сжав фавиконку с 32×32 до 16×16. Если размыливание картинки произошло, то без дизайнера не обойтись и придётся отрисовывать фавиконку вручную в графическом редакторе.

Дополнительные необходимые фавиконки

Расположение. Только favicon.ico должна лежать в корне проекта. Остальные иконки могут лежать в любом месте в проекте, например:

project/ favicon.ico img/ 180.png 192.png 512.png icon.svg

Или можно сгруппировать все фавиконки, чтобы отделить от других изображений в проекте:

project/ favicon.ico img/ favicons/ 180.png 192.png 512.png icon.svg

SVG

Если современный веб-браузер умеет работать с векторными фавиконками, то этот формат более предпочтительный: меньший вес, наилучшее качество, поддерживает смену тем, не нужно указывать размер.

Подключение точно такое же, как и для favicon.ico, только нужно добавить тип, чтобы браузер понимал, с чем имеет дело:

Для устройств Apple

Apple пошли по другому сценарию развития и предложили собственные размеры фавиконок для своих устройств — iPhone и iPad. Формат для подключения favicon для Apple поддерживают все современные браузеры.

Самым востребованным размером для старых устройств фавиконок стал размер 180×180. Давайте посмотрим пример подключения:

Подключив такую иконку, мы также поддержим старые устройства, которые не умеют работать с таким большим размером фавиконки и уменьшать её до нужных размеров.

Устройства Apple работают и с большими размерами иконок, но так получилось, что устройства, которые понимают большие размеры, можно подключать более современным способом с помощью манифеста. Манифест позволит скрыть подключение всех размеров из , что сделает разметку более читаемой.

Манифест

Манифест — это JSON-файл со всеми подробностями веб-приложения для браузера. Формат был разработан Google по инициативе PWA.

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

Файл. Создадим файл в корне проекта и назовём его manifest.webmanifest. Расширение .webmanifest нужно указать, чтобы браузер понимал, с каким файлом имеет дело. Само название файла может быть любым (в нашем случае — manifest).

Так как манифест — это JSON-файл, то он должен начинаться с открывающей скобки < и заканчиваться закрывающей скобкой>.

manifest.webmanifest

Внутри скобок нужно создать секцию иконок. Секция с иконками ожидает несколько иконок, поэтому добавим массив []:

manifest.webmanifest

Осталось добавить фавиконки по шаблону:

manifest.webmanifest < «icons»: [ < «src»: «», «type»: «», «sizes»: «» >] >

Если иконок несколько, то их нужно добавить через запятую:

manifest.webmanifest < «icons»: [ < «src»: «», «type»: «», «sizes»: «» >, < «src»: «», «type»: «», «sizes»: «» >, < «src»: «», «type»: «», «sizes»: «» >] >

Размеры. В манифесте мы укажем размер 192×192 и 512×512. 192 — так как это следующий размер после 180, а 512 — так как это очень большой размер для фавиконки, его будет достаточно. А что с промежуточными разрешениями? Всё хорошо: как и раньше, браузер сожмёт картинку к нужному размеру.

Например, из 512 до 256.

manifest.webmanifest < «icons»: [ < «src»: «images/favicons/192.png», «type»: «image/png», «sizes»: «192×192» >, < «src»: «images/favicons/512.png», «type»: «image/png», «sizes»: «512×512» >] >

src — путь до иконки;
type — тип иконки;
sizes — размер иконки.

Можно добавить дополнительные размеры иконок, если этого требует браузерная поддержка вашего проекта. Например, вам потребовалась иконка 256×256. Давайте добавим её:

manifest.webmanifest < «icons»: [ < «src»: «images/favicons/192.png», «type»: «image/png», «sizes»: «192×192» >, < «src»: «images/favicons/256.png», «type»: «image/png», «sizes»: «256×256» >, < «src»: «images/favicons/512.png», «type»: «image/png», «sizes»: «512×512» >] >

Откуда брать фавиконки и как их приготовить

Фавиконки — это ответственность верстальщика. Дизайнеры в большинстве случаев про фавиконки не знают, поэтому не предоставляют их с макетами.

Если дизайнер не предоставил фавиконки, у верстальщика есть два пути:

Не добавлять фавиконки в проект.
Попросить дизайнера отрисовать фавиконку (лучше в векторном формате). Рассказать, что требуется отрисовать иконку в квадрате. Сама иконка может быть круглой или даже овальной, но изображение должно быть вписано в квадрат с пропорциями 1:1.

Векторный формат позволит растянуть фавиконку до нужных размеров (192, 256 и даже 512) без потери качества. Таким образом верстальщик сможет сгенерировать себе нужные размеры и подключить их к странице.

При генерации фавиконок с помощью сторонних сервисов всегда смотрите на получившийся результат. Чаще всего иконки получаются замыленными. Даже если брать хороший оригинал 512×512, то при уменьшении до 32×32 всё равно могут появиться артефакты.

Для генерации фавиконок используйте сервис favicon-generator: экспортируйте изображение фавиконки в формате PNG, добавьте это изображение в сервис генерации фавиконок, нажмите кнопку «Create favicon», а потом — ссылку «Download the generated favicon». Вы скачаете архив со всеми возможными вариантами фавиконок. Возьмите favicon.ico и другие необходимые версии, подключите к странице проекта.

Итог

Итоговый способ подключения фавиконки:

manifest.webmanifest

Таким способом мы будем поддерживать самые старые браузеры и самые новые.

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

Фавиконки — часть программы курса «HTML и CSS. Профессиональная вёрстка сайтов». Кроме этого в комплекте два месяца теории и практики, интересные проекты и личный наставник. А по промокоду SKUCHNO — скидка 1000 ₽.

Источник: habr.com

атрибут data-icon список значений

Используйте фавиконки правильно

Подключение

Обязательная фавиконка

Дополнительные необходимые фавиконки

SVG

Для устройств Apple

Манифест

Откуда брать фавиконки и как их приготовить

Итог

Для чего нужна программа компилятор

Программа смешанное белье для чего

Токси риск программа для чего

Программа аршин метрология для чего

Программа чек пфр для чего

Для чего предназначена программа стили

Для чего нужна программа тренажер

Для чего нужна программа apkpure