What's the easiest way to make a graphical web interface?

Discussion in 'Programmer's Corner' started by strantor, Mar 27, 2015.

  1. strantor

    Thread Starter AAC Fanatic!

    Oct 3, 2010
    I have two separate but similar projects that involve designing GUIs. I want web browser based user interfaces and if possible I would like to find one solution that addresses the needs of both projects. I'm looking for a recommendation on one or both of these:

    project #1: a data acquisition/logging program that communicates with a PLC using manufacturer-specific protocol over TCP. I have already written the code for this (minus the protocol) in Excel VBA. It works just fine; pulls a few hundred bytes of numerical values from the PLC every few seconds, formats the various values to INT, FLOAT, BIN, or BCD, and appends it to the next line of the spreadsheet. I don't like it because it's a kluge; it requires the end user to install a dubious 3rd party OCX (the protocol) and then fight with Excel's macro and ActiveX protection features. It requires strong VB and Excel skills to tailor the spreadsheet to display the info of interest to the user. Graphical charts can only be constructed after the logging session is over. I also have the protocol written in Python, so any solution involving Python would make things easier.

    I would like to replace this spreadsheet with a browser-based interface. Instead of a list of values growing line-by-line, I want to have a strip-chart/slow-moving-oscilloscope type display where up to 10 or more values can be plotted over time. I would like to be able to save the plot data to CSV or TXT. This project would be most likely all local; that's to say, there is no server - the web page and supporting script will be stored on the PC which is viewing it.

    Project #2: a CAN BUS sniffer (J1939 - not an automotive application). I have a CAN->UART dongle that I want to interface with an SBC like Raspberry Pi or BeagleBone or the likes, and have that SBC host a web page that shows what all addresses are communicating on the network and the data they are exchanging. So the web UI would need to be able to access local serial data and host it over "the internet" (a crossover cable). The user should be able to save session logs to PC.

    any ideas?
  2. nerdegutta


    Dec 15, 2009
    strantor likes this.
  3. sirch2

    Well-Known Member

    Jan 21, 2013
    Do you have control over where these are deployed, i.e. can you control the browser environments, security and configuration? If not you are going to struggle without a server, given all the security issues browsers tend to be quite locked down and doing things like reading serial ports might not be possible.

    I would be tempted to implement a web server, even if it is only one running locally, that way you can use things like PHP, Python, C or whatever to handle the interfacing and formatting and then send that as HTML to the browser. Implementing things like a strip-chart used to be fairly hit-and-miss because HTML had no graphics capability so it was done either by writing an image file and refreshing that into the browser regularly or using a third-party add on like SVG or Flash. However since HTML 5 there is now the Canvas tag that allows for drawing (but it's not as nice as SVG...)

    Anyway, all that said I have looked for this sort of thing in the past but I don't really know of an off the shelf framework that would offer much help (there are some Javascript charting libraries out there).
    strantor likes this.
  4. vpoko

    Active Member

    Jan 5, 2012
    Personally, I'd use an ASP.NET because that's what I'm used to, but some combination of Apache with PHP will work well, too. The benefit to ASP.NET is that the UI designer is integrated into the development environment (Visual Studio) so that you don't have to write any code for the layout, you only need to write code for the logic (and I'm sure something similar must be available for PHP sites, I'm just not familiar with what tools are available there). Additionally, you can actually load Excel files from within your project and even call existing VBA code (though I'm not what the support for Office integration is in Visual Studio Express, the free version - to get that feature you may need to buy a full version for a few hundred bucks or get it for free from Dreamspark if you happen to be a student).
  5. mcgyvr

    AAC Fanatic!

    Oct 15, 2009
    strantor likes this.
  6. Brownout

    Well-Known Member

    Jan 10, 2012
    If something simple like the embedded picture will do, I can post simple code to make forms with checkboxes, radio buttons, text boxes, etc.

    controller webpage.JPG
    RRITESH KAKKAR and strantor like this.
  7. strantor

    Thread Starter AAC Fanatic!

    Oct 3, 2010
    sure, I'd like to see it. Thanks.

    Senior Member

    Jun 29, 2010
    I am also interested in controlling from web.
  9. strantor

    Thread Starter AAC Fanatic!

    Oct 3, 2010
    well I think I might be onto something: sockets. I installed websockets for Python and now I can communicate between a local python script and a local HTML file without battling browser security and without having to resort to installing apache or other server. I can communicate with my serial port easily using Python and web page using Python, so all I need to do now for proof of concept (read/write to local serial port from a web page) is migrate my serial code into the websockets script. But I'll save that for tomorrow, should be easy. Then I get started making it look sexy with some graphics; that jqueryui looks pretty nice. I think I'll give it a go.

    Thanks for the pointers everybody!
  10. Brownout

    Well-Known Member

    Jan 10, 2012
    Here is the code for the image I posted earlier: The "submit" button is necessary to send the selections. The data is sent in the "name=value" format, and you'll need a script to process it. You'll also need Apache, which I see you don't want to use. The script is shown at the bottom.

    Code (Text):
    1. <html>
    2.   <head>
    3.     <title>Control - Control Home Devices</title>
    4.   </head>
    6.   <body>
    7.     <FORM action="/cgi-bin/light_wemo_ctl" method="POST">
    8.       <h2>Wemo Light Controller Main Page</h2> <br>
    9.       Main Light: <input type="checkbox" name="main" value="check"><br><br>
    10.       Second Light: <input type="checkbox" name="second" value="check"><br><br>
    11.       <input type="submit" Value="Submit">
    12.     </FORM>
    13.   <a href="">Return To Main</a>
    14.   </body>
    15. </html>
    16. ~                                                                            
    17. ~
    Code (Text):
    1. #! /usr/bin/perl
    2. local ($buffer, @pairs, $pair, $name, $value, %FORM);
    3. # Read in the text
    4. $ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;
    5. if ($ENV{'REQUEST_METHOD'} eq "POST")
    6. {
    7.     read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
    8. } else {
    9.     $buffer = $ENV{'QUERTY_STRING'};
    10. }
    12. #Split information into name/value pairs
    13. @pairs = split(/&/, $buffer);
    14. foreach $pair (@pairs)
    15. {
    16.     ($name, $value) = split(/=/, $pair);
    17.     $value =~ tr/+/ /;
    18.     $value =~ s/%(..)/pack("C", hex($1))/eg;
    19.     $FORM{$name} = $value;
    20. }
    21. $checked_main = $FORM{main};
    22. $checked_second = $FORM{second};
    23. $cmdstatus = $FORM{cmdstat};
    24. "light_wemo_ctl" [readonly] 88L, 2669C
    25. if($cmdstatus eq "command") {
    26.   if($checked_main eq "check") {
    27.   system('./wemo_remote_control/wemo', '', 'on');
    28.   }
    29.   else {
    30.   system('./wemo_remote_control/wemo', '', 'off');
    31.   }
    32.   if($checked_second eq "check") {
    33.   system('./wemo_remote_control/wemo', '', 'on');
    34.   }
    35.   else {
    36.   system('./wemo_remote_control/wemo', '', 'off');
    37.   }
    38. }
    39. else {
    40.   $main_state = `./wemo_remote_control/wemo getstate`;
    41.   chop($main_state);
    42.   $second_state = `./wemo_remote_control/wemo getstate`;
    43.   chop($second_state);
    44. }
    45. print "Content-type:text/html\r\n\r\n";
    46. print "<html>";
    47. print "<head>";
    48. print "<title>Control - Control Home Devices</title>";
    49. print "</head>";
    50. print "<body>";
    51. print "<h2> Controller has turned on specified lighting";
    52. print "</FORM>";
    53. print "</body>";
    54. print "</html>";
    Last edited: Mar 28, 2015
    strantor likes this.
  11. Brownout

    Well-Known Member

    Jan 10, 2012
    The script is a little convoluted. I can go over it line by line if you want. Suffices to say that before the line "$checked_main = $FORM{main};" the code parses the input from the html form. I ripped off the code and haven't touched it, but I can tell you what it all does. This is an old way of doing things, but works fine.

    There is one issue however, when I wrote this, I wanted a way to serve the webpage and leave it persistently with the user inputs data. For that, I have a script that loads recursively. I can post that code as well, if you're still interested.

    Remember, you'll need Apache to make this work. The html file goes in /var/www/html (0n my Fedora) and the script goes in /var/www/cgi-bin.

    I also promised text box and radio button.

    Text box:

    Code (Text):
    1. Device: <input type="text" name="device">
    Radio button:

    Code (Text):
    1.  <input type="radio" name="L0" value="off">";
    2. <input type="radio" name="L0" value="on" checked>;
    Because these two lines have the same name "Lo" they are automatically paired. The "checked" at the end of the second line means this button is selected by default.
    Last edited: Mar 28, 2015
    strantor likes this.
  12. GetDeviceInfo

    Senior Member

    Jun 7, 2009
    my latest project has been somewhat similar. Using the OPC function of Linx. I import OpenOPC into python, then read a status flag, programmed on the PLC side to indicate state changes. The results are an appended file with status words that describe the state change. That CVS file then can be read into various programs for analysis. I had looked at some charting software for python some time ago, but can only say is that it is out there. ( https://plot.ly/python/streaming-tutorial/ ) I opted to go with the Apache server, only because we have QC entering localized data into a database, served to whomever.

    Although I haven't had time to play with it, Tkinker appears to be fully capable of any GUI requirements
    Last edited: Mar 29, 2015
    strantor likes this.
  13. strantor

    Thread Starter AAC Fanatic!

    Oct 3, 2010
    LOL @ my self

    Last night i was working on my can bus project. I don't have an industrial diesel powered tool at my house to use as a test platform, so i was using my chevy truck's can bus on the OBDII port. I was just sniffing network traffic when all at once i started getting comms errors, my radio started randomly turning off/on, my dash console indicator lights all came on and off, check engine light came on, my headlights turned off and on, and there were random clickity-clickity noises coming from somewhere in the dash.

    I tried to start the truck, would not start. Just check engine light came on. Could not even roll up the windows. Nothing worked. Anything i tried to do just made different clickity-clickity noises.

    I was freaking out. My first thought was: best case scenario, my bad programming inadvertently wiped out some or all of the can controllers and worst case scenario, my questionable can hardware fried the entire can bus and all the devices on it.

    Took a minute to calm my frantic self and troubleshoot logically. Turns out i just left my key in the accessory position too long and drained my battery. Apparently CAN devices require a minimum voltage to communicate, and as the supply approaches that voltage, everything gets erratic. I'm not used to seeing these symptoms; in my past experience, car batteries have always been DEAD or GOOD, not "just barely good enough to not be entirely bad all the time."
    RamaD and Brownout like this.
  14. Brownout

    Well-Known Member

    Jan 10, 2012
    That's a funny as when my wife asked my why the digital thermometer was showing 90 degrees even though it was much cooler in the house. I went to look at it, and she had a big-ass candle burning right next to it. The candle was so hot, that just moving it warmed my hand.
  15. darrough


    Jan 18, 2015
    A signed Java applet would work excellent. You would not even need to worry about the browser.You could make an executable jar. The user clicks on the jar and your applet runs. However, your users will have to have Java installed.