styling, add&del buttons...

app/assets/html/spaceViewSetting.html

@@ -1,4 +1,3 @@
-<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"/>
@@ -7,6 +6,3 @@
         <input eicinput type="toggler" name="axes" primary="" xsmall="" value="no" aria-enabled="true" labelleft="Axes" classOff="greyed"/>
     </li>                    
 </div>
-    <div>
-    </div>
-</div>

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"
+                        }
                     }
                 ]
             },

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;

app/controllers/editors/EditorsController.json

@@ -30,6 +30,7 @@
         "/helpers/validators",
         "/helpers/activeAttributes",
         "/helpers/helpers3D.module",
+        "/helpers/formBuilder",    
         "/thirdparty/Three/three.module",
         "/thirdparty/Three/OrbitControls.module",
         "/thirdparty/Three/tween.module"

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 a1 = ttb.createAgent('agent42', this.agentSprites.find(item => item.atp_name=='nocode1').asp_3d)
-        const a2 = ttb.createAgent('agent42', this.agentSprites.find(item => item.atp_name=='nocode1').atp_3d)
+        const a2 = ttb.createAgent('agent43', this.agentSprites.find(item => item.atp_name=='nocode2').asp_3d)
         ttb.scene.add(a1)
         ttb.scene.add(a2)
 

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(`<div class="cols-2"><label>${fieldsObj[propName].label}</label></div>`)
+            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)
+        }
+    },
+}

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)
@@ -24,7 +24,7 @@ class AgentsModel extends WindozModel {
     }
 
     async getProperties(id) { 
-        let endpoint = app.config.api[this.ressource].getProperties
+        let endpoint = {...app.config.api[this.ressource].getProperties}
         endpoint.uri = endpoint.uri.replace('{id}', id)
         return ( 
             this.request(endpoint.uri, endpoint.method)

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;

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; }
 
 </style>
 <div class="kf-editor cols-3">
@@ -18,6 +32,10 @@
          <header><canvas data-output="agentSampleCanvas"></canvas></header>
         <section>
             <bz-select label="Agent type..." data-output="agentsSelector"></bz-select>
+            <div class="actions cols-2">
+                <button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Add</button>
+                <button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove</button>
+            </div>
         </section>
     </article>
     <article eiccard>

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){
+    fillAgentProperties(agentProps){ console.log('fillAgentProperties', agentProps)
-        let allFields = []
-        for(const propName in agentProps){
-            const fieldRow = ui.create(`<div class="cols-2"><label>${propName}</label></div>`)
-            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)
-        }
         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'))
     }
 
 }