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

first commit

Browse Source
This commit is contained in:
Martin Daniel Chaparro Ruiz
2021-03-20 11:53:20 -05:00
parent 29e3a33f3d
commit af43f1b2bc
11 changed files with 1335 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.dockerignore Normal file
View File

@@ -0,0 +1,4 @@
node_modules
npm-debug.log
Dockerfile
.dockerignore

11
Dockerfile Normal file
View File

@@ -0,0 +1,11 @@
FROM node:15.11.0-alpine3.10
WORKDIR /app
COPY . .
RUN npm install
EXPOSE 3000
ENTRYPOINT ["node", "src/index.js"]

1139
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

17
package.json Normal file
View File

@@ -0,0 +1,17 @@
{
"name": "matrix_led",
"version": "1.0.0",
"description": "",
"main": "src/index.js",
"scripts": {
"start": "node src/index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"mqtt": "^4.2.6",
"socket.io": "^3.0.4"
}
}

27
src/index.js Normal file
View File

@@ -0,0 +1,27 @@
const express = require("express");
const path = require("path");
const app = express();
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.use(express.static(path.join(__dirname, "public")));
console.log(__dirname);
const server = app.listen(app.get("port"), () => {
console.log("Servidor iniciado puerto: ", app.get("port"));
});
const io = SocketIO(server);
io.on("connection", (socket) => {
console.log("Cliente conectado");
socket.emit('OK',{mensaje:'Bienvenido'})
socket.on("mensaje", (mensaje) => {
client.publish('matrix/mensaje',mensaje.message);
client.publish('matrix/rgb',mensaje.color_rgb);
console.log("mensaje MQTT =>",mensaje)
});
});

BIN
src/public/Escudo_Universidad_Nacional_de_Colombia.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 304 KiB

1
src/public/dist/jscolor.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

53
src/public/index.html Normal file
View File

@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Matrix Led</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cyborg/bootstrap.min.css"
integrity="sha384-nEnU7Ae+3lD52AK+RGNzgieBWMnEfgTbRHIwEvp1XXPdqdO6uLTd/NwXbzboqjc2"
crossorigin="anonymous"
/>
</head>
<body class="row m-0 justify-content-center align-items-center vh-70">
<div class="col-sm-10">
<div class="p-5" id="alertas" role="alert"></div>
<div class="card">
<div class="card-body">
<h3 class="card-title text-center">Matrix LED</h3>
<input
type="text"
id="message"
value="MENSAJE"
class="form-control"
/>
<input
data-jscolor="{value:'rgb(255,0,0)'}"
,
onInput="update(this.jscolor)"
/>
<button id="send_message" class="btn btn-primary btn-block">
Enviar mensaje
</button>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="dist/jscolor.min.js"></script>
<script src="socket.js"></script>
</body>
</html>

BIN
src/public/matrix.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

40
src/public/socket.js Normal file
View File

@@ -0,0 +1,40 @@
const socket = io()
let alertas = document.getElementById('alertas');
let mensaje = document.getElementById('message');
let enviar_mensaje = document.getElementById('send_message');
var matrixMessage ={
message:'Mensaje inicial',
color_rgb:'255,0,0'
}
jscolor.presets.default = {
format:'rgb', previewSize:40, mode:'HVS'
};
enviar_mensaje.addEventListener('click', function () {
matrixMessage.message=mensaje.value;
console.log(matrixMessage)
socket.emit('mensaje',matrixMessage)
})
socket.on('Error',(mensaje)=>{
console.log(mensaje.mensaje)
alertas.className = 'alert alert-danger alert-dismissible fade show'
alertas.innerHTML = mensaje.mensaje
})
socket.on('OK',(mensaje)=>{
console.log(mensaje.mensaje)
alertas.className = 'alert alert-success alert-dismissible fade show'
alertas.innerHTML = mensaje.mensaje
})
function update(color) {
//console.log(color.toRGBString())
matrixMessage.color_rgb = `${Math.trunc(color.channel('R'))},${Math.trunc(color.channel('G'))},${Math.trunc(color.channel('B'))}`
}

43
src/public/socketv2.js Normal file
View File

@@ -0,0 +1,43 @@
const socket = io()
let alertas = document.getElementById('alertas');
let mensaje = document.getElementById('message');
let enviar_mensaje = document.getElementById('send_message');
var colorWheel = new iro.ColorPicker("#colorWheelDemo", {
layout: [
{
component: iro.ui.Wheel,
options: {
wheelLightness: true,
wheelAngle: 0,
wheelDirection: "anticlockwise"
}
}
]
});
enviar_mensaje.addEventListener('click', function () {
var color = '34'//myPicker.getSelectedColor().toRGBA()
let rgb = ''//`${Math.trunc(color[0])},${Math.trunc(color[1])},${Math.trunc(color[2])}`
var myColor = colorWheel.getColor();
console.log(myColor)
console.log({
mensaje:mensaje.value,
rgb:rgb
})
socket.emit('mensaje',{mensaje:mensaje.value,rgb:rgb})
})
socket.on('Error',(mensaje)=>{
console.log(mensaje.mensaje)
alertas.className = 'alert alert-danger alert-dismissible fade show'
alertas.innerHTML = mensaje.mensaje
})
socket.on('OK',(mensaje)=>{
console.log(mensaje.mensaje)
alertas.className = 'alert alert-success alert-dismissible fade show'
alertas.innerHTML = mensaje.mensaje
})