birbnetes/birbmap
birbnetes/birbmap
4
0
Fork 0
Code Pull Requests Releases Activity

Martha's contribution

Browse Source
This commit is contained in:
kunkliricsi 2020-12-08 22:39:18 +01:00
parent 37ea775d59
commit 9cae969803
9 changed files with 1183 additions and 1164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/thesis/content/abstract.tex
View File

@ -20,7 +20,7 @@ tudják kielégíteni azokat a speciális igényeket, amelyek egy ilyen rendszer
Jelen szakdolgozat célja egy olyan vizualizációs megoldás bemutatása, amelynek segítségével a rendszer könnyedén áttekinthető Jelen szakdolgozat célja egy olyan vizualizációs megoldás bemutatása, amelynek segítségével a rendszer könnyedén áttekinthető
és kezelhető. A tanszéki rendszer által kezelt eszközök a felületen is vezérelhetők és kezelhető. A tanszéki rendszer által kezelt eszközök a felületen is vezérelhetők
és azok működéséről különböző statisztikákat felhasználva egyszerűen értelmezhető diagrammok generálódnak. és azok működéséről különböző statisztikákat felhasználva egyszerűen értelmezhető diagramok generálódnak.
A backend megvalósítására az ASP.NET Core-t választottam, mely platformfüggetlen megoldást nyújt a web kérések kiszolgálására. A backend megvalósítására az ASP.NET Core-t választottam, mely platformfüggetlen megoldást nyújt a web kérések kiszolgálására.
A frontend-et a React.js használatával készítettem, mely segítségével egyszerűen és gyorsan lehet reszponzív felhasználói felületeket készíteni. A frontend-et a React.js használatával készítettem, mely segítségével egyszerűen és gyorsan lehet reszponzív felhasználói felületeket készíteni.

28
docs/thesis/content/birdmap-frontend.tex
View File

