Project developement
Interface and Application Programming
individual assignment:
write an application that interfaces a user with an input &/or output device that you made
group assignment:
compare as many tool options as possible
What's use ? And what it's going to look like ?
Okay, for this week my objectif is to be able to create a bacic interface that allow me to control differents servomotor on a network.What I need ?
Okay basicaly, for this week I need an electronic board that will able to control servomotor (made during the Output week) Also, I will need to communicate with it without delay using WebSocket Communication (Networking and Communication week).
And finaly, for this week I need to create an interface that allow me to control 6 boards connected on the same network.
Wich tool to create the interface ?
I have created all the parts of my final project as somethings very modular and portable. Then I think the most portable interface that I can made is a Webpage. The advantage is that you can acces to it through a lot of different devices. The webpage can also be encapsulate into an app. And also, I have already started to create the system of communication using a Webpage.
Then in order to create the interface, I will use a basic code editor like Viusal Studio Code and navigator in order to visualize the interface.
Also, the interface will use differents langage in order to transfer to data, and I will also explain how the board get the data and interpret it into a particular action.
HTML
Okay, the most important thing that I want in my interface are some sliders. They will represent an angle from 0 degree to 180 degree, for each laserbox they will be 2 sliders, one for each axes.
Then, the first thing is learn how to create a slider using html and css.
Then, this is the HTML part for the slider.
In a first time I created a container using the < div > balise and I create a CSS class called "slidecontainer"in order to be able to adjust the size of the container.
And now let's talk about the slider. Natively in HTML there is a balise called < input >. This balise allow you to create a field of interaction with the user. But there is several type of input.
For exemple :
- you can create button, using
type="button" - you can create a checkbox, using
type="checkbox"
In our case the type that interest us is the type="range". When a navigator will find this kind of input it will display a slider.
Then in the input balise you can see a lot of other parameters. Among them there is some that allow to set up the sliders and some other that are just informations ID in order to be able to send the data to the right board while saying wich information is send.
In a first time I will explain the native parameters :
class="slider"Is a CSS class in order to control the display of the slidermin="0"This is the minimum value of the slidermax="180"This is the maximum value of the slidervalue="90"This is the initial value of the sliderstep="5"This is the number beetwen two step
And the data for the esp :
data-axe="x"this contains the data of which axe need to move (here x)data-esp="ESP1"this contains the data of wich esp need to get the data
CSS
Okay, now we have "material", let's make something nice with it. In order to format the slider we will use the class created in the html.
/* Slider */
.slidecontainer {
width: 100%; /* Width of the outside container */
}
/* The slider itself */
.slider {
-webkit-appearance: none; /* Override default CSS styles */
appearance: none;
width: 100%; /* Full-width */
height: 10px; /* Specified height */
background: #d3d3d3; /* Grey background */
outline: none; /* Remove outline */
opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
-webkit-transition: .2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 10px; /* Set a specific slider handle width */
height: 10px; /* Slider handle height */
background: rgb(68, 53, 148); /* Green background */
cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
width: 10px; /* Set a specific slider handle width */
height: 10px; /* Slider handle height */
background: rgb(65, 85, 200); /* Green background */
cursor: pointer; /* Cursor on hover */
}
Basicaly, the three first classes are some basic css that allow me to change the size of the slider, the color and the opacity.
But all of the different navigator uses differnts CSS/HTML render engine. I want to have the best compatibility possible beetwen the differnts navigator. Then I want to be able to change the way of the display is made in function of the navigator.
In order to override the default look for Chrome, Opera, Safari and Edge I use .slider::-webkit-slider-thumb -webkit- is the render engine of those navigator. -slider-thumb is the reference to a slider in the webkit engine.
Mozzila Firefox use a different render engine called Gecko. The prefix is -moz-. Then I use .slider::-moz-range-thumb to override the default look.
Javascript and JQuery
We have the display part. Then we need to create the way to communicate the information to each esp on the network.
In order to do this I have created a little javascript & JQuery code that will send the information to the good esp.
JQuery is very powerful open source library that allow you to navigate in a document, select DOM elements and to create animation. Here I will use it as a DOM selector (Document Object Model). Basically, html page is a three and each node of the three is a DOM.
The JQuery part is in the bottom of the page. With I will create some variables that I will use in my different function.
var wSockList;
const onopen = function(esp, event) {
console.log(esp, "open socket");
};
const onclose = function(esp, event) {
console.log(esp, "close socket");
};
const onerror = function(esp, event) {
console.log(esp, event);
};
const onmessage = function(esp, event) {
console.log(esp, event);
};
function getWebsocket(ipAdrr, onOpen, onClose, onError, onMessage, port=81){
var Wsock = new WebSocket('ws://' +ipAdrr+ ':'+port+'/');
Wsock.onopen = onOpen;
Wsock.onclose = onClose;
Wsock.onerror = onError;
Wsock.onmessage = onMessage;
return Wsock;
}
function start(){
wSockList = {
ESP1 : getWebsocket('192.168.43.38', onopen, onclose, onerror, onmessage),
ESP2 : getWebsocket('192.168.43.161', onopen, onclose, onerror, onmessage)
}
}
function showValueESP(espWS, espMotorID, newValue, axe){
document.getElementById(espMotorID).innerHTML=newValue;
espWS.send(axe+newValue);
console.log(axe,newValue);
}
$('.slider').on('input', function(){
console.log($(this).val());
var espID=$(this).data('esp');
var espAxe=$(this).data('axe');
var newValue = isNaN($(this).val()) ? undefined : $(this).val();
if(newValue == undefined)
return;
var espMotorID = "outputText"+espAxe+espID;
showValueESP(
wSockList[espID],
espMotorID,
newValue,
espAxe
);
});
I use $('.slider').on('input', function() to say that when there is an input from the .slider class I want to create some variable and a call function :
var espID=$(this).data('esp');I create an espID variable that will store the value of thedata-espfield in my< input >balise.var espAxe=$(this).data('axe');I create an espAxe variable that will store the value of thedata-axefield in my< input >balise.- And I do the same with espMotorID that I use in order to display the current value sended to the esp.
var newValue = isNaN($(this).val()) ? undefined : $(this).val();I create a newValue variable that will store the value of the slider. Also it will test if the value is a number in order to provide any problem
Okay, now I will explain the differents function and the "way that will take the data"
All of the onopen, onclose, onerror, onmessage are juste some monitoring function.
The first important function is the getWebsocket function. With it a new WebSocket communication will be open dependig of the IP adress to who I want to talk.
Then we have the start() function. The start function will fill the list of the differents esp on the network. But this is not a list of data, this a list of differents call of function linked to the ID of the esp I want to talk.
As you can see in the call function showValueESP() in the JQuery part one of the argument is an element of the list (corresponding to the ID of the esp I want to talk). When the function is called, a new websocket connection will be open with the esp corresponding to the ID.
And finally, we have the showValueESP() function. I use document.getElementById(espMotorID).innerHTML=newValue; in order to fill the balise espMotorID that is in the HTML part with "newValue". That means that I have a dynamc dispay of the value of the slider and of the value of what is send to the esp.
Then we have the espWS.send(axe+newValue);. This line is the line that will send the data to the esp. espWS is variable of type WebSocket and contains to wich esp I want to talk. It refers to Wsock (return of the getWebsocket()) and to an element of the wSockList.
For this part about Javascript and JQuery I want to thanks a lot Madjid that make the formation with me. At first my code was very unoptmized and I needed to have a new function of getWebsocket by esp... And he explained mme how to do this with just 1 function.
How it looks ?
-->Here you can see the page<---
Conclusion
I'm very happy because this part is very very new to me and thanks to Madjid I have a clean code that allow me to make exactly what I want. Now, I still need to add some buttons in order to save configuration !
