diff --git a/app/assets/html/help/KFconsoleHelp.html b/app/assets/html/help/KFconsoleHelp.html new file mode 100644 index 0000000..dd8e788 --- /dev/null +++ b/app/assets/html/help/KFconsoleHelp.html @@ -0,0 +1,28 @@ + +
Javascript Keyframe console
+Use any combination of Javascript and API calls to update your keyframe scene.
+Special commands:
+"\help" for help & API
+"\clear" to clear results
+
+

API:

+ +
\ No newline at end of file diff --git a/app/assets/html/test.html b/app/assets/html/test.html deleted file mode 100644 index 45fe817..0000000 --- a/app/assets/html/test.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - Three.js + OrbitControls (importmap) - - - - - - - - - diff --git a/app/assets/styles/intro.css b/app/assets/styles/intro.css index 3882e09..e2bb3d6 100644 --- a/app/assets/styles/intro.css +++ b/app/assets/styles/intro.css @@ -25,7 +25,7 @@ canvas.intro3d{ } canvas.intro3d.ready{ - animation: logoanim 3.5s ease-out forwards; + animation: logoanim 1.5s ease-out forwards; } @keyframes logoanim{ diff --git a/app/controllers/live/DashboardsController.js b/app/controllers/live/DashboardsController.js index b01d8d0..9c989ae 100644 --- a/app/controllers/live/DashboardsController.js +++ b/app/controllers/live/DashboardsController.js @@ -17,7 +17,7 @@ class DashboardsController extends WindozController { const models = { agents : new AgentsModel('/agents') } -console.log('=============>spaceViewer 0') + const ttb = new app.LoadedModules.Threetobus({ eventsMapping: this.eventsMapping, sceneSize: this.arenaConfig.arenaSize, @@ -35,7 +35,6 @@ console.log('=============>spaceViewer 0') //TODO: eventsMapping: address child by suffix in assignations -console.log('=============>spaceViewer 1') this.loadWindow( 'visualisers/SpaceView', { diff --git a/app/thirdparty/buildoz/buildoz.css b/app/thirdparty/buildoz/buildoz.css index e0f3d41..311e0d3 100644 --- a/app/thirdparty/buildoz/buildoz.css +++ b/app/thirdparty/buildoz/buildoz.css @@ -142,7 +142,6 @@ bz-slidepane { display: block; position: absolute; background-color: #000A; - padding: 0 0.5em 0 0.5em; } bz-slidepane[side="top"] { top:0; left:0; width: 100%; height:0; border-bottom: 2px solid #DDD; } bz-slidepane[side="bottom"] { bottom:0; left:0; width: 100%; height:0; border-top: 2px solid #DDD;} diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html index 1ef99dd..e15fa36 100644 --- a/app/views/editors/KeyframeView.html +++ b/app/views/editors/KeyframeView.html @@ -87,6 +87,7 @@ height: 100%; display: grid; grid-template-rows: auto minmax(3em, 30%); + padding: 0.2em 0.2em 0 0.2em; } .kf-editor .kfArena bz-slidepane div.commandline{ grid-template-columns: auto 3em; @@ -105,6 +106,24 @@ border-radius: 10px; max-height: 3em; } + .kf-editor .kfArena .inner-console .results{ + max-height: 100%; + overflow: scroll; + } + + .kf-editor .kfArena .inner-console .results h1{ + font-size: 1.5em; + margin: 0; + padding: 0 .5em 0 .5em; + background-color: #473; + color: white; + } + .kf-editor .kfArena .inner-console .results .error{ + border-top: 1px solid red; + border-bottom: 1px solid red; + background-color: #FDD; + color: black; + }
@@ -125,10 +144,13 @@
- JS 3D Console. for help, type "help" +
Javascript Keyframe console
+ Special commands:
+ "\help" for help & API
+ "\clear" to clear results
- +
diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js index cf17548..5a2e9a2 100644 --- a/app/views/editors/KeyframeView.js +++ b/app/views/editors/KeyframeView.js @@ -67,13 +67,62 @@ class KeyframeView extends WindozDomContent { async execCommand(event){ console.log('cmd:', this.outputs.commands) - if(this.outputs.commands.trim()=='help'){ - this.outputs.results.innerHTML = ` - Type any javascript at your own risks. - To create an agent : this.newAgent(type, properties) - ` + if(this.outputs.commands.value.trim()=='\\help'){ + this.outputs.results.innerHTML += await app.Assets.loadHtml({ name: 'help/KFconsoleHelp.html' }) + } else if(this.outputs.commands.value.trim()=='\\clear'){ + this.outputs.results.innerHTML = '' } else { - this.kfArena.evalCmd(this.outputs.commands) + this.outputs.results.innerHTML += await this.evalCmd(this.outputs.commands.value) + } + const lines = this.outputs.results.querySelectorAll('div.line') + if(lines.length > 100) { + for(let i=0; i<(lines.length-100); i++) lines[i].remove() + } + + } + + async evalCmd(code){ + const api = { + newAgent: async (type, properties) => { + if(Array.from(this.outputs.agentsSelector.options).find(item => item.value==type)){ + this.outputs.agentsSelector.value = type + await this.onChangeAgent() + const defaultValues = this.getFieldsValues('div[data-output="agentProperties"]') + return(this.newAgent(type, { ...defaultValues, ...properties })) //TODO: deepMerge + } else { + throw(`Invalid agent type: ${type}`) + } + }, + removeAgent: (aid) => { + + }, + updateAgent: (aid, properties) => { + + }, + } + try { + const fn = new Function(...Object.keys(api), ` + return( + (async () => { + const logs = [] + const log = (item) => { logs.push(item) } + ${code} + return(logs) + })() + ) + `) + + const res = await fn(...Object.values(api)) + return( + '
'+ + res.map(item => { + if(typeof(item) == 'object') return(JSON.stringify(item)) + return(item) + }).join('
') + +'
' + ) + } catch (err) { + return(`
${err.name}: ${err.message}
`) } }