@ -120,7 +120,7 @@ Komponense a \ref{fig:birdmap-logs}-es ábrán látható.
\label{fig:birdmap-logs} \label{fig:birdmap-logs}
\end{figure} \end{figure}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
\subsection{Eszköz állapot és hangüzenet kezelő szolgáltatás} \subsection{Eszközállapot- és hangüzenet-kezelő szolgáltatás}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
A szakasz további komponenseinek van egy közös ismertetője. Mégpedig, hogy mindegyiknek szüksége van a kihelyezett eszközök adataira A szakasz további komponenseinek van egy közös ismertetője. Mégpedig, hogy mindegyiknek szüksége van a kihelyezett eszközök adataira
és az azok által publikált hangüzenetekből képzett valószínűségre. és az azok által publikált hangüzenetekből képzett valószínűségre.
@ -133,13 +133,13 @@ A \ref{lst:react-switch}-es listában látható, hogy a \verb+DevicesContextProv
\subsection{Dashboard} \subsection{Dashboard}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
A Dashboard az alkalmazás kezdő oldala. Itt található meg a külső szolgáltatások állapotát vizsgáló komponens, A Dashboard az alkalmazás kezdő oldala. Itt található meg a külső szolgáltatások állapotát vizsgáló komponens,
illetve a kihelyezett eszközök működési folyamatában áttekintést nyújtó diagrammok mindegyike. illetve a kihelyezett eszközök működési folyamatában áttekintést nyújtó diagramok mindegyike.
Az oldal megjelenítésekor elindul egy másodpercenként ismétlődő folyamat, Az oldal megjelenítésekor elindul egy másodpercenként ismétlődő folyamat,
mely a \verb+DevicesContext+-ből kiolvasott értékekből legenerálja a diagrammokon megjelenítendő összes adatot. mely a \verb+DevicesContext+-ből kiolvasott értékekből legenerálja a diagramokon megjelenítendő összes adatot.
Ez azonban az adat mennyiségétől függően akár egy-két másodpercig is eltarthat, ami rendkívül lassúvá és használhatatlanná tenné a felületet. Ez azonban az adat mennyiségétől függően akár egy-két másodpercig is eltarthat, ami rendkívül lassúvá és használhatatlanná tenné a felületet.
Ennek elkerülése érdekében az adatfeldolgozó folyamat egyszerre csak egy pár elemet dolgoz fel, mely alfolyamatok között 20 milliszekundum szüneteket iktattam be. Ennek elkerülése érdekében az adatfeldolgozó folyamat egyszerre csak egy pár elemet dolgoz fel, mely alfolyamatok között 20 milliszekundum szüneteket iktattam be.
Továbbá hogy a különböző diagrammok animációi is zökkenőmentesek legyenek, azok adatai cserélése között is van 300 milliszekundum szünet. Továbbá hogy a különböző diagramok animációi is zökkenőmentesek legyenek, azok adatai cserélése között is van 300 milliszekundum szünet.
Így valamivel lasabb az adatfeldolgozás, de a felület használható marad. Így valamivel lasabb az adatfeldolgozás, de a felület használható marad.
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
\subsubsection{Külső szolgáltatások} \subsubsection{Külső szolgáltatások}
@ -176,38 +176,38 @@ A felhasználói élmény maximalizálása érdekében a frissítés előtt lek
\subsubsection{Eszközök és szenzorok állapota} \subsubsection{Eszközök és szenzorok állapota}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
Ennek a komponensnek a szerepe, hogy áttekintést nyújtson az eszközök és szenzorok állapotáról. Ennek a komponensnek a szerepe, hogy áttekintést nyújtson az eszközök és szenzorok állapotáról.
Úgy gondoltam, hogy erre a legcélravezetőbb eszköz a \ref{fig:dashboard-donut}-es ábrán is látható Apexcharts fánk diagrammja. Úgy gondoltam, hogy erre a legcélravezetőbb eszköz a \ref{fig:dashboard-donut}-es ábrán is látható Apexcharts fánk diagramja.
Látható, hogy hány darab eszköz és szenzor van bekapcsolt, kikapcsolt, illetve hibás állapotban. Látható, hogy hány darab eszköz és szenzor van bekapcsolt, kikapcsolt, illetve hibás állapotban.
Az állapotok változása esetén a \verb+DevicesContextProvider+-nek köszönhetően az adatok automatikusan frissülnek. Az állapotok változása esetén a \verb+DevicesContextProvider+-nek köszönhetően az adatok automatikusan frissülnek.
\begin{figure}[!ht] \begin{figure}[!ht]
\centering \centering
\includegraphics[width=150mm, keepaspectratio]{figures/dashboard-donut-devices.png} \includegraphics[width=150mm, keepaspectratio]{figures/dashboard-donut-devices.png}
\caption{A Dashboard eszköz- és szenzor állapotok diagrammja} \caption{A Dashboard eszköz- és szenzor állapotok diagramja}
\label{fig:dashboard-donut} \label{fig:dashboard-donut}
\end{figure} \end{figure}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
\subsubsection{Hőtérkép diagrammok} \subsubsection{Hőtérkép diagramok}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
Ezekkel a diagrammokkal az a célom, hogy az eszközök által küldött észleléseket időrendben vizualizáljam. Ezekkel a diagramokkal az a célom, hogy az eszközök által küldött észleléseket időrendben vizualizáljam.
Megvalósításukhoz az Apexcharts Heatmap típusú diagrammját használtam. Megvalósításukhoz az Apexcharts Heatmap típusú diagramját használtam.
A \ref{fig:dashboard-heatmap-second}-as ábrán látható diagram az elmúlt egy percben küldött, másodpercenként a legnagyobb, hangüzenetekből képzett valószínűségeket ábrozolja. A \ref{fig:dashboard-heatmap-second}-as ábrán látható diagram az elmúlt egy percben küldött, másodpercenként a legnagyobb, hangüzenetekből képzett valószínűségeket ábrozolja.
A \ref{fig:dashboard-heatmap-minute}-es ábrán látható diagram pedig az elmúlt egy órában percenként a legnagyobbakat. A \ref{fig:dashboard-heatmap-minute}-es ábrán látható diagram pedig az elmúlt egy órában percenként a legnagyobbakat.
\begin{figure}[!ht] \begin{figure}[!ht]
\centering \centering
\includegraphics[width=150mm, keepaspectratio]{figures/second-heatmap.png} \includegraphics[width=150mm, keepaspectratio]{figures/second-heatmap.png}
\caption{Másodperc alapú hőtérképes diagramm} \caption{Másodperc alapú hőtérképes diagram}
\label{fig:dashboard-heatmap-second} \label{fig:dashboard-heatmap-second}
\end{figure} \end{figure}
\begin{figure}[!ht] \begin{figure}[!ht]
\centering \centering
\includegraphics[width=150mm, keepaspectratio]{figures/minute-heatmap.png} \includegraphics[width=150mm, keepaspectratio]{figures/minute-heatmap.png}
\caption{Perc alapú hőtérképes diagramm} \caption{Perc alapú hőtérképes diagram}
\label{fig:dashboard-heatmap-minute} \label{fig:dashboard-heatmap-minute}
\end{figure} \end{figure}
A függőleges tengelyen a rendszer eszközei vannak dinamikusan megjelenítve. A függőleges tengelyen a rendszer eszközei vannak dinamikusan megjelenítve.
A vízszintes tengelyen pedig az említett időtartományok. A vízszintes tengelyen pedig az említett időtartományok.
A diagrammokon látható négyzetek a valószínűség nagyságától függően sötétebbek vagy világosabbak. A diagramokon látható négyzetek a valószínűség nagyságától függően sötétebbek vagy világosabbak.
\newpage \newpage
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
\subsubsection{Riasztás számláló} \subsubsection{Riasztás számláló}
@ -217,7 +217,7 @@ Segítségével megvizsgálható, hogy mely eszközök riasztanak a legtöbbet a
\begin{figure}[!ht] \begin{figure}[!ht]
\centering \centering
\includegraphics[width=150mm, keepaspectratio]{figures/dashboard-column-devices.png} \includegraphics[width=150mm, keepaspectratio]{figures/dashboard-column-devices.png}
\caption{Eszközönkénti riasztásokat számláló diagramm} \caption{Eszközönkénti riasztásokat számláló diagram}
\label{fig:dashboard-devices-column} \label{fig:dashboard-devices-column}
\end{figure} \end{figure}
@ -226,7 +226,7 @@ Az egyes oszlopok három részre vannak bontva az üzenetek öt tized, hét tize
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
\subsubsection{Üzenetek gyakorisága} \subsubsection{Üzenetek gyakorisága}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
Az oldalon található utolsó diagramm egy vonal diagammn, melynek célja, hogy ábrázolja a rendszer által küldött üzenetek számát másodpercenként. Az oldalon található utolsó diagram egy vonal diagammn, melynek célja, hogy ábrázolja a rendszer által küldött üzenetek számát másodpercenként.
A \ref{fig:dashboard-messages-line}-es ábrán látható a komponens. A \ref{fig:dashboard-messages-line}-es ábrán látható a komponens.
A vízszintes tengelyen a legelső érték az alkalmazás által először észlelt üzenet időpontja. A vízszintes tengelyen a legelső érték az alkalmazás által először észlelt üzenet időpontja.
Az utolsó érték a legutoljára észlelt időpontja. Az utolsó érték a legutoljára észlelt időpontja.

4
docs/thesis/content/birdmap-introduction.tex
View File

@ -13,7 +13,7 @@ A jellemző adatvizualizációs megoldások közül az alábbi hármat találtam
\begin{itemize} \begin{itemize}
\item \textbf{Hőtérkép}. Hasznos lenne egy olyan felület, ahol az eszközök GPS koordinátái és a seregély detektálást jelző üzenetek alapján, meg lehetne jeleníteni a seregélyek hozzávetőleges előfordulásának helyeit és gyakoriságát egy térképen, hőtérképes formában. \item \textbf{Hőtérkép}. Hasznos lenne egy olyan felület, ahol az eszközök GPS koordinátái és a seregély detektálást jelző üzenetek alapján, meg lehetne jeleníteni a seregélyek hozzávetőleges előfordulásának helyeit és gyakoriságát egy térképen, hőtérképes formában.
\item \textbf{Eszközállapotok}. Jelenleg a Command and Control mikroszolgáltatás felé indított kéréseken kívül, nincs lehetőség a kihelyezett eszközök állapotának vizsgálatára. Szükség lenne egy olyan felületre, ahol ezek állapotai láthatóak, esetleg dinamikusan is frissülnek. \item \textbf{Eszközállapotok}. Jelenleg a Command and Control mikroszolgáltatás felé indított kéréseken kívül, nincs lehetőség a kihelyezett eszközök állapotának vizsgálatára. Szükség lenne egy olyan felületre, ahol ezek állapotai láthatóak, esetleg dinamikusan is frissülnek.
\item \textbf{Diagrammok}. A hőtérképen kívül egyéb olyan diagrammok is hasznosak lehetnek, ahol látható például, hogy melyik eszköz melyik percben észlelt madárhangot vagy, hogy egy eszköz összesen hány madárhangot észelt. Minnél több információ, annál jobb. \item \textbf{Diagramok}. A hőtérképen kívül egyéb olyan diagramok is hasznosak lehetnek, ahol látható például, hogy melyik eszköz melyik percben észlelt madárhangot vagy, hogy egy eszköz összesen hány madárhangot észelt. Minnél több információ, annál jobb.
\end{itemize} \end{itemize}
Ezeken kívül fontos követelmény volt még, hogy az alkalmazásom futtatható legyen Linux környezetben is, hogy az telepíthető legyen a Birbnetes Kubernetes \cite{kubernetes} klaszterébe. Ezeken kívül fontos követelmény volt még, hogy az alkalmazásom futtatható legyen Linux környezetben is, hogy az telepíthető legyen a Birbnetes Kubernetes \cite{kubernetes} klaszterébe.
@ -28,7 +28,7 @@ Az imént vázolt igények kielégítésére sok, széles körben alkalmazott me
\subsection{Grafana} \subsection{Grafana}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
A Grafana \cite{grafana} az egy nyílt forráskódú platformfüggetlen vizualizációs web alkalmazás. A Grafana \cite{grafana} az egy nyílt forráskódú platformfüggetlen vizualizációs web alkalmazás.
Egy támogatott adatbázishoz csatlakoztatva különféle interaktív gráfokat és diagrammokat generál. Egy támogatott adatbázishoz csatlakoztatva különféle interaktív gráfokat és diagramokat generál.
A testreszabhatóság maximalizásának érdekében különböző, akár harmadik fél által készített, bővítmények használatát is támogatja, A testreszabhatóság maximalizásának érdekében különböző, akár harmadik fél által készített, bővítmények használatát is támogatja,
melyekkel új adatforrások és panel típusok integrálhatók. melyekkel új adatforrások és panel típusok integrálhatók.
A \ref{fig:grafana}-es ábra egy jó példa arra, hogy hogyan néz ki egy általános Grafana felület. A \ref{fig:grafana}-es ábra egy jó példa arra, hogy hogyan néz ki egy általános Grafana felület.

