forked from aayushGaur/stac
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (126 loc) · 8.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/landingPage.css"/>
<link rel="stylesheet" type="text/css" href="./css/baseStyler.css"/>
<link rel="stylesheet" type="text/css" href="./css/tabs.css"/>
<link rel="stylesheet" type="text/css" href="./css/views.css"/>
<script src="libs/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="libs/jquery-ui-1.11.2.js" type="text/javascript"></script>
<script src="libs/d3adaptor.js" type="text/javascript" ></script>
<script src="libs/d3.v3.min.js" type="text/javascript" ></script>
<script src="libs/cola.v3.js" type="text/javascript" ></script>
<script type="text/javascript" src="script/Network.js"></script>
<script type="text/javascript" src="script/utils/Logger.js"></script>
<script type="text/javascript" src="script/ObjectFactory/dataObjects.js" ></script>
<script type="text/javascript" src="script/ObjectFactory/dataObjValidator.js" ></script>
<script type="text/javascript" src="script/ObjectFactory/dataObjSolutionUpdater.js" ></script>
</head>
<body>
<div class="overlay">
<div class="center">
</div>
</div>
<div class="standardNetworkGroup">
<h1 class="centreHeading1" style="margin-bottom:5px;">Steady-State AC Network Visualization in the Browser</h1>
<h1 class="centreHeading1" style="margin-top:2px;margin-bottom:5px;font-size:1.1em">(Beta)</h1>
<h2 class="centreHeading2">Example Test Cases</h2>
<div class="centerButtonGroup">
<div id="14Bus" class="landingPageDemoButton landingPageButton" onclick="NETWORK.DEMO.Demo.prototype.DrawDemoGraph('nesta_case14_ieee.m')">
<div class="landingPageDemoImage14 landingPageDemoImage"> </div>IEEE14</div>
<div id="24Bus" class="landingPageDemoButton landingPageButton" onclick="NETWORK.DEMO.Demo.prototype.DrawDemoGraph('nesta_case24_ieee_rts.m')">
<div class="landingPageDemoImage76 landingPageDemoImage"> </div>RTS76</div>
<div id="118Bus" class="landingPageDemoButton landingPageButton" onclick="NETWORK.DEMO.Demo.prototype.DrawDemoGraph('nesta_case73_ieee_rts.m')">
<div class="landingPageDemoImage96 landingPageDemoImage"> </div>RTS96</div>
<div id="118Bus" class="landingPageDemoButton landingPageButton" onclick="NETWORK.DEMO.Demo.prototype.DrawDemoGraph('nesta_case118_ieee.m')">
<div class="landingPageDemoImage118 landingPageDemoImage"> </div>IEEE118</div>
</div>
<div id="dropInput" ondrop="drawGraph(event)" class="dropEnabled"><p>Load Matpower Case</p><p style="font-size:0.75em;">(drag and drop)</p></div>
<div id="developedInfo">
<h3 class="center marginBottomZero">Developed at,</h3>
<div class="center">
<a href="http://org.nicta.com.au/"><img src="./resources/NICTA-logo.png" alt="NICTA" class="landingLogoNicta" title="Largest organisation dedicated to ICT research in Australia."/></a>
<a href="http://www.infotech.monash.edu.au/">
<img src="./resources/Monash-logo.png" alt="MONASH" class="landingLogoMonash" title="Ranked in the top 1% of the world universities, (Times Higher Education World University Rankings)."/>
</a>
</div>
<div>
<h3 class="center marginBottomZero">Built on -
<a href="http://d3js.org/">D3</a>
<a href='http://marvl.infotech.monash.edu/webcola/'>Web Cola</a>
<a href="https://github.com/aayushGaur/stac">Source Code</a> (Best viewed in Chrome)
</h3>
</div>
<div class="center" style="text-align:center;margin-left:15%;margin-top:25px;width:70%;color:grey;">
<span>This is a client-side visualization tool. Case files displayed by the tool remain in local memory.</span>
<div class="center" style="margin-top:10px;">
<span>Viewing networks with less than 500 buses is recommended for the best user experience.</span>
</div>
</div>
</div>
</div>
<div id="tooltip" class="hidden"></div>
<div id="d3div">
<div class="floatLeftDiv">
<div id="homeButton" onclick="VIEWS.SharedFunctionality.refreshCurrentPage()" class="demoButton">Home</div>
<div class="buttonGroupLabels"> Views </div>
<div id="dataView" onclick="VIEWS.SharedFunctionality.switchTabs(event)" class="demoButton activeButton">Topology</div>
<div id="dataValidationView" onclick="VIEWS.SharedFunctionality.switchTabs(event)" class="demoButton">Validation</div>
<!--<div id="solutionView" onclick="VIEWS.SharedFunctionality.switchTabs(event)" class="demoButton">Flow</div>-->
</div>
<div class="floatCenterDiv">
<div class="buttonGroupLabels"> Layout </div>
<div id="autoLayoutToggle" onclick="VIEWS.SharedFunctionality.toggleAutoLayout()" class="demoButton activeButton">Auto</div>
<div id="saveLayout" class="demoButton" style="margin-right:3px;">
<a id="AutoDownloadLayout" href="#" download="Layout.txt" onclick="VIEWS.SharedFunctionality.showLayout()">Export</a>
</div>
<div id="fixedPosition" onclick="VIEWS.SharedFunctionality.toggleFixedPosition()" class="demoButton">Initial</div>
</div>
<div class="floatRightDiv">
<div class="buttonGroupLabels" style="margin-bottom:3px;"> Search </div>
<div style="display:inline; cursor:text;">
<input id="tags" class="demoButton" placeholder="Enter Bus ID" style="width:98px; cursor:text;">
</div>
<div class="navigateButtons">
<div id="showHelp" onclick="VIEWS.SharedFunctionality.showHelp()" class="demoButton demoButtonZoom fontAwesome" style="display:inline" title="Click to show help Graph"></div>
<div id="doubleClickToFit" onclick="VIEWS.SharedFunctionality.buttonZoom(false)" class="demoButton demoButtonZoom fontAwesome" title="Zoom In"></div>
<div id="doubleClickToFit" onclick="VIEWS.SharedFunctionality.buttonZoom(true)" class="demoButton demoButtonZoom fontAwesome" title="Zoom Out"></div>
<div id="doubleClickToFit" onclick="VIEWS.SharedFunctionality.zoomToFit(true)" class="demoButton" style="margin-top:8px;">Auto Fit</div>
</div>
</div>
</div>
<div id="LogErrorsWarnings">
<input id="ewSearch" class="demoButton" placeholder="Please enter the search text." style="width: 98%;margin-left: 1%; text-align: center;">
<div id="ErrorLogs"></div>
<div id="WarningLogs"></div>
</div>
<div id="LoadSnippet" style="display: none; height:300px; width:300px;">
<img id="loadingImage" src="./resources/loading_anim.png" height="48" width="48">
</div>
<!--
Yahoo Tree view - to be used for logging the errors.
http://yuilibrary.com/gallery-archive/gallery/show/yui3treeview.html
-->
<script type="text/javascript" src="script/main.js"></script>
<script type="text/javascript" src="script/utils/Rules.js"></script>
<script type="text/javascript" src="script/Graph/disconnectedGraphWithNonOverLapConstraints.js"></script>
<script type="text/javascript" src="script/utils/toolTipGenerator.js" ></script>
<!-- Region Begins : Files to generate the Nodes and its decorators. -->
<script type="text/javascript" src="script/Graph/Nodes/NodeBase.js"></script>
<script type="text/javascript" src="script/Graph/Nodes//Decorators/TopDecorators.js"></script>
<script type="text/javascript" src="script/Graph/Nodes//Decorators/BottomDecorators.js"></script>
<!-- Region Ends-->
<!-- Region Begins : Files to display different views for the network -->
<script type="text/javascript" src="script/Views/baseView.js"></script>
<script type="text/javascript" src="script/Views/dataView.js"></script>
<script type="text/javascript" src="script/Views/validationView.js"></script>
<script type="text/javascript" src="script/Views/SolutionView.js"></script>
<!-- Region Ends-->
<!--Region Begins : Files for generating the Edges for the graph -->
<script type="text/javascript" src="script/Graph/Edges/BaseEdge.js"></script>
<script type="text/javascript" src="script/Graph/Edges/StandardEdge.js"></script>
<script type="text/javascript" src="script/Graph/Edges/TransformerEdge.js"></script>
<script type="text/javascript" src="script/Graph/Edges/LineChargeEdge.js"></script>
<script type="text/javascript" src="script/Graph/Edges/MultiLineEdge.js"></script>
<!-- Region Ends -->
</body>
</html>