How can I push constantly streaming data (which I have converted to color) into successive divs in my index.html using Javascript?
Question
I am trying to turn the computer screen into a grid and then push data (in the form of color) into each square of the grid. When one square is full I want to fill the next one. I have the data streaming in using Socket.io. I'd appreciate some suggestions on how to adjust the Javascript below to enable this?
My html is a series of rows that look like this:
<body>
<div class="row">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
My CSS:
body {
text-align: center;
width: 100%;
height: 100%;
overflow: hidden;
}
.row {
line-height: 0;
font-size: 0;
overflow: hidden;
height: 50px;
width: 100%;
}
.row > div {
display: inline-block;
width: 50px;
height: 50px;
}
My client-side javascript:
var socket = io()
socket.on('connect', function () {
console.log('client is connected');
})
socket.on('color', function (data) {
const { rgb } = data
document.body.style.backgroundColor = 'rgb(' + [rgb[0], rgb[1], rgb[2]].join(',') + ')';
});
2 answers
solution1
1 2016-11-10 22:32:32
Here is the new code using socket.io:
var socket = io()
const div = document.querySelector(".row>div");
socket.on('connect', function () {
})
socket.on('color', function (data) {
const { rgb } = data
div.style.backgroundColor = 'rgb(' + [rgb[0], rgb[1], rgb[2]].join(',') + ')';
if (div.nextElementSibling) {
div = div.nextElementSibling;
}
else {
div = div.parentElement.children[0];
}
});
solution2
0 2016-10-06 11:00:52
You can select your div with .querySelector(query) and then move to the next one with .nextElementSibling . When you are at the last one you need to select the first child of the parent with parentElement.children[0] .
Here is an example with pure WebSockets, but you should be able to make it work with Socket.io:
var div = document.querySelector(".row>div"); // select the first div var websocket = new WebSocket("wss://echo.websocket.org/"); websocket.onmessage = function(evt) { var rgb = JSON.parse(evt.data); // change the color of the div div.style.backgroundColor = 'rgb(' + [rgb[0], rgb[1], rgb[2]].join(',') + ')'; if (div.nextElementSibling) // if a div is not last, move to the next one div = div.nextElementSibling; else // if the div is last move to the first one div = div.parentElement.children[0]; }; // code just to make the demo work and trigger the onmessage event websocket.onopen = function(evt) { n = 0; setInterval(function() { websocket.send(JSON.stringify([255*((n>>2)&1), 255*((n>>1)&1), 255*(n&1)])); n++; }, 100); }
body { text-align: center; width: 100%; height: 100%; overflow: hidden; } .row { line-height: 0; font-size: 0; overflow: hidden; /*height: 50px;*/ width: 100%; } .row > div { display: inline-block; width: 50px; height: 50px; }
<div class="row"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.