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>
|
||||
228
resources/[framework]/[addons]/[kq]/kq_dyno/html/index.html
Normal file
228
resources/[framework]/[addons]/[kq]/kq_dyno/html/index.html
Normal file
@@ -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>
|
||||
20
resources/[framework]/[addons]/[kq]/kq_dyno/html/js/chart.js
Normal file
20
resources/[framework]/[addons]/[kq]/kq_dyno/html/js/chart.js
Normal file
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
2
resources/[framework]/[addons]/[kq]/kq_dyno/html/js/jquery.js
vendored
Normal file
2
resources/[framework]/[addons]/[kq]/kq_dyno/html/js/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user