Welcome, Guest
Username: Password: Secret Key Remember me

TOPIC: Web Interfaces for, well, EVERYTHING!

Web Interfaces for, well, EVERYTHING! 3 years 3 months ago #17781

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
I am eyeball-deep into PHP, JS, jQuery, and MySQL again. Now I am armed with some new knowledge and it is coming together nicely!

And this is not an electronics subject except that it may be closely related. My driving push into this again is to develop database supported web interfaces to enter and view data. But tweaked the right way, with a little effort, it can also support MQTT and embedded control through web interfaces. And with touch screens so cheap now, this might be a solid framework for designing interactive web interfaces to control embedded projects on your wireless and wired LANs.

I do not have HOLD-YOUR-HAND software recommendations to offer. My project is completely from scratch, but I already have screen-adjusted layouts designed on the fly , and will soon have dynamic controls populating the framework based on database support. That was a mouthful to say!

What it means is, if I am successful and there is no reason to think I will not be, I can create user web interfaces for anything I need to get data to or from and display and change it. Based on what is in a database. So if I want to have an interface for my home's lighting controlled by embedded connected technology, it should be easy now and consistent in look and feel, showing whatever controls needed for that specific system.

I have a lot to do still, but I am blasting through this programming project with captain america like speed! I will write an article on this as I apply it to my ESP8266 connected projects using MQTT.

Thanks for listening! I had to share! :D
The following user(s) said Thank You: Jon Chandler

Web Interfaces for, well, EVERYTHING! 3 years 2 months ago #17788

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
Ok it has been two weeks and I have been on this every single day. My first mistake was to revisit Eclipse again. It's a great IDE for sure, don't get me wrong, but the support for JavaScript and jQuery authoring is simply terrible. I moved to NetBeans 8.1 and life is SO much better. I needed something that had remote system services, and support for PHP and HTML 5 as well.

I had to revisit CSS and made a lot of headway with element positioning. I came up with a javascripted function that creates form elements contained in DIV elements with absolute positioning. Now everything lines up just great, and with some javascript functions I wrote, the interface adjusts to the viewed screen dimensions. Even mobile, tablet, etc.

I was going after database support for creation of the controls in panels, but the idea became convoluted and certainly something for an upgrade later. I decided to contain each panel interface in its own javascript file. A simple call to a function creates a specially written panel for what it does, with database support written in. It's still a bit static, but follows rules closely enough that it is easily propagated to new panel designs. They are like mini-apps that run in the main web interface. And all that is needed is LAMP support with jQuery.

I am creating my first MQTT panel today for my desk and PC lighting. This is really exciting! All from scratch without a framework to learn and program for. If I need a custom control, like a scheduling calendar/time control, I can just write it in JS and include it.

That's my update. Have a great day! :D

Web Interfaces for, well, EVERYTHING! 3 years 2 months ago #17794

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
Well I haven't created the MQTT panel yet, that is tomorrow, but I did create two panels that edit database data, and now I have them draggable to desirable locations in the app window. It's pretty cool!

I cannot show them being dragged yet because I am looking for desktop video recording software, but here is a screen shot. There is a LOT of jsQuery behind the scenes, but I am getting a solid feel of NetBeans 8.1 and it is a blessed gift of an IDE for this kind of work. Also, I have to tip my hat to FireFox JS debugging. I have never had it this easy before. It's beautiful!

OK I GUESS I CAN'T. The pics are too big. I'm working on it. sigh.

OMG I tried again and the size of the images is even under 1mb, yet still exceeds size. WOW! I thought this was fixed?????

I'll just up to my server and link it. GRAHAM! HELP!!!
Last Edit: 3 years 2 months ago by hop.

Web Interfaces for, well, EVERYTHING! 3 years 2 months ago #17797

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
OK, jumped into element events and string comparisons. I now have buttons that light up and enabled for "SAVE" and "CANCEL" when I make a change to a record in the database. I will post a youtube and images soon. This is so exciting!
The following user(s) said Thank You: Jon Chandler

Web Interfaces for, well, EVERYTHING! 3 years 2 months ago #17802

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
It doesn't seem like anyone cares about this project but I will plow on, relaying what I am doing. :)

I finally got the individual panels to act independently, and now I am writing functions for the buttons to update the database based on what I input in the elements. I was able to enable and disable the "SAVE" and "CANCEL" buttons and assign functions to them when they are lit.

The idea is... if anything on the form differs from what is in the database, the save and cancel buttons enable and light up. When the save and cancel buttons are lit, a click function is attached to them that allows database updating or reverting to the database data state. When the data in the forms matches what is in the database, the buttons are disabled, the functions removed, and they have no effect. Updating the data from the panel to the database is easy as it is just a simple getJSON to a PHP file with passed-parameters that does just that. It is a little more complex than that, since I wrote a larger PHP file that take parameters from the getJSON and channels the data to a specific function.

Anyway, it's a neat way to pull, look at, edit, and save or delete data in a MySQL database from a web interface. Specific to the web app. Yes this can be done using other apps, even MyPHPAdmin, but it is nice having it all in the same web app that shows data too.

It is coming together nicely. Soon, next week, I will have the ability to drag and drop the panels to create a custom interface for whatever MySQL supported interface I want. This is HUGE because I will write/build panels that deal with specific data and offer a way to get data and change the database. This completely lays the groundwork for a framework of web interfaces to all my embedded projects, centrally interfaced with using a web interface.

More as I code it. This next week with being on vacation will unlock a lot of options for me on this project. I am VERY excited!

Hopefully, Graham has the posted images issue I had fixed and I can share some content.

More as I code it. Thank you for your time! :)

Web Interfaces for, well, EVERYTHING! 3 years 2 months ago #17805

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
Opening cans of worms!

Yeah, I finished full-functionality of a panel, complete with database editing, displaying, etc. It's great! It's also a very large code footprint for a panel. The flow of the code is a mess and I am already rewriting it to take advantage of encapsulation and use of object literals. Each dynamically created DOM object should be a functional custom object within the panel, and I need to rethink the layout.

This was expected though, and this next stage of optimization is necessary of everything is going to work well together. This is a bit more complicated than I envisioned, but wow the options in code! Now that I have a working model of a panel, it's time to streamline it so the functionality can be duplicated in other panels. It might be larger than the original 348 lines of code, but it will be cleaner and easier to work with.

More when I code it. This is fun!!

OH, also found a great way to get feedback from ajax called php files. I am using error_log to write output to a text file rather than using echo or debugging. Echo does not work with ajax called PHP files because the echo is returned to the calling object and corrupts the returned data. This error_log strategy is great for debugging that MySQL query PHP file I write to find where the php errors are. Nice discovery!!
Time to create page: 0.268 seconds