P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

window settings for axes & grid

Browse Source
This commit is contained in:
STEINNI
2025-09-29 17:28:55 +00:00
parent 8be18e8d83
commit e4ac2a8dc0
7 changed files with 63 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/sapceViewSetting.html
+12
View File
@@ -0,0 +1,12 @@
<div class="cols-2">
<div>
<li menuitem="" aria-enabled="true" success="" class="menu-link">
<input eicinput type="toggler" name="grid" primary="" xsmall="" value="no" aria-enabled="true" labelleft="Grid" classOff="greyed"/>
</li>
<li menuitem="" aria-enabled="true" success="" class="menu-link">
<input eicinput type="toggler" name="axes" primary="" xsmall="" value="no" aria-enabled="true" labelleft="Axes" classOff="greyed"/>
</li>
</div>
<div>
</div>
</div>
app/assets/styles/app.css
+3
View File
@@ -308,3 +308,6 @@ div.window > section:first-of-type > article[eiccard]:first-of-type{
border: 2px solid var(--app-color-primary);
border-radius: .5rem;
}
div.window header .controls menu[data-output="settingsMenu"]{
background: var(--app-color-secondary)
}
app/controllers/dashboard/DashboardsController.json
+3
View File
@@ -24,6 +24,9 @@
"assets": {
"styles": [
],
"html": [
{ "id":"sapceViewSetting", "name": "sapceViewSetting.html"}
],
"json": [
{"id":"agentDefs", "name": "agents/basic3D.json"},
{"id":"eventsMapping", "name": "threetobus/eventsMapping.json"}
app/libs/EIC/EICController.js
+10 -1
View File
@@ -91,11 +91,20 @@ class EICController extends Controller {
active: false
});
let settingsMarkup = ''
if(options.withSettings){
settingsMarkup=`
<div eicdropdown>
<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-cog settings" title="settings"></button>
<menu eicmenu data-output="settingsMenu"></menu>
</div>
`
}
let content = ui.create(`<div class="window">
<header class="cols-2 right">
<h1>${options.title || ''}</h1>
<div class="controls">
${(options.withSettings) ? '<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-cog settings" title="settings"></button>' :''}
${settingsMarkup}
<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-copy shrink" title="shrink"></button>
<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-square-o expand" title="expand"></button>
<button eicbutton data-id="${view._sparcId}" basic primary rounded xsmall class="icon-cancel close" title="close"></button>
app/thirdparty/Snaptobus/snaptobus.js
Vendored
-3
View File
@@ -99,13 +99,10 @@ class Snaptobus{
processBusEvent(eventType, chan, payload, userId, x){
console.log('processBusEvent====>',eventType, chan, payload, userId)
const chanObj = this._curBusConfig.find(item => item.chan==chan)
if(!chanObj) return
console.log('processBusEvent====>chanObj', chanObj)
const eventObj = chanObj.events.find(item => item.eventName==eventType)
if(!eventObj) return
console.log('processBusEvent====>eventObj', eventObj)
// assign attributes in payload to all snap objects for that eventType
// each snap is an assignation of attributes via a selector
for(const snapDef of eventObj.snaps){
app/thirdparty/Threetobus/threetobus.module.js
Vendored
+15 -8
View File
@@ -134,16 +134,20 @@ export class Threetobus{
if(options.grid){
this.grid = new THREE.GridHelper(20, 20, 0x8888AA, 0x8888AA)
this.grid.layers.set(1)
this.scene.add(this.grid)
}
if(options.axes){
this.axes = new THREE.AxesHelper(5, 5)
this.axes.layers.set(2)
this.scene.add(this.axes)
}
// Cameras
this.cameras.camPerspective = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
this.cameras.camPerspective.position.set(3, 3, 5)
this.cameras.camPerspective.layers.enable(1)
this.cameras.camPerspective.layers.enable(2)
const aspect = window.innerWidth / window.innerHeight
const frustumSize = 10
this.cameras.cam2Dtop = new THREE.OrthographicCamera(
@@ -156,6 +160,7 @@ export class Threetobus{
)
this.cameras.cam2Dtop.position.set(0, 100, 0)
this.cameras.cam2Dtop.lookAt(0, 0, 0)
this.cameras.cam2Dtop.layers.enable(1)
// Lights
const light = new THREE.DirectionalLight(0xffffff, 1)
@@ -169,13 +174,14 @@ export class Threetobus{
startRendering(canvasEl, mode){
let renderEngine
if(mode=='2D'){
renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.cam2Dtop)
renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.cam2Dtop, mode)
} else if(mode=='3D') {
renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.camPerspective)
renderEngine = new RenderingEngine(canvasEl, this.scene, this.cameras.camPerspective, mode)
} else console.error('Unknown rendering mode !')
renderEngine.addControls(mode)
renderEngine.addControls()
renderEngine.render()
this.renderers.push(renderEngine)
return(renderEngine)
}
@@ -207,7 +213,7 @@ export class Threetobus{
return obj
}
smoothMove(options){ console.log('=====>', options)
smoothMove(options){
// options: object, dX, dY, dZ, delay, easing, easingMode
// Absolute: x,y,z
// Relative: dx,dy,dz
@@ -242,19 +248,20 @@ export class Threetobus{
}
class RenderingEngine{
constructor(canvasEl, scene, camera){
constructor(canvasEl, scene, camera, mode){
this.canvasEl = canvasEl
this.scene = scene
this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
this.camera = camera
this.mode = mode
}
addControls(mode){
addControls(){
this.controls = new OrbitControls(this.camera, this.canvasEl)
if(mode=='2D'){
if(this.mode=='2D'){
this.controls.maxPolarAngle = 0 // Math.PI / 2
this.controls.minPolarAngle = 0 // Math.PI / 2
} else if(mode=='3D'){
} else if(this.mode=='3D'){
}
this.controls.mouseButtons = {
app/views/visualisers/SpaceView.js
+18 -7
View File
@@ -21,15 +21,26 @@ class SpaceView extends EICDomContent {
const components = ui.eicfy(this.el)
this.setupTriggers(components)
this.setupRefs(components)
this.ttb.startRendering(this.outputs.ttbCanvas, options.mode)
this.renderingEngine = this.ttb.startRendering(this.outputs.ttbCanvas, options.mode)
this.output('settingsMenu',app.Assets.Store.html.sapceViewSetting)
this.outputs.settingsMenu.querySelectorAll('input[type="toggler"]').forEach(el => {
const tog = new InputToggler(el)
if(this.ttb[tog._el.name].layers){
tog.value = this.renderingEngine.camera.layers.test(this.ttb[tog._el.name].layers) ? 'yes' : 'no'
}
tog.onToggle = this.settingsToggle.bind(this)
})
}
settings(){
console.log('Settings!')
settingsToggle(value, object){
if(['grid','axes'].includes(object._el.name)){
const layerId = {'grid':1,'axes':2}[object._el.name]
if(value=='yes'){
this.renderingEngine.camera.layers.enable(layerId)
} else {
this.renderingEngine.camera.layers.disable(layerId)
}
}
}
}