eminux/MatchLiveTv
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Usa screenshot di pagina come sfondo heatmap al posto dell’iframe.

Browse Source 
Cattura periodica client-side (con consenso), storage ActiveStorage e overlay allineato all’immagine.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
eminux
2026-08-20 23:14:47 +02:00
co-authored by Cursor
parent 406a90ae5b
commit 70fccc493e
25 changed files with 442 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/public/admin-analytics-heatmap.js
+56 -18
View File
@@ -1,7 +1,6 @@
/*! Admin heatmap overlay renderer (Hotjar-like radial blobs over page preview). */
/*! Admin heatmap overlay on captured page screenshot. */
(function () {
function colorFor(t) {
// green -> yellow -> red
if (t < 0.33) {
var k = t / 0.33;
return [67 + (255 - 67) * k, 160 + (235 - 160) * k, 71 * (1 - k)];
@@ -14,11 +13,36 @@
return [255, 152 * (1 - k3), 0];
}
function paint() {
function fit() {
var canvas = document.getElementById("admin-heatmap");
var stage = document.getElementById("admin-heatmap-stage");
var scaler = document.getElementById("admin-heatmap-scaler");
var shot = document.getElementById("admin-heatmap-shot");
if (!canvas || !stage) return;
var designW = 1200;
var designH = 900;
if (scaler) {
designW = parseInt(scaler.getAttribute("data-design-width"), 10) || designW;
designH = parseInt(scaler.getAttribute("data-design-height"), 10) || designH;
}
if (shot && shot.naturalWidth > 0) {
designW = shot.naturalWidth;
designH = shot.naturalHeight;
}
if (scaler) {
scaler.style.width = designW + "px";
scaler.style.height = designH + "px";
var stageW = Math.max(stage.clientWidth, 320);
var scale = Math.min(1, stageW / designW);
scaler.style.transform = "scale(" + scale + ")";
stage.style.height = Math.max(420, Math.round(designH * scale)) + "px";
} else {
designW = Math.max(stage.clientWidth, 320);
designH = Math.max(stage.clientHeight, 480);
}
var grid = parseInt(canvas.getAttribute("data-grid"), 10) || 40;
var max = parseInt(canvas.getAttribute("data-max"), 10) || 1;
var cells = [];
@@ -28,19 +52,17 @@
cells = [];
}
var width = Math.max(stage.clientWidth, 320);
var height = Math.max(stage.clientHeight, 480);
canvas.width = width;
canvas.height = height;
canvas.style.width = width + "px";
canvas.style.height = height + "px";
canvas.width = designW;
canvas.height = designH;
canvas.style.width = designW + "px";
canvas.style.height = designH + "px";
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, width, height);
ctx.clearRect(0, 0, designW, designH);
var cellW = width / grid;
var cellH = height / grid;
var radius = Math.max(cellW, cellH) * 1.8;
var cellW = designW / grid;
var cellH = designH / grid;
var radius = Math.max(cellW, cellH) * 2.2;
cells.forEach(function (cell) {
var intensity = Math.min(1, cell.c / max);
@@ -48,9 +70,16 @@
var cx = (cell.x + 0.5) * cellW;
var cy = (cell.y + 0.5) * cellH;
var rgb = colorFor(intensity);
var alpha = 0.28 + intensity * 0.55;
var grd = ctx.createRadialGradient(cx, cy, 0, cx, cy, radius);
grd.addColorStop(0, "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + "," + (0.2 + intensity * 0.55) + ")");
grd.addColorStop(1, "rgba(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ",0)");
grd.addColorStop(
0,
"rgba(" + Math.round(rgb[0]) + "," + Math.round(rgb[1]) + "," + Math.round(rgb[2]) + "," + alpha + ")"
);
grd.addColorStop(
1,
"rgba(" + Math.round(rgb[0]) + "," + Math.round(rgb[1]) + "," + Math.round(rgb[2]) + ",0)"
);
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(cx, cy, radius, 0, Math.PI * 2);
@@ -58,10 +87,19 @@
});
}
function boot() {
var shot = document.getElementById("admin-heatmap-shot");
fit();
if (shot) {
if (shot.complete && shot.naturalWidth > 0) fit();
else shot.addEventListener("load", fit);
}
window.addEventListener("resize", fit);
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", paint);
document.addEventListener("DOMContentLoaded", boot);
} else {
paint();
boot();
}
window.addEventListener("resize", paint);
})();