mmt labs full

This commit is contained in:
Ivan I. Ovchinnikov 2022-12-19 14:11:07 +03:00
parent 14040c5cbb
commit 882bd8af01
15 changed files with 200 additions and 11 deletions

View File

@ -1 +0,0 @@
ivan-igorevich@DESKTOP-HGRRHPT.10852:1670842641

View File

@ -13,17 +13,15 @@
\makeReportTitle{лабораторной}{2}{Мультимедийная веб-презентация}{Мультимедиа технологии}{}{Д.А. Видьманов} \makeReportTitle{лабораторной}{2}{Мультимедийная веб-презентация}{Мультимедиа технологии}{}{Д.А. Видьманов}
\newpage \newpage
\thispagestyle{empty}
\tableofcontents
\newpage
\pagestyle{fancy} \pagestyle{fancy}
\sloppy \sloppy
\section{Цель} \section{Цель}
Целью работы является приобретение навыков создания мультимедийной веб-презентации, ознакомление с основными правилами и требованиями к созданию веб-презентаций. Создать мультимедийную веб-презентацию в соответствии с изученными требованиями по заданной теме. Целью работы является приобретение навыков создания мультимедийной веб-презентации, ознакомление с основными правилами и требованиями к созданию веб-презентаций. Создать мультимедийную веб-презентацию в соответствии с изученными требованиями по заданной теме.
\section{Задачи} \section{Задачи}
\begin{enumerate} \begin{enumerate}
\item Установить \code{node.js}; \item Установить node.js;
\item Создать мультимедиа веб-презентацию, используя инструкции и рекомендации методического указания; \item Создать мультимедиа веб-презентацию, используя инструкции и рекомендации методического указания;
\item Проверить ещё раз все требовании к презентации и создать отчет. \item Проверить ещё раз все требовании к презентации и создать отчет.
\end{enumerate} \end{enumerate}
@ -88,6 +86,16 @@
\label{pic:vid} \label{pic:vid}
\end{figure} \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{Контрольные вопросы} \section{Контрольные вопросы}
\begin{enumerate} \begin{enumerate}
\item \textbf{Для чего использовался npm? Что это такое и какие команды вы знаете?} Для запуска интерактивности веб-страницы с презентацией. npm - это пакетный менеджер и проектов для node.js. \item \textbf{Для чего использовался npm? Что это такое и какие команды вы знаете?} Для запуска интерактивности веб-страницы с презентацией. npm - это пакетный менеджер и проектов для node.js.

View File

@ -13,9 +13,6 @@
\makeReportTitle{лабораторной}{3}{Разработка мультимедийного приложения}{Мультимедиа технологии}{}{Д.А. Видьманов} \makeReportTitle{лабораторной}{3}{Разработка мультимедийного приложения}{Мультимедиа технологии}{}{Д.А. Видьманов}
\newpage \newpage
\thispagestyle{empty}
\tableofcontents
\newpage
\pagestyle{fancy} \pagestyle{fancy}
\sloppy \sloppy
\section{Цель} \section{Цель}
@ -31,7 +28,20 @@
\section{Выполнение работы} \section{Выполнение работы}
Для написания мультимедйного приложения был выбран Qt Framework версии 5.12, и язык C++. Разрабатываемое приложение - это единый мультимедийный просмотрщик файлов (офисные документы, pdf, видео). Для реализации мультимедийности были выбраны несколько компонентов и создан экран, основной частью которого является область просмотра. Для написания мультимедйного приложения был выбран Qt Framework версии 5.12, и язык C++. Разрабатываемое приложение - это единый мультимедийный просмотрщик файлов (офисные документы, pdf, видео). Для реализации мультимедийности были выбраны несколько компонентов и создан экран, основной частью которого является область просмотра.
\begin{figure}[H]
\centering
\includegraphics[width=12cm]{03-mmt-lab-03-main.png}
\caption{Основное окно приложения}
\end{figure}
\subsection{Функции. Открытие MPEG} \subsection{Функции. Открытие MPEG}
\begin{figure}[H]
\centering
\includegraphics[width=12cm]{03-mmt-lab-03-video.png}
\caption{Видео в приложении}
\end{figure}
Для открытия, воспроизведения и перемотки видеофайлов используются компоненты \code{QMediaPlayer} и \code{QVideoWidget}. Для работы с компонентами были описаны следующие слоты и функции: Для открытия, воспроизведения и перемотки видеофайлов используются компоненты \code{QMediaPlayer} и \code{QVideoWidget}. Для работы с компонентами были описаны следующие слоты и функции:
\begin{itemize} \begin{itemize}
\item \code{void openMPEG(QString&)}. Достраивает в главном окне необходимые области, добавляет кнопки, инициализирует слайдеры, связывает слоты. \item \code{void openMPEG(QString&)}. Достраивает в главном окне необходимые области, добавляет кнопки, инициализирует слайдеры, связывает слоты.
@ -48,6 +58,11 @@
\subsection{Функции. Открытие офисных документов (XLSX, DOCX, PPTX)} \subsection{Функции. Открытие офисных документов (XLSX, DOCX, PPTX)}
Функции офиса используют компонент ActiveX и отображают содержимое, фактически открытое в приложениях офисного пакета. Функции офиса используют компонент ActiveX и отображают содержимое, фактически открытое в приложениях офисного пакета.
\begin{figure}[H]
\centering
\includegraphics[width=12cm]{03-mmt-lab-03-open.png}
\caption{Окно открытия файла}
\end{figure}
\begin{itemize} \begin{itemize}
\item \code{void openXLSX(QString&)}. Открывает XLSX файл и передает управление файлом приложению MS Excel. Отображение размещается внутри виджета. \item \code{void openXLSX(QString&)}. Открывает XLSX файл и передает управление файлом приложению MS Excel. Отображение размещается внутри виджета.
@ -57,6 +72,12 @@
\subsection{Функции. Открытие документов PDF} \subsection{Функции. Открытие документов PDF}
\code{void openPDF(QString&)}. Открывает PDF файл и передает управление файлом приложению Adobe Acrobat. Отображение размещается внутри виджета. \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{Закрытие документа} \subsection{Закрытие документа}
\code{void closeFile()} - Закрывает открытый документ. \code{void closeFile()} - Закрывает открытый документ.

162
03-mmt-lab-04-report.tex Normal file
View File

@ -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<Presentation> {
@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}

View File

@ -82,7 +82,7 @@
\hline \hline
$N_{TX}$ (шт.) & $L_{app}$ (байт) & $R$ (кбит/с) & $k$ \\ [0.5ex] $N_{TX}$ (шт.) & $L_{app}$ (байт) & $R$ (кбит/с) & $k$ \\ [0.5ex]
\hline \hline
30 & 50 & 1500 & 30 \\ 30 & 50 & 1500 & 30 \\
\hline \hline
\end{tabular} \end{tabular}
\caption{Таблица значений для варианта} \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. Поскольку $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{Выводы} \section{Выводы}
\end{document} \end{document}

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

BIN
pics/03-mmt-lab-03-main.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
pics/03-mmt-lab-03-open.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

BIN
pics/03-mmt-lab-03-pdf.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 512 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 110 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 448 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 181 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB