Kasperv79
Posts: 12
Joined: Mon Jan 01, 2018 1:32 pm

An helping hand to choose the right “language”

Mon Jan 01, 2018 1:51 pm

Dear forum members.

I’m an beginner in both Linux and web development. I have done a lot programming in Arduino and now the time has come to join theese two boards together. (Serial comm. is what I’m thinking) The Arduino is running all the real-time code meanwhile the raspberry pi (zero w) is hosting a website for configuration of parameters and readout some real-time values.

So back to my question.
I found a nice Jquery “simple-slider” library I would like to use. But when searching the web I found a lot different material, php + py scripts, jqeury, nodejs and so on. For hosting is Apache, node server, Nginx and so on.

For this “little” application, could you guys advice me to go for a specific solution to keep it “simple”?

Like “go for the Nginx and stick to jquery.”

Remember the Zero W is an ArmV6 processor.

And happy code year!

k-pi
Posts: 646
Joined: Sun Feb 12, 2017 1:46 pm
Location: Upper Hale, Surrey, UK.

Re: An helping hand to choose the right “language”

Mon Jan 01, 2018 3:17 pm

If you explain what it is that you actually want to do, you may get some suggestions.

Heater
Posts: 10293
Joined: Tue Jul 17, 2012 3:02 pm

Re: An helping hand to choose the right “language”

Mon Jan 01, 2018 4:23 pm

May I summarize your system as:

Arduino => serial => Raspi => web server => web page in browser.

By far the easiest way to do this is by using node.js.

With node.js you can, in Javascript:

1) Create a 10 line program that receives and sends over that serial port link.

2) Create in another tens of lines of code a web server.

3) With a few lines more you can have your web server shunting data from the serial port to the web page.

4) By using websockets you can have a real-time two way link between web page and Arduino though that web server.

This is by far easier than messing with Apache, PHP etc.

You will need:

https://nodejs.org/en/ It's best to install node.js using nvm https://github.com/creationix/nvm. The version of node provided in Raspbian is very old.

The Express node.js module to make that web server easy: https://expressjs.com/

The serialport module for serial communications from node.js https://github.com/node-serialport/node-serialport

Optionally socket.io https://socket.io/get-started/chat/ to do that real-time communication from Arduino to browser.

When it comes to creating the actual web page, jQuery will help. I prefer to use react: https://reactjs.org/

You will find documentation, tutorials, and blogs describing how to use all of the above all over the net.

But if you get stuck do come back and ask.

Kasperv79
Posts: 12
Joined: Mon Jan 01, 2018 1:32 pm

Re: An helping hand to choose the right “language”

Thu Jan 11, 2018 5:50 pm

Heater wrote:
Mon Jan 01, 2018 4:23 pm
May I summarize your system as:

Arduino => serial => Raspi => web server => web page in browser.

By far the easiest way to do this is by using node.js.

With node.js you can, in Javascript:

1) Create a 10 line program that receives and sends over that serial port link.

2) Create in another tens of lines of code a web server.

3) With a few lines more you can have your web server shunting data from the serial port to the web page.

4) By using websockets you can have a real-time two way link between web page and Arduino though that web server.

This is by far easier than messing with Apache, PHP etc.

You will need:

https://nodejs.org/en/ It's best to install node.js using nvm https://github.com/creationix/nvm. The version of node provided in Raspbian is very old.

The Express node.js module to make that web server easy: https://expressjs.com/

The serialport module for serial communications from node.js https://github.com/node-serialport/node-serialport

Optionally socket.io https://socket.io/get-started/chat/ to do that real-time communication from Arduino to browser.

When it comes to creating the actual web page, jQuery will help. I prefer to use react: https://reactjs.org/

You will find documentation, tutorials, and blogs describing how to use all of the above all over the net.

But if you get stuck do come back and ask.
Thanks a lot for the reply! Actually I just posted a new tread, becuase i thought this post ws rejected. So i just double posted. The latest post is actually more detailed. I will submit this answer in there.

again. I will take your advice and start searching.

/Kasper.

Heater
Posts: 10293
Joined: Tue Jul 17, 2012 3:02 pm

Re: An helping hand to choose the right “language”

Fri Jan 12, 2018 1:03 am

Personally I would forget about NW for the time being. You can come back to that later when you have everything working. If you still feel the need.

Basically NW is a means to create desktop applications using Javascript. It does this by creating the GUI using web technologies. That is HTML, CSS and Javascript. To do that it uses the V8 HTML rendering engine that is used in the Chrome browser. Meanwhile the part of the application that deals with files, devices and whatever else is handled by Javascript running under node.js.

At a high level we can see this as wrapping a web browser, with node.js into a monolithic application. The browser part does the graphics, the node.js part does everything else using operating system interfaces that a web page is normally not allowed to use.

Whilst we are here, there is also Electron.js which does much the same thing. I have used Electron and it works very well. Electron is what Microsoft's Visual Studio Code editor/IDE is built on top of. Similarly I would leave that for later if you need it.

My point here is that f you were to follow my plan and get your system working with a node.js server to do the interfacing to your device(s) and a normal web page as client you will then find it is relatively easy to migrate that into MW or Electron if you still want to.

The great advantage of having a seperate server and client parts is that you can view your web page on any browser on the network your Pi is connected to. Your Windows PC or MAc, say. Or indeed you can make it accessible over the internet.

Anyway, I have the feeling that just getting NW or Electron to work on the Pi might be more of a problem than getting on with creating the code of your project !

Kasperv79
Posts: 12
Joined: Mon Jan 01, 2018 1:32 pm

Re: An helping hand to choose the right “language”

Sat Jan 13, 2018 3:15 pm

Thanks guys for helping my started.
I now got the express running and do read a value from Arduino to my index page.
So far so good. :)

My questions is if someone have an example how a good way is to send multiple values to web page.

Heater
Posts: 10293
Joined: Tue Jul 17, 2012 3:02 pm

Re: An helping hand to choose the right “language”

Sat Jan 13, 2018 5:33 pm

Excellent.

There are many ways to get data into a web page.

1) Create the entire page programmatically when it is requested. The returned HTML could contain all the data in whatever HTML elements you like.

This nice for simple pages where the data does not change very often.

The downside is that to see the latest data values one has to refresh the page in the browser and get the server to regenerate it all.

You can do this simply in Javascript in the server. Just building the HTML by concatenating strings and so on.

Using the new js feature of template literals makes this easy: https://developer.mozilla.org/en-US/doc ... e_literals

Here is an example. Not tested. May not even by syntactically correct:

Code: Select all

function makeMyPage (data) {
    let html = `
        <!doctype html>
        <html>
        <head>
            <title>My Page</title>
            ...
            ...
        </head>
        <body>
            <h1>My Data</>
            Temperature = ${data.temperature}
            Pressure = ${data.pressure}
            Volume = ${data.volume}
        </body>
        <html>
    `;
    return html
}

app.get('/', function (req, res) {
    const data = getDataFromSomewhere();
    const html = makeMyPage(data);
    res.send(html);
});
Note that the stuff in ${...} is just javascript. It could be a call to a function that returns a lot of complicated HTML. Use loops in there and you can generate tables and all sorts if you have arrays of data.

2) Include some JS in the web page that fetches the data from the server and updates the page. Use XMLHHTPrequest or the new fetch API.

This is nice because the JS on the page can pull updates down at regular intervals.

It requires defining a URL in Express that can be use to access that data.

3) Use web sockets.

That is enough for now...

Return to “General programming discussion”