diff --git a/docker-compose.yml b/docker-compose.yml index 5bcbbab..970e706 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -2,6 +2,8 @@ version: "2.0" services: matrix: container_name: matrix_led - build: . + build: + context: . + ports: - 4001:6000 diff --git a/src/index.js b/src/index.js index 2d81ddd..ac2c3fc 100644 --- a/src/index.js +++ b/src/index.js @@ -5,7 +5,7 @@ const SocketIO = require("socket.io"); var mqtt = require('mqtt') var client = mqtt.connect('mqtt://192.168.1.105',{username:'mdchaparror',password:'un80187452'}) -app.set("port", 6000); +app.set("port", 3000); app.use(express.static(path.join(__dirname, "public"))); console.log(__dirname); diff --git a/src/public/estilos.css b/src/public/estilos.css new file mode 100644 index 0000000..2d73267 --- /dev/null +++ b/src/public/estilos.css @@ -0,0 +1,37 @@ +slidecontainer { + width: 100%; + } + + .slider { + -webkit-appearance: none; + width: 100%; + height: 15px; + border-radius: 5px; + background: #ffffff; + outline: none; + opacity: 0.7; + -webkit-transition: .2s; + transition: opacity .2s; + } + + .slider:hover { + opacity: 1; + } + + .slider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 15px; + height: 15px; + border-radius: 50%; + background: #6311ce; + cursor: pointer; + } + + .slider::-moz-range-thumb { + width: 15px; + height: 15px; + border-radius: 50%; + background: #6311ce; + cursor: pointer; + } \ No newline at end of file diff --git a/src/public/index.html b/src/public/index.html index 5a1e640..f2babfd 100644 --- a/src/public/index.html +++ b/src/public/index.html @@ -10,6 +10,7 @@ integrity="sha384-nEnU7Ae+3lD52AK+RGNzgieBWMnEfgTbRHIwEvp1XXPdqdO6uLTd/NwXbzboqjc2" crossorigin="anonymous" /> +
@@ -25,13 +26,25 @@ class="form-control" /> + +
+

Velocidad:

+ + +
+ + + + + -
diff --git a/src/public/socket.js b/src/public/socket.js index 3f05ade..02ee9d5 100644 --- a/src/public/socket.js +++ b/src/public/socket.js @@ -2,7 +2,15 @@ const socket = io() let alertas = document.getElementById('alertas'); let mensaje = document.getElementById('message'); +let speed_matrix = document.getElementById('speed_matrix'); let enviar_mensaje = document.getElementById('send_message'); +let output = document.getElementById("speed_value"); + +output.innerHTML = speed_matrix.value; + +speed_matrix.oninput = function() { + output.innerHTML = this.value; +} var matrixMessage ={ message:'Mensaje inicial', @@ -13,7 +21,8 @@ var matrixMessage2 ={ msg:'Mensaje inicial', R:255, G:0, - B:0 + B:0, + speed:150 } jscolor.presets.default = { @@ -24,6 +33,7 @@ enviar_mensaje.addEventListener('click', function () { matrixMessage.message=mensaje.value; matrixMessage2.msg=mensaje.value; + matrixMessage2.speed=speed_matrix.value; //console.log(matrixMessage) console.log(JSON.stringify(matrixMessage2))