| Server IP : 162.214.74.102 / Your IP : 216.73.216.192 Web Server : Apache System : Linux dedi-4363141.lrsys.com.br 3.10.0-1160.119.1.el7.tuxcare.els25.x86_64 #1 SMP Wed Oct 1 17:37:27 UTC 2025 x86_64 User : lrsys ( 1015) PHP Version : 5.6.40 Disable Function : exec,passthru,shell_exec,system MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/lrsys/www/lrsys_apps/marisol/AR/three.js/examples/marker-training/examples/ |
Upload File : |
<!DOCTYPE html>
<title>AR.js Marker Training</title>
<!-- include mdl -->
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet' href='https://code.getmdl.io/1.3.0/material.indigo-pink.min.css'>
<script defer src='https://code.getmdl.io/1.3.0/material.min.js'></script>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'>
<!-- Include pdfMake - http://pdfmake.org/ -->
<script src='../../vendor/pdfMake/pdfmake.min.js'></script>
<script src='../../vendor/pdfMake/vfs_fonts.js'></script>
<!-- include THREEx.ArPatternFile -->
<script src='../threex-arpatternfile.js'></script>
<style media='screen'>
body {
font-family: arial;
background-color: #eee;
}
h1 {
text-align: center;
font-size: 500%;
}
div.mdl-cell {
text-align: center;
}
h1 a {
text-decoration: none;
}
h1 a:hover {
text-decoration: underline;
}
#topRightButtons {
position: fixed;
top: 1em;
right: 1em;
}
</style>
<body>
<h1><a href='https://github.com/jeromeetienne/ar.js' target='_blank'>AR.js</a> Marker Training</h1>
<!-- *********************************************************************** -->
<!-- *********************************************************************** -->
<!-- *********************************************************************** -->
<div id='topRightButtons'>
<button id="show-info" class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
<i class="material-icons">info_outline</i>
</button>
</div>
<dialog style='width:400px' id='dialog-info' class="mdl-dialog">
<h4 class="mdl-dialog__title">Welcome!</h4>
<div class="mdl-dialog__content">
Details on how to pick the inner image can be found <a target='_blank' href='https://artoolkit.org/documentation/doku.php?id=3_Marker_Training:marker_training'>here</a>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button">OK</button>
</div>
</dialog>
<script>
var dialogElement = document.querySelector('#dialog-info')
if (! dialogElement.showModal) {
dialogElementPolyfill.registerDialog(dialogElement)
}
dialogElement.querySelector('.mdl-dialog__actions button').addEventListener('click', function() {
dialogElement.close()
})
var showDialogButton = document.querySelector('#show-info')
showDialogButton.addEventListener('click', function() {
dialogElement.showModal()
})
</script>
<!-- *********************************************************************** -->
<!-- *********************************************************************** -->
<!-- *********************************************************************** -->
<div class='mdl-grid'>
<div class='mdl-cell mdl-cell--4-col'>
<label id='buttonUpload' for='fileinput' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>
<input type='file' id='fileinput' style='display: none'>
Upload
</label>
<div class='mdl-tooltip' for='buttonUpload'>
Upload the image to put inside the marker
</div>
<div class='mdl-grid'>
<div class='mdl-cell mdl-cell--3-col'></div>
<div class='mdl-cell mdl-cell--6-col'>
<label class="mdl-js-ripple-effect" for="patternRatioSlider">
<span class="">Pattern Ratio 0.50</span>
<input id='patternRatioSlider' class="mdl-slider mdl-js-slider" type="range" min="10" max="90" value="50" >
</label>
<div class='mdl-tooltip' for='patternRatioSlider'>
Set size of inner image vs black border
</div>
</div>
</div>
</div>
<div class='mdl-cell mdl-cell--4-col'>
<button id='buttonDownloadEncoded' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>
Download Marker
</button>
<div class='mdl-tooltip' for='buttonDownloadEncoded'>
Download marker encoded from the uploaded image
</div>
<br/>
<br/>
<button id='buttonDownloadFullImage' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>
Download Image
</button>
<div class='mdl-tooltip' for='buttonDownloadFullImage'>
Download marker image
</div>
</div>
<div class='mdl-cell mdl-cell--4-col'>
<button id='buttonDownloadPDFOnePerPage' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>
PDF One per Page
</button>
<div class='mdl-tooltip' for='buttonDownloadPDFOnePerPage'>
Download markers as PDF
<br/>
One marker per page
</div>
<br/>
<br/>
<button id='buttonDownloadPDFTwoPerPage' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>
PDF Two per Page
</button>
<div class='mdl-tooltip' for='buttonDownloadPDFTwoPerPage'>
Download markers as PDF
<br/>
Two marker per page
</div>
<br/>
<br/>
<button id='buttonDownloadPDFSixPerPage' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent'>
PDF Six per Page
</button>
<div class='mdl-tooltip' for='buttonDownloadPDFSixPerPage'>
Download markers as PDF.
<br/>
Six marker per page
</div>
</div>
</div>
<div class='mdl-grid'>
<div class='mdl-cell mdl-cell--3-col'></div>
<div class='mdl-cell mdl-cell--6-col'>
<div id='imageContainer'></div>
</div>
<div class='mdl-cell mdl-cell--3-col'></div>
</div>
<script>
var innerImageURL = null
var fullMarkerURL = null
innerImageURL = 'inner-images/inner-arjs.png'
updateFullMarkerImage()
document.querySelector('#buttonDownloadEncoded').addEventListener('click', function(){
if( innerImageURL === null ){
alert('upload a file first')
return
}
console.assert(innerImageURL)
THREEx.ArPatternFile.encodeImageURL(innerImageURL, function onComplete(patternFileString){
THREEx.ArPatternFile.triggerDownload(patternFileString)
})
})
document.querySelector('#buttonDownloadFullImage').addEventListener('click', function(){
// debugger
if( innerImageURL === null ){
alert('upload a file first')
return
}
// tech from https://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server
var domElement = window.document.createElement('a');
domElement.href = fullMarkerURL;
domElement.download = 'marker.png';
document.body.appendChild(domElement)
domElement.click();
document.body.removeChild(domElement)
})
document.querySelector('#patternRatioSlider').addEventListener('input', function(){
// update the patternRatio number
var patternRatio = document.querySelector('#patternRatioSlider').value/100
var domElement = document.querySelector('[for=patternRatioSlider] span')
domElement.innerHTML = `Pattern Ratio ${patternRatio.toFixed(2)}`
// update fullMarkerImage
updateFullMarkerImage()
})
document.querySelector('#fileinput').addEventListener('change', function(){
var file = this.files[0];
// debugger
var reader = new FileReader();
reader.onload = function(event){
innerImageURL = event.target.result
updateFullMarkerImage()
};
reader.readAsDataURL(file);
})
function updateFullMarkerImage(){
// get patternRatio
var patternRatio = document.querySelector('#patternRatioSlider').value/100
THREEx.ArPatternFile.buildFullMarker(innerImageURL, patternRatio, function onComplete(markerUrl){
fullMarkerURL = markerUrl
var fullMarkerImage = document.createElement('img')
fullMarkerImage.src = fullMarkerURL
// put fullMarkerImage into #imageContainer
var container = document.querySelector('#imageContainer')
while (container.firstChild) container.removeChild(container.firstChild);
container.appendChild(fullMarkerImage)
})
}
//////////////////////////////////////////////////////////////////////////////
// Handle PDF
//////////////////////////////////////////////////////////////////////////////
document.querySelector('#buttonDownloadPDFOnePerPage').addEventListener('click', generatePdfOnePerPage)
document.querySelector('#buttonDownloadPDFTwoPerPage').addEventListener('click', generatePdfTwoPerPage)
document.querySelector('#buttonDownloadPDFSixPerPage').addEventListener('click', generatePdfSixPerPage)
function generatePdfOnePerPage(){
var docDefinition = {
content: [
{
image: fullMarkerURL,
width: 600,
alignment: 'center',
},
]
}
pdfMake.createPdf(docDefinition).open();
}
function generatePdfTwoPerPage(){
var docDefinition = {
content: [
{
image: fullMarkerURL,
width: 300,
alignment: 'center',
},
{
image: fullMarkerURL,
width: 300,
alignment: 'center',
},
]
}
pdfMake.createPdf(docDefinition).open();
}
function generatePdfSixPerPage(){
var docDefinition = {
content: [
{
columns: [
{
image: fullMarkerURL,
width: 250,
},
{
image: fullMarkerURL,
width: 250,
},
]
},
{
columns: [
{
image: fullMarkerURL,
width: 250,
},
{
image: fullMarkerURL,
width: 250,
},
]
},
{
columns: [
{
image: fullMarkerURL,
width: 250,
},
{
image: fullMarkerURL,
width: 250,
},
]
},
],
}
pdfMake.createPdf(docDefinition).open();
}
</script>
</body>