Skip to content

Commit bb27a67

Browse files
jlcanovasjlcanovas
committed
Merge pull request #11 from SOM-Research/walkthroughs
Overlays to help new users. Merging with master
2 parents f0a3287 + 86a4e33 commit bb27a67

File tree

9 files changed

+138
-15
lines changed

9 files changed

+138
-15
lines changed

‎jsondiscoverer.web/WebContent/app/controllers/advanced.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@ angular.module("jsonDiscoverer").controller("AdvancedDiscovererCtrl", ["$scope",
7070
$scope.alertsGeneral.push({ type: 'error', msg: 'Oops, we found an error in the discovery process. Could you check your JSON and try again?' });
7171
}
7272
);
73+
};
74+
75+
$scope.activateHelp = function() {
76+
$('body').chardinJs('start')
7377
}
7478
}
7579
]);

‎jsondiscoverer.web/WebContent/app/controllers/composition.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,11 @@ angular.module("jsonDiscoverer").controller("CompositionCtrl", ["$scope", "$wind
150150
}
151151
)
152152
};
153+
154+
155+
$scope.activateHelp = function() {
156+
$('body').chardinJs('start')
157+
};
153158
}
154159
]);
155160

‎jsondiscoverer.web/WebContent/app/controllers/simple.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,5 +81,9 @@ angular.module("jsonDiscoverer").controller("SimpleDiscovererCtrl", ["$scope", "
8181
}
8282
);
8383
}
84+
85+
$scope.activateHelp = function() {
86+
$('body').chardinJs('start')
87+
}
8488
}
8589
]);

‎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/css/chardinjs.css

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
.chardinjs-overlay {
2+
position: absolute;
3+
z-index: 999999;
4+
background-color: #000;
5+
opacity: 0;
6+
-webkit-transition: all 0.3s ease-out;
7+
-moz-transition: all 0.3s ease-out;
8+
-ms-transition: all 0.3s ease-out;
9+
-o-transition: all 0.3s ease-out;
10+
transition: all 0.3s ease-out; }
11+
12+
.chardinjs-helper-layer {
13+
position: absolute;
14+
z-index: 9999998;
15+
color: white;
16+
-webkit-transition: all 0.3s ease-out;
17+
-moz-transition: all 0.3s ease-out;
18+
-ms-transition: all 0.3s ease-out;
19+
-o-transition: all 0.3s ease-out;
20+
transition: all 0.3s ease-out; }
21+
.chardinjs-helper-layer.chardinjs-left {
22+
border-left: solid white 1px;
23+
margin-left: -10px; }
24+
.chardinjs-helper-layer.chardinjs-right {
25+
border-right: solid white 1px;
26+
padding-right: 10px; }
27+
.chardinjs-helper-layer.chardinjs-bottom {
28+
border-bottom: solid white 1px;
29+
padding-bottom: 10px; }
30+
.chardinjs-helper-layer.chardinjs-top {
31+
border-top: solid white 1px;
32+
padding-top: 10px; }
33+
34+
.chardinjs-tooltip {
35+
position: absolute;
36+
-webkit-transition: opacity 0.1s ease-out;
37+
-moz-transition: opacity 0.1s ease-out;
38+
-ms-transition: opacity 0.1s ease-out;
39+
-o-transition: opacity 0.1s ease-out;
40+
transition: opacity 0.1s ease-out;
41+
max-width: 200px; }
42+
.chardinjs-tooltip.chardinjs-left {
43+
margin-left: -135px;
44+
padding-right: 10px; }
45+
.chardinjs-tooltip.chardinjs-right {
46+
margin-right: -135px;
47+
padding-left: 10px; }
48+
.chardinjs-tooltip.chardinjs-bottom {
49+
margin-bottom: -50px;
50+
padding-top: 10px; }
51+
.chardinjs-tooltip.chardinjs-top {
52+
margin-top: -50px;
53+
padding-bottom: 10px; }
54+
.chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after, .chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
55+
content: ".";
56+
display: inline-block;
57+
background-color: white;
58+
height: 1px;
59+
overflow: hidden;
60+
position: absolute; }
61+
.chardinjs-tooltip.chardinjs-right:before, .chardinjs-tooltip.chardinjs-left:after {
62+
width: 100px;
63+
top: 50%; }
64+
.chardinjs-tooltip.chardinjs-bottom:before, .chardinjs-tooltip.chardinjs-top:after {
65+
width: 1px;
66+
height: 50px;
67+
left: 50%; }
68+
.chardinjs-tooltip.chardinjs-bottom:before {
69+
top: -50px; }
70+
.chardinjs-tooltip.chardinjs-top:after {
71+
bottom: -50px; }
72+
.chardinjs-tooltip.chardinjs-right:before {
73+
left: -100px; }
74+
.chardinjs-tooltip.chardinjs-left:after {
75+
right: -100px; }
76+
77+
.chardinjs-show-element {
78+
z-index: 9999999;
79+
opacity: 0.8; }
80+
81+
.chardinjs-relative-position {
82+
position: relative; }

‎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

@@ -90,6 +91,7 @@ <h2 onclick="location.href='#'">Visualize the schema lurking behind your JSON do
9091
<script src="js/underscore-min.js"></script>
9192
<script src="js/raphael-min.js"></script>
9293
<script src="js/sequence-diagram-min.js"></script>
94+
<script src="js/chardinjs.min.js"></script>
9395

9496
<script src="app/app.js"></script>
9597
<script src="app/services/discoverer.js"></script>

‎jsondiscoverer.web/WebContent/js/chardinjs.min.js

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)