Removed obsolete files
This commit is contained in:
Daniel
@ -33,8 +33,8 @@
|
|||||||
<script src="components/states_indicator/dates/dates.js"></script>
|
<script src="components/states_indicator/dates/dates.js"></script>
|
||||||
|
|
||||||
<!-- CSS-Files -->
|
<!-- CSS-Files -->
|
||||||
<link rel="stylesheet" href="externalFiles/alertify.css">
|
<!-- <link rel="stylesheet" href="externalFiles/alertify.css"> -->
|
||||||
<link rel="stylesheet" href="externalFiles/swiper-bundle.min.css">
|
<!-- <link rel="stylesheet" href="externalFiles/swiper-bundle.min.css"> -->
|
||||||
<link rel="stylesheet" href="cssFiles/SEAWebClientSwiper.css">
|
<link rel="stylesheet" href="cssFiles/SEAWebClientSwiper.css">
|
||||||
<link rel="stylesheet" href="cssFiles/SEAWebClientGroup.css">
|
<link rel="stylesheet" href="cssFiles/SEAWebClientGroup.css">
|
||||||
<link rel="stylesheet" href="cssFiles/SEAWebClientConsole.css">
|
<link rel="stylesheet" href="cssFiles/SEAWebClientConsole.css">
|
||||||
@ -44,7 +44,7 @@
|
|||||||
<script src="externalFiles/alertify.js"></script>
|
<script src="externalFiles/alertify.js"></script>
|
||||||
<script src="externalFiles/eventsource.js"></script>
|
<script src="externalFiles/eventsource.js"></script>
|
||||||
<!-- <script src="externalFiles/d3.min.js"></script> -->
|
<!-- <script src="externalFiles/d3.min.js"></script> -->
|
||||||
<script src="externalFiles/swiper-bundle.min.js"></script>
|
<!-- <script src="externalFiles/swiper-bundle.min.js"></script> -->
|
||||||
<!-- <script src="externalFiles/Chart.bundle.min.js"></script> -->
|
<!-- <script src="externalFiles/Chart.bundle.min.js"></script> -->
|
||||||
<script src="externalFiles/chart.umd.min.js"></script>
|
<script src="externalFiles/chart.umd.min.js"></script>
|
||||||
<script src="externalFiles/luxon.min.js"></script>
|
<script src="externalFiles/luxon.min.js"></script>
|
||||||
|
|||||||
@ -1,96 +0,0 @@
|
|||||||
<!--- OBSOLETE! -->
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
|
|
||||||
<meta name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
||||||
<meta name="apple-mobile-web-app-status-bar-style"
|
|
||||||
content="black-translucent" />
|
|
||||||
<title>SEAWebClient_SelectInstrument</title>
|
|
||||||
<!-- CSS-Files -->
|
|
||||||
<link rel="stylesheet" href="cssFiles/SEAWebClientStart.css">
|
|
||||||
<!-- javascript-Files -->
|
|
||||||
<script src="jsFiles/SEAWebClientStart.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="start-panel">
|
|
||||||
<span class="start-text-wrapper">select instrument</span>
|
|
||||||
</div>
|
|
||||||
<div class="start-content">
|
|
||||||
<!-- div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8850/SEAWebClient.html") -->
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8802/SEAWebClient.html")>HRPT</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8803/SEAWebClient.html")>ZEBRA</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8804/SEAWebClient.html")>POLDI</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8805/SEAWebClient.html")>FOCUS</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8806/SEAWebClient.html")>TASP</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8807/SEAWebClient.html")>RITA2</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8808/SEAWebClient.html")>EIGER</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8809/SEAWebClient.html")>SANS 1</div>
|
|
||||||
<!-- div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8859/SEAWebClient.html") -->
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8860/SEAWebClient.html")>AMOR</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8861/SEAWebClient.html")>BOA</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8840/SEAWebClient.html")>PREP0</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8841/SEAWebClient.html")>PREP1</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8842/SEAWebClient.html")>PREP2</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8843/SEAWebClient.html")>PREP3</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8844/SEAWebClient.html")>PREP4</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8845/SEAWebClient.html")>PREP5</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8846/SEAWebClient.html")>PREP6</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8847/SEAWebClient.html")>PREP7</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8848/SEAWebClient.html")>PREP8</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8849/SEAWebClient.html")>PREP9</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8850/SEAWebClient.html")>PREPA</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8851/SEAWebClient.html")>PREPB</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8852/SEAWebClient.html")>PREPC</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8853/SEAWebClient.html")>PREPD</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8860/SEAWebClient.html")>LAB0</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8861/SEAWebClient.html")>LAB1</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8862/SEAWebClient.html")>LAB2</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8863/SEAWebClient.html")>LAB3</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8864/SEAWebClient.html")>LAB4</div>
|
|
||||||
<div class="start-row-links start-link" tabindex = 0 onclick = followLink("http://samenv.psi.ch:8869/SEAWebClient.html")>PPMS</div>
|
|
||||||
|
|
||||||
<div class="start-settings">
|
|
||||||
<div class = start-settings-label>
|
|
||||||
<span>settings</span>
|
|
||||||
<span class = "start-settings-show-hide" onclick = toggleSettings()>show</span>
|
|
||||||
</div>
|
|
||||||
<div class="start-settings-checkboxes">
|
|
||||||
<div class="start-row start-row-checkboxes"> <span class="start-left">show graphics?
|
|
||||||
</span> <span class="start-right"> <input id="check0" name = "sg"
|
|
||||||
class="start-checkbox" type="checkbox"></input> <label for="check0"
|
|
||||||
class="start-label"></label>
|
|
||||||
</span> </div>
|
|
||||||
<div class="start-row start-row-checkboxes"> <span class="start-left">show console?
|
|
||||||
</span> <span class="start-right"> <input id="check1" name = "sc"
|
|
||||||
class="start-checkbox" type="checkbox" checked></input> <label for="check1"
|
|
||||||
class="start-label"></label>
|
|
||||||
</span> </div>
|
|
||||||
<div class="start-row start-row-checkboxes"> <span class="start-left">show overview?
|
|
||||||
</span> <span class="start-right"> <input id="check2" name = "so"
|
|
||||||
class="start-checkbox" type="checkbox" checked></input> <label for="check2"
|
|
||||||
class="start-label"></label>
|
|
||||||
</span> </div>
|
|
||||||
<div class="start-row start-row-checkboxes"> <span class="start-left">show main?
|
|
||||||
</span> <span class="start-right"> <input id="check3" name = "sm"
|
|
||||||
class="start-checkbox" type="checkbox" checked></input> <label for="check3"
|
|
||||||
class="start-label"></label>
|
|
||||||
</span> </div>
|
|
||||||
<div class="start-row start-row-checkboxes"> <span class="start-left">debug communication?
|
|
||||||
</span> <span class="start-right"> <input id="check4" name = "dc"
|
|
||||||
class="start-checkbox" type="checkbox"></input> <label for="check4"
|
|
||||||
class="start-label"></label>
|
|
||||||
</span> </div>
|
|
||||||
<div class="start-row start-row-checkboxes"> <span class="start-left">debug graphics?
|
|
||||||
</span> <span class="start-right"> <input id="check5" name = "dg"
|
|
||||||
class="start-checkbox" type="checkbox"></input> <label for="check5"
|
|
||||||
class="start-label"></label>
|
|
||||||
</span> </div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,150 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
||||||
<style>
|
|
||||||
.footer {
|
|
||||||
background: #ccc;
|
|
||||||
padding:5px;
|
|
||||||
overflow: auto;
|
|
||||||
height:30px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="console" class=code>
|
|
||||||
<br>
|
|
||||||
<br>
|
|
||||||
</div>
|
|
||||||
<div class=footer>
|
|
||||||
<form id="command_form" method="GET">
|
|
||||||
<input type=input id=commandline size=80>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
function getJSON(url, successHandler, errorHandler) {
|
|
||||||
var xhr = typeof XMLHttpRequest != 'undefined'
|
|
||||||
? new XMLHttpRequest()
|
|
||||||
: new ActiveXObject('Microsoft.XMLHTTP');
|
|
||||||
console.log("fired JSON request", url)
|
|
||||||
xhr.open('get', url, true);
|
|
||||||
xhr.onreadystatechange = function() {
|
|
||||||
console.log(xhr)
|
|
||||||
var status;
|
|
||||||
var data;
|
|
||||||
// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
|
|
||||||
if (xhr.readyState == 4) { // `DONE`
|
|
||||||
status = xhr.status;
|
|
||||||
if (status == 200) {
|
|
||||||
data = JSON.parse(xhr.responseText);
|
|
||||||
successHandler && successHandler(data);
|
|
||||||
} else {
|
|
||||||
errorHandler && errorHandler(status);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send();
|
|
||||||
};
|
|
||||||
|
|
||||||
var historyElement = document.getElementById("console")
|
|
||||||
// copy query
|
|
||||||
var evtSrc = new EventSource("http://localhost:5000/update");
|
|
||||||
|
|
||||||
function htmlEscape(str) {
|
|
||||||
return str
|
|
||||||
.replace(/&/g, '&')
|
|
||||||
.replace(/"/g, '"')
|
|
||||||
.replace(/'/g, ''')
|
|
||||||
.replace(/</g, '<')
|
|
||||||
.replace(/>/g, '>');
|
|
||||||
}
|
|
||||||
|
|
||||||
var our_id=""
|
|
||||||
var oldtop = -1
|
|
||||||
|
|
||||||
evtSrc.onmessage = function(e) {
|
|
||||||
var message = JSON.parse(e.data)
|
|
||||||
console.log(message)
|
|
||||||
if (message.type == "id") {
|
|
||||||
our_id = message.id
|
|
||||||
var test = "xxx"
|
|
||||||
getJSON(
|
|
||||||
"http://localhost:5000/console?id="+our_id,
|
|
||||||
function(message) { console.log('msg', message, test); },
|
|
||||||
function(status) { console.log('stat', status); }
|
|
||||||
);
|
|
||||||
} else if (message.type == 'command' || message.type == 'reply') {
|
|
||||||
pre = ""
|
|
||||||
post = ""
|
|
||||||
if (message.type == 'command') {
|
|
||||||
pre += "<font color='blue'><br>"
|
|
||||||
post += "</font>"
|
|
||||||
}
|
|
||||||
if (message.origin == 'self') {
|
|
||||||
pre += "<b>"
|
|
||||||
post = "</b>" + post
|
|
||||||
}
|
|
||||||
historyElement.innerHTML += pre + htmlEscape(message.line) + post + "<br>\n"
|
|
||||||
}
|
|
||||||
/*
|
|
||||||
var doc = document.documentElement
|
|
||||||
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
|
|
||||||
var h = window.innerHeight || window.clientHeight
|
|
||||||
var d = document.body.scrollHeight
|
|
||||||
*/
|
|
||||||
window.scrollTo(0,document.body.scrollHeight)
|
|
||||||
/*
|
|
||||||
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
|
|
||||||
var h = window.innerHeight
|
|
||||||
var d = document.body.scrollHeight
|
|
||||||
console.log(oldtop + oldh, top + h)
|
|
||||||
*/
|
|
||||||
};
|
|
||||||
|
|
||||||
evtSrc.onerror = function(e) {
|
|
||||||
historyElement.innerHTML += "connection lost"
|
|
||||||
evtSrc.close()
|
|
||||||
};
|
|
||||||
|
|
||||||
function do_command() {
|
|
||||||
celm = document.getElementById("commandline")
|
|
||||||
cmd = encodeURI(celm.value);
|
|
||||||
celm.value = ""
|
|
||||||
oldtop = -1
|
|
||||||
if (our_id != "") {
|
|
||||||
cmd += "&id=" + our_id
|
|
||||||
}
|
|
||||||
console.log("http://localhost:5000/sendcommand?command="+cmd)
|
|
||||||
getJSON(
|
|
||||||
"http://localhost:5000/sendcommand?command="+cmd,
|
|
||||||
function(message) { console.log('message', message); },
|
|
||||||
function(status) { console.log('status', status); }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handle_submit(evt) {
|
|
||||||
evt.preventDefault()
|
|
||||||
do_command()
|
|
||||||
}
|
|
||||||
|
|
||||||
command_form = document.getElementById("command_form")
|
|
||||||
if (command_form.addEventListener) {
|
|
||||||
command_form.addEventListener("submit", handle_submit, true);
|
|
||||||
} else {
|
|
||||||
command_form.attachEvent('onsubmit', handle_submit);
|
|
||||||
}
|
|
||||||
|
|
||||||
window.onbeforeunload = closingCode;
|
|
||||||
function closingCode(){
|
|
||||||
console.log("CLOSE")
|
|
||||||
evtSrc.close()
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,190 +0,0 @@
|
|||||||
@CHARSET "UTF-8";
|
|
||||||
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
meta, body {
|
|
||||||
font-family: sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
|
||||||
/* PANEL */
|
|
||||||
.start-panel {
|
|
||||||
position: fixed;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
z-index: 1;
|
|
||||||
color: white;
|
|
||||||
background: #303030;
|
|
||||||
width: 100%;
|
|
||||||
height: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
padding-left: 30px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-text-wrapper {
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
|
||||||
/* CONTENT */
|
|
||||||
.start-content {
|
|
||||||
padding: 60px 40px 30px 40px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-row-links {
|
|
||||||
padding: 4px 0px 4px 0px;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 24px;
|
|
||||||
display: block;
|
|
||||||
border-bottom: dotted darkgray 2px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* %%%%%%%%%% links %%%%%%%%%%*/
|
|
||||||
.start-link {
|
|
||||||
transition: 0.4s;
|
|
||||||
cursor: pointer;
|
|
||||||
color: steelblue;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-link:focus {
|
|
||||||
color: orangered;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-link:hover {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-link:active {
|
|
||||||
color: orangered;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* %%%%%%%%%% settings %%%%%%%%%%*/
|
|
||||||
.start-settings {
|
|
||||||
color: white;
|
|
||||||
background: #303030;
|
|
||||||
margin-top: 30px;
|
|
||||||
padding: 10px 20px 10px 20px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-settings-label {
|
|
||||||
border-bottom: solid darkgray 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-settings-show-hide {
|
|
||||||
float: right;
|
|
||||||
color: lightgray;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-settings-show-hide:focus {
|
|
||||||
color: orangered;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-settings-show-hide:hover {
|
|
||||||
color: gray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-settings-show-hide:active {
|
|
||||||
color: orangered;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-settings-checkboxes {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-row-checkboxes {
|
|
||||||
border-bottom: dotted darkgray 2px;
|
|
||||||
height: 28px;
|
|
||||||
padding-left: 4px;
|
|
||||||
padding-right: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-left {
|
|
||||||
min-height: 24px;
|
|
||||||
line-height: 24px;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-right {
|
|
||||||
min-height: 24px;
|
|
||||||
line-height: 24px;
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
|
|
||||||
/* CHECKBOX */
|
|
||||||
.start-checkbox {
|
|
||||||
opacity: 0;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-checkbox + .start-label {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-checkbox:focus+.start-label {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-checkbox+.start-label::before {
|
|
||||||
content: ' ';
|
|
||||||
position: absolute;
|
|
||||||
left: -24px;
|
|
||||||
top: 2px;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
display: block;
|
|
||||||
background: lightgray;
|
|
||||||
border: 2px solid dimgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-checkbox+.start-label::after {
|
|
||||||
content: ' ';
|
|
||||||
position: absolute;
|
|
||||||
left: -19px;
|
|
||||||
top: 7px;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
display: block;
|
|
||||||
z-index: 1;
|
|
||||||
background-color: dimgray;
|
|
||||||
-ms-transition: all .2s ease;
|
|
||||||
-webkit-transition: all .2s ease;
|
|
||||||
transition: all .3s ease;
|
|
||||||
-ms-transform: scale(0);
|
|
||||||
-webkit-transform: scale(0);
|
|
||||||
transform: scale(0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-checkbox:checked+.start-label::after {
|
|
||||||
-ms-transform: scale(1);
|
|
||||||
-webkit-transform: scale(1);
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,678 +0,0 @@
|
|||||||
//'use strict';
|
|
||||||
|
|
||||||
import {Chart} from 'chart.js';
|
|
||||||
import Hammer from 'hammerjs';
|
|
||||||
|
|
||||||
var helpers = Chart.helpers;
|
|
||||||
|
|
||||||
// Take the zoom namespace of Chart
|
|
||||||
var zoomNS = Chart.Zoom = Chart.Zoom || {};
|
|
||||||
|
|
||||||
// Where we store functions to handle different scale types
|
|
||||||
var zoomFunctions = zoomNS.zoomFunctions = zoomNS.zoomFunctions || {};
|
|
||||||
var panFunctions = zoomNS.panFunctions = zoomNS.panFunctions || {};
|
|
||||||
|
|
||||||
function resolveOptions(chart, options) {
|
|
||||||
var deprecatedOptions = {};
|
|
||||||
if (typeof chart.options.pan !== 'undefined') {
|
|
||||||
deprecatedOptions.pan = chart.options.pan;
|
|
||||||
}
|
|
||||||
if (typeof chart.options.zoom !== 'undefined') {
|
|
||||||
deprecatedOptions.zoom = chart.options.zoom;
|
|
||||||
}
|
|
||||||
var props = chart.$zoom;
|
|
||||||
options = props._options = helpers.merge({}, [options, deprecatedOptions]);
|
|
||||||
|
|
||||||
// Install listeners. Do this dynamically based on options so that we can turn zoom on and off
|
|
||||||
// We also want to make sure listeners aren't always on. E.g. if you're scrolling down a page
|
|
||||||
// and the mouse goes over a chart you don't want it intercepted unless the plugin is enabled
|
|
||||||
var node = props._node;
|
|
||||||
var zoomEnabled = options.zoom && options.zoom.enabled;
|
|
||||||
var dragEnabled = options.zoom.drag;
|
|
||||||
if (zoomEnabled && !dragEnabled) {
|
|
||||||
node.addEventListener('wheel', props._wheelHandler);
|
|
||||||
} else {
|
|
||||||
node.removeEventListener('wheel', props._wheelHandler);
|
|
||||||
}
|
|
||||||
if (zoomEnabled && dragEnabled) {
|
|
||||||
node.addEventListener('mousedown', props._mouseDownHandler);
|
|
||||||
node.ownerDocument.addEventListener('mouseup', props._mouseUpHandler);
|
|
||||||
} else {
|
|
||||||
node.removeEventListener('mousedown', props._mouseDownHandler);
|
|
||||||
node.removeEventListener('mousemove', props._mouseMoveHandler);
|
|
||||||
node.ownerDocument.removeEventListener('mouseup', props._mouseUpHandler);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function storeOriginalOptions(chart) {
|
|
||||||
var originalOptions = chart.$zoom._originalOptions;
|
|
||||||
helpers.each(chart.scales, function(scale) {
|
|
||||||
if (!originalOptions[scale.id]) {
|
|
||||||
originalOptions[scale.id] = helpers.clone(scale.options);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
helpers.each(originalOptions, function(opt, key) {
|
|
||||||
if (!chart.scales[key]) {
|
|
||||||
delete originalOptions[key];
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param {string} mode can be 'x', 'y' or 'xy'
|
|
||||||
* @param {string} dir can be 'x' or 'y'
|
|
||||||
* @param {Chart} chart instance of the chart in question
|
|
||||||
*/
|
|
||||||
function directionEnabled(mode, dir, chart) {
|
|
||||||
if (mode === undefined) {
|
|
||||||
return true;
|
|
||||||
} else if (typeof mode === 'string') {
|
|
||||||
return mode.indexOf(dir) !== -1;
|
|
||||||
} else if (typeof mode === 'function') {
|
|
||||||
return mode({chart: chart}).indexOf(dir) !== -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function rangeMaxLimiter(zoomPanOptions, newMax) {
|
|
||||||
if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMax &&
|
|
||||||
!helpers.isNullOrUndef(zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes])) {
|
|
||||||
var rangeMax = zoomPanOptions.rangeMax[zoomPanOptions.scaleAxes];
|
|
||||||
if (newMax > rangeMax) {
|
|
||||||
newMax = rangeMax;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return newMax;
|
|
||||||
}
|
|
||||||
|
|
||||||
function rangeMinLimiter(zoomPanOptions, newMin) {
|
|
||||||
if (zoomPanOptions.scaleAxes && zoomPanOptions.rangeMin &&
|
|
||||||
!helpers.isNullOrUndef(zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes])) {
|
|
||||||
var rangeMin = zoomPanOptions.rangeMin[zoomPanOptions.scaleAxes];
|
|
||||||
if (newMin < rangeMin) {
|
|
||||||
newMin = rangeMin;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return newMin;
|
|
||||||
}
|
|
||||||
|
|
||||||
function zoomCategoryScale(scale, zoom, center, zoomOptions) {
|
|
||||||
var labels = scale.chart.data.labels;
|
|
||||||
var minIndex = scale.min;
|
|
||||||
var lastLabelIndex = labels.length - 1;
|
|
||||||
var maxIndex = scale.max;
|
|
||||||
var sensitivity = zoomOptions.sensitivity;
|
|
||||||
var chartCenter = scale.isHorizontal() ? scale.left + (scale.width / 2) : scale.top + (scale.height / 2);
|
|
||||||
var centerPointer = scale.isHorizontal() ? center.x : center.y;
|
|
||||||
|
|
||||||
zoomNS.zoomCumulativeDelta = zoom > 1 ? zoomNS.zoomCumulativeDelta + 1 : zoomNS.zoomCumulativeDelta - 1;
|
|
||||||
|
|
||||||
if (Math.abs(zoomNS.zoomCumulativeDelta) > sensitivity) {
|
|
||||||
if (zoomNS.zoomCumulativeDelta < 0) {
|
|
||||||
if (centerPointer >= chartCenter) {
|
|
||||||
if (minIndex <= 0) {
|
|
||||||
maxIndex = Math.min(lastLabelIndex, maxIndex + 1);
|
|
||||||
} else {
|
|
||||||
minIndex = Math.max(0, minIndex - 1);
|
|
||||||
}
|
|
||||||
} else if (centerPointer < chartCenter) {
|
|
||||||
if (maxIndex >= lastLabelIndex) {
|
|
||||||
minIndex = Math.max(0, minIndex - 1);
|
|
||||||
} else {
|
|
||||||
maxIndex = Math.min(lastLabelIndex, maxIndex + 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
zoomNS.zoomCumulativeDelta = 0;
|
|
||||||
} else if (zoomNS.zoomCumulativeDelta > 0) {
|
|
||||||
if (centerPointer >= chartCenter) {
|
|
||||||
minIndex = minIndex < maxIndex ? minIndex = Math.min(maxIndex, minIndex + 1) : minIndex;
|
|
||||||
} else if (centerPointer < chartCenter) {
|
|
||||||
maxIndex = maxIndex > minIndex ? maxIndex = Math.max(minIndex, maxIndex - 1) : maxIndex;
|
|
||||||
}
|
|
||||||
zoomNS.zoomCumulativeDelta = 0;
|
|
||||||
}
|
|
||||||
scale.options.min = rangeMinLimiter(zoomOptions, labels[minIndex]);
|
|
||||||
scale.options.max = rangeMaxLimiter(zoomOptions, labels[maxIndex]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function zoomNumericalScale(scale, zoom, center, zoomOptions) {
|
|
||||||
var range = scale.max - scale.min;
|
|
||||||
var newDiff = range * (zoom - 1);
|
|
||||||
|
|
||||||
var centerPoint = scale.isHorizontal() ? center.x : center.y;
|
|
||||||
var minPercent = (scale.getValueForPixel(centerPoint) - scale.min) / range;
|
|
||||||
var maxPercent = 1 - minPercent;
|
|
||||||
|
|
||||||
var minDelta = newDiff * minPercent;
|
|
||||||
var maxDelta = newDiff * maxPercent;
|
|
||||||
|
|
||||||
console.log("SCOPT", scale.options)
|
|
||||||
scale.options.min = rangeMinLimiter(zoomOptions, scale.min + minDelta);
|
|
||||||
scale.options.max = rangeMaxLimiter(zoomOptions, scale.max - maxDelta);
|
|
||||||
}
|
|
||||||
|
|
||||||
function zoomScale(scale, zoom, center, zoomOptions) {
|
|
||||||
var fn = zoomFunctions[scale.type];
|
|
||||||
if (fn) {
|
|
||||||
fn(scale, zoom, center, zoomOptions);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param chart The chart instance
|
|
||||||
* @param {number} percentZoomX The zoom percentage in the x direction
|
|
||||||
* @param {number} percentZoomY The zoom percentage in the y direction
|
|
||||||
* @param {{x: number, y: number}} focalPoint The x and y coordinates of zoom focal point. The point which doesn't change while zooming. E.g. the location of the mouse cursor when "drag: false"
|
|
||||||
* @param {string} whichAxes `xy`, 'x', or 'y'
|
|
||||||
* @param {number} animationDuration Duration of the animation of the redraw in milliseconds
|
|
||||||
*/
|
|
||||||
function doZoom(chart, percentZoomX, percentZoomY, focalPoint, whichAxes, animationDuration) {
|
|
||||||
var ca = chart.chartArea;
|
|
||||||
if (!focalPoint) {
|
|
||||||
focalPoint = {
|
|
||||||
x: (ca.left + ca.right) / 2,
|
|
||||||
y: (ca.top + ca.bottom) / 2,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
var zoomOptions = chart.$zoom._options.zoom;
|
|
||||||
|
|
||||||
if (zoomOptions.enabled) {
|
|
||||||
storeOriginalOptions(chart);
|
|
||||||
// Do the zoom here
|
|
||||||
var zoomMode = typeof zoomOptions.mode === 'function' ? zoomOptions.mode({chart: chart}) : zoomOptions.mode;
|
|
||||||
|
|
||||||
// Which axe should be modified when figers were used.
|
|
||||||
var _whichAxes;
|
|
||||||
if (zoomMode === 'xy' && whichAxes !== undefined) {
|
|
||||||
// based on fingers positions
|
|
||||||
_whichAxes = whichAxes;
|
|
||||||
} else {
|
|
||||||
// no effect
|
|
||||||
_whichAxes = 'xy';
|
|
||||||
}
|
|
||||||
|
|
||||||
helpers.each(chart.scales, function(scale) {
|
|
||||||
if (scale.isHorizontal() && directionEnabled(zoomMode, 'x', chart) && directionEnabled(_whichAxes, 'x', chart)) {
|
|
||||||
zoomOptions.scaleAxes = 'x';
|
|
||||||
zoomScale(scale, percentZoomX, focalPoint, zoomOptions);
|
|
||||||
} else if (!scale.isHorizontal() && directionEnabled(zoomMode, 'y', chart) && directionEnabled(_whichAxes, 'y', chart)) {
|
|
||||||
// Do Y zoom
|
|
||||||
zoomOptions.scaleAxes = 'y';
|
|
||||||
zoomScale(scale, percentZoomY, focalPoint, zoomOptions);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (animationDuration) {
|
|
||||||
// needs to create specific animation mode
|
|
||||||
if (!chart.options.animation.zoom) {
|
|
||||||
chart.options.animation.zoom = {
|
|
||||||
duration: animationDuration,
|
|
||||||
easing: 'easeOutQuad',
|
|
||||||
};
|
|
||||||
}
|
|
||||||
chart.update('zoom');
|
|
||||||
} else {
|
|
||||||
chart.update('none');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (typeof zoomOptions.onZoom === 'function') {
|
|
||||||
zoomOptions.onZoom({chart: chart});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function panCategoryScale(scale, delta, panOptions) {
|
|
||||||
var labels = scale.chart.data.labels;
|
|
||||||
var lastLabelIndex = labels.length - 1;
|
|
||||||
var offsetAmt = Math.max(scale.ticks.length, 1);
|
|
||||||
var panSpeed = panOptions.speed;
|
|
||||||
var minIndex = scale.min;
|
|
||||||
var step = Math.round(scale.width / (offsetAmt * panSpeed));
|
|
||||||
var maxIndex;
|
|
||||||
|
|
||||||
zoomNS.panCumulativeDelta += delta;
|
|
||||||
|
|
||||||
minIndex = zoomNS.panCumulativeDelta > step ? Math.max(0, minIndex - 1) : zoomNS.panCumulativeDelta < -step ? Math.min(lastLabelIndex - offsetAmt + 1, minIndex + 1) : minIndex;
|
|
||||||
zoomNS.panCumulativeDelta = minIndex !== scale.min ? 0 : zoomNS.panCumulativeDelta;
|
|
||||||
|
|
||||||
maxIndex = Math.min(lastLabelIndex, minIndex + offsetAmt - 1);
|
|
||||||
|
|
||||||
scale.options.min = rangeMinLimiter(panOptions, labels[minIndex]);
|
|
||||||
scale.options.max = rangeMaxLimiter(panOptions, labels[maxIndex]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function panNumericalScale(scale, delta, panOptions) {
|
|
||||||
var scaleOpts = scale.options;
|
|
||||||
var prevStart = scale.min;
|
|
||||||
var prevEnd = scale.max;
|
|
||||||
var newMin = scale.getValueForPixel(scale.getPixelForValue(prevStart) - delta);
|
|
||||||
var newMax = scale.getValueForPixel(scale.getPixelForValue(prevEnd) - delta);
|
|
||||||
var rangeMin = newMin;
|
|
||||||
var rangeMax = newMax;
|
|
||||||
var diff;
|
|
||||||
|
|
||||||
if (panOptions.scaleAxes && panOptions.rangeMin &&
|
|
||||||
!helpers.isNullOrUndef(panOptions.rangeMin[panOptions.scaleAxes])) {
|
|
||||||
rangeMin = panOptions.rangeMin[panOptions.scaleAxes];
|
|
||||||
}
|
|
||||||
if (panOptions.scaleAxes && panOptions.rangeMax &&
|
|
||||||
!helpers.isNullOrUndef(panOptions.rangeMax[panOptions.scaleAxes])) {
|
|
||||||
rangeMax = panOptions.rangeMax[panOptions.scaleAxes];
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("SCOPT pan", scaleOpts);
|
|
||||||
|
|
||||||
if (newMin >= rangeMin && newMax <= rangeMax) {
|
|
||||||
scaleOpts.min = newMin;
|
|
||||||
scaleOpts.max = newMax;
|
|
||||||
} else if (newMin < rangeMin) {
|
|
||||||
diff = prevStart - rangeMin;
|
|
||||||
scaleOpts.min = rangeMin;
|
|
||||||
scaleOpts.max = prevEnd - diff;
|
|
||||||
} else if (newMax > rangeMax) {
|
|
||||||
diff = rangeMax - prevEnd;
|
|
||||||
scaleOpts.max = rangeMax;
|
|
||||||
scaleOpts.min = prevStart + diff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function panScale(scale, delta, panOptions) {
|
|
||||||
var fn = panFunctions[scale.type];
|
|
||||||
if (fn) {
|
|
||||||
fn(scale, delta, panOptions);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function doPan(chartInstance, deltaX, deltaY) {
|
|
||||||
storeOriginalOptions(chartInstance);
|
|
||||||
var panOptions = chartInstance.$zoom._options.pan;
|
|
||||||
if (panOptions.enabled) {
|
|
||||||
var panMode = typeof panOptions.mode === 'function' ? panOptions.mode({chart: chartInstance}) : panOptions.mode;
|
|
||||||
|
|
||||||
helpers.each(chartInstance.scales, function(scale) {
|
|
||||||
if (scale.isHorizontal() && directionEnabled(panMode, 'x', chartInstance) && deltaX !== 0) {
|
|
||||||
panOptions.scaleAxes = 'x';
|
|
||||||
panScale(scale, deltaX, panOptions);
|
|
||||||
} else if (!scale.isHorizontal() && directionEnabled(panMode, 'y', chartInstance) && deltaY !== 0) {
|
|
||||||
panOptions.scaleAxes = 'y';
|
|
||||||
panScale(scale, deltaY, panOptions);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
chartInstance.update('none');
|
|
||||||
|
|
||||||
if (typeof panOptions.onPan === 'function') {
|
|
||||||
panOptions.onPan({chart: chartInstance});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getXAxis(chartInstance) {
|
|
||||||
var scales = chartInstance.scales;
|
|
||||||
var scaleIds = Object.keys(scales);
|
|
||||||
for (var i = 0; i < scaleIds.length; i++) {
|
|
||||||
var scale = scales[scaleIds[i]];
|
|
||||||
|
|
||||||
if (scale.isHorizontal()) {
|
|
||||||
return scale;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getYAxis(chartInstance) {
|
|
||||||
var scales = chartInstance.scales;
|
|
||||||
var scaleIds = Object.keys(scales);
|
|
||||||
for (var i = 0; i < scaleIds.length; i++) {
|
|
||||||
var scale = scales[scaleIds[i]];
|
|
||||||
|
|
||||||
if (!scale.isHorizontal()) {
|
|
||||||
return scale;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Store these for later
|
|
||||||
zoomNS.zoomFunctions.category = zoomCategoryScale;
|
|
||||||
zoomNS.zoomFunctions.time = zoomNumericalScale;
|
|
||||||
zoomNS.zoomFunctions.linear = zoomNumericalScale;
|
|
||||||
zoomNS.zoomFunctions.logarithmic = zoomNumericalScale;
|
|
||||||
zoomNS.panFunctions.category = panCategoryScale;
|
|
||||||
zoomNS.panFunctions.time = panNumericalScale;
|
|
||||||
zoomNS.panFunctions.linear = panNumericalScale;
|
|
||||||
zoomNS.panFunctions.logarithmic = panNumericalScale;
|
|
||||||
// Globals for category pan and zoom
|
|
||||||
zoomNS.panCumulativeDelta = 0;
|
|
||||||
zoomNS.zoomCumulativeDelta = 0;
|
|
||||||
|
|
||||||
// Chartjs Zoom Plugin
|
|
||||||
var zoomPlugin = {
|
|
||||||
id: 'zoom',
|
|
||||||
|
|
||||||
defaults: {
|
|
||||||
pan: {
|
|
||||||
enabled: false,
|
|
||||||
mode: 'xy',
|
|
||||||
speed: 20,
|
|
||||||
threshold: 10
|
|
||||||
},
|
|
||||||
zoom: {
|
|
||||||
enabled: false,
|
|
||||||
mode: 'xy',
|
|
||||||
sensitivity: 3,
|
|
||||||
speed: 0.1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
afterInit: function(chartInstance) {
|
|
||||||
|
|
||||||
chartInstance.resetZoom = function() {
|
|
||||||
storeOriginalOptions(chartInstance);
|
|
||||||
var originalOptions = chartInstance.$zoom._originalOptions;
|
|
||||||
helpers.each(chartInstance.scales, function(scale) {
|
|
||||||
|
|
||||||
var options = scale.options;
|
|
||||||
if (originalOptions[scale.id]) {
|
|
||||||
options.min = originalOptions[scale.id].min;
|
|
||||||
options.max = originalOptions[scale.id].max;
|
|
||||||
} else {
|
|
||||||
delete options.min;
|
|
||||||
delete options.max;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
chartInstance.update();
|
|
||||||
};
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeUpdate: function(chart, args, options) {
|
|
||||||
resolveOptions(chart, options);
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeInit: function(chartInstance, pluginOptions) {
|
|
||||||
chartInstance.$zoom = {
|
|
||||||
_originalOptions: {}
|
|
||||||
};
|
|
||||||
var node = chartInstance.$zoom._node = chartInstance.ctx.canvas;
|
|
||||||
resolveOptions(chartInstance, pluginOptions);
|
|
||||||
|
|
||||||
var options = chartInstance.$zoom._options;
|
|
||||||
var panThreshold = options.pan && options.pan.threshold;
|
|
||||||
|
|
||||||
chartInstance.$zoom._mouseDownHandler = function(event) {
|
|
||||||
node.addEventListener('mousemove', chartInstance.$zoom._mouseMoveHandler);
|
|
||||||
chartInstance.$zoom._dragZoomStart = event;
|
|
||||||
};
|
|
||||||
|
|
||||||
chartInstance.$zoom._mouseMoveHandler = function(event) {
|
|
||||||
if (chartInstance.$zoom._dragZoomStart) {
|
|
||||||
chartInstance.$zoom._dragZoomEnd = event;
|
|
||||||
chartInstance.update('none');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
chartInstance.$zoom._mouseUpHandler = function(event) {
|
|
||||||
if (!chartInstance.$zoom._dragZoomStart) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
node.removeEventListener('mousemove', chartInstance.$zoom._mouseMoveHandler);
|
|
||||||
|
|
||||||
var beginPoint = chartInstance.$zoom._dragZoomStart;
|
|
||||||
|
|
||||||
var offsetX = beginPoint.target.getBoundingClientRect().left;
|
|
||||||
var startX = Math.min(beginPoint.clientX, event.clientX) - offsetX;
|
|
||||||
var endX = Math.max(beginPoint.clientX, event.clientX) - offsetX;
|
|
||||||
|
|
||||||
var offsetY = beginPoint.target.getBoundingClientRect().top;
|
|
||||||
var startY = Math.min(beginPoint.clientY, event.clientY) - offsetY;
|
|
||||||
var endY = Math.max(beginPoint.clientY, event.clientY) - offsetY;
|
|
||||||
|
|
||||||
var dragDistanceX = endX - startX;
|
|
||||||
var dragDistanceY = endY - startY;
|
|
||||||
|
|
||||||
// Remove drag start and end before chart update to stop drawing selected area
|
|
||||||
chartInstance.$zoom._dragZoomStart = null;
|
|
||||||
chartInstance.$zoom._dragZoomEnd = null;
|
|
||||||
|
|
||||||
var zoomThreshold = (options.zoom && options.zoom.threshold) || 0;
|
|
||||||
if (dragDistanceX <= zoomThreshold && dragDistanceY <= zoomThreshold) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var chartArea = chartInstance.chartArea;
|
|
||||||
|
|
||||||
var zoomOptions = chartInstance.$zoom._options.zoom;
|
|
||||||
var chartDistanceX = chartArea.right - chartArea.left;
|
|
||||||
var xEnabled = directionEnabled(zoomOptions.mode, 'x', chartInstance);
|
|
||||||
var zoomX = xEnabled && dragDistanceX ? 1 + ((chartDistanceX - dragDistanceX) / chartDistanceX) : 1;
|
|
||||||
|
|
||||||
var chartDistanceY = chartArea.bottom - chartArea.top;
|
|
||||||
var yEnabled = directionEnabled(zoomOptions.mode, 'y', chartInstance);
|
|
||||||
var zoomY = yEnabled && dragDistanceY ? 1 + ((chartDistanceY - dragDistanceY) / chartDistanceY) : 1;
|
|
||||||
|
|
||||||
doZoom(chartInstance, zoomX, zoomY, {
|
|
||||||
x: (startX - chartArea.left) / (1 - dragDistanceX / chartDistanceX) + chartArea.left,
|
|
||||||
y: (startY - chartArea.top) / (1 - dragDistanceY / chartDistanceY) + chartArea.top
|
|
||||||
}, undefined, zoomOptions.drag.animationDuration);
|
|
||||||
|
|
||||||
if (typeof zoomOptions.onZoomComplete === 'function') {
|
|
||||||
zoomOptions.onZoomComplete({chart: chartInstance});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
var _scrollTimeout = null;
|
|
||||||
chartInstance.$zoom._wheelHandler = function(event) {
|
|
||||||
// Prevent the event from triggering the default behavior (eg. Content scrolling).
|
|
||||||
if (event.cancelable) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Firefox always fires the wheel event twice:
|
|
||||||
// First without the delta and right after that once with the delta properties.
|
|
||||||
if (typeof event.deltaY === 'undefined') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
var rect = event.target.getBoundingClientRect();
|
|
||||||
var offsetX = event.clientX - rect.left;
|
|
||||||
var offsetY = event.clientY - rect.top;
|
|
||||||
|
|
||||||
var center = {
|
|
||||||
x: offsetX,
|
|
||||||
y: offsetY
|
|
||||||
};
|
|
||||||
|
|
||||||
var zoomOptions = chartInstance.$zoom._options.zoom;
|
|
||||||
var speedPercent = zoomOptions.speed;
|
|
||||||
|
|
||||||
if (event.deltaY >= 0) {
|
|
||||||
speedPercent = -speedPercent;
|
|
||||||
}
|
|
||||||
doZoom(chartInstance, 1 + speedPercent, 1 + speedPercent, center);
|
|
||||||
|
|
||||||
clearTimeout(_scrollTimeout);
|
|
||||||
_scrollTimeout = setTimeout(function() {
|
|
||||||
if (typeof zoomOptions.onZoomComplete === 'function') {
|
|
||||||
zoomOptions.onZoomComplete({chart: chartInstance});
|
|
||||||
}
|
|
||||||
}, 250);
|
|
||||||
};
|
|
||||||
|
|
||||||
if (Hammer) {
|
|
||||||
var mc = new Hammer.Manager(node);
|
|
||||||
mc.add(new Hammer.Pinch());
|
|
||||||
mc.add(new Hammer.Pan({
|
|
||||||
threshold: panThreshold
|
|
||||||
}));
|
|
||||||
|
|
||||||
// Hammer reports the total scaling. We need the incremental amount
|
|
||||||
var currentPinchScaling;
|
|
||||||
var handlePinch = function(e) {
|
|
||||||
var diff = 1 / (currentPinchScaling) * e.scale;
|
|
||||||
var rect = e.target.getBoundingClientRect();
|
|
||||||
var offsetX = e.center.x - rect.left;
|
|
||||||
var offsetY = e.center.y - rect.top;
|
|
||||||
var center = {
|
|
||||||
x: offsetX,
|
|
||||||
y: offsetY
|
|
||||||
};
|
|
||||||
|
|
||||||
// fingers position difference
|
|
||||||
var x = Math.abs(e.pointers[0].clientX - e.pointers[1].clientX);
|
|
||||||
var y = Math.abs(e.pointers[0].clientY - e.pointers[1].clientY);
|
|
||||||
|
|
||||||
// diagonal fingers will change both (xy) axes
|
|
||||||
var p = x / y;
|
|
||||||
var xy;
|
|
||||||
if (p > 0.3 && p < 1.7) {
|
|
||||||
xy = 'xy';
|
|
||||||
} else if (x > y) {
|
|
||||||
xy = 'x'; // x axis
|
|
||||||
} else {
|
|
||||||
xy = 'y'; // y axis
|
|
||||||
}
|
|
||||||
|
|
||||||
doZoom(chartInstance, diff, diff, center, xy);
|
|
||||||
|
|
||||||
var zoomOptions = chartInstance.$zoom._options.zoom;
|
|
||||||
if (typeof zoomOptions.onZoomComplete === 'function') {
|
|
||||||
zoomOptions.onZoomComplete({chart: chartInstance});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Keep track of overall scale
|
|
||||||
currentPinchScaling = e.scale;
|
|
||||||
};
|
|
||||||
|
|
||||||
mc.on('pinchstart', function() {
|
|
||||||
currentPinchScaling = 1; // reset tracker
|
|
||||||
});
|
|
||||||
mc.on('pinch', handlePinch);
|
|
||||||
mc.on('pinchend', function(e) {
|
|
||||||
handlePinch(e);
|
|
||||||
currentPinchScaling = null; // reset
|
|
||||||
zoomNS.zoomCumulativeDelta = 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
var currentDeltaX = null;
|
|
||||||
var currentDeltaY = null;
|
|
||||||
var panning = false;
|
|
||||||
var handlePan = function(e) {
|
|
||||||
if (currentDeltaX !== null && currentDeltaY !== null) {
|
|
||||||
panning = true;
|
|
||||||
var deltaX = e.deltaX - currentDeltaX;
|
|
||||||
var deltaY = e.deltaY - currentDeltaY;
|
|
||||||
currentDeltaX = e.deltaX;
|
|
||||||
currentDeltaY = e.deltaY;
|
|
||||||
doPan(chartInstance, deltaX, deltaY);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
mc.on('panstart', function(e) {
|
|
||||||
currentDeltaX = 0;
|
|
||||||
currentDeltaY = 0;
|
|
||||||
handlePan(e);
|
|
||||||
});
|
|
||||||
mc.on('panmove', handlePan);
|
|
||||||
mc.on('panend', function() {
|
|
||||||
currentDeltaX = null;
|
|
||||||
currentDeltaY = null;
|
|
||||||
zoomNS.panCumulativeDelta = 0;
|
|
||||||
setTimeout(function() {
|
|
||||||
panning = false;
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
var panOptions = chartInstance.$zoom._options.pan;
|
|
||||||
if (typeof panOptions.onPanComplete === 'function') {
|
|
||||||
panOptions.onPanComplete({chart: chartInstance});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
chartInstance.$zoom._ghostClickHandler = function(e) {
|
|
||||||
if (panning && e.cancelable) {
|
|
||||||
e.stopImmediatePropagation();
|
|
||||||
e.preventDefault();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
node.addEventListener('click', chartInstance.$zoom._ghostClickHandler);
|
|
||||||
|
|
||||||
chartInstance._mc = mc;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeDatasetsDraw: function(chartInstance) {
|
|
||||||
var ctx = chartInstance.ctx;
|
|
||||||
|
|
||||||
if (chartInstance.$zoom._dragZoomEnd) {
|
|
||||||
var xAxis = getXAxis(chartInstance);
|
|
||||||
var yAxis = getYAxis(chartInstance);
|
|
||||||
var beginPoint = chartInstance.$zoom._dragZoomStart;
|
|
||||||
var endPoint = chartInstance.$zoom._dragZoomEnd;
|
|
||||||
|
|
||||||
var startX = xAxis.left;
|
|
||||||
var endX = xAxis.right;
|
|
||||||
var startY = yAxis.top;
|
|
||||||
var endY = yAxis.bottom;
|
|
||||||
|
|
||||||
if (directionEnabled(chartInstance.$zoom._options.zoom.mode, 'x', chartInstance)) {
|
|
||||||
var offsetX = beginPoint.target.getBoundingClientRect().left;
|
|
||||||
startX = Math.min(beginPoint.clientX, endPoint.clientX) - offsetX;
|
|
||||||
endX = Math.max(beginPoint.clientX, endPoint.clientX) - offsetX;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (directionEnabled(chartInstance.$zoom._options.zoom.mode, 'y', chartInstance)) {
|
|
||||||
var offsetY = beginPoint.target.getBoundingClientRect().top;
|
|
||||||
startY = Math.min(beginPoint.clientY, endPoint.clientY) - offsetY;
|
|
||||||
endY = Math.max(beginPoint.clientY, endPoint.clientY) - offsetY;
|
|
||||||
}
|
|
||||||
|
|
||||||
var rectWidth = endX - startX;
|
|
||||||
var rectHeight = endY - startY;
|
|
||||||
var dragOptions = chartInstance.$zoom._options.zoom.drag;
|
|
||||||
|
|
||||||
ctx.save();
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.fillStyle = dragOptions.backgroundColor || 'rgba(225,225,225,0.3)';
|
|
||||||
ctx.fillRect(startX, startY, rectWidth, rectHeight);
|
|
||||||
|
|
||||||
if (dragOptions.borderWidth > 0) {
|
|
||||||
ctx.lineWidth = dragOptions.borderWidth;
|
|
||||||
ctx.strokeStyle = dragOptions.borderColor || 'rgba(225,225,225)';
|
|
||||||
ctx.strokeRect(startX, startY, rectWidth, rectHeight);
|
|
||||||
}
|
|
||||||
ctx.restore();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
destroy: function(chartInstance) {
|
|
||||||
if (!chartInstance.$zoom) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var props = chartInstance.$zoom;
|
|
||||||
var node = props._node;
|
|
||||||
|
|
||||||
node.removeEventListener('mousedown', props._mouseDownHandler);
|
|
||||||
node.removeEventListener('mousemove', props._mouseMoveHandler);
|
|
||||||
node.ownerDocument.removeEventListener('mouseup', props._mouseUpHandler);
|
|
||||||
node.removeEventListener('wheel', props._wheelHandler);
|
|
||||||
node.removeEventListener('click', props._ghostClickHandler);
|
|
||||||
|
|
||||||
delete chartInstance.$zoom;
|
|
||||||
|
|
||||||
var mc = chartInstance._mc;
|
|
||||||
if (mc) {
|
|
||||||
mc.remove('pinchstart');
|
|
||||||
mc.remove('pinch');
|
|
||||||
mc.remove('pinchend');
|
|
||||||
mc.remove('panstart');
|
|
||||||
mc.remove('pan');
|
|
||||||
mc.remove('panend');
|
|
||||||
mc.destroy();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
Chart.register(zoomPlugin);
|
|
||||||
export default zoomPlugin;
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
8
client/externalFiles/d3.min.js
vendored
8
client/externalFiles/d3.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
15
client/externalFiles/oldswiper.min.css
vendored
15
client/externalFiles/oldswiper.min.css
vendored
File diff suppressed because one or more lines are too long
18
client/externalFiles/oldswiper.min.js
vendored
18
client/externalFiles/oldswiper.min.js
vendored
File diff suppressed because one or more lines are too long
13
client/externalFiles/swiper-bundle.min.css
vendored
13
client/externalFiles/swiper-bundle.min.css
vendored
File diff suppressed because one or more lines are too long
14
client/externalFiles/swiper-bundle.min.js
vendored
14
client/externalFiles/swiper-bundle.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,576 +0,0 @@
|
|||||||
/**
|
|
||||||
* Swiper 3.4.0
|
|
||||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
|
||||||
*
|
|
||||||
* http://www.idangero.us/swiper/
|
|
||||||
*
|
|
||||||
* Copyright 2016, Vladimir Kharlampidi
|
|
||||||
* The iDangero.us
|
|
||||||
* http://www.idangero.us/
|
|
||||||
*
|
|
||||||
* Licensed under MIT
|
|
||||||
*
|
|
||||||
* Released on: October 16, 2016
|
|
||||||
*/
|
|
||||||
.swiper-container {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
/* Fix of Webkit flickering */
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.swiper-container-no-flexbox .swiper-slide {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
.swiper-container-vertical > .swiper-wrapper {
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-moz-box-orient: vertical;
|
|
||||||
-ms-flex-direction: column;
|
|
||||||
-webkit-flex-direction: column;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.swiper-wrapper {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 1;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -moz-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
-webkit-transition-property: -webkit-transform;
|
|
||||||
-moz-transition-property: -moz-transform;
|
|
||||||
-o-transition-property: -o-transform;
|
|
||||||
-ms-transition-property: -ms-transform;
|
|
||||||
transition-property: transform;
|
|
||||||
-webkit-box-sizing: content-box;
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
.swiper-container-android .swiper-slide,
|
|
||||||
.swiper-wrapper {
|
|
||||||
-webkit-transform: translate3d(0px, 0, 0);
|
|
||||||
-moz-transform: translate3d(0px, 0, 0);
|
|
||||||
-o-transform: translate(0px, 0px);
|
|
||||||
-ms-transform: translate3d(0px, 0, 0);
|
|
||||||
transform: translate3d(0px, 0, 0);
|
|
||||||
}
|
|
||||||
.swiper-container-multirow > .swiper-wrapper {
|
|
||||||
-webkit-box-lines: multiple;
|
|
||||||
-moz-box-lines: multiple;
|
|
||||||
-ms-flex-wrap: wrap;
|
|
||||||
-webkit-flex-wrap: wrap;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.swiper-container-free-mode > .swiper-wrapper {
|
|
||||||
-webkit-transition-timing-function: ease-out;
|
|
||||||
-moz-transition-timing-function: ease-out;
|
|
||||||
-ms-transition-timing-function: ease-out;
|
|
||||||
-o-transition-timing-function: ease-out;
|
|
||||||
transition-timing-function: ease-out;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
.swiper-slide {
|
|
||||||
-webkit-flex-shrink: 0;
|
|
||||||
-ms-flex: 0 0 auto;
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
/* Auto Height */
|
|
||||||
.swiper-container-autoheight,
|
|
||||||
.swiper-container-autoheight .swiper-slide {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.swiper-container-autoheight .swiper-wrapper {
|
|
||||||
-webkit-box-align: start;
|
|
||||||
-ms-flex-align: start;
|
|
||||||
-webkit-align-items: flex-start;
|
|
||||||
align-items: flex-start;
|
|
||||||
-webkit-transition-property: -webkit-transform, height;
|
|
||||||
-moz-transition-property: -moz-transform;
|
|
||||||
-o-transition-property: -o-transform;
|
|
||||||
-ms-transition-property: -ms-transform;
|
|
||||||
transition-property: transform, height;
|
|
||||||
}
|
|
||||||
/* a11y */
|
|
||||||
.swiper-container .swiper-notification {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0;
|
|
||||||
z-index: -1000;
|
|
||||||
}
|
|
||||||
/* IE10 Windows Phone 8 Fixes */
|
|
||||||
.swiper-wp8-horizontal {
|
|
||||||
-ms-touch-action: pan-y;
|
|
||||||
touch-action: pan-y;
|
|
||||||
}
|
|
||||||
.swiper-wp8-vertical {
|
|
||||||
-ms-touch-action: pan-x;
|
|
||||||
touch-action: pan-x;
|
|
||||||
}
|
|
||||||
/* Arrows */
|
|
||||||
.swiper-button-prev,
|
|
||||||
.swiper-button-next {
|
|
||||||
position: absolute;
|
|
||||||
top: 70%;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
margin-top: -10px;
|
|
||||||
z-index: 10;
|
|
||||||
cursor: pointer;
|
|
||||||
-moz-background-size: 27px 44px;
|
|
||||||
-webkit-background-size: 27px 44px;
|
|
||||||
background-size: 27px 44px;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
opacity: 0.6;
|
|
||||||
}
|
|
||||||
.swiper-button-prev.swiper-button-disabled,
|
|
||||||
.swiper-button-next.swiper-button-disabled {
|
|
||||||
opacity: 0.2;
|
|
||||||
cursor: auto;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.swiper-button-prev,
|
|
||||||
.swiper-container-rtl .swiper-button-next {
|
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
|
|
||||||
left: 10px;
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
.swiper-button-prev.swiper-button-black,
|
|
||||||
.swiper-container-rtl .swiper-button-next.swiper-button-black {
|
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
|
|
||||||
}
|
|
||||||
.swiper-button-prev.swiper-button-white,
|
|
||||||
.swiper-container-rtl .swiper-button-next.swiper-button-white {
|
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
|
|
||||||
}
|
|
||||||
.swiper-button-next,
|
|
||||||
.swiper-container-rtl .swiper-button-prev {
|
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
|
|
||||||
right: 10px;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
.swiper-button-next.swiper-button-black,
|
|
||||||
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
|
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
|
|
||||||
}
|
|
||||||
.swiper-button-next.swiper-button-white,
|
|
||||||
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
|
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
|
|
||||||
}
|
|
||||||
/* Pagination Styles */
|
|
||||||
.swiper-pagination {
|
|
||||||
position: absolute;
|
|
||||||
text-align: center;
|
|
||||||
-webkit-transition: 300ms;
|
|
||||||
-moz-transition: 300ms;
|
|
||||||
-o-transition: 300ms;
|
|
||||||
transition: 300ms;
|
|
||||||
-webkit-transform: translate3d(0, 0, 0);
|
|
||||||
-ms-transform: translate3d(0, 0, 0);
|
|
||||||
-o-transform: translate3d(0, 0, 0);
|
|
||||||
transform: translate3d(0, 0, 0);
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.swiper-pagination.swiper-pagination-hidden {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
/* Common Styles */
|
|
||||||
.swiper-pagination-fraction,
|
|
||||||
.swiper-pagination-custom,
|
|
||||||
.swiper-container-horizontal > .swiper-pagination-bullets {
|
|
||||||
bottom: 10px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
/* Bullets */
|
|
||||||
.swiper-pagination-bullet {
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
display: inline-block;
|
|
||||||
border-radius: 100%;
|
|
||||||
background: #000;
|
|
||||||
opacity: 0.2;
|
|
||||||
}
|
|
||||||
button.swiper-pagination-bullet {
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
-moz-appearance: none;
|
|
||||||
-ms-appearance: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
}
|
|
||||||
.swiper-pagination-clickable .swiper-pagination-bullet {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.swiper-pagination-white .swiper-pagination-bullet {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
.swiper-pagination-bullet-active {
|
|
||||||
opacity: 1;
|
|
||||||
background: #007aff;
|
|
||||||
}
|
|
||||||
.swiper-pagination-white .swiper-pagination-bullet-active {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
.swiper-pagination-black .swiper-pagination-bullet-active {
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
.swiper-container-vertical > .swiper-pagination-bullets {
|
|
||||||
right: 10px;
|
|
||||||
top: 50%;
|
|
||||||
-webkit-transform: translate3d(0px, -50%, 0);
|
|
||||||
-moz-transform: translate3d(0px, -50%, 0);
|
|
||||||
-o-transform: translate(0px, -50%);
|
|
||||||
-ms-transform: translate3d(0px, -50%, 0);
|
|
||||||
transform: translate3d(0px, -50%, 0);
|
|
||||||
}
|
|
||||||
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
|
|
||||||
margin: 5px 0;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
|
|
||||||
margin: 0 5px;
|
|
||||||
}
|
|
||||||
/* Progress */
|
|
||||||
.swiper-pagination-progress {
|
|
||||||
background: rgba(0, 0, 0, 0.25);
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.swiper-pagination-progress .swiper-pagination-progressbar {
|
|
||||||
background: #007aff;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
-webkit-transform: scale(0);
|
|
||||||
-ms-transform: scale(0);
|
|
||||||
-o-transform: scale(0);
|
|
||||||
transform: scale(0);
|
|
||||||
-webkit-transform-origin: left top;
|
|
||||||
-moz-transform-origin: left top;
|
|
||||||
-ms-transform-origin: left top;
|
|
||||||
-o-transform-origin: left top;
|
|
||||||
transform-origin: left top;
|
|
||||||
}
|
|
||||||
.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar {
|
|
||||||
-webkit-transform-origin: right top;
|
|
||||||
-moz-transform-origin: right top;
|
|
||||||
-ms-transform-origin: right top;
|
|
||||||
-o-transform-origin: right top;
|
|
||||||
transform-origin: right top;
|
|
||||||
}
|
|
||||||
.swiper-container-horizontal > .swiper-pagination-progress {
|
|
||||||
width: 100%;
|
|
||||||
height: 4px;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.swiper-container-vertical > .swiper-pagination-progress {
|
|
||||||
width: 4px;
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.swiper-pagination-progress.swiper-pagination-white {
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar {
|
|
||||||
background: #fff;
|
|
||||||
}
|
|
||||||
.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar {
|
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
/* 3D Container */
|
|
||||||
.swiper-container-3d {
|
|
||||||
-webkit-perspective: 1200px;
|
|
||||||
-moz-perspective: 1200px;
|
|
||||||
-o-perspective: 1200px;
|
|
||||||
perspective: 1200px;
|
|
||||||
}
|
|
||||||
.swiper-container-3d .swiper-wrapper,
|
|
||||||
.swiper-container-3d .swiper-slide,
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-left,
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-right,
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-top,
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-bottom,
|
|
||||||
.swiper-container-3d .swiper-cube-shadow {
|
|
||||||
-webkit-transform-style: preserve-3d;
|
|
||||||
-moz-transform-style: preserve-3d;
|
|
||||||
-ms-transform-style: preserve-3d;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
}
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-left,
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-right,
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-top,
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-left {
|
|
||||||
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
|
||||||
/* Safari 4+, Chrome */
|
|
||||||
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
|
||||||
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Firefox 3.6-15 */
|
|
||||||
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Opera 11.10-12.00 */
|
|
||||||
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
|
||||||
}
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-right {
|
|
||||||
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
|
||||||
/* Safari 4+, Chrome */
|
|
||||||
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
|
||||||
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Firefox 3.6-15 */
|
|
||||||
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Opera 11.10-12.00 */
|
|
||||||
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
|
||||||
}
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-top {
|
|
||||||
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
|
||||||
/* Safari 4+, Chrome */
|
|
||||||
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
|
||||||
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Firefox 3.6-15 */
|
|
||||||
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Opera 11.10-12.00 */
|
|
||||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
|
||||||
}
|
|
||||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
|
||||||
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
|
|
||||||
/* Safari 4+, Chrome */
|
|
||||||
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Chrome 10+, Safari 5.1+, iOS 5+ */
|
|
||||||
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Firefox 3.6-15 */
|
|
||||||
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Opera 11.10-12.00 */
|
|
||||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
|
|
||||||
/* Firefox 16+, IE10, Opera 12.50+ */
|
|
||||||
}
|
|
||||||
/* Coverflow */
|
|
||||||
.swiper-container-coverflow .swiper-wrapper,
|
|
||||||
.swiper-container-flip .swiper-wrapper {
|
|
||||||
/* Windows 8 IE 10 fix */
|
|
||||||
-ms-perspective: 1200px;
|
|
||||||
}
|
|
||||||
/* Cube + Flip */
|
|
||||||
.swiper-container-cube,
|
|
||||||
.swiper-container-flip {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
.swiper-container-cube .swiper-slide,
|
|
||||||
.swiper-container-flip .swiper-slide {
|
|
||||||
pointer-events: none;
|
|
||||||
-webkit-backface-visibility: hidden;
|
|
||||||
-moz-backface-visibility: hidden;
|
|
||||||
-ms-backface-visibility: hidden;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
.swiper-container-cube .swiper-slide .swiper-slide,
|
|
||||||
.swiper-container-flip .swiper-slide .swiper-slide {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.swiper-container-cube .swiper-slide-active,
|
|
||||||
.swiper-container-flip .swiper-slide-active,
|
|
||||||
.swiper-container-cube .swiper-slide-active .swiper-slide-active,
|
|
||||||
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
.swiper-container-cube .swiper-slide-shadow-top,
|
|
||||||
.swiper-container-flip .swiper-slide-shadow-top,
|
|
||||||
.swiper-container-cube .swiper-slide-shadow-bottom,
|
|
||||||
.swiper-container-flip .swiper-slide-shadow-bottom,
|
|
||||||
.swiper-container-cube .swiper-slide-shadow-left,
|
|
||||||
.swiper-container-flip .swiper-slide-shadow-left,
|
|
||||||
.swiper-container-cube .swiper-slide-shadow-right,
|
|
||||||
.swiper-container-flip .swiper-slide-shadow-right {
|
|
||||||
z-index: 0;
|
|
||||||
-webkit-backface-visibility: hidden;
|
|
||||||
-moz-backface-visibility: hidden;
|
|
||||||
-ms-backface-visibility: hidden;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
/* Cube */
|
|
||||||
.swiper-container-cube .swiper-slide {
|
|
||||||
visibility: hidden;
|
|
||||||
-webkit-transform-origin: 0 0;
|
|
||||||
-moz-transform-origin: 0 0;
|
|
||||||
-ms-transform-origin: 0 0;
|
|
||||||
transform-origin: 0 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.swiper-container-cube.swiper-container-rtl .swiper-slide {
|
|
||||||
-webkit-transform-origin: 100% 0;
|
|
||||||
-moz-transform-origin: 100% 0;
|
|
||||||
-ms-transform-origin: 100% 0;
|
|
||||||
transform-origin: 100% 0;
|
|
||||||
}
|
|
||||||
.swiper-container-cube .swiper-slide-active,
|
|
||||||
.swiper-container-cube .swiper-slide-next,
|
|
||||||
.swiper-container-cube .swiper-slide-prev,
|
|
||||||
.swiper-container-cube .swiper-slide-next + .swiper-slide {
|
|
||||||
pointer-events: auto;
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
.swiper-container-cube .swiper-cube-shadow {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0px;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #000;
|
|
||||||
opacity: 0.6;
|
|
||||||
-webkit-filter: blur(50px);
|
|
||||||
filter: blur(50px);
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
/* Fade */
|
|
||||||
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
|
|
||||||
-webkit-transition-timing-function: ease-out;
|
|
||||||
-moz-transition-timing-function: ease-out;
|
|
||||||
-ms-transition-timing-function: ease-out;
|
|
||||||
-o-transition-timing-function: ease-out;
|
|
||||||
transition-timing-function: ease-out;
|
|
||||||
}
|
|
||||||
.swiper-container-fade .swiper-slide {
|
|
||||||
pointer-events: none;
|
|
||||||
-webkit-transition-property: opacity;
|
|
||||||
-moz-transition-property: opacity;
|
|
||||||
-o-transition-property: opacity;
|
|
||||||
transition-property: opacity;
|
|
||||||
}
|
|
||||||
.swiper-container-fade .swiper-slide .swiper-slide {
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
.swiper-container-fade .swiper-slide-active,
|
|
||||||
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
.swiper-zoom-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: -webkit-box;
|
|
||||||
display: -moz-box;
|
|
||||||
display: -ms-flexbox;
|
|
||||||
display: -webkit-flex;
|
|
||||||
display: flex;
|
|
||||||
-webkit-box-pack: center;
|
|
||||||
-moz-box-pack: center;
|
|
||||||
-ms-flex-pack: center;
|
|
||||||
-webkit-justify-content: center;
|
|
||||||
justify-content: center;
|
|
||||||
-webkit-box-align: center;
|
|
||||||
-moz-box-align: center;
|
|
||||||
-ms-flex-align: center;
|
|
||||||
-webkit-align-items: center;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.swiper-zoom-container > img,
|
|
||||||
.swiper-zoom-container > svg,
|
|
||||||
.swiper-zoom-container > canvas {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
/* Scrollbar */
|
|
||||||
.swiper-scrollbar {
|
|
||||||
border-radius: 10px;
|
|
||||||
position: relative;
|
|
||||||
-ms-touch-action: none;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
.swiper-container-horizontal > .swiper-scrollbar {
|
|
||||||
position: absolute;
|
|
||||||
left: 1%;
|
|
||||||
bottom: 3px;
|
|
||||||
z-index: 50;
|
|
||||||
height: 5px;
|
|
||||||
width: 98%;
|
|
||||||
}
|
|
||||||
.swiper-container-vertical > .swiper-scrollbar {
|
|
||||||
position: absolute;
|
|
||||||
right: 3px;
|
|
||||||
top: 1%;
|
|
||||||
z-index: 50;
|
|
||||||
width: 5px;
|
|
||||||
height: 98%;
|
|
||||||
}
|
|
||||||
.swiper-scrollbar-drag {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 10px;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.swiper-scrollbar-cursor-drag {
|
|
||||||
cursor: move;
|
|
||||||
}
|
|
||||||
/* Preloader */
|
|
||||||
.swiper-lazy-preloader {
|
|
||||||
width: 42px;
|
|
||||||
height: 42px;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
margin-left: -21px;
|
|
||||||
margin-top: -21px;
|
|
||||||
z-index: 10;
|
|
||||||
-webkit-transform-origin: 50%;
|
|
||||||
-moz-transform-origin: 50%;
|
|
||||||
transform-origin: 50%;
|
|
||||||
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
|
||||||
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
|
||||||
animation: swiper-preloader-spin 1s steps(12, end) infinite;
|
|
||||||
}
|
|
||||||
.swiper-lazy-preloader:after {
|
|
||||||
display: block;
|
|
||||||
content: "";
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
||||||
background-position: 50%;
|
|
||||||
-webkit-background-size: 100%;
|
|
||||||
background-size: 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
.swiper-lazy-preloader-white:after {
|
|
||||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
|
|
||||||
}
|
|
||||||
@-webkit-keyframes swiper-preloader-spin {
|
|
||||||
100% {
|
|
||||||
-webkit-transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@keyframes swiper-preloader-spin {
|
|
||||||
100% {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
12
client/externalFiles/swiper.min.css
vendored
12
client/externalFiles/swiper.min.css
vendored
File diff suppressed because one or more lines are too long
13
client/externalFiles/swiper.min.js
vendored
13
client/externalFiles/swiper.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,149 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
||||||
</head>
|
|
||||||
<body style='width:400px;'>
|
|
||||||
<div id="event"></div>
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var blockElement = document.getElementById("event");
|
|
||||||
// copy query
|
|
||||||
query = window.location.search;
|
|
||||||
if (query == "") {
|
|
||||||
query = "?path=main";
|
|
||||||
}
|
|
||||||
var evtSrc = new EventSource("http://localhost:5000/update");
|
|
||||||
|
|
||||||
function getJSON(url, successHandler, errorHandler) {
|
|
||||||
var xhr = typeof XMLHttpRequest != 'undefined'
|
|
||||||
? new XMLHttpRequest()
|
|
||||||
: new ActiveXObject('Microsoft.XMLHTTP');
|
|
||||||
console.log("fired JSON request", url)
|
|
||||||
xhr.open('get', url, true);
|
|
||||||
xhr.onreadystatechange = function() {
|
|
||||||
var status;
|
|
||||||
var data;
|
|
||||||
// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
|
|
||||||
if (xhr.readyState == 4) { // `DONE`
|
|
||||||
status = xhr.status;
|
|
||||||
if (status == 200) {
|
|
||||||
data = JSON.parse(xhr.responseText);
|
|
||||||
successHandler && successHandler(data);
|
|
||||||
} else {
|
|
||||||
errorHandler && errorHandler(status);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send();
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
function htmlEscape(str) {
|
|
||||||
return str
|
|
||||||
.replace(/&/g, '&')
|
|
||||||
.replace(/"/g, '"')
|
|
||||||
.replace(/'/g, ''')
|
|
||||||
.replace(/</g, '<')
|
|
||||||
.replace(/>/g, '>');
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw(message) {
|
|
||||||
var blk = "<h3>" + message.title + "</h3><table>\n"
|
|
||||||
for (var i=0; i < message.components.length; i++) {
|
|
||||||
var component = message.components[i]
|
|
||||||
var name = component.name
|
|
||||||
var type = component.type
|
|
||||||
if ("title" in component) {
|
|
||||||
var title = component.title
|
|
||||||
} else {
|
|
||||||
var title = name
|
|
||||||
}
|
|
||||||
if (type == "group") {
|
|
||||||
blk += "<tr><td>link</td><td><a href='?path=" + encodeURI(message.path + "," + name) + "'>"+ title + "</a></td></tr>\n"
|
|
||||||
} else if (type == "rdonly") {
|
|
||||||
blk += "<tr><td >" + title + "</td><td id='"+ name +"' __ctype__=rdonly></td></tr>\n"
|
|
||||||
} else if (type == "input") {
|
|
||||||
blk += "<tr><td>" + title + "</td><td><input type=input id='"+ name +"' __ctype__=input></td></tr>\n"
|
|
||||||
} else if (type == "checkbox") {
|
|
||||||
blk += "<tr><td>" + title + "</td><td><input type=checkbox id='"+ name +"' __ctype__=checkbox></td></tr>\n"
|
|
||||||
} else if (type == "radio") {
|
|
||||||
blk += "<tr><td>" + title + "</td><td id='" + name + "' __ctype__=radio>\n"
|
|
||||||
for (var j = 0; j < component.buttons.length; j++) {
|
|
||||||
button = component.buttons[j]
|
|
||||||
var rbname = name + ":" + button.value
|
|
||||||
if (j != 0) blk+= "<br>"
|
|
||||||
blk += "<input type=radio name='" + name + "' id='"+rbname+"' value='" + button.value + "'>" + button.title + "\n"
|
|
||||||
}
|
|
||||||
blk += "</td></tr>\n"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
blk += "</table>\n"
|
|
||||||
blockElement.innerHTML = blk
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateblock(id) {
|
|
||||||
getJSON("http://localhost:5000/updateblock"+query+"&id="+id,
|
|
||||||
function(message) { console.log(message); },
|
|
||||||
function(status) { console.log('stat', status); }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
evtSrc.onmessage = function(e) {
|
|
||||||
var message = JSON.parse(e.data)
|
|
||||||
if (message.type == "id") {
|
|
||||||
var id = message.id
|
|
||||||
getJSON("http://localhost:5000/getblock"+query+"&id="+id,
|
|
||||||
function(message) { draw(message); updateblock(id); },
|
|
||||||
function(status) { console.log('stat', status); }
|
|
||||||
);
|
|
||||||
} else if (message.type == "draw") {
|
|
||||||
draw(message);
|
|
||||||
} else if (message.type == "update") {
|
|
||||||
for (var i=0; i < message.updates.length; i++) {
|
|
||||||
var component = message.updates[i]
|
|
||||||
var name = component.name
|
|
||||||
var value = component.value
|
|
||||||
var elm = document.getElementById(name)
|
|
||||||
if (!elm) continue
|
|
||||||
var type = elm.getAttribute("__ctype__")
|
|
||||||
if (type == "rdonly") {
|
|
||||||
elm.innerHTML = htmlEscape(value)
|
|
||||||
} else if (type == "input") {
|
|
||||||
elm.value = value
|
|
||||||
} else if (type == "checkbox") {
|
|
||||||
elm.checked = (value != 0) && (value != "0")
|
|
||||||
} else if (type == "radio") {
|
|
||||||
var elm = document.getElementById(name + ":" + value)
|
|
||||||
if (elm) {
|
|
||||||
elm.checked = true // this will uncheck all radio buttons with the same name
|
|
||||||
} else { // no element with this value: we have to go through all radio buttons
|
|
||||||
var elms = document.getElementsByName(name)
|
|
||||||
for (var j; j < elms.length; j++) {
|
|
||||||
if (elms[j].checked) {
|
|
||||||
elms[j].checked = false
|
|
||||||
break // we have found the victim, we can leave
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else if (message.type == "close") {
|
|
||||||
evtSrc.close()
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
evtSrc.onerror = function(e) {
|
|
||||||
blockElement.innerHTML = "connection lost"
|
|
||||||
evtSrc.close()
|
|
||||||
};
|
|
||||||
|
|
||||||
window.onbeforeunload = closingCode;
|
|
||||||
function closingCode(){
|
|
||||||
console.log("CLOSE")
|
|
||||||
evtSrc.close()
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -2,7 +2,7 @@
|
|||||||
// % COMMUNICATION
|
// % COMMUNICATION
|
||||||
|
|
||||||
// local debugging: print the name of every executed funtion to the console
|
// local debugging: print the name of every executed funtion to the console
|
||||||
var debug_communication_daniel = 0;
|
var debug_communication_daniel = 0
|
||||||
|
|
||||||
var timeoutID; // We need this ID to reset the timer every 30 seconds
|
var timeoutID; // We need this ID to reset the timer every 30 seconds
|
||||||
|
|
||||||
@ -336,7 +336,6 @@ function successHandler(s, message) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Handles incoming XMLHttp-messages depending on type of message.
|
// Handles incoming XMLHttp-messages depending on type of message.
|
||||||
// s: slide number or -1 for replacing slide in all slider instances
|
|
||||||
if (debugCommunication) {
|
if (debugCommunication) {
|
||||||
console.log("%cfrom server (reqJSON): " + message.type,
|
console.log("%cfrom server (reqJSON): " + message.type,
|
||||||
"color:white;background:dimgray", message);
|
"color:white;background:dimgray", message);
|
||||||
@ -355,31 +354,10 @@ function successHandler(s, message) {
|
|||||||
}
|
}
|
||||||
insertSlide(2, "", "parameters", createContent(2, {components:[]}));
|
insertSlide(2, "", "parameters", createContent(2, {components:[]}));
|
||||||
} else {
|
} else {
|
||||||
// NOT USED ANYMORE -> remove swiper
|
|
||||||
// if (s < 0) { // redraw: check for slides in all swiper instances
|
|
||||||
// // not used any more?
|
|
||||||
// for (var isw = 0; isw < MAXBLOCK; isw ++) {
|
|
||||||
// var isl = findSlide(isw, message.path);
|
|
||||||
// if (isl !== null) {
|
|
||||||
// var slide = swiper[isw].slides[isl];
|
|
||||||
// if (slide) {
|
|
||||||
// console.log("redraw", isw, isl);
|
|
||||||
// replaceSlideContent(slide, message.title,
|
|
||||||
// createContent(isw, message));
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// } else
|
|
||||||
if (message.path == '_overview') {
|
if (message.path == '_overview') {
|
||||||
// remove comment of next line when you want overview _instead_ of Graphics
|
// remove comment of next line when you want overview _instead_ of Graphics
|
||||||
// isl = insertSlide(s, message.title, "_overview", createContent(sLocal, message));
|
// isl = insertSlide(s, message.title, "_overview", createContent(sLocal, message));
|
||||||
// swiper[sLocal].slideTo(isl); /* go to found slide */
|
|
||||||
} else {
|
} else {
|
||||||
// insertSlide(s, message.title, message.path, createContent(s, message));
|
|
||||||
// let sLocal = paramSlider[s];
|
|
||||||
|
|
||||||
// *************************************************************************************
|
|
||||||
|
|
||||||
// In the module-block a parameter was selected
|
// In the module-block a parameter was selected
|
||||||
// -> write parameter-block to grid-element2
|
// -> write parameter-block to grid-element2
|
||||||
// If nColumns < 3, hide modules (grid-element1) and show parameters (grid-element2)
|
// If nColumns < 3, hide modules (grid-element1) and show parameters (grid-element2)
|
||||||
@ -394,7 +372,6 @@ function successHandler(s, message) {
|
|||||||
elements[1].style.display = "none"; // show modules
|
elements[1].style.display = "none"; // show modules
|
||||||
elements[2].style.display = "inline-block"; // hide parameters
|
elements[2].style.display = "inline-block"; // hide parameters
|
||||||
}
|
}
|
||||||
// swiper[sLocal].slideTo(isl); /* go to found slide */
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
nextInitCommand();
|
nextInitCommand();
|
||||||
@ -410,9 +387,7 @@ function successHandler(s, message) {
|
|||||||
break;
|
break;
|
||||||
// Response to a "console"-server-request.
|
// Response to a "console"-server-request.
|
||||||
case "accept-console":
|
case "accept-console":
|
||||||
// draw console
|
// draw console only to the last grid-element
|
||||||
// insertSlide(0, "console", "console",
|
|
||||||
// createContentConsole(sLocal));
|
|
||||||
insertSlide(3, "console", "console",
|
insertSlide(3, "console", "console",
|
||||||
createContentConsole(sLocal));
|
createContentConsole(sLocal));
|
||||||
nextInitCommand();
|
nextInitCommand();
|
||||||
@ -425,7 +400,6 @@ function successHandler(s, message) {
|
|||||||
timeRange = message.time;
|
timeRange = message.time;
|
||||||
/*createGraphics();
|
/*createGraphics();
|
||||||
// By default mostleft swiper-instance shows graphics.
|
// By default mostleft swiper-instance shows graphics.
|
||||||
swiper[0].slideTo(0);
|
|
||||||
|
|
||||||
// Update time-selection. (see also SEAWebClientGraphics.js)
|
// Update time-selection. (see also SEAWebClientGraphics.js)
|
||||||
var select = document.getElementsByClassName("select-time")[0];
|
var select = document.getElementsByClassName("select-time")[0];
|
||||||
|
|||||||
@ -4,8 +4,8 @@
|
|||||||
// local debugging: print the name of every executed funtion to the console
|
// local debugging: print the name of every executed funtion to the console
|
||||||
var debug_group_daniel = 0;
|
var debug_group_daniel = 0;
|
||||||
|
|
||||||
var writePermissionTimeout; // Sets writePermission to 'false, restarts by
|
var writePermissionTimeout; // Sets writePermission to 'false,
|
||||||
// user-interaction.
|
// restarts by user-interaction.
|
||||||
|
|
||||||
var prompt = false // True while a prompt is opened.
|
var prompt = false // True while a prompt is opened.
|
||||||
|
|
||||||
@ -13,24 +13,8 @@ function getGroup(s, name) {
|
|||||||
if (debug_group_daniel) {
|
if (debug_group_daniel) {
|
||||||
console.log("%cfunction: getGroup", "color:white;background:salmon");
|
console.log("%cfunction: getGroup", "color:white;background:salmon");
|
||||||
}
|
}
|
||||||
|
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
|
||||||
// var found = false;
|
+ "&id=" + clientID, successHandler, errorHandler);
|
||||||
// if (name == "") {
|
|
||||||
// swiper[s].slideTo(defaultSlidePos(s));
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// for (var i = 0; i < swiper[s].slides.length; i++) {
|
|
||||||
// var slideType = swiper[s].slides[i].slideType;
|
|
||||||
// if (slideType == name) {
|
|
||||||
// found = true;
|
|
||||||
// swiper[s].slideTo(i);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// if (!found && name != "console" && name != "graphics") {
|
|
||||||
// Server-request for group.
|
|
||||||
reqJSON(s, "http://" + hostPort + "/getblock?path=" + name
|
|
||||||
+ "&id=" + clientID, successHandler, errorHandler);
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendCommand(s, command) {
|
function sendCommand(s, command) {
|
||||||
|
|||||||
@ -1,42 +0,0 @@
|
|||||||
var showSettings = false;
|
|
||||||
|
|
||||||
function toggleSettings() {
|
|
||||||
// Shows and hides settings.
|
|
||||||
|
|
||||||
console.log("toggle settings");
|
|
||||||
if (showSettings) {
|
|
||||||
document.getElementsByClassName("start-settings-checkboxes")[0].style.display = "none";
|
|
||||||
document.getElementsByClassName("start-settings-show-hide")[0].innerHTML = "show";
|
|
||||||
showSettings = false;
|
|
||||||
} else {
|
|
||||||
document.getElementsByClassName("start-settings-checkboxes")[0].style.display = "inline";
|
|
||||||
document.getElementsByClassName("start-settings-show-hide")[0].innerHTML = "hide";
|
|
||||||
showSettings = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function followLink(destination) {
|
|
||||||
// Build query string and load new page.
|
|
||||||
|
|
||||||
var checkboxes = document.getElementsByClassName("start-checkbox");
|
|
||||||
var query = "";
|
|
||||||
// Loop through settings-checkboxes.
|
|
||||||
for (var i = 0; i < checkboxes.length; i++) {
|
|
||||||
if (checkboxes[i].checked != checkboxes[i].defaultChecked) {
|
|
||||||
if (query === "") {
|
|
||||||
query = "?";
|
|
||||||
} else {
|
|
||||||
query += "&";
|
|
||||||
}
|
|
||||||
query += checkboxes[i].name + "=";
|
|
||||||
if (checkboxes[i].checked) {
|
|
||||||
query += "1";
|
|
||||||
} else {
|
|
||||||
query += "0";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
destination += query;
|
|
||||||
console.log(destination);
|
|
||||||
window.location = destination;
|
|
||||||
}
|
|
||||||
@ -101,78 +101,27 @@ function insertSlide(s, title, type, content) {
|
|||||||
console.log("%cfunction: insertSlide", "color:white;background:lightblue");
|
console.log("%cfunction: insertSlide", "color:white;background:lightblue");
|
||||||
}
|
}
|
||||||
|
|
||||||
// console.log("title: ",title," s: ",s);
|
console.log("title: ",title);
|
||||||
|
|
||||||
// Inserts new group to instance s of Swiper. return inserted position
|
|
||||||
|
|
||||||
// Removed, Swiper will be removed, so there´s no need to look for swiper slides.
|
|
||||||
// Instead content will be replaced
|
|
||||||
// var isl = findSlide(s, type);
|
|
||||||
// var slide = swiper[s].slides[isl];
|
|
||||||
// if (slide) { // slide already exists
|
|
||||||
// replaceSlideContent(slide, title, content);
|
|
||||||
// return isl;
|
|
||||||
// }
|
|
||||||
var panel = document.createElement('div');
|
var panel = document.createElement('div');
|
||||||
panel.classList.add("panel");
|
panel.classList.add("panel");
|
||||||
|
|
||||||
titlewrapper = document.createElement('span');
|
titlewrapper = document.createElement('span');
|
||||||
titlewrapper.innerHTML = title;
|
titlewrapper.innerHTML = title;
|
||||||
panel.appendChild(titlewrapper);
|
panel.appendChild(titlewrapper);
|
||||||
/*
|
|
||||||
if (type == "_overview" || type == "main") {
|
|
||||||
//panel.appendChild(createHomeButton(s));
|
|
||||||
} else if (type != "graphics" && type != "_inst_select" && type != "console") {
|
|
||||||
panel.appendChild(createCloseButton(s));
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*if (type === "graphics") {
|
|
||||||
panel.appendChild(createUpdateButton(s));
|
|
||||||
}*/
|
|
||||||
|
|
||||||
var gridContainer = document.createElement('div');
|
var gridContainer = document.createElement('div');
|
||||||
// gridContainer.classList.add("swiper-slide", "swiper-slide-main");
|
|
||||||
gridContainer.classList.add("grid-container");
|
gridContainer.classList.add("grid-container");
|
||||||
// Store type so it can be found easiely later.
|
// Store type so it can be found easiely later.
|
||||||
gridContainer.slideType = type;
|
gridContainer.slideType = type;
|
||||||
gridContainer.appendChild(panel);
|
gridContainer.appendChild(panel);
|
||||||
gridContainer.appendChild(content);
|
gridContainer.appendChild(content);
|
||||||
|
|
||||||
// Graphics-slide is put at mostleft position.
|
|
||||||
// if (type == "graphics" || type == "_overview") {
|
|
||||||
// swiper[s].prependSlide(slide);
|
|
||||||
// swiper[s].slideTo(0);
|
|
||||||
// return 0;
|
|
||||||
// }
|
|
||||||
// swiper[s].appendSlide(slide);
|
|
||||||
// if (type == "console") {
|
|
||||||
// if (s === 3) {
|
|
||||||
// // Slide mostright swiper-instance to last position (console)
|
|
||||||
// swiper[3].slideNext();
|
|
||||||
// }
|
|
||||||
// return swiper[s].slides.length - 1;
|
|
||||||
// }
|
|
||||||
|
|
||||||
var gridelements = document.getElementsByClassName('grid-element');
|
var gridelements = document.getElementsByClassName('grid-element');
|
||||||
gridelements[s].innerHTML = "";
|
gridelements[s].innerHTML = "";
|
||||||
gridelements[s].appendChild(gridContainer);
|
gridelements[s].appendChild(gridContainer);
|
||||||
|
|
||||||
let pos = 0;
|
let pos = 0;
|
||||||
|
|
||||||
// if (swiper[s].slides.length > 1) {
|
|
||||||
// var consoleslide = swiper[s].slides[swiper[s].slides.length - 2];
|
|
||||||
// if (consoleslide.slideType == "console") {
|
|
||||||
// // shift Console-slide to mostright position.
|
|
||||||
// swiper[s].removeSlide(swiper[s].slides.length - 2);
|
|
||||||
// swiper[s].appendSlide(consoleslide);
|
|
||||||
// // Slide to position of new slide
|
|
||||||
// pos = swiper[s].slides.length - 2;
|
|
||||||
// } else {
|
|
||||||
// pos = swiper[s].slides.length - 1;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// swiper[s].slideTo(pos);
|
|
||||||
return pos;
|
return pos;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,68 +0,0 @@
|
|||||||
<html>
|
|
||||||
<body>
|
|
||||||
<a href="/console.html" target=console>console</a>
|
|
||||||
<a href="/group.html?path=/nv" target=group>group</a>
|
|
||||||
<button onclick="action.value='getblock?path=/nv&id=*';">?getblock</button>
|
|
||||||
<button onclick="action.value='updateblock?path=/nv&id=*';">?updateblock</button>
|
|
||||||
<button onclick="action.value='console?id=*';">?console</button>
|
|
||||||
<button onclick="action.value='gettime?time=-1800,0&id=*';">?gettime</button>
|
|
||||||
<button onclick="action.value='getvars?time=-1800,0&id=*';">?getvars</button>
|
|
||||||
<button onclick="action.value='graph?time=-1800,0&variables=t_mix&id=*';">?graph</button><br>
|
|
||||||
<input type=text value="console?id=*" size=120 id=action>
|
|
||||||
<button onclick='act();'>Send</button>
|
|
||||||
<div id=result>
|
|
||||||
</div><p>
|
|
||||||
<textarea rows=50 cols=132 id=t>
|
|
||||||
</textarea>
|
|
||||||
<script type="text/javascript">
|
|
||||||
|
|
||||||
var myid = 0
|
|
||||||
var result = document.getElementById("result")
|
|
||||||
var action = document.getElementById("action")
|
|
||||||
|
|
||||||
function getJSON(url, successHandler, errorHandler) {
|
|
||||||
var xhr = typeof XMLHttpRequest != 'undefined'
|
|
||||||
? new XMLHttpRequest()
|
|
||||||
: new ActiveXObject('Microsoft.XMLHTTP');
|
|
||||||
console.log("fired JSON request", url)
|
|
||||||
xhr.open('get', url, true);
|
|
||||||
xhr.onreadystatechange = function() {
|
|
||||||
var status;
|
|
||||||
var data;
|
|
||||||
// https://xhr.spec.whatwg.org/#dom-xmlhttprequest-readystate
|
|
||||||
if (xhr.readyState == 4) { // `DONE`
|
|
||||||
status = xhr.status;
|
|
||||||
if (status == 200) {
|
|
||||||
data = JSON.parse(xhr.responseText);
|
|
||||||
successHandler && successHandler(data);
|
|
||||||
} else {
|
|
||||||
errorHandler && errorHandler(status);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send();
|
|
||||||
};
|
|
||||||
|
|
||||||
function insert(link) {
|
|
||||||
action.value = link
|
|
||||||
}
|
|
||||||
|
|
||||||
function act() {
|
|
||||||
getJSON("/" + action.value.split("*").join(myid),
|
|
||||||
function(message) { result.innerHTML = JSON.stringify(message); },
|
|
||||||
function(status) { console.log(status); }
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
var evtSrc = new EventSource("/update");
|
|
||||||
|
|
||||||
evtSrc.onmessage = function(e) {
|
|
||||||
var message = JSON.parse(e.data);
|
|
||||||
if (message.type == "id") {
|
|
||||||
myid = message.id
|
|
||||||
}
|
|
||||||
t.value = t.value + e.data + "\n";
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,70 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<script src="externalFiles/mjs_plot_0_3_n.js"></script>
|
|
||||||
</head>
|
|
||||||
<!body>
|
|
||||||
<body onresize="draw_graphs()" onload="draw_graphs()">
|
|
||||||
<canvas id="democanvas" width="600" height="400"></canvas>
|
|
||||||
<script>
|
|
||||||
//make a graph object
|
|
||||||
time = [0,1,2,3,4,5];
|
|
||||||
pot = [2,4,3,4,null,1];
|
|
||||||
still = [9,8,7,6,5,4];
|
|
||||||
var pressure_graph = mjs_plot.new_graph("pressure_graph","democanvas");
|
|
||||||
//give it data
|
|
||||||
pressure_graph.set_data([[time,pot],[time,still]]);
|
|
||||||
pressure_graph.set_captions(['pot','still']);
|
|
||||||
//set up some graphics styling (optional)
|
|
||||||
pressure_graph.default_graphics_style.title = "Pressures";
|
|
||||||
pressure_graph.default_graphics_style.x_axis_title = "Hours";
|
|
||||||
pressure_graph.default_graphics_style.y_axis_title = "pressure mbar";
|
|
||||||
pressure_graph.default_graphics_style.color_bg = '#fff';
|
|
||||||
//plot the graph
|
|
||||||
pressure_graph.reset();
|
|
||||||
pressure_graph.mjs_plot();
|
|
||||||
tim = 5;
|
|
||||||
saved_time = 5;
|
|
||||||
live = true;
|
|
||||||
function addPoint() {
|
|
||||||
pot.push(pot[tim]+0.1);
|
|
||||||
still.push(still[tim]+0.1);
|
|
||||||
tim += 1;
|
|
||||||
time.push(tim);
|
|
||||||
if (pressure_graph.busy()) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (live) {
|
|
||||||
if (saved_time > pressure_graph.graphics_style.x_auto_max) {
|
|
||||||
live = false;
|
|
||||||
console.log("live", live);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (tim > pressure_graph.graphics_style.x_auto_max) {
|
|
||||||
pressure_graph.graphics_style.x_scale_auto_max = false;
|
|
||||||
pressure_graph.graphics_style.x_manual_max = tim;
|
|
||||||
}
|
|
||||||
} else if (tim < pressure_graph.graphics_style.x_auto_max) {
|
|
||||||
live = true;
|
|
||||||
console.log("live", live);
|
|
||||||
}
|
|
||||||
saved_time = tim;
|
|
||||||
pressure_graph.set_data([[time,pot],[time,still]]);
|
|
||||||
pressure_graph.mjs_plot();
|
|
||||||
}
|
|
||||||
|
|
||||||
setInterval(addPoint, 1000);
|
|
||||||
|
|
||||||
|
|
||||||
function draw_graphs(){
|
|
||||||
pressure_graph.canvas.width = window.innerWidth - 20;
|
|
||||||
pressure_graph.canvas.height = window.innerHeight - 20;
|
|
||||||
//tell the graph to plot
|
|
||||||
pressure_graph.mjs_plot();
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
@ -1,61 +0,0 @@
|
|||||||
<html>
|
|
||||||
<body>
|
|
||||||
<table>
|
|
||||||
<tr><td>
|
|
||||||
<a href='http://samenv.psi.ch:8850/'>DMC</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8851/'>HRPT</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8852/'>ZEBRA</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8853/'>POLDI</a>
|
|
||||||
</td></tr><tr><td>
|
|
||||||
<a href='http://samenv.psi.ch:8854/'>FOCUS</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8855/'>TASP</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8856/'>RITA2</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8857/'>EIGER</a>
|
|
||||||
</td></tr><tr><td>
|
|
||||||
<a href='http://samenv.psi.ch:8854/'>SANS 1</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8855/'>SANS 2</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8856/'>AMOR</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8857/'>BOA</a>
|
|
||||||
</td></tr><tr><td>
|
|
||||||
<a href='http://samenv.psi.ch:8801/'>PREP1</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8802/'>PREP2</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8803/'>PREP3</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8804/'>PREP4</a>
|
|
||||||
</td></tr><tr><td>
|
|
||||||
<a href='http://samenv.psi.ch:8805/'>PREP5</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8806/'>PREP6</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8807/'>PREP7</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8808/'>PREP8</a>
|
|
||||||
</td></tr><tr><td>
|
|
||||||
<a href='http://samenv.psi.ch:8809/'>PREP9</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8800/'>PREP0</a>
|
|
||||||
</td></tr><tr><td>
|
|
||||||
<a href='http://samenv.psi.ch:8810/'>LAB0</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8811/'>LAB1</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8812/'>LAB2</a>
|
|
||||||
</td><td>
|
|
||||||
<a href='http://samenv.psi.ch:8813/'>LAB3</a>
|
|
||||||
</td></tr><tr><td>
|
|
||||||
<a href='http://samenv.psi.ch:8814/'>LAB4</a>
|
|
||||||
</td></tr>
|
|
||||||
</table>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,84 +0,0 @@
|
|||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta name="viewport"
|
|
||||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
||||||
<meta name="apple-mobile-web-app-status-bar-style"
|
|
||||||
content="black-translucent" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<canvas id=inp width='300' height='500' style="border:1px solid #000000;"></canvas>
|
|
||||||
<div id=out style="width: 300px;"></div>
|
|
||||||
<script>
|
|
||||||
var canvas=document.getElementById("inp");
|
|
||||||
var rect = canvas.getBoundingClientRect();
|
|
||||||
console.log(rect);
|
|
||||||
// Setup canvas and expose context via ctx variable
|
|
||||||
ctx=canvas.getContext("2d");
|
|
||||||
function strt(touch) {
|
|
||||||
return {i:touch.identifier,x:touch.pageX,y:touch.pageY}
|
|
||||||
}
|
|
||||||
function stre(event) {
|
|
||||||
if (event.touches) {
|
|
||||||
t = {};
|
|
||||||
for (var i=0; i<event.touches.length;i++) {
|
|
||||||
id=event.touches[i].identifier.toString();
|
|
||||||
t[id] = strt(event.touches[i]);
|
|
||||||
}
|
|
||||||
tc = [];
|
|
||||||
for (var i=0; i<event.changedTouches.length;i++) {
|
|
||||||
id=event.touches[i].identifier.toString();
|
|
||||||
t[id]['changed'] = 1;
|
|
||||||
}
|
|
||||||
for (var i=0; i<event.targetTouches.length;i++) {
|
|
||||||
id=event.touches[i].identifier.toString();
|
|
||||||
t[id]['target'] = 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return {type:event.type,x:event.pageX,y:event.pageY,t:t};
|
|
||||||
}
|
|
||||||
|
|
||||||
var styles=["rgba(0, 0, 200, 1)", "rgba(0, 255, 0, 1)", "rgba(255, 0, 0, 1)"]
|
|
||||||
canvas.addEventListener('touchstart', function(event) {
|
|
||||||
for (var i = 0; i < event.touches.length; i++) {
|
|
||||||
var touch = event.touches[i];
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 5, 0, 2*Math.PI, true);
|
|
||||||
ctx.lineWidth = 2.0;
|
|
||||||
ctx.strokeStyle = styles[i];
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
}, false);
|
|
||||||
canvas.addEventListener('touchmove', function(event) {
|
|
||||||
document.getElementById("out").innerHTML = JSON.stringify(stre(event));
|
|
||||||
event.preventDefault();
|
|
||||||
for (var i = 0; i < event.touches.length; i++) {
|
|
||||||
var touch = event.touches[i];
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 1, 0, 2*Math.PI, true);
|
|
||||||
ctx.lineWidth = 2.0;
|
|
||||||
ctx.strokeStyle = styles[i];
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
}, false);
|
|
||||||
canvas.addEventListener('touchend', function(event) {
|
|
||||||
for (var i = 0; i < event.changedTouches.length; i++) {
|
|
||||||
var touch = event.changedTouches[i];
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(touch.pageX-rect.left, touch.pageY-rect.top, 50, 0, 2*Math.PI, true);
|
|
||||||
ctx.lineWidth = 2.0;
|
|
||||||
ctx.strokeStyle = styles[i];
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
}, false);
|
|
||||||
canvas.addEventListener('click', function(event) {
|
|
||||||
console.log(event);
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(event.clientX-rect.left, event.clientY - rect.top, 2, 0, 2*Math.PI, true);
|
|
||||||
ctx.lineWidth = 2.0;
|
|
||||||
ctx.strokeStyle = "rgba(0, 0, 200, 0.8)";
|
|
||||||
ctx.stroke();
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
</script>
|
|
||||||
</body></html>
|
|
||||||
Reference in New Issue
Block a user