%% Generated by Sphinx.
\def\sphinxdocclass{article}
\documentclass[a4paper,11pt,english]{sphinxhowto}
\ifdefined\pdfpxdimen
   \let\sphinxpxdimen\pdfpxdimen\else\newdimen\sphinxpxdimen
\fi \sphinxpxdimen=.75bp\relax
\ifdefined\pdfimageresolution
    \pdfimageresolution= \numexpr \dimexpr1in\relax/\sphinxpxdimen\relax
\fi
%% let collapsible pdf bookmarks panel have high depth per default
\PassOptionsToPackage{bookmarksdepth=5}{hyperref}

\PassOptionsToPackage{booktabs}{sphinx}
\PassOptionsToPackage{colorrows}{sphinx}

\PassOptionsToPackage{warn}{textcomp}
\usepackage[utf8]{inputenc}
\ifdefined\DeclareUnicodeCharacter
% support both utf8 and utf8x syntaxes
  \ifdefined\DeclareUnicodeCharacterAsOptional
    \def\sphinxDUC#1{\DeclareUnicodeCharacter{"#1}}
  \else
    \let\sphinxDUC\DeclareUnicodeCharacter
  \fi
  \sphinxDUC{00A0}{\nobreakspace}
  \sphinxDUC{2500}{\sphinxunichar{2500}}
  \sphinxDUC{2502}{\sphinxunichar{2502}}
  \sphinxDUC{2514}{\sphinxunichar{2514}}
  \sphinxDUC{251C}{\sphinxunichar{251C}}
  \sphinxDUC{2572}{\textbackslash}
\fi
\usepackage{cmap}
\usepackage[T1]{fontenc}
\usepackage{amsmath,amssymb,amstext}
\usepackage{babel}



\usepackage{tgtermes}
\usepackage{tgheros}
\renewcommand{\ttdefault}{txtt}



\usepackage[Bjarne]{fncychap}
\usepackage{sphinx}
\sphinxsetup{hmargin={0.7in,0.7in}, vmargin={1in,1in},         verbatimwithframe=true,         OuterLinkColor={rgb}{0,0,0.6},         InnerLinkColor={rgb}{0,0,0},         warningBorderColor={rgb}{0.8,0,0},         cautionBorderColor={rgb}{1,0.8,0},         TitleColor={rgb}{0,0,0}}
\fvset{fontsize=auto}
\usepackage{geometry}


% Include hyperref last.
\usepackage{hyperref}
% Fix anchor placement for figures with captions.
\usepackage{hypcap}% it must be loaded after hyperref.
% Set up styles of URL: it should be placed after hyperref.
\urlstyle{same}

\addto\captionsenglish{\renewcommand{\contentsname}{Contents}}

\usepackage{sphinxmessages}
\setcounter{tocdepth}{2}


        \usepackage{currfile}
        \usepackage[internal]{eso-pdm}

        \pdmProgram{ELT}
        \pdmProject{Cryo HMI Template}
        \pdmDocType{Manual (MAN)}
        \pdmDocDate{2024-08-01}

        \pdmDocId{ESO-000000}
        \pdmDocVersion{1}
        \pdmTitle{ ELT Cryo HMI Template User Manual }
        \pdmHeaderTitle{Cryo HMI Template}
        \pdmSignatureList{
                \pdmSignature{Owner}{Sagatowski, Jakob}
                \pdmSignature{Validated by WPM}{Kiekebusch, Mario}
                \pdmSignature{Approved by PM}{}
            }
        % Disable pagestyle changes as it breaks ESO PDM style
        \renewcommand{\pagestyle}[1]{}

        % Map the unicode U+2A2F character to a multiplication sign.
        \DeclareUnicodeCharacter{2A2F}{$\times$}
    

\title{Cryo HMI Template User Manual}
\date{Aug 25, 2026}
\release{1.1.0}
\author{Jakob Sagatowski}
\newcommand{\sphinxlogo}{\vbox{}}
\renewcommand{\releasename}{Release}
\makeindex
\begin{document}

\ifdefined\shorthandoff
  \ifnum\catcode`\=\string=\active\shorthandoff{=}\fi
  \ifnum\catcode`\"=\active\shorthandoff{"}\fi
\fi

\pagestyle{empty}

        \pdmmaketitle

        % Scope redefinition of clearpage to relax to avoid new pages for each
        \begingroup
        \let\clearpage\relax

        \section*{Release}
        This document corresponds to
        \sphinxhref{https://gitlab.eso.org/ifw/ifw-ll}{\texttt{CryoHmiTemplate}\footnote{\sphinxnolinkurl{https://gitlab.eso.org/ifw/ifw-ll}}} v1.1.0.

        \makeatletter
        \def\author{\@author}
        \makeatother

        \section*{Authors}
        \begin{tabularx}{\linewidth}{|p{0.25\linewidth}|X|}
        \hline
        \multicolumn{1}{|l|}{\textbf{Name}}\tbspa &
        \multicolumn{1}{l|}{\textbf{Affiliation}} \tbspb\\
        \hline
        \tbspa Jakob Sagatowski & ESO \tbspb\\
        \hline
        \end{tabularx}

        \section*{Change Record from previous Version}
        \begin{tabularx}{\linewidth}{|p{0.25\linewidth}|X|}
        \hline
        \multicolumn{1}{|l|}{\textbf{Affected Section(s)}}\tbspa &
        \multicolumn{1}{l|}{\textbf{Changes / Reason / Remarks}} \tbspb\\
        \hline
        %\tbspa \ref{\detokenize{docs/clients/config_tool:config-tool-operations}}
        %    & TODO: Indicate changes. \tbspb\\
        \tbspa TODO & TODO \tbspb\\
        \hline
        \end{tabularx}
        \pdmmakeauthors
        \pdmmakechangerecord

        % Restore \clearpage
        \endgroup
    
\pagestyle{plain}
\pagenumbering{arabic}\tableofcontents\newpage
\pagestyle{normal}
\phantomsection\label{\detokenize{index::doc}}


\sphinxstepscope


\section{Introduction}
\label{\detokenize{docs/000_introduction:introduction}}\label{\detokenize{docs/000_introduction:introduction-label}}\label{\detokenize{docs/000_introduction::doc}}
\sphinxAtStartPar
Cryo HMI Template is a template project offered to quick start the process of creating an
HMI/frontend for a Cryogenic PLC application.

\sphinxAtStartPar
This documents provides instructions on how The TwinCAT template HMI (from now on referred as
\sphinxstyleemphasis{TcHmiTemplate} or just \sphinxstyleemphasis{Template}) project works and what it consists of.


\subsection{Version history}
\label{\detokenize{docs/000_introduction:version-history}}

\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{Version history}\label{\detokenize{docs/000_introduction:id1}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Date
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Notes
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
2024\sphinxhyphen{}06\sphinxhyphen{}03
&
\sphinxAtStartPar
Initial release.
\\
\sphinxhline
\sphinxAtStartPar
2024\sphinxhyphen{}07\sphinxhyphen{}10
&
\begin{DUlineblock}{0em}
\item[] Added Cryo PLC example project (CryoPlcExampleProject) to replace the PDS PLC project.
\item[] Fixed bug in \sphinxcode{\sphinxupquote{UserControls/PumpUserControl.usercontrol}}, where listener for the state \sphinxcode{\sphinxupquote{STOPPING}} was never implemented.
\item[] Added user control \sphinxcode{\sphinxupquote{UserControls/SequenceControlFaceplate.usercontrol}} and associated resources. See chapter for the {\hyperref[\detokenize{docs/200_templateproject:template-sequencefaceplates-label}]{\sphinxcrossref{\DUrole{std,std-ref}{sequene faceplates}}}}.
\item[] Updated dependencies/requirements from projects; The ESO cryo framework 1.0.0 \(\rightarrow\) 1.0.1. The ESO cryo PLC library 0.0.2.10 \(\rightarrow\) 0.0.2.12.
\item[] Added \sphinxcode{\sphinxupquote{Pages/EvacuateSequence.content}}. Added \sphinxcode{\sphinxupquote{EvacuateSequence}} page identity to \sphinxcode{\sphinxupquote{PageIdentity}} datatype. See chapter {\hyperref[\detokenize{docs/200_templateproject:template-sequence-label}]{\sphinxcrossref{\DUrole{std,std-ref}{sequence}}}}.
\item[] Updated \sphinxcode{\sphinxupquote{Pages/CryogenicController.content}} by adding an instance of the \sphinxcode{\sphinxupquote{SequenceControlFaceplate.usercontrol}}.
\end{DUlineblock}
\\
\sphinxhline
\sphinxAtStartPar
2024\sphinxhyphen{}09\sphinxhyphen{}24
&
\begin{DUlineblock}{0em}
\item[] Fixed bug in the \sphinxcode{\sphinxupquote{UserControls/StirlingCoolerUserControl.usercontrol}} in where the state symbol was not updated according to the state of the cooler.
\item[] Added user control \sphinxcode{\sphinxupquote{UserControls/LakeshoreControllerUserControl.usercontrol}}. See chapter for the {\hyperref[\detokenize{docs/200_templateproject:template-lakeshoreuc-label}]{\sphinxcrossref{\DUrole{std,std-ref}{lakeshore controller user control}}}}.
\item[] Added faceplate \sphinxcode{\sphinxupquote{Faceplates/LakeshoreFaceplate.usercontrol}}. See chapter for the {\hyperref[\detokenize{docs/200_templateproject:template-lakeshorefaceplate-label}]{\sphinxcrossref{\DUrole{std,std-ref}{lakeshore faceplate}}}}.
\item[] Updated dependencies/requirements from projects; The ESO cryo PLC library 0.0.2.12 \(\rightarrow\) 0.0.2.16.
\item[] Updated \sphinxcode{\sphinxupquote{Pages/CryogenicController.content}} by adding an instance of the \sphinxcode{\sphinxupquote{LakeshoreControllerUserControl.usercontrol}} \& \sphinxcode{\sphinxupquote{Faceplates/LakeshoreFaceplate.usercontrol}}.
\item[] Changed behaviour of the filtering of event messages, so that when pressing the “Active Alarms” and “All Messages” buttons in the device faceplates also filter based on the instance name of the device and not only on the event class.
\item[] Added column in the event class to display the source/device name of all events.
\end{DUlineblock}
\\
\sphinxhline
\sphinxAtStartPar
2024\sphinxhyphen{}10\sphinxhyphen{}01
&
\begin{DUlineblock}{0em}
\item[] Added user access control for the following:
\item[] \sphinxhyphen{} Service tab faceplate (Engineering on/off). Only engineering group is allowed to turn engineering mode on. Engineering group + operation group can turn engineering mode off.
\item[] \sphinxhyphen{} Sequence control faceplate. The monitoring group is not allowed to press the “Start” + “Stop” buttons.
\item[] \sphinxhyphen{} No Alarm/Warning faceplate. The monitoring group is not allowed to press the “Confirm” button.
\item[] \sphinxhyphen{} Cooler On/Off faceplate. The monitoring group is not allowed to press the “On” + “Off” and the “Automatic” + “Manual” buttons.
\item[] \sphinxhyphen{} Pump On/Off faceplate. The monitoring group is not allowed to press the “On” + “Off” buttons and the “Automatic” + “Manual” buttons.
\item[] \sphinxhyphen{} Valve Open/Close faceplate. The monitoring group is not allowed to press the Open/Close buttons and the “Automatic” + “Manual” buttons.
\item[] Added new user “Observer” that is part of the group “Monitoring”.
\item[] Updated pump faceplate with one additional tab “Status”.
\item[] Added a “Go Back” button on the “Messages”\sphinxhyphen{}tab for all device faceplates. This gives the operator a possibility to go back to the previous page, which is useful if the operator quickly wants to go back to the page where he/she came from before showing the events in the event page. Note that this required:
\item[] \sphinxhyphen{} Additional internals symbols (LastVisitedPageIdentity, PreviouslyVisitedPageIdentity) and
\item[] \sphinxhyphen{} One global event listener (SelectedPageIdentity)
\end{DUlineblock}
\\
\sphinxhline
\sphinxAtStartPar
2024\sphinxhyphen{}10\sphinxhyphen{}08
&
\begin{DUlineblock}{0em}
\item[] Added heater user control.
\item[] Added heater faceplate.
\item[] Updated \sphinxcode{\sphinxupquote{CryogenicController.content}} to use the heater user control and the heater faceplate (through popups).
\end{DUlineblock}
\\
\sphinxhline
\sphinxAtStartPar
2024\sphinxhyphen{}10\sphinxhyphen{}31
&
\begin{DUlineblock}{0em}
\item[] Added faceplates for analog sensors (\sphinxcode{\sphinxupquote{PressureFaceplate.usercontrol}} \& \sphinxcode{\sphinxupquote{TemperatureFaceplate.usercontrol}}).
\item[] Added \sphinxcode{\sphinxupquote{PdsHeaterUserControl.usercontrol}} and \sphinxcode{\sphinxupquote{PdsHeaterFaceplate.usercontrol}}.
\item[] Splitted \sphinxcode{\sphinxupquote{AnalogSensorUserControl.usercontrol}} into two new separate ones, the \sphinxcode{\sphinxupquote{TemperatureUserControl.usercontrol}} and \sphinxcode{\sphinxupquote{PressureUserControl.usercontrol}}.
\item[] In \sphinxcode{\sphinxupquote{CryogenicController.content}}, replaced the five instances of the analog sensor control with three instances of \sphinxcode{\sphinxupquote{TemperatureUserControl.usercontrol}} and two instances of \sphinxcode{\sphinxupquote{PressureUserControl.usercontrol}}.
\item[] In \sphinxcode{\sphinxupquote{CryogenicController.content}}, made sure that all three temperature user controls have popups created if you click on them using the \sphinxcode{\sphinxupquote{TemperatureFaceplate.usercontrol}}, and both pressure user controls have popups created if you click on them using the \sphinxcode{\sphinxupquote{PressureFaceplate.usercontrol}}.
\item[] In \sphinxcode{\sphinxupquote{CryogenicController.content}}, replaced the three instances of \sphinxcode{\sphinxupquote{HeaterUserControl.usercontrol}} to \sphinxcode{\sphinxupquote{PdsHeaterUserControl.usercontrol}}.
\item[] In \sphinxcode{\sphinxupquote{CryogenicController.content}}, replaced the three instances of \sphinxcode{\sphinxupquote{HeaterFaceplate.usercontrol}} to \sphinxcode{\sphinxupquote{PdsHeaterFaceplate.usercontrol}}.
\item[] Updated dependencies/requirements from projects; The ESO cryo PLC library 0.0.2.12 \(\rightarrow\) 0.0.2.18 \& the ESO cryo PLC HMI gateway library 0.0.0.1 \(\rightarrow\) 1.0.0.0.
\end{DUlineblock}
\\
\sphinxhline
\sphinxAtStartPar
2025\sphinxhyphen{}02\sphinxhyphen{}04
&
\begin{DUlineblock}{0em}
\item[] Solved bug in ESO cryo PLC HMI gateway library where the requested mode (Auto or Manual) was not unset for the HMI gateway devices. The PLC HMI gateway library version is incremented to 1.0.0.1.
\end{DUlineblock}
\\
\sphinxhline
\sphinxAtStartPar
2025\sphinxhyphen{}12\sphinxhyphen{}05
&
\begin{DUlineblock}{0em}
\item[] Added CryoTcHmiTemplate and CryoFramework for HMI 14.x (TwinCAT 3.1.4026.x).
\item[] Added chapter for RFID tag support in CryoTcHmiTemplate
\end{DUlineblock}
\\
\sphinxhline
\sphinxAtStartPar
2026\sphinxhyphen{}01\sphinxhyphen{}28
&
\begin{DUlineblock}{0em}
\item[] Added note that JB.TcHmiDynamicPopup is available as NuGet package in ESO GitLab.
\item[] Added reference to pre\sphinxhyphen{}compiled version of the TcUiClientExtension
\end{DUlineblock}
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\subsection{Scope}
\label{\detokenize{docs/000_introduction:scope}}
\sphinxAtStartPar
This document is the user manual for Cryo HMI Template project. The intended audience
are ELT users, consortia developers or Cryogenic Engineers.

\sphinxAtStartPar
This Package is one of the deliverables for ESO Cryo Framework, which is composed by:
\begin{itemize}
\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Cryo Library}: PLC Library for standard ESO Cryogenic devices.

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Cryo HMI Framework Controls}: Collection of HMI Framework controls that will interface with
Cryo Library

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Cryo HMI Template Project}: Start\sphinxhyphen{}up project to create an HMI Application. The project comes
with a base project structure, UserControls and references to ESO libraries (this document).

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Cryo PLC Example Project}: PLC project used in conjunction with the Cryo HMI Template Project. There is no hardware (I/O) dependency for this project and as such it can be running locally on the desktop.

