Дисплей для руководства пользователя

Практическая задача в LATEX по созданию настраиваемого дисплея при описании руководства пользователя
Tags:
Categories:

Примеры использования поисковых запросов POSIX

Постановка задачи

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

Дисплей имеет 22 знака в ширину и 7 строк.

disp1

Необходимо создать однострочную команду в Latex для удобного заполнения параметров дисплея и вывода графического изображения в любое место на странице документации.

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

  1. Дисплей должен отражать текстовые строки заглавными и строчными буквами латинского алфавита.
  2. На дисплее должны отображаться арабские цифры
  3. Графические элементы применяемые на дисплее:
    • аккумулятор
    • антенна
    • уровень сигнала
    • замок
    • линия под статусной строкой
    • линия середины экрана
  4. Типы строк дисплея:
    • строка с текстом выровненным по левому краю до 22 символов
    • строка подсвеченная прямоугольником с инвертированным цветом символов
    • строка с текстом выровненным по середине экрана
    • строка с текстом в две колонки
    • строка без текста
  5. Типы строк статусной строки
    • режим 1 с аккумулятором и антенной
    • режим 2 с аккумулятором
    • режим 3 текст
  6. Отдельный режим отображения средней линии на дисплее
  7. Режим вывода картинки в правой части дисплея
  8. Обозначение подсвеченных информационных кнопок в нижней части дисплея
  9. Информационный режим дисплея

Решение задачи

  1. Использование издательской системы Latex
  2. Загрузка специального графического пакета TIKZ
  3. Настройка графических примитивов с помощью библиотеки TIKZ для использования в строках
  4. Программирование Tex для создания простых команд для указания в строках дисплея выводимой информации
  5. Создание библиотеки с возможностью многократного использования дисплея в различных документах

Описание решения

\definecolor{disp}{HTML}{000041} % цвет дисплея
\definecolor{textdisp}{HTML}{f0ffff} %цвет текста дисплея

\tikzset{%настройки стиля шрифта для вывода символов на терминал дисплея
terminal/.style = {text=textdisp,inner sep=0pt, anchor=west,font=\fontfamily{cmtt}\fontsize{10}{10}\selectfont}}

