mmt labs full
|
@ -1 +0,0 @@
|
||||||
ivan-igorevich@DESKTOP-HGRRHPT.10852:1670842641
|
|
|
@ -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.
|
||||||
|
|
|
@ -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()} - Закрывает открытый документ.
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
||||||
|
|
|
@ -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}
|
||||||
|
|
After Width: | Height: | Size: 26 KiB |
After Width: | Height: | Size: 5.4 KiB |
After Width: | Height: | Size: 37 KiB |
After Width: | Height: | Size: 101 KiB |
After Width: | Height: | Size: 512 KiB |
After Width: | Height: | Size: 110 KiB |
After Width: | Height: | Size: 448 KiB |
After Width: | Height: | Size: 181 KiB |
After Width: | Height: | Size: 84 KiB |
After Width: | Height: | Size: 45 KiB |