\end{itemize}


\subsection{Acronyms}
\label{\detokenize{docs/000_introduction:acronyms}}

\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\sphinxthistablewithvlinesstyle
\centering
\begin{tabulary}{\linewidth}[t]{|p{0.15\linewidth}|p{0.65\linewidth}|}
\sphinxtoprule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
\sphinxstylestrong{ELT}
&
\sphinxAtStartPar
Extremely Large Telescope
\\
\sphinxhline
\sphinxAtStartPar
\sphinxstylestrong{FB}
&
\sphinxAtStartPar
Function Block
\\
\sphinxhline
\sphinxAtStartPar
\sphinxstylestrong{GUI}
&
\sphinxAtStartPar
Graphical User Interface
\\
\sphinxhline
\sphinxAtStartPar
\sphinxstylestrong{HMI}
&
\sphinxAtStartPar
Human Machine Interface
\\
\sphinxhline
\sphinxAtStartPar
\sphinxstylestrong{IFW}
&
\sphinxAtStartPar
Instrument Framework
\\
\sphinxhline
\sphinxAtStartPar
\sphinxstylestrong{PLC}
&
\sphinxAtStartPar
Programmable Logic Controller
\\
\sphinxbottomrule
\end{tabulary}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}

\sphinxstepscope


\section{Quick Start}
\label{\detokenize{docs/100_quickstart:quick-start}}\label{\detokenize{docs/100_quickstart:quickstart-label}}\label{\detokenize{docs/100_quickstart::doc}}
\sphinxAtStartPar
The following section shows how to quick start a Cryo HMI Application project based on the template
project.