2
docs/thesis/content/birdmap-technologies.tex
View File

@ -122,7 +122,7 @@ Alkalmazásával könnyő esztétikus felhasználói felületeket készíteni, m
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
\subsection{Apexcharts} \subsection{Apexcharts}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
Az Apexcharts \cite{apexcharts} egy nyílt forráskódú JavaScript szoftvercsomag, amellyel könnyen konfigurálható, modern kinézetű diagrammokat lehet készíteni. Az Apexcharts \cite{apexcharts} egy nyílt forráskódú JavaScript szoftvercsomag, amellyel könnyen konfigurálható, modern kinézetű diagramokat lehet készíteni.
Sokféle kliensoldali (és szerveroldali) technológiát támogat, köztük a React-et is. A kezelőfelületen található vizualizációk szinte összes elemét ennek használatával csináltam. Sokféle kliensoldali (és szerveroldali) technológiát támogat, köztük a React-et is. A kezelőfelületen található vizualizációk szinte összes elemét ennek használatával csináltam.
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------

6
docs/thesis/content/introduction.tex
View File

@ -12,7 +12,7 @@ Ha igen akkor jelez a felvételt küldő eszköznek, hogy szólaltassa meg a ria
berendezését, hogy elijessze a madarakat. berendezését, hogy elijessze a madarakat.
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
\section{A probléma} \section{Probléma}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
A jelen rendszer használata során nincs vizuális visszacsatolás az esetleges riasztásokról azok gyakoriságáról A jelen rendszer használata során nincs vizuális visszacsatolás az esetleges riasztásokról azok gyakoriságáról
és a rendszer állapotáról sem. Különböző diagnosztikai eszközök ugyan implementálva lettek mint például és a rendszer állapotáról sem. Különböző diagnosztikai eszközök ugyan implementálva lettek mint például
@ -20,11 +20,11 @@ a naplózás vagy a hiba bejelentés, de ezek használata nehézkes, nem kézenf
Szükség van egy olyan megoldásra amivel egy helyen és egyszerűen lehet kezelni és felügyelni a rendszer egyes elemeit. Szükség van egy olyan megoldásra amivel egy helyen és egyszerűen lehet kezelni és felügyelni a rendszer egyes elemeit.
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
\section{A megoldás} \section{Megoldás}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
A jelen szakdolgozat egy olyan webes alkalmazás elkészítését dokumentálja, melyel a felhasználók képesek A jelen szakdolgozat egy olyan webes alkalmazás elkészítését dokumentálja, melyel a felhasználók képesek
a természetben elhelyezett eszközök állapotát vizsgálni, azokat akár ki és bekapcsolni igény szerint. a természetben elhelyezett eszközök állapotát vizsgálni, azokat akár ki és bekapcsolni igény szerint.
Az egyes rendszer eseményeket vizsgálva a szoftver statisztikákat készít, melyeket különböző diagrammokon ábrázolok. Az egyes rendszer eseményeket vizsgálva a szoftver statisztikákat készít, melyeket különböző diagramokon ábrázolok.
Ilyen statisztikák például, hogy időben melyik eszköz mikor észlelt madár hangot, vagy hogy hány hang üzenet érkezik Ilyen statisztikák például, hogy időben melyik eszköz mikor észlelt madár hangot, vagy hogy hány hang üzenet érkezik
az eszközöktől másodpercenként. az eszközöktől másodpercenként.

2
docs/thesis/content/summary.tex
View File

@ -9,7 +9,7 @@ minimalizáltak legyenek a függőségek, így a rendszerben történő változ
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
\section{Továbbfejlesztési lehetőségek} \section{Továbbfejlesztési lehetőségek}
%---------------------------------------------------------------------------- %----------------------------------------------------------------------------
Az kliens oldalon történő diagrammok adatainak generálása hamar túl nagy falatnak bizonyult. Az kliens oldalon történő diagramok adatainak generálása hamar túl nagy falatnak bizonyult.
A bevetett optimalizációk ellenére sem lett hatványozottan gyorsabb a felület. A bevetett optimalizációk ellenére sem lett hatványozottan gyorsabb a felület.
Így az első és legfontosabb továbbfejlesztési teendő az adatok szerveroldalon történő generálása lenne. Így az első és legfontosabb továbbfejlesztési teendő az adatok szerveroldalon történő generálása lenne.

2295
docs/thesis/thesis.pdf
View File

File diff suppressed because it is too large Load Diff