Mahayoga
/
MIF_E31231392
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: grafik heatmap pake overlay

This commit is contained in:
Mahayoga 2026-05-07 01:59:35 +07:00
parent 2e56c45db9
commit b2dbb09951
3 changed files with 38 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/users/assets/img/overlay/overlay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

1
resources/views/user/layouts/index.blade.php
View File

@ -73,6 +73,7 @@ class="bi bi-arrow-up-short"></i></a>
<script src="{{ asset('assets/users/assets/vendor/swiper/swiper-bundle.min.js') }}"></script>
<script src="https://cdn.datatables.net/2.3.7/js/dataTables.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/heatmap.js/2.0.1/heatmap.min.js"></script>
<!-- Main JS File -->
<script src="{{ asset('assets/users/assets/js/main.js') }}"></script>

37
resources/views/user/pages/finish_ujian/index.blade.php
View File

@ -46,6 +46,13 @@
<h2 class="title">Grafik Kecepatan Mata</h2>
<canvas id="velocityChart"></canvas>
</div>
<div class="col-lg-12 mt-5">
<h2 class="title">Heatmap Pergerakan Mata</h2>
<div style="position: relative; aspect-ratio: 16/9;">
<img src="{{ asset('assets/users/assets/img/overlay/overlay.png') }}" style="width:100%; height:100%; object-fit: cover;">
<div id="heatmapChart" style="aspect-ratio: 16/9;"></div>
</div>
</div>
</div>
</div>
</section><!-- /About Section -->
@ -69,6 +76,13 @@
const ws = new WebSocket('{{ env("WEBSOCKET_URL") }}');
let table = null;
let data_tobii = null;
let heatmapContainer = null;
let clientWidth = null;
let clientHeight = null;
let mappedHeatmapData = null;
let scaleX = null;
let scaleY = null;
let heatmapInstance = null;
function renderVelocityChart(timeseries) {
const base = timeseries.timestamp[0];
@ -118,6 +132,16 @@ function renderVelocityChart(timeseries) {
const result = await res.json();
if(result != null) {
renderVelocityChart(result.timeseries);
mappedHeatmapData = result.heatmap.map(point => ({
x: point.x * scaleX,
y: point.y * scaleY,
value: point.value
}));
heatmapInstance.setData({
max: 10,
data: mappedHeatmapData
});
heatmapContainer.style.removeProperty('position');
}
}
@ -175,6 +199,19 @@ function renderVelocityChart(timeseries) {
if(data.type === 'json_file_data') {
if(data.data != null) {
data_tobii = data.data;
heatmapContainer = document.getElementById('heatmapChart');
clientWidth = heatmapContainer.clientWidth;
clientHeight = heatmapContainer.clientHeight;
scaleX = clientWidth / 1366;
scaleY = clientHeight / 768;
heatmapInstance = h337.create({
container: heatmapContainer,
radius: 40,
maxOpacity: 0.6,
blur: 0.85
});
loadData(data_tobii);
}
}