parent
4f808506c7
commit
e162d1138f
8 changed files with 243 additions and 58 deletions
@ -0,0 +1,103 @@ |
||||
import gsap from "gsap" |
||||
import { forwardRef, useEffect, useImperativeHandle, useRef } from "react" |
||||
import { invoke } from '@tauri-apps/api/core'; |
||||
|
||||
const FADE_TIME=5; |
||||
|
||||
export const Light=forwardRef((props, ref)=>{ |
||||
|
||||
const refVal=useRef({val: 0}); |
||||
const refInput=useRef(); |
||||
const refContainer=useRef(); |
||||
const refGsap=useRef(); |
||||
|
||||
function fade(from, to){ |
||||
|
||||
const time= parseFloat(refInput.current.value) || FADE_TIME; |
||||
|
||||
gsap.killTweensOf(refVal.current); // Kill all tweens of refVal |
||||
|
||||
gsap.current=gsap.fromTo(refVal.current,{val: from}, { |
||||
val: to, |
||||
duration: time, |
||||
onUpdate: () => { |
||||
// console.log(refVal.current.val); |
||||
// sendOsc(OSC_ADDRESS.LIGHT, refVal.current.val.toString()); |
||||
|
||||
// invoke('send_dmx_message', { |
||||
// message: Math.floor(refVal.current.val * 255).toString(), |
||||
// }).then(() => { |
||||
// console.log(`dmx message sent: ${Math.floor(refVal.current.val * 255)}`); |
||||
// }).catch((error) => { |
||||
// console.error('Error sending DMX message:', error); |
||||
// }); |
||||
|
||||
invoke('send_osc_message', { |
||||
key: '/light', |
||||
message: refVal.current.val.toString(), |
||||
host:`0.0.0.0:0`, |
||||
target: '127.0.0.1:8888', |
||||
}); |
||||
|
||||
if(refContainer.current) |
||||
refContainer.current.style.background= `rgba(0, 255, 0, ${refVal.current.val})`; // Update background color based on value |
||||
}, |
||||
}); |
||||
} |
||||
useImperativeHandle(ref, () => ({ |
||||
fadeIn: ()=>{ |
||||
console.log('fadeIn'); |
||||
fade(0, 1); |
||||
}, |
||||
fadeOut: ()=>{ |
||||
console.log('fadeOut'); |
||||
fade(1, 0); |
||||
}, |
||||
reset:()=>{ |
||||
console.log('reset'); |
||||
refVal.current.val=0; |
||||
refContainer.current.style.background= `rgba(0, 255, 0, 0)`; // Reset background color |
||||
refInput.current.value=FADE_TIME; // Reset input value |
||||
|
||||
gsap.killTweensOf(refVal.current); // Kill all tweens of refVal |
||||
|
||||
invoke('send_osc_message', { |
||||
key: '/light', |
||||
message: '0', |
||||
host:`0.0.0.0:0`, |
||||
target: '127.0.0.1:8888', |
||||
}); |
||||
}, |
||||
set: (value)=>{ |
||||
console.log('set', value); |
||||
refVal.current.val=value; |
||||
refContainer.current.style.background= `rgba(0, 255, 0, ${value})`; // Update background color based on value |
||||
invoke('send_osc_message', { |
||||
key: '/light', |
||||
message: value.toString(), |
||||
host:`0.0.0.0:0`, |
||||
target: '127.0.0.1:8888', |
||||
}); |
||||
}, |
||||
})); |
||||
useEffect(()=>{ |
||||
|
||||
refInput.current.value=FADE_TIME; |
||||
|
||||
},[]); |
||||
|
||||
return ( |
||||
<div ref={refContainer} className="grid grid-cols-2 justify-between p-1 border *:overflow-hidden"> |
||||
{/* <span className="flex flex-col justify-between"> */} |
||||
<label className="text-center">Light</label> |
||||
<input ref={refInput} type="text" className="border w-[5vw]" defaultValue={5}/> |
||||
{/* </span> |
||||
<span className="flex flex-col justify-between"> */} |
||||
<button onClick={()=>fade(0,1)}>fadeIn</button> |
||||
<button onClick={()=>fade(1,0)}>fadeOut</button> |
||||
<button onClick={()=>ref.current.set(1)}>on</button> |
||||
<button onClick={()=>ref.current.set(0)}>off</button> |
||||
{/* </span> */} |
||||
</div> |
||||
) |
||||
}); |
||||
Loading…
Reference in new issue