\begin{sphinxadmonition}{warning}{Warning:}
\sphinxAtStartPar
This manual assumes that the user has already knowledge of \sphinxhref{https://infosys.beckhoff.com/english.php?content=../content/1033/te2000\_tc3\_hmi\_engineering/index.html}{TE2000}%
\begin{footnote}[1]\sphinxAtStartFootnote
\sphinxnolinkurl{https://infosys.beckhoff.com/english.php?content=../content/1033/te2000\_tc3\_hmi\_engineering/index.html}
%
\end{footnote}
\end{sphinxadmonition}


\subsection{Prerequisites}
\label{\detokenize{docs/100_quickstart:prerequisites}}\label{\detokenize{docs/100_quickstart:quickstart-prerequisites-label}}
\sphinxAtStartPar
Installed software (TwinCAT \sphinxstylestrong{3.1.4024.x}):
\begin{itemize}
\item {} 
\sphinxAtStartPar
TwinCAT XAE 3.1.4024.n, where n \textgreater{} 25

\item {} 
\sphinxAtStartPar
\sphinxhref{https://www.beckhoff.com/en-en/products/automation/twincat/texxxx-twincat-3-engineering/te2000.html}{TwinCAT 3 HMI Engineering}%
\begin{footnote}[2]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.beckhoff.com/en-en/products/automation/twincat/texxxx-twincat-3-engineering/te2000.html}
%
\end{footnote} | TE2000: 1.12.760.59.

\item {} 
\sphinxAtStartPar
The ESO cryo framework (version 1.0.1 or later, NuGet package)

\item {} 
\sphinxAtStartPar
The ESO cryo PLC library (version 0.0.2.18 or later)

\item {} 
\sphinxAtStartPar
The ESO cryo PLC HMI gateway library (version 1.0.0.0 or later)

\end{itemize}

\sphinxAtStartPar
Installed software (TwinCAT \sphinxstylestrong{3.1.4026.x}):
\begin{itemize}
\item {} 
\sphinxAtStartPar
TwinCAT XAE 3.1.4026.n, where n \textgreater{} 0

\item {} 
\sphinxAtStartPar
\sphinxhref{https://www.beckhoff.com/en-en/products/automation/twincat/texxxx-twincat-3-engineering/te2000.html}{TwinCAT 3 HMI Engineering}%
\begin{footnote}[3]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.beckhoff.com/en-en/products/automation/twincat/texxxx-twincat-3-engineering/te2000.html}
%
\end{footnote} | TE2000: 14.x.

\item {} 
\sphinxAtStartPar
The ESO cryo framework (version 2.0.0 or later, NuGet package)

\item {} 
\sphinxAtStartPar
The ESO cryo PLC library (version 0.0.2.18 or later)

\item {} 
\sphinxAtStartPar
The ESO cryo PLC HMI gateway library (version 1.0.0.0 or later)

\end{itemize}

\sphinxAtStartPar
The TcHmiTemplate is a Beckhoff TwinCAT TE2000 project. It was developed using TE2000 version
\sphinxcode{\sphinxupquote{1.12.760.59}} (for TwinCAT \sphinxcode{\sphinxupquote{3.1.4024.x}}) and \sphinxcode{\sphinxupquote{14.3.436.1}} (for TwinCAT \sphinxcode{\sphinxupquote{3.1.4026.x}}).
It is highly recommended to use this version to open up the project to minimize
compability issues.
If this particular version is not available for download from Beckhoff’s
website, then the local Beckhoff support can provide the correct version.
For 14.x development, which relies on the TwinCAT package manager, the package list is available in the file \sphinxcode{\sphinxupquote{packages.xml}}
in the root of the \sphinxcode{\sphinxupquote{CryoHmiTemplate\_4026}}\sphinxhyphen{}folder.

\sphinxAtStartPar
The ESO Cryo Framework is a NuGet package. Your development environment needs to be able to find it,
which it can do through the:
\begin{itemize}
\item {} 
\sphinxAtStartPar
\sphinxstyleemphasis{TwinCAT HMI Customer} package source, which by default is \sphinxcode{\sphinxupquote{C:\textbackslash{}TwinCAT\textbackslash{}Functions\textbackslash{}TE2000\sphinxhyphen{}HMI\sphinxhyphen{}Engineering\textbackslash{}References}} (for HMI 1.12.x).

\item {} 
\sphinxAtStartPar
\sphinxstyleemphasis{Beckhoff Offline Packages} package source, which by default is \sphinxcode{\sphinxupquote{C:\textbackslash{}ProgramData\textbackslash{}Beckhoff\textbackslash{}NuGetPackages}} (for HMI 14.x).

\end{itemize}

\sphinxAtStartPar
The ESO cryo framework nuget package
(\sphinxcode{\sphinxupquote{CryoFramework.x.nupkg}}) needs to be copied to this folder.
The package version 1.x is for HMI 1.12.x and version 2.x is for HMI 14.x.

\sphinxAtStartPar
All other NuGet dependencies that the TcHmiTemplate needs are available through the NuGet.org
package source. The packages that are used and not pre\sphinxhyphen{}installed by default for TE2000 are:
\begin{itemize}
\item {} 
\sphinxAtStartPar
\sphinxhref{https://www.nuget.org/packages/Beckhoff.TwinCAT.HMI.EventLogger}{Beckhoff.TwinCAT.HMI.EventLogger}%
\begin{footnote}[4]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.nuget.org/packages/Beckhoff.TwinCAT.HMI.EventLogger}
%
\end{footnote}

\item {} 
\sphinxAtStartPar
\sphinxhref{https://www.nuget.org/packages/JB.TcHmiDynamicPopup}{JB.TcHmiDynamicPopup}%
\begin{footnote}[5]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.nuget.org/packages/JB.TcHmiDynamicPopup}
%
\end{footnote}

\end{itemize}

\sphinxAtStartPar
As both packages are public packages available through the \sphinxhref{https://www.nuget.org/}{NuGet.org}%
\begin{footnote}[6]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.nuget.org/}
%
\end{footnote}
package source, they can be automatically installed and no manual installation is necessary.


\subsection{Guidelines}
\label{\detokenize{docs/100_quickstart:guidelines}}\label{\detokenize{docs/100_quickstart:guidelines-label}}

\subsubsection{Updates to TcHmiTemplate}
\label{\detokenize{docs/100_quickstart:updates-to-tchmitemplate}}\label{\detokenize{docs/100_quickstart:guidelines-templateupdates-label}}
\sphinxAtStartPar
It can be safely assumed that there will be changes done to the TcHmiTemplate over the lifespan of
the project. One limitation of the TwinCAT HMI (as of now, this will change in a future version of
the TwinCAT HMI), is that it’s not possible to package the user controls (*.usercontrol) as NuGet
packages.

\sphinxAtStartPar
This is different with framework controls as these can be packaged (and versioned) using the
conventional NuGet package management, which makes upgrades of the controls easier. This means that
any new updates of user controls have to be manually managed.

\sphinxAtStartPar
If the parameters of an user control have been changed (either by new parameters being added, or by
existing parameters data definition being updated), the user controls would have to be manually
copied over to the users HMI project. If a change in the HMI gateway function block is made and the
equivalent user control is changed, it’s important to make sure that the mapping is refreshed in the
HMI project.

\sphinxAtStartPar
For example, if a data field is added to a gateway HMI function block, it will mean that the ADS
definition for that function block will be different than what is currently defined in the project.
This will have an impact on the user control, whose parameters will change. As such, if a change of
this type is made, it’s necessary to refresh the mappings of all HMI gateway function blocks, which
is accessible through \sphinxstylestrong{TwinCAT HMI} \(\rightarrow\) \sphinxstylestrong{Windows} \(\rightarrow\) \sphinxstylestrong{TwinCAT HMI Configuration} \(\rightarrow\)
\sphinxstylestrong{Server Symbols} \(\rightarrow\) \sphinxstylestrong{Mapped Symbols}.

\sphinxAtStartPar
Right\sphinxhyphen{}click on all the mismatched mappings (visible through a yellow exclamation mark on the symbol)
and select Refresh Mapping.

\begin{sphinxadmonition}{important}{Important:}
\sphinxAtStartPar
To facilitate upgrades between different versions of the TcHmiTemplate project, ESO
will make sure to include release notes between the different releases of the TcHmiTemplate so
that it’s clear what changes have been made to it.
\end{sphinxadmonition}


\subsubsection{Naming conventions}
\label{\detokenize{docs/100_quickstart:naming-conventions}}\label{\detokenize{docs/100_quickstart:quidelines-namingconventions-label}}
\sphinxAtStartPar
As every instance of every control’s identity is global in the TwinCAT HMI project namespace, it’s
important to give unique names to every object created in the TwinCAT HMI. The general naming
convention for all objects in the TwinCAT HMI is:

\begin{sphinxVerbatim}[commandchars=\\\{\}]
\PYG{o}{\PYGZlt{}}\PYG{n}{ContentName}\PYG{o}{\PYGZgt{}}\PYG{n}{\PYGZus{}}\PYG{o}{\PYGZlt{}}\PYG{n}{TypeOfControl}\PYG{o}{\PYGZgt{}}\PYG{n}{\PYGZus{}}\PYG{o}{\PYGZlt{}}\PYG{n}{UniqueName}\PYG{o}{\PYGZgt{}}
\end{sphinxVerbatim}

\sphinxAtStartPar
For example there is one instance of the PumpUserControl called
\sphinxcode{\sphinxupquote{CryogenicController\_PumpUserControl\_PVP}}. In other words, there is an instance of the user
control \sphinxcode{\sphinxupquote{PumpUserControl}} in the content page \sphinxcode{\sphinxupquote{CryogenicController}} having the name \sphinxcode{\sphinxupquote{PVP}}.

\sphinxAtStartPar
One example of how it could look like using the \sphinxstylestrong{document outline}:

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{UniqueNames}.png}
\caption{Example of several user controls in the CryogenicController content page.}\label{\detokenize{docs/100_quickstart:id3}}\end{figure}

\begin{sphinxadmonition}{important}{Important:}
\sphinxAtStartPar
Adhering to these rules will guarantee that every object will not have a name collision
with another object (in possibly another completely different content), and it will make sure
that every object has a clear and descriptive name (rather than the ambigous auto\sphinxhyphen{}generated name
by the TwinCAT HMI).
\end{sphinxadmonition}


\subsubsection{Whitelisting}
\label{\detokenize{docs/100_quickstart:whitelisting}}\label{\detokenize{docs/100_quickstart:quidelines-whitelisting-label}}
\sphinxAtStartPar
The TcHmiTemplate project has
\sphinxhref{https://infosys.beckhoff.com/english.php?content=../content/1033/te2000\_tc3\_hmi\_engineering/10740009611.html\&id=}{Whitelisting}%
\begin{footnote}[7]\sphinxAtStartFootnote
\sphinxnolinkurl{https://infosys.beckhoff.com/english.php?content=../content/1033/te2000\_tc3\_hmi\_engineering/10740009611.html\&id=}
%
\end{footnote}
enabled. With whitelisting, PLC symbols can be explicitly hidden or shown for use in the HMI. This
avoids that all the PLC\sphinxhyphen{}variables are visible for the TwinCAT HMI, and it also makes it clear in the
PLC\sphinxhyphen{}code which variables will be displayed in the HMI and which variables will be used to execute a
command.

\sphinxAtStartPar
For this to work, the variables that should be whitelisted need to be marked with at least one pragma.
There are mainly two pragmas in use in the PLC\sphinxhyphen{}code:

\begin{sphinxVerbatim}[commandchars=\\\{\}]
\PYG{p}{\PYGZob{}}\PYG{n}{attribute} \PYG{l+s+s1}{\PYGZsq{}}\PYG{l+s+s1}{TcHmiSymbol.Show}\PYG{l+s+s1}{\PYGZsq{}}\PYG{p}{\PYGZcb{}}
\end{sphinxVerbatim}

\sphinxAtStartPar
This will tell the HMI that the symbol should be accessible to the HMI. Additionaly to this, the
following pragma is also used:

\begin{sphinxVerbatim}[commandchars=\\\{\}]
\PYG{p}{\PYGZob{}}\PYG{n}{attribute} \PYG{l+s+s1}{\PYGZsq{}}\PYG{l+s+s1}{TcHmiSymbol.ReadOnly}\PYG{l+s+s1}{\PYGZsq{}}\PYG{p}{\PYGZcb{}}
\end{sphinxVerbatim}

\sphinxAtStartPar
This will tell the HMI that this variable can not be written to, and is a ReadOnly variable. This is
useful for cases where we want to indicate a value or status for something that we don’t want the
HMI to change, such as an analog value (such as a temperature). This pragma is not be used for
variables that require write access, such as variables to command the system to do something (such
as going to manual or automatic mode for a control).


\subsection{Project Setup}
\label{\detokenize{docs/100_quickstart:project-setup}}
\sphinxAtStartPar
Open up the TcHmiTemplate project by opening the file \sphinxtitleref{CryoHmiTemplate.sln} in the project root. If
necessary, rename the application as described in the section
{\hyperref[\detokenize{docs/100_quickstart:guidelines-usingtemplateproject-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Using Template Object}}}}.

\sphinxAtStartPar
Start the PLC application so that the TcHmiTemplate project has the associated variables available
to it. The default PLC\sphinxhyphen{}runtime settings (ADS) for the HMI project is to connect to the local
AmsNetId (127.0.0.1.1.1).

\sphinxAtStartPar
Next, either run the live\sphinxhyphen{}view (\sphinxstylestrong{TwinCAT HMI} \(\rightarrow\) \sphinxstylestrong{Windows} \(\rightarrow\) \sphinxstylestrong{TwinCAT HMI Live\sphinxhyphen{}View})
or by  installing a TwinCAT HMI server (TF2000) and publishing the HMI project (\sphinxstylestrong{TwinCAT HMI}
\(\rightarrow\) \sphinxstylestrong{Publish to TwinCAT HMI Server…}). The latter is recommended as it will give the full
functionality, including user management which is important especially for the function of the
maintenance mode.


\subsubsection{Using template project}
\label{\detokenize{docs/100_quickstart:using-template-project}}\label{\detokenize{docs/100_quickstart:guidelines-usingtemplateproject-label}}
\sphinxAtStartPar
The TcHmiTemplate project can be used either as\sphinxhyphen{}is or as an inspiration from where the various user
controls, JavaScript and examples can be copied from.

\sphinxAtStartPar
\sphinxstylestrong{If used as\sphinxhyphen{}is}, it can be renamed by renaming the solution and the TwinCAT HMI project directly
in the TcXaeShell. This is however not enough, as there is still one step that needs to be done
manually.

\sphinxAtStartPar
For example, let’s assume both the solution and the TwinCAT HMI\sphinxhyphen{}project is renamed like this:

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{RenameProject}.png}
\caption{Result after project is renamed.}\label{\detokenize{docs/100_quickstart:id4}}\end{figure}

\sphinxAtStartPar
In the root of the project however, there will still be a folder called \sphinxcode{\sphinxupquote{CryoHmiTemplate}}.  It
will be necessary to rename this appropriately, for example \sphinxcode{\sphinxupquote{MicadoHmi}}.

\sphinxAtStartPar
Now it will be necessary to open the \sphinxcode{\sphinxupquote{*.sln}}\sphinxhyphen{}file (in this case, the \sphinxcode{\sphinxupquote{MicadoHmi.sln}}). In there
a line like this will exist:

\begin{sphinxVerbatim}[commandchars=\\\{\}]
\PYG{n}{Project}\PYG{p}{(}\PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{\PYGZob{}}\PYG{l+s+s2}{FE7A1B72\PYGZhy{}C5B7\PYGZhy{}4D7C\PYGZhy{}BB7D\PYGZhy{}76384D4DE8E1\PYGZcb{}}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{)} \PYG{o}{=} \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{MicadoHmi}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{,} \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{CryoHmiTemplate}\PYG{l+s+s2}{\PYGZbs{}}\PYG{l+s+s2}{MicadoHmi.hmiproj}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{,} \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{\PYGZob{}}\PYG{l+s+s2}{4CD6F035\PYGZhy{}8A9F\PYGZhy{}42E8\PYGZhy{}9D15\PYGZhy{}1C7F369338F5\PYGZcb{}}\PYG{l+s+s2}{\PYGZdq{}}
\end{sphinxVerbatim}

\sphinxAtStartPar
The \sphinxcode{\sphinxupquote{CryoHmiTemplate\textbackslash{}}} will have to be replaced with \sphinxcode{\sphinxupquote{MicadoHmi\textbackslash{}}} or whatever the name of the folder is.

\sphinxAtStartPar
\sphinxstylestrong{If used as inspiration}, special care has to be taken to make sure all the data definitions and
mappings are also properly created. When linking a variable from the PLC to the HMI, the TwinCAT HMI
creates a mapping between the PLC\sphinxhyphen{}variable and a local name. Simply copying all objects (such as
contents) with their various event listeners will not automatically create these mappings, and they
have to be created manually.

\sphinxstepscope


\section{Template Project}
\label{\detokenize{docs/200_templateproject:template-project}}\label{\detokenize{docs/200_templateproject:template-label}}\label{\detokenize{docs/200_templateproject::doc}}
\sphinxAtStartPar
TcHmiTemplate allows for rapid development, it already provides to the user:
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-hmi-label}]{\sphinxcrossref{\DUrole{std,std-ref}{HMI Base Application}}}}: An HMI solutions already implemented.

\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-reusableelements-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Reusable Elements}}}}: The project comes bundled with a set
of UserControls that can be used, copied and/or extended.

\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-sequence-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Sequence}}}}: Included in the project there are controls to manage sequences.

\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-content-test-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Content test}}}}: If you need to fit a lot of content into a small screen, this chapter shows how to do it.

\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-rfid-label}]{\sphinxcrossref{\DUrole{std,std-ref}{RFID}}}}: If you want to use an RFID\sphinxhyphen{}tag as complement to username/password for logging into the system

\end{enumerate}


\subsection{HMI Base Application}
\label{\detokenize{docs/200_templateproject:hmi-base-application}}\label{\detokenize{docs/200_templateproject:template-hmi-label}}
\sphinxAtStartPar
TcHmiTemplate consists of the usual elements that every TE2000 project has (Server settings,
references, themes etc) and additionaly custom content.

\sphinxAtStartPar
The custom content included is:
\begin{itemize}
\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-hmilayout-label}]{\sphinxcrossref{\DUrole{std,std-ref}{HMI Layout}}}} default.

\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-navigation-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Navigation Header}}}} that can be extended.

\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-views-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Views}}}} for different screen resolutions.

\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-maintenancemode-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Maintenance Mode}}}} configuration.

\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-reusableelements-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Reusable Elements}}}} as UserControls.

\end{itemize}


\subsubsection{HMI Layout}
\label{\detokenize{docs/200_templateproject:hmi-layout}}\label{\detokenize{docs/200_templateproject:template-hmilayout-label}}
\sphinxAtStartPar
The standard layout for the HMI application, it is divided into three main parts:
\begin{itemize}
\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Navigation Bar}: Provides the element for navigating the different contents of the system, and
additionally a possibility to logout the current user. It’s described in more detail at the
{\hyperref[\detokenize{docs/200_templateproject:template-navigation-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Navigation Bar Section}}}}

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Main Content}: Main display area with the most screen estate, in where the content will change
depending on which navigation button is pressed.

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Status Bar}: Presents the current date/time, the currently logged\sphinxhyphen{}in user and the latest
created event.

