Welcome, Guest
Username: Password: Secret Key Remember me

TOPIC: Web Interfaces for, well, EVERYTHING!

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

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
Well all I have managed to do was peel off layers of JS and jQuery and new and improved ways of doing what I am doing. It's nice to know all the possibilities, but to be honest, I am growing weary of re-writing the code again and again.

And unless a simple and compartmentalized solution presents itself, all I've done is write my own proprietary version of more complex proven frameworks already in existence. That's ok though because I am looking for something simpler and more directed to my needs.

So the end result may not be the best solution, and probably not the best performing, but I will not stop with this until I can get a nice picture of how to modular design an interactive interface that can do all I want, served from an IoT running Debian Linux.

WHERE I AM AT...
Creating objects with event handlers built in, that respond to custom events like "clear", "reset", and more specific events directed to a specific control. I need a DOM element object that is dynamically created from a template with inheritance. I am almost there. :)
The scenario would be... create the objects and append them to position DIV elements. Then set them through properties and/or methods to listen to global and isolated events. That way, I create a panel with a select, text boxes, and a text area objects that react to events like "clear" to return them to a new record status, or react to each other. Each element is like a little app with it's own listened to and generated events, properties, and methods. You may have no idea how static code can become so convoluted to achieve this result on a single DIV panel in a page. I need to write it to be more modular and object oriented, and able to be propagated. I'll get there.

More when I code it!

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

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
I ordered a couple of books on JS and jQuery, HTML and CSS. I need a good refresher anyway. I finally figured out how to run functions in an object based on how a property is used. If I read a property, a specific function is executed, and if I write to the property, another specific function executes. This is important because I need created DOM objects affected as I manipulate the object that created and manages them.

Now I am digging into prototypes, and how to execute a function when I new object based on a prototype is assigned. The function will increment the DOM ID number assignment among other things.

I also implemented an events handler that handles all events within a panel. This will also handle routing between listening objects to other object events.

Finally, I am side-tracking a little with mobile panels. This is a really cool effect idea that slides another 'panel' out from underneath the front panel via the click of an edit button. So say I have a panel that is set up for me to enter items into the database. These items will have selectors for Category and Sub Category. If I click the little 'edit' button next to the field, the panel slides aside to expose a panel allowing me to edit the database responsible for those options. This way, if I am entering items and realize I need another category, I can click, add a category, finish (slides back) and continue.

Of course there are other ways to do this. I could just make the selector editable and then add a new category that will be automatically created in the category table of the database if it is new. That is also a viable option. Either way, it saves me time going into MySQL Workbench and modifying the table every time I realize I need a new category.

This is so much fun, I cannot begin to go into all the stuff I have learned and re-learned. The end result though will be a really nice interface that allows me full control of, well, everything I need database support on. The plan is to make this an IDE of sorts so I can create interfaces using my existing code using drag and drop, and the configuration interface. Without writing more code unless I create a new feature. It is nothing new, but it certainly is specific to my needs. And instead of having to reverse-engineer a plugin or framework to add an unsupported feature, I can just code more because it's all mine.

I'm not interested in selling it, but certainly interested in it working for someone else if they choose to use it. Either way, I'll have a productive interface building IDE so I do not have to worry about hard coding them anymore. :)

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

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
Today's work on this project has sowed some fruit for sure! I have spawned elements wrapped and controlled in a JS object, and controlled by jQuery and it works beautifully!

Now it was time to go after handling events and tying some objects together. It was a lot easier than I expected!! I decided to go with one event handler instead of having little handlers all over the place. And even though the switch command I am using to decide what to do when whatever happens is hard-coded, I am going to implement a radical (at least for me) approach that makes the event handler dynamic! This is beautiful! Or will be, if it works.

The idea always has been to write a bunch of objects that encapsulate DOM elements as they are created, and then create them at will to create a panel interface. Now I am looking at having the object also add a condition and function to the event handler array when it is created. The event handler array will be iterated through with each filtered event, and if a match is found, the added function for that entry is executed. This will allow me to store these objects and their functionality in a database to be called and used according to a layout. One step closer to an interface building IDE.

All of this depends of course on how this approach performs as far as speed. That realization looms over this idea like the grim reaper does over us all. I am supremely aware of it and hope it will not be too noticeable, if at all. Of course... caching the built HTML is key here since it is hard-coded as a result when it becomes interactive. I'll worry about that later.

WOW is this fun! I will post more as I do it. Thanks for reading and tolerating my progressive self-replied thread! If I accomplish what I plan to do, this will be huge for developing web-based user interfaces using a graphic IDE environment with drag and drop. :D

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

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
It's been 5 days and 20 hours since my last post, and 3 re-writes later, I have a working template that uses a database to populate a panel with interactive elements. It's fairly fast also!! New challenges have presented themselves, but I solved the event issues I had and now it's clean and transparent other from the database data.

I still have 4 unique controls to write, the jquery wrappers that is, but the methods I included in the 2 I have are working beautifully.

There is too much to write in this post but more details are coming. This IDE tool is coming along nicely!!

I have to say... with all the different tools I used, like Eclipse, Dreamweaver, NetBeans 8,1 has been the absolute best for stumbling along learning javascript and jquery completely. Also, Firefox and Chrome JS tools have been invaluable at finding issues and correcting them. I can only imagine this platform on a system where everything is also hosted. For debugging especially, and especially PHP. After I build my new 8 core AMD system, I am going to dedicate my current Windows 10 machine to Debian Linux, and will try this layout of tools I have now on that platform.

Getting closer! Soon I should be able to drag-and-drop controls from a pallet and link them, Configure hierarchy, and link element events and data to others, all without writing a single line of code. There is lot to do. I'm going back to it right now!

Take care and have a great day!

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

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
Had to re-write some code to make the functions more transparent so they could be used to build ANY panel with unique controls that interact with each other. Ran into an anomaly that concerned focus for the next control when ENTER was pressed as a keystroke. Apparently, the tabindex of an element is a string, so adding 1 to it as in "+1" actually added the character "1" to the tabindex. So if the tabindex was 3, adding 1 to it made it 31. Fixed this by multiplying the tabindex using *1 to force it to be interpreted as a number. sigh. 2 hours of time wasted but I learned something.

Anyway, now writing the selectbox (combobox) controls with specific PHP file calls passed as a parameter, or even just query strings to a generic handler. I am using the other control prototypes as a, well, prototype. lol. Any change on the created objects selection will fire an event that can be heard by another control after setting that link in an array using another method I wrote inside the creation of the object.

It all sounds rather complicated, but it's nice and clean and again, transparent, so these prototypes can be used to create any specific objects throughout the entire application panel. I haven't tested any memory impact or footprint size yet, but with 35 controls created on the test panel, it's pretty snappy on a dual core 2.4ghz legacy machine.

Once I get the prototypes finished, I'll work on the drag and drop of the controls and how to snapshot them to feed a database. Once the database takes over as far as layout and object creation, then it will be a matter of scripting to design and re-create the layouts for the GUI's. Still a lot to do and tweak, but it is coming along nicely!!

SIDE NOTE: Graham, this is for you! Hopefully there will be a new category created here on DDIY that is specific to projects concerning web interface development for GUI supported embedded systems projects. That's where this topic would fit nicely into. I am building a system, but its software. And it is software that supports interaction using various device platforms with embedded projects. I will be using it to create web interfaces with various projects from small touch LCD screens to a full-blown PC, including smart phones. My system is Mosquitto specific, but it could be expanded to include other frameworks. With database support editing built in, it encapsulates everything outside of the embedded system design that would support interaction with it.

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

  • hop
  • hop's Avatar
  • Offline
  • Platinum Boarder
  • Posts: 526
  • Thanks received: 46
Linking elements is so very simple with jQuery!! I think I have made the system as transparent as I can. Now it's time to create panels. I can't WAIT to create the ESP8266 elements. With the custom event handler I wrote, they will be able to talk to the interface easily. It's time to tie this all together. WOOHOO!
The following user(s) said Thank You: Jon Chandler
Time to create page: 0.260 seconds