This answer should help you out with the interfacing issue
For the 2nd part of your question about resources for a web app, from what i can see of your diagram it will need a bit of googling and reading up on w3 and stackoverflow for the js and css codes you’re going to need and experimenting with the codes in the tutorials to plug in the values whereever they need to be in the code
Just as a push in a direction take a look at chart.js and google charts for your charts
For the slider,take a look at ionrangeslider to get values to update a pwm pin
The level indicator might be a little tricky to implement in pure css if you’re a beginner. So you could try keeping multiple png files of different levels and change them using ajax calls based on your conditions
Plain js with css selectors will work for the on/off switches
And buttons can be styled with css, if you don’t feel like doing that either you could take a look at a theme. Something materialize.css might improve the look of the web app and keep the styling consistent if it is a multipage web app