diff --git a/css/style.css b/css/style.css
index 01743d5..4353964 100644
--- a/css/style.css
+++ b/css/style.css
@@ -59,8 +59,11 @@ div.over2 {
padding-bottom: 20px;
float: left;
height: 520px;
+ position: relative;
}
+
+
#sidebar {
width: 250px;
border: 1px solid;
diff --git a/css/visStyle.css b/css/visStyle.css
new file mode 100644
index 0000000..0fbee99
--- /dev/null
+++ b/css/visStyle.css
@@ -0,0 +1,474 @@
+#visCont {
+ width: 98%;
+ height: 98%;
+ border: 1px solid #ccc;
+ position: absolute;
+ left: 1%;
+ top: 1%;
+ overflow: scroll;
+ background-color: white;
+ z-index: 20;
+ display: none;
+}
+
+/* vis title wrapper */
+#visTitleWrapper{
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+#visTitleWrapper h1{
+ padding-left: 15px;
+}
+
+/* vis content wrapper */
+#visContentWrapper{
+ position: absolute;
+ top: 70px;
+ left: 0;
+}
+
+#visInfo{
+ width: 600px;
+ position: absolute;
+ left: 400px;
+ top: 0;
+}
+#visTitleBodypart{
+ position: absolute;
+ top: 10px;
+ left: 0px;
+}
+#visTitleFileA{
+ position: absolute;
+ top: 25px;
+ left: 0px;
+}
+#visTitleFileB{
+ position: absolute;
+ top: 40px;
+ left: 0px;
+}
+
+/* vis label */
+#visLabels{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+.visLabel{
+ color: #999;
+ background: #eee;
+ text-align: center;
+ position: absolute;
+ padding: 1px 0;
+}
+#visLabelInstframe, #visLabelAngle, #visLabelAspeed, #visLabelAaccel{
+ top: -5px;
+}
+#visLabelInstframe{
+ width: 252px;
+ left: 45px;
+}
+#visLabelAngle, #visLabelAspeed, #visLabelAaccel{
+ width: 300px;
+}
+#visLabelAngle{
+ left: 308px;
+}
+#visLabelAspeed{
+ left: 628px;
+}
+#visLabelAaccel{
+ left: 948px;
+}
+#visLabelBackview, #visLabelSideview{
+ background: grey;
+ color: #fff;
+ width: 212px;
+ left: -80px;
+ -ms-transform: rotate(270deg);
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+}
+#visLabelBackview{
+ top: 118px;
+}
+#visLabelSideview{
+ top: 338px;
+}
+#visLabelOverview{
+ width: 1240px;
+ background: none;
+ color: #999;
+ top: 625px;
+ left: 25px;
+}
+
+/* detailed view */
+/* instFrame */
+#visDetailedView {
+ position: absolute;
+ top: 0px;
+ left: 45px;
+}
+#visInstFrame {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+#visInstFrameP1 {
+ position: absolute;
+ top: 21px;
+ left: 0px;
+}
+#visInstFrameP2 {
+ position: absolute;
+ top: 240px;
+ left: 0px;
+}
+.visInstFrameA {
+ width: 80px;
+ height: 100px;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ border: 1px solid #ccc;
+}
+.visInstFrameB {
+ width: 80px;
+ height: 100px;
+ position: absolute;
+ top: 110px;
+ left: 0px;
+ border: 1px solid #ccc;
+}
+#visInstFrame span{
+ padding: 6px 4px;
+}
+.visInstFrameDiff {
+ width: 160px;
+ height: 210px;
+ position: absolute;
+ top: 0px;
+ left: 90px;
+ border: 1px solid #ccc;
+}
+.visInstFrameDiff .bone{
+ stroke-width: 2px;
+}
+.visInstFrameDiff .joint{
+ r: 5px;
+}
+.joint{
+ fill: #555;
+}
+.bone.A{
+ stroke: rgba(255, 168, 38, 0.7);
+}
+.bone.B{
+ stroke: rgba(3, 181, 234, 0.7)
+}
+.joint.A{
+ fill: rgba(255, 153, 1, 0.7);
+}
+.joint.B{
+ fill: rgba(0, 177, 230, 0.8);
+}
+.joint.highlighted{
+ stroke: black;
+ stroke-width: 2px;
+}
+.bone.shared{}
+.joing.shared{}
+
+/* multiples */
+#visMultiples {
+ position: absolute;
+ top: 0px;
+ left: 260px;
+}
+#visMultiplesP1 {
+ width: 945px;
+ height: 210px;
+ position: absolute;
+ top: 21px;
+ left: 0px;
+ /*border: 1px solid #ccc;*/
+}
+#visMultiplesP2 {
+ width: 945px;
+ height: 210px;
+ position: absolute;
+ top: 240px;
+ left: 0px;
+ /*border: 1px solid #ccc;*/
+}
+.multiplesColumn {
+ position: absolute;
+ top: 0px;
+}
+.multiplesColumn .smallMultiple {
+ width: 300px;
+ height: 60px;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+.multiplesColumn .smallMultiple:nth-child(2n){
+ top: 74px;
+}
+.multiplesColumn .smallMultiple:nth-child(3n){
+ top: 148px;
+}
+#angleCharts{
+ left: 0px;
+}
+#speedCharts{
+ left: 320px;
+}
+#accelerationCharts{
+ left: 640px;
+}
+.lineA, .lineB{
+ fill: none;
+ stroke-width:2px;
+}
+.lineA{
+ stroke: rgba(255, 168, 38, 0.7);
+}
+.lineB{
+ stroke: rgba(3, 181, 234, 0.7)
+}
+.multipleSVG{
+ width: 300px;
+ height: 60px;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+.multipleAxisY {
+ fill: none;
+ stroke: black;
+ stroke-width: 0.5px;
+ transform: translate(4px);
+}
+.multipleAxisY text {
+ font-family: sans-serif;
+ stroke: none;
+ fill: #333 ;
+ font-size: 11px;
+}
+.multipleAxisX path {
+ fill: none;
+ stroke: #333;
+ stroke-width: 0.5px;
+}
+.multipleAxisX text {
+ display: none;
+ stroke: none;
+ fill: #333;
+}
+.highlightWrapper {
+ position: absolute;
+ top: 5px;
+ left: 5px;
+ width: 290px;
+ height: 50px;
+ fill: none;
+ z-index: 100;
+}
+.highlightLine {
+ height: 100%;
+ fill: none;
+ stroke: grey;
+ stroke-width: 1px;
+ stroke-opacity: .75;
+}
+
+.visInstFrameDiff .bone{
+ stroke-width: 2px;
+}
+.visInstFrameDiff .joint{
+ r: 5px;
+}
+.joint{
+ fill: #555;
+}
+.bone.A{
+ stroke: rgba(255, 168, 38, 0.7);
+}
+.bone.B{
+ stroke: rgba(3, 181, 234, 0.7)
+}
+.joint.A{
+ fill: rgba(255, 153, 1, 0.7);
+}
+.joint.B{
+ fill: rgba(0, 177, 230, 0.8);
+}
+.joint.highlighted{
+ stroke: black;
+ stroke-width: 2px;
+}
+.bone{
+ stroke-width: 1px;
+ stroke: grey;
+}
+.bone.shared{}
+.joing.shared{}
+
+/* vis overview */
+/* brusher */
+.brusherWrap{
+ position: absolute;
+ left: 60px;
+}
+
+.brusher{
+}
+
+.brusher .extent{
+ fill-opacity: .125;
+ shape-rendering: crispEdges;
+}
+/* overview streamgraph */
+#visOverview {
+ width: 1200px;
+ height: 180px;
+ position: absolute;
+ top: 480px;
+ left: 25px;
+}
+#visOverviewP1 {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+#visOverviewP2 {
+ position: absolute;
+ top: 70px;
+ left: 0px;
+}
+.visOverviewFrame {
+ width: 40px;
+ height: 50px;
+ position: absolute;
+ top: 10px;
+ left: 0px;
+ overflow: hidden;
+ /*border: 1px solid #ccc;*/
+}
+.visOverviewFrame:last-child {
+ left: 1165px;
+}
+.visOverviewFrame svg{
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.visOverviewChart {
+ width: 1100px;
+ height: 70px;
+ position: absolute;
+ top: 0px;
+ left: 55px;
+ background: #eee;
+}
+.overviewAxis {
+ display: none;
+}
+.stream{
+ stroke: rgba(255,255,255,0.3);
+ stroke-width: 1px;
+}
+
+/* gui components */
+
+.loaderWrap{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: #fff;
+}
+.loader {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 150px;
+ height: 150px;
+}
+
+#visCont .closewindow{
+ position: absolute;
+ width: 30px;
+ height: 30px;
+ top: 10px;
+ right: 10px;
+ cursor: pointer;
+}
+
+#visCont .help{
+ position: absolute;
+ width: 30px;
+ height: 30px;
+ top: 10px;
+ right: 50px;
+ cursor: pointer;
+}
+#visCont .help:hover + #visHelp{
+ opacity: 1;
+ display: block;
+}
+#visHelp{
+ border: 1px solid #ccc;
+ position: absolute;
+ top: 70px;
+ left: 0;
+ display: none;
+ opacity: 0;
+ -webkit-transition: all .3s; /* Safari */
+ transition: all .3s;
+}
+.visHelpBlock{
+ width: 250px;
+ height: 250px;
+ background: rgba(255,255,255,0.8);
+ border: 1px solid #ccc;
+ border-radius: 30px;
+ position: absolute;
+ box-shadow: 0px 0px 15px #ccc;
+}
+.visHelpBlock .visHelpTitle{
+ width: 100%;
+ margin: 20px 0;
+ text-align: center;
+ font-size: 16px;
+ font-weight: bold;
+ font-style: italic;
+}
+.visHelpBlock:nth-child(1){
+ left: 55px;
+ top: 20px;
+ width: 225px;
+ height: 410px;
+}
+.visHelpBlock:nth-child(2){
+ left: 310px;
+ top: 20px;
+ width: 925px;
+ height: 410px;
+}
+.visHelpBlock:nth-child(3){
+ left: 16px;
+ top: 470px;
+ width: 1225px;
+ height: 160px;
+}
+
diff --git a/img/close.svg b/img/close.svg
new file mode 100644
index 0000000..af9b74b
--- /dev/null
+++ b/img/close.svg
@@ -0,0 +1,6 @@
+
+
+
diff --git a/img/help.svg b/img/help.svg
new file mode 100644
index 0000000..36e0c62
--- /dev/null
+++ b/img/help.svg
@@ -0,0 +1,6 @@
+
+
+
diff --git a/img/loader.gif b/img/loader.gif
new file mode 100644
index 0000000..1eb72e8
Binary files /dev/null and b/img/loader.gif differ
diff --git a/index.php b/index.html
similarity index 74%
rename from index.php
rename to index.html
index 7e93450..43051ce 100644
--- a/index.php
+++ b/index.html
@@ -10,6 +10,7 @@
+
@@ -45,6 +46,8 @@
+
+
@@ -122,6 +124,22 @@ function() {
font-family: sans-serif;
font-size: 11px;
}
+
+ #comparison select{
+ margin: 10px;
+ margin-left: 0;
+ display: block;
+ }
+
+ #comparison .takeStartTime{
+ width: 60px;
+ }
+
+ #comparison button{
+ display: block;
+ margin-top: 20px;
+ }
+
@@ -130,7 +148,6 @@ function() {
Mova: Movement Analytics Platform
-
@@ -213,6 +230,98 @@ function() {
+
+
+
MoComp: Movement Comparison
+
+
Bodypart:
+
A: "", from ms to ms
+
B: "", from ms to ms
+
+
+
+
+
Instant Frames
+
Angle
+
Angular Speed
+
Angular Acceleration
+
Back View
+
Side View
+
Difference Overview: Overall angular difference of perspectives. (Drug to brush)
+
+
+
+
+
+

+
+
+