mdchaparror/matrix_led_js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

peed range

Browse Source
This commit is contained in:
Martin Daniel Chaparro Ruiz
2021-09-19 19:18:59 -05:00
parent 5e8955da35
commit a361dd60d6
5 changed files with 66 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docker-compose.yml
View File

@@ -2,6 +2,8 @@ version: "2.0"
services: services:
matrix: matrix:
container_name: matrix_led container_name: matrix_led
build: . build:
context: .
ports: ports:
- 4001:6000 - 4001:6000

2
src/index.js
View File

@@ -5,7 +5,7 @@ const SocketIO = require("socket.io");
var mqtt = require('mqtt') var mqtt = require('mqtt')
var client = mqtt.connect('mqtt://192.168.1.105',{username:'mdchaparror',password:'un80187452'}) 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"))); app.use(express.static(path.join(__dirname, "public")));
console.log(__dirname); console.log(__dirname);

37
src/public/estilos.css Normal file
View File

@@ -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;
}

15
src/public/index.html
View File

@@ -10,6 +10,7 @@
integrity="sha384-nEnU7Ae+3lD52AK+RGNzgieBWMnEfgTbRHIwEvp1XXPdqdO6uLTd/NwXbzboqjc2" integrity="sha384-nEnU7Ae+3lD52AK+RGNzgieBWMnEfgTbRHIwEvp1XXPdqdO6uLTd/NwXbzboqjc2"
crossorigin="anonymous" crossorigin="anonymous"
/> />
<link rel="stylesheet" href="estilos.css">
</head> </head>
<body class="row m-0 justify-content-center align-items-center vh-70"> <body class="row m-0 justify-content-center align-items-center vh-70">
<div class="col-sm-10"> <div class="col-sm-10">
@@ -25,13 +26,25 @@
class="form-control" class="form-control"
/> />
<div class="slidecontainer">
<p>Velocidad: <span id="speed_value"></span></p>
<input type="range" min="50" max="1000" step=10 value="50" class="slider" id="speed_matrix">
</div>
<input <input
data-jscolor="{value:'rgb(255,0,0)'}" data-jscolor="{value:'rgb(255,0,0)'}"
, ,
onInput="update(this.jscolor)" onInput="update(this.jscolor)"
/> />
<button id="send_message" class="btn btn-primary btn-block">
<button id="send_message" class="btn btn-primary btn-block P-4">
Enviar mensaje Enviar mensaje
</button> </button>
</div> </div>

12
src/public/socket.js
View File

@@ -2,7 +2,15 @@ const socket = io()
let alertas = document.getElementById('alertas'); let alertas = document.getElementById('alertas');
let mensaje = document.getElementById('message'); let mensaje = document.getElementById('message');
let speed_matrix = document.getElementById('speed_matrix');
let enviar_mensaje = document.getElementById('send_message'); 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 ={ var matrixMessage ={
message:'Mensaje inicial', message:'Mensaje inicial',
@@ -13,7 +21,8 @@ var matrixMessage2 ={
msg:'Mensaje inicial', msg:'Mensaje inicial',
R:255, R:255,
G:0, G:0,
B:0 B:0,
speed:150
} }
jscolor.presets.default = { jscolor.presets.default = {
@@ -24,6 +33,7 @@ enviar_mensaje.addEventListener('click', function () {
matrixMessage.message=mensaje.value; matrixMessage.message=mensaje.value;
matrixMessage2.msg=mensaje.value; matrixMessage2.msg=mensaje.value;
matrixMessage2.speed=speed_matrix.value;
//console.log(matrixMessage) //console.log(matrixMessage)
console.log(JSON.stringify(matrixMessage2)) console.log(JSON.stringify(matrixMessage2))