diff --git a/.#03-FPGA.tex b/.#03-FPGA.tex deleted file mode 100644 index b0cc5cf..0000000 --- a/.#03-FPGA.tex +++ /dev/null @@ -1 +0,0 @@ -ivan-igorevich@DESKTOP-HGRRHPT.10852:1670842641 \ No newline at end of file diff --git a/03-mmt-lab-02-report.tex b/03-mmt-lab-02-report.tex index f5b1b5e..73de7ad 100644 --- a/03-mmt-lab-02-report.tex +++ b/03-mmt-lab-02-report.tex @@ -13,17 +13,15 @@ \makeReportTitle{лабораторной}{2}{Мультимедийная веб-презентация}{Мультимедиа технологии}{}{Д.А. Видьманов} \newpage -\thispagestyle{empty} -\tableofcontents -\newpage \pagestyle{fancy} \sloppy \section{Цель} Целью работы является приобретение навыков создания мультимедийной веб-презентации, ознакомление с основными правилами и требованиями к созданию веб-презентаций. Создать мультимедийную веб-презентацию в соответствии с изученными требованиями по заданной теме. \section{Задачи} + \begin{enumerate} -\item Установить \code{node.js}; +\item Установить node.js; \item Создать мультимедиа веб-презентацию, используя инструкции и рекомендации методического указания; \item Проверить ещё раз все требовании к презентации и создать отчет. \end{enumerate} @@ -87,7 +85,17 @@ \caption{Видео в презентации} \label{pic:vid} \end{figure} - + +\section{Запуск веб-презентации} +Фреймворк для создания веб-презентаций Shower работает с использованием технологии node.js, поэтому каждая презентация выглядит как отдельное веб-приложение, запускаемое на сервере или локальном компьютере, и предоставляющее endpoint по адресу \code{http://localhost:8080} + +\begin{figure}[H] + \centering + \includegraphics[width=80mm]{03-mmt-lab-02-launch.png} + \caption{Запуск приложения} + \label{pic:vid} +\end{figure} + \section{Контрольные вопросы} \begin{enumerate} \item \textbf{Для чего использовался npm? Что это такое и какие команды вы знаете?} Для запуска интерактивности веб-страницы с презентацией. npm - это пакетный менеджер и проектов для node.js. diff --git a/03-mmt-lab-03-report.tex b/03-mmt-lab-03-report.tex index 98e9adf..96fc3c5 100644 --- a/03-mmt-lab-03-report.tex +++ b/03-mmt-lab-03-report.tex @@ -13,9 +13,6 @@ \makeReportTitle{лабораторной}{3}{Разработка мультимедийного приложения}{Мультимедиа технологии}{}{Д.А. Видьманов} \newpage -\thispagestyle{empty} -\tableofcontents -\newpage \pagestyle{fancy} \sloppy \section{Цель} @@ -31,7 +28,20 @@ \section{Выполнение работы} Для написания мультимедйного приложения был выбран Qt Framework версии 5.12, и язык C++. Разрабатываемое приложение - это единый мультимедийный просмотрщик файлов (офисные документы, pdf, видео). Для реализации мультимедийности были выбраны несколько компонентов и создан экран, основной частью которого является область просмотра. +\begin{figure}[H] + \centering + \includegraphics[width=12cm]{03-mmt-lab-03-main.png} + \caption{Основное окно приложения} +\end{figure} + \subsection{Функции. Открытие MPEG} + +\begin{figure}[H] + \centering + \includegraphics[width=12cm]{03-mmt-lab-03-video.png} + \caption{Видео в приложении} +\end{figure} + Для открытия, воспроизведения и перемотки видеофайлов используются компоненты \code{QMediaPlayer} и \code{QVideoWidget}. Для работы с компонентами были описаны следующие слоты и функции: \begin{itemize} \item \code{void openMPEG(QString&)}. Достраивает в главном окне необходимые области, добавляет кнопки, инициализирует слайдеры, связывает слоты. @@ -48,6 +58,11 @@ \subsection{Функции. Открытие офисных документов (XLSX, DOCX, PPTX)} Функции офиса используют компонент ActiveX и отображают содержимое, фактически открытое в приложениях офисного пакета. +\begin{figure}[H] + \centering + \includegraphics[width=12cm]{03-mmt-lab-03-open.png} + \caption{Окно открытия файла} +\end{figure} \begin{itemize} \item \code{void openXLSX(QString&)}. Открывает XLSX файл и передает управление файлом приложению MS Excel. Отображение размещается внутри виджета. @@ -57,6 +72,12 @@ \subsection{Функции. Открытие документов PDF} \code{void openPDF(QString&)}. Открывает PDF файл и передает управление файлом приложению Adobe Acrobat. Отображение размещается внутри виджета. +\begin{figure}[H] + \centering + \includegraphics[width=12cm]{03-mmt-lab-03-pdf.png} + \caption{Просмотр PDF документа} +\end{figure} + \subsection{Закрытие документа} \code{void closeFile()} - Закрывает открытый документ. diff --git a/03-mmt-lab-04-report.tex b/03-mmt-lab-04-report.tex new file mode 100644 index 0000000..361122d --- /dev/null +++ b/03-mmt-lab-04-report.tex @@ -0,0 +1,162 @@ +\documentclass[a4paper]{article} + +\input{../common-preamble} +\input{../bmstu-preamble} +\input{../fancy-listings-preamble} + +\numerationTop + +\begin{document} +\fontsize{14pt}{14pt}\selectfont % Вполне очевидно, что мы хотим 14й шрифт, все его хотят +\thispagestyle{empty} +\makeBMSTUHeader + +\makeReportTitle{лабораторной}{3}{Разработка мультимедийного приложения}{Мультимедиа технологии}{}{Д.А. Видьманов} +\newpage +\thispagestyle{empty} +\tableofcontents +\newpage +\pagestyle{fancy} +\sloppy +\section{Цель} +Целью работы является приобретение навыков создания мультимедийных веб-приложений. Создать мультимедийное веб-приложение. + +\section{Задачи} +\begin{enumerate} +\item Установить среду разработки; +\item Описать критерии создания приложения; +\item Написать код и отладить работу приложения. +\end{enumerate} + +\section{Выполнение работы} +Для написания мультимедйного приложения был выбран фреймворк Spring Boot. Разрабатываемое приложение - это единый мультимедийный просмотрщик файлов (офисные документы, pdf). Для реализации мультимедийности были выбраны несколько компонентов и создан экран, основной частью которого является область просмотра. + +Иерархия проекта выглядит так, как показано на рис. \hrf{pic:hierarchy} + +\begin{figure}[H] + \centering + \includegraphics[width=12cm]{03-mmt-lab-04-hierarchy.png} + \caption{Иерархия проекта} + \label{pic:hierarchy} +\end{figure} + +Основным классом является класс презентации, содержащий название, описание и ссылку на прикрепленный файл. Исходный код класса представлен в листинге \hrf{lst:present}. + +\begin{lstlisting}[language=Java,style=JCodeStyle,caption={Presentation.java},label={lst:present}] +@Table(name = "PRESENTATION") +@Entity +public class Presentation { + @JmixGeneratedValue + @Column(name = "ID", nullable = false) + @Id + private UUID id; + + @InstanceName + @Column(name = "NAME") + private String name; + + @Column(name = "DESCRIPTION") + private String description; + + @Column(name = "FILE") + private FileRef fileRef; + + public UUID getId() { + return id; + } + + public void setId(UUID id) { + this.id = id; + } + + public String getName() { + return name; + } + + public void setName(String name) { + this.name = name; + } + + public String getDescription() { + return description; + } + + public void setDescription(String description) { + this.description = description; + } + + public FileRef getFileRef() { + return fileRef; + } + + public void setFileRef(FileRef fileRef) { + this.fileRef = fileRef; + } +} +\end{lstlisting} + +Макет экрана представлен на рис. \hrf{pic:screendraft}, а исходный код контроллера в листинге \hrf{lst:present-edit} + +\begin{figure}[H] + \centering + \includegraphics[width=12cm]{03-mmt-lab-04-screendraft.png} + \caption{Макет экрана} + \label{pic:screendraft} +\end{figure} + +\begin{lstlisting}[language=Java,style=JCodeStyle,caption={PresentationEdit.java},label={lst:present-edit}] + @UiController("Presentation.edit") + @UiDescriptor("presentation-edit.xml") + @EditedEntityContainer("presentationDc") + public class PresentationEdit extends StandardEditor { + @Autowired + private BrowserFrame fileLookup; + + @Subscribe + public void onAfterShow(AfterShowEvent event) { + Presentation presentation = getEditedEntity(); + if (Objects.nonNull(presentation.getFileRef())) { + fileLookup.setSource(FileStorageResource.class) + .setFileReference(presentation.getFileRef()); + } + } + } +\end{lstlisting} + +Приложение запускается по адресу localhost:8080/app и имеет вид, представленный на рисунках \hrf{pic:welcome}, \hrf{pic:browse}, \hrf{pic:edit-and-view}. + +\begin{figure}[H] + \centering + \includegraphics[width=12cm]{03-mmt-lab-04-welcome.png} + \caption{Приветственное окно} + \label{pic:welcome} +\end{figure} +\begin{figure}[H] + \centering + \includegraphics[width=12cm]{03-mmt-lab-04-browse.png} + \caption{Окно просмотра всех презентаций} + \label{pic:browse} +\end{figure} +\begin{figure}[H] + \centering + \includegraphics[width=12cm]{03-mmt-lab-04-edit-and-view.png} + \caption{Окно просмотра и редактирования презентации} + \label{pic:edit-and-view} +\end{figure} + +\section{Контрольные вопросы} +\begin{enumerate} +\item \textbf{В чем преимущество TypeScript над JavaScript?} Строгая типизация и, как следствие, безопасность кода приложений. +\item \textbf{Какие модули включает в себя современное веб-приложение?} Чаще всего это модули учёта и авторизации пользователей, модуль работы с БД, фронтенд и другие модули, решающие бизнес-задачи. +\item \textbf{Для чего в проекте нужен docker-compose?} для одновременного запуска множества модулей приложения. +\item \textbf{В чём преимущество разделения на клиентскую и серверную части?} в возможности независимой разработки и в объединении нескольких серверных частей одной клиентской. +\item \textbf{Какой класс является репрезентацией таблицы в базе данных?} В описанном в данной работе приложении это класс Presentation.java (листинг \hrf{lst:present}) +\item \textbf{Какие трудности возникают в процессе разработки веб-приложения?} У начинающих разработчиков это, обычно, понимание принципов работы веб-приложения, исполнения фронтенда, взаимосвязи модулей и работа с БД. +\end{enumerate} + +\section{Выводы} +Для разработки мультимедийного приложения необходимо изучить разнообразный инструментарий, позволяющий манипулировать мультимедийными данными. Написание мультимедийнх приложений тесно связано с обработкой больших объёмов данных или использованием внешних библиотек и приложений. Мультимедийные приложения возможно написать для любых платформ и внедрить для любых категорий пользователей. + +\end{document} + + diff --git a/03-wtis-lab-01-report.tex b/03-wtis-lab-01-report.tex index 9be9e10..b85ed80 100644 --- a/03-wtis-lab-01-report.tex +++ b/03-wtis-lab-01-report.tex @@ -82,7 +82,7 @@ \hline $N_{TX}$ (шт.) & $L_{app}$ (байт) & $R$ (кбит/с) & $k$ \\ [0.5ex] \hline - 30 & 50 & 1500 & 30 \\ + 30 & 50 & 1500 & 30 \\ \hline \end{tabular} \caption{Таблица значений для варианта} @@ -93,7 +93,6 @@ Поскольку $G=\frac{N_{TX}}{T_s}*\tau$, где $\tau=\frac{8*L_{phy}}{R}$, а $L_{phy} = L_{app} + 63$, то $T_s= \frac{N_{TX}\tau}{G}$. Для $G = 0,05; T_s \approx 361,6$ мсек, а для $G = 1; T_s \approx 18,08$ мсек. Для моделирования был выбран диапазон $T_s = [10; 400]$ мсек с шагом 20. - \section{Выводы} \end{document} diff --git a/pics/03-mmt-lab-02-launch.png b/pics/03-mmt-lab-02-launch.png new file mode 100644 index 0000000..eca8b3b Binary files /dev/null and b/pics/03-mmt-lab-02-launch.png differ diff --git a/pics/03-mmt-lab-03-main.png b/pics/03-mmt-lab-03-main.png new file mode 100644 index 0000000..5aa1acf Binary files /dev/null and b/pics/03-mmt-lab-03-main.png differ diff --git a/pics/03-mmt-lab-03-open.png b/pics/03-mmt-lab-03-open.png new file mode 100644 index 0000000..8f94fc2 Binary files /dev/null and b/pics/03-mmt-lab-03-open.png differ diff --git a/pics/03-mmt-lab-03-pdf.png b/pics/03-mmt-lab-03-pdf.png new file mode 100644 index 0000000..030d702 Binary files /dev/null and b/pics/03-mmt-lab-03-pdf.png differ diff --git a/pics/03-mmt-lab-03-video.png b/pics/03-mmt-lab-03-video.png new file mode 100644 index 0000000..f49f9bd Binary files /dev/null and b/pics/03-mmt-lab-03-video.png differ diff --git a/pics/03-mmt-lab-04-browse.png b/pics/03-mmt-lab-04-browse.png new file mode 100644 index 0000000..c5caf9b Binary files /dev/null and b/pics/03-mmt-lab-04-browse.png differ diff --git a/pics/03-mmt-lab-04-edit-and-view.png b/pics/03-mmt-lab-04-edit-and-view.png new file mode 100644 index 0000000..719149a Binary files /dev/null and b/pics/03-mmt-lab-04-edit-and-view.png differ diff --git a/pics/03-mmt-lab-04-hierarchy.png b/pics/03-mmt-lab-04-hierarchy.png new file mode 100644 index 0000000..adf4d4e Binary files /dev/null and b/pics/03-mmt-lab-04-hierarchy.png differ diff --git a/pics/03-mmt-lab-04-screendraft.png b/pics/03-mmt-lab-04-screendraft.png new file mode 100644 index 0000000..a6b913d Binary files /dev/null and b/pics/03-mmt-lab-04-screendraft.png differ diff --git a/pics/03-mmt-lab-04-welcome.png b/pics/03-mmt-lab-04-welcome.png new file mode 100644 index 0000000..03801ae Binary files /dev/null and b/pics/03-mmt-lab-04-welcome.png differ