Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have an image and i want click on it and create a copy + drag with cursor (mouse not clicked).
Its possible?
Situation: I develop a browser game and i have a menu with diferent images (buildings). I want that if a user click in one image (building), this image can drag this image (copy to not lose original) to other place.
I tried this,but it does not work:
document.body.style.cursor = "url(...png), auto";
I have a video call app where I a trying to create one to one peer connection.
But somehow track event is not getting dispatched despite doing peer.addTrack from senders end.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Video App</title>
</head>
<body>
<div>
<h3>Your Id: <span id="myId"></span></h3>
<h3>Online Users (click to connect)</h3>
<div id="users">
</div>
<video id="local-video"></video>
<video id="remote-video"></video>
</div>
</div>
<p id="status"></p>
</div>
<!-- Import socket.io script -->
<script src="/socket.io/socket.io.js"></script>
<script src="./client.js"<</script>
</body>
</html>
client.js
const socket = io();
const peer = new RTCPeerConnection({
iceServers: [
{
urls: ["stun:stun.l.google.com:19302", "stun:global.stun.twilio.com:3478"],
},
],
});
const createCall = async (to) => {
const status = document.getElementById("status");
status.innerText = `Calling ${to}`;
const localOffer = await peer.createOffer();
await peer.setLocalDescription(localOffer);
socket.emit("outgoing:call", { fromOffer: localOffer, to });
};
peer.ontrack = async ({ streams: [stream] }) => {
console.log("Incoming stream", stream);
const status = document.getElementById("status");
status.innerText = "Incomming Stream";
const video = document.getElementById("remote-video");
video.srcObject = stream;
video.play();
const mySteam = await navigator.mediaDevices.getUserMedia({
video: true,
});
for (const track of mySteam.getTracks()) {
peer.addTrack(track, mySteam);
}
};
socket.on("users:joined", (id) => {
const usersDiv = document.getElementById("users");
const btn = document.createElement("button");
const textNode = document.createTextNode(id);
btn.id = id;
btn.setAttribute("onclick", `createCall('${id}')`);
btn.appendChild(textNode);
usersDiv.appendChild(btn);
});
socket.on("incomming:answere", async (data) => {
const status = document.getElementById("status");
status.innerText = "incomming:answere";
const { offer } = data;
await peer.setRemoteDescription(offer);
});
socket.on("user:disconnect", (id) => {
document.getElementById(id).remove();
});
socket.on("incomming:call", async (data) => {
const status = document.getElementById("status");
status.innerText = "incomming:call";
const { from, offer } = data;
await peer.setRemoteDescription(offer);
const answereOffer = await peer.createAnswer();
await peer.setLocalDescription(answereOffer);
socket.emit("call:accepted", { answere: answereOffer, to: from });
const mySteam = await navigator.mediaDevices.getUserMedia({
video: true,
});
for (const track of mySteam.getTracks()) {
peer.addTrack(track, mySteam);
}
});
const getAndUpdateUsers = async () => {
const usersDiv = document.getElementById("users");
usersDiv.innerHTML = "";
const response = await fetch("/users", { method: "GET" });
const jsonResponse = await response.json();
console.log(jsonResponse);
jsonResponse.forEach((user) => {
const btn = document.createElement("button");
const textNode = document.createTextNode(user[0]);
btn.id = user[0];
btn.setAttribute("onclick", `createCall('${user[0]}')`);
btn.appendChild(textNode);
usersDiv.appendChild(btn);
});
};
socket.on("hello", ({ id }) => (document.getElementById("myId").innerText = id));
const getUserMedia = async () => {
const userMedia = await navigator.mediaDevices.getUserMedia({
video: true,
});
const videoEle = document.getElementById("local-video");
videoEle.srcObject = userMedia;
videoEle.play();
};
window.addEventListener("load", getAndUpdateUsers);
window.addEventListener("load", getUserMedia);
sever.js (Used to create the inital connection)
//import and initialization
const io = new SocketIO(server);
const PORT = process.env.PORT || 8000;
// Create a users map to keep track of users
const users = new Map();
io.on('connection', socket => {
console.log(`user connected: ${socket.id}`);
users.set(socket.id, socket.id);
// emit that a new user has joined as soon as someone joins
socket.broadcast.emit('users:joined', socket.id);
socket.emit('hello', { id: socket.id });
socket.on('outgoing:call', data => {
const { fromOffer, to } = data;
socket.to(to).emit('incomming:call', { from: socket.id, offer: fromOffer });
});
socket.on('call:accepted', data => {
const { answere, to } = data;
socket.to(to).emit('incomming:answere', { from: socket.id, offer: answere })
});
socket.on('disconnect', () => {
console.log(`user disconnected: ${socket.id}`);
users.delete(socket.id);
socket.broadcast.emit('user:disconnect', socket.id);
});
});
app.use(express.static( path.resolve('./public') ));
app.get('/users', (req, res) => {
return res.json(Array.from(users));
});
server.listen(PORT, () => console.log(`Server started at PORT:${PORT}`));
There are no errors in console
peer.getReceivers() and peer.getSenders() both an empty array.
I have a spring backend that is serving my react front end, I am trying to generate a list of all books in storage but I get this error at runtime Uncaught TypeError: books is undefined ListBookComponent ListBookComponent.jsx:37
TypeError: books.map is not a function
my ListBookComponent.jsx
import React, {useEffect, useState} from 'react'
import { listBooks } from '../services/BookService'
const ListBookComponent = () => {
const [books, setBooks] = useState([])
useEffect(() => {
listBooks().then((response) => {
setBooks(response.data);
}).catch(error => {
console.error(error);
})
}, [])
return (
<div className='container'>
<h1 className='text-center'>List of Books</h1>
<table className='table table-striped table-bordered'>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Language</th>
</tr>
</thead>
<tbody>
{
** 37 **books.map(book =>
<tr key={book.id}>
<td>{book.id}</td>
<td>{book.name}</td>
<td>{book.language}</td>
</tr>)
}
</tbody>
</table>
</div>
)
}
export default ListBookComponent
I’ve highlighted line 37 where the error occurs
the json response from my api
{"status":"Success","results":[{"id":1,"name":"Tenzi Za Rohoni","language":"Kiswahili"}]}
bookservice.js
import axios from "axios";
const REST_API_BASE_URL = 'http://localhost:8080/api/books';
export const listBooks = () => axios.get(REST_API_BASE_URL);
I’ve tried changing the json response format but i didn’t work. While debugging I came across
where the breakpoint is
if (hasUncaughtError) {
hasUncaughtError = false;
var error$1 = firstUncaughtError;
firstUncaughtError = null;
throw error$1;
} // If the passive effects are the result of a discrete render, flush them
// synchronously at the end of the current task so that the result is
// immediately observable. Otherwise, we assume that they are not
// order-dependent and do not need to be observed by external systems, so we
// can wait until after paint.
// TODO: We can optimize this by not scheduling the callback earlier. Since we
// currently schedule the callback in multiple places, will wait until those
// are consolidated.
Pretty straightforward: my app can’t see commands once i send them
require("dotenv").config();
const { Client } = require("discord.js");
//disc = require("discord.js");
const axios = require("axios");
const token = process.env.BOT_TOKEN;
const client = new Client();
client.on("ready", () => {
console.log(`Logged in as ${client.user.tag}`);
hook_commands();
});
client.on("interactionCreate", async (interaction) => {
console.log("interaction created");
});
client.login(token);
function hook_commands() {
//redacted, it works fine
}
It logs in and hooks commands, but don’t see them once invoked. The permissions are:
application.commands, bot, use slash commands (guess i don’t need it)
(I’m not using guild commands but global commands instead)
i have this table and pass #key to modal dialog
<td> <a id="myButton" href="#!" data-toggle="modal" data-target="#restoreBackup_{{ $key }}" class="btn btn-warning">Restore Backups</a> </td>when i click restore button, then modal dialog with a form opened in foreach
my modal:
@foreach ($backups as $key => $backup)
{{-- //restore section--}}
<div class="modal fade" id="restoreBackup_{{ $key }}" tabindex="-1" role="dialog"
aria-labelledby="restoreBackup_{{ $key }}" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ translate('Confirm Restore') }}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="alert alert-warning" role="alert">
<b>Do you really want to restore this backup? {{ $key }}</b>
</div>
<form id="frm_restore_{{ $key }}" action="{{ route('backups.restore') }}" method="POST">
@csrf
<input type="hidden" name="key" value="{{ $key }}"/>
<input type="hidden" name="backuptype" value="{{ $backup['type'] }}"/>
<div class="modal-body">
@if ($backup['type'] == 0)
<div class="form-group">
<h5 class="modal-title">Choose Your Restore Type</h5>
</div>
<div class="radio-button">
<input type="radio" id="radio30" name="restoretype" value="0" checked>
<label for="radio30">DataBase And Folder</label>
<input type="radio" id="radio31" name="restoretype" value="1">
<label for="radio31">Only DataBase</label>
<input type="radio" id="radio32" name="restoretype" value="2">
<label for="radio32">Only Folder</label>
</div>
@endif
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-warning">Restore</button>
</div>
</div>
</form>
<div id="animationdiv_{{ $key }}"></div>
</div>
</div>
</div>
@endforeachAs you can see, I have a div like this:
<div id="animationdiv_{{ $key }}"></div>I have a css code where the animation is defined:
.currently-loading {
opacity: 0.75;
-moz-opacity: 0.75;
filter: alpha(opacity=75);
background-image: url({{ static_asset('backup_restore_loading.gif') }});
background-repeat: no-repeat;
position: absolute;
height: 100%;
width: 100%;
z-index: 10;
background-size: contain;
}In the case that I open a dialog modal outside the foreach loop and for example its form name is frm_backup, then I can display the animation in the JavaScript section if I submit it with the following codes:
var frm_backup = document.getElementById('frm_backup');
frm_backup.addEventListener('submit', bmdLoading1);
//display loading message
function bmdLoading1() {
var divloading1 = '';
divloading1 = '<div class="currently-loading"></div>'
$("#animation").html(divloading1);
}but In the case that I open a dialog modal inside the foreach loop, i don’t know how to pass $key and show div animation with $key
in this case each modal has a name like id=”frm_restore_{{ $key }}” and each div has a name like id=”animationdiv_{{ $key }}”
image with error msg in line no: 4
I’m developing a vs code extension, I need to display error msg in a specified line, like the one in the image (undeclared name: adf, in red color). Could someone help me with which api to use. I read the documentation, but couldn’t find which api to use to achieve this.
Read the vs-code api extension documentation, couldn’t find the api to proceed with.
I have an Angular project which is running for almost 4 years and in this project we used hash(#) in the routing part, now for some reason the hash(#) needs to be removed.
In this part, I removed the config useHash that I had previously given to routing
Now my project works as expected without # and there is no problem, and it also moves between the links correctly
But as soon as my page is refreshed, no page comes up and no request goes to the server, only a series of errors appear in the console and NetWork.
netWork errors : 
console errors : 
I have a code where I am able to call click event . But unable to call double click event on tag
<!DOCTYPE html>
<html>
<head>
<style>
body{
background:black;
}
svg{
fill:white;
background:white;
position: absolute;
top:0px;
left:0px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
x=""
i=0;
function clicked(evt){
var append="width* "+(evt.clientX/1188).toFixed(4)+"f , height*"+(evt.clientY/2038).toFixed(4)+"f";
if(i%2===0){
x+="path.quadTo("+append+","
}
else{
x+=append+")n"
}
i++;
}
function doubleclicked(evt){
alert("doiuble:")
var append="width* "+(evt.clientX/1188).toFixed(4)+"f , height*"+(evt.clientY/2038).toFixed(4)+"f";
x+="path.move("+append+","
}
$(document).ready(function(){
$(document).click(function (ev) {
mouseX = ev.pageX;
mouseY = ev.pageY
console.log(mouseX + ' ' + mouseY);
var color = 'white';
var size = '22px';
$("body").append(
$('<div></div>')
.css('position', 'absolute')
.css('top', mouseY + 'px')
.css('left', mouseX + 'px')
.css('width', size)
.css('height', size)
.css('background-color', color)
);
});
});
</script>
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1198" height="2048">
<g ondblclick="doubleclicked(evt)" onclick="clicked(evt)" >
<path xmlns="http://www.w3.org/2000/svg" fill="currentColor" d="M275 462q140 -29 316 -14q49 4 54 35q0 20 -39 92l-14 24q-14 21 -167 177q-88 89 -104 109q-91 113 -136 307l-8 34v57q0 57 4 82q24 179 153 237q94 47 233 34q141 -15 259 -104q173 -130 270 -371q15 -36 29 -39q13 0 2 47q-82 319 -289 535q-138 138 -292 169 q-192 37 -323 -50q-214 -176 -130 -555q51 -224 197 -429q50 -71 160 -193q58 -64 58 -67q0 -4 -9 -8q-182 -19 -310 29q-20 10 -49 50q-15 21 -21 27q-6 7 -14 4q-13 -10 -5 -33q4 -18 19 -42q75 -123 156 -144z"/>
</g>
</svg>
</div>
</body>
</html>
I am currently working on a React Native project using Expo, and I’m facing challenges with the ‘react-native-webview’ package. Specifically, I need to access the request headers before the request is initiated.
I’m particularly interested in obtaining the Cookie and a custom header, let’s call it custom-header-key, from the request headers made by the browser, not the headers set by my application.
Despite my efforts, including various approaches and injecting JavaScript code, I have not been successful in obtaining these headers.
If anyone has experience or insights into how to access the request headers made by the browser in a React Native Expo WebView, I would greatly appreciate your guidance. Any help or suggestions would be highly valued.
Thank you in advance!
DiscordAPIError[20012]: You are not authorized to perform this action on this application
hi my name is Garv and i have made a bot returning the error:
Started refreshing application (/) commands.
DiscordAPIError[20012]: You are not authorized to perform this action on this application
at handleErrors (/home/runner/Anshu-Saroye-DC-BAOT/node_modules/@discordjs/rest/dist/index.js:722:13)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async SequentialHandler.runRequest (/home/runner/Anshu-Saroye-DC-BAOT/node_modules/@discordjs/rest/dist/index.js:1120:23)
at async SequentialHandler.queueRequest (/home/runner/Anshu-Saroye-DC-BAOT/node_modules/@discordjs/rest/dist/index.js:953:14)
at async _REST.request (/home/runner/Anshu-Saroye-DC-BAOT/node_modules/@discordjs/rest/dist/index.js:1266:22)
at async /home/runner/Anshu-Saroye-DC-BAOT/index.js:47:5 {
requestBody: {
files: undefined,
json: [ [Object], [Object], [Object], [Object], [Object], [Object] ]
},
rawError: {
message: 'You are not authorized to perform this action on this application',
code: 20012
},
code: 20012,
status: 403,
method: 'PUT',
url: 'https://discord.com/api/v10/applications/1153619312507109397/commands'
}
Logged in as Anshu Saroye#0383!
and the source code of my bot is
const { Client, GatewayIntentBits } = require('discord.js');
const { REST } = require('@discordjs/rest');
const { Routes } = require('discord-api-types/v10');
const { SlashCommandBuilder } = require('@discordjs/builders');
const keepalive247 = require('./keepalive247.js');
const { PermissionsBitField } = require('discord.js');
const prefix = 'io!';
const clientId = 'x';
const token = 'x';
const ADMIN_ID = 'x';
const commands = [
new SlashCommandBuilder()
.setName('gwwin')
.setDescription('Announce giveaway winner')
.addUserOption(option => option.setName('username').setDescription('Username of the winner').setRequired(true)),
new SlashCommandBuilder()
.setName('aboutus')
.setDescription('Display About Us information'),
new SlashCommandBuilder()
.setName('rules')
.setDescription('Display Rules'),
new SlashCommandBuilder()
.setName('ban')
.setDescription('Ban a user')
.addUserOption(option => option.setName('user').setDescription('User to ban').setRequired(true))
.addStringOption(option => option.setName('reason').setDescription('Reason for banning')),
new SlashCommandBuilder()
.setName('timeout')
.setDescription('Timeout a user')
.addUserOption(option => option.setName('user').setDescription('User to timeout').setRequired(true))
.addIntegerOption(option => option.setName('time').setDescription('Timeout duration').setRequired(true))
.addStringOption(option => option.setName('reason').setDescription('Reason for timeout')),
new SlashCommandBuilder()
.setName('creator')
.setDescription('Display creator information')
].map(command => command.toJSON());
const rest = new REST({ version: '10' }).setToken(token);
(async () => {
try {
console.log('Started refreshing application (/) commands.');
await rest.put(Routes.applicationCommands(clientId), {
body: commands,
});
console.log('Successfully reloaded application (/) commands.');
} catch (error) {
console.error(error);
}
})();
const client = new Client({ intents: [GatewayIntentBits.Guilds, GatewayIntentBits.GuildMessages] });
client.on('ready', () => {
client.user.setPresence({
status: 'idle',
activities: [{ name: 'Your Bot Status', type: 'PLAYING' }],
});
console.log(`Logged in as ${client.user.tag}!`);
});
client.on('interactionCreate', async (interaction) => {
const { commandName, options } = interaction;
// Handle interactions based on command name
if (commandName === 'gwwin') {
const username = options.getUser('username');
// Implement logic for '/gwwin' command
} else if (commandName === 'aboutus') {
const aboutEmbed = new MessageEmbed()
.setTitle('About Us')
.setDescription('Put your about us information here.')
.setColor('#00ff00');
await interaction.reply({ embeds: [aboutEmbed] });
} else if (commandName === 'rules') {
const rulesEmbed = new MessageEmbed()
.setTitle('Rules')
.setDescription('Put your rules here.')
.setColor('#ff0000');
await interaction.reply({ embeds: [rulesEmbed] });
} else if (commandName === 'ban') {
const user = options.getUser('user');
const reason = options.getString('reason') || 'No reason provided';
// Implement ban command logic here using 'user' and 'reason'
} else if (commandName === 'timeout') {
const user = options.getUser('user');
const time = options.getInteger('time');
const reason = options.getString('reason') || 'No reason provided';
// Implement timeout command logic here using 'user', 'time', and 'reason'
} else if (commandName === 'creator') {
const creatorEmbed = new MessageEmbed()
.setTitle('Creator')
.setDescription('Garv._Jangre is the creator of this bot.')
.setColor('#0000ff');
await interaction.reply({ embeds: [creatorEmbed] });
}
});
client.login(token);
and yah prefix is also not working
please help meeeee
I hope this message finds you well. I’m currently working on a Discord bot but have encountered an issue with setting up slash commands. I’ve been receiving the following error:
“DiscordAPIError[20012]: You are not authorized to perform this action on this application.”
I’ve ensured that the bot has the necessary permissions and verified the bot token, yet the issue persists. I would greatly appreciate your guidance or any suggestions you might have to fix this problem.
Any insights or advice on resolving this error would be incredibly helpful. Thank you very much for your time and assistance.
Best regards,
Garv Jangra
How can I create loop like this in JS?
for (var ch = 'a'; ch <= 'z'; ch++) {
console.log(ch)
}
I’ve built a network of 7 rpi zeros, syncing to a central media server running on a rpi3b+.
Currently, the whole system runs shell scripts, and I need to SSH into them manually if I want to do any action.
I want to code a dashboard for status monitoring (list devices on the network, display sync progress, …) and to have a user-friendly, possibly remote way to fire commands (eg.: reboot all connected devices, list files on the device, simple interface for file uploads, etc) via a web interface. Doing it on the web is important: I’d like myself and other users to be able to simply visit a link, log in, and make the changes from their phones, tablets, or laptops too.
I’m looking for some pointers on how to achieve this.
I’m familiar with React, NodeJS, Express, and Javascript, so would appreciate solutions based on this stack, but I’d be up for getting into something new, if necessary.
What would you recommend to look into? Are there any libraries tackling this use case? Have you done anything similar?
Any tips are welcome! Thanks in advance 🙂
I’ve tried using SSH2, then a Node server with Express and Websockets via Socket.Io (using Express’s exec method) but I’ve hit walls when it came to certain commands (eg.: could not CD into folders, could not sudo, lack of proper terminal output mirroring). I could not find a suitable solution/library/tutorial on StackOverflow or other forums.
I’m currently facing an issue with the FlatList component in my React Native project. The list is not rendering dynamically when the data changes. Here’s a simplified version of my code:
import React, { useState } from 'react';
import { View, FlatList, Text, Button } from 'react-native';
export default function MyComponent() {
const [data, setData] = useState([1, 2, 3]);
const handleAddItem = () => {
const newItem = Math.floor(Math.random() * 100);
setData([...data, newItem]);
};
return (
<View>
<FlatList
data={data}
keyExtractor={(item) => item.toString()}
renderItem={({ item }) => (
<View>
<Text>{item}</Text>
</View>
)}
/>
<Button title="Add Item" onPress={handleAddItem} />
</View>
);
}Despite using the setData function to update the state with a new item, the FlatList does not render the added item. The console.log inside the handleAddItem function shows that the state is updating correctly.
Can someone please provide guidance on how to troubleshoot and resolve this problem with the FlatList not rendering dynamically when the data changes? Any insights or suggestions would be appreciated. Thank you!
In Safari browser, frequent setting of Blob to the video’s srcObject may lead to the accumulation of loadedmetadata time due to browser caching mechanism (which doesn’t occur in private mode). How can the browser be prompted to clear Blob cache promptly?
I have tried something similar to URL.revokeObjectURL, but it didn’t work. Only after manually clearing browser data in the phone settings did the loadedmetadata time for the video return to normal.
i want to see my account bitcoin address via javascript, i use the following code, but it only displays [ ‘error’, 10112, ‘signature: invalid’ ] when run, I followed the code from the source docs
const CryptoJS = require('crypto-js') // Standard JavaScript cryptography library
const fetch = require('node-fetch') // "Fetch" HTTP req library
const apiKey = 'xxxxxxxxx'
const apiSecret = 'xxxxxxxxxx'
const apiPath = 'v2/auth/w/deposit/address'// Example path
fetch(`https://api.bitfinex.com/${apiPath}`, {
method: 'POST',
body: JSON.stringify({
wallet: 'trading',
method: 'bitcoin',
op_renew: 0 // 1 for new address
}),
headers: {
'Content-Type': 'application/json',
'bfx-apikey': apiKey
}
})
.then(res => res.json())
.then(json => console.log(json))
.catch(err => {
console.log(err)
})