import { canvas } from "@thi.ng/hdom-canvas" ; import { start } from "@thi.ng/hdom/start" ; import { DEFAULT_THEME , Key } from "@thi.ng/imgui/api" ; import { buttonH } from "@thi.ng/imgui/components/button" ; import { sliderH } from "@thi.ng/imgui/components/sliderh" ; import { IMGUI } from "@thi.ng/imgui/gui" ; import { gridLayout } from "@thi.ng/layout/grid-layout" ; import { gestureStream } from "@thi.ng/rstream-gestures" ; import { fromDOMEvent } from "@thi.ng/rstream/event" ; import { reactive } from "@thi.ng/rstream/stream" ; import { tweenNumber } from "@thi.ng/rstream/tween" ; const gui = new IMGUI ( { theme : { ... DEFAULT_THEME , font : "16px 'IBM Plex Mono', monospace" , baseLine : 6 , focus : "#000" , } , } ) ; const _canvas = { ... canvas , init : ( el ) => { gestureStream ( el , { } ) . subscribe ( { next : ( e ) => gui . setMouse ( e . pos , e . buttons ) , } ) ; fromDOMEvent ( window , "keydown" ) . subscribe ( { next ( e ) { if ( e . target !== document . body ) return ; if ( e . key === Key . TAB || e . key === Key . SPACE || e . key === Key . UP || e . key === Key . DOWN ) { e . preventDefault ( ) ; } gui . setKey ( e ) ; } , } ) ; fromDOMEvent ( window , "keyup" ) . subscribe ( { next ( e ) { gui . setKey ( e ) ; } , } ) ; } , } ; const PRESETS = < const > [ [ "Mute" , 0 , 0 ] , [ "Quiet" , 1 , 25 ] , [ "Medium" , 33 , 50 ] , [ "Party" , 66 , 75 ] , ] ; const volume = reactive ( 55 ) ; const smoothedVolume = tweenNumber ( volume , 0 , 0.2 ) ; const volumeLabel = smoothedVolume . map ( ( x ) => { for ( let i = PRESETS . length ; i -- > 0 ; ) { if ( x >= PRESETS [ i ] [ 1 ] ) return `${ Math . round ( x ) } (${ PRESETS [ i ] [ 0 ] })` ; } return "" ; } ) ; start ( ( ) => { let res ; const grid = gridLayout ( 16 , ( window . innerHeight - 68 ) / 2 , window . innerWidth - 32 , 1 , 32 , 4 ) ; gui . begin ( ) ; res = sliderH ( gui , grid , "vol" , 0 , 100 , 1 , smoothedVolume . deref ( ) ! , `Volume: ${ volumeLabel . deref ( ) ! }` , ( ) => "" ) ; res !== undefined && volume . next ( res ) ; let inner = grid . nest ( PRESETS . length ) ; for ( let preset of PRESETS ) { res = buttonH ( gui , inner , `bt${ preset [ 0 ] }` , preset [ 0 ] ) ; res && volume . next ( preset [ 2 ] ) ; } gui . end ( ) ; return [ _canvas , { __diff : false , width : window . innerWidth , height : window . innerHeight , style : { background : gui . theme . globalBg , cursor : gui . cursor } , ... gui . attribs , } , gui , ] ; } ) ;