VisualDataWeb · neon12345 · Jun 14, 2025
diff --git a/vowl_v2/data/88x31.png b/vowl_v2/data/88x31.png
diff --git a/vowl_v2/data/d3.v3.min.js b/vowl_v2/data/d3.v3.min.js
diff --git a/vowl_v2/data/favicon.ico b/vowl_v2/data/favicon.ico
diff --git a/vowl_v2/data/pagestyle.css b/vowl_v2/data/pagestyle.css
@@ -0,0 +1,325 @@
+@import url(http://fonts.googleapis.com/css?family=Quicksand|Open+Sans);
+
+/*----------------------------------------------
+        VOWL specification page
+----------------------------------------------*/
+img, iframe { 
+    border: none;
+}
+.hidden { 
+    display:none;
+}
+.clear {
+    clear:both;
+}
+a {
+    color: #2980b9; 
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: underline;
+}
+hr {
+    border-style: solid none none; 
+    border-width: 1px; 
+    border-color: #3498db; 
+    height: 1px;
+}
+change {
+    color: violet;
+}
+/*----------------------------------------------
+        LAYOUT
+----------------------------------------------*/
+body{
+    background:#f5f6f7;
+    font-size:14px;
+    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
+    margin:0;
+    padding:0;  
+}
+#wrapper{ 
+    margin:0 auto; 
+    max-width: 1000px;
+    text-align: justify;  
+    width:80%;
+}
+#wrapper h2 { 
+    font-size: 1.3em; 
+    font-weight: normal; 
+    display: block;
+    margin-top: 1em;
+}
+#wrapper h2 a { 
+    color: #1448F5;
+    font-size: 0.6em;   
+}
+#wrapper h3 { 
+    font-size: 1.2em; 
+    font-weight: normal; 
+    display: block;
+    margin-top: 1em;
+}
+header {
+    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
+    position: relative; 
+}
+header h1 {
+    font-weight: normal; 
+    text-align: left;  
+}
+header h1 span {
+    color: #3498db; 
+    font-family: 'Open Sans', Helvetica, Arial, sans-serif; 
+}
+#visualHome {
+    position: absolute; 
+    right:0; 
+    top:10px;
+}
+#visualHome a {
+    -webkit-border-radius:2px;
+    background: #2980b9; 
+    border-radius:2px;
+    color:#fff;
+    padding:5px;  
+}
+#visualHome a:hover {
+    text-decoration: none; 
+    text-shadow:0 0 2px #111;
+}
+#specification, #applications {
+    margin: 0; 
+    padding: 0;  
+    position: relative;
+    width: 100%; 
+    display: block;
+    overflow: hidden;
+}
+#specification span a {
+    -webkit-border-radius:2px;
+    background: #2980b9;
+    border-radius:2px;
+    color: #fff;
+    display: block;
+    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
+    font-size: 1.8em;
+    padding: 20px;
+    text-align: center;   
+}
+#specification span a:hover { 
+    background:#3498db; 
+    text-decoration: none; 
+}
+#applications {
+    margin: 1em 1em 1em 0;
+}
+.application-wrapper {
+    margin-right: 1em;
+}
+.application {
+    display: inline-block;
+    width: 50%;
+}
+.application {
+    float: left;
+}
+.application + .application {
+    float: right;
+    position: relative;
+    left: 1em;
+}
+.application a {
+    -webkit-border-radius:2px;
+    background: #27ae60;
+    border-radius:2px;
+    color: #fff;
+    display: block; 
+    font-family: 'Quicksand', Helvetica, Arial, sans-serif;
+    font-size: 1.8em; 
+    padding: 20px;
+    text-align: center;
+}
+.application a:hover {
+    background:#2ecc71;
+    text-decoration: none;
+}
+
+footer {
+    margin:0.5em 0 1em; 
+    overflow:hidden;
+    text-align: left; 
+}
+footer p span {
+    float:left; 
+    margin:0;
+    padding:0; 
+}
+footer p span + span { 
+    margin-left:10px;
+    width:87%;
+}
+#content { 
+    margin: 20px;  
+    text-align: center;
+}
+#reset {
+    float: right;
+    position: absolute;
+    right: 5px;
+    top: 5px;  
+}
+#distanceSlider {
+    float: right;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;  
+}
+
+#graph {
+    position: relative;
+    display: inline-block;
+    width:100%;
+    overflow: hidden;
+}
+
+#toc ol li {
+    font-size: 1.2em;
+    padding:0.2em;    
+}
+#example figure {
+    margin: 2.5em 0;
+    text-align: center; 
+}
+#example figure img {
+    width: 80%;
+}
+figure#figIntegrated img {
+    max-width: 863px;
+}
+#example figure figcaption, table caption {
+    font-size: 1.1em;
+    font-style: italic;
+    margin: 0.3em;
+}
+code {
+    background: #D9EBFA;
+    border: dotted 2px #4f81bd; 
+    display: block; 
+    padding: 10px; 
+}
+code span.data {
+    color:red;
+}
+code span.uri  {
+    color:brown;
+} 
+table {  
+    background-color: #fff;
+    border-collapse:collapse;
+    font-size: 1em;
+    text-align: justify;  
+    width:100%;
+}
+table, td { 
+    border: 1px solid #4f81bd;  
+    padding:0.2em;  
+    text-align: left; 
+}
+.tdCenter {
+    text-align: center; 
+    width:30%;
+}
+table th {
+    background-color: #4f81bd;
+    color: #FFFFFF;
+    font-size: 1.2em;
+    padding:8px;
+}
+table th:first-of-type {
+    width:20%;
+}
+.down a {
+    -webkit-border-radius:2px;
+    padding:5px; 
+    background: #2980b9;
+    border-radius:2px; 
+    color:#fff;  
+}
+.down a:hover {
+    text-decoration: none; 
+    text-shadow:0 0 2px #111;
+}
+dt { 
+    font-weight: bold; 
+}
+#graph{
+    background: #fff;
+    border: 1px solid grey;
+}
+/*.colorbox {
+ border: 2px solid #000;
+ width: 30px;
+ float: left;
+ padding: 0px 4px;
+ display: inline;
+ margin-right: 0.5em;
+}*/
+li {
+ margin: 5px;
+}
+
+#browserCheck { /* checking for IE where WebVOWl is not working */
+    background-color: #f00;
+    padding: 5px 0px;
+    text-align: center;
+    width: 100%;
+}
+#browserCheck a {color:#fff;}
+#browserCheck a:hover {text-decoration: underline;}
+
+.indirectHighlighting {
+    fill: #f90;
+}
+
+@media screen and (max-width: 955px){
+    #visualHome{
+        position:absolute;
+        right: 10px;
+        top:50px;
+    }
+    #specification {
+        margin-top: 50px;
+    }
+    .application-wrapper {
+        margin-right: 0;
+    }
+    .application {
+        display: block;
+        clear: both;
+        width: 100%;
+    }
+    .application + .application {
+        margin-top: 1em;
+        left: 0;
+    }
+}
+
+@media print {
+    #visualHome, #video{
+        display: none;
+    }
+    @page  { 
+        margin: 1cm 0.5cm 1cm 0.5cm;
+        size: auto; 
+    } 
+    body {
+        margin:0;
+        padding: 0;
+        width: 100%;
+    }
+    #wrapper {
+        margin:0 auto;
+        padding:0;
+    }
+}
diff --git a/vowl_v2/data/specBrowserWarning.js b/vowl_v2/data/specBrowserWarning.js
@@ -0,0 +1,36 @@
+/* Taken from here: http://stackoverflow.com/a/17907562 */
+var getInternetExplorerVersion = function getInternetExplorerVersionFunct()
+{
+    var   ua
+        , re
+        , rv = -1;
+    if (navigator.appName == 'Microsoft Internet Explorer')
+    {
+        ua = navigator.userAgent;
+        re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
+        if (re.exec(ua) != null)
+            rv = parseFloat( RegExp.$1 );
+    }
+    else if (navigator.appName == 'Netscape')
+    {
+        ua = navigator.userAgent;
+        re  = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
+        if (re.exec(ua) != null)
+            rv = parseFloat( RegExp.$1 );
+    }
+    return rv;
+};
+
+var version = getInternetExplorerVersion();
+if (version > 0 && version <= 11) {
+    var   graph = document.getElementById('graph')
+        , controlDetails = document.getElementById('controlDetails') 
+        , browserCheck = document.getElementById('browserCheck');
+    // hiding any additional menus and features
+
+    graph.style.display = "none";
+    controlDetails.style.display = "none";
+    browserCheck.style.display = "block";
+
+    browserCheck.innerHTML = "The WebVOWL demo does not work in Internet Explorer. Please use another browser, such as <a href=\"http://www.mozilla.org/firefox/\">Mozilla Firefox</a> or <a href=\"https://www.google.com/chrome/\">Google Chrome</a>, to see the demo.";
+}