\end{itemize}

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{ProjectLayout}.png}
\caption{Main layout concept for the HMI Base Application.}\label{\detokenize{docs/200_templateproject:id2}}\end{figure}


\subsubsection{Navigation}
\label{\detokenize{docs/200_templateproject:navigation}}\label{\detokenize{docs/200_templateproject:template-navigation-label}}
\sphinxAtStartPar
The main navigation content is the \sphinxcode{\sphinxupquote{Pages/Header.content}}. It consists of several
\sphinxcode{\sphinxupquote{UserControls/NavigationButton.usercontrol}}. To create a new page for content, first create the
page (content) itself. Next add a \sphinxcode{\sphinxupquote{NavigationButton}} to the \sphinxcode{\sphinxupquote{Header}}. The \sphinxcode{\sphinxupquote{NavigationButton}}
has three parameters:
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Identity}. This uniquely identifies a specific page that should be displayed when that
navigation element is selected. It is defined as a data types under \sphinxcode{\sphinxupquote{Project/PageIdentity}}
(available under \sphinxstylestrong{TwinCAT HMI Configuration} \(\rightarrow\) \sphinxstylestrong{Data types}). This data type is used
in an internal symbol named \sphinxcode{\sphinxupquote{SelectedPageIdentity}} in the project.

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Label}. This is the text label for the button. Add a text to the localization and use that
here.

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Icon}. This is the graphical symbol in the navigation element. This is a themed resource
(avaiable under \sphinxstylestrong{TwinCAT HMI Configuration} \(\rightarrow\) \sphinxstylestrong{Themes Resources}), using two different
icons, one black and one white, so that it works for both the light and dark theme.

\end{enumerate}

\sphinxAtStartPar
Once the navigation element has been added, it’s necessary to add the logic for switching the page
when the navigation button has been pressed. This is done in the \sphinxcode{\sphinxupquote{ControlCabinet.view}} and
\sphinxcode{\sphinxupquote{ControlRoom.view}}. In each one of them, there is a event\sphinxhyphen{}listener on \sphinxcode{\sphinxupquote{SelectedPageIdentity}}
that switches the content of the main region to the correct content. Add your page to this event
listener and make sure to do this for both views.


\subsubsection{Views}
\label{\detokenize{docs/200_templateproject:views}}\label{\detokenize{docs/200_templateproject:template-views-label}}
\sphinxAtStartPar
It’s assumed that the HMI will be running on primarily two different types of operator panels.
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
In the control cabinet

\item {} 
\sphinxAtStartPar
In a control room

\end{enumerate}

\sphinxAtStartPar
The first one is assumed to be a small low\sphinxhyphen{}resolution display (around 15 inches, 1024x768
resolution) mounted in or close to the electrical cabinet hosting the PLC. The second one would be
something in a control room where there is more space, and therefore the display will most likely be
larger and thus also the resolution. To have the flexibility to develop for both, the TcHmiTemplate
provides two views for this purpose.
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
\sphinxcode{\sphinxupquote{ControlCabinet.view}}

\item {} 
\sphinxAtStartPar
\sphinxcode{\sphinxupquote{ControlRoom.view}}

\end{enumerate}

\sphinxAtStartPar
The ControlCabinet view has been optimized for a resolution of 1024x768, while the ControlRoom view
can be used for anything higher than that. Even though the ControlCabinet view is optimized for a
resolution of 1024x768, it can be used for higher resolutions as well. In this case, the HMI will
simply be scaled to fit the screen. The disadvantage of this is that it’s not an optimal way to use
the screen estate on a high resolution display.

\sphinxAtStartPar
Using the ControlRoom view gives the option to maximize the usage of the available screen estate
which can be shown in this example.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{ControlCabinetView}.jpg}
\caption{\sphinxstylestrong{ControlCabinet View}, showing the system events}\label{\detokenize{docs/200_templateproject:id3}}\end{figure}

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{ControlRoomView}.jpg}
\caption{\sphinxstylestrong{ControlRoom View}, showing the system events}\label{\detokenize{docs/200_templateproject:id4}}\end{figure}

\sphinxAtStartPar
As can be seen, the ControlRoom view has much more space for the navigation elements (at the top),
the main content (in this case the events) and more space for the status bar (at the bottom).

\sphinxAtStartPar
The different views can be accessed from the client browser through adding \sphinxcode{\sphinxupquote{?View=\textless{}ViewName\textgreater{}}} to the
URL, in other words like this:
\begin{itemize}
\item {} 
\sphinxAtStartPar
\sphinxurl{https://127.0.0.1:1020/?View=ControlCabinet}

\item {} 
\sphinxAtStartPar
\sphinxurl{https://127.0.0.1:1020/?View=ControlRoom}

\end{itemize}

\sphinxAtStartPar
The advantage of this is that for the commisioned system it’s possible to make a shortcut to the web
browser that will autostart during boot of that system and include the correct view for that system.
So for example, assuming we would use Chrome (or better yet, the ungoogled chromium browser) and we
wanted to create a shortcut that autostarted when TwinCAT boots at full screen we could achieve this
by creating this shortcut:

\begin{sphinxVerbatim}[commandchars=\\\{\}]
chrome.exe\PYG{+w}{ }\PYGZhy{}\PYGZhy{}kiosk\PYG{+w}{ }https://localhost:1020?View\PYG{o}{=}ControlCabinet\PYG{+w}{ }\PYGZhy{}\PYGZhy{}incognito\PYG{+w}{ }\PYGZhy{}\PYGZhy{}disable\PYGZhy{}pinch\PYG{+w}{ }\PYGZhy{}\PYGZhy{}overscroll\PYGZhy{}historynavigation\PYG{o}{=}\PYG{l+m}{0}
\end{sphinxVerbatim}

\sphinxAtStartPar
This would fire up Chromium in so\sphinxhyphen{}called kiosk\sphinxhyphen{}mode (full\sphinxhyphen{}screen, not possible to minimize or close)
and using the ControlCabinet view. If we wanted to create another shortcut for other system (i.e.
for the control room of the telescope) we would simply replace the \sphinxcode{\sphinxupquote{ControlCabinet}} with
\sphinxcode{\sphinxupquote{ControlRoom}}.


\subsubsection{Maintenance mode}
\label{\detokenize{docs/200_templateproject:maintenance-mode}}\label{\detokenize{docs/200_templateproject:template-maintenancemode-label}}
\sphinxAtStartPar
If an operator at the instrument logs in into the system, we want to be sure that no\sphinxhyphen{}one else can
remotely control the instrument at the same time. As the TwinCAT HMI is based on web technology, it
is technically possible to have both a local operator and remote operator logged in into and
controlling the system at the same time. To solve this problem, the concept of a maintenance user
was created. The maintenance user should only be used at the instrument platform.

\sphinxAtStartPar
The idea is simple; when a maintenance user logs in, everyone else that is not a maintenance user
will get a popup that fills the whole screen:

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{MaintenanceUserLoggedIn}.jpg}
\caption{When in \sphinxstylestrong{Maintenance Mode} any other user gets this popup.}\label{\detokenize{docs/200_templateproject:id5}}\end{figure}

\sphinxAtStartPar
This will cover the whole screen and it’s not possible to click or interact with any other elements
in the HMI. The only thing that any other user can do is to click/press on the Logout button or wait
for the Maintenance user to \sphinxstylestrong{logout} (which if it happens, would make the popup go away
automatically).

\sphinxAtStartPar
This functionality is implemented in the following way:
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
An user with name \sphinxstylestrong{“Maintenance”} was added to the Users in the TwinCAT HMI configuration.

\item {} 
\sphinxAtStartPar
A boolean variable was added in the PLC program \sphinxcode{\sphinxupquote{MAIN.bMaintenanceUserLoggedIn}}.

\item {} 
\sphinxAtStartPar
A global event in the TwinCAT HMI was added that fires of when the HMI is initialized. This
consists of a small JavaScript that sets the PLC\sphinxhyphen{}variable to \sphinxstylestrong{TRUE} if the user that has logged
in is the Maintenance user.

\item {} 
\sphinxAtStartPar
A piece of JavaScript is added on the \sphinxcode{\sphinxupquote{.onPressed}}\sphinxhyphen{}event of the \sphinxstylestrong{Logout} button that sets the
PLC\sphinxhyphen{}variable to \sphinxcode{\sphinxupquote{FALSE}} if the user that logs out is the Maintenance user.

\item {} 
\sphinxAtStartPar
An user control \sphinxcode{\sphinxupquote{InMaintenanceModePopupUserControl.usercontrol}} was created which is the popup
that shows up on every user that is not maintenance (if maintenance user is logged in).

\item {} 
\sphinxAtStartPar
An instance of this user control is created in both the \sphinxcode{\sphinxupquote{ControlCabinet}} and \sphinxcode{\sphinxupquote{ControlRoom}}
views, and an event listener is added on them to show the popup if the PLC\sphinxhyphen{}variable is set to
true (but only if the user is not the maintenance user).

\end{enumerate}


\subsection{Reusable Elements}
\label{\detokenize{docs/200_templateproject:reusable-elements}}\label{\detokenize{docs/200_templateproject:template-reusableelements-label}}
\sphinxAtStartPar
TcHmiTemplate provides a set of content made to be used as
\sphinxhref{https://infosys.beckhoff.com/english.php?content=../content/1033/te2000\_tc3\_hmi\_engineering/3477219979.html}{TcHmi UserControls}%
\begin{footnote}[8]\sphinxAtStartFootnote
\sphinxnolinkurl{https://infosys.beckhoff.com/english.php?content=../content/1033/te2000\_tc3\_hmi\_engineering/3477219979.html}
%
\end{footnote}.
They are developed with direct compatibility with the PLC devices. The user controls consist of two
categories.
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-controls-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Controls}}}}

\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-faceplates-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Faceplates}}}}

\end{enumerate}


\subsubsection{Controls}
\label{\detokenize{docs/200_templateproject:controls}}\label{\detokenize{docs/200_templateproject:template-controls-label}}
\sphinxAtStartPar
The controls are wrappers around some of the controls of the CryoHmiFramework (NuGet package).
They’re implemented as user controls (\sphinxcode{\sphinxupquote{.usercontrol}}) in the HMI Project. They provide access to the
functionality of the framework controls by directly linking them to a PLC variable using the HMI
gateway function blocks, which are part of the \sphinxstylestrong{cryohmi library}. When the user control is linked
to a PLC\sphinxhyphen{}variable, it gets all the information it needs to display correctly.

\sphinxAtStartPar
For example, if an instance of the {\hyperref[\detokenize{docs/200_templateproject:template-pumpuc-label}]{\sphinxcrossref{\DUrole{std,std-ref}{PumpUserControl}}}} is created in the
HMI, with the unique identity \sphinxcode{\sphinxupquote{CryogenicController\_PumpUserControl\_PVP}}, it’s necessary to link
it a PLC\sphinxhyphen{}variable on the PLC. In the example below, an instance of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_PUMP}}
(available in the cryohmi library) named \sphinxcode{\sphinxupquote{hmi\_pump\_pvp}} has been created in the path
\sphinxcode{\sphinxupquote{MAIN.pds\_cryo\_ctrl}}.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{LinkBetweenUserControlAndPlc}.png}
\caption{Representation of PumpUserControl instance \sphinxcode{\sphinxupquote{CryogenicController\_PumpUserControl\_PVP}} binding
with the PLC device of type \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_PUMP}}.}\label{\detokenize{docs/200_templateproject:id6}}\end{figure}

\sphinxAtStartPar
The parameter \sphinxcode{\sphinxupquote{PumpHmiObject}} of the PumpUserControl is to be linked to the PLC\sphinxhyphen{}variable (through
the usual mapping in TwinCAT HMI).

\sphinxAtStartPar
On top of requiring an PLC\sphinxhyphen{}variable to be set as parameter, every user control has a few other
parameters that can be changed which are related to how the user control should be shown. This could
for example be direction and stroke thickness of the symbol.

\sphinxAtStartPar
To use a control, simply drag and drop one of the user controls (for example \sphinxcode{\sphinxupquote{PumpUserControl}} or
\sphinxcode{\sphinxupquote{ValveUserControl}}) into a content and set the parameters for it.


