\documentclass[aspectratio=169,ignorenonframetext,hyperref={pdfpagelabels=false}]{beamer}

\usepackage[utf8]{inputenc}
\usepackage[T1,T2A]{fontenc}
\usepackage[british]{babel}
\usepackage{relsize}
\usepackage{tikz}
\usetikzlibrary{pie,positioning,shapes,automata,fit,shadows,matrix,backgrounds,shapes.geometric}

\graphicspath{{./img}}

\beamertemplatenavigationsymbolsempty%
\urlstyle{same}
\usefonttheme{serif}
\newcommand{\IOT}{\texorpdfstring{Io\kern-1ptT}{IoT}}

% Add slide numbers
%\setbeamertemplate{footline}{%
%	\quad%
%	\usebeamercolor[fg]{page number in head/foot}%
%	\usebeamerfont{page number in head/foot}%
%	\insertframenumber%
%	\vspace{2mm}
%}

\title{\texorpdfstring{\larger[2]}{}Orchestrating the Internet of Things\texorpdfstring{\\}{\ }with Task-Oriented Programming}
\subtitle{\texorpdfstring{\larger[2]}{}a purely functional rhapsody}
\titlegraphic{\includegraphics{ru}}
\author{Mart Lubbers}
\date{October 4th, 2023}

\begin{document}
\begin{frame}[plain]
	\maketitle
\end{frame}

\begin{frame}[plain]
	\begin{figure}
		\centering
		\includegraphics[height=.95\textheight]{iot}\\
