Topic: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Hi,

After a few days of coding I have put in place a rudimentary first version.  For now, it allows you to:

  • Select any instruments,

  • Control MIDI

  • Switch A/B

Later on, I'll be adding a few more controls that I mainly use to adjust the sound.

With this little app, I no longer need VNC on my iPad.  I simply point to the web SPA and control Pianoteq from there! 

I have put the code on bitbucket, if any of you would like to try it out. 

    https://bitbucket.org/robert-rc2i/ptq-c...rc/master/

Enjoy.


Note to Modartt
-----
Here are a few suggestions for the API.  First let me thank you for this API, as it makes my setup easier!

  • When an API changes the state of Pianoteq than that API should return that new state.  For instance,
      abSwitch() should return the state that it is now. i.e. either A or B

  • When providing a wrong command name, the Pianoteq instance crashes instead of returning an error

  • Metronome API - I could not find anything about the metronome

  • getInfo() API - When the loaded preset is a custom one, the name of the preset includes the bank info in it.  Pls, consider adding the attribute bank like it is for the getListOfPresets() API

  1. Ex: "name": "My Presets/NY Steinway Model D (RC)" - The "My Presets" Is the bank attribute mixed with the name attribute.  This makes it not consistent across your API and introduce confusion.

Sordess

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Good job! I can report that it works.

I had to do "npm install react-scripts" first.

I had to relaunch it once, perhaps because the JSON-RPC interface was not ready the first time. Maybe a self-refresh would be nice.

Thanks!

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

navindra wrote:

Good job! I can report that it works.

I had to do "npm install react-scripts" first.

I had to relaunch it once, perhaps because the JSON-RPC interface was not ready the first time. Maybe a self-refresh would be nice.

Thanks!

Hi Navindra,

Thanks for the feedback!

1- Yes, I am updating the READ.ME to include the node installation instruction
2- And yes, a refresh button is in the work as with some other controls.  In the meantime, you can swipe down the page to force a refresh on iOS.

Cheers.

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Hi,

I have updated the project with the addition of a few controls

  • Volume & Dynamics

  • Effects - Mainly toggling on/off Delay, EQ1 & 2 and Reverb

  • I also updated the readme for a better explanation on how to install and run it.

  • New menu

  • Reload preset button

Next I'll be adding some voicing controls.

Cheers

Last edited by sordess (12-01-2022 00:43)
Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Here is the first official release.

it now supports the following features

1- midi controls
2- Volume and dynamics controls
3- Voicing controls
4- Effects controls
5- Instrument loading menu
6- Saving a modified preset
7- Reloading an instrument (Useful, when you make changes to Pianoteq directly)
8- A/B Switching
9- And bug fixes.

Here are some screenshots of the app
https://i.imgur.com/sWXriNI.jpg?1
https://i.imgur.com/veORPFI.jpg?1

Cheers

Last edited by sordess (15-01-2022 20:50)
Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

This is awesome, I can't wait to try this!

We should get a request to Julien so that CORS headers are returned (if configured), and that way, no proxying is needed.

For me, an external client app should be able to connect to JSON-RPC API directly without any need of proxying or using any server resources at all.

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

navindra wrote:

This is awesome, I can't wait to try this!

We should get a request to Julien so that CORS headers are returned (if configured), and that way, no proxying is needed.

For me, an external client app should be able to connect to JSON-RPC API directly without any need of proxying or using any server resources at all.

Hi Navindar,

Let me know how it went on your end.  So far, on my set, it runs smoothly.  I sometimes get a proxy error for some reason, I need to find why.  So yeah, it would be nice if Pianoteq would return the proper CORS headers to allow any sites to communicated to it.

Cheers.

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

sordess wrote:

Let me know how it went on your end.  So far, on my set, it runs smoothly.  I sometimes get a proxy error for some reason, I need to find why.  So yeah, it would be nice if Pianoteq would return the proper CORS headers to allow any sites to communicated to it.

I tried it on my Mac and it works great! In fact, I think it is doing everything I would need such an interface to do.

I'm going to wait until the MIDI sequencer works in headless mode before I use your interface on my Raspberry Pi 400. My other hope is that we can eliminate the need for the proxy.

In time, there should be some kind of showcase corner like the FXP Corner for these new interfaces. You might want to post about your new interface on Piano World (and maybe PianoClack) as well.

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Glad to hear that it works fine on your setup.

As for the CORS, I just verified and Pianoteq does provide the proper header response to allow any site to connect to it.  So, if you run the app from a desktop environment like your MAC, it will work without the proxy.  I just realized that iOS is imposing secured connection when making fetch calls to other site, but not on the same site (And yes, same site has to include same port)

So, the connection is not refused by Pianoteq but by Safari on iOS.  In theory, the the app would work on Android, without any proxy as there is no limitation for that type of connections on that platform.  But I do not have an Android device to test it.

Cheers

----

Edited:  Well, I might have found the culprit.  I am now able to communicate with Pianoteq directly without the need of a proxy other than a web server to serve the page.  I need to test it further but I think the proxy will no longer be required.   More to come....

Last edited by sordess (17-01-2022 20:15)
Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

sordess wrote:

Edited:  Well, I might have found the culprit.  I am now able to communicate with Pianoteq directly without the need of a proxy other than a web server to serve the page.  I need to test it further but I think the proxy will no longer be required.   More to come....

Woohoo! Can't wait to learn more!

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Alright, here is the latest version with CORS fixed.  When launching Pianoteq from the command line, make sure to put the IP address of the device that it is on, otherwise, CORS will forbid the access.  So launch Pianoteq with the parameter like so:

--serve 192.168.2.87:8081

Now this SPA can be deployed anywhere as long as it is being served through HTTP and NOT HTTPS.

