The app needs to have a front end, just like a car.
Teamwork makes the dreamwork!
Before we get into any individual activities, I'd like to share the group site for this particular assignment.
Stats, lots of stats
In this week's assignment I went on and decided to make an interface that is going to be used in the final project, it directly links the input devices week, the output devices week, and the network & communications week.
To begin on this assignment I need to explain to you what I was looking for when I created the interface you can see in this web page, the previously manufactured PCBs needed to be connected and exchanging data through a hosted server and that interaction needed to be recorded somewhere for evidence. So what I attempted was to do a simple dashboard that is accessed through a run-of-the-mill log-in section. After that, the dashboard will be shown with some line graphs that record the angling from the accelerometer & gyroscope attached to the Input PCB.
The graph gets updated in a determined amount of time as the hosted site is active and a constant information gathering query is running.
Nitty Gritty
Now, let me give you a brief explanation and then we are going to cover each part of the interface setup.
There are folders and files that are contained within the public_html folder that we uploaded into the hosted website: The .php files are the ones that contain the logical instructions for the website to truly act as a gateway for data to come through it, essentially, they are the protocols that enable the rest of the files to actually work. Another thing you might notice are the html files, these are some log in/ create an account screens that kind of add a little plus to it, there's a .txt file that contains the user's info once an account is created, it is not required to have an account and actually remember it to use the rest of the website, but I thought these webpages are a nice addition to look professional.
Now, within the assets folder we got different folders: css, fonts, images, and .js, essentially the css file is a file that covers the styling of the website, it uses custom instructions for each section and creates a class, that class is to be linked into the main code of the website, whenever we call upon a class the particular section it contains changes, maybe it's the colors, fonts, spacing, and/or alingment, etc. The fonts folder covers what it's described on its name, it covers the types of fonts that are called by the .css files, we can download different fonts from the internet so it is an amazing feature to make your website truly your own. After that we got the images folder, that one contains what its name says, all of the images/illustrations that are called on the main code are here, a piece of advise, try to use .PNG files as they generally are lighter in terms of storage space, either that or a small .JPEG or one of the other formats, lightness also has the side-effect of making the navigation of the website faster, also avoiding any storage problems that may arise as the site gets more complex. Lastly the js folder, .js stands for JavaScript, it is an extension that's generally used for plug-ins and complex animations within a website, this folder contains all of those fancy animations, pie-charts, and menus that someone might use whenever we are creating a site.
Now that we got the general idea of what the files are all about we are going to get into further detail about them.
The .css files stand for Cascading Style Sheets, and as their name goes, they are used for styling in a cascading manner, with the classes we previously mentioned, these are arranged with a name and a {} symbol that denotes all of the content that's stored inside of the class, we can either download a redy-to-go .css file from the internet and modify it to our liking or build one from scratch, it really depends on how much time you have on your hands, as learning how to do it is not that complex.
But how do we actually use these styling sheets, well, we need to call upon the file in our html code in the HEAD section just like this:
What this does is use all of the classes created in the .css file so that we can "mention" them in the .html code without having to specify all the different stats we want to use each and every time.
The font is up next, we need a fonts folder to store the styling we are trying to use in the text. As I mentioned before we can find different custom fonts and shapes to use on the internet, we only need to download the files and reference the files locations on the .css file, so whenever we mention the .css in the .html, the font is called upon as well, that is how we get the fancy letters we got in our websites.
In regards to the JavaScript or .js format, we need to do something similar to the fonts, the javascript files contain the animations, charts and all sorts of menus that can be composed of different elements on the screen.
If you look at the image you can see the .js is kinda similar to the .css arrangement, but there's also the files that have a "bulkier" look, most of these codes and files are unaltered from the ones I downloaded, the only thing that got changed was the file locations in order to correspond with the "summoning order" that the .html doc does to the linked codes.
Finally we get onto the main course, the .php files (Hypertext Preprocessor), we already mentioned how this is basically a protocol for bringing a more dynamic feel to the website, using a MySQL database, it runs commands to retrieve data, displaying the results in the interface that results in a line on the graph. Here are some screenshots of the code I'm using, as it is too long, I'm gonna put in some of the most important bits.
You can see on these images that we get all of the reference links to the other documents right here, all of those fonts, styles, and files get mentioned within the php files, as I mentioned before, they are like a glue that puts all of these separate parts together. You can see in the picture between the green lines of commentary the graphs, they have the title of one of the sensors (in this case Left Leg1) as well as a date and "Last 24 Hours" sentence to add a professional look to it. But you may be asking yourself, where is the info actually getting stored, in a number of .txt files, these record the stats as they are coming in and are called upon on the codes that display the information. They are numerical (angles) and alfabetical (user name, password) type values that are recorded and then sent into the dashboard.
All of this in order to project some lines on a screen, it really shows you that fancy text and lively animations are no easy feat. In case you have any doubts on the connection aspect of getting an interface to work with a PCB you should look into the the network & communications week. I'm gonna put the video where things got working and a separate one that only shows the general feel of the interface below.