Commit 2b5952a2 authored by Omran Saleh's avatar Omran Saleh
Browse files

add figures and changes

parent 58f87664
File added
To provide a more abstraction level, we have developed a web application called \textbf{AutoStudio}. It is a very user friendly and easy to use web application to run cross-platform using HTML5, Draw2D touch\footnote{\url{http://www.draw2d.org/draw2d/index.html}}, and node.js\footnote{\url{http://www.nodejs.org}}. AutoStudio has several functionalities: To provide a more abstraction level, we have developed a web application called \textbf{AutoStudio}. It is a very user friendly and easy to use web application to run cross-platform using HTML5, Draw2D touch\footnote{\url{http://www.draw2d.org/draw2d/index.html}}, and node.js\footnote{\url{http://www.nodejs.org}}. AutoStudio has several functionalities:
\begin{itemize} \begin{itemize}
\item It enables users to leverage the emerging \PipeFlow language graphically via a collection of operators (represented by icons) which could be ``dragged and dropped'' onto a drawing canvas. The user can assemble the operators in order to create a dataflow graph in a logical way and visually show how they are related, and from this graph, equivalent \PipeFlow script can be generated. By clicking on the operator icon, a pop-up window appears to let the user specify the parameters of \PipeFlow operators, which are required. Moreover, the user can display the help contents for each operator. \item It enables users to leverage the emerging \PipeFlow language graphically via a collection of operators (represented by icons) which could be simply ``dragged and dropped'' onto a drawing canvas. The user can assemble the operators in order to create a dataflow graph in a logical way and visually show how they are related, and from this graph, equivalent \PipeFlow script can be generated. By clicking on the operator icon, a pop-up window appears to let the user specify the parameters of \PipeFlow operators, which are required. Moreover, the user can display the help contents for each operator.
\item Contacting the \PipeFlow system to generate the right script (e.g., Storm, Spark, or PipeFabric scripts) based upon the user's selection of language from the dashboard page. This makes the user to be not aware of any of stream-processing languages syntax including \PipeFlow and their constructs. By this application, the user can trigger the execution of the script through the \PipeFlow system via calling the respective engine. Moreover, it handles real-time stats including execution and performance results sent by \PipeFlow system when the script is in execution. When the execution is complete, the application can send an email to the user . \item Contacting the \PipeFlow system to generate the right script (e.g., Storm, Spark, or PipeFabric scripts) based upon the user's selection of language from the dashboard page. This makes the user to be not aware of any of stream-processing languages syntax including \PipeFlow and their constructs. By this application, the user can trigger the execution of the script through the \PipeFlow system via calling the respective engine. Moreover, it handles real-time stats including execution and performance results sent by \PipeFlow system when the script is in execution. When the execution is complete, the application can send an email to the user .
\item It provides the options of saving the generated scripts or flow-designs for future reference, loading the saved script and executing it whenever required. \item It provides the options of saving the generated scripts or flow-designs for future reference, loading the saved script and executing it whenever required.
\item An evaluation tool for the generated scripts where the user is interested in comparing as well as evaluating the performance of stream- processing systems in terms of throughput, latency, and resource consumption such as CPU and memory. The evaluation can be performed online using dynamic figures or offline using static figures. \item An evaluation tool for the generated scripts where the user is interested in comparing as well as evaluating the performance of stream- processing systems in terms of throughput, latency, and resource consumption such as CPU and memory. The evaluation can be performed online using dynamic figures or offline using static figures.
\end{itemize} \end{itemize}
AutoStudio prominently uses open source softwares and frameworks. The client side including HTML5, JavaScript, Cascading Style Sheets (CSS), jQuery (and helping libraries), twitter bootstrap, and hogan.js is used for building the graphical user interface, performing Ajax requests, file uploading and downloading, etc. AutoStudio extensively uses pre-compiled hogan templates where the data returned from the server is simply passed to these templates for quick rendering. In addition, Draw2D touch is used to enable creation of diagram applications in a browser by creating and manipulating operators and connections. In the server side, we used a web server suitable for data-intensive real-time applications. Therefore, node.js and its supporting modules such as nodemailer and socket.io were employed. AutoStudio prominently uses open source softwares and frameworks. The client side, including HTML5, JavaScript, Cascading Style Sheets (CSS), jQuery (and helping libraries), twitter bootstrap, and hogan.js, is used for building the graphical user interface, performing Ajax requests, file uploading and downloading, etc. AutoStudio extensively uses pre-compiled hogan templates where the data returned from the server is simply passed to these templates for quick rendering. In addition, Draw2D touch is used to enable creation of diagram applications in a browser by creating and manipulating operators and connections. Highcharts\footnote{\url{http://www.highcharts.com}} library is utilized to create interactive charts for our application. In the server side, we used a web server suitable for data-intensive real-time applications. Therefore, node.js and its supporting modules such as nodemailer and socket.io were employed.
\begin{figure}[hb] \begin{figure}[hb]
\centering \centering
\includegraphics[width=3.5in, height = 2in]{autostudio.png} \includegraphics[width=3.5in, height = 2in]{autostudio.eps}
\caption \caption
{Front-end web application: AutoStudio} {Front-end web application: AutoStudio}
\end{figure} \end{figure}
......
During the demo session we will bring a laptop running our system and demonstrate During the demo session, we will bring a laptop running our system and demonstrate
its capabilities and supported-services by employing real queries and datasets which can be interactively its capabilities and supported-services by employing real queries and datasets which can be interactively
explored by demo audience. Since the front-end is a web-based application, the whole demonstration can be done via the laptop's browser. We will prepare some sample programs expressed in \PipeFlow. We will create these programs by dragging and dropping the operators. The users can switch between different generated scripts (i.e., different languages) without changing the data flow and observe the differences between them. To show real-time results, the generated scripts will compiled and executed over the respective engine. Moreover, the audience will see real-time performance evaluation for the engines by display static and dynamic figures. The audience will play a role in the session. They will change and create data flow programs interactively through the web front-end application and switch between the generated scripts to see real-time results and check the status of the running programs. explored by demo audience. Since the front-end in our system is a web-based application, the whole demonstration can be carried out via the laptop's browser. We will prepare some sample scripts expressed in \PipeFlow. The users will create these programs graphically by dragging and dropping the operators and connections as well as specifying the operator's parameters. The audience can switch between different generated scripts (i.e., different languages) without changing the original data flow script and observe the differences between these scripts constructs. To show real-time results, the generated scripts will be compiled and executed over the respective engine via our system. Moreover, the audience will notice real-time performance measurements for the engines through the existing of static and dynamic figures in the dashboard page.
\ No newline at end of file \ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment