Welcome, Guest
Username: Password: Secret Key Remember me

TOPIC: Web Interfaces for, well, EVERYTHING!

Web Interfaces for, well, EVERYTHING! 3 years 1 month ago #17824

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
Not finished at all yet, but I am excited about how the system is coming together. I first set out to use a json file to map one of the panels and its controls. NetBeans is awesome for creating this type of file!! While testing this different scheme and deciding if it is a viable setup possibility, I ran into some issues that led me to do another frame work revision. That's what this post is about.

For those that are following this topic here, remember that the idea behind this frame work is to write the code with the most dynamic support possible. What this means is... the same code needs to support a variety of requested scenarios using parameters. At this point, I had a rather beefy PHP file that used parameters to call specific statically-written database query functions using _get and _post. I revised this to a single PHP function that handles all the query requests, and switched to xmlhttprequest to support it. So I query my databases using a json encoded object, and it returns a json encoded object. Now I am using prototypes constructed from database supplied parameters to supply this single function with query information to pull the data I need, and use that structured data to supply the panel.This keeps the functionality in the parameter coding where it belongs, not statically coded for a specific need. This also saves me the repetitive task of building the MySQL queries for each submission, and lets the json encoded parameters be the heart of the query building in the single php function.

This approach is working so very well! I now have the ability to get, change, or create a single piece of data, or rows of data, with or without criteria, sorted any way I want, even grouped data, from the same PHP MySQL function call. Now as I map out a panel, I can have, for example, a select/combobox control that is supplied with data from the supporting database, and can query that data or even change it based on included query parameters when a new object is created based on its prototype build. Now I can have several different copies of the same control prototype, each with its own database query data to make it unique.

This whole approach I am taking is incredibly rewarding!! I am coding features as I see the need, and revising and improving the code as I find better ways to do it. It is taking a long time, but this frame work is going to allow me to create any web interface I need, for all my needs, and keep me from having to re-code to change appearance and features. When I write the IDE to configure all the database data, I will not have to worry about the underlying code, just the parameters.

This of course has been done before. What I am doing from scratch is nothing new. But it will allow me a frame work I wrote and will be able to easily revise and improve on, and it is not costing me a cent in cost. Time sure, but I am learning so much about JS, jQuery, JSON, and PHP. And familiarizing myself with the wonderful NetBeans IDE!!

It may take longer to code to support a=1, b=2, c=result instead of 1*2=2, but the available options are now so much more vast!

Thanks for listening! I enjoy sharing this project here and will continue as it develops. I work on it every single day!

Web Interfaces for, well, EVERYTHING! 3 years 1 month ago #17825

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
SIDE POST - Software Development Overload!

I wanted to share that all the info I am placing in my brain lately has me dreaming in code. Maybe not seeing things in code yet, as Neo did in the Matrix, but certainly has me drifting into canvas-painting-with-code day-dreams all throughout my day.

JS, jQuery, JSON, and PHP is not all I am working with. At work I am developing Excel Workbook tools using VBA, and still writing C++ for my embedded projects. Even Cron jobs with bash scripting on my Linux IoT devices and full systems. Even keeping my cross-compiling tools fresh, and keeping my writing processes current. My daily touching of these software systems keeps me fresh, asking questions, and improving my code.

So I did take a break from embedded creations, but only to improve my software skills to support them for when I get back to them.

Thanks for listening!!

Web Interfaces for, well, EVERYTHING! 3 years 3 weeks ago #17830

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
As I push forward writing this beast, I am always looking for ways to code like I want to, getting the results that I want without duplicating code.

And although this is probably commonly known, I realized a neat feature of JavaScript that solved a simple problem for me. And I want to share it here. I did not google this need this time. I wrote it from scratch to see if I could properly grasp JS objects and arrays. This process is becoming increasingly frequent, much to my delight! :)

Please remember (for you JS aficionados out there) that I am learning JS and jQuery as I apply it to the client side of this project of mine. I am sure there is a better way to do this, but this is pretty cool!

OK, the issue was pretty simple. I borrowed and modified a function set that takes a querydata variable structure and applies it to a query function I wrote in PHP using xmlHTTPrequest. The arguments are json encoded, and the database query result is json encoded. The result is then json decoded and used on the client side via JS. Without going into all that here right now, it works perfectly! So the issue was that I didn't want to have to set up the querydata variable each time I called this database query set of functions. Wouldn't it be cool to set up a suite of functions where each deal with a particular table, but each could do a number of things with that table? What I ended up being faced with is the standard query parameters where something simple in the query needed to be changed, maybe even to include dynamic data. For example. I would have a query that is generic... "SELECT * FROM hopworks_inventory_categories" but it might be changed to include a "WHERE something = something" and even a "ORDER BY something". I did not want to duplicate the querydata variable setup for each eventuality, so I needed a function that returned a querydata array structure that included possible changes. And behold! This is so simple it makes me tingle all over!

So the particular function that deals with a group of queries with a particular table will all have the same setup data, like database it is in, typical columns called, a typical order, all just like defaults. The function is passed an object that has changes to that structure and applies them, then returns that structure that is used to call the database query function set.

Notice that the values for the querydata structure are ridiculous and will never work with my database.
function createQueryData_subcategories(overrides){
  var queryData = [ // outer level array literal
    { // second level object literals
      database:'I cannot remember',
      columns:['something','something else','yet another something'],
  for (var k in overrides[0]){
      if (overrides[0].hasOwnProperty(k)) {
           //console.log("Key is " + k + ", value:" + overrides[0][k]);
  return queryData;
If the call to the function has no arguments, as in...
var queryData = createQueryData_subcategories();
... I get back a querydata variable that has arguments for the database query as it is coded. But if I add arguments, as in...
var queryData = createQueryData_subcategories([{'database':'hopworks_home_inventory','criteria':'category_id=1','command':'select','columns':['id','name','description']}]);
The data in the structure is changed to the new correct values. And only the keys listed in the argument are changed. The rest is left alone. So instead of getting...
SELECT `something`,`something else`,`yet another something` FROM `subcategories`
I get...
SELECT `id`,`name`,`description` FROM `subcategories` WHERE category_id=1
Notice that "FROM `subcategories` is left alone, but all the other parts are changed.

There is a LOT going on behind the scenes, where the query is conditionally built and the results fetched, encoded, etc. None of that is included here yet.

I wanted to share this! It's going to be a big part of my coding strategy for JS client side from now on.
Last Edit: 3 years 3 weeks ago by hop. Reason: Further illustration

Web Interfaces for, well, EVERYTHING! 3 years 2 weeks ago #17831

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
Greets everyone!

It's been about a week since I posted anything on this but that does not mean I haven't been super busy with it.

I ran into a snag when I went to rewrite the way my controls were populated with database data. I decided to go with an xmlHTTPrequest strategy and it posed all sorts of issues. I spent a week coding in circles to get it working, but I finally achieved success!! My latest hair-pulling-out issue involved asynchronous versus synchronous operation though. It took a bit of time and trial and error to get my head fully around it. In the end, it turned out that when I was trying to populate the controls with database data, the query code had not returned a result yet. Because of it's asynchronous nature, other code was allowed to run while those processes were completing. I needed to add event handlers to take care of the heavy lifting. Now all is good and solid. It really got scary there for awhile though.

Then I got really frustrated because my controls were still statically set up. So I decided to continue to code sideways, creating a JSON file that had all the configuration settings. Now I am using that file to populate my panels with controls, and to populate those controls with database data. It works perfectly! This will be the last step before I import the JSON files into a database, then create my web GUI's using the database. It is a monster step closer to an interface building IDE.

Evolving rapidly is the JSON file that contains all the information to create the interface panels, controls, etc. Links between the controls, event handling, all configured and controlled by the JSON data file. Even tab, keyboard, and mouse event handling. Soon the JSON file will contain the base MySQL queries as well.

So now the major players of the web interface are these files...
interface_functions.js The main JS engine that drives it all.
main_panel_app.json The configuration JSON that makes the APP interface unique.
panel_objects.js All the objects and controls that are used and configured by main_panel_app.json.
web_interface_css.php CSS for the object appearance in classes.
mysql_access.php The main PHP MySQL access data provider and database control engine.
app_panel.php The main page that ties everything together.

This is a really exciting time with the development of my project. Being able to support asynchronous functions in the code is huge because the embedded support I wish to use this IDE to provide will heavily rely on that.

I only hope the image size issue posting images here is fixed when I start to provide media. I will probably wait until I write an article on this project.

More as I code it. :)

Web Interfaces for, well, EVERYTHING! 3 years 2 weeks ago #17832

  • Jon Chandler
  • Jon Chandler's Avatar
  • Offline
  • Moderator
  • Posts: 365
  • Thanks received: 352
You have done an impressive amount of work on this! Thanks for sharing.
The following user(s) said Thank You: hop

Web Interfaces for, well, EVERYTHING! 3 years 2 weeks ago #17833

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
Thank you Jon! That means a lot, I appreciate it!!

OK, now it is time to go after the different scenarios with database queries. The four categories of MySQL queries of course is
  • SELECT - Select data from a database table by columns (all, specific) and all rows or specific rows based on a criteria.
  • UPDATE - Change data that exists in a database by columns (again... all or specific) based on a criteria.
  • INSERT - Insert a new row or rows of data.
  • DELETE - Delete a row or rows of data based on a criteria.
Using conditionals and the same PHP file with the parameter arguments override strategy I mentioned earlier, I can perform a basic statically coded query, or vary it using argument overrides to perform a more specific query with data. This way, the same PHP file is always called, and the arguments dictate what happens. Again, this allows the configuration JSON (and future database data) to be iterated with the same function calls to customize the functionality.

And if I need another parameter of customization, I can just add it to the JSON file and then use it in code. Of course, the idea has always been to code for the required eventualities and then customize with the parameters, leaving the supporting code in place, without needing to write more code to support a new feature. It is amazingly clean and efficient to this end. As far as performance? That remains to be seen BUT my first tests creating panels with controls is incredibly fast.

That is where I am at today.

SIDE-NOTE: After the initial framework is finished, I plan to test its performance by scaling low and high with the server hardware. On the low end, I plan to use a single core Raspberry Pi. On the high end, a quad core i7. In between, a beagle bone black, laptops, etc. All on a Debian Jessie LAMP configuration. I also plan to test it on a LAMP server using alternatives to the Apache and MySQL components. And finally, Virtual Machines on WIndows 10 systems. There is still a long way to go though.
Time to create page: 0.281 seconds