\paragraph{PumpUserControl}
\label{\detokenize{docs/200_templateproject:pumpusercontrol}}\label{\detokenize{docs/200_templateproject:template-pumpuc-label}}
\sphinxAtStartPar
Pump user control with all interfaces needed to be connected to an instance of the
\sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_PUMP}} function block in the HMI gateway library.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{PumpUserControl Interface Table}\label{\detokenize{docs/200_templateproject:id7}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
PumpHmiObject
&
\sphinxAtStartPar
To be linked to an instance of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_PUMP}} function block in the PLC project.
\\
\sphinxhline
\sphinxAtStartPar
SymbolType
&
\sphinxAtStartPar
See table “Pump interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Direction
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
SymbolMarginSize
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
StrokeThickness
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\paragraph{StirlingCoolerUserControl}
\label{\detokenize{docs/200_templateproject:stirlingcoolerusercontrol}}\label{\detokenize{docs/200_templateproject:template-stirlingcooleruc-label}}
\sphinxAtStartPar
Stirling cooler user control with all interfaces needed to be connected to an instance of the
\sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_COOLER}} function block in the HMI gateway library.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{StirlingCoolerUserControl Interface Table}\label{\detokenize{docs/200_templateproject:id8}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
StirlingCoolerHmiObject
&
\sphinxAtStartPar
To be linked to an instance of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_COOLER}} function block in the PLC project.
\\
\sphinxhline
\sphinxAtStartPar
Direction
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
SymbolMarginSize
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
StrokeThickness
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\paragraph{ValveUserControl}
\label{\detokenize{docs/200_templateproject:valveusercontrol}}\label{\detokenize{docs/200_templateproject:template-valveuc-label}}
\sphinxAtStartPar
Valve user control with all interfaces needed to be connected to an instance of the
\sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_VALVE}} function block in the HMI gateway library.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{ValveUserControl Interface Table}\label{\detokenize{docs/200_templateproject:id9}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
ValveHmiObject
&
\sphinxAtStartPar
To be linked to an instance of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_VALVE}} function block in the PLC project.
\\
\sphinxhline
\sphinxAtStartPar
SymbolType
&
\sphinxAtStartPar
See table “Valve interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Direction
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
SymbolMarginSize
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
StrokeThickness
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
ShowFeedback
&
\sphinxAtStartPar
See table “Valve interface Table” in document “Cryo HMI Framework Controls”
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\paragraph{LakeshoreControllerUserControl}
\label{\detokenize{docs/200_templateproject:lakeshorecontrollerusercontrol}}\label{\detokenize{docs/200_templateproject:template-lakeshoreuc-label}}
\sphinxAtStartPar
Lakeshore user control with all interfaces needed to be connected to an instance of the
\sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_LAKESHORE}} function block in the HMI gateway library.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{LakeshoreController Interface Table}\label{\detokenize{docs/200_templateproject:id10}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
LakeshoreControllerHmiObject
&
\sphinxAtStartPar
To be linked to an instance of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_LAKESHORE}} function block in the PLC project.
\\
\sphinxhline
\sphinxAtStartPar
Label
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
SymbolMarginSize
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
StrokeThickness
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\paragraph{AnalogSensorUserControl}
\label{\detokenize{docs/200_templateproject:analogsensorusercontrol}}\label{\detokenize{docs/200_templateproject:template-analogsensoruc-label}}
\sphinxAtStartPar
This is a wrapper for the \sphinxcode{\sphinxupquote{Analog Sensor framework control}}.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{AnalogSensorUserControl Interface Table}\label{\detokenize{docs/200_templateproject:id11}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
Value
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
DataValid
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Simulated
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Notation
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Decimals
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Signed
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Unit
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
UnitTextboxWidth
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\paragraph{HeaterUserControl}
\label{\detokenize{docs/200_templateproject:heaterusercontrol}}\label{\detokenize{docs/200_templateproject:template-heateruc-label}}
\sphinxAtStartPar
This is a wrapper for the \sphinxcode{\sphinxupquote{Heater framework control}}.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{HeaterUserControl Interface Table}\label{\detokenize{docs/200_templateproject:id12}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
HeaterHmiObject
&
\sphinxAtStartPar
To be linked to an instance of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_HEATER}} function block in the PLC project.
\\
\sphinxhline
\sphinxAtStartPar
Value
&
\sphinxAtStartPar
See table “Heater interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Direction
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
SymbolMarginSize
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
StrokeThickness
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
TextFontSize
&
\sphinxAtStartPar
See table “Heater interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\paragraph{PdsHeaterUserControl}
\label{\detokenize{docs/200_templateproject:pdsheaterusercontrol}}\label{\detokenize{docs/200_templateproject:template-pdsheateruc-label}}
\sphinxAtStartPar
This is a wrapper for the \sphinxcode{\sphinxupquote{Heater framework control}}, specifically done for the PDS application, which the PLC example project is based on.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{PdsHeaterUserControl Interface Table}\label{\detokenize{docs/200_templateproject:id13}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
HeaterHmiObject
&
\sphinxAtStartPar
To be linked to an instance of the \sphinxcode{\sphinxupquote{FB\_HMI\_PDS\_CRYO\_HEATER}} function block in the PLC project.
\\
\sphinxhline
\sphinxAtStartPar
Value
&
\sphinxAtStartPar
See table “Heater interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Direction
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
SymbolMarginSize
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
StrokeThickness
&
\sphinxAtStartPar
See table “Common Controls Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
TextFontSize
&
\sphinxAtStartPar
See table “Heater interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\paragraph{PressureUserControl}
\label{\detokenize{docs/200_templateproject:pressureusercontrol}}\label{\detokenize{docs/200_templateproject:template-pressureuc-label}}
\sphinxAtStartPar
This is a wrapper for the \sphinxcode{\sphinxupquote{Analog Sensor framework control}} specifically targeted for pressure values.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{PressureUserControl Interface Table}\label{\detokenize{docs/200_templateproject:id14}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
PressureHmiObject
&
\sphinxAtStartPar
To be linked to an instance of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_PRESSURE\_VOTE}} function block in the PLC project.
\\
\sphinxhline
\sphinxAtStartPar
Notation
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Decimals
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Signed
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
UnitTextboxWidth
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\paragraph{TemperatureUserControl}
\label{\detokenize{docs/200_templateproject:temperatureusercontrol}}
\sphinxAtStartPar
This is a wrapper for the \sphinxcode{\sphinxupquote{Analog Sensor framework control}} specifically targeted for temperature values.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{TemperatureUserControl Interface Table}\label{\detokenize{docs/200_templateproject:id15}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
PressureHmiObject
&
\sphinxAtStartPar
To be linked to an instance of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_TEMPERATURE}} function block in the PLC project.
\\
\sphinxhline
\sphinxAtStartPar
Notation
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Decimals
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
Signed
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxhline
\sphinxAtStartPar
UnitTextboxWidth
&
\sphinxAtStartPar
See table “Analog Sensor Control Interface Table” in document “Cryo HMI Framework Controls”.
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\subsubsection{Faceplates}
\label{\detokenize{docs/200_templateproject:faceplates}}\label{\detokenize{docs/200_templateproject:template-faceplates-label}}
\sphinxAtStartPar
Faceplates are user controls to show certain information related to a function.
There are two kinds of faceplates:
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-controlfaceplates-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Control faceplates}}}}

\item {} 
\sphinxAtStartPar
{\hyperref[\detokenize{docs/200_templateproject:template-sequencefaceplates-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Sequence faceplates}}}}

\end{enumerate}


\paragraph{Control faceplates}
\label{\detokenize{docs/200_templateproject:control-faceplates}}\label{\detokenize{docs/200_templateproject:template-controlfaceplates-label}}
\sphinxAtStartPar
The control faceplates are small popups that are shown when the user presses a control (such as a pump or a
valve). They provide additional information about a certain control and additionaly provide some
control functionality (such as ON/OFF, Engineering Mode ON/OFF). They’re implemented as user
controls (\sphinxcode{\sphinxupquote{.usercontrol}}) in the TwinCAT HMI.

\sphinxAtStartPar
The basic layout of a faceplate looks as follows:

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{FaceplateOperateTab}.png}
\caption{Faceplate example of a device named PVP. Currently on Tab \sphinxstylestrong{Operate}}\label{\detokenize{docs/200_templateproject:id16}}\end{figure}

\sphinxAtStartPar
Most faceplates have three tabs:
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
Operate

\item {} 
\sphinxAtStartPar
Messages

\item {} 
\sphinxAtStartPar
Service

\end{enumerate}

\sphinxAtStartPar
Additionally, some faceplates have a Status tab, to indicate device status.

\sphinxAtStartPar
The \sphinxstylestrong{Operate  Tab} is used to see the overall status of the device and a possibility to operate it.
From here it’s possible to control the device manually and see the current actuation status. It’s
also possible to switch the mode between automatic and manual for the device. The small square in
the upper left corner of the On and Off indicate what the setpoint for the automatic control is. In
the screenshot above, the automatic mode wants the pump to be off as the small square inside the Off
button is green. The Confirm button is used to confirm all alarms and warnings. Note that this will
only confirm the associated events in the event logger, and not clear them. Clearing can only be
done automatically (given that the conditions for clearing them are met).

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{FaceplateMessagesTab}.png}
\caption{Faceplate example of a device named PVP. Currently on Tab \sphinxstylestrong{Messages}}\label{\detokenize{docs/200_templateproject:id17}}\end{figure}

\sphinxAtStartPar
The \sphinxstylestrong{Messages Tab} is used to control what events for the device associated with the faceplate
should be displayed in the event tab. By clicking on the Active Alarms button, the event page will
be shown and only all events associated to that device that are not cleared (and thus active) will
be displayed. Clicking the All Messages button will show all messages related to this device,
including the ones that are cleared. Clicking the Reset button will show all events in the event
logger, in other words it will display all events and not just the ones related to this device.
Clicking the Go Back button will return you to the previously selected page, which is useful if you want to
be able to switch quickly between the event page and the page of where the faceplate was created.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{FaceplateServiceTab}.png}
\caption{Faceplate example of a device named PVP. Currently on Tab \sphinxstylestrong{Service}}\label{\detokenize{docs/200_templateproject:id18}}\end{figure}

\sphinxAtStartPar
The \sphinxstylestrong{Service Tab} is used to enter and exit engineering mode. Note that it’s only possible to
enter engineering mode if the device is in manual mode. Upon entering engineering mode, an orange
frame will indicate that the device is in engineering mode.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{FaceplateServiceTabEngineeringModeOn}.png}
\caption{Faceplate example of a device named PVP. The orange colored border signals that Engineering Mode
is activated}\label{\detokenize{docs/200_templateproject:id19}}\end{figure}

\sphinxAtStartPar
Note that this orange frame is not only visible in this tab but across the whole faceplate.
The Lakeshore controller faceplate does not have the service tab as it’s not possible to control the device.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{FaceplateOperateTabEngineeringMode}.png}
\caption{Faceplate example of a device named PVP. The orange colored border signals that Engineering Mode
is activated}\label{\detokenize{docs/200_templateproject:id20}}\end{figure}

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{FaceplateStatusTab}.png}
\caption{Faceplate example of a device named PVP. Currently on Tab \sphinxstylestrong{Status}}\label{\detokenize{docs/200_templateproject:id21}}\end{figure}

\sphinxAtStartPar
The \sphinxstylestrong{Status Tab} is used to show device status.
This is not available for all device faceplates.
This example is shown for the pump faceplate.

\sphinxAtStartPar
In the very same way as for the controls, a faceplate requires an equivalent function block in the
HMI to be linked to. For every user control that can be interacted with (such as pump, valve,
cooler, …) there is an equivalent faceplate user control.

\sphinxAtStartPar
To use a faceplate user control, it needs a context in where the contents of the user control should
be shown. This is achieved by displaying it in a popup, which is realized using the
\sphinxhref{https://www.nuget.org/packages/JB.TcHmiDynamicPopup}{JB.TcHmiDynamicPopup}%
\begin{footnote}[9]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.nuget.org/packages/JB.TcHmiDynamicPopup}
%
\end{footnote}.

\begin{sphinxadmonition}{important}{Important:}
\sphinxAtStartPar
If you’re using HMI version 14.x (TwinCAT 3.1.4026.x), you need to:
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
Download \sphinxstylestrong{JB.TcHmiDynamicPopup.\textless{}version\textgreater{}.nupkg} file from ESO GitLab

