85 lines
2.8 KiB
Twig
85 lines
2.8 KiB
Twig
{% if exercisemonitoring.show_submit_region and exercisemonitoring.enabled and exercisemonitoring.enable_snapshots %}
|
|
{% set ALL_ON_ONE_PAGE = exercisemonitoring.exercise_type == 1 %}
|
|
{% set ONE_PER_PAGE = exercisemonitoring.exercise_type == 2 %}
|
|
|
|
<div id="monitoring-camera"></div>
|
|
|
|
<script src="{{ _p.web }}web/assets/webcamjs/webcam.js"></script>
|
|
<script>
|
|
$(function () {
|
|
var $btnSaveNow = $('button[name="save_now"]');
|
|
var $btnEndTest = $('button[name="validate_all"]');
|
|
|
|
Webcam.set({
|
|
height: 480,
|
|
width: 640,
|
|
});
|
|
Webcam.attach('#monitoring-camera');
|
|
Webcam.on('live', function () {
|
|
{% if ALL_ON_ONE_PAGE %}
|
|
snapAndSendData(0);
|
|
{% elseif ONE_PER_PAGE %}
|
|
snapByQuestion();
|
|
{% endif %}
|
|
});
|
|
|
|
{% if ALL_ON_ONE_PAGE %}
|
|
$btnEndTest.on('click', function () {
|
|
snapAndSendData(0);
|
|
});
|
|
{% elseif ONE_PER_PAGE %}
|
|
$btnSaveNow.on('click', function () {
|
|
snapByQuestion();
|
|
});
|
|
{% endif %}
|
|
|
|
function snapAndSendData(levelId) {
|
|
Webcam.snap(function (dataUri) {
|
|
sendData(levelId, dataUri);
|
|
});
|
|
}
|
|
|
|
function snapByQuestion() {
|
|
var questionId = $btnSaveNow.data('question') || 0;
|
|
|
|
snapAndSendData(questionId);
|
|
}
|
|
|
|
function sendData(questionId, imageUri) {
|
|
var rawImgIdDoc = imageUri.replace(/^data:image\/\w+;base64,/, '');
|
|
var blobImgIdDoc = new Blob( [ Webcam.base64DecToArr(rawImgIdDoc) ], {type: 'image/jpeg'} );
|
|
|
|
var formData = new FormData();
|
|
formData.append('exercise_id', '{{ exercisemonitoring.exercise_id }}');
|
|
formData.append('level_id', questionId);
|
|
formData.append('snapshot', blobImgIdDoc, 'snapshot.jpg');
|
|
|
|
return $.ajax({
|
|
url: '{{ _p.web_plugin }}exercisemonitoring/pages/exercise_submit.ajax.php',
|
|
type: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
<style>
|
|
#plugin_pre_footer {
|
|
position: relative;
|
|
}
|
|
#monitoring-camera {
|
|
bottom: 15px;
|
|
right: 15px;
|
|
max-width: 108px;
|
|
max-height: 81px;
|
|
position: fixed;
|
|
z-index: 1015;
|
|
}
|
|
#monitoring-camera video {
|
|
max-width: 108px;
|
|
max-height: 81px;
|
|
}
|
|
</style>
|
|
{% endif %}
|