structura foldere
mutat kq- folders in un singur folder [kq]
This commit is contained in:
@@ -0,0 +1,6 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<body style="background-color: transparent;">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,228 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<script src="js/jquery.js"></script>
|
||||
<script src="js/chart.js"></script>
|
||||
<script src="js/chartjs-annotation.js"></script>
|
||||
<script src="js/html2canvas.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="chart">
|
||||
<canvas id="chart"></canvas>
|
||||
<span class="watermark">Dyno Technology by KuzQuality.com</span>
|
||||
<span class="title" id="title"></span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(() => {
|
||||
let times = [];
|
||||
|
||||
let localeSet = false;
|
||||
let title = '';
|
||||
let peakHp = 'Peak HP';
|
||||
let peakTorque = 'Peak Torque';
|
||||
let torqueUnit = 'nm';
|
||||
|
||||
window.addEventListener('message', ({data}) => {
|
||||
if (data.event === 'update') {
|
||||
if (times.length > 600) {
|
||||
times.shift();
|
||||
}
|
||||
times.push({
|
||||
rpm: event.data.rpm,
|
||||
hp: event.data.hp,
|
||||
torque: event.data.torque,
|
||||
});
|
||||
|
||||
setChart();
|
||||
|
||||
if (!localeSet) {
|
||||
setLocale(data);
|
||||
}
|
||||
}
|
||||
if (data.event === 'capture-image') {
|
||||
captureImage(data.dynoKey);
|
||||
}
|
||||
});
|
||||
|
||||
function setLocale(data) {
|
||||
localeSet = true;
|
||||
|
||||
title = data.title;
|
||||
peakHp = data.peakHp;
|
||||
peakTorque = data.peakTorque;
|
||||
torqueUnit = data.torqueUnit;
|
||||
$('#title').html(title);
|
||||
}
|
||||
|
||||
function captureImage(dynoKey) {
|
||||
$('.chart').addClass('screenshot');
|
||||
$('.watermark').addClass('screenshot');
|
||||
$('.title').addClass('screenshot');
|
||||
html2canvas(document.querySelector(".chart")).then(canvas => {
|
||||
const base64 = canvas.toDataURL();
|
||||
fetch(`https://kq_dyno/SaveDynoImage`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({img: base64, dynoKey}),
|
||||
});
|
||||
|
||||
$('.chart').removeClass('screenshot');
|
||||
$('.watermark').removeClass('screenshot');
|
||||
$('.title').removeClass('screenshot');
|
||||
});
|
||||
}
|
||||
|
||||
function setChart() {
|
||||
const chart = Chart.getChart("chart");
|
||||
|
||||
// If the chart exists, destroy it
|
||||
if (chart) {
|
||||
chart.destroy();
|
||||
}
|
||||
|
||||
const xValues = times.map(({ rpm, hp, torque }) => rpm);
|
||||
const hpValues = times.map(({ rpm, hp, torque }) => parseInt(hp));
|
||||
const torqueValues = times.map(({ rpm, hp, torque }) => parseInt(torque));
|
||||
|
||||
const ctx = document.getElementById('chart').getContext('2d');
|
||||
|
||||
Chart.defaults.font.size = 33;
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: xValues,
|
||||
datasets: [
|
||||
{
|
||||
data: hpValues,
|
||||
label: 'Horsepower',
|
||||
borderColor: 'red',
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
data: torqueValues,
|
||||
label: 'Torque',
|
||||
borderColor: 'blue',
|
||||
fill: false
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
animation: false,
|
||||
elements: {
|
||||
point: {
|
||||
radius: 1
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
display: true,
|
||||
min: 0,
|
||||
max: Math.ceil(Math.max(Math.max(...torqueValues), Math.max(...hpValues)) * 1.1),
|
||||
gridLines: {
|
||||
color: 'rgba(255,255,255,0.3)'
|
||||
},
|
||||
},
|
||||
x: {
|
||||
type: 'category',
|
||||
title: 'RPM',
|
||||
display: true,
|
||||
clip: true,
|
||||
ticks: {
|
||||
stepSize: 500, // Set the step size to 500
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
annotation: {
|
||||
annotations: [
|
||||
{
|
||||
type: 'line',
|
||||
mode: 'horizontal',
|
||||
scaleID: 'y',
|
||||
value: Math.max(...hpValues), // Set the value to where you want the line
|
||||
borderColor: 'red', // Color of the line
|
||||
borderWidth: 2, // Width of the line
|
||||
borderDash: [20],
|
||||
label: {
|
||||
display: true,
|
||||
content: peakHp + ' ' + Math.max(...hpValues), // Set the label content
|
||||
enabled: true, // Show the label
|
||||
position: '45%', // Position of the label ('start', 'center', or 'end')
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
mode: 'horizontal',
|
||||
scaleID: 'y',
|
||||
value: Math.max(...torqueValues), // Set the value to where you want the line
|
||||
borderColor: 'blue', // Color of the line
|
||||
borderWidth: 2, // Width of the line
|
||||
borderDash: [20],
|
||||
label: {
|
||||
display: true,
|
||||
content: peakTorque + ' ' + Math.max(...torqueValues) + ' ' + torqueUnit, // Set the label content
|
||||
enabled: true, // Show the label
|
||||
position: '15%', // Position of the label ('start', 'center', or 'end')
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html {
|
||||
background-color: rgb(240, 240, 240);
|
||||
}
|
||||
|
||||
.chart {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.chart.screenshot {
|
||||
padding-top: 600px;
|
||||
height: 1280px;
|
||||
width: 1280px;
|
||||
}
|
||||
|
||||
.watermark.screenshot {
|
||||
bottom: -550px !important;
|
||||
}
|
||||
|
||||
.watermark {
|
||||
color: rgba(0, 0, 0, 0.2);
|
||||
font-size: 22px;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-family: Tahoma, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: rgba(148, 19, 19, 1);
|
||||
font-size: 30px;
|
||||
position: absolute;
|
||||
bottom: 45px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-family: Tahoma, sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.title.screenshot {
|
||||
bottom: 130px !important;
|
||||
font-size: 64px !important;
|
||||
}
|
||||
</style>
|
||||
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 one or more lines are too long
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user