\item {} 
\sphinxAtStartPar
Check on XAE the current configured \sphinxstylestrong{Beckhoff offline packages} package folder. Go to  \sphinxstylestrong{Tools} \(\rightarrow\) \sphinxstylestrong{NuGet Package Manager} \(\rightarrow\) \sphinxstylestrong{Package Manager Settings} \(\rightarrow\) \sphinxstylestrong{Package Sources}. It is located at \sphinxcode{\sphinxupquote{C:\textbackslash{}ProgramData\textbackslash{}Beckhoff\textbackslash{}NuGetPackages}}.

\item {} 
\sphinxAtStartPar
Copy or move the downloaded file to \sphinxstylestrong{Beckhoff offline packages} folder.

\end{enumerate}
\end{sphinxadmonition}

\sphinxAtStartPar
The dynamic popup is instantiated when the user clicks on the user control, more precisely the \sphinxcode{\sphinxupquote{.onPressed()}}\sphinxhyphen{}event.
Here it’s necessary to create an instance of the DynamicPopup by drag\sphinxhyphen{}and\sphinxhyphen{}dropping the function
\sphinxcode{\sphinxupquote{CreatePopup()}} from the DynamicPopup category amongst the JavaScript functions.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{CreatePopup}.png}
\caption{Pop\sphinxhyphen{}Up configuration of \sphinxtitleref{onPressed()}\sphinxhyphen{}event.}\label{\detokenize{docs/200_templateproject:id22}}\end{figure}

\sphinxAtStartPar
What fields/parameters that are necessary to enter to create a popup is documented in the
\sphinxhref{https://www.nuget.org/packages/JB.TcHmiDynamicPopup}{official documentation}%
\begin{footnote}[10]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.nuget.org/packages/JB.TcHmiDynamicPopup}
%
\end{footnote} for the
TcHmiDynamicPopup, however we will clarify some things for the \sphinxcode{\sphinxupquote{targetFile}}\sphinxhyphen{}parameter. When
clicking on the three dots \sphinxcode{\sphinxupquote{...}} for the targetFile, it’s necessary to fill in the faceplate that
you want to be displayed and some additional parameters.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{TargetFileForDynamicPopup}.png}
\caption{\sphinxcode{\sphinxupquote{targetFiles}}\sphinxhyphen{}parameter editing.}\label{\detokenize{docs/200_templateproject:id23}}\end{figure}

\sphinxAtStartPar
The \sphinxcode{\sphinxupquote{PumpObject}} parameter is an instance of the HMI gateway function block (in this case, an
instance of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_PUMP}}). The \sphinxcode{\sphinxupquote{EventGrid}} parameter refers to the (only) instance of
the EventGrid control in your application. In the template, this is simply called
\sphinxcode{\sphinxupquote{Events\_TcHmiEventGrid}}. The drop\sphinxhyphen{}down menu should only show one of them and this is the one that
needs to be selected. The reason this is necessary to provide is because the faceplates provide a
filtering possibility for events, and thus need a handle to the event grid. The
\sphinxcode{\sphinxupquote{EventPageIdentity}} parameter is the value of the \sphinxcode{\sphinxupquote{PageIdentity}} internal symbol representing
the page for events. This is necessary to have as using the event filters in the face plate will
automatically open up the page of the events.


\subparagraph{CoolerFaceplate}
\label{\detokenize{docs/200_templateproject:coolerfaceplate}}\label{\detokenize{docs/200_templateproject:template-coolerfaceplate-label}}
\sphinxAtStartPar
This is a faceplate for the stirling cooler user control.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{CoolerFaceplate Interface Table}\label{\detokenize{docs/200_templateproject:id24}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
CoolerObject
&
\sphinxAtStartPar
Linked to an instance of the HMI gateway function block \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_COOLER}}.
\\
\sphinxhline
\sphinxAtStartPar
EventGrid
&
\sphinxAtStartPar
The reference to the instance of the \sphinxcode{\sphinxupquote{EventGrid}} control in the application
\\
\sphinxhline
\sphinxAtStartPar
EventPageIdentity
&
\sphinxAtStartPar
The value of the \sphinxcode{\sphinxupquote{PageIdentity}} internal symbol representing the page for events
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\subparagraph{PumpFaceplate}
\label{\detokenize{docs/200_templateproject:pumpfaceplate}}\label{\detokenize{docs/200_templateproject:template-pumpfaceplate-label}}
\sphinxAtStartPar
This is a faceplate for the pump user control.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{PumpFaceplate Interface Table}\label{\detokenize{docs/200_templateproject:id25}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
PumpObject
&
\sphinxAtStartPar
Linked to an instance of the HMI gateway function block \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_PUMP}}.
\\
\sphinxhline
\sphinxAtStartPar
EventGrid
&
\sphinxAtStartPar
The reference to the instance of the \sphinxcode{\sphinxupquote{EventGrid}} control in the application.
\\
\sphinxhline
\sphinxAtStartPar
EventPageIdentity
&
\sphinxAtStartPar
The value of the \sphinxcode{\sphinxupquote{PageIdentity}} internal symbol representing the page for events
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\subparagraph{ValveFaceplate}
\label{\detokenize{docs/200_templateproject:valvefaceplate}}\label{\detokenize{docs/200_templateproject:template-valvefaceplate-label}}
\sphinxAtStartPar
This is a faceplate for the valve user control.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{ValveFaceplate Interface Table}\label{\detokenize{docs/200_templateproject:id26}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
ValveObject
&
\sphinxAtStartPar
Linked to an instance of the HMI gateway function block \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_VALVE}}
\\
\sphinxhline
\sphinxAtStartPar
EventGrid
&
\sphinxAtStartPar
The reference to the instance of the \sphinxcode{\sphinxupquote{EventGrid}} control in the application.
\\
\sphinxhline
\sphinxAtStartPar
EventPageIdentity
&
\sphinxAtStartPar
The value of the \sphinxcode{\sphinxupquote{PageIdentity}} internal symbol representing the page for events
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\subparagraph{HeaterFaceplate}
\label{\detokenize{docs/200_templateproject:heaterfaceplate}}\label{\detokenize{docs/200_templateproject:template-heaterfaceplate-label}}
\sphinxAtStartPar
This is a faceplate for the heater user control.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{HeaterFaceplate Interface Table}\label{\detokenize{docs/200_templateproject:id27}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
HeaterObject
&
\sphinxAtStartPar
Linked to an instance of the HMI gateway function block \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_HEATER}}
\\
\sphinxhline
\sphinxAtStartPar
EventGrid
&
\sphinxAtStartPar
The reference to the instance of the \sphinxcode{\sphinxupquote{EventGrid}} control in the application.
\\
\sphinxhline
\sphinxAtStartPar
EventPageIdentity
&
\sphinxAtStartPar
The value of the \sphinxcode{\sphinxupquote{PageIdentity}} internal symbol representing the page for events
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\subparagraph{PdsHeaterFaceplate}
\label{\detokenize{docs/200_templateproject:pdsheaterfaceplate}}\label{\detokenize{docs/200_templateproject:template-pdsheaterfaceplate-label}}
\sphinxAtStartPar
This is a faceplate for the PDS heater user control, specifically done for the PDS application, which the PLC example project is based on.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{PdsHeaterFaceplate Interface Table}\label{\detokenize{docs/200_templateproject:id28}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
HeaterObject
&
\sphinxAtStartPar
Linked to an instance of the HMI gateway function block \sphinxcode{\sphinxupquote{FB\_HMI\_PDS\_CRYO\_HEATER}}
\\
\sphinxhline
\sphinxAtStartPar
EventGrid
&
\sphinxAtStartPar
The reference to the instance of the \sphinxcode{\sphinxupquote{EventGrid}} control in the application.
\\
\sphinxhline
\sphinxAtStartPar
EventPageIdentity
&
\sphinxAtStartPar
The value of the \sphinxcode{\sphinxupquote{PageIdentity}} internal symbol representing the page for events
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}


\subparagraph{LakeshoreFaceplate}
\label{\detokenize{docs/200_templateproject:lakeshorefaceplate}}\label{\detokenize{docs/200_templateproject:template-lakeshorefaceplate-label}}
\sphinxAtStartPar
This is a faceplate for the lakeshore controller user control.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{LakeshoreFaceplate Interface Table}\label{\detokenize{docs/200_templateproject:id29}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
LakeshoreObject
&
\sphinxAtStartPar
Linked to an instance of the HMI gateway function block \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_LAKESHORE}}
\\
\sphinxhline
\sphinxAtStartPar
EventGrid
&
\sphinxAtStartPar
The reference to the instance of the \sphinxcode{\sphinxupquote{EventGrid}} control in the application.
\\
\sphinxhline
\sphinxAtStartPar
EventPageIdentity
&
\sphinxAtStartPar
The value of the \sphinxcode{\sphinxupquote{PageIdentity}} internal symbol representing the page for events
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}

\sphinxAtStartPar
The lakeshore faceplate looks slightly different than the standard faceplate described above.
It doesn’t have the service tab as it’s not possible to control the lakeshore controller from the HMI.
Because of this the operate tab looks slightly different as it doesn’t have the usual controls for power
on/off and switching between automatic and manual control.
It also provides status information from the device.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{FaceplateLakeshore}.png}
\caption{Faceplate example of a Lakeshore controlled named LS336.}\label{\detokenize{docs/200_templateproject:id30}}\end{figure}


\subparagraph{PressureFaceplate}
\label{\detokenize{docs/200_templateproject:pressurefaceplate}}\label{\detokenize{docs/200_templateproject:template-pressurefaceplate-label}}
\sphinxAtStartPar
This is a faceplate for the pressure user control.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{PressureFaceplate Interface Table}\label{\detokenize{docs/200_templateproject:id31}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
PressureObject
&
\sphinxAtStartPar
Linked to an instance of the HMI gateway function block \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_PRESSURE\_VOTE}}
\\
\sphinxhline
\sphinxAtStartPar
EventGrid
&
\sphinxAtStartPar
The reference to the instance of the \sphinxcode{\sphinxupquote{EventGrid}} control in the application.
\\
\sphinxhline
\sphinxAtStartPar
EventPageIdentity
&
\sphinxAtStartPar
The value of the \sphinxcode{\sphinxupquote{PageIdentity}} internal symbol representing the page for events
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}

\sphinxAtStartPar
The pressure faceplate looks slightly different than the standard faceplate.
It provides the pressure value based on the vote functionality of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_PRESSURE\_VOTE}}.
Additionally, it provides the sensor diagnostics for each individual pressure sensor (up to five).
Note that it only displays the pressure diagnostics of the sensors that are actually configured, i.e. sensors that are not configured will not be displayed.
The faceplate gives a possibility to simulate the pressure, i.e. override the actual pressure data.
This is achieved by entering the simulated pressure in the “Pressure Simulated”\sphinxhyphen{}textbox and by pressing the “Simulation ON”\sphinxhyphen{}button.
To go back to the real pressure vote data, this is achieved by pressing the “Simulation OFF”\sphinxhyphen{}button.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{PressureFaceplate}.png}
\caption{Faceplate example of a pressure vote named VAGC, in non\sphinxhyphen{}simulated mode}\label{\detokenize{docs/200_templateproject:id32}}\end{figure}


\subparagraph{TemperatureFaceplate}
\label{\detokenize{docs/200_templateproject:temperaturefaceplate}}\label{\detokenize{docs/200_templateproject:template-temperaturefaceplate-label}}
\sphinxAtStartPar
This is a faceplate for the temperature user control.


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{TemperatureFaceplate Interface Table}\label{\detokenize{docs/200_templateproject:id33}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
TemperatureObject
&
\sphinxAtStartPar
Linked to an instance of the HMI gateway function block \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_TEMPERATURE}}
\\
\sphinxhline
\sphinxAtStartPar
EventGrid
&
\sphinxAtStartPar
The reference to the instance of the \sphinxcode{\sphinxupquote{EventGrid}} control in the application.
\\
\sphinxhline
\sphinxAtStartPar
EventPageIdentity
&
\sphinxAtStartPar
The value of the \sphinxcode{\sphinxupquote{PageIdentity}} internal symbol representing the page for events
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}

\sphinxAtStartPar
The temperature faceplate looks slightly different than the standard faceplate.
It provides the temperature value based on the functionality of the \sphinxcode{\sphinxupquote{FB\_HMI\_CRYO\_TEMPERATURE}}.
Additionally, it provides the sensor diagnostics for each individual temperature sensor (always two).
The faceplate gives a possibility to simulate the temperature, i.e. override the actual temperature data.
This is achieved by entering the simulated temperature in the “Temperature Simulated”\sphinxhyphen{}textbox and by pressing the “Simulation ON”\sphinxhyphen{}button.
To go back to the real temperature data, this is achieved by pressing the “Simulation OFF”\sphinxhyphen{}button.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{TemperatureFaceplate}.png}
\caption{Faceplate example of a temperature named DETIF, in simulated mode}\label{\detokenize{docs/200_templateproject:id34}}\end{figure}


