I am trying to capture an image from WebCam and show its file name on the next page when the user clicks the Upload button.
Currently, the snap function is taking the image and working fine. But When the users click on the Upload button, nothing happened.
Expected Output: Click on the Upload button will open a New Page (Test2) and show the file name.
My Code
app.py
#app.route('/Test', methods=['GET','POST'])
def Test():
if request.method == 'POST':
return render_template('Test2.html',data=request.form['file'])
return render_template('Test.html')
if __name__ == '__main__':
app.run(debug=True)
Test.html
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>WebcamJS Test Page</title>
<style type="text/css">
body { font-family: Helvetica, sans-serif; }
h2, h3 { margin-top:0; }
form { margin-top: 15px; }
form > input { margin-right: 15px; }
#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
</style>
</head>
<body>
<div id="results">Your captured image will appear here...</div>
<h1>WebcamJS Test Page</h1>
<h3>Demonstrates simple 320x240 capture & display</h3>
<div id="my_camera"></div>
<!-- First, include the Webcam.js JavaScript Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcamjs/1.0.26/webcam.min.js" integrity="sha512-dQIiHSl2hr3NWKKLycPndtpbh5iaHLo6MwrXm7F0FM5e+kL2U16oE9uIwPHUl6fQBeCthiEuV/rzP3MiAB8Vfw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<form method="POST" enctype="multipart/form-data" id="myForm">
<table>
<tr>
<td>Name/EmailId</td>
<td>: <input type="text" name="userID"></td>
</tr>
<tr>
<td><input type="button" value="Upload" onclick="upload()"></td>
</tr>
</table>
</form>
<div id="my_camera"></div>
<input type="button" onclick="snap()" value="Snap">
<div id="results"></div>
</body>
<script>
function ShowCam() {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 100
});
Webcam.attach('#my_camera');
}
window.onload= ShowCam;
function snap() {
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<img id="image" src="'+data_uri+'"/>';
} );
}
function upload() {
console.log("Uploading...")
var image = document.getElementById('image').src;
var form = document.getElementById('myForm');
var formData = new FormData(form);
formData.append("file", image);
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/Test");
// check when state changes,
xmlhttp.onreadystatechange = function() {
}
xmlhttp.send(formData);
console.log(formData);
console.log(formData.get('file'));
console.log(formData.get('userID'));
}
</script>
Test2.html
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p> {{data}}
</body>
</html>
Related
Hello!
I have the following problem.
I have programmed a Qr Code generator.
Now when I click on the Button "Click Me!" a new QR-Code should be generated and replace the old one.
Unfortunately it doesn't replace the old Qrcode but puts the new one under it.
here is my HTML and JS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initialscale=1">
</head>
<body>
<select name= "Bauart" id= "qr-data">
<option value="1">test</option>
<option value="ad">test 2</option>
</select>
<button onclick="myFunction()">Click me</button>
<div id="qrcode"></div>
<br>
</body>
<script src="qrcode.min.js"></script>
<script src="javascript.js"></script>
</html>
and here is the JS
function myFunction() {
var qrdata = document.getElementById('qr-data').value;
var qrcode = new QRCode(document.getElementById('qrcode'));
qrcode.makeCode(qrdata);
}
<style>
/* CSS comes here */
body {
padding:20px;
}
input {
padding:5px;
background-color:transparent;
border:none;
border-bottom:solid 4px #8c52ff;
width:250px;
font-size:16px;
}
.qr-btn {
background-color:#8c52ff;
padding:8px;
color:white;
cursor:pointer;
}
</style>
<h3>QR Code Generator</h3>
<div><input id="qr-text" type="text" placeholder="Text to generate QR code"></div>
<br>
<div>
<button class="qr-btn" onclick="generateQRCode()">Create QR Code</button>
</div>
<br>
<p id="qr-result">This is deault QR code:</p>
<canvas id="qr-code"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<script>
/* JS comes here */
var qr;
(function() {
qr = new QRious({
element: document.getElementById('qr-code'),
size: 200,
value: 'https://setools.xyz'
});
})();
function generateQRCode() {
var qrtext = document.getElementById("qr-text").value;
document.getElementById("qr-result").innerHTML = "QR code for " + qrtext +":";
alert(qrtext);
qr.set({
foreground: 'black',
size: 200,
value: qrtext
});
}
</script>
Here is the full set of code
I have written a javascript function inside script tag of html file...
<!DOCTYPE html>
<html>
<head>
<title> Sample Application </title>
</head>
<body>
<h1 style="text-align: left">Test</h1>
<div id="conversation" style="width: 600px; height: 400px; border: 1px solid #ccc; background-color: #eee; padding: 4px; overflow: scroll"></div>
<form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
<input type="text" id="wisdom" size="80" value="" placeholder="Type your issue">
</form>
<script type="text/javascript">
// set the focus to the input box
document.getElementById("wisdom").focus();
function pushChat() {
// if there is text to be sent...
var wisdomText = document.getElementById('wisdom');
if (wisdomText && wisdomText.value && wisdomText.value.trim().length > 0) {
// disable input to show we're sending it
var wisdom = wisdomText.value.trim();
wisdomText.value = '';
wisdomText.locked = false;
showRequest(wisdom);
// send it to the Lex runtime
botaction(wisdom);
}
// we always cancel form submission
return false;
}
function botaction(action){
console.log("action: " + JSON.stringify(action));
switch (action.intentName) {
case "details":
var Id = action.userid;
var arguments = [Id];
verify(arguments);
break;
default:
console.log('No action found.');
console.log('executing the default action based on response');
break;
}
}
function verify(arguments){
}
</script>
</body>
</html>
i need to move the function verify(arguments) to an external js file.i have to move that because i am calling a nodejs child process which requires a module to be included.
How can i move the function to a external js file and subsequently call verify function from html file.
Make three files as such. It will solve your issue.
index.html
<!DOCTYPE html>
<html>
<head>
<title> Sample Application </title>
<!-- insert these two lines -->
<script type="text/javascript" src="verify.js" ></script>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
<h1 style="text-align: left">Test</h1>
<div id="conversation" style="width: 600px; height: 400px; border: 1px solid #ccc; background-color: #eee; padding: 4px; overflow: scroll">
</div>
<form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
<input type="text" id="wisdom" size="80" value="" placeholder="Type your issue">
</form>
</body>
</html>
verify.js
function verify() {
}
other.js
document.getElementById("wisdom").focus();
function pushChat() {
// if there is text to be sent...
var wisdomText = document.getElementById('wisdom');
if (wisdomText && wisdomText.value && wisdomText.value.trim().length > 0) {
// disable input to show we're sending it
var wisdom = wisdomText.value.trim();
wisdomText.value = '';
wisdomText.locked = false;
showRequest(wisdom);
// send it to the Lex runtime
botaction(wisdom);
}
// we always cancel form submission
return false;
}
function botaction(action){
console.log("action: " + JSON.stringify(action));
switch (action.intentName) {
case "details":
var Id = action.userid;
var arguments = [Id];
verify(arguments);
break;
default:
console.log('No action found.');
console.log('executing the default action based on response');
break;
}
}
You can just copy paste the function to a .js file (ex:verifys.js) and include the .js file in the HTML using
Here is the image of the situation i'm facing
screenshot IMAGE I have 2 buttons which get their values from a html form, i am using node js and sockets for this. when i click a button in one tab button in other tab with same id is getting clicked, but what i want is when i click a button with value 1(example) the button with value 1 should get clicked which is not happening here. i was thinking for a way where i can use button value as button id can anyone help me.
EDIT
I was thinking to use IF/ELSE condition where when we click a button it will search for a button with the value of the clicked button and trigger it
app.js
const io = require('socket.io')(3000);
io.on('connection', function (socket) {
console.log('a client has connected');
socket.on('clicked', function() {
io.emit('clicked');
});
socket.on('clicked1', function() {
io.emit('clicked1');
});
});
console.log('socket.io server started at port 3000');
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfonts-->
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<!--//webfonts-->
</head>
<body bgcolor="#3C4C55">
<script>
if (document.all||document.getElementById){
document.write('<style>.tictac{')
document.write('width:50px;height:30px;padding: 5px; font-weight: bold; cursor: pointer; border-radius: 5px; border: 1px solid #D9D9D9; font-size: 75%;')
document.write('}</style>')
}
</script>
<div class="main">
<center>
</br></br></br></br></br></br>
<form method="get" action="button.html">
<table id="employeeTable" border="15" cellpadding="5" align="center" style="background-color:orange" >
<tr>
<td>
<input type="number" id="sq1" name="sqrone" placeholder="Value" class="tictac" />
</td>
<td>
<input type="number" id="sq2" name="sqrtwo" placeholder="Value" class="tictac" />
</td>
</tr>
</table>
</br></br>
<div class="submit">
<input type="submit" value="Submit" onclick="saveVal()">
</div>
<script type="text/javascript">
function saveVal() {
var squ1 = document.getElementById("sq1").value;
localStorage.setItem("sq1", squ1);
squ1 = localStorage.getItem("sq1");
var squ2 = document.getElementById("sq2").value;
localStorage.setItem("sq2", squ2);
squ2 = localStorage.getItem("sq2");
}
</script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "dskstkcm"
}], "*")
}
</script>
</form>
</center>
</div>
</body>
</html>
button.html
<!doctype html>
<html>
<head>
<title>Testing socket.io</title>
<style>.tictac{
width:100px;height:100px;
padding: 10px;
font-weight: bold;
background:#16ed07;
color: #000000;
cursor: pointer;
border-radius: 10px;
border: 1px solid #D9D9D9;
font-size: 150%;
}
</style>
</head>
<body>
<form>
<input type="button" id="sq1" NAME="sqr1" class="tictac" value="Send!" onClick="onClickHandler(this)"/>
<input type="button" id="sq2" NAME="sqr2" class="tictac" value="Get!" onClick="onClickHandler(this)"/>
</form>
<script type="text/javascript">
var square1 = document.getElementById("sq1");
square1.value = localStorage.getItem("sq1");
var square2 = document.getElementById("sq2");
square2.value = localStorage.getItem("sq2");
</script>
<h2 id="alert"> waiting...</h2>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/socket.io.min.js"></script>
<script>
var socket = io("http://localhost:3000");
socket.on('connect', function() {
document.getElementById("sq1").addEventListener("click", function () {
socket.emit("clicked");
});
document.getElementById("sq2").addEventListener("click", function () {
socket.emit("clicked1");
});
});
socket.on('clicked', function() {
var button = document.getElementById('sq1');
console.log('clicked');
document.getElementById("alert").innerHTML = "1 clicked";
onClickHandler(sq1);
});
socket.on('clicked1', function() {
var button = document.getElementById('sq2');
console.log('clicked1');
document.getElementById("alert").innerHTML = "2 clicked";
onClickHandler(sq2);
});
</script>
<script type="text/javascript">
function onClickHandler(elem) {
elem.style.background = 'red';
elem.style.color = 'black';
}
</script>
</body>
</html>
What you probably want to do is extract information on what button was clicked and then emit that data with socket.io. The second parameter of socket.emit can be an object that will be passed to listeners of socket.on('event', function(data){ /* data passed from socket.emit */ }). You will probably need to re-emit this data from the server in the same way.
Client example: https://jsfiddle.net/wcmtk5mj/
Make sure you remove the onClicked simulation when utilizing socket.emit and socket.on in the example above.
I have an iframe whose src file (given below) contains a form which uses _self target. The action returns a text string. After it has been submitted, I would like to reload the iframe with the original content if the mouse leaves the form or user types ESC.
I can't get the iframe to reset itself. Any help appreciated. This is the 'master' html file:
<html>
<head>
<title>iframe test</title>
<script type="text/javascript" src="../jquery-1.11.1.js"></script>
<script>
function foo(e){
$('iframe.popup').css('display','block');
$(e.target).css('z-index','10');
}
$(document).ready(function(){
var popup = $(document).find(".popup");
popup[0].origSrc = popup[0].src; // save orignal content of iframe
$(document).keyup(function(e) {
if ( //e.keyCode == 13 || // enter
e.keyCode == 27) { // esc
$(document).find(".popup").hide();
}
});
$(".floatbar").click(function(e){
if (e.target.className == "floatbar"){
e.preventDefault();
}
else {
return true;
}
popup = $(this).find(".popup");
popup.empty();
popup.load(popup[0].origSrc);
popup.show();//fadeIn("slow");
popup.mouseleave(function(e){
//$(this).fadeOut("fast");
$(this).hide();
$(this).empty();
});
popup.keydown(function(e){
if ( e.keyCode == 27 ){
$(this).hide();
$(this).empty();
}
});
});
});
</script>
<style>
.popup {
position:absolute;
border:1em;
top:0px;
font-size: 2.0em;
display:none;
text-decoration: none;
z-index: 5;
}
iframe.login {
background: darkblue;
width: 300%;
min-height:400px;
}
form {
color: white;
list-style-type: none;
}
</style>
</head>
<body>
<a class="floatbar" href="#">Some text
<iframe class="popup login" src="register.close.html"></iframe>
</a>
</body> </html>
File 'register.close.html':
<html>
<head>
</head>
<body>
<form name="registration" action="../php/register.php" method="post"
accept-charset="utf-8" target="_self" >
<div>
<p><label for="submit"> Hi</label>
<input type="submit" name="submit" id="submit" value="Register" >
</p>
</div>
</form>
</body> </html>
Thanks again.
To reload an iframe I just use the following code.
$("#iframe").attr("src", $("#iframe").attr("src"));
All this does is set the iframe's src attribute to itself. This causes it to reload.
I have been creating a webpage for the last few days and the concept in this webpage is that the user enters a custom text in a textarea.
Then the value of that textarea will be treated with javascript.
if(x=="hello") ,then javascript will have to redirect the user to another webpage but in the same tab and in the same window.
Unfortunately this is not working. I mean javascript redirect the webpage to another url but it's not in the same tab.
PLEASE CAN ANYBODY HELP ME TO FIX MY ERROR?
Note:Please do not give me answers with jQuery because I don't know how to use it
HTML CODE
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="scripting1.js"></script>
<style type"text/css">
.inputtext
{
border:5px double #4f2d05;
width:1378px;
height:690px;
background-color:#000000;
font-family:monospace;
font-size:28px;
color:#00ff00;
resize:none;
}
textarea:focus{outline: 0}
</style>
</head>
<body background="camouflage.jpg">
<table name="table" align="center">
<tr>
<td>
<img src="header.png" />
</td>
</tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr>
</tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr>
</tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
<tr></tr><tr></tr><tr></tr><tr></tr><tr></tr><tr></tr>
<form name="form1">
<tr>
<td>
<div align="center">
<textarea
class="inputtext"
id="myTextarea"
name="text1"
align="center"
placeholder="Enter command here....">
</textarea>
</div>
</td>
</tr>
<tr>
<td>
<input
type="submit"
name="submit"
OnSubmit="myFunction();"
>
</td>
</tr>
</form>
</table>
</body>
</html>
JAVASCRIPT CODE (external .js file and html is linking to it)
function myFunction(){
var x = document.getElementById("myTextarea").value;
if (x == "hello"){
window.open('http://google.com/'
}, '_self);
}
else{alert('ok i knew it'); }
}
Instead of
window.open('http://google.com/','_self);
try
location.href = "http://google.com/";
Your redirect code is wrong, try this:
Edit
Here is the code broken up into separate files. In order to have it run, just put all the files into the root of your site directory. If you move them around or change their names, be sure to change their location in the .html file.
Do note, just because you move the JavaScript to a separate .js file, does not mean that the "hello" is hidden from the user. It just means that they will have to navigate to the separate js page to find it. In order to truly hide it, you'd have to send the user input to a server, validate it, and send a validation response.
redirector.js
function myFunction() {
var x = document.getElementById("myTextarea").value;
if (x === "hello") {
document.location.href = "http://www.google.com";
return false;
}
else {
alert('ok i knew it');
return false;
}
}
index.css
#container{
text-align: center;
}
.inputtext{
border: 5px double #4f2d05;
width: 1378px;
height: 690px;
background-color: #000000;
font-family: monospace;
font-size: 28px;
color: #00ff00;
resize: none;
}
textarea:focus{
outline: 0
}
indexl.html
<!DOCTYPE HTML>
<html>
<head>
<title>Terminal</title>
<link rel="stylesheet" href="index.css">
<script src="redirector.js"></script>
</head>
<body>
<div id="container">
<form name="form1" onsubmit="return myFunction();">
<div>
<textarea
class="inputtext"
id="myTextarea"
name="text1"
placeholder="Enter command here...."></textarea>
</div>
<input
type="submit"
name="submit">
</form>
</div>
</body>
</html>
Try window.location.href instead. window.open opens another window
window.location.href ='http://google.com/'