Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Junior Member
    Join Date
    Mar 2016
    Posts
    7
    Member #
    53732
    Liked
    1 times

    seeking help: how to get real-time data displayed on a web page

    I am seeking some guidance on how to get real-time data displayed on a web page.
    The scenario is this: I have an app that runs periodically on the server machine that generates data to be displayed/updated on to a web page. I am looking for the most direct and easiest way to do this. What I am looking for is guidance/instructions/pointer to examples that:

    a) Construct a simple web page that, for example, has 3 fields that are to be updated, for example: Engine Temp, Engine RPM, Vehicle Speed

    b) The values for the temp, speed, and RPM are generated by an application thread that runs on the server. I have this running now, and can modify it according to suggestions.

    c) Shows how to link the values for temp, speed, and RPM computed in the application thread to the fields in the web page file. The application thread runs about once every 1-2 seconds, and execution time for the thread is less than 50 ms.

    Some caveats: am fairly proficient in C/C++ but know little about PHP, java scripts, AJAX, JSON, etc. but…if the examples are ‘close enough’ to what I need, I should be able to figure out what I need to do. Ideally, a simple example that works and that I can expand on would be great.
    The web server runs Apache, and does have MySQL db on it but I have little knowledge about working the db with Apache.
    Thanks for the guidance.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,688
    Member #
    5580
    Liked
    717 times
    Is the temp, speed, rpm something that is virtual, like a game? Or are you really monitoring them in a physical world?

    Are you intending to make this visible on the world wide web, or is this an "intranet" thing only within your house?

    The key thing would be to have a way for a browser to access those variables that are in your server.

    In order to run PHP on your server, you need to install it and have your server also be a web server. Likewise, if you had a way for your server to send the variables to an external website, then you could access them from any computer anywhere in the world.

    I'm just not sure about the physical or virtual aspect of the temp, speed, rpm ... is it real, or something you make up?
    Also, you want to display on any browser in the world? Or only on an internal network (intranet)?


  4. #3
    Junior Member
    Join Date
    Mar 2016
    Posts
    7
    Member #
    53732
    Liked
    1 times
    Quote Originally Posted by mlseim View Post
    Is the temp, speed, rpm something that is virtual, like a game? Or are you really monitoring them in a physical world?

    Are you intending to make this visible on the world wide web, or is this an "intranet" thing only within your house?

    The key thing would be to have a way for a browser to access those variables that are in your server.

    In order to run PHP on your server, you need to install it and have your server also be a web server. Likewise, if you had a way for your server to send the variables to an external website, then you could access them from any computer anywhere in the world.

    I'm just not sure about the physical or virtual aspect of the temp, speed, rpm ... is it real, or something you make up?
    Also, you want to display on any browser in the world? Or only on an internal network (intranet)?
    I am monitoring sensors in the real world (I also have a sw simulator that can generate the data as well). I am not sure what relevance this has on the problem....It is data, generated by an c/c++ app that runs on the server under my user name. I can expose the data any way that is workable (socket connection to something?, intermediate data file, whatever...) with the webpages (which is what I don't know)

    I designed the webpages that are served on this (web) server. The OS is Ubuntu 16.03 server version.
    The server has a full LAMP stack installed. ATM, I just use Apache. I am fairly proficient in installing/using/developing apps in LINUX environments. The web pages were, more or less, hand crafted HTML css, but for this case, I will use a very simple html layout...just as experiment.

    The pages will be reachable from both my internal lan, a well as the entire web - I have all of that working.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,688
    Member #
    5580
    Liked
    717 times
    OK,

    So you'll need to use PHP along with javascripting/JQuery (which is AJAX).

    In a nutshell, you will create an API that will serve a JSON array.

    When someone views the web page, (I'll just say JQuery instead of javascripting because it's easier), the JQuery will load an event timer that executes every few seconds. When that does, it will call a PHP script that will use CURL to access the variables from your server (your API).

    However you do this next part ... I'm not sure about the server part ... you create a way that if someone enters an IP address or URL on your server, it is served with a JSON array that contains your data. So you continuously create the JSON array using your server software so anyone can access it.

    Here's an example where anyone can access a JSON array using their browser:
    http://www.catpin.com/jeeps/check.php

    Now, instead of a person viewing the web page (JSON ARRAY), a PHP script can view it and "read" and "decode" the JSON array.

    JQuery timer triggers a PHP script that reads your JSON array, the PHP script returns the variables back to the JQuery and JQuery updates a <div> section on the page that is being viewed. That's AJAX ... a seamless way to access outside data and update the screen without a page refresh.

    JSON is really easy for micro controllers, PHP, and javascripting.

    I only mentioned the "physical" aspect because if you had a WiFi micro controller and sensors that measured your temp, speed, tach, anyone could view that in real time just by viewing the IP address of your WiFi controller. The WiFi controller actually serves a web page all by itself. I'm talking about an ESP32 type of thing.

    Give me a URL that I can view, that displays a JSON array that you create and update. Or if you want to call it an API, that's fine.
    I will give you a JQuery/PHP web page example.
    You can PM me with the URL or IP if you don't want it public.
    Last edited by mlseim; Feb 20th, 2019 at 06:16 PM.


  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,688
    Member #
    5580
    Liked
    717 times
    Here's an example of a JQuery page that gets data from a PHP script that generates some random numbers ... outputs as a JSON file.

    Here is the test page:
    Three Jeeps
    Last edited by mlseim; Feb 20th, 2019 at 06:11 PM.


  7. #6
    Junior Member
    Join Date
    Mar 2016
    Posts
    7
    Member #
    53732
    Liked
    1 times
    Quote Originally Posted by mlseim View Post
    OK,

    So you'll need to use PHP along with javascripting/JQuery (which is AJAX).

    In a nutshell, you will create an API that will serve a JSON array.
    snip...
    .
    Thank you! My interpretation of what you said: (this is the ‘what’ that needs to be done)
    1 create an array that will hold both the string name and the value (do this by using jsonArray)
    2 write a php script to read the jsonArray (…and out put it ‘on to a web page’?)
    3 create a mechanism that will periodically, via a timer, read the json Array, call the php script which will update the fields but not do a page refresh.
    All this happens on the server side.
    Do I understand the ‘what’ correctly?

    This is the ‘how’ to do it. (for the moment, only focusing on step 1)
    1 For the jsonArray, in my index.html file (I assume? Or in my application code? or where?) I’ll include this for the array:
    JSONArray jArray = new JSONArray();
    while (itr.hasNext()) {
    JSONObject json = new JSONObject();
    int objId = itr.next();
    json.put(Integer.toString(objId), odao.getObjectName(objId));
    jArray.put(json);
    }

    results = jArray.toString();

    To do this I’ll need to create an array in my app: (I assume?) pseudo code....
    EngineParams [3,2]:
    { “Engine RPM”, EngineRPM;
    “Engine Temp”, EngineTemp;
    “Speed” , VehicleSpeed;
    }
    How do I get the strings and variable values into the jsonArray? (there has got to be a tutorial to show this somewhere.....)
    Thanks
    J
    Last edited by three_jeeps; Feb 20th, 2019 at 07:39 PM.

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,688
    Member #
    5580
    Liked
    717 times
    This is the actual web page that viewers will use to see the continuously changing values ...

    PHP Code:

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Three Jeeps</title>        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>        <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">        <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>        <link rel="apple-touch-icon" sizes="340x340" href="custom_icon_340_g.png" />    </head>
    <style>.button2{font-family:arial;font-size:18px;color:#777;padding:20px 0px 20px 0px;}.button10{font-family:arial;font-size:18px;color:#000;}#btn2{background-color:#fff;color:#777;}#btn10{color:#000;}#code{padding:8px;width:93%;font-size:26px;text-align:center;}</style>    <body><div class="ui-field-contain"  style="width:100%;">  <input type="text" class="code1 ui-corner-all" name="code" id="code" value="" placeholder="Engine Data" style="margin-top:-10px;">
        <button id="btn10" class="button10 ui-btn ui-corner-all" style="margin-bottom:10px;"></button>    
    <div style="clear:both;"></div>                </div>    </body><script type="text/javascript">// Initial Opening$(document).ready(function(){
    $.ajax({    type: "GET",    dataType: "json",    url: "check.php"    }).done(function(msg) {    $('.button10').html("<div>Engine Temp: " + msg.TEMP + "</div><div>Vehicle Speed: " + msg.SPEED + "</div><div>Engine RPM: " + msg.RPM + "</div>");    }); });
     // Do a continuous Scanvar timeout=0;var interval = setInterval(function() {    if(timeout>60){    // if you wish to timeout, it can call another logout script.    //window.location.href = 'logout.php';    }    $.ajax({    type: "GET",    dataType: "json",    url: "check.php"    }).done(function(msg) {    $('.button10').html("<div>Engine Temp: " + msg.TEMP + "</div><div>Vehicle Speed: " + msg.SPEED + "</div><div>Engine RPM: " + msg.RPM + "</div>");    });
     timeout = timeout + 1;}, 1000);</script></html> 

    Then, there is a script called "check.php", which is a PHP script.
    That script will access the values from your server. That script "check.php" is requested by the javascripting and is expecting to get back a JSON array.

    This is the part I'm not sure of because I don't know how your server stores or "serves" the values (temp, speed, rpm).
    In my case, I'm using a shared webhost so I have to use PHP CURL to access values from an external website (like an API). You are your OWN server, so you have to write a PHP script that gets the values from within your server. I don't know if that means using C++ or how that happens.

    For my example, I just use PHP to randomly generate some numbers for the JQuery demo.

    For your real application, some magic has to happen where a PHP script can somehow get your values from your server.

    The script above (the web page) is shown working here: Three Jeeps

    I wish I knew more about servers, but I'm at a loss as to how you do all of the C++ and connection to PHP.


  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,688
    Member #
    5580
    Liked
    717 times
    So this WDF website sucks so bad ... I can't paste the script.
    This is the worst editor ever.

    Go to this site and view the HTML: Three Jeeps

    You'll see the javascripting that accesses the PHP script called "check.php".

    I don't know if this will even help because I don't have my own server. A shared webhost won't allow me to access their server. I'm just stuck using PHP only.


  10. #9
    Junior Member
    Join Date
    Mar 2016
    Posts
    7
    Member #
    53732
    Liked
    1 times

    viewpoint?

    Quote Originally Posted by mlseim View Post
    Snip...
    For my example, I just use PHP to randomly generate some numbers for the JQuery demo.

    For your real application, some magic has to happen where a PHP script can somehow get your values from your server.

    The script above (the web page) is shown working here: Three Jeeps

    I wish I knew more about servers, but I'm at a loss as to how you do all of the C++ and connection to PHP. .
    Thanks. I'll look at what you posted and figure out a path through it.
    I am not sure what your viewpoint is when you say: "For your real application, some magic has to happen where a PHP script can somehow get your values from your server."
    "Get the values from my server'? is what is throwing me.
    My app runs on my linux box which is my 'server'. Currently, the server runs Apache, and contains a set of html pages in the /var/www/ root, including the doc root index.html
    In response to an incomming http request, index. html is initially served, e.g. sent to the requesting client for display.
    There is no 'getting values from my server' - the values are already on the server (via the running app) and the values need to be communicated to a html page, in this simple example on the root index.html page.

    The most logical way to do this is to populate the fields on the html page with the data from the running application.When the page is accessed, the data will have already been filled in) From your description, the jsonArray is the structure that must be in the html page to hold the data.
    a php script is the most likely way to interface to the applicaiton, grab the data, and stuff it into the jsonArray I think??? or alternatively, the php script executes on the client machine and via a (http?) request, grab the
    data from the application software running on my server. Which way are you envisioning this working???
    Thanks
    J

  11. #10
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,688
    Member #
    5580
    Liked
    717 times
    How about an idea like this ...

    Can you write your data to a plain txt file?
    So every 5 seconds or whatever you 'overwrite' your data in that .txt file

    Example, your file is called "data.txt" and contains only one line.
    Each of your 3 variables separated by pipes | (I use pipes because commas are sometimes used for other things).

    118.5|78|2145

    temp|speed|rpm

    Then, you use my web page as an example of the JQuery.

    The script called "check.php" will simply open your "data.txt" file, read that one line and output a JSON array for the javascript to use.

    This will be your PHP script called "check.php":
    PHP Code:
    <?php
    $data
    =file("C:\xampp\htdocs\data.txt");
    list(
    $temp,$speed,$rpm)=explode("|",$data[0]);
    $arr = array('TEMP' => $temp'SPEED' => $speed'RPM' => $rpm);
    echo 
    json_encode($arr);
    ?>



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com