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

styling, add&del buttons...

Browse Source
This commit is contained in:
STEINNI
2025-10-20 20:44:12 +00:00
parent 7c92bbcdfe
commit 4712946876
11 changed files with 171 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/html/spaceViewSetting.html
+1 -5
View File
@@ -1,12 +1,8 @@
<div class="cols-2">
<div>
<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/json/threetobus/eventsMapping.json
+17 -17
View File
@@ -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
+14
View File
@@ -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
+1
View File
@@ -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
+2 -2
View File
@@ -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)
app/helpers/formBuilder.js
+63
View File
@@ -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
+3 -3
View File
@@ -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
Vendored
+4
View File
@@ -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
+18
View File
@@ -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
+38 -38
View File
@@ -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(`<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)
}
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'))
}
}