I am attempting to set up django view for my web application which redirects the page once a file upload is complete, and the status bar showing the upload progress reaches 100%. I have looked around online and attempted to do this in several ways but nothing seems to be working. When I use
render(request, 'template_name')
The application simply returns the plain text of 'template_name' to the console rather than rendering it in the browser window. The original page of the loading bar stays in place after this plain text is returned.
My view looks like the following
def barUpdate(request):
importid = request.GET.get('impid')
response_data = {}
import_status_dict = get_import_status(importid)
status_id = import_status_dict['returnval']
import_status_info = import_status_dict['data_row']
import_status_info = import_status_info[0]
total_rows = import_status_info['total_data_rows']
rows_analyzed = import_status_info['number_of_rows_analyised']
if status_id != 2:
if (rows_analyzed != None and total_rows != None):
percent_complete = int((float(rows_analyzed)/total_rows)*100)
response_data['value'] = percent_complete
if 'percent_complete' in locals():
if response_data['value'] >= 100:
#return render(request,'statustool/completed.html',{'importid':importid,'username':username,'failedparameters':new_failed_param_group,'failedsources':failed_sources,'failedparametergroups':failed_parameters_group,'failedsitegroups':failed_sites_group,'sources':get_sources(), 'failedunits':failed_units})
#Right here I would like to render a new template in my browser, although this is just a dummy template I created for testing
return render(request,'statustool/test.html')
response = HttpResponse(json.dumps(response_data), content_type="application/json")
return response
else:
response_data['value'] = 0
response = HttpResponse(json.dumps(response_data), content_type="application/json")
return response
My dummy template is the following which contains no variables to be passed in from the view
<html>
<head>
test
</head>
<body>
<h1>Finished with data insert!</h1>
</body>
</html>
Is there something I am missing?
If it helps, the current page with the status bar looks like the following and uses a javascript function called status to make GET requests every second to find the upload status for the status bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CACW: Status - Processing</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<!-- Le styles -->
<link href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/boostrap-responsive.css" rel="stylsheet">
<style>
body,html{
padding-top: 30px; /* 60px to make the container go all the way to the bottom of the topbar */
}
.container{
min-height:100%;
}
.footer{
height:40px;
margin-top:-25px;
}
.barcontainer{
width: 100px;
color: blue;
}
progress {
background-color: whiteSmoke;
border-radius: 2px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset;
width: 250px;
height: 20px;
position: relative;
display: block;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/d3examples.js"></script>
<script type="text/javascript">
var importNum = {{importid}}
function status(){
var barProgress = window.setInterval("getProgress(importNum);", 1000);
}
var url=api_server_address+"import/status/update/";
var getProgress = function(importid) {
$.ajax({
url: "https://cacw.luc.edu/status/update/",
data: { impid: importid },
type: "GET",
dataType: "json"
})
.done(function(data){
$('#progressBar').val(data['value']);
console.log(data);
});
}
</script>
</head>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">CACW</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Wiki</li>
<li>Contact</li>
</ul>
<a class="btn btn-primary pull-right" href="/logout">Logout</a>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<body onload="status({{importid}});">
<div class="container">
<div class="page-header">
<p><h2>Import {{ importid }} Status.</h2></p>
{{percent_complete}}
<progress id="progressBar" value={{status}} max="100"></progress>
</div>
</div>
<div class="footer">
<div class="navbar-fixed-bottom">
<hr>
<div class = "container" style="text-align: center">
<p> Help - Information - Contact - Wiki <p>
<img src="{{ STATIC_URL }}img/luc_logo.jpg"></img>
</div>
</div>
</div>
</body>
</html>
Since you are just getting the data in an AJAX call, this will never update your page (from the server side). What you can do is add a flag/object/parameter to your servers response to indicate when the upload is done, then on the client side, redirect to that location when the upload is finished.
Server side:
# code shortened a bit... continues from after line defining percent complete
response_data['value'] = percent_complete if 'percent_complete' in locals() else 0
response_data['done'] = response_data['value'] >= 100
return HttpResponse(json.dumps(response_data), content_type="application/json")
Client Side:
var getProgress = function(importid) {
$.ajax({
url: "https://cacw.luc.edu/status/update/",
data: { impid: importid },
type: "GET",
dataType: "json"
})
.done(function(data) {
if(data['done']) {
// I forget if this is how to do a redirect but it's where you put it
location.href('whatever/your/url/is');
} else {
$('#progressBar').val(data['value']);
console.log(data);
}
});
}
Related
views.py
def pdf(request,songsheetname):
username=request.user.username
printsong=Songsprintform.objects.all().filter(username=username,removesong='0',
addsheetstatus='0',songsheetname=songsheetname,songprintstatus='1')
countsong=Songsprintform.objects.all().filter(username=username,removesong='0',
addsheetstatus='0',songsheetname=songsheetname,songprintstatus='1').count()
songid = []
for i in printsong:
songid.append(i.songprintid)
recentsongs=SongList.objects.all().filter(id__in=songid)
template_path = 'pdf.html'
context = {'recentsongs':recentsongs}
response = HttpResponse(content_type='application/pdf')
response['Content-Disposition'] = 'filename="songs.pdf"'
template = get_template(template_path)
html = template.render(context)
pisa_status = pisa.CreatePDF(html, dest=response)
if pisa_status.err:
return HttpResponse('We had some errors <pre>' + html + '</pre>')
return response
django template
<html>
<head>
<title>Page Title</title>
<meta charset="utf-8">
<style>
div {
column-count: 2;
column-width: 300px;
}
</style>
</head>
<body>
<div class="col-md-6">
{% for i in recentsongs %}
<p class="float-left">{{i.body |linebreaks}}</p>
{% endfor %}
</div>
</div>
</body>
</html>
This is my code...
Here I'm converting my Django template(html) page into pdf. All are Working fine but here my content are in Tamil. But here it displays as an Square box instead of Tamil Letters .whenever my click my button on see that pdf file it always shown as an square box. I don't Know why.Please help me...
Maybe the font you're using in the PDF does not support Tamil characters. Try changing to a font that supports them.
<html>
<head>
<style>
#font-face {
font-family: 'TamilFont';
src: url('/path/to/font.ttf') format('truetype');
}
body {
font-family: 'TamilFont';
}
</style>
</head>
<body>
<div class="col-md-6">
{% for i in recentsongs %}
<p class="float-left">{{i.body |linebreaks}}</p>
{% endfor %}
</div>
</div>
</body>
</html>
In your django python file, embed a font that supports Tamil characters. This way, when you convert it, the PDF software will recognize the font you want to use.
I have a big pandas data frame with a datetime column of when sensor data came in. I want to create an application that plays back this data in “real time”. For example, a user could scrub across a timeline like a video player and it would jump to the correct row and snag data at the correct time intervals, press play, and go through and display the data in the real time it came in.
What is the most efficient way to loop over this data frame and snag the row in real-time playback?
The core of this requirement is to realize the scrolling effect. You can refer to this code. Of course, there are special components on JavaScript to set the timeline. You can add JavaScript tags to your problems and let the front-end engineer help you
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript</title>
<style type="text/css">
*{margin:0;padding:0;}
.box{
width:500px;
height:350px;
margin:100px auto;
border:1px solid #000;
border-radius:20px;
box-shadow:5px 5px 10px #333;
overflow:hidden;
}
h3{
height:50px;
line-height:50px;
text-align:center;
font-size:28px;
color:#fff;
background:green;
}
.content{
height:300px;
overflow:hidden;
}
ul li{
list-style:none;
height:40px;
line-height:40px;
text-align:left;
padding-left:20px;
font-size:18px;
color:#333;
}
li:hover{color:#f91;}
</style>
</head>
<body>
<div class="box">
<h3>datalist</h3>
<div class="content" id="content">
<ul class="msg1" id="msg1">
<li></li>
<li>pandas data1</li>
<li>pandas data2</li>
<li>pandas data3</li>
<li>pandas data4</li>
<li>pandas data5</li>
<li>pandas data6</li>
<li>pandas data7</li>
<li>pandas data8</li>
<li>pandas data9</li>
<li>pandas data10</li>
</ul>
<ul id="msg2"></ul>
</div>
</div>
<script>
var content=document.getElementById("content");
var msg1=document.getElementById("msg1");
var msg2=document.getElementById("msg2");
msg2.innerHTML=msg1.innerHTML;
var timer=1;
content.scrollTop=0;
function myScrollTop(){
if(content.scrollTop>content.scrollHeight){
content.scrollTop=0;
}else{
content.scrollTop++
}
}
upScroll = setInterval('myScrollTop()',timer);
content.onmouseover=function(){
clearInterval(upScroll);
};
content.onmouseout=function(){
upScroll = setInterval('myScrollTop()',timer);
};
</script>
</body>
</html>
I have a Django webapp displaying a form. One of the fields is a FileField, defined via the Django model of the form:
From models.py:
class Document(models.Model):
...
description = models.CharField(max_length=100, default="")
document = models.FileField(upload_to="documents/", max_length=500)
The document file_field has an onchange ajax function attached that will parse the uploaded filename, check some database stuff depending on it, and populate other fields on the html-page with the results.
From forms.py:
class DocumentForm(forms.ModelForm):
class Meta:
model = Document
fields = ("document",)
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
self.fields["customer"] = forms.CharField(initial="", required=True)
self.fields["output_profile"] = forms.CharField(initial="", required=True)
self.fields["document"].widget.attrs[
"onchange"
] = "checkFileFunction(this.value, '/ajax/check_file/')"
From urls.py:
urlpatterns = [
#...
path("ajax/check_file/", views.check_file, name="ajax_check_file")
]
From views.py:
def check_file(request):
full_data = {"my_errors": []}
my_path = pathlib.Path(request.GET.get("file_path").replace("\\", os.sep))
# parse customer ID from file_path
# get data of customer from db
# assemble everything into full_data
return JsonResponse(full_data)
This is the full html page as displayed (copied from Chrome => show source and cleaned up the indentation & whitespaces some):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="/static/css/main.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.css"/>
<script src="/static/js/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.jqueryui.js"></script>
<title>
Convert RES FILE
</title>
</head>
<body>
<header id="header">
<section class="top_menu_left">
Login
<a> | </a>
Logout
<a> | </a>
Edit User
<a> | </a>
Register
</section>
<section class="top_menu_right">
About Us
<a> | </a>
Contact Us
<a> | </a>
Submit an issue
<a> | </a>
Documentation
<a> | </a>
Home
</section>
<div id="topbanner" >
<img src="/static/banner_small.png" alt="" width="100%" height="150"/>
</div>
</header>
<aside id="leftsidebar">
<section class="nav_account">
<h4>Submit a New Request</h3>
<ul>
<li>Get Typing Results</li>
<li>Compare Typing Results</li>
<li>Convert Typing Format</li>
</ul>
</section>
<section class="nav_tools">
<h4>View Your Requests</h3>
<ul>
<li>View My Submissions</li>
</ul>
</section>
</aside>
<section id="main">
<p> </p>
<h2>Convert Typing Results to Format of Choice</h2>
<p> </p>
<h3>Upload a file to our database</h3>
<form method="post" enctype="multipart/form-data">
<input type="hidden" name="csrfmiddlewaretoken" value="qqIKcsAynuE35MQ37dvjF5XeIyfcEbHb3wjtgygGZaigQReNxHLQewoDKcEb8Roj">
<div id="div_id_document" class="form-group">
<label for="id_document" class=" requiredField">
Document<span class="asteriskField">*</span>
</label>
<div class="">
<input type="file" name="document" onchange="checkFileFunction(this.value, '/ajax/check_file/')" class="clearablefileinput form-control-file" required id="id_document">
</div>
</div>
<input type="hidden" id="id_description" name="description" value="">
<p> </p>
<div id="div_id_customer" class="form-group">
<label for="id_customer" class=" requiredField">
Customer<span class="asteriskField">*</span>
</label>
<div class="">
<input type="text" name="customer" readonly class="textinput textInput form-control" required id="id_customer">
</div>
</div>
<div id="div_id_output_profile" class="form-group">
<label for="id_output_profile" class=" requiredField">
Output profile<span class="asteriskField">*</span>
</label>
<div class="">
<input type="text" name="output_profile" readonly class="textinput textInput form-control" required id="id_output_profile">
</div>
</div>
<div class="form-group">
<div id="div_id_notify_me" class="form-check">
<input type="checkbox" name="notify_me" style="width:15px;height:15px;" class="checkboxinput form-check-input" id="id_notify_me">
<label for="id_notify_me" class="form-check-label">
Notify me
</label>
</div>
</div>
<p>
<button class="linkbutton" type="submit" id="submit_btn">Convert</button>
<button id="create-book" class="linkbutton" type="button" name="button" style="float: right;">Create an Output Profile</button>
</p>
</form>
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content" id="form-modal-content">
</div>
</div>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="modal-check-res-file">
<div class="modal-dialog" role="document">
<div class="modal-content" id="form-modal-content-check-res-file">
</div>
</div>
</div>
<script>
var formAjaxSubmit = function(form, modal) {
$(form).on('submit', function (e) {
e.preventDefault();
console.log("submitting...");
var my_val = $("#id_profile_name").val();
var this_val = $("#confirm_save").val();
var res = this_val.split(",");
var this_val_contains_my_val = (res.indexOf(my_val) > -1);
if (this_val_contains_my_val === true) {
var conf = confirm("Are you sure want to overwrite an exsisting profile?");
}else {var conf = true;};
if (conf === true) {
$.ajax({
type: $(this).attr('method'),
url: "/new_customer_profile/",
data: $(this).serialize(),
success: function (xhr, ajaxOptions, thrownError) {
if ( $(xhr).find('.invalid-feedback').length > 0 ) {
$(modal).find('.modal-content').html(xhr);
formAjaxSubmit(form, modal);
} else {
$(modal).find('.modal-content').html(xhr);
}
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
};
});
};
$('#create-book').click(function() {
console.log("hhallo");
$('#form-modal-content').load('/new_customer_profile/', function () {
var iam_alive = document.getElementById("modal");
// check if iam_alive is defined, this is required if a session expired -> in that case the modal is lost and it would redirect to an almost empty page.
if (iam_alive) {
$('#modal').modal('toggle');
formAjaxSubmit('#form-modal-body form', '#modal');
}
// if not iam_alive: redirect to login page
else {
window.location.replace('/accounts/login/');
}
});
});
$('#check-res-file').click(function() {
console.log("hhallo hier unten jetzt");
$('#form-modal-content-check-res-file').load('/check_res_file/', function () {
$('#modal-check-res-file').modal('toggle');
//formAjaxSubmit('#form-modal-body form', '#modal');
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
var mycell = document.getElementById("create-book");
mycell.style.display = "none";
});
</script>
<script>
function checkFileFunction(myfile, url) {
$.ajax({ // initialize an AJAX request
url: url, // set the url of the request (= localhost:8000/hr/ajax/load-cities/)
data: {"file_path": myfile},
dataType: 'json',
success: function (x) {
if (x.my_errors.length == 0) {
$('#id_customer').val(x.customer_name);
$('#id_output_profile').val(x.customer_profile);
$('#id_description').val(x.customer_file);
}else{
$('#id_customer').val("");
$('#id_customer').val("");
$('#id_output_profile').val("");
alert(x.my_errors);
var showme = function myFunction() {
var mycell = document.getElementById("create-book");
mycell.style.display = "block";
};
showme();
}
},
});
}
</script>
</section>
</body>
</html>
Now, I'm trying to test this with pytest via Selenium.
I can send the file path to the field via send_keys(). However, the onchange event seems not to be triggered. (It does work fine when I select the file manually.)
file_field = self.driver.find_element(By.NAME, "document")
file_field.clear()
file_field.send_keys(str(path/to/myfile))
This will register the file fine and it will be uploaded, but the onchange function never happens.
I have searched and it seems others also have encountered the problem of send_keys not triggering the onchange event. But I have not been able to implement any of the suggested solutions in my Python code. (I have not written the Django code for this app, I'm just the tester and my grasp on Django and javascript is not very good, yet. My native programming language is Python.)
The only solution I understood how to implement was sending a TAB or ENTER afterwards (file_field.send_keys(Keys.TAB)) to change the focus, but that triggers an
selenium.common.exceptions.InvalidArgumentException: Message: invalid argument: File not found
(The file I enterted does exist, the path is fine. I can successfully call .exists() on it.)
Simply selecting a different element after send_keys to shift the focus (i.e., customer_field.click()) does not trigger the onchange function of file_field, either.
How can I trigger an onchange event via Selenium from Python? Or otherwise make sure it is triggered?
First of all, your onchange specification is a bit kludgy and would be preferably specified as:
<input type="file" name="document" onchange="checkFileFunction(this.value, '/ajax/check_file/');">
I am using Selenium with the latest version of Chrome and its ChromeDriver under Windows 10 and have no problems with the onchange event being taken. This can be demonstrated with the following HTML document. If the onchange event is taken, then it should create a new div element with id 'result' that will contain the path of the filename selected:
File test.html
<!doctype html>
<html>
<head>
<title>Test</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<script>
function checkFileFunction(value)
{
const div = document.createElement('div');
div.setAttribute('id', 'result');
const content = document.createTextNode(value);
div.appendChild(content);
document.body.appendChild(div);
}
</script>
</head>
<body>
<input type="file" name="document" onchange="checkFileFunction(this.value);">
</body>
</html>
Next we have this simple Selenium program that sends a file path to the file input element and then waits for up to 3 seconds (with the call to driver.implicitly_wait(3)) for an element with an id value of 'result' to be found on the current page and then prints out the text value. This element will only exist if the onchange event occurs:
from selenium import webdriver
options = webdriver.ChromeOptions()
options.add_argument("headless")
options.add_experimental_option('excludeSwitches', ['enable-logging'])
driver = webdriver.Chrome(options=options)
try:
# Wait up to 3 seconds for an element to appear
driver.implicitly_wait(3)
driver.get('http://localhost/test.html')
file_field = driver.find_element_by_name("document")
file_field.clear()
file_field.send_keys(r'C:\Util\chromedriver_win32.zip')
result = driver.find_element_by_id('result')
print(result.text)
finally:
driver.quit()
Prints:
C:\Util\chromedriver_win32.zip
Now if your driver is different and that is the reason why the onchange event is not occurring and you do not wish to or cannot switch to the lastest ChromeDriver, then you can manually execute the function specified by the onchange argument. In this version of the HTML file, I have not specified the onchange argument to simulate the situation where specifying it has no effect:
File test.html Version 2
<!doctype html>
<html>
<head>
<title>Test</title>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<script>
function checkFileFunction(value)
{
const div = document.createElement('div');
div.setAttribute('id', 'result');
const content = document.createTextNode(value);
div.appendChild(content);
document.body.appendChild(div);
}
</script>
</head>
<body>
<input type="file" name="document">
</body>
</html>
And the new Selenium code:
from selenium import webdriver
options = webdriver.ChromeOptions()
options.add_argument("headless")
options.add_experimental_option('excludeSwitches', ['enable-logging'])
driver = webdriver.Chrome(options=options)
try:
# Wait up to 3 seconds for an element to appear
driver.implicitly_wait(3)
driver.get('http://localhost/test.html')
file_field = driver.find_element_by_name("document")
file_field.clear()
file_path = r'C:\Util\chromedriver_win32.zip'
file_field.send_keys(file_path)
# Force execution of the onchange event function:
driver.execute_script(f"checkFileFunction('{file_path}');")
result = driver.find_element_by_id('result')
print(result.text)
finally:
driver.quit()
Update
I guess you missed <script src="/static/js/jquery.js"> in the <head> section, which appears to be jQuery. But I would have thought that with this script tag being in the <head> section that jQuery would have to be loaded by time Selenium found the file element. So I confess that your getting a javascript error: $ is not defined is somewhat surprising. I can only suggest now that you try loading it manually as follows as detailed in the code below.
I have re-iterated the 3 things you should try in order in the code below moving on to the next approach if the previous one does not work:
Give jQuery time to load before sending keystrokes to eliminate the $ not defined error.
Manually loading jQuery before sending keystrokes.
Manually executing the checkFileFunction.
# 1. Give jQuery time to load before sending keystrokes:
import time
time.sleep(3)
# 2. if the above sleeping does not work,
# remove the above call to sleep and manually load jQuery.
# Specify where the home page would be loaded from:
document_path = '/home/usr/account/public_html' # for example
jQuery_path = document_path = '/static/js/jQuery.js'
with open(jQuery_path, 'r') as f:
jQuery_js = f.read()
self.driver.execute_script(jQuery_js)
# Send keystrokes:
file_path = str(path/to/myfile)
file_field.send_keys(file_path)
# 3. Execute the following if the onchange doesn't fire by itself:
self.driver.execute_script(f"checkFileFunction('{file_path}', '/ajax/check_file/');")
As it turns out, the actual problem was that my manual test were done on the Django app served via python manage.py runserver. This calls some hidden Django magic, including collecting the statics files (css, jQuery.js etc.) under the hood.
I now learned that, in order to serve a Django app on a proper server, one needs to first call python manage.py collectstatic. This will generate a static folder in the parent directory, which contains all the static files and also an explicit jQuery.js.
Then, when Selenium is run, it will find that static folder and the jQuery.js file therein. And then, everything works as expected, including onchange.
So the problem was, that this parent static folder was missing, which I never saw because serving the website via python manage.py runserver doesn't need it.
there is a problem about html5 webcam
this is the error i have
Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
at photo.js:17
photo.js :17
video.src=vendorUrl.createObjectURL(stream);
please check my code
thank you so much!
takeing_photo.html
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Document</title>
<link href="{% static 'css/photo.css' %}" rel="stylesheet">
</head>
<body>
<div class="booth">
<video id="video" width="400" height="300"></video>
Take photo
<canvas id="canvas" width="400" height="300"></canvas>
<img id="photo" src="http://placekitten.com/g/400/300" alt="photo of you">
</div>
<script src="{% static 'js/photo.js' %}"></script>
</body>
</html>
photo.js
(function(){
var video = document.getElementById('video'),
photo = document.getElementById('photo'),
context = canvas.getContext('2d'),
phto = document.getElementById('photo');
vendorUrl = window.URL || window.webkitURL;
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video:true,
audio:false
}, function(stream){
video.src=vendorUrl.createObjectURL(stream);
video.play();
}, function(error){
});
document.getElementById('capture').addEventListener('click', function(){
context.drawImage(video, 0, 0, 400, 300);
photo.setAttribute('src', canvas.toDataURL('image/png'))
});
})();
photo.css
.booth{
width:400px;
background-color: #ccc;
border:10px solid #ddd;
margin:0 auto;
}
.booth-capture-button {
display:block;
margin:10px 0;
padding:10px 20px;
background-color: cornflowerblue;
color: #fff;
text-align: center;
text-decoration: none;
}
#canvas {
display :none;
}
i just want to make webcam properly
and i m wondering there is a way to save the pics into the folder when i put the button "take of you"
please give me advice. thank you so much.
This error is caused because the function createObjectURL is deprecated. You need to update your code to set srcObject to the video object directly.
video.srcObject=stream;
i need to know how to redirect the user in Django views to a certain page after he logs in.
let's say we have 3 types of users and 3 types of pages, i want each type to be directed to a certain page, and in the same time doesn't has the permission to view the other pages.
You can do something like this:
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from django.contrib.auth.decorators import login_required
#login_required
def home(request):
return HttpResponseRedirect(
reverse(custom_view,
args=[request.user.username]))
Here, custom_view should be your user specific view. This is assuming you have:
LOGIN_REDIRECT_URL = '/profiles/home'
and you have configured a urlpattern:
(r'^profiles/home', 'myapp.views.home')
You can add a check for account type and redirect to the correct view.
I wrote some similar functionality recently by sub-classing the LoginView provided by django.contrib.auth. Okay, make your first page from the root directory, call it login:
python manage.py startapp login. Make this file exist <projectRoot>/login/templates/registration/login.html Add this code inside said file, it's more or less cut and pasted from bootstrap's login form, but with some standard django template language to bind to the expected AuthenticationForm fields.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Signin to yourWebsite.com</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body class="text-center">
<form class="form-signin" method="post" action="{% url 'login' %}?next=clockin">
{% csrf_token %}
<img class="mb-4" src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<!--input id="inputEmail" class="form-control" placeholder="Email address" required="True" autofocus="" type="email"-->
{{form.username}}
<label for="id_password" class="sr-only">Password</label>
{{form.password}}
<!--input id="inputPassword" class="form-control" placeholder="Password" required="True" type="password"-->
<div class="checkbox mb-3">
<label>
<input value="remember-me" type="checkbox"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2018</p>
</form>
</body>
</html>
<script>
$("#id_password").attr({
"class":"form-control",
"placeholder":"Password",
"required":"True",
"type":"password",
});
$("#id_username").attr({"class":"form-control",
"placeholder":"Email address",
"required":"True",
"type":"email",
});
</script>
<style>
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
</style>
Next, subclass the built in view and override the redirect part. Inside login.views.py, add this:
from django.contrib.auth.views import LoginView
class CustomLoginview(LoginView):
def get_redirect_url(self):
if self.request.user.groups.filter(name="customer").exists():
return 'invoice'
return super().get_redirect_url()
Finally, update urls.py:
from login.views import CustomLoginview
urlpatterns = [
path('', CustomLoginview.as_view(), name='login'),
I'm telling the login page to go to my next app 'invoice' if the user is a customer, otherwise it goes to the default that I specified in the settings file. Obviously you could expound upon the concept for 3 types of users, which is different than routing based on the names of users, not sure how that got 2 upvotes.