I would like to give the background-image it's own class so I can use the javascript code on it. However, if I remove it from the current div the background-image can not be displayed because it is the background-image for this div.
This is the web2py View:
{{extend 'layout.html'}}
{{for color in bg:}}
<div class="project_video" style="background-image: url('{{=URL('download', args=color.bg_picture)}}')">
{{pass}}
<video class="movie" style="width: 100%;" src="{{=URL('download', args=videos.clip)}}" autoplay poster="{{=URL('static', 'images/tabla_loading_poster.png')}}" onended=videoEnded()></video>
<div class="objects" hidden>
{{for pic in pics_objects:}}
<img src="{{=URL('download', args=pic.pictures)}}"/>
<audio autoplay src="{{=URL('static', 'images/pop.mp3')}}"></audio>
{{pass}}
</div>
</div>
Of course if I use the javascript on the project_video class it will apply to the entire div. not only to the background-image.
This is the web2py Controller for the above View:
def game():
videos = db.vid(request.args(0,cast=int)) or redirect(URL('index'))
bg = db(db.back.owner_id==request.args(0)).select()
pics_objects = db(db.pic.owner_id==request.args(0,cast=int)).select()
return locals()
This is the javascript bellow but, as I mentioned, this will hide the whole div and what I want to hide is the background-image only:
<script>
$(function(){
$('.project_video').hide();
});
$(window).load(function() {
$('.project_video').delay(6000).show(0);
});
</script>
I would appreciate any advise.
Related
I'm new with django and i'm trying to create project, but i got a problem with displaying images. I have a html table with checkboxes and after selecting an object i wish to display image on next page but i can only get broken image.
i can display image this way :
<img src="{{ MEDIA_URL }}bird.png" class="img-responsive" style="width: 60px; height:80px; margin:auto;" />
but then obviously this image will be shown in every object.
but in this way what i use in index page it wont find any images:
<img src="{{ tags.tag_image.url }}" class="img-responsive" style="width: 60px; height:80px; margin:auto;" />
this is my views.py
def selected(request):
tags = request.GET.getlist('selected')
return render(request, 'tag/selected.html', {'all_tags':tags})
if i use:
def selected(request):
tags = request.GET.getlist('selected')
all_tags = Tags.objects.all
return render(request, 'tag/selected.html', {'tags':tags, 'all_tags':all_tags})
then it will find the images but then it will also show all the images even if i select only one.
this has been my problem for awhile now so please if anyone could help me i would really appreciate that
I'll try to interpret your question correctly! but tell me if I'm wrong:
Your Tags model looks something like this:
class Tags(models.Model):
tag_image = models.ImageField(upload_to='/somewhere')
...
If you want to get only the selected few, in your view you'll do something like this:
def selected(request):
tag_ids = request.GET.getlist('selected')
selected_tags = Tags.objects.filter(id__in=tag_ids)
return render(request, 'tag/selected.html', {'tags': selected_tags})
and then, in your template, you want something like this:
{% for tag in tags %}
<!-- tag is a single tag in this context -->
<img src="{{ tag.tag_image.url }}" class="img-responsive" style="width: 60px; height:80px; margin:auto;" />
{% endfor %}
Hope it helps to clarify how Django works...
Until recently I was able to post data to my datastore (Google App Engine). I've now added summernote wysiwyg and now I'm no longer able to add/fetch data from the datastore. Where do you think the problem is?
Main.py
class About(ndb.Model):
text = ndb.StringProperty()
#object
cv = About()
class MainHandler(webapp2.RequestHandler):
def get(self):
title="Exercise"
cv = About.get_or_insert('6684480941064192')
text = cv.text
template_vars={'title': title, 'text':text}
template = JINJA_ENVIRONMENT.get_template('home.html')
self.response.out.write(template.render(template_vars))
def post(self):
cv = About.get_or_insert('6684480941064192')
cv.text=self.request.get("texto")
cv.put()
self.redirect('/')
Html (Material design + bootstrp)
<form class="col s12" form action="/" method="POST" id="frmPost" style="margin-top:25px; margin-bottom:10px;">
<div class="row">
<div class="panel panel-heading" style ="border-radius: 0px; background-color: #e57373;">
<h3 class="panel-title" style ="color: white;">About...</h3>
</div>
<textarea rows="10" id="summernote" form="frmPost" name ="texto" style="margin-top:-10px; display:block;">
{{text}}
</textarea>
</div>
</form>
<script>
$(document).ready(function() {
$('#summernote').summernote({
});
});
</script>
Not sure what summernote is but you probably need to POST your data back to the server somewhere in your HTML/JS. You have the <form> but there doesn't seem to be a way to submit your data back to GAE. You possibly need something like <input type="submit" value="Save Data" /> somewhere inside your <form/>.
i came across get_template_attribute in the flask api and thought of it as a great way to achieve partial page rendering.
so the goal was
create a 2 layer menu-page layout
menu should be static
on click of
menu, page should be shown dynamically without refreshing the entire
page
so i did something like so
LandingPage.html
<html>
<head>
<style>
html,body{
height:100%;
}
</style>
<script type="text/javascript">
function finalConfirmationToStartJob() {
alert('in here')
$.ajax({
type : 'GET',
url : 'home2',
data : ''
});
};
</script></head>
<body>
<table border=1 height=100% width=100%>
<tr><td colspan='2'/></tr>
<tr>
<td width=15%>
<ul>
<li>ABC</li>
<ul>
<li>ABC1</li>
<li>ABC2</li>
<li>ABC3</li>
</ul>
<li>DEF</li>
<li>GHI</li>
<li>JKL</li>
</ul>
</td>
<td>
{% macro hello(name) %}Hello {{ name }}!{% endmacro %}
how are you darlings!!! {{hello()}}
</td>
</tr>
<tr><td colspan='2'/></tr>
</table>
</body>
</html>
Controller
#app.route("/home")
def goto_home():
return render_template('/LandingPage.html')
#app.route("/home2")
def try_out_macro():
print 'hellooo elloo'
hello = get_template_attribute('/LandingPage.html', 'hello')
return hello('World')
However when i do click on the action link, even though the controller actually returns perfect data , the data is not displayed on the screen.
When i hit the url /home2 i do get perfect data, however on click on action link nothing happens on the html
Can someone please help me, i am not sure what i am doing wrong
PS : i got it to work using innr html and div combination, however i would still like to know why the above doesnt work.
I'm working on a django app. I have a page that displays a log of items, and each item has a "Print label" link. At the moment, clicking the link displays the label for that particular item in a popup screen, but does not send the label to a printer. The view function behind the "Print label" link is shown below:
#login_required
def print_label(request, id):
s = Item.objects.get(pk = id)
return render_to_response('templates/label.html', {'s': s}, context_instance=RequestContext(request))
The HTML for the label is shown below:
{% load humanize %}
<head>
<style type="text/css">
div{
min-width: 350px;
max-width: 350px;
text-align: center;
}
body{
font-family: Arial;
width: 370px;
height: 560px;
text-align: center;
}
</style>
</head>
<body>
<div id="labelHeader">
<img src="{{ STATIC_URL }}img/label-header.png" width="350px">
</div>
<hr/>
<p></p>
<div id="destinationAddress">
<span style="font-size: xx-large; font-weight: bold;">{{ s.item_number }}</span>
</p>
DESTINATION:
<br/>
<strong>{{s.full_name}}</strong><br/>
<strong>{{ s.address }}</strong><br/>
<strong>{{s.city}}, {{s.state}}</strong><br/>
<strong>Tel: {{s.telephone}}</strong>
</div>
<p></p>
<hr/>
<div id="labelfooter">
<img src="{{ STATIC_URL }}img/label-footer.png" width="350px">
</div>
</body>
My question is, how can I also send the label displayed to a printer in the same function? I researched and found some libraries (like xhtml2pdf, webkit2png, pdfcrowd, etc), but they'll create a pdf or image file of the label and I'll have to send it to a printer. Is it possible to send straight to a printer without creating a pdf copy of the label? If so, please show me how to achieve this.
Your answers and suggestions are highly welcome. Thank you.
Presumably, as this is a Django app, it's the client's printer that you need to use. The only way to do this is to tell the user's browser to print. You will need to use Javascript for this: window.print().
I’m still relatively new to Flask, and a bit of a web noob in general, but I’ve had some good results so far. Right now I’ve got a form in which users enter a query, which is given to a function that can take anywhere between 5 and 30 seconds to return a result (looking up data with the Freebase API).
The problem is that I can’t let the user know that their query is loading during this time, as the results page only loads once the function finishes its work. Is there a way I can display a loading message while that's going on? I found some Javascript that could display a loading message while page elements are still loading, but my waiting period happens before ‘render_template’.
I knocked together some example code, just to demonstrate my situation:
Python:
from flask import Flask
from flask import request
from flask import render_template
import time
app = Flask(__name__)
def long_load(typeback):
time.sleep(5) #just simulating the waiting period
return "You typed: %s" % typeback
#app.route('/')
def home():
return render_template("index.html")
#app.route('/', methods=['POST'])
def form(display=None):
query = request.form['anything']
outcome = long_load(query)
return render_template("done.html", display=outcome)
if __name__ == '__main__':
#app.debug = True
app.run()
Excerpt from index.html:
<body>
<h3>Type anything:</h3>
<p>
<form action="." method="POST">
<input type="text" name="anything" placeholder="Type anything here">
<input type="submit" name="anything_submit" value="Submit">
</form>
</p>
</body>
Excerpt from done.html:
<body>
<h3>Results:</h3>
<p>
{{ display }}
</p>
</body>
Any help would be greatly appreciated, I hope this example helps.
Add this to your index.html or js file (I'm assuming you have jQuery here, you could use standard javascript of course.):
<script type="text/javascript">// <![CDATA[
function loading(){
$("#loading").show();
$("#content").hide();
}
// ]]></script>
Add this to you html or css file:
div#loading {
width: 35px;
height: 35px;
display: none;
background: url(/static/loadingimage.gif) no-repeat;
cursor: wait;
}
You can get an adequate GIF from http://www.ajaxload.info/. Download and put it into your static folder.
Then change your submission button to call above js function:
<input type="submit" name="anything_submit" value="Submit" onclick="loading();">
and add in a loading and a content div to you base html file:
<body>
<div id="loading"></div>
<div id="content">
<h3>Type anything:</h3>
<p>
<form action="." method="POST">
<input type="text" name="anything" placeholder="Type anything here">
<input type="submit" name="anything_submit" value="Submit" onclick="loading();">
</form>
</p>
</div>
</body>
Now when you click 'Submit', the js function should hide your content and display a loading GIF. This will display until your data is processed and flask loads the new page.
This can be done by using a div that contains a 'loading gif' image. When the submit button is clicked, the div is displayed using javascript.
To implement this, you can take a look at this website: http://web.archive.org/web/20181023063601/http://www.netavatar.co.in/2011/05/31/how-to-show-a-loading-gif-image-while-a-page-loads-using-javascript-and-css/
I found the purely CSS-dependent loader very useful. It does not depend on external resources:
https://www.w3schools.com/howto/howto_css_loader.asp
This is a bit of an old topic, but I needed to deal with this problem today and came with a solution on my own. I'm running a machine learning model that recieves an image input from the user and does some magic.
Basically this is what I did.
On my index.html file, I called a loading function on my "Submit" button passing the filename, because I was going to use it later:
<form method="post" action="/loading/{{filename}}"
enctype="multipart/form-data">
<input type="submit" value="Submit!">
</form>
On Flask, I created a route just to render the loading screen before doing the time consuming task, also passing the filename ahead:
#app.route('/loading/<filename>', methods=['POST'])
def loading_model(filename):
return render_template ("loading.html", filename=filename)
And then, on loading.html, I render my .gif animation and at the end I redirect the page to the time consuming task function:
<!doctype html>
<head>
<link rel= "stylesheet" type= "text/css" href= "{{url_for('static',filename='styles/main.css') }}">
</head>
<div id="preloader">
<div id="status"> </div>
<h1 class="ml13">ANALYZING...</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js> </script>
</div>
<title>Title</title>
<script src="{{url_for('static', filename='main.js')}}"></script>
<script> window.location.replace('/task/{{filename}}'); </script>
And then, final step, back to Flask, call the task function:
#app.route('/task/<filename>', methods=['POST', 'GET'])
def task(filename):
# Do your stuff
return render_template ("results.html")
By doing this, the gif animation will keep playing whilst the function does its job, and then render the results or the next page you want.
You obviously have to edit the css file so that "preloader" and "status" behave like you wish, this is how I used it:
#preloader {
background-color: white;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#status {
background-image: url("lalala.gif");
background-repeat: no-repeat;
width: 800px;
height: 600px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -400px;
margin-left: -400px;
}
It worked out for me.
Brilliant #jka.ne but confusing situation.
I only needed to introduce the loading gif while a button was clicked.
My solution was:
<script type="text/javascript">
function loading(){
$("#loading").show();
window.location.href="../target_html";
}
</script>
Then:
<button type="button" class="xxx" onclick="loading();">Run</button>
Finally:
<div id="loading"></div>