kopia lustrzana https://github.com/miguelvaca/vk3cpu
Added tooltips to the data using crosshairs plugin
Also removed LF and MF as they are not really useful.pull/2/head
rodzic
91356300c5
commit
1d5f79c3ed
|
@ -1,10 +1,10 @@
|
||||||
body {
|
body {
|
||||||
background: rgb(201, 201, 201);
|
background: rgb(226, 226, 226);
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: rgb(98, 226, 248);
|
background: rgb(226, 226, 226);
|
||||||
color: black;
|
color: black;
|
||||||
font-family: 'Courier New', Courier, monospace;
|
font-family: 'Courier New', Courier, monospace;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
|
59
magloop.html
59
magloop.html
|
@ -7,7 +7,7 @@
|
||||||
<link rel="stylesheet" href="magloop.css">
|
<link rel="stylesheet" href="magloop.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>Miguel <a href="mailto:vk3cpu@gmail.com">VK3CPU</a> - Interactive Magloop Antenna Calculator (v1.0a)</header>
|
<header>Miguel <a href="mailto:vk3cpu@gmail.com">VK3CPU</a> - Interactive Magloop Antenna Calculator</header>
|
||||||
<section class="gridLayoutClass">
|
<section class="gridLayoutClass">
|
||||||
<div class="chart-container" style="position: relative;">
|
<div class="chart-container" style="position: relative;">
|
||||||
<canvas id="chartCanvas" class="chartCanvasClass">
|
<canvas id="chartCanvas" class="chartCanvasClass">
|
||||||
|
@ -52,6 +52,7 @@
|
||||||
</section>
|
</section>
|
||||||
</body>
|
</body>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-crosshair@1.1.2"></script>
|
||||||
<script>
|
<script>
|
||||||
var frequencies = [];
|
var frequencies = [];
|
||||||
|
|
||||||
|
@ -79,8 +80,8 @@
|
||||||
|
|
||||||
function updateFrequencies() {
|
function updateFrequencies() {
|
||||||
const hamFrequencies = [
|
const hamFrequencies = [
|
||||||
//1.8, 3.5, 5.0, 7.0, 10.1, 14.0, 18.068, 21.0, 24.89, 28.0, 29.7, 35.0, 40.0, 45.0, 50.0, 52.0
|
1.8, 3.5, 5.0, 7.0, 10.1, 14.0, 18.068, 21.0, 24.89, 28.0, 29.7, 35.0, 40.0, 45.0, 50.0, 52.0
|
||||||
0.1365, 0.475, 1.8, 3.5, 5.0, 7.0, 10.1, 14.0, 18.068, 21.0, 24.89, 28.0, 29.7, 35.0, 40.0, 45.0, 50.0, 52.0
|
//0.1365, 0.475, 1.8, 3.5, 5.0, 7.0, 10.1, 14.0, 18.068, 21.0, 24.89, 28.0, 29.7, 35.0, 40.0, 45.0, 50.0, 52.0
|
||||||
//0.1357, 0.1378, 0.472, 0.479, 1.8, 3.5, 5.0, 7.0, 10.1, 14.0, 18.068, 21.0, 24.89, 28.0, 29.7, 35.0, 40.0, 45.0, 50.0, 52.0
|
//0.1357, 0.1378, 0.472, 0.479, 1.8, 3.5, 5.0, 7.0, 10.1, 14.0, 18.068, 21.0, 24.89, 28.0, 29.7, 35.0, 40.0, 45.0, 50.0, 52.0
|
||||||
];
|
];
|
||||||
frequencies = [];
|
frequencies = [];
|
||||||
|
@ -716,7 +717,7 @@
|
||||||
position: 'right',
|
position: 'right',
|
||||||
id: 'mohmsID',
|
id: 'mohmsID',
|
||||||
},{
|
},{
|
||||||
type: 'logarithmic',
|
type: 'linear',
|
||||||
display: 'auto',
|
display: 'auto',
|
||||||
scaleLabel: {
|
scaleLabel: {
|
||||||
display: true,
|
display: true,
|
||||||
|
@ -746,6 +747,7 @@
|
||||||
fontColor: 'purple',
|
fontColor: 'purple',
|
||||||
fontStyle: 'bold'
|
fontStyle: 'bold'
|
||||||
},
|
},
|
||||||
|
min: 0.0,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
id: 'qID'
|
id: 'qID'
|
||||||
},{
|
},{
|
||||||
|
@ -757,11 +759,58 @@
|
||||||
fontColor: 'rgb(150, 150, 0)',
|
fontColor: 'rgb(150, 150, 0)',
|
||||||
fontStyle: 'bold'
|
fontStyle: 'bold'
|
||||||
},
|
},
|
||||||
|
min: 0.0,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
id: 'vID'
|
id: 'vID'
|
||||||
}]
|
}]
|
||||||
},
|
},
|
||||||
showLines: true
|
showLines: true,
|
||||||
|
tooltips: {
|
||||||
|
mode: 'interpolate',
|
||||||
|
intersect: false,
|
||||||
|
callbacks: {
|
||||||
|
title: function(tooltipItem, data) {
|
||||||
|
var label = '' + tooltipItem[0].xLabel.toFixed(3).toString();
|
||||||
|
label += ' MHz ';
|
||||||
|
return label;
|
||||||
|
},
|
||||||
|
label: function(tooltipItem, data) {
|
||||||
|
var label = data.datasets[tooltipItem.datasetIndex].label || '';
|
||||||
|
if (label) {
|
||||||
|
label += ': ';
|
||||||
|
}
|
||||||
|
label += Math.round(tooltipItem.yLabel * 1000) / 1000;
|
||||||
|
return label;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
crosshair: {
|
||||||
|
line: {
|
||||||
|
color: 'red', // crosshair line color
|
||||||
|
width: 1 // crosshair line width
|
||||||
|
},
|
||||||
|
sync: {
|
||||||
|
enabled: true, // enable trace line syncing with other charts
|
||||||
|
group: 1, // chart group
|
||||||
|
suppressTooltips: true // suppress tooltips when showing a synced tracer
|
||||||
|
},
|
||||||
|
zoom: {
|
||||||
|
enabled: false, // enable zooming
|
||||||
|
zoomboxBackgroundColor: 'rgba(66,133,244,0.2)', // background color of zoom box
|
||||||
|
zoomboxBorderColor: '#48F', // border color of zoom box
|
||||||
|
zoomButtonText: 'Reset Zoom', // reset zoom button text
|
||||||
|
zoomButtonClass: 'reset-zoom', // reset zoom button class
|
||||||
|
},
|
||||||
|
callbacks: {
|
||||||
|
beforeZoom: function(start, end) { // called before zoom, return false to prevent zoom
|
||||||
|
return false; // return true to enable zooming
|
||||||
|
},
|
||||||
|
afterZoom: function(start, end) { // called after zoom
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
Ładowanie…
Reference in New Issue