mirror of
https://github.com/Telecominfraproject/oopt-gnpy-web-gui.git
synced 2025-10-30 17:47:51 +00:00
97 lines
6.4 KiB
HTML
97 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>JSDoc: Tutorial: technical_document</title>
|
||
|
||
<script src="scripts/prettify/prettify.js"> </script>
|
||
<script src="scripts/prettify/lang-css.js"> </script>
|
||
<!--[if lt IE 9]>
|
||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||
<![endif]-->
|
||
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
||
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="main">
|
||
|
||
<h1 class="page-title">Tutorial: technical_document</h1>
|
||
|
||
<section>
|
||
|
||
<header>
|
||
|
||
|
||
<h2>technical_document</h2>
|
||
</header>
|
||
|
||
<article>
|
||
<h4><ins>GNPy Tool UI/UX</ins></h4>
|
||
<p><strong>Technologies:</strong></p>
|
||
<p><strong>Front-End : HTML</strong></p>
|
||
<p><strong>Client-Script : Javascript and Jquery</strong></p>
|
||
<p><strong>CSS : Bootstrap</strong></p>
|
||
<p><strong><ins>Js libraries:</ins></strong></p>
|
||
<p><strong><ins>Vis.js (Network):</ins></strong></p>
|
||
<p>A network is a visualization to display networks of networks consisting of nodes and edges. The visualization is easy to use and supports custom shapes, styles, colors, sizes, images, and more. The network visualization works smoothly on any modern browser for up to a few thousand nodes and edges. To handle a larger number of nodes, the Network has clustering support. The network uses HTML canvas for rendering.</p>
|
||
<p><strong><ins>Alea.js:</ins></strong></p>
|
||
<p>Alea library is a pseudo-random number generator (PRNG).</p>
|
||
<p><strong><ins>ExampleUtil.js:</ins></strong></p>
|
||
<p>This library describes how to create some random nodes and fiber/patch/service.</p>
|
||
<p><strong><ins>Mynetwork.js:</ins></strong></p>
|
||
<p>The mynetwork library file describes how to initialize the network area using vis.js and defines common functionalities of network components.</p>
|
||
<p><strong><ins>Node.js:</ins></strong></p>
|
||
<p>The node can be defined as the connection point of "ROADM, Attenuator, Transceiver, Amplifier, and Raman Amplifier" and defines the node manipulations.</p>
|
||
<p><strong><ins>Fiber.js:</ins></strong></p>
|
||
<p>The fiber library describes how to add a fiber connection between any 2 nodes by dragging from source node to destination and defines the fiber manipulation.</p>
|
||
<p><strong><ins>Patch.js:</ins></strong></p>
|
||
<p>The patch library describes how to add a patch connection between any 2 nodes by dragging from source node to destination and defines the patch manipulation.</p>
|
||
<p><strong><ins>Service.js:</ins></strong></p>
|
||
<p>The Service is also the same as the connectivity path between 2 transceiver nodes. This library file defines service manipulation.</p>
|
||
<p><strong><ins>Constraints.js:</ins></strong></p>
|
||
<p>The constraints library is a list of rules for components. It is defining the network topology validation.</p>
|
||
<p><strong><ins>Validation.js:</ins></strong></p>
|
||
<p>The Validations library currently describes the validation of component name, length, and type.</p>
|
||
<p><strong><ins>Main.js:</ins></strong></p>
|
||
<p>The main.js library describes UI actions. like show/hide and update the HTML element with style based on user interaction.</p>
|
||
<p><strong><ins>Filesaver.js:</ins></strong></p>
|
||
<p>Filesaver.js is the solution to saving files on the client-side and is perfect for web apps that generate files on the client.</p>
|
||
<p><strong><ins>Html2Canvas.js:</ins></strong></p>
|
||
<p>The library allows taking "screenshots" of webpages or parts of them, directly on the user’s browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.</p>
|
||
<p><strong><ins>Taffy.js:</ins></strong></p>
|
||
<p>The library provides powerful in-memory database capabilities to both browser and server applications. this stores data in JSON format.</p>
|
||
<p><strong><ins>Bootstrap.js:</ins></strong></p>
|
||
<p>Bootstrap is a free front-end framework for faster and easier web development. Bootstrap includes HTML and CSS-based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and many others, as well as optional JavaScript plugins.</p>
|
||
<p><strong><ins>Jquery.js:</ins></strong></p>
|
||
<p>jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.</p>
|
||
<p><strong><ins>Lodash.js:</ins></strong></p>
|
||
<p>Lodash helps programmers write more concisely and easier to maintain JavaScript code. Lodash contains tools to simplify programming with strings, numbers, arrays, functions, and objects. By convention, the Lodash module is mapped to the underscore character</p>
|
||
<p><strong><ins>Popper.js:</ins></strong></p>
|
||
<p>A library used to manage poppers in web applications. Popper. js is a positioning engine, its purpose is to calculate the position of an element to make it possible to position it near a given reference element.</p>
|
||
<p><strong><ins>JSON:</ins></strong></p>
|
||
<p><strong><ins>Configuration Data.json:</ins></strong></p>
|
||
<p>This JSON describes the data configuration of network components.</p>
|
||
<p><strong><ins>Style Data.json:</ins></strong></p>
|
||
<p>This JSON describes the style configuration of network components.</p>
|
||
</article>
|
||
|
||
</section>
|
||
|
||
</div>
|
||
|
||
<nav>
|
||
<h2><a href="index.html">oopt-gnpy-web-gui-main</a></h2><h3>Modules</h3><ul><li><a href="module-alea.html">alea</a></li><li><a href="module-constraints.html">constraints</a></li><li><a href="module-exampleUtil.html">exampleUtil</a></li><li><a href="module-fiber.html">fiber</a></li><li><a href="module-filesaver.html">filesaver</a></li><li><a href="module-main.html">main</a></li><li><a href="module-mynetwork.html">mynetwork</a></li><li><a href="module-node.html">node</a></li><li><a href="module-patch.html">patch</a></li><li><a href="module-service.html">service</a></li><li><a href="module-validation.html">validation</a></li></ul><h3>Tutorials</h3><ul><li><a href="tutorial-LICENSE.html">LICENSE</a></li><li><a href="tutorial-technical_document.html">technical_document</a></li></ul>
|
||
</nav>
|
||
|
||
<br class="clear">
|
||
|
||
<footer>
|
||
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.10</a> on Wed Jul 06 2022 19:21:36 GMT+0530 (India Standard Time)
|
||
</footer>
|
||
|
||
<script> prettyPrint(); </script>
|
||
<script src="scripts/linenumber.js"> </script>
|
||
</body>
|
||
</html> |