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

bz-slidepane OK + console started + intro loader

Browse Source
This commit is contained in:
STEINNI
2025-11-16 21:45:56 +00:00
parent f2c94228d1
commit 81bd47c282
7 changed files with 99 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/sfx/intro.js
+4 -11
View File
@@ -23,7 +23,7 @@ class Intro{
new Promise((resolve, reject) => {
new RGBELoader()
.setPath('/app/assets/images/')
.load('kloofendal_48d_partly_cloudy_puresky_2k.hdr', resolve, this.hdrProgress, reject)
.load('kloofendal_48d_partly_cloudy_puresky_2k.hdr', resolve, null, reject)
})
const loadTexture1 = () =>
@@ -45,15 +45,6 @@ class Intro{
this.Xcorrection = -0.02
}
hdrProgress(xhr){
const pb = document.querySelector('div.progress')
if (xhr.lengthComputable) {
const percent = (xhr.loaded / xhr.total) * 100
pb.style.width = percent.toFixed(0)
if(percent.toFixed(0)>=99) pb.style.display = 'none'
}
}
initScene(LoadersResults){ console.log('initScene')
let hdrTexture
const [hdrResult, texResultP42, texResultEE] = LoadersResults
@@ -182,11 +173,13 @@ class Intro{
})
this.renderer.render(this.scene, this.camera)
document.querySelector('div.loading').style.display = 'none'
this.canvas.classList.add('ready')
}
launch3DAnim(){ console.log('CSs finished, launching 3D anim')
document.getElementById('startbtn').style.display = 'block'
this.nextAnim = Date.now()
this.animate()
}
@@ -228,7 +221,7 @@ class Intro{
}
if (!this.planeEE) {
const geo = new THREE.PlaneGeometry(planeWidth, planeHeight)
this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, alphaTest: 0.01, depthWrite:true, depthTest:true })
this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, alphaTest: 0.001, depthWrite:true, depthTest:true })
this.matEE.defines = this.matEE.defines || {}
this.matEE.defines.USE_UV = ""
this.matEE.onBeforeCompile = shader => {
app/assets/styles/intro.css
+17 -9
View File
@@ -1,3 +1,5 @@
@import '/app/assets/styles/icons.css';
body {
display: flex;
justify-content: center;
@@ -36,14 +38,20 @@ canvas.intro3d.ready{
40% { opacity: 0.8; }
100% { opacity: 1; }
}
.progress{
position: absolute;
width: 100px;
height: 2px;
background: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@keyframes spin {
0% { transform: rotate(0deg) ; }
100% { transform: rotate(360deg) ; }
}
.loading{
animation: spin 1s infinite linear;
font-family: 'glyphs';
color: #7E6;
font-size: 4em;;
z-index: 99999;
position:absolute;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
}
#startbtn{
@@ -59,8 +67,8 @@ canvas.intro3d.ready{
box-shadow: 2px 2px 10px #BAFFEF, -2px -2px 10px #BAFFEF, -2px 0 10px #BAFFEF, 0 -2px 10px #BAFFEF;
animation: startbtnanim 5s ease-out forwards;
z-index: 99;
display: none;
}
#startbtn[disabled]{
filter: brightness(.3);
}
app/thirdparty/buildoz/buildoz.css
Vendored
+22 -8
View File
@@ -138,39 +138,53 @@ bz-toggler div.toggle-switch span.toggle-thumb.turned-on {
left : 1em;
}
bz-slidepane div.handle.top {
bz-slidepane {
display: block;
position: absolute;
top: 0;
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;}
bz-slidepane[side="left"] { top:0; left:0; height:100%; width:0; border-right: 2px solid #DDD;}
bz-slidepane[side="right"] { top:0; right:0; height:100%; width:0; border-left: 2px solid #DDD; }
bz-slidepane[side="top"] div.handle {
position: absolute;
bottom: -12px;
left: 50%;
width: 40px;
height: 11px;
background: repeating-linear-gradient( to top, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
transform: translateX(-50%);
cursor: ns-resize;
}
bz-slidepane div.handle.bottom {
bz-slidepane[side="bottom"] div.handle {
position: absolute;
bottom: 0;
top: -12px;
left: 50%;
width: 40px;
height: 11px;
background: repeating-linear-gradient( to bottom, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
transform: translateX(-50%);
cursor: ns-resize;
}
bz-slidepane div.handle.left {
bz-slidepane[side="left"] div.handle {
position: absolute;
left: 0;
right: -12px;
top: 50%;
width: 11px;
height: 40px;
background: repeating-linear-gradient( to left, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
transform: translateY(-50%);
cursor: ew-resize;
}
bz-slidepane div.handle.right {
bz-slidepane[side="right"] div.handle {
position: absolute;
right: 0;
left: -12px;
top: 50%;
width: 11px;
height: 40px;
background: repeating-linear-gradient( to right, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
transform: translateY(-50%);
cursor: ew-resize;
}
app/thirdparty/buildoz/buildoz.js
Vendored
+33 -4
View File
@@ -260,15 +260,32 @@ class BZslidePane extends Buildoz {
}
this.dragMove = this.dragMove.bind(this)
this.dragEnd = this.dragEnd.bind(this)
this._observer = new MutationObserver(muts => { // Fill with innerHTML or other DOM manip should not allow coating to be removed
console.log('mutation...')
this.coat()
})
}
connectedCallback(){
super.connectedCallback()
this.coat()
this._observer.observe(this, { childList: true }) // Do this last
}
disconnectedCallback() {
super.disconnectedCallback()
this._observer.disconnect()
}
coat(){ console.log('coat')
if(this.handle && this.querySelector(this.dispatchEvent.handle)) return
this._observer.disconnect()
if(this.querySelector(this.dispatchEvent.handle)) this.querySelector(this.dispatchEvent.handle).remove()
this.handle = document.createElement('div')
this.handle.classList.add('handle')
this.handle.classList.add(this.getBZAttribute('side'))
this.prepend(this.handle)
this.handle.addEventListener('pointerdown', this.dragStart.bind(this))
this._observer.observe(this, { childList: true })
}
dragStart(evt){
@@ -280,17 +297,29 @@ class BZslidePane extends Buildoz {
}
dragMove(evt){
const dx = evt.clientX - this.dragStartX
const dy = evt.clientY - this.dragStartY
const box = this.getBoundingClientRect()
const parentBox = this.parentElement.getBoundingClientRect()
let width, height
switch(this.getAttribute('side')){
case 'top':
height = (evt.clientY > box.top) ? (evt.clientY - box.top) : 0
if(height>(parentBox.height/2)) height = Math.floor(parentBox.height/2)
this.style.height = height+'px'
break
case 'bottom':
height = (evt.clientY < box.bottom) ? (box.bottom - evt.clientY) : 0
if(height>(parentBox.height/2)) height = Math.floor(parentBox.height/2)
this.style.height = height+'px'
break
case 'left':
width = (evt.clientX > box.left) ? (evt.clientX - box.left) : 0
if(width>(parentBox.width/2)) width = Math.floor(parentBox.width/2)
this.style.width = width+'px'
break
case'right':
width = (evt.clientX < box.right) ? (box.right - evt.clientX) : 0
if(width>(parentBox.width/2)) width = Math.floor(parentBox.width/2)
this.style.width = width+'px'
break
}
}
app/views/editors/KeyframeView.html
+16 -4
View File
@@ -79,6 +79,21 @@
.kf-editor bz-select[data-output="keyframesSelector"]{
margin-top:1em;
}
.kf-editor .kfArena bz-slidepane{
font-size:14px;
}
.kf-editor .kfArena bz-slidepane textarea{
border-radius: 0;
background: #000A;
margin: 0;
padding: 0 1em 0 1em;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-top: 1px solid white;
color: #0F0;
}
</style>
<div class="kf-editor cols-3">
<article eiccard class="left-pane">
@@ -96,10 +111,7 @@
<article eiccard class="kfArena">
<section>
<canvas data-output="kfArenaCanvas"></canvas>
<bz-slidepane side="top"></bz-slidepane>
<bz-slidepane side="bottom"></bz-slidepane>
<bz-slidepane side="left"></bz-slidepane>
<bz-slidepane side="right"></bz-slidepane>
<bz-slidepane side="bottom" data-output="console"></bz-slidepane>
</section>
</article>
<article eiccard class="agent-properties">
app/views/editors/KeyframeView.js
+6
View File
@@ -63,6 +63,12 @@ class KeyframeView extends WindozDomContent {
this.outputs.btnSaveKF.disabled = true
this.outputs.kfName.addEventListener('keyup', this.updateKfButtons.bind(this))
this.currentlySelectedAid = null
this.output('console',`
<div class="results">
JS 3D Console. for help, type "help"
</div>
<textarea type="text" style=""></textarea>
`)
}
async onChangeAgent(event){
index.html
+1 -1
View File
@@ -20,7 +20,7 @@
<body>
<canvas class="intro3d"></canvas>
<div class="progress"></div>
<div class="icon-spinner loading"></div>
<button id="startbtn">START</button>
<div id="login-dialog">
<div class="cols2">