提交 2d2c2878 编写于 作者: N nicolo.carpignoli

chore: fixed ui style

上级 affe21e2
......@@ -33,7 +33,7 @@
});
</script>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
<body style='margin : 0px; overflow: hidden; font-family: Monospace;'><div style='position: fixed; top: 10px; left: 5px; text-align: center; z-index: 1;'>
<a href="https://github.com/jeromeetienne/AR.js/" target="_blank">AR.js</a> - marker events example for a-frame - look at the js console
<br/>
Contact me any time at <a href='https://twitter.com/jerome_etienne' target='_blank'>@jerome_etienne</a>
......
......@@ -6,59 +6,50 @@ var ARjs = ARjs || {}
*
* @param {ARjs.Anchor} arAnchor - the anchor to user
*/
ARjs.SessionDebugUI = function(arSession, tangoPointCloud){
var trackingBackend = arSession.arContext.parameters.trackingBackend
this.domElement = document.createElement('div')
this.domElement.style.color = 'rgba(0,0,0,0.9)'
this.domElement.style.backgroundColor = 'rgba(127,127,127,0.5)'
this.domElement.style.display = 'inline-block'
this.domElement.style.padding = '0.5em'
this.domElement.style.margin = '0.5em'
this.domElement.style.textAlign = 'left'
//////////////////////////////////////////////////////////////////////////////
// add title
//////////////////////////////////////////////////////////////////////////////
// var domElement = document.createElement('div')
// domElement.style.display = 'block'
// domElement.style.fontWeight = 'bold'
// domElement.style.fontSize = '120%'
// this.domElement.appendChild(domElement)
// domElement.innerHTML = 'AR.js Session Debug'
//////////////////////////////////////////////////////////////////////////////
// current-tracking-backend
//////////////////////////////////////////////////////////////////////////////
var domElement = document.createElement('span')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.innerHTML = '<b>trackingBackend</b> : ' +trackingBackend
//////////////////////////////////////////////////////////////////////////////
// toggle-point-cloud
//////////////////////////////////////////////////////////////////////////////
if( trackingBackend === 'tango' && tangoPointCloud ){
var domElement = document.createElement('button')
this.domElement.appendChild(domElement)
domElement.id= 'buttonTangoTogglePointCloud'
domElement.innerHTML = 'toggle-point-cloud'
domElement.href='javascript:void(0)'
domElement.addEventListener('click', function(){
var scene = arSession.parameters.scene
// TODO how tangoPointCloud, get connected here ???
// in arguments simply ?
if( tangoPointCloud.object3d.parent ){
scene.remove(tangoPointCloud.object3d)
}else{
scene.add(tangoPointCloud.object3d)
}
})
}
ARjs.SessionDebugUI = function (arSession, tangoPointCloud) {
var trackingBackend = arSession.arContext.parameters.trackingBackend
this.domElement = document.createElement('div')
this.domElement.style.color = 'rgba(0,0,0,0.9)'
this.domElement.style.backgroundColor = 'rgba(127,127,127,0.5)'
this.domElement.style.display = 'block'
this.domElement.style.padding = '0.5em'
this.domElement.style.position = 'fixed'
this.domElement.style.left = '5px'
this.domElement.style.bottom = '10px'
this.domElement.style.textAlign = 'right'
//////////////////////////////////////////////////////////////////////////////
// current-tracking-backend
//////////////////////////////////////////////////////////////////////////////
var domElement = document.createElement('span')
domElement.style.display = 'block'
domElement.innerHTML = '<b>trackingBackend</b> : ' + trackingBackend
this.domElement.appendChild(domElement)
//////////////////////////////////////////////////////////////////////////////
// toggle-point-cloud
//////////////////////////////////////////////////////////////////////////////
if (trackingBackend === 'tango' && tangoPointCloud) {
var domElement = document.createElement('button')
this.domElement.appendChild(domElement)
domElement.id = 'buttonTangoTogglePointCloud'
domElement.innerHTML = 'toggle-point-cloud'
domElement.href = 'javascript:void(0)'
domElement.addEventListener('click', function () {
var scene = arSession.parameters.scene
if (tangoPointCloud.object3d.parent) {
scene.remove(tangoPointCloud.object3d)
} else {
scene.add(tangoPointCloud.object3d)
}
})
}
}
/**
......@@ -71,108 +62,103 @@ ARjs.SessionDebugUI.AugmentedWebsiteURL = 'https://webxr.io/augmented-website'
// ARjs.AnchorDebugUI
//////////////////////////////////////////////////////////////////////////////
/**
* Create an debug UI for an ARjs.Anchor
*
* @param {ARjs.Anchor} arAnchor - the anchor to user
*/
ARjs.AnchorDebugUI = function(arAnchor){
var _this = this
var arSession = arAnchor.arSession
var trackingBackend = arSession.arContext.parameters.trackingBackend
this.domElement = document.createElement('div')
this.domElement.style.color = 'rgba(0,0,0,0.9)'
this.domElement.style.backgroundColor = 'rgba(127,127,127,0.5)'
this.domElement.style.display = 'inline-block'
this.domElement.style.padding = '0.5em'
this.domElement.style.margin = '0.5em'
this.domElement.style.textAlign = 'left'
//////////////////////////////////////////////////////////////////////////////
// add title
//////////////////////////////////////////////////////////////////////////////
// var domElement = document.createElement('div')
// domElement.style.display = 'block'
// domElement.style.fontWeight = 'bold'
// domElement.style.fontSize = '120%'
// this.domElement.appendChild(domElement)
// domElement.innerHTML = 'Anchor Marker Debug'
//////////////////////////////////////////////////////////////////////////////
// current-tracking-backend
//////////////////////////////////////////////////////////////////////////////
var domElement = document.createElement('span')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.innerHTML = '<b>markersAreaEnabled</b> :' +arAnchor.parameters.markersAreaEnabled
//////////////////////////////////////////////////////////////////////////////
// toggle-marker-helper
//////////////////////////////////////////////////////////////////////////////
if( arAnchor.parameters.markersAreaEnabled ){
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.id= 'buttonToggleMarkerHelpers'
domElement.innerHTML = 'toggle-marker-helper'
domElement.href='javascript:void(0)'
var subMarkerHelpersVisible = false
domElement.addEventListener('click', function(){
subMarkerHelpersVisible = subMarkerHelpersVisible ? false : true
arAnchor.markersArea.setSubMarkersVisibility(subMarkerHelpersVisible)
})
}
//////////////////////////////////////////////////////////////////////////////
// Learn-new-marker-area
//////////////////////////////////////////////////////////////////////////////
if( arAnchor.parameters.markersAreaEnabled ){
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.id = 'buttonMarkersAreaLearner'
domElement.innerHTML = 'Learn-new-marker-area'
domElement.href ='javascript:void(0)'
domElement.addEventListener('click', function(){
if( ARjs.AnchorDebugUI.MarkersAreaLearnerURL !== null ){
var learnerURL = ARjs.AnchorDebugUI.MarkersAreaLearnerURL
}else{
var learnerURL = ARjs.Context.baseURL + 'examples/multi-markers/examples/learner.html'
}
ARjs.MarkersAreaUtils.navigateToLearnerPage(learnerURL, trackingBackend)
})
}
//////////////////////////////////////////////////////////////////////////////
// Reset-marker-area
//////////////////////////////////////////////////////////////////////////////
if( arAnchor.parameters.markersAreaEnabled ){
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.id = 'buttonMarkersAreaReset'
domElement.innerHTML = 'Reset-marker-area'
domElement.href ='javascript:void(0)'
domElement.addEventListener('click', function(){
ARjs.MarkersAreaUtils.storeDefaultMultiMarkerFile(trackingBackend)
location.reload()
})
}
ARjs.AnchorDebugUI = function (arAnchor) {
var arSession = arAnchor.arSession
var trackingBackend = arSession.arContext.parameters.trackingBackend
this.domElement = document.createElement('div')
this.domElement.style.color = 'rgba(0,0,0,0.9)'
this.domElement.style.backgroundColor = 'rgba(127,127,127,0.5)'
this.domElement.style.display = 'inline-block'
this.domElement.style.padding = '0.5em'
this.domElement.style.margin = '0.5em'
this.domElement.style.textAlign = 'left'
//////////////////////////////////////////////////////////////////////////////
// current-tracking-backend
//////////////////////////////////////////////////////////////////////////////
var domElement = document.createElement('span')
domElement.style.display = 'block'
domElement.style.padding = '0.5em'
domElement.style.color = 'rgba(0,0,0,0.9)'
domElement.style.backgroundColor = 'rgba(127,127,127,0.5)'
domElement.style.position = 'fixed'
domElement.style.left = '5px'
domElement.style.bottom = '40px'
this.domElement.appendChild(domElement)
domElement.innerHTML = '<b>markersAreaEnabled</b> :' + arAnchor.parameters.markersAreaEnabled
//////////////////////////////////////////////////////////////////////////////
// toggle-marker-helper
//////////////////////////////////////////////////////////////////////////////
if (arAnchor.parameters.markersAreaEnabled) {
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.style.padding = '0.5em'
this.domElement.style.position = 'fixed'
this.domElement.style.textAlign = 'left'
this.domElement.appendChild(domElement)
domElement.id = 'buttonToggleMarkerHelpers'
domElement.innerHTML = 'toggle-marker-helper'
domElement.href = 'javascript:void(0)'
var subMarkerHelpersVisible = false
domElement.addEventListener('click', function () {
subMarkerHelpersVisible = subMarkerHelpersVisible ? false : true
arAnchor.markersArea.setSubMarkersVisibility(subMarkerHelpersVisible)
})
}
//////////////////////////////////////////////////////////////////////////////
// Learn-new-marker-area
//////////////////////////////////////////////////////////////////////////////
if (arAnchor.parameters.markersAreaEnabled) {
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.id = 'buttonMarkersAreaLearner'
domElement.innerHTML = 'Learn-new-marker-area'
domElement.href = 'javascript:void(0)'
domElement.addEventListener('click', function () {
if (ARjs.AnchorDebugUI.MarkersAreaLearnerURL !== null) {
var learnerURL = ARjs.AnchorDebugUI.MarkersAreaLearnerURL
} else {
var learnerURL = ARjs.Context.baseURL + 'examples/multi-markers/examples/learner.html'
}
ARjs.MarkersAreaUtils.navigateToLearnerPage(learnerURL, trackingBackend)
})
}
//////////////////////////////////////////////////////////////////////////////
// Reset-marker-area
//////////////////////////////////////////////////////////////////////////////
if (arAnchor.parameters.markersAreaEnabled) {
var domElement = document.createElement('button')
domElement.style.display = 'block'
this.domElement.appendChild(domElement)
domElement.id = 'buttonMarkersAreaReset'
domElement.innerHTML = 'Reset-marker-area'
domElement.href = 'javascript:void(0)'
domElement.addEventListener('click', function () {
ARjs.MarkersAreaUtils.storeDefaultMultiMarkerFile(trackingBackend)
location.reload()
})
}
}
/**
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册