Создание графических элементов

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%Аккумулятор
%%%%%%%%%%%%%
\tikzset{
accum/.pic={[font=\ttfamily]
\path (.5,.35) coordinate(acbl) ++(1,0) coordinate(acbr)
    ++(0,.6) coordinate(actr) ++(-1,0) coordinate(actl);
\draw[pic actions,thick] (acbl) -- (acbr) -- ($(acbr)!.2!(actr)$)-- ++(1pt,0) |- ($(acbr)!.8!(actr)$) -- (actr) -- (actl) -- cycle; 
\fill[pic actions] (acbl) rectangle ($(actl)!#1!(actr)$);
}
}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%Антенна
%%%%%%%%%%%%%
\tikzset{
antena/.pic={
 \path
    (0,.35) coordinate(anbot) ++(0,.6) coordinate(antop)
    +(-.3,0) coordinate(antl) +(.3,0) coordinate(antr);
\draw[pic actions,thick] (anbot) -- (antop) 
                 ($(anbot)!.5!(antop)$)--(antl)
                 ($(anbot)!.5!(antop)$)--(antr);
\path[pic actions] (anbot) ++(.4,.3) node[terminal]{100\%};
}
}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%Уровень сигнала
%%%%%%%%%%%%%
\tikzset{
lsignal/.pic={
\coordinate (a) at (.35,.35);
\draw[pic actions,thick] (a) foreach \x in {1,...,#1} {+(.\x,0) -- +(.\x,.\x)};
}
}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%замок LOCK
%%%%%%%%%%%
\tikzset{
lockc/.pic={
\path (0,.15) coordinate (bl) +(.4,0) coordinate (br) +(.4,.3) coordinate (tr) +(0,.3) coordinate (tl);
\draw[pic actions,thick,fill] (bl) rectangle (tr);
\draw[thick,out=90,in=90,distance=.3em] (tl) to (tr);
}
}

Настройка типов строк

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%активная строка
%%%%%%%%%%%%%
\tikzset{
araw/.pic={%отображает строку подсвеченной как активную без текста
 \path
    (.4,.2) coordinate(arbl) ++(11.6,0) coordinate(arbr)
    ++(0,.9) coordinate(artr) ++(-11.6,0) coordinate(artl);
\fill[white!95,opacity=.7] (arbl) rectangle (artr); 
},
arawp/.pic={%выводит текст без подсветки
 \path
    (0.4,.2) coordinate(arbl) ++(11.6,0) coordinate(arbr)
    ++(0,.9) coordinate(artr) ++(-11.6,0) coordinate(artl);
\node[terminal,text width=5.6em] at ($(arbl)!.5!(artl)$) {#1};%обычная строка
},
arawa/.pic={%выводит текст в активной строке
 \path
    (0.4,.2) coordinate(arbl) ++(11.6,0) coordinate(arbr)
    ++(0,.9) coordinate(artr) ++(-11.6,0) coordinate(artl);
\node[terminal,text width=5.6em,text=disp] at ($(arbl)!.5!(artl)$) {#1} [fill=white!95,opacity=.7] (arbl) rectangle (artr);%обычная строка
},
lbut/.pic={%выводит текст в левой функциональной кнопке в нижнем ряду
 \path
    (.4,.2) coordinate(arbl) ++(5.7,0) coordinate(arbr)
    ++(0,.9) coordinate(artr) ++(-5.7,0) coordinate(artl);
\node[terminal,text=disp,anchor=center] at ($(arbl)!.5!(artr)$) {#1} [fill=white!95,opacity=.7] (arbl) rectangle (artr) ;
},
rbut/.pic={%выводит текст в правой функциональной кнопке в нижнем ряду
 \path
    (6.3,.2) coordinate(arbl) ++(5.7,0) coordinate(arbr)
    ++(0,.9) coordinate(artr) ++(-5.7,0) coordinate(artl);
\node[terminal,text=disp,anchor=center] at ($(arbl)!.5!(artr)$) {#1} [fill=white!95,opacity=.7] (arbl) rectangle (artr) ;
},
rawc/.pic={%строка через весь дисплей с выделенной активностью и текстом по центру
 \path
    (.4,.2) coordinate(arbl) ++(11.6,0) coordinate(arbr)
    ++(0,.9) coordinate(artr) ++(-11.6,0) coordinate(artl);
\node[terminal,text=disp,anchor=center] at ($(arbl)!.5!(artr)$) {#1} [fill=white!95,opacity=.7] (arbl) rectangle (artr);
}
}

Оформление контура дисплея

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%Дисплей маленького экрана
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\tikzset{
display/.pic={%рамка для дисплея
\path[terminal] (0,.2) coordinate (dtl) ++(12.4,0) coordinate (dtr)  ++(0,-7.2) coordinate (dbr)  ++(-12.4,0) coordinate (dbl);
\draw[thick,gray!20,fill=disp,rounded corners] (dbl) rectangle (dtr);
}
}

Создание стилей строки статуса для различных режимов

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%Строка состояния пульта
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\tikzset{
pultmain/.pic={% режим 1 с произвольным текстом, часами и аккумулятором заголовок дисплея пульт на вход отправим text 
\path
    (0.4,.2) coordinate(arbl) ++(11.6,0) coordinate(arbr)
    ++(0,.9) coordinate(artr) ++(-11.6,0) coordinate(artl);
\path ($(arbl)!.5!(artl)$) node[terminal] {#1} +(4,0) node[terminal] {08:20:46};
\pic[textdisp] at (10.4,0) {accum=.4};
\draw[textdisp,thick] (arbl.south west)--(arbr.south east);
},
pultfree/.pic={%заголовок дисплея пульт на вход отправим свободную строку
\path
    (0.4,.2) coordinate(arbl) ++(11.6,0) coordinate(arbr)
    ++(0,.9) coordinate(artr) ++(-11.6,0) coordinate(artl);
\node[terminal,text width=10.5em] at ($(arbl)!.5!(artl)$) {#1};%обычная строка
\pic[textdisp] at (10.4,0) {accum=.4};%\fill[red](arbl.south west)circle (1pt);
\draw[textdisp,thick] (arbl.south west)--(arbr.south east);
},
priemfree/.pic={%заголовок дисплея приемника на вход отправим свободную строку
\path
    (0.4,.2) coordinate(arbl) ++(11.6,0) coordinate(arbr)
    ++(0,.9) coordinate(artr) ++(-11.6,0) coordinate(artl);
\pic[textdisp]{accum=.5};\pic[textdisp] at (9.4,0) {antena};
\draw[textdisp,thick] (arbl.south west)--(arbr.south east);
},
rawg/.pic={\node[terminal,text width=5.6em] {#1};%обычная строка
},
rawa/.pic={\pic{arow} node[terminal,text width=5.6em,text=disp] {#1};%активная строка
}
}

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%шаблон дисплея создаем команду \dispm с 8-ю входными параметрами
\def\dispm#1#2#3#4#5#6#7#8{
\begin{tikzpicture}[x=10pt,y=10pt,node distance=10pt]%установить масштаб отображения
\pic{display};%вывести фон дисплея
\pic at (0,-1) {#1};%строка состояния 
\pic at (0,-2) {#2};%вторая строка
\pic at (0,-3) {#3};%третья строка
\pic at (0,-4) {#4};%четвертая строка
\pic at (0,-5) {#5};%пятая строка
\pic at (0,-6) {#6};%шестая строка
\path (0,-7) pic{lbut=#7} pic{rbut=#8};%седьмая строка с кнопками состояния
\draw[textdisp,thick] (6.2,-.9) -- (6.2,-5.9);%линия по центру экрана вертикальная
\end{tikzpicture}
}

% \dispm
% {}%1-я строка значения входного параметра (pultmain=text priemfree, pultfree=TEXT)
% {}%2-я строка (arawa=TEXT - активная строка, )
% {}%3-я строка (arawp=TEXT - пассивная строка,)
% {}%4-я строка (rawc=TEXT - активная строка с текстом по центру)
% {}%5-я строка
% {}%6-я строка
% {}{}%нижние кнопки в 7-й строке
%

Пример

\dispm
{pultmain=ARM}%1-я строка (pultmain=ARM, pultmain=DISARM, priemfree, pultfree=TEXT)
{arawa=TEXT}%2-я строка (arawa=TEXT - активная строка, )
{arawp=TEXT}%3-я строка (arawp=TEXT - пассивная строка,)
{}%4-я строка (rawc=TEXT - активная строка с текстом по центру)
{}%5-я строка
{rawc=TEXT}%6-я строка
{MENU}{SERVICE}%нижние кнопки в 7-й строке

disp