%		{\tiny \url{https://freesvg.org/internet-world} (CC 0)}
	\end{figure}
\end{frame}

\begin{frame}[plain]
	\begin{figure}
		\centering
		\begin{tikzpicture}[node distance=3em,nodes={rectangle,draw,minimum width=12em, minimum height=3em}]
			\begin{uncoverenv}<2->
				\node (1) [] {presentation \begin{uncoverenv}<4->\includegraphics[height=2em]{phone}\end{uncoverenv}};
				\node (2) [below=of 1] {application \begin{uncoverenv}<6->\includegraphics[height=2em]{laptop}\end{uncoverenv}};
				\node (3) [below=of 2] {perception \begin{uncoverenv}<7->\includegraphics[height=2em]{lamp}\includegraphics<7->[height=2em]{magn}\end{uncoverenv}};
		
				\draw [<->] (1) -- (2);
				\draw [<->] (2) -- (3);
		
				\draw [fill=white]
					   ([xshift=1em,yshift=-2em]1.south west)
					-- ([xshift=1em,yshift=-1em]1.south west)
					-- ([yshift=-1em,xshift=1em]1.south east)
					-- ([xshift=1em]1.north east)
					-- ([xshift=5em]1.north east)
					-- node [draw=none,midway,sloped,below,yshift=-2pt] {\large network \begin{uncoverenv}<9->\includegraphics[height=2em,origin=c,angle=90]{mail}\end{uncoverenv}} ([xshift=5em]3.south east)
					-- ([xshift=1em]3.south east)
					-- ([yshift=1em,xshift=1em]3.north east)
					-- ([xshift=1em,yshift=1em]3.north west)
					-- ([xshift=1em,yshift=2em]3.north west)
					-- ([yshift=2em,xshift=1em]3.north east)
					-- ([yshift=-2em,xshift=1em]1.south east)
					-- cycle;
		
				\draw [densely dotted] (1.south) -- (2.north);
				\draw [densely dotted] (2.south) -- (3.north);
			\end{uncoverenv}
		
			\node<1-2> (text) [draw=none,fit=(1) (2) (3),xshift=20em] {};
			\node<1-2> [draw=none] at (text.center) {\includegraphics[width=11em]{iot}};
			\node<3-8> (text) [fit=(1) (2) (3),xshift=20em] {};
			\node<3> [draw=none,align=left] at (text.center) {%
				\includegraphics[width=3em]{ff}%
				\includegraphics[width=3em]{chrome}%
				\includegraphics[width=3em]{phone}\\
				\includegraphics[width=9em]{tablet}
			};
			\node<4-5> [draw=none,align=left] at (text.center) {%
				\includegraphics[width=5.5em]{laptop}%
				\includegraphics[width=5.5em]{cloud}\\
				\begin{uncoverenv}<5>
					\includegraphics[width=11em]{server}
				\end{uncoverenv}
			};
			\node<6> [draw=none,align=left] at (text.center) {%
				\includegraphics[width=5.5em]{mcu}
				\includegraphics[width=5.5em]{pi}\\
				\includegraphics[width=5.5em]{pir}
				\includegraphics[width=5.5em]{stepper}
			};
			\node<7-8> [draw=none,align=left] at (text.center) {%
				\includegraphics[width=4em]{wifi}\\
				\includegraphics[width=11em]{gsm}\\
				\begin{uncoverenv}<8>
					\includegraphics[width=5.5em]{lora}%
					\includegraphics[width=5.5em]{blte}
				\end{uncoverenv}
			};
			\uncover<9->{%
				\node [draw=none] at (text.center) {%
					\includegraphics<10>[height=15em,width=11em,keepaspectratio]{spaghetti}%
					\includegraphics<11->[height=15em,width=11em,keepaspectratio]{orchestra}
				};
			}

			\draw<3> [line width=1.5pt,densely dotted](1.north east) -- (text.north west);
			\draw<3> [line width=1.5pt,densely dotted](1.south east) -- (text.south west);
			\draw<4-5> [line width=1.5pt,densely dotted](2.north east) -- (text.north west);
			\draw<4-5> [line width=1.5pt,densely dotted](2.south east) -- (text.south west);
			\draw<6> [line width=1.5pt,densely dotted](3.north east) -- (text.north west);
			\draw<6> [line width=1.5pt,densely dotted](3.south east) -- (text.south west);
			\draw<7-8> [line width=1.5pt,densely dotted]([xshift=3em]1.north east) -- (text.north west);
			\draw<7-8> [line width=1.5pt,densely dotted]([xshift=3em]3.south east) -- (text.south west);
		\end{tikzpicture}
	\end{figure}
	\uncover<9->{%
		\begin{center}
			\Huge \strut\only<-10>{Driven by software}\only<12>{Task-Oriented Programming}
		\end{center}
	}
\end{frame}

\begin{frame}[shrink]
	\begin{columns}[t]
		\begin{column}{.4\textwidth}
			\begin{block}{Task-oriented programming}
				\begin{itemize}
					\item Task

						\begin{itemize}
							\item Abstraction over work
						\end{itemize}
					\item Declarative programming
		
						\begin{itemize}
							\item Focus on \emph{What} and not \emph{How}.
						\end{itemize}
					\item<2-> mTask: Domain-specific language
		
						\begin{itemize}
							\item Constrained TOP language for small computers.
						\end{itemize}
					\item<4-> iTask: TOP for the web
					\item<6-> Tierless programming
						\begin{itemize}
							\item Maintainability
							\item Security
							\item Interoperability
						\end{itemize}
				\end{itemize}
			\end{block}
		\end{column}
		\begin{column}{.6\textwidth}
			\begin{figure}
				\begin{tikzpicture}[node distance=3em,nodes={rectangle,draw,minimum width=10em, minimum height=3em}]
					\node (1) [] {presentation \includegraphics[height=1em]{phone}};
					\node (2) [below=of 1] {application \includegraphics[height=1em]{laptop}};
					\node (3) [below=of 2] {perception \includegraphics[height=1em]{lamp}\includegraphics[height=1em]{magn}};
				
					\draw [<->] (1) -- (2);
					\draw [<->] (2) -- (3);
				
					\draw [fill=white]
						   ([xshift=1em,yshift=-2em]1.south west)
						-- ([xshift=1em,yshift=-1em]1.south west)
						-- ([yshift=-1em,xshift=1em]1.south east)
						-- ([xshift=1em]1.north east)
						-- ([xshift=4em]1.north east)
						-- node (net) [draw=none,midway,sloped,below,yshift=-2pt] {\large network \includegraphics[height=1em,origin=c,angle=90]{mail}} ([xshift=4em]3.south east)
						-- ([xshift=1em]3.south east)
						-- ([yshift=1em,xshift=1em]3.north east)
						-- ([xshift=1em,yshift=1em]3.north west)
						-- ([xshift=1em,yshift=2em]3.north west)
						-- ([yshift=2em,xshift=1em]3.north east)
						-- ([yshift=-2em,xshift=1em]1.south east)
						-- cycle;
				
					\draw [densely dotted] (1.south) -- (2.north);
					\draw<-2> [densely dotted] (2.south) -- (3.north);
				
					\begin{uncoverenv}<3->
						\node (mtask) [dotted,line width=3pt,fit={(3)},label={[fill=white]\large\bf mTask}] {};
					\end{uncoverenv}
					\begin{uncoverenv}<5->
						\node (itask) [densely dotted,line width=2pt,inner sep=1em,fit={(1) (2) (3) ([xshift=5em]1.north east)},label=above:{\large\bf iTask}] {};
					\end{uncoverenv}
				\end{tikzpicture}
			\end{figure}
		\end{column}
	\end{columns}
\end{frame}

\end{document}
