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