At first the app tries to initialized itself by calling Pianoteq on the same server that it is deployed to.  If that fails, you get an error message.  In that case, click on the menu button and set the url (like: http://192.168.1.10:8081/jsonrpc) to Pianoteq.

https://i.imgur.com/SqMfT3E.jpg?1

Oh and by the way, the URL is saved in the local storage of the browser.  So if you change device or browser agent, you'll need to provide the URL again.

Cheers

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Hi,

Just to let everyone know that I moved the repo from bitbucket to GitHub.  The old repo has been updated with a link to the new repo, but it might get deleted at some point.

So the new link is: https://github.com/robert-rc2i/ptq-client-webapp

Sorry, but I cannot change my original post for some reason. 

Cheers

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Interesting, the new version 7.5.3 of Pianoteq now includes an API for

  • Metronome

  • State of the midi sequencer

  • And a few other enhancements

Thanks Modartt.  That's great!

I'll be implementing the metronome shortly! 

I do not know if this fixes the headless issue.  Can someone confirm?

Cheers,

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

@Modartt,

There seems to be a parameter mismatch on the setMetronome API.  When posting the following command, the BPM gets updated by the volumde_db param

{
    "method": "setMetronome",
    "params": {
        "accentuate": true,
        "bpm": 104.0,
        "enabled": true,
        "timesig": "4/4",
        "volume_db": 72.0
    },
    "jsonrpc": "2.0",
    "id": 1642889493614
}

With the above post, I get a response that my command was successful, but when I looked at the UI interface, I see that the BPM is now 72 and not 104.

Cheers

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

sordess wrote:

@Modartt,

There seems to be a parameter mismatch on the setMetronome API.

oops you're right -- the volume setting is broken, we will fix that.

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Hello,

Here is the latest version deployed to AWS here:

    *** Removed for now ***

So it means you can use it without installing it locally.

As always, the first time you access the web page, you'll get an error message.  Simply click on the menu button and fill in the full URL of your Pianoteq instance like

    http://ip.address.here:8081/jsonrpc

This new version supports
    * The new metronome API (Only partially for now)
    * Midi sequencer state - Now know when a recording/play is enabled

Enjoy!

---

Edited: Had to shutdown the site as some bots were trying to poke security holes at the site. 

Last edited by sordess (26-01-2022 23:57)
Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Hi Folks,

Here is a latest revision of this project.  The app is now back online at the same url:

http://ptq-web-client.s3-website-us-eas...onaws.com/

Once in the app, remember to set the URL of Pianoteq for the app to work.  Also, you can install the app on your device (iOS or Android) using the "Add to Home Screen" from Safari, Chrome or Firefox.  This will make the web app behave like a native app.

Here is the current feature of the app (1.1.4)

  • Piano controls

    • Volume and dynamics controls

    • Sound modes (Recording, binaural, stereo & mono)

    • Piano condition

    • Piano lid

  • Voicing controls

    • Hammer settings

    • Pedal settings

  • Effects controls

    • EQ 1 & 2

    • Delay and reverb

  • Design controls

    • Soundboard settings

    • String settings

    • Blooming settings

  • Instruments

    • Loading an instrument

    • Previous and next preset

    • Reload a preset (Useful, when you make changes to Pianoteq directly)

    • Saving a modified preset

    • A/B Switching

  • Metronome (Limited for now)

  • Media player (Midi)

Screenshots are available on the README file in the Github project repo here:

https://github.com/robert-rc2i/ptq-client-webapp

Cheers

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Hi @sordess,

I-m having a really weird issue with this. Both with the web version (safari) or running a local build whenever I configure the ip correctly the web app loads completely blank.

I'm loading pianoteq with the proper arguments from terminal, and atm I'm quite unsure what I'm doing wrong.

My goal is to fork the project and build a custom ui that's both a bit more elegant and customized.

I'm a Product Designer with a fair bit of css / html knowledge. Though not so great with js/react, which is the core of this.

I'm doing this to have a customized full screen ui for the piano i built for my daughter around a pi and a vpc1. I plan for it to be fully responsive to acommodate a fair amount of screen sizes.

I haven't really started with the design phase, As I'd like to hack away a bit at how the app is built and how far I'm able to change some of the stuff .

Anyway I'f you or anyone more versed in react and js than me is interested I'm more than willing to collaborate. It should also be interesting to make this an open design project for people ot pitch in ideas an needs on a a custom touchscreen ui would be useful.

BTW: Here´s a very quick first draft with some ideas jooted down. I want to be able to support both vertical and horizontal layouts, with either typical proportions as well as really wide sreens, like a waveshare 1480x320 as well as epaper, so high contrast and avoiding scrolling for conting is an important feature.

Not too many changes atm from current layout.

PunBB bbcode test

Last edited by alfatreze (13-10-2023 13:17)

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Hi @alfatreze,

Sure thing.  I wouldn't mind a UI upgrade especially if we can add tablet support!

I can help integrate it with the current project.  We can discuss it over at GitHub on the project page if you'd like.

Do you know BootStrap by any chance?

Regards,

alfatreze wrote:

Hi @sordess,

I-m having a really weird issue with this. Both with the web version (safari) or running a local build whenever I configure the ip correctly the web app loads completely blank.

I'm loading pianoteq with the proper arguments from terminal, and atm I'm quite unsure what I'm doing wrong.

My goal is to fork the project and build a custom ui that's both a bit more elegant and customized.

I'm a Product Designer with a fair bit of css / html knowledge. Though not so great with js/react, which is the core of this.

I'm doing this to have a customized full screen ui for the piano i built for my daughter around a pi and a vpc1. I plan for it to be fully responsive to acommodate a fair amount of screen sizes.

I haven't really started with the design phase, As I'd like to hack away a bit at how the app is built and how far I'm able to change some of the stuff .

Anyway I'f you or anyone more versed in react and js than me is interested I'm more than willing to collaborate. It should also be interesting to make this an open design project for people ot pitch in ideas an needs on a a custom touchscreen ui would be useful.

BTW: Here´s a very quick first draft with some ideas jooted down. I want to be able to support both vertical and horizontal layouts, with either typical proportions as well as really wide sreens, like a waveshare 1480x320 as well as epaper, so high contrast and avoiding scrolling for conting is an important feature.

Not too many changes atm from current layout.

PunBB bbcode test

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

sordess wrote:

Hi @alfatreze,

Sure thing.  I wouldn't mind a UI upgrade especially if we can add tablet support!

I can help integrate it with the current project.  We can discuss it over at GitHub on the project page if you'd like.

Do you know BootStrap by any chance?

Regards,

alfatreze wrote:

Hi @sordess,

I-m having a really weird issue with this. Both with the web version (safari) or running a local build whenever I configure the ip correctly the web app loads completely blank.

I'm loading pianoteq with the proper arguments from terminal, and atm I'm quite unsure what I'm doing wrong.

My goal is to fork the project and build a custom ui that's both a bit more elegant and customized.

I'm a Product Designer with a fair bit of css / html knowledge. Though not so great with js/react, which is the core of this.

I'm doing this to have a customized full screen ui for the piano i built for my daughter around a pi and a vpc1. I plan for it to be fully responsive to acommodate a fair amount of screen sizes.

I haven't really started with the design phase, As I'd like to hack away a bit at how the app is built and how far I'm able to change some of the stuff .

Anyway I'f you or anyone more versed in react and js than me is interested I'm more than willing to collaborate. It should also be interesting to make this an open design project for people ot pitch in ideas an needs on a a custom touchscreen ui would be useful.

BTW: Here´s a very quick first draft with some ideas jooted down. I want to be able to support both vertical and horizontal layouts, with either typical proportions as well as really wide sreens, like a waveshare 1480x320 as well as epaper, so high contrast and avoiding scrolling for conting is an important feature.

Not too many changes atm from current layout.

PunBB bbcode test

Sure, I'd love to.

Yeah, even tough I know my way pretty well around bootstrap, I haven't used it for quite a while. Not a biggie to pick it up again.

I'd like to do the design part as an open design project and pick up quite a bit of feedback, needs and wants from the community to inform direction and ideas, though, even if these may come up quite later on never at all

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Sounds good!   Looking forward to it!

Cheers

alfatreze wrote:

Sure, I'd love to.

Yeah, even tough I know my way pretty well around bootstrap, I haven't used it for quite a while. Not a biggie to pick it up again.

I'd like to do the design part as an open design project and pick up quite a bit of feedback, needs and wants from the community to inform direction and ideas, though, even if these may come up quite later on never at all

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Hi Sordess,

Really nice work here - congrats!

Since you obviously know your way round the RPC API by now can I ask you to confirm that there is no way of changing the selected audio and midi devices via RPC? I can't find any. Am I missing something?

There's the 'getAudioDeviceInfo' call which shows you the currently selected audio device, although, strangely, no equivalent for MIDI devices, as far as I can see.

The trouble is that if you're running PT headless on a machine without a desktop it's rather difficult to set the devices up in the first place, and then to change them if that becomes necessary. PT has a command line argument to start without any audio/midi preferences, but not to set them. So, as far as I can see, you're reduced to having to edit the Pianoteq81.prefs file manually, using 'aplay' and 'amidi' on the system to get the correct device strings (although there's also the RPC 'getListOfAudioDevices' which I suppose you could use instead of aplay).

