Skip to content

Commit 86a4e33

Browse files
jlcanovasjlcanovas
committed
HTMLs for overlay
1 parent 05f353a commit 86a4e33

File tree

4 files changed

+41
-15
lines changed

4 files changed

+41
-15
lines changed

‎jsondiscoverer.web/WebContent/app/partials/advanced.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ <h2>How does it work?</h2>
1818

1919
<div class="row">
2020
<h2>Try it out!</h2>
21+
<div style="float:right; margin-top:-15px; margin-bottom:10px;">
22+
<button class="btn btn-xs" type="button" ng-click="activateHelp()">Give me some help!</button>
23+
</div>
2124
</div>
2225

2326
<div ng-controller="AdvancedDiscovererCtrl">
@@ -28,15 +31,18 @@ <h4>Step 1. Providing your JSON sources</h4>
2831
<form class="form-horizontal" role="form">
2932
<label for="inputName" class="col-md-2 control-label">Name</label>
3033
<div class="col-md-8">
31-
<input type="text" class="form-control" id="inputName" placeholder="Meaningful name for your JSON excerpt" ng-model="name">
34+
<input type="text" class="form-control" id="inputName" placeholder="Meaningful name for your JSON excerpt" ng-model="name"
35+
data-intro="Create a JSON source giving a name. After you can add JSON documents representing the output of the source" data-position="top">
3236
</div>
3337
<button class="btn col-md-2" ng-disabled="name == ''" ng-click="newSource()">OK</button>
3438
</form>
3539
</div>
3640
<h4 style="padding-top: 20px;">Step 2. Discover and Compose </h4>
37-
<button class="btn btn-block" ng-disabled="!discoveryPosible" ng-click="discover()">Discover Schema</button>
41+
<button class="btn btn-block" ng-disabled="!discoveryPosible" ng-click="discover()"
42+
data-intro="Once you have given your JSONs you can launch the discovery process" data-position="right">Discover Schema</button>
3843
<a style="text-decoration: none;" ng-href="{{metamodelFile}}" target="_blank">
39-
<button style="margin-top: 10px;" class="btn btn-block" type="button" ng-disabled="metamodelFile == ''">
44+
<button style="margin-top: 10px;" class="btn btn-block" type="button" ng-disabled="metamodelFile == ''"
45+
data-intro="We work with Eclipse Modeling Framework (EMF) so if you want you can download the schema as an Ecore file" data-position="bottom">
4046
Download schema <small>(Save as Ecore)</small>
4147
</button>
4248
</a>

‎jsondiscoverer.web/WebContent/app/partials/composition.html

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,9 @@ <h2>How does it work?
2727

2828
<div class="row">
2929
<h2>Try it out!</h2>
30+
<div style="float:right; margin-top:-15px; margin-bottom:10px;">
31+
<button class="btn btn-xs" type="button" ng-click="activateHelp()">Give me some help!</button>
32+
</div>
3033
</div>
3134

3235
<div ng-controller="CompositionCtrl">
@@ -38,13 +41,15 @@ <h4>Step 1. Providing your JSON sources</h4>
3841
<form class="form-horizontal" role="form">
3942
<label for="inputName" class="col-md-2 control-label">Name</label>
4043
<div class="col-md-8">
41-
<input type="text" class="form-control" id="inputName" placeholder="Meaningful name for your JSON" ng-model="name">
44+
<input type="text" class="form-control" id="inputName" placeholder="Meaningful name for your JSON" ng-model="name"
45+
data-intro="Create a JSON source giving a name. After you can add JSON documents representing the output of the source" data-position="top">
4246
</div>
4347
<button class="btn col-md-2" ng-disabled="name == ''" ng-click="newSource()">OK</button>
4448
</form>
4549
</div>
4650
<h4 style="padding-top: 20px;">Step 2. Composition Discovery </h4>
47-
<button class="btn btn-block" ng-disabled="!compositionPosible" ng-click="discoverComposition()">Discover Graph</button>
51+
<button class="btn btn-block" ng-disabled="!compositionPosible" ng-click="discoverComposition()"
52+
data-intro="Once you have provided your JSON sources, you can launch the garph discovery" data-position="right">Discover Graph</button>
4853
</div>
4954

5055
<div class="col-md-8">
@@ -94,7 +99,8 @@ <h3 class="modal-title">Provide your JSON for your {{json.name}} source</h3>
9499

95100
<h4 style="padding-top: 20px;">Step 3. Composition Graph </h4>
96101
<div style="float:right;">
97-
<button style="margin-top: -10px;"class="btn" ng-disabled="!layoutPosible" ng-click="layout()">{{layoutButton}}</button>
102+
<button style="margin-top: -10px;"class="btn" ng-disabled="!layoutPosible" ng-click="layout()"
103+
data-intro="The layout algorithm will tidy up the nodes" data-position="top">{{layoutButton}}</button>
98104
</div>
99105
<p>Same-colored nodes represent concepts of an API. White nodes represent attributes of the concepts while red nodes represent input concepts</p>
100106
<p class="text-center">
@@ -108,13 +114,16 @@ <h4 style="padding-top: 20px;">Step 4. Calculate a Path</h4>
108114
<form class="form-horizontal" role="form">
109115
<label for="sourceNode" class="col-md-2 control-label">Source Node</label>
110116
<div class="col-md-2">
111-
<input type="text" class="form-control" id="sourceNode" placeholder="Select a source node" ng-model="sourcePath.label" readonly>
117+
<input type="text" class="form-control" id="sourceNode" placeholder="Select a source node" ng-model="sourcePath.label" readonly
118+
data-intro="Select the source node by click on the graph" data-position="bottom">
112119
</div>
113120
<label for="targetNode" class="col-md-2 control-label">Target Node</label>
114121
<div class="col-md-2">
115-
<input type="text" class="form-control" id="targetNode" placeholder="Select a target node" ng-model="targetPath.label" readonly>
122+
<input type="text" class="form-control" id="targetNode" placeholder="Select a target node" ng-model="targetPath.label" readonly
123+
data-intro="Select the target node by click on the graph" data-position="bottom">
116124
</div>
117-
<button class="btn col-md-3 col-md-offset-1" ng-disabled="!pathPosible" ng-click="calculatePath()">Calculate</button>
125+
<button class="btn col-md-3 col-md-offset-1" ng-disabled="!pathPosible" ng-click="calculatePath()"
126+
data-intro="Once source/target nodes are selected, you can launch the sequence diagram generator" data-position="bottom">Calculate</button>
118127
</form>
119128
</div>
120129

