I'm trying to set up a wifi switch to turn my computer on wirelessly. I'm using a program that has a web server and password. The issue I am having is I only want the button to be triggered for a 1 second then come off. I want the slider to turn on then off after the delay. I'm struggling with the HTML language to accomplish this.
I've tried adjusting the Arduino code but it has not worked. I believe the HTML code needs to be changed so that there's a delay and re-triggers the off switch.
Here is the code that I am using:
// Import required libraries
#ifdef ESP32
#include <WiFi.h>
#include <AsyncTCP.h>
#else
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#endif
#include <ESPAsyncWebServer.h>
// Replace with your network credentials
const char* ssid = "";
const char* password = "";
const char* http_username = "admin";
const char* http_password = "admin";
const char* PARAM_INPUT_1 = "state";
const int output = 26;
int delaytime = 5000;
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<title>Wifi Computer Switch</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {font-family: Arial; display: inline-block; text-align: center;}
h2 {font-size: 2.6rem;}
body {max-width: 600px; margin:0px auto; padding-bottom: 10px;}
.switch {position: relative; display: inline-block; width: 120px; height: 68px}
.switch input {display: none}
.slider {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; border-radius: 34px}
.slider:before {position: absolute; content: ""; height: 52px; width: 52px; left: 8px; bottom: 8px; background-color: #fff; -webkit-transition: .4s; transition: .4s; border-radius: 68px}
input:checked+.slider {background-color: #2196F3}
input:checked+.slider:before {-webkit-transform: translateX(52px); -ms-transform: translateX(52px); transform: translateX(52px)}
</style>
</head>
<body>
<h2>Wifi Computer Switch</h2>
<button onclick="logoutButton()">Logout</button>
<p>Ouput - GPIO 2 - State <span id="state">%STATE%</span></p>
%BUTTONPLACEHOLDER%
<script>function toggleCheckbox(element) {
var xhr = new XMLHttpRequest();
if(element.checked){
xhr.open("GET", "/update?state=1", true);
document.getElementById("state").innerHTML = "ON";
}
else {
xhr.open("GET", "/update?state=0", true);
document.getElementById("state").innerHTML = "OFF";
}
xhr.send();
}
function logoutButton() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/logout", true);
xhr.send();
setTimeout(function(){ window.open("/logged-out","_self"); }, 1000);
}
function powerbutton() {
}
</script>
</body>
</html>
)rawliteral";
const char logout_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p>Logged out or return to homepage.</p>
<p><strong>Note:</strong> close all web browser tabs to complete the logout process.</p>
</body>
</html>
)rawliteral";
// Replaces placeholder with button section in your web page
String processor(const String& var){
//Serial.println(var);
if(var == "BUTTONPLACEHOLDER"){
String buttons ="";
String outputStateValue = outputState();
buttons+= "<p><label class=\"switch\"><input type=\"checkbox\" onchange=\"toggleCheckbox(this)\" id=\"output\" " + outputStateValue + "><span class=\"slider\"></span></label></p>";
return buttons;
}
if (var == "STATE"){
if(digitalRead(output)){
return "ON";
}
else {
return "OFF";
}
}
return String();
}
String outputState(){
if(digitalRead(output)){
return "checked";
}
else {
return "";
}
return "";
}
void setup(){
// Serial port for debugging purposes
Serial.begin(115200);
pinMode(output, OUTPUT);
digitalWrite(output, LOW);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi..");
}
// Print ESP Local IP Address
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
if(!request->authenticate(http_username, http_password))
return request->requestAuthentication();
request->send_P(200, "text/html", index_html, processor);
});
server.on("/logout", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(401);
});
server.on("/logged-out", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", logout_html, processor);
});
// Send a GET request to <ESP_IP>/update?state=<inputMessage>
server.on("/update", HTTP_GET, [] (AsyncWebServerRequest *request) {
if(!request->authenticate(http_username, http_password))
return request->requestAuthentication();
String inputMessage;
String inputParam;
// GET input1 value on <ESP_IP>/update?state=<inputMessage>
if (request->hasParam(PARAM_INPUT_1)) {
inputMessage = request->getParam(PARAM_INPUT_1)->value();
inputParam = PARAM_INPUT_1;
digitalWrite(output, inputMessage.toInt());
}
else {
inputMessage = "No message sent";
inputParam = "none";
}
Serial.println(inputMessage);
request->send(200, "text/plain", "OK");
});
// Start server
server.begin();
}
void loop() {
}
When I run the program, this is what the web page looks like
Web Page Display
The button slides but I would like it to turn off again after a certain amount of time.
[edit: added web page photo]
Related
I can't seem to figure out how to make the boxes rotate. I tried transformation, JS, and even html special code. I do suck at CSS, so this is my code so far:
<!DOCTYPE html>
<html>
<head>
<script>
//great code from Scriptkiddy1337 on stack overflow
const pageStack=[];
function getParameterByName(name, url) {
url = url || window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
window.addEventListener('load', function (e) {
var templates = document.getElementsByClassName('sitecontent');
for (var i = 0, v; v = templates[i]; i++) {
for (var j = 0, x; x = v.childNodes[j]; j++) {
if (x.nodeType === Node.ELEMENT_NODE) {
pageStack.push(x);
}
}
}
var pageIndex = getParameterByName('page') || '0';
loadPage(pageIndex);
});
function loadPage(index) {
if (index >= pageStack.length || index < 0) {
document.body.innerText = '404 Page not found';
return;
}
document.body.innerHTML = '';
document.body.appendChild(pageStack[index]);
}
</script>
<style>
box{
transition: 3s;
width:50px;
height:50px;
position:fixed;
transform:/*im confused here*/;
}
</style>
</head>
<body>
<pageholder class="sitecontent">
<page>
<animator>
<!--I want them to rotate in a circle-->
<box style="background-color:red">.</box><br><br><br>
<box style="background-color:red">.</box><br><br><br>
<box style="background-color:red">.</box><br><br><br>
</animator>
Next Page
</page>
<page>
<h1>Homepage</h1>
<hr>
<p>Need help :(</p>
</page>
</pageholder>
</body>
</html>
I tried to transform CSSstuff, JS animations (which I also kinda suck at), and even special HTML code. I might be missing something, but as far as I know (which isn't a lot, unfortunately), I have done nearly everything I can think of.
I would highly recommend you read up on CSS Animations
<style>
/* The animation code */
#keyframes rotateBox {
to {transform: rotate(360deg)}
}
box{
transition: 3s;
width: 50px;
height: 50px;
position: fixed;
/* Use the animation here */
animation: rotateBox 3s;
}
</style>
I am attempting to create a chat app using socket.io on nodeJS and I want to add image transmission using the method outlined here
I'm running into an issue where if the image file is any larger than ~1MB, it seems to reset the connection and the io connection event is raised again (as the chat log gets re-sent).
Here is my code:
CLIENTSIDE
<html>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 5rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#subBtn {background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; margin-bottom:5.3rem;bottom: 0; left: 200; right: 0; display: flex; height: 2rem; box-sizing: border-box; backdrop-filter: blur(10px);}
#img {background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; margin-bottom:5.3rem;bottom: 0; left: 200; right: 0; display: flex; height: 2rem; box-sizing: border-box; backdrop-filter: blur(10px);}
#nametag {background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed;margin-top:-0.05rem;top: 0; left: 0; right: 0; display: flex; height: 2rem; box-sizing: border-box; backdrop-filter: blur(10px);}
#messages { list-style-type: none; margin-bottom: 2rem; padding: 0; }
#messages > li { padding: 1rem 1rem; font-size:30px; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<div id="loginPrompt" style="position:fixed; margin:0;margin-top:-1rem; background-color:blue;width:100%;height:100%;z-index:2;">
<h2 style="color:white;margin-left:0.2rem;">Enter your name: </h2>
<form id="formName" style="margin-left:0.2rem;">
<input id="inputName"><button>Submit</button>
</form>
</div>
<div id="imageDiv" style="position:absolute; margin-bottom:5rem; z-index:2;"></div>
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" placeholder="Enter your message..."/><button>Send</button>
</form>
<input type="file" id="img" onchange="setImgSrc(this)" accept="image/*"/>
<input type="submit" id="subBtn" onclick="submitImg()"/>
<script src="/socket.io/socket.io.js"></script>
<p id="nametag"></p>
<script>
var socket = io.connect()
var src
var setImgSrc = (elm) => {
var fr = new FileReader()
fr.onload = () => (src = fr.result)
fr.readAsArrayBuffer(elm.files[0])
}
var submitImg = () => socket.emit('submitImg',src)
socket.on('sentImg', (src) => {
// Create Img...
var img = document.createElement('img')
img.src = (window.URL || window.webkitURL).createObjectURL(
new Blob([src], {
type: 'image/png'
})
)
img.width = 300
img.height = 300
//sleep(5000)
var theDiv = document.createElement('div')
theDiv.append(img)
document.getElementById('messages').append(theDiv)
//var usern = document.getElementById('nametag')
//socket.emit('chat message', "(Photo from " + usern.innerHTML + ")")
})
var username = ""; //prompt("Please enter a username: ", "");
var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');
var formName = document.getElementById('formName');
var inputName = document.getElementById('inputName');
formName.addEventListener('submit', function (k) {
k.preventDefault();
if (inputName.value)
{
username = inputName.value;
nametag.innerHTML = username;
$('#loginPrompt').hide();
$('#form').attr('style', '');
//form.width = "100%";
socket.emit('chat message', username + ' has joined!');
form.addEventListener('submit', function(e) {
e.preventDefault();
if (input.value) {
socket.emit('chat message', username + ': ' + input.value);
input.value = "";
$('#input').attr('placeholder', 'Enter your message...');
}
if (inputName.value != "Enter your name..."){
name = inputName.value;
}
});
//return false;
}
});
socket.on('chat message', function(msg) {
var item = document.createElement('li');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>
SERVERSIDE JS:
const http = require('http').Server(app);
const io = require('socket.io')(http);
const port = process.env.PORT || 3001;
var chatlog = [];
app.use((req, res, next) => {
res.set('Cache-Control', 'no-store')
next()
})
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
for (i = 0; i < chatlog.length; i++){
io.emit('chat message', chatlog[i]);
}
socket.on('chat message', msg => {
chatlog.push(msg);
io.emit('chat message', msg);
});
socket.on('submitImg', (src) => {
console.log('Client sent image')
//Client submit an image
io.emit('sentImg', src) //the server send the image src to all clients
});
});
http.listen(port, () => {
console.log(`Socket.IO server running at http://localhost:${port}/`);
});
When I try to append the image to any element, if the file is small enough it'll work, if not, it'll just re-send the chat log as though a complete reconnect occurred.
I'm assuming the issue is that the data stream upload for the photo is not happening fast enough, and other code is executing prematurely. I employed a wait function and threw a whopping 5s delay in, but I still had the same issue. What's worse is the wait would only actually fire on the filesizes that would've worked anyway.
Any help would be greatly appreciated!!
I found the answer.
I simply need to change the max buffer filesizes as described in socket.io disconnects due to the size of data
Tried to position text In an Image exactly like in the example from w3schools.
It works fine in my space at w3schools. When I look at the css in the browser:
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
}
But when the exact same html + css code is running on the esp8266 nodeMCU, the positioning fails. Like Ben T stated, the width style is missing.
.container {
position: relative;
}
.center {
position: absolute;
top: 50;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
}
So something goes wrong in the css-class "center".
This is the Code running on the esp8266.
The html file right now is in the same file.
The css-positioning also fails with the temperature string.
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <Hash.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include "LittleFS.h"
const char* ssid = "ESP8266-Access-Point";
const char* password = "123456789";
// hard coded current temperature & humidity
float t = 15.1;
float h = 55.5;
AsyncWebServer server(80);
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
<style>
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Image Text</h2>
<p>Center text in image:</p>
<div class="container">
<img src="camper" alt="Cinque Terre" width="1000" height="300">
<div class="center">Centered</div>
</div>
</body>
</html>)rawliteral";
// Replaces placeholder with DHT values
String processor(const String& var){
//Serial.println(var);
if(var == "TEMPERATURE"){
return String(t);
}
else if(var == "HUMIDITY"){
return String(h);
}
return String();
}
//background-image: url(\"camper\")
void setup(){
Serial.begin(115200);
WiFi.softAP(ssid, password);
IPAddress IP = WiFi.softAPIP();
Serial.print("AP IP address: ");
Serial.println(IP);
if(!LittleFS.begin()){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
File camper = LittleFS.open("/camper.png", "r");
Serial.println(WiFi.localIP());
// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", index_html, processor);
});
server.on("/camper", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(LittleFS, "/camper.png", "image/png");
});
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(t).c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", String(h).c_str());
});
server.begin();
}
void loop(){
}
Has somebody experienced something like this before?
Thanks in advance for any kind of hints ;)
A template processor is used in:
request->send_P(200, "text/html", index_html, processor);
and from https://github.com/me-no-dev/ESPAsyncWebServer#template-processing
Placeholders are delimited with % symbols. Like this: %TEMPLATE_PLACEHOLDER%.
So all of the % characters in the index_html string literal need to be escaped. e.g.:
top: 50%%;
width: 100%%;
Otherwise the ESPAsyncWebServer template processing will treat the characters between % characters as a placeholder.
i.e. the text %;\n width: 100% is treated as a placeholder. Your processor() function only replaces the TEMPERATURE and HUMIDITY placeholders and any other placeholder is replaced by an empty string.
This means this CSS:
top: 50%;
width: 100%;
is replaced with:
top: 50;
This general problem is described in the issue https://github.com/me-no-dev/ESPAsyncWebServer/issues/644.
I'm pretty new to express and socket.io and I'm trying to achieve a little website:
What is it supposed to do:
You can connect to the website and enter a username
You have to select a column where you want to write (it's stored in var column)
Once on the page with the four column, you can see your username at the top of your column and start doing things there.
The other users see you in the correct column.
What it is not doing:
Actually the three points above are working quite well, my issue is with the last point :
The other users see you in the correct column.
My code is somehow not displaying every user in the correct column, in fact, it's displaying them in the same column as you are
Here is the code
$(document).ready(function () {
var socket = io();
var username = prompt("premier utilisateur : ", "nom");
var column = prompt("colonne ", "1,2,3 ou 4");
var gdhb = "";
socket.emit("new user entered his name");
socket.emit("nomUser", username);
if (column === "1") { column = ".one"; gdhb = ".dir1" }
if (column === "2") { column = ".two"; gdhb = ".dir2" }
if (column === "3") { column = ".three"; gdhb = ".dir3" }
if (column === "4") { column = ".four"; gdhb = ".dir4" }
socket.emit("user chose a column");
socket.emit("columnUser", column);
$(column).append($("<p class='username'>" + username + "</p>"))
$(document.body).click(function (b) {
var verbes = [
"appuie",
"bouscule",
"pousse"
];
var adverbes = [
"puis",
"ensuite",
"pour finir",
"alors"
];
var verbe = verbes[Math.floor(Math.random() * verbes.length)];
var adverbe = adverbes[Math.floor(Math.random() * adverbes.length)];
var verbadv = verbe + " " + adverbe;
console.log(verbadv);
socket.emit("verbadverbe");
socket.emit("verbadv", verbadv);
var div = $("<div />", {
"class": "document"
})
.css({
"left": b.pageX + 'px',
"top": b.pageY + 'px'
})
.append($("<p>" + verbadv + "</p>"))
.appendTo(column);
});
$(document.body).contextmenu(function (rc) {
var div = $("<div />", {
"class": "document"
})
.css({
"left": rc.pageX + 'px',
"top": rc.pageY + 'px'
})
.append($("<p>recule</p>"))
.appendTo(column);
});
var direction = "";
var oldx = 0;
var oldy = 0;
mousemovemethod = function (e) {
if (e.pageX > oldx && e.pageY == oldy) {
direction = "gauche";
}
else if (e.pageX == oldx && e.pageY > oldy) {
direction = "bas";
}
else if (e.pageX == oldx && e.pageY < oldy) {
direction = "haut";
}
else if (e.pageX < oldx && e.pageY == oldy) {
direction = "droite";
}
$(gdhb).append($("<p class='direction' id='direction'>" + direction + "</p>"))
$(".direction").prev().remove();
oldx = e.pageX;
oldy = e.pageY;
}
document.addEventListener('mousemove', mousemovemethod);
socket.on("columnUser", function (column) {
socket.on("nomUser", function (username) {
$(column).append($("<p class='username'>" + username + "</p>"));
socket.on("verbadv", function (verbadv) {
var div = $("<div />", {
"class": "document"
})
.append($("<p>" + verbadv + "</p>"))
.appendTo(column);
});
});
});
});
and the index.js :
const path = require('path');
const http = require('http');
const express = require('express');
const socketio = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketio(server);
app.use(express.static(path.join(__dirname, 'public')));
io.on('connection', (socket) => {
console.log('Nouvel utilisateur')
socket.on("nomUser", (username) => {
console.log(username);
io.emit("nomUser", username);
});
socket.on("verbadv", (verbadv) => {
console.log(verbadv);
io.emit("verbadv", verbadv);
});
socket.on("columnUser", (column) => {
console.log(column);
io.emit("columnUser", column);
});
});
server.listen(3000, () => {
console.log('listen on 3000');
})
Also if it's needed to understand better, here is the css
body {
font-family: sans-serif;
font-size: 1.3rem;
margin: 0;
background-color: DarkSlateGray;
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0px;
grid-auto-rows: minmax(100vh, auto);
height: 100vh;
}
.one,
.two,
.three,
.four {
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
position: relative;
overflow: scroll;
height: 100%;
background-color: tan;
}
.one {
grid-column: 1 / 2;
}
.two {
grid-column: 2 / 3;
}
.three {
grid-column: 3 / 4;
}
.four {
grid-column: 4 / 4;
}
.one::-webkit-scrollbar,
.two::-webkit-scrollbar,
.three::-webkit-scrollbar,
.four::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.note {
text-align: center;
width: 100px;
height: 30px;
}
.note p{
filter: drop-shadow(0 0 0.75rem black);
}
.document{
text-align: center;
}
.document p{
padding: 0;
margin: 0;
}
.username{
text-align: center;
padding: 0;
margin: 0;
}
.direction{
position: fixed;
bottom : 0;
width: 25vw;
text-align: center;
}
Thanks a lot for the precious help.
i've solved your problem with sockets. See at my solution.
client.js
function columnIndexIsValid(index, columnsQuantity) {
return index >= 0 && index <= columnsQuantity;
}
function fullNameIsValid(fullName) {
return typeof fullName === 'string' && fullName.length > 2;
}
function reloadPage() {
window.location.reload();
}
function rand(min, max) {
return Math.floor(min + Math.random() * (max - 1 - min));
}
function getRandomColour(colours = []) {
const colour = colours[rand(0, colours.length)];
return `#${colour}`;
}
function getUserHtml(user) {
return `<div class="column__users-list__item" data-item-id="${user.id}">${user.fullName}</div>`;
}
function getDrawnUsersNodes() {
return $('.column__item');
}
function canIRenderUsers(usersQuantity) {
const $renderedUsersQuantity = getDrawnUsersNodes().length;
return $renderedUsersQuantity < usersQuantity;
}
function renderUserHtmlToNode($node, html) {
$node.html($node.html() + html);
}
function getColumnUsersList(columnNode) {
const $column = $(columnNode);
return $column.find('.column__users-list');
}
function removeDrawnUserById(userId) {
$(`[data-item-id=${userId}]`).remove();
}
class DrawnUsers {
constructor() {
this.users = new Map();
}
getUserById(id) {
return this.users.get(id);
}
add(id, state) {
this.users.set(id, state);
}
removeById(id) {
this.users.delete(id);
}
exists(id) {
return this.users.has(id);
}
}
class Storage {
static setItem(key, value) {
localStorage.setItem(key, value);
}
static getItem(key) {
return localStorage.getItem(key) || null;
}
}
function generateUserId() {
return `user-${rand(rand(0, 10000), rand(20000, 50000))}`;
}
class UserState {
constructor() {
this.state = {};
}
get() {
return {
data: this.state,
};
}
set fullName(fullName) {
this.state.fullName = fullName;
}
get fullName() {
return this.state.fullName;
}
set id(id) {
this.state.id = id;
}
get id() {
return this.state.id;
}
set columnIndex(columnIndex) {
this.state.columnIndex = columnIndex - 1;
}
get columnIndex() {
return this.state.columnIndex;
}
}
$(document).ready(function () {
const drawnUsers = new DrawnUsers();
const colours = ['F2994A', 'F2C94C', '6FCF97', '2F80ED', '56CCF2', 'DFA2F5'];
const $columns = $('.column');
const $container = $('.container');
const userState = new UserState();
$columns.each(function () {
const $self = $(this);
$self.css({ 'background-color': getRandomColour(colours) });
});
userState.fullName = prompt('Type your fullName');
userState.columnIndex = +prompt('Type your column number');
if (
!fullNameIsValid(userState.fullName) ||
!columnIndexIsValid(userState.columnIndex, $columns.length)
) {
return reloadPage();
}
$container.addClass('active');
const socket = io('ws://localhost:3000');
socket.on('connect', () => {
const generatedUserId = generateUserId();
userState.id = Storage.getItem('userId') || generatedUserId;
Storage.setItem('userId', userState.id);
socket.emit('connected', userState.get());
socket.emit('addUser', userState.get());
socket.on('updateCurrentUsers', ({ data }) => {
const { users } = data;
if (!users || !canIRenderUsers(users.length)) {
return;
}
users.forEach((user) => {
const $column = $columns[user.columnIndex];
if ($column) {
if (!drawnUsers.exists(user.id)) {
drawnUsers.add(user.id);
renderUserHtmlToNode(
getColumnUsersList($column),
getUserHtml(user)
);
}
}
});
});
socket.on('newUser', ({ data }) => {
console.log('[debug] newUser: ', data);
const $column = $columns[data.columnIndex];
if (!$column) {
return;
}
if (drawnUsers.exists(data.id)) {
drawnUsers.removeById(data.id);
removeDrawnUserById(data.id);
} else {
drawnUsers.add(data.id);
renderUserHtmlToNode(getColumnUsersList($column), getUserHtml(data));
}
});
socket.on('disconnect', () => {
socket.open();
});
});
});
server.js
const path = require('path');
const http = require('http');
const express = require('express');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server);
app.use(express.static(path.join(__dirname, 'public')));
io.on('connection', (socket) => {
console.log('[debug] Client was connected successfully to server');
socket.on('connected', (user) => {
console.log('connected user data', user.data);
socket.data = user.data;
const users = Array.from(io.sockets.sockets.values()).map(
({ data }) => data
);
console.log('users', users);
socket.emit('updateCurrentUsers', {
data: {
users,
},
});
});
socket.on('addUser', ({ data }) => {
socket.data.columnIndex = data.columnIndex;
socket.broadcast.emit('newUser', {
data,
});
const users = Array.from(io.sockets.sockets.values()).map(
({ data }) => data
);
socket.broadcast.emit('updateCurrentUsers', {
data: {
users,
},
});
});
});
server.listen(3000, () => {
console.log('listen on 3000');
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./index.css">
<title>Users Columns</title>
</head>
<body>
<div class="container">
<div class="column">
<span class="column__index">#1</span>
<div class="column__users-list"></div>
</div>
<div class="column">
<span class="column__index">#2</span>
<div class="column__users-list"></div>
</div>
<div class="column">
<span class="column__index">#3</span>
<div class="column__users-list"></div>
</div>
<div class="column">
<span class="column__index">#4</span>
<div class="column__users-list"></div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.1/socket.io.js"
integrity="sha512-vGcPDqyonHb0c11UofnOKdSAt5zYRpKI4ow+v6hat4i96b7nHSn8PQyk0sT5L9RECyksp+SztCPP6bqeeGaRKg=="
crossorigin="anonymous"></script>
<script src="./client.js"></script>
</body>
</html>
index.css
html, body {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.container {
display: none;
}
.container.active {
display: flex;
flex-direction: row;
height: 100vh;
}
.container .column {
width: calc(100% / 4);
text-align: center;
padding: 20px 0;
}
.container .column .column__users-list {
display: flex;
flex-direction: column;
}
.container .column .column__index {
color: #FFF;
font-size: 36px;
letter-spacing: 8px;
}
hey) Let's look on that case more attentive, you have created a variable what contains a column index. right? This variable does store inside var variable. That is global variable for your script. I think you need to store each user column info inside each socket. If you don't know, each socket contains some info inside itself like id and other what can be used in your project if you'd like. But for this case you need to do so:
Ask new user what column he would like to choose.
Write to his socket data/info his column index.
When you do broadcast (It's when you send an object of data to each socket in room all each socket at all) just take this column index and draw this user in correct position. But make sure what your var column has a correct value. I can advice you to use const/let in javascript :)
I am using Aptana Studio 3 text editor and working on Windows 7 Enterprise OS. I have the following AJAX code which is not working on the local system to fetch JSON files kept on an https website. This example is taken from the Youtube video:
JSON and AJAX Tutorial: With Real Examples
index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="test" content="content"/>
<title>JSON and AJAX</title></head>
<header>
<h1>JSON and AJAX</h1>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</header>
<body>
<script src="main.js"></script>
<button type="button" onclick="function()" id="btn">Fetch Info for 3 New Animals</button>
<div id="animal-info"> </div>
</body>
</html>
Styles.css:
html, body {
padding: 0;
margin: 0;
}
.hide-me {
visibility: hidden;
opacity: 0;
transform: scale(.75);
}
h1 {
margin-top: 0;
font-size: 2.4em;
font-weight: normal;
display: inline-block;
}
body {
font-family: Helvetica, sans-serif;
padding: 50px 10%;
}
button {
background-color: #046380;
color: #FFF;
border: none;
padding: 10px 15px;
font-size: 15px;
border-radius: 4px;
cursor: pointer;
outline: none;
box-shadow: 2px 2px 0 #034154;
margin-bottom: 10px;
margin-left: 18px;
transition: opacity .4s ease-out, transform .4s ease-out, visibility .4s ease-out;
position: relative;
top: -10px;
}
button:hover {
background-color: #034F66;
}
button:active {
background-color: #034154;
box-shadow: none;
position: relative;
top: -8px;
left: 2px;
}
p {
padding: 4px 0 2px 8px;
line-height: 1.7;
border-bottom: 1px dotted #DDD;
list-style: none;
margin: 0;
}
main.js:
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
btn.addEventListener("onClick", function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");
//ourRequest.open('GET', 'animals-' + pageCounter + '.json');
ourRequest.onload = function() {
if (ourRequest.status >= 200 && ourRequest.status < 400) {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.onerror = function() {
console.log("Connection error");
};
ourRequest.send();
pageCounter++;
if (pageCounter > 3) {
btn.classList.add("hide-me");
}
}
);
function renderHTML(data) {
var htmlString = "";
for (i = 0; i < data.length; i++) {
htmlString += "<p>" + data[i].name + " is a " + data[i].species + " that likes to eat ";
for (ii = 0; ii < data[i].foods.likes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.likes[ii];
} else {
htmlString += " and " + data[i].foods.likes[ii];
}
}
htmlString += ' and dislikes ';
for (ii = 0; ii < data[i].foods.dislikes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.dislikes[ii];
} else {
htmlString += " and " + data[i].foods.dislikes[ii];
}
}
htmlString += '.</p>';
}
animalContainer.insertAdjacentHTML('beforeend', htmlString);
}
This code doesn't seem to work on my local machine. I tried running it by installing an http-server using NodeJs on my local machine, but still no joy!
Another JSON AJAX code on ww3Schools.com
though seems to work fine. This is an inline javascript code in the html file. Initially i thought onReadyStateChange was the culprit not working on IE, FF, CH etc., but this website code also has onReadyStateChange but it works fine!
Or is it the Button click event handler the cause why it is not working?
btn.addEventListener("onClick", function() {
My code is not inline, could that be the reason? If not, what am i missing or doing wrong?
I modified html file by moving "div" above "script" tag:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta name="test" content="content"/>
<title>JSON and AJAX</title></head>
<header>
<h1>JSON and AJAX</h1>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<button type="button" onclick="function()" id="btn">Fetch Elements</button>
<div id="animal-info"> </div>
</header>
<body>
<script src="main.js"></script>
</body>
</html>
main.js:
var pageCounter = 1;
var animalContainer = document.getElementById("animal-info");
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
// function LoadJSON() {
if (window.XMLHttpRequest) {
// code for modern browsers
var ourRequest = new XMLHttpRequest();
} else {
//code for IE6, IE5
var ourRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
// ourRequest.onLoad = function() {
ourRequest.onreadystatechange = function() {
if (this.readyState = 4 && (this.status >= 200 && this.status < 400)) {
var ourData = JSON.parse(ourRequest.responseText);
renderHTML(ourData);
} else {
console.log("We connected to the server, but it returned an error.");
}
};
ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");
// ourRequest.open('GET', 'animals-' + pageCounter + '.json');
ourRequest.send();
ourRequest.onerror = function() {
console.log("Connection error");
};
pageCounter++;
if (pageCounter > 3) {
btn.classList.add("hide-me");
}
}
);
function renderHTML(data) {
var htmlString = "";
for (i = 0; i < data.length; i++) {
htmlString += "<p>" + data[i].name + " is a " + data[i].species + " that likes to eat ";
for (ii = 0; ii < data[i].foods.likes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.likes[ii];
} else {
htmlString += " and " + data[i].foods.likes[ii];
}
}
htmlString += ' and dislikes ';
for (ii = 0; ii < data[i].foods.dislikes.length; ii++) {
if (ii == 0) {
htmlString += data[i].foods.dislikes[ii];
} else {
htmlString += " and " + data[i].foods.dislikes[ii];
}
}
htmlString += '.</p>';
}
// animalContainer.insertAdjacentHTML('beforeend', htmlString);
animalContainer.innerHTML=htmlString;
}
This works now!
The only problem i am facing is if i have more json files on the server, how do i hide ("hide-me") the button based on the number of json files processed, when button is clicked a no of times?
Right now, it hides button if pageCounter exceeds 3.
if (pageCounter > 3) {
btn.classList.add("hide-me");
}
The other issue i see is if i enable "insertAdjacentHTML", it displays each json twice. Why is this happening?
// animalContainer.insertAdjacentHTML('beforeend', htmlString);
Use this:
btn.style.visibility = "hidden";