Have you found any other workarounds?

Thanks, Ian.

N1X - PT Pro - Linux

Re: New Web/SPA front-end for Pianoteq (Using JsonRPC)

Hi IanL,

Thanks for the kind words about the app.   As for setting the audio device it is not possible, as far as I know, form the JsonRPC API.  As you pointed out, you can see the current one and the list of audio devices available, but that's it. 

What we can set with the API is what ever is returned by the getParameters API.  Unfortunately, the audio & midi device are not returned by the getParameters API.

Cheers,

IanL wrote:

Hi Sordess,

Really nice work here - congrats!

Since you obviously know your way round the RPC API by now can I ask you to confirm that there is no way of changing the selected audio and midi devices via RPC? I can't find any. Am I missing something?

There's the 'getAudioDeviceInfo' call which shows you the currently selected audio device, although, strangely, no equivalent for MIDI devices, as far as I can see.

The trouble is that if you're running PT headless on a machine without a desktop it's rather difficult to set the devices up in the first place, and then to change them if that becomes necessary. PT has a command line argument to start without any audio/midi preferences, but not to set them. So, as far as I can see, you're reduced to having to edit the Pianoteq81.prefs file manually, using 'aplay' and 'amidi' on the system to get the correct device strings (although there's also the RPC 'getListOfAudioDevices' which I suppose you could use instead of aplay).

Have you found any other workarounds?

Thanks, Ian.

Sordess
Author of PTQ Client Webapp: (https://github.com/robert-rc2i/ptq-client-webapp)
Kawai CA79