90 lines
2.5 KiB
JavaScript
90 lines
2.5 KiB
JavaScript
import { infos_mask, INFOS_POSITION } from "./infos.js";
|
|
|
|
const section = document.getElementById('section_position');
|
|
section.insertAdjacentHTML('beforeend', `
|
|
<p>
|
|
<input type="range" min="190" max="1000" value="1000" id="map_scale" /><br/>
|
|
<input type="button" value="RàZ position" id="position_reset" /><br/>
|
|
<canvas id="map" width="800" height="800"></canvas>
|
|
</p>
|
|
`);
|
|
|
|
const position_reset = document.getElementById('position_reset');
|
|
position_reset.addEventListener('click', async () => {
|
|
position_reset.disabled = true;
|
|
await fetch('/position/reset')
|
|
position_reset.disabled = false;
|
|
});
|
|
|
|
const map_canvas = document.getElementById('map');
|
|
const map_scale_range = document.getElementById('map_scale');
|
|
const pos_hist = [];
|
|
const text_color = getComputedStyle(map_canvas).color;
|
|
const map_draw = (x, y, a) => {
|
|
const ctx = map_canvas.getContext("2d");
|
|
const w = map_canvas.width;
|
|
const h = map_canvas.height;
|
|
const map_scale = Number(map_scale_range.value);
|
|
ctx.clearRect(0, 0, w, h);
|
|
|
|
pos_hist.unshift([x, y]);
|
|
if (pos_hist.length > 10) pos_hist.pop();
|
|
|
|
ctx.font = '30px sans-serif';
|
|
ctx.fillStyle = text_color;
|
|
ctx.textAlign = 'right';
|
|
ctx.fillText(Math.round(x*1000) + ' mm <X>', w-5, 30);
|
|
ctx.fillText(Math.round(y*1000) + ' mm <Y>', w-5, 60);
|
|
ctx.fillText(Math.round(a*180/Math.PI) + ' deg <A>', w-5, 90);
|
|
|
|
ctx.save();
|
|
ctx.translate(w/2, h/2);
|
|
ctx.scale(map_scale/1000, map_scale/1000);
|
|
ctx.lineWidth = Math.round(2*1000/map_scale);
|
|
|
|
ctx.beginPath();
|
|
for (let i = -10; i <= 11; i++) {
|
|
ctx.moveTo(-95+190*i, -95-2090);
|
|
ctx.lineTo(-95+190*i, -95+2090+190);
|
|
ctx.moveTo(-95-2090, -95+190*i);
|
|
ctx.lineTo(-95+2090+190, -95+190*i);
|
|
}
|
|
ctx.strokeStyle = 'rgba(180, 180, 180, 50%)';
|
|
ctx.stroke();
|
|
|
|
const hl = pos_hist.length;
|
|
for (let i = 1; i < hl; i++) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(1000*pos_hist[i-1][0], -1000*pos_hist[i-1][1]);
|
|
ctx.lineTo(1000*pos_hist[i][0], -1000*pos_hist[i][1]);
|
|
const v = Math.round((hl-i)/(hl-1)*100);
|
|
ctx.strokeStyle = 'rgba(180, 200, 0, ' + v + '%)';
|
|
ctx.stroke();
|
|
}
|
|
|
|
ctx.translate(x*1000, -y*1000);
|
|
ctx.rotate(-a);
|
|
ctx.beginPath();
|
|
ctx.moveTo(40, 0);
|
|
ctx.lineTo(35, 77/4);
|
|
ctx.lineTo(24, 77/2);
|
|
ctx.lineTo(-68, 77/2);
|
|
ctx.lineTo(-68, -77/2);
|
|
ctx.lineTo(24, -77/2);
|
|
ctx.lineTo(35, -77/4);
|
|
ctx.lineTo(40, 0);
|
|
ctx.strokeStyle = '#008000'
|
|
ctx.stroke();
|
|
|
|
ctx.restore();
|
|
};
|
|
|
|
document.body.addEventListener('h:infos:position', e => {
|
|
map_draw(...e.detail);
|
|
});
|
|
|
|
document.body.addEventListener('h:section:statechanged', e => {
|
|
infos_mask(INFOS_POSITION, e.detail['on']);
|
|
});
|
|
infos_mask(INFOS_POSITION, true);
|