‎jsondiscoverer.web/WebContent/app/partials/simple.html

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ <h2>How does it work?</h2>
1616

1717
<div class="row">
1818
<h2>Try it out!</h2>
19+
<div style="float:right; margin-top:-15px; margin-bottom:-30px;">
20+
<button class="btn btn-xs" type="button" ng-click="activateHelp()">Give me some help!</button>
21+
</div>
1922
</div>
2023

2124
<div ng-show="isSecure()">
@@ -29,10 +32,12 @@ <h3>Your JSON document</h3>
2932

3033
<div class="row">
3134
<div class="col-md-10">
32-
<p>Copy/Paste your JSON here <a ng-click="example()">(or use a predefined example)</a>: </p>
35+
<p>Copy/Paste your JSON here <a ng-click="example()"
36+
data-intro="If you just want to test the service, click here to get a test JSON document" data-position="top">(or use an example)</a>: </p>
3337
<form role="form">
3438
<div class="form-group">
35-
<p><textarea rows="10" style="width: 100%; resize: none;" ng-model="json.text"></textarea></p>
39+
<p><textarea rows="10" style="width: 100%; resize: none;" ng-model="json.text"
40+
data-intro="Write (or copy/paste) here the JSON document from which you want to discover the schema (and the data model)" data-position="top"></textarea></p>
3641
</div>
3742
</form>
3843

@@ -42,7 +47,8 @@ <h3>Your JSON document</h3>
4247
<label for="urlJSON" class="control-label" style="font-weight: normal;">...or give us the URL to obtain the JSON:</label>
4348
</div>
4449
<div class="col-md-6">
45-
<input type="url" class="form-control" id="urlJSON" placeholder="URL returning a JSON" ng-model="url">
50+
<input type="url" class="form-control" id="urlJSON" placeholder="URL returning a JSON" ng-model="url"
51+
data-intro="If you have an URL containing the JSON document, just put it here" data-position="bottom">
4652
</div>
4753
<div class="col-md-2">
4854
<button class="btn" ng-disabled="url == ''" ng-click="obtainJSON()">Obtain JSON</button>
@@ -53,15 +59,18 @@ <h3>Your JSON document</h3>
5359

5460
<div class="col-md-2">
5561
<p class="text-center">
56-
<button class="btn btn-block" type="button" ng-click="discover()" ng-disabled="json.text == ''">Discover Schema</button>
62+
<button class="btn btn-block" type="button" ng-click="discover()" ng-disabled="json.text == ''"
63+
data-intro="Click here to launch the discoverer" data-position="top">Discover Schema</button>
5764
<a style="text-decoration: none;" ng-href="{{metamodelFile}}" target="_blank">
58-
<button style="margin-top: 20px;" class="btn btn-block" type="button" ng-disabled="metamodelFile == ''">
65+
<button style="margin-top: 20px;" class="btn btn-block" type="button" ng-disabled="metamodelFile == ''"
66+
data-intro="We work with Eclipse Modeling Framework (EMF) so if you want you can download the schema as an Ecore file" data-position="left">
5967
Download schema<br>
6068
<small>(Save as Ecore)</small>
6169
</button>
6270
</a>
6371
<a style="text-decoration: none;" ng-href="{{modelFile}}" target="_blank">
64-
<button style="margin-top: 10px;" class="btn btn-block" type="button" ng-disabled="modelFile == ''">
72+
<button style="margin-top: 10px;" class="btn btn-block" type="button" ng-disabled="modelFile == ''"
73+
data-intro="You can also download the data model as an XMI file (conforming to the previous Ecore model)" data-position="bottom">
6574
Download data<br>
6675
<small>(Save as XMI)</small>
6776
</button>

‎jsondiscoverer.web/WebContent/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1.0">
99
<link rel="stylesheet" href="css/bootstrap.css">
1010
<link rel="stylesheet" href="css/style.css" media="screen">
11+
<link rel="stylesheet" href="css/chardinjs.css" >
1112
</head>
1213
<body ng-app="jsonDiscoverer">
1314

@@ -87,6 +88,7 @@ <h2 onclick="location.href='#'">Visualize the schema lurking behind your JSON do
8788
<script src="js/underscore-min.js"></script>
8889
<script src="js/raphael-min.js"></script>
8990
<script src="js/sequence-diagram-min.js"></script>
91+
<script src="js/chardinjs.min.js"></script>
9092

9193
<script src="app/app.js"></script>
9294
<script src="app/services/discoverer.js"></script>

0 commit comments

Comments
 (0)