diff --git a/app/assets/html/spaceViewSetting.html b/app/assets/html/spaceViewSetting.html index 647c7bb..885f49e 100644 --- a/app/assets/html/spaceViewSetting.html +++ b/app/assets/html/spaceViewSetting.html @@ -1,12 +1,8 @@ -
-
- - -
-
-
-
\ No newline at end of file +
+ + +
diff --git a/app/assets/json/threetobus/eventsMapping.json b/app/assets/json/threetobus/eventsMapping.json index 78921c1..f3ca2d9 100644 --- a/app/assets/json/threetobus/eventsMapping.json +++ b/app/assets/json/threetobus/eventsMapping.json @@ -17,22 +17,6 @@ "tweenEasing":"Linear" } ] - } - ] - }, - { - "chan": "arena:agents:*", - "events": [ - { - "eventName": "age", - "mappings": [ - { - "id": "aid", - "assign": { - "material.color": "color" - } - } - ] }, { "eventName": "rotate", @@ -45,7 +29,23 @@ "rotation.z": "facing.z" }, "tween": true, - "tweenDelay": 500 + "tweenDelay": 150 + } + ] + } + ] + }, + { + "chan": "system:arena:agents:*", + "events": [ + { + "eventName": "age", + "mappings": [ + { + "id": "aid", + "assign": { + "material.color": "color" + } } ] }, diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css index 4fabffe..4e2103a 100755 --- a/app/assets/styles/app.css +++ b/app/assets/styles/app.css @@ -333,6 +333,20 @@ menu[eicmenu] [menuitem] i[class^="icon-"] { } article[eiccard] > header h1{ text-align: center; } +fieldset{ + border: 1px solid #574; + border-radius: 5px; + padding: .5em; + margin: 1em 0 0 0; + background-color: #231; + box-shadow: 0px 0px 7px #0B69; +} +fieldset > legend{ + font-size: .8em; + background-color: #473; + border-radius: 1em; + padding: 0 .5em 0.2em .5em; +} input{ width: 100%; border-radius: 1em; diff --git a/app/controllers/editors/EditorsController.json b/app/controllers/editors/EditorsController.json index 865a1a3..dbe8de3 100644 --- a/app/controllers/editors/EditorsController.json +++ b/app/controllers/editors/EditorsController.json @@ -29,7 +29,8 @@ "/helpers/basicDialogs", "/helpers/validators", "/helpers/activeAttributes", - "/helpers/helpers3D.module", + "/helpers/helpers3D.module", + "/helpers/formBuilder", "/thirdparty/Three/three.module", "/thirdparty/Three/OrbitControls.module", "/thirdparty/Three/tween.module" diff --git a/app/controllers/live/DashboardsController.js b/app/controllers/live/DashboardsController.js index 8c1a035..ba19c32 100644 --- a/app/controllers/live/DashboardsController.js +++ b/app/controllers/live/DashboardsController.js @@ -27,8 +27,8 @@ class DashboardsController extends WindozController { }) this.agentSprites = await models.agents.getSprites('Basic 3D') - const a1 = ttb.createAgent('agent42', this.agentSprites.find(item => item.atp_name=='nocode1').atp_3d) - const a2 = ttb.createAgent('agent42', this.agentSprites.find(item => item.atp_name=='nocode1').atp_3d) + const a1 = ttb.createAgent('agent42', this.agentSprites.find(item => item.atp_name=='nocode1').asp_3d) + const a2 = ttb.createAgent('agent43', this.agentSprites.find(item => item.atp_name=='nocode2').asp_3d) ttb.scene.add(a1) ttb.scene.add(a2) diff --git a/app/helpers/formBuilder.js b/app/helpers/formBuilder.js new file mode 100644 index 0000000..7a5fe0c --- /dev/null +++ b/app/helpers/formBuilder.js @@ -0,0 +1,63 @@ +if(!app.helpers) app.helpers = {} +/** + * Mixing add-in methods to your view instance. + * All of this should not be a helper, but inherited this from WindozDomContent, but not my framework anymore. + * @category MyEic + */ +app.helpers.formBuilder = { + + fieldsFromJSON(fieldsObj, fieldsetLabel=null){ + let allFields = [] + for(const propName in fieldsObj){ + const fieldRow = ui.create(`
`) + let component + switch(fieldsObj[propName].type){ + case 'number': + component = document.createElement('input') + component.setAttribute('name',propName) + component.setAttribute('type','number') + if('min' in fieldsObj[propName]) component.setAttribute('min', fieldsObj[propName].min) + if('max' in fieldsObj[propName]) component.setAttribute('max', fieldsObj[propName].max) + component.value = fieldsObj[propName].default + break + case 'string': + component = document.createElement('input') + component.setAttribute('name',propName) + component.setAttribute('type','text') + component.value = fieldsObj[propName].default + break + case 'boolean': + component = document.createElement('bz-toggler') + component.setAttribute('name',propName) + component.setAttribute('trueValue','1') + component.setAttribute('falseValue','0') + component.value = fieldsObj[propName].default + fieldRow.append(component.el) + break + case 'list': + component = document.createElement('bz-select') + component.setAttribute('name',propName) + component.fillOptions( fieldsObj[propName].choices.map(item => { + return({ markup: `${item}`, value: item}) + })) + break + default: + console.warn(`Unknown field type ${fieldsObj[propName].type}`) + } + fieldRow.append(component) + allFields.push(fieldRow) + } + if(fieldsetLabel!==null){ + const fieldset = document.createElement('fieldset') + if(fieldsetLabel!=''){ + const lgd = document.createElement('legend') + lgd.innerHTML = fieldsetLabel + fieldset.append(lgd) + } + fieldset.append(...allFields) + return([fieldset]) + } else { + return(allFields) + } + }, +} \ No newline at end of file diff --git a/app/models/AgentsModel.js b/app/models/AgentsModel.js index 23b4044..e6ce5cd 100644 --- a/app/models/AgentsModel.js +++ b/app/models/AgentsModel.js @@ -6,7 +6,7 @@ class AgentsModel extends WindozModel { } async getTypes(family) { - let endpoint = app.config.api[this.ressource].getTypes + let endpoint = {...app.config.api[this.ressource].getTypes} endpoint.uri = endpoint.uri.replace('{family}', family) return ( this.request(endpoint.uri, endpoint.method) @@ -15,7 +15,7 @@ class AgentsModel extends WindozModel { } async getSprites(group) { - let endpoint = app.config.api[this.ressource].getSprites + let endpoint = {...app.config.api[this.ressource].getSprites} endpoint.uri = endpoint.uri.replace('{group}', group) return ( this.request(endpoint.uri, endpoint.method) @@ -23,8 +23,8 @@ class AgentsModel extends WindozModel { ) } - async getProperties(id) { - let endpoint = app.config.api[this.ressource].getProperties + async getProperties(id) { + let endpoint = {...app.config.api[this.ressource].getProperties} endpoint.uri = endpoint.uri.replace('{id}', id) return ( this.request(endpoint.uri, endpoint.method) diff --git a/app/thirdparty/buildoz/buildoz.js b/app/thirdparty/buildoz/buildoz.js index 37b02c4..a19bcf7 100644 --- a/app/thirdparty/buildoz/buildoz.js +++ b/app/thirdparty/buildoz/buildoz.js @@ -52,7 +52,7 @@ class BZselect extends Buildoz { } } - connectedCallback() { + connectedCallback() { super.connectedCallback() this.button = document.createElement('button') this.button.textContent = this.getBZAttribute('label') diff --git a/app/thirdparty/eicui/eicui-2.0.css b/app/thirdparty/eicui/eicui-2.0.css index e5a790d..3538fe1 100755 --- a/app/thirdparty/eicui/eicui-2.0.css +++ b/app/thirdparty/eicui/eicui-2.0.css @@ -688,11 +688,13 @@ label[accent],p[accent],b[accent],span[accent] { color: var(--eicui-base-color-a label[info],p[info],b[info],span[info] { color: var(--eicui-base-color-info-100); } label[secondary],p[secondary],b[secondary],span[secondary] { color: var(--eicui-base-color-grey-50); } +/* this is such BS! [eicapp] a, [eicapp] abbr, [eicapp] acronym, [eicapp] address, [eicapp] article, [eicapp] aside, [eicapp] audio, [eicapp] b, [eicapp] big, [eicapp] blockquote, [eicapp] canvas, [eicapp] caption, [eicapp] center, [eicapp] cite, [eicapp] code, [eicapp] dd, [eicapp] del, [eicapp] details, [eicapp] dfn, [eicapp] div, [eicapp] dl, [eicapp] dt, [eicapp] em, [eicapp] embed, [eicapp] fieldset, [eicapp] figcaption, [eicapp] figure, [eicapp] footer, [eicapp] form, [eicapp] h1, [eicapp] h2, [eicapp] h3, [eicapp] h4, [eicapp] h5, [eicapp] h6, [eicapp] header, [eicapp] hgroup, [eicapp] i, [eicapp] iframe, [eicapp] img, [eicapp] ins, [eicapp] kbd, [eicapp] label, [eicapp] legend, [eicapp] li, [eicapp] mark, [eicapp] menu, [eicapp] nav, [eicapp] object, [eicapp] ol, [eicapp] output, [eicapp] p, [eicapp] pre, [eicapp] q, [eicapp] s, [eicapp] samp, [eicapp] section, [eicapp] small, [eicapp] span, [eicapp] strike, [eicapp] strong, [eicapp] sub, [eicapp] summary, [eicapp] sup, [eicapp] table, [eicapp] tbody, [eicapp] td, [eicapp] tfoot, [eicapp] th, [eicapp] thead, [eicapp] time, [eicapp] tr, [eicapp] tt, [eicapp] u, [eicapp] ul { border: 0; margin: 0; padding: 0; } +*/ [eicapp] ul[bulleted] li, [eicapp] ul[nonbulleted] li { padding: var(--eicui-base-spacing-xs) 0 0 0; @@ -2304,6 +2306,8 @@ menu[eicmenu] { box-shadow: var(--eicui-base-shadow-10); overflow-y: auto; position: relative; + margin: 0; + padding: 0; } menu[eicmenu] .menu-lookup { padding: 0 .5em .2em .5em; diff --git a/app/views/editors/KeyframeView.html b/app/views/editors/KeyframeView.html index 89d2ea8..7f4b711 100644 --- a/app/views/editors/KeyframeView.html +++ b/app/views/editors/KeyframeView.html @@ -11,6 +11,20 @@ .kf-editor > article, .kf-editor > article header{ border-color: #473; } .kf-editor article.agent-preview header { padding:0; } .kf-editor article.agent-preview canvas{ width:100%; aspect-ratio: 1 / 1;} + .kf-editor article.agent-preview section{ + display: grid; + grid-template-rows: auto 2em; + height: 100%; + } + .kf-editor article.agent-preview section div.actions button{ + color: #DDD; + padding: 0 0 0 0; + min-height: 0.5em; + } + .kf-editor button[data-trigger="onAddAgent"] { background-color: #473; } + .kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; } + .kf-editor section[data-output="agentProperties"] label{ font-size: 0.9em; } + .kf-editor section[data-output="agentProperties"] div.cols-2 { grid-template-columns: 4fr 3fr; }
@@ -18,6 +32,10 @@
+
+ + +
diff --git a/app/views/editors/KeyframeView.js b/app/views/editors/KeyframeView.js index 21a761a..0a3f204 100644 --- a/app/views/editors/KeyframeView.js +++ b/app/views/editors/KeyframeView.js @@ -3,6 +3,7 @@ class KeyframeView extends WindozDomContent { constructor() { super() Object.assign(this, app.helpers.activeAttributes) + Object.assign(this, app.helpers.formBuilder) } DOMContentFocused(options) { @@ -47,49 +48,48 @@ class KeyframeView extends WindozDomContent { async onChangeAgent(event){ if(this.outputs.agentsSelector.value) this.agentPreview.setAgent(this.outputs.agentsSelector.value) if(!this.outputs.agentsSelector.value) return + console.log('onChangeAgent',this.outputs.agentsSelector.value) const agent = await this.models.agents.getProperties(this.outputs.agentsSelector.value) this.fillAgentProperties(agent.atp_props) } - fillAgentProperties(agentProps){ - let allFields = [] - for(const propName in agentProps){ - const fieldRow = ui.create(`
`) - let component - switch(agentProps[propName].type){ - case 'number': - component = document.createElement('input') - component.setAttribute('type','number') - if(agentProps[propName].min) component.setAttribute('min', agentProps[propName].min) - if(agentProps[propName].max) component.setAttribute('max', agentProps[propName].max) - component.value = agentProps[propName].default - break - case 'string': - component = document.createElement('input') - component.setAttribute('type','text') - component.value = agentProps[propName].default - break - case 'boolean': - component = document.createElement('bz-toggler') - component.setAttribute('trueValue','1') - component.setAttribute('falseValue','0') - component.value = agentProps[propName].default - fieldRow.append(component.el) - break - case 'list': - component = document.createElement('bz-select') - component.fillOptions( agentProps[propName].choices.map(item => { - return({ markup: `${item}`, value: item}) - })) - break - default: - console.warn(`Unknown field type ${agentProps[propName].type}`) - } - fieldRow.append(component) - allFields.push(fieldRow) - } + fillAgentProperties(agentProps){ console.log('fillAgentProperties', agentProps) this.outputs.agentProperties.innerHTML='' - this.outputs.agentProperties.append(...allFields) + this.outputs.agentProperties.append(...this.fieldsFromJSON(agentProps, 'Internal properties')) + this.outputs.agentProperties.append(...this.fieldsFromJSON({ + "position.x": { + label: "Position X", + type: "number", + default: "0" + }, + "position.y": { + label: "Position Y", + type: "number", + default: "0" + }, + "position.z": { + label: "Position Z", + type: "number", + default: "0" + }, + }, 'Coordinates')) + this.outputs.agentProperties.append(...this.fieldsFromJSON({ + "speed.x": { + label: "Speed X", + type: "number", + default: "0" + }, + "speed.y": { + label: "Speed Y", + type: "number", + default: "0" + }, + "speed.z": { + label: "Speed Z", + type: "number", + default: "0" + }, + }, 'Speed vector')) } }