\paragraph{Sequence faceplates}
\label{\detokenize{docs/200_templateproject:sequence-faceplates}}\label{\detokenize{docs/200_templateproject:template-sequencefaceplates-label}}
\sphinxAtStartPar
The sequence faceplate is used to give basic control of a sequence.
It’s implemented as an user control and can be dragged and dropped into any content.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{SequenceFaceplate}.png}
\caption{The \sphinxcode{\sphinxupquote{SequenceFaceplate.usercontrol}}}\label{\detokenize{docs/200_templateproject:id35}}\label{\detokenize{docs/200_templateproject:template-sequencefaceplates-figureone-label}}\end{figure}

\sphinxAtStartPar
When pressing the start or stop\sphinxhyphen{}button, the following is overlayed.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{SequenceFaceplateConfirmStart}.png}
\caption{Example: Confirm start of evacuation sequence}\label{\detokenize{docs/200_templateproject:id36}}\label{\detokenize{docs/200_templateproject:template-sequencefaceplates-figuretwo-label}}\end{figure}

\sphinxAtStartPar
Only after pressing \sphinxstylestrong{OK} is the start/stop command executed.
Pressing \sphinxstylestrong{CANCEL} will mean the start/stop command is not executed, and the faceplate is presented again.
The purpose of this overlay is so that the operator doesn’t accidentally stop/start a sequence but has to confirm the action first.

\sphinxAtStartPar
The user control consists of the following elements:
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
\sphinxstylestrong{The title}. The title of the faceplate. Should describe what the sequence does.

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{The status}. Shows the current status of the sequence. This is a longer textual description of what the sequence is currently doing.

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Start \& Stop buttons}. Allows the operator to start or stop the sequence.

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Permit Start \& Stop indicators}. Shows whether it’s possible to start or stop a sequence.

\item {} 
\sphinxAtStartPar
\sphinxstylestrong{Detailed sequence information}. Pressing this button will show a flowchart of the sequence.

\end{enumerate}

\sphinxAtStartPar
When creating an instance of the sequence faceplate, the following parameters are available:


\begin{savenotes}\sphinxattablestart
\sphinxthistablewithglobalstyle
\centering
\sphinxcapstartof{table}
\sphinxthecaptionisattop
\sphinxcaption{SequenceFaceplate Interface Table}\label{\detokenize{docs/200_templateproject:id37}}
\sphinxaftertopcaption
\begin{tabular}[t]{\X{20}{100}\X{80}{100}}
\sphinxtoprule
\sphinxstyletheadfamily 
\sphinxAtStartPar
Parameter
&\sphinxstyletheadfamily 
\sphinxAtStartPar
Description
\\
\sphinxmidrule
\sphinxtableatstartofbodyhook
\sphinxAtStartPar
Title
&
\sphinxAtStartPar
The title in the faceplate. Represents (1) in the {\hyperref[\detokenize{docs/200_templateproject:template-sequencefaceplates-figureone-label}]{\sphinxcrossref{\DUrole{std,std-ref}{figure above}}}}.
\\
\sphinxhline
\sphinxAtStartPar
SequenceStateText
&
\sphinxAtStartPar
The string that represents (2) in the {\hyperref[\detokenize{docs/200_templateproject:template-sequencefaceplates-figureone-label}]{\sphinxcrossref{\DUrole{std,std-ref}{figure above}}}}. Linked to a string variable.
\\
\sphinxhline
\sphinxAtStartPar
StartStopSequence
&
\sphinxAtStartPar
The boolean variable to toggle the start/enable (\sphinxcode{\sphinxupquote{true}}) or stop/disable (\sphinxcode{\sphinxupquote{false}}) of the sequence.
\\
\sphinxhline
\sphinxAtStartPar
SequencePageIdentity
&
\sphinxAtStartPar
The value of the \sphinxcode{\sphinxupquote{PageIdentity}} internal symbol representing the page for the sequence.
\\
\sphinxhline
\sphinxAtStartPar
ShowSequenceButton
&
\sphinxAtStartPar
Set to true if sequence button should be visible, otherwise set to false. Useful for example if you want to be able to show the sequence faceplate on the actual sequence page (like for example the \sphinxcode{\sphinxupquote{EvacuateSequence.content}}) for controlling the sequence (stop/start) but don’t want that the sequence button to be visible.
\\
\sphinxbottomrule
\end{tabular}
\sphinxtableafterendhook\par
\sphinxattableend\end{savenotes}

\sphinxAtStartPar
For the button (5) to work in the {\hyperref[\detokenize{docs/200_templateproject:template-sequencefaceplates-figureone-label}]{\sphinxcrossref{\DUrole{std,std-ref}{figure above}}}}, it’s necessary to:
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
Create a {\hyperref[\detokenize{docs/200_templateproject:template-sequence-label}]{\sphinxcrossref{\DUrole{std,std-ref}{separate content\sphinxhyphen{}page}}}} where the detailed sequence will be shown.

\item {} 
\sphinxAtStartPar
Add that page as a value in the \sphinxcode{\sphinxupquote{PageIdentity}} data type (available under \sphinxstylestrong{TwinCAT HMI Configuration} \(\rightarrow\) \sphinxstylestrong{Data types}).

\item {} 
\sphinxAtStartPar
Set the parameter \sphinxcode{\sphinxupquote{SequencePageIdentity}} of the instance of the \sphinxcode{\sphinxupquote{SequenceFaceplate.usercontrol}} to the new value created in the previous step.

\item {} 
\sphinxAtStartPar
Open up the \sphinxcode{\sphinxupquote{ControlCabinet.view}}, locate the \sphinxcode{\sphinxupquote{TcHmiRegion}} with identity \sphinxcode{\sphinxupquote{ControlCabinet\_TcHmiRegion\_Main}}, go to the custom event listener \sphinxcode{\sphinxupquote{SelectedPageIdentity}} and add the new content to the switch\sphinxhyphen{}case. If the \sphinxcode{\sphinxupquote{ControlRoom.view}} is used, do the same for it.

\end{enumerate}

\sphinxAtStartPar
By doing these steps, the button {\hyperref[\detokenize{docs/200_templateproject:template-sequencefaceplates-figureone-label}]{\sphinxcrossref{\DUrole{std,std-ref}{(5)}}}} will display the new content\sphinxhyphen{}page when it’s pressed.


\subsection{Sequence}
\label{\detokenize{docs/200_templateproject:sequence}}\label{\detokenize{docs/200_templateproject:template-sequence-label}}
\sphinxAtStartPar
The details of how sequences work are described in the chapter \sphinxstylestrong{Sequences} of the Cryo HMI framework documentation.
This chapter will focus on the usage of the sequences in the actual HMI application.

\sphinxAtStartPar
When using the {\hyperref[\detokenize{docs/200_templateproject:template-sequencefaceplates-label}]{\sphinxcrossref{\DUrole{std,std-ref}{sequence faceplate}}}}, for the button (5) to work in the {\hyperref[\detokenize{docs/200_templateproject:template-sequencefaceplates-figureone-label}]{\sphinxcrossref{\DUrole{std,std-ref}{figure above}}}} it’s necessary to create a separate content page where the detailed sequence will be displayed in.
The \sphinxcode{\sphinxupquote{EvacuateSequence.content}} is the example for this in the TcHmiTemplate project.
This is a standard TwinCAT HMI content page.
To get a fully working sequence, it’s necessary to add the following to the content:
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
An instance of \sphinxcode{\sphinxupquote{TcHmi.Controls.CryoFramework.SequenceContainer}} from the Cryo HMI Framework. The \sphinxcode{\sphinxupquote{SequenceContainer}} needs to be linked to the sequence in the PLC through an instance of the \sphinxcode{\sphinxupquote{T\_CRYO\_HMI\_SEQUENCE\_STAT}} struct, in terms instantiated through creating an instance of the \sphinxcode{\sphinxupquote{FB\_CRYO\_HMI\_SEQUENCE}} function block.

\item {} 
\sphinxAtStartPar
A combination of \sphinxcode{\sphinxupquote{TcHmi.Controls.CryoFramework.Process}}, \sphinxcode{\sphinxupquote{TcHmi.Controls.CryoFramework.Decision}} and \sphinxcode{\sphinxupquote{TcHmi.Controls.CryoFramework.Terminator}} to define the sequence. These have to be put inside the \sphinxcode{\sphinxupquote{SequenceContainer}}, and assigned an unique \sphinxcode{\sphinxupquote{BlockId}} (parameter \sphinxcode{\sphinxupquote{State}} \(\rightarrow\) \sphinxcode{\sphinxupquote{BlockId}}) representing their location in the array \sphinxcode{\sphinxupquote{arSequence}} located in \sphinxcode{\sphinxupquote{T\_CRYO\_HMI\_SEQUENCE\_STAT}}. Make sure all elements are located in the \sphinxcode{\sphinxupquote{SequenceContainer}} by using the document outline (\sphinxcode{\sphinxupquote{TwinCAT HMI}} \(\rightarrow\) \sphinxcode{\sphinxupquote{Windows}} \(\rightarrow\) \sphinxcode{\sphinxupquote{TwinCAT HMI Document Outline}}) and checking that all elements are sub\sphinxhyphen{}nodes under the \sphinxcode{\sphinxupquote{SequenceContainer}}.

\end{enumerate}

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{SequenceContainerDocumentOutline}.png}
\caption{TwinCAT HMI document outline: Sequence Container}\label{\detokenize{docs/200_templateproject:id38}}\end{figure}

\sphinxAtStartPar
The \sphinxcode{\sphinxupquote{SequenceContainer}} example in the TcHmiExample project is linked to an instance of \sphinxcode{\sphinxupquote{T\_CRYO\_HMI\_SEQUENCE\_STAT}} with the symbolic name \sphinxcode{\sphinxupquote{PLC1.MAIN.pds\_cryo\_ctrl.evac.hmi\_sequence.stat}}:

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{SequenceContainerLinking}.png}
\caption{TwinCAT HMI document outline: Sequence Container linking}\label{\detokenize{docs/200_templateproject:id39}}\end{figure}

\sphinxAtStartPar
Every \sphinxcode{\sphinxupquote{Process}}, \sphinxcode{\sphinxupquote{Decision}} and \sphinxcode{\sphinxupquote{Terminator}} has to have an unique \sphinxcode{\sphinxupquote{BlockId}} number, equivalent to the number that is used to define that particular step in the sequence in the PLC\sphinxhyphen{}code.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{SequenceContainerNode}.png}
\caption{Sequence Container Node: BlockId linking}\label{\detokenize{docs/200_templateproject:id40}}\end{figure}


\subsection{Content test}
\label{\detokenize{docs/200_templateproject:content-test}}\label{\detokenize{docs/200_templateproject:template-content-test-label}}
\sphinxAtStartPar
When running the HMI on a small screen size (such as a 15”), there might be situations where there is not enough space on the screen to fit all the controls for a system.
To demonstrate one way for a work\sphinxhyphen{}around there is a page called “Content test” in the template, which demonstrates the utilization of the screen in such a way that more content can be presented.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{ContentTest_ControlCabinet}.png}
\caption{Content test: Control cabinet}\label{\detokenize{docs/200_templateproject:id41}}\end{figure}

\sphinxAtStartPar
By clicking on any of the green, blue or black areas of the page, a user control is shown with more details for that area of the system.
In this way it’s possible to utilize the full screen for a part of the system.

\sphinxAtStartPar
In situations where there is more space available (such as on a typical office monitor), the ControlRoom\sphinxhyphen{}view is used in where all the content is displayed in one page without the need for a “zoom\sphinxhyphen{}in” view.
See {\hyperref[\detokenize{docs/200_templateproject:template-views-label}]{\sphinxcrossref{\DUrole{std,std-ref}{Views}}}} for more information about the two available views and how to switch between them.

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{ContentTest_ControlRoom}.png}
\caption{Content test: Control room}\label{\detokenize{docs/200_templateproject:id42}}\end{figure}

\sphinxAtStartPar
As usual the controls can be clicked\sphinxhyphen{}on to display the popups for controlling the user controls.
Note that this page is for pure demonstration, and thus no integration to PLC variables is made.


