Csound Csound-dev Csound-tekno Search About

[Csnd] Csound WASM - problems to show csound channel values in html

Date2023-12-21 09:21
Fromjoachim heintz
Subject[Csnd] Csound WASM - problems to show csound channel values in html
hi all -

i am working on some examples for javascript csound GUI (in particular 
in Csound for Android).

i have some issues to show a csound control channel continuously in the 
html GUI.

this is my csound instrument:
   kTest = randomh:k(0,100,1,3)
   chnset(kTest,"bla")

i tried this as html body:






when i click on the button, i get this output:
	[object Promise]

i tried this code instead which is adapted from steven's and hlodver's 
tutorial 
(https://kunstmusik.github.io/icsc2022-csound-web/tutorial2-interacting-with-csound#reading-channel-values):





unfortunately, i do not get an output here at all.

thanks for any hints or examples -
	joachim

Csound mailing list
Csound@listserv.heanet.ie
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here
Date2023-12-22 07:57
FromST Music
SubjectRe: [Csnd] Csound WASM - problems to show csound channel values in html
Attachmentshtml_test.csd  
Hi Joaquim. HTML/js are not my strong suit so excuse the crude formatting & display.

This works fine for me in Csound for Android ver 39, so I'm not sure why you might be experiencing issues:

<!DOCTYPE html>
<html>
<body>
<CsoundSynthesizer>
<CsOptions>
 -odac
</CsOptions>
<CsInstruments>

sr = 48000
ksmps = 32
nchnls = 1
0dbfs  = 1

instr 1
    kTest = randomh:k(0,100,1,3)
    chnset(kTest,"bla")
endin 

</CsInstruments>
<CsScore>
i1 0 z
</CsScore>
</CsoundSynthesizer>
<script>
function displayChn() {
   document.getElementById("display").innerHTML =
csound.getControlChannel("bla");
}
</script>
<button onclick='displayChn()'>Get Value!</button>
<p id="display"></p>
</body>
</html>

See attached as well.

Best,
Scott

On Thu, Dec 21, 2023, 4:21 a.m. joachim heintz <jh@joachimheintz.de> wrote:
hi all -

i am working on some examples for javascript csound GUI (in particular
in Csound for Android).

i have some issues to show a csound control channel continuously in the
html GUI.

this is my csound instrument:
   kTest = randomh:k(0,100,1,3)
   chnset(kTest,"bla")

i tried this as html body:

<script>
function displayChn() {
   document.getElementById("display").innerHTML =
csound.getControlChannel("bla");
}
</script>
<button onclick='displayChn()'>Get Value!</button>
<p id="display"></p>

when i click on the button, i get this output:
        [object Promise]

i tried this code instead which is adapted from steven's and hlodver's
tutorial
(https://kunstmusik.github.io/icsc2022-csound-web/tutorial2-interacting-with-csound#reading-channel-values):

<script>
   const blaReader = () => {
     csound.getControlChannel('bla').then(v => {
       document.getElementById("display").innerHTML = v;
     })
     setTimeout(blaReader, 1000 / 10)
   }
   blaReader();
</script>
<p id="display"></p>

unfortunately, i do not get an output here at all.

thanks for any hints or examples -
        joachim

Csound mailing list
Csound@listserv.heanet.ie
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here
Csound mailing list Csound@listserv.heanet.ie https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND Send bugs reports to https://github.com/csound/csound/issues Discussions of bugs and features can be posted here
Date2023-12-22 08:16
Fromjoachim heintz
SubjectRe: [Csnd] Csound WASM - problems to show csound channel values in html
hi scott -

thanks for you feedback!  i am looking for a CONTINUOUS output of a 
csound control channel in an html element.  but in your code, i need to 
click on the button, right?

last night i found a solution in javascript's setInterval method:
https://www.w3schools.com/jsref/met_win_setinterval.asp

i have to figure out how to use this properly but i guess this is what 
can be used to show control signals say ten times a second in the user 
interface.

cheers -
	joachim


On 22/12/2023 08:57, ST Music wrote:
> Hi Joaquim. HTML/js are not my strong suit so excuse the crude 
> formatting & display.
> 
> This works fine for me in Csound for Android ver 39, so I'm not sure why 
> you might be experiencing issues:
> 
> 
> 
> 
> 
> 
>   -odac
> 
> 
> 
> sr = 48000
> ksmps = 32
> nchnls = 1
> 0dbfs  = 1
> 
> instr 1
>      kTest = randomh:k(0,100,1,3)
>      chnset(kTest,"bla")
> endin
> 
> 
> 
> i1 0 z
> 
> 
> 
> 
> 

> 
> 
> 
> See attached as well.
> 
> Best,
> Scott
> 
> On Thu, Dec 21, 2023, 4:21 a.m. joachim heintz  > wrote:
> 
>     hi all -
> 
>     i am working on some examples for javascript csound GUI (in particular
>     in Csound for Android).
> 
>     i have some issues to show a csound control channel continuously in the
>     html GUI.
> 
>     this is my csound instrument:
>         kTest = randomh:k(0,100,1,3)
>         chnset(kTest,"bla")
> 
>     i tried this as html body:
> 
>     
>     
>     

> 
>     when i click on the button, i get this output:
>              [object Promise]
> 
>     i tried this code instead which is adapted from steven's and hlodver's
>     tutorial
>     (https://kunstmusik.github.io/icsc2022-csound-web/tutorial2-interacting-with-csound#reading-channel-values ):
> 
>     
>     

> 
>     unfortunately, i do not get an output here at all.
> 
>     thanks for any hints or examples -
>              joachim
> 
>     Csound mailing list
>     Csound@listserv.heanet.ie 
>     https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
>     
>     Send bugs reports to
>     https://github.com/csound/csound/issues
>     
>     Discussions of bugs and features can be posted here
> 
> Csound mailing list Csound@listserv.heanet.ie 
>  
> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND 
>  Send bugs reports to 
> https://github.com/csound/csound/issues 
>  Discussions of bugs and 
> features can be posted here

Csound mailing list
Csound@listserv.heanet.ie
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here
Date2023-12-22 09:30
FromST Music
SubjectRe: [Csnd] Csound WASM - problems to show csound channel values in html
Ok, now I get it, sorry for the confusion. Yes, setInterval works fine and is quite straightforward.

setInterval(displayChn, 100)

function displayChn() {
   document.getElementById("display").innerHTML =
csound.getControlChannel("bla");
}
</script>
<p id="display"></p>

Handy! Thanks for the tip, nice alternative to the console print method.

Best,
Scott



On Fri, Dec 22, 2023, 3:16 a.m. joachim heintz <jh@joachimheintz.de> wrote:
hi scott -

thanks for you feedback!  i am looking for a CONTINUOUS output of a
csound control channel in an html element.  but in your code, i need to
click on the button, right?

last night i found a solution in javascript's setInterval method:
https://www.w3schools.com/jsref/met_win_setinterval.asp

i have to figure out how to use this properly but i guess this is what
can be used to show control signals say ten times a second in the user
interface.

cheers -
        joachim


On 22/12/2023 08:57, ST Music wrote:
> Hi Joaquim. HTML/js are not my strong suit so excuse the crude
> formatting & display.
>
> This works fine for me in Csound for Android ver 39, so I'm not sure why
> you might be experiencing issues:
>
> <!DOCTYPE html>
> <html>
> <body>
> <CsoundSynthesizer>
> <CsOptions>
>   -odac
> </CsOptions>
> <CsInstruments>
>
> sr = 48000
> ksmps = 32
> nchnls = 1
> 0dbfs  = 1
>
> instr 1
>      kTest = randomh:k(0,100,1,3)
>      chnset(kTest,"bla")
> endin
>
> </CsInstruments>
> <CsScore>
> i1 0 z
> </CsScore>
> </CsoundSynthesizer>
> <script>
> function displayChn() {
>     document.getElementById("display").innerHTML =
> csound.getControlChannel("bla");
> }
> </script>
> <button onclick='displayChn()'>Get Value!</button>
> <p id="display"></p>
> </body>
> </html>
>
> See attached as well.
>
> Best,
> Scott
>
> On Thu, Dec 21, 2023, 4:21 a.m. joachim heintz <jh@joachimheintz.de
> <mailto:jh@joachimheintz.de>> wrote:
>
>     hi all -
>
>     i am working on some examples for javascript csound GUI (in particular
>     in Csound for Android).
>
>     i have some issues to show a csound control channel continuously in the
>     html GUI.
>
>     this is my csound instrument:
>         kTest = randomh:k(0,100,1,3)
>         chnset(kTest,"bla")
>
>     i tried this as html body:
>
>     <script>
>     function displayChn() {
>         document.getElementById("display").innerHTML =
>     csound.getControlChannel("bla");
>     }
>     </script>
>     <button onclick='displayChn()'>Get Value!</button>
>     <p id="display"></p>
>
>     when i click on the button, i get this output:
>              [object Promise]
>
>     i tried this code instead which is adapted from steven's and hlodver's
>     tutorial
>     (https://kunstmusik.github.io/icsc2022-csound-web/tutorial2-interacting-with-csound#reading-channel-values <https://kunstmusik.github.io/icsc2022-csound-web/tutorial2-interacting-with-csound#reading-channel-values>):
>
>     <script>
>         const blaReader = () => {
>           csound.getControlChannel('bla').then(v => {
>             document.getElementById("display").innerHTML = v;
>           })
>           setTimeout(blaReader, 1000 / 10)
>         }
>         blaReader();
>     </script>
>     <p id="display"></p>
>
>     unfortunately, i do not get an output here at all.
>
>     thanks for any hints or examples -
>              joachim
>
>     Csound mailing list
>     Csound@listserv.heanet.ie <mailto:Csound@listserv.heanet.ie>
>     https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
>     <https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND>
>     Send bugs reports to
>     https://github.com/csound/csound/issues
>     <https://github.com/csound/csound/issues>
>     Discussions of bugs and features can be posted here
>
> Csound mailing list Csound@listserv.heanet.ie
> <mailto:Csound@listserv.heanet.ie>
> https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
> <https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND> Send bugs reports to
> https://github.com/csound/csound/issues
> <https://github.com/csound/csound/issues> Discussions of bugs and
> features can be posted here

Csound mailing list
Csound@listserv.heanet.ie
https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND
Send bugs reports to
        https://github.com/csound/csound/issues
Discussions of bugs and features can be posted here
Csound mailing list Csound@listserv.heanet.ie https://listserv.heanet.ie/cgi-bin/wa?A0=CSOUND Send bugs reports to https://github.com/csound/csound/issues Discussions of bugs and features can be posted here