\subsection{RFID}
\label{\detokenize{docs/200_templateproject:rfid}}\label{\detokenize{docs/200_templateproject:template-rfid-label}}
\sphinxAtStartPar
The TwinCAT HMI template project for HMI version 14.x (TwinCAT 3.1.4026.x) has a server extension referenced that enables the usage of an RFID\sphinxhyphen{}tag to login to the HMI instead of the traditional password.
What follows here are instructions for what’s necessary to do to get the RFID functionality to work in the HMI.

\sphinxAtStartPar
This documentation will refer to a few projects located in the \sphinxcode{\sphinxupquote{tc\_hmi/CryoHmiRfid}} folder.
The functionality is provided by two separate extensions, the \sphinxstylestrong{RFIDAuthServerExtension} and the \sphinxstylestrong{TcUiClientExtension}.

\sphinxAtStartPar
This example assumes that we have a Baltech\sphinxhyphen{}based RFID reader, which is natively supported by the TcUiClientExtension.


\subsubsection{RFIDAuth}
\label{\detokenize{docs/200_templateproject:rfidauth}}\begin{itemize}
\item {} 
\sphinxAtStartPar
RFIDAuthServerExtension: TwinCAT server extension (C\# project). Used in the TwinCAT HMI template project. This integrates into the TwinCAT HMI server and receives the request to login from the TcUiClient.

\item {} 
\sphinxAtStartPar
TcUiClientExtension: Extension to \sphinxhref{https://www.beckhoff.com/en-en/products/automation/twincat/tfxxxx-twincat-3-functions/tf1xxx-system/tf1200.html}{TF1200}%
\begin{footnote}[11]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.beckhoff.com/en-en/products/automation/twincat/tfxxxx-twincat-3-functions/tf1xxx-system/tf1200.html}
%
\end{footnote} (TcUiClient). Used by TcUiClient on the target device. It uses the RFID reader. The TcUiClient replaces the usage of the web browser on the local operator panel for the HMI of your system.

\end{itemize}

\sphinxAtStartPar
The usage of the \sphinxstylestrong{RFIDAuthServerExtension} requires the additional runtime license \sphinxhref{https://www.beckhoff.com/en-en/products/automation/twincat/tfxxxx-twincat-3-functions/tf2xxx-hmi/tf2200.html}{TF2200 TwinCAT 3 HMI Extension SDK}%
\begin{footnote}[12]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.beckhoff.com/en-en/products/automation/twincat/tfxxxx-twincat-3-functions/tf2xxx-hmi/tf2200.html}
%
\end{footnote}.
The TcUiClientExtension does not require any additional license, neither does the base\sphinxhyphen{}product TF1200.
The RFIDAuthServerExtension is delivered as a precompiled package, but can be compiled as well.
In that case, the following software is required:
\begin{itemize}
\item {} 
\sphinxAtStartPar
A full install of Visual Studio (TcXaeShell is not enough). This was tested with Visual Studio 2022 community edition.

\item {} 
\sphinxAtStartPar
The .NET framework 4.7.2 SDK installed.

\end{itemize}


\paragraph{RFIDAuthServerExtension}
\label{\detokenize{docs/200_templateproject:rfidauthserverextension}}
\sphinxAtStartPar
The \sphinxcode{\sphinxupquote{RFIDAuthServerExtension}} is available as a precompiled NuGet package or as source\sphinxhyphen{}code in case you want to build it yourself.
You can install it by follow these instructions:
\begin{enumerate}
\sphinxsetlistlabels{\arabic}{enumi}{enumii}{}{.}%
\item {} 
\sphinxAtStartPar
Download ESO \sphinxstylestrong{RFIDAuth.\textless{}version\textgreater{}.nupkg} file from GitLab

\item {} 
\begin{DUlineblock}{0em}
\item[] Check on XAE the current configured \sphinxstylestrong{Beckhoff offline packages} package folder. Go to
\sphinxstylestrong{Tools} \(\rightarrow\) \sphinxstylestrong{NuGet Package Manager} \(\rightarrow\) \sphinxstylestrong{Package Manager Settings} \(\rightarrow\) \sphinxstylestrong{Package Sources}. It is
located at \sphinxcode{\sphinxupquote{C:\textbackslash{}ProgramData\textbackslash{}Beckhoff\textbackslash{}NuGetPackages}}.
\end{DUlineblock}

\item {} 
\sphinxAtStartPar
Copy or move the downloaded file to \sphinxstylestrong{Beckhoff offline packages} folder.

\end{enumerate}

\sphinxAtStartPar
Alternatively you can build the extension yourself, by following the instructions below.
It’s here assumed that the build PC runs TwinCAT 3.1.4026.x, and that \sphinxhref{https://www.beckhoff.com/en-en/products/automation/twincat/texxxx-twincat-3-engineering/te2000.html}{TE2000}%
\begin{footnote}[13]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.beckhoff.com/en-en/products/automation/twincat/texxxx-twincat-3-engineering/te2000.html}
%
\end{footnote}, \sphinxhref{https://www.beckhoff.com/en-en/products/automation/twincat/tfxxxx-twincat-3-functions/tf2xxx-hmi/tf2000.html}{TF2000}%
\begin{footnote}[14]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.beckhoff.com/en-en/products/automation/twincat/tfxxxx-twincat-3-functions/tf2xxx-hmi/tf2000.html}
%
\end{footnote} and \sphinxhref{https://www.beckhoff.com/en-en/products/automation/twincat/tfxxxx-twincat-3-functions/tf1xxx-system/tf1200.html}{TF1200}%
\begin{footnote}[15]\sphinxAtStartFootnote
\sphinxnolinkurl{https://www.beckhoff.com/en-en/products/automation/twincat/tfxxxx-twincat-3-functions/tf1xxx-system/tf1200.html}
%
\end{footnote} is installed.
For the runtime/target, it’s assumed it’s running TwinCAT 3.1.4024.x or 3.1.4026.x.

\sphinxAtStartPar
Further, the project requires the usual licenses to work (PLC \& TF2000).

\sphinxAtStartPar
To build the RFIDAuthServerExtension, open the RFIDAuthServerExtension solution and build it.
Next, create a NuGet package of it by right\sphinxhyphen{}clicking on the project and choosing \sphinxstylestrong{Pack}.
Take the generated NuGet package and put it in a location where the TwinCAT HMI can see it (the default for TE2000 14.x is \sphinxcode{\sphinxupquote{C:\textbackslash{}ProgramData\textbackslash{}Beckhoff\textbackslash{}NuGetPackages}}).

\sphinxAtStartPar
Open the \sphinxstylestrong{CryoHmiTemplate} example project.
Click on CryoHmiTemplate \(\rightarrow\) Server \(\rightarrow\) RFIDAuth and add a new user with the accompanying \sphinxstylestrong{RFID Card UID}.
Note that you might need to reverse the endianess of your UIDs when entering them in the TwinCAT HMI.
For example, when the RFID\sphinxhyphen{}tag for the UID in the TwinCAT HMI example was read using the Baltech suite, the UID \sphinxcode{\sphinxupquote{A31CF3A6}} was read.
In the TwinCAT HMI the UID \sphinxcode{\sphinxupquote{A6F31CA3}} had to be entered for it to work.
Publish the project to the TwinCAT HMI Server.


\paragraph{TcUiClientExtension}
\label{\detokenize{docs/200_templateproject:tcuiclientextension}}
\sphinxAtStartPar
Make sure the Baltech RFID reader is visible in the operating system of the machine in where the TcUiClient will be running on.
It should get a COM\sphinxhyphen{}port in the OS, like this:

\begin{figure}[htbp]
\centering
\capstart

\noindent\sphinxincludegraphics{{ComPort}.png}
\caption{ComPort}\label{\detokenize{docs/200_templateproject:id43}}\end{figure}

\sphinxAtStartPar
Next, we need to configure the Baltech RFID reader.
For this we need the \sphinxhref{https://baltech.de/downloads-standard/?lang=en\#software-tools}{ToolSuite}%
\begin{footnote}[16]\sphinxAtStartFootnote
\sphinxnolinkurl{https://baltech.de/downloads-standard/?lang=en\#software-tools}
%
\end{footnote}.
The ToolSuite is also available to download from the ESO GitLab.
Use the configuration file available under \sphinxcode{\sphinxupquote{CryoHmiRfid\textbackslash{}RFIDAuth\textbackslash{}Misc}}.

\sphinxAtStartPar
\sphinxstylestrong{If you want to use a pre\sphinxhyphen{}compiled version of the TcUiClientExtension}, you can download it from ESO GitLab.
Take the whole folder \sphinxcode{\sphinxupquote{TcUiClientExtension}} and put it somewhere (assumed \sphinxcode{\sphinxupquote{C:\textbackslash{}TcUiClientExtension}} here).

\sphinxAtStartPar
\sphinxstylestrong{If you want to build the TcUiClientExtension}, first go to the folder \sphinxcode{\sphinxupquote{CryoHmiRfid\textbackslash{}RFIDAuth\textbackslash{}TcUiClientExtension}} using the CMD.
Next we need to install all the dependencies for the TcUiClientExtension.
Do this by:

\begin{sphinxVerbatim}[commandchars=\\\{\}]
\PYG{n}{npm} \PYG{n}{install}
\end{sphinxVerbatim}

\sphinxAtStartPar
Now we need to compile the extension, so that it can be used with the TcUiClient.
Go to \sphinxcode{\sphinxupquote{CryoHmiRfid\textbackslash{}RFIDAuth\textbackslash{}TcUiClientExtension\textbackslash{}src}}, and run the following command:

\begin{sphinxVerbatim}[commandchars=\\\{\}]
\PYG{n}{npx} \PYG{n}{tsc}
\end{sphinxVerbatim}

\sphinxAtStartPar
After either taking the pre\sphinxhyphen{}compiled version of the extension or compiling it yourself, you must add the extension to the configuration file of the TcUiClient by adding a new entry in the \sphinxcode{\sphinxupquote{extensions}} object, available under \sphinxcode{\sphinxupquote{\%AppData\%\textbackslash{}Beckhoff\textbackslash{}TF1200\sphinxhyphen{}UI\sphinxhyphen{}Client\textbackslash{}config.json}}.
Note that you need to start the TcUiClient at least one time for this folder to be created.

\sphinxAtStartPar
Add this (example):

\begin{sphinxVerbatim}[commandchars=\\\{\}]
\PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{extensions}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{p}{\PYGZob{}}
    \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{RFID}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{p}{\PYGZob{}}
        \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{name}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{RFIDAuth}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{,}
        \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{directory}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{C:}\PYG{l+s+se}{\PYGZbs{}\PYGZbs{}}\PYG{l+s+s2}{TcUiClientExtension}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{,}
        \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{version}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{\PYGZca{}1.0.0}\PYG{l+s+s2}{\PYGZdq{}}
    \PYG{p}{\PYGZcb{}}
\PYG{p}{\PYGZcb{}}\PYG{p}{,}
\end{sphinxVerbatim}

\sphinxAtStartPar
While at it, make sure that the TcUiClient is displaying the published TwinCAT HMI project:

\begin{sphinxVerbatim}[commandchars=\\\{\}]
\PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{startUrl}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{http://localhost:1010}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{,}
\end{sphinxVerbatim}

\sphinxAtStartPar
To verify that the extension is identified correctly, start the TcUiClient.
If no error message is displayed and the \sphinxstylestrong{RFID} entry shows up in the application menu, the extension is loaded correctly.
If you don’t see an application menu, make sure to set \sphinxcode{\sphinxupquote{"enableMenuBar": true}} in the configuration file of the TcUiClient.
Select the correct COM port from the application menu.
Alternatively, you can set the COM port in the \sphinxcode{\sphinxupquote{CryoHmiRfid\textbackslash{}RFIDAuth\textbackslash{}TcUiClientExtension\textbackslash{}settings.json}} file.

\sphinxAtStartPar
An example that is matching the screenshot for the COM\sphinxhyphen{}port above is provided here:

\begin{sphinxVerbatim}[commandchars=\\\{\}]
\PYG{p}{\PYGZob{}}
    \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{comPort}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{l+m+mi}{4}\PYG{p}{,}
    \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{loginWhenCardDetected}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{n}{true}\PYG{p}{,}
    \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{logoutOnCardRemoved}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{n}{false}\PYG{p}{,}
    \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{deviceType}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{Baltech}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{,}
    \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{loginDomain}\PYG{l+s+s2}{\PYGZdq{}}\PYG{p}{:} \PYG{l+s+s2}{\PYGZdq{}}\PYG{l+s+s2}{RFIDAuth}\PYG{l+s+s2}{\PYGZdq{}}
\PYG{p}{\PYGZcb{}}
\end{sphinxVerbatim}



\renewcommand{\indexname}{Index}
\newpage
\end{document}