I am creating a captcha image in ColdFusion and returning it as a REST feed with Taffy. It is then shown in Vuetify
ColdFusion / Taffy code
<cfscript>
component extends="taffy.core.resource" taffy_uri="/captcha" {
function get() hint="Sends one out" {
var captcha = CreateUUID().right(4) & DayOfWeekAsString(DayOfWeek(now())).left(1).lcase() & "!";
// This is ColdFusion
var tempFile = "ram:///#captcha#.txt";
var myImage = ImageCreateCaptcha(100, 300, captcha, "low");
ImageWriteBase64(myImage, tempFile, "png", true, true);
var myfile = FileRead(tempFile);
FileDelete(tempFile);
return rep({'status' : 'success', 'time' : GetHttpTimeString(now()),
'captcha_hash' : hash(captcha), 'captcha_image' : myFile
});
}
...
</cfscript>
It returns something like this:
{"status":"success","captcha_image":"data:image/png;base64,iVBORw0KG /d67W8EALALKJQAABBYAAAILABAYAEAILAAdr...
Vue
I can display the image via
<img :src="captcha_image" height="100px;">
Vuetify
If I don't use a height, the image does not come out at all
If I use a height like this, it comes out with the wrong aspect ratio.
<v-card-media :src="captcha_image" height="100px"></v-card-media>
Is there a work around? Or is <v-card-media the wrong tool for this?
The reason is that v-card-media use the image as a background image of a div with fixed height.
If you want to keep the aspect ratio. You can use <img /> tag with a width="100%" instead.
<img src="data:image/jpeg;base64,/9j/4AAQ..." width="100%">
demo: https://codepen.io/jacobgoh101/pen/bMrBWx?&editors=101
<div id="app">
<v-app id="inspire">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<img src="data:image/jpeg;base64,/9j/4AAQ..." width="100%">
<v-card-title primary-title>
...
</v-card-title>
<v-card-actions>
...
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-app>
</div>
Related
I wondered if anyone has managed to get Google maps working within a Django project and if so, could they tell me what I may be doing wrong.
In base.html, I have the following scripts at the end of the body in base.html :
<script src="{% static '/js/script.js' %}" ></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script async defer src=https://maps.googleapis.com/maps/api/js?key=”API_KEY”&callback=initMap"></script>
<script src="{% static '/js/maps.js' %}" ></script>
Script.js is working fine and map.js is executing but after map.js runs the div element doesn’t display.
In maps.js, I have:
function initMap() {
var map = new google.maps.Map(document.getElementById("map"), {
//zoom: 3,
zoom: 10,
center: {
lat: 46.619261, lng: -33.134766
}
});
var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var locations = [
{ lat: 40.785091, lng: -73.968285},
{ lat: 41.084045, lng: -73.874245},
{ lat: 40.754932, lng: -73.984016}
];
var markers = locations.map(function(location, i){
return new google.maps.Marker({
position: location,
label: labels[i % labels.length]
});
});
var markerCluster = new MarkerClusterer( map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' } );
}
I do not seem to have any Google API key issues. However I have a div in the index.html with the following element and the map is not being displayed:
<div class="row">
<!-- Map -->
<div id="map" class="col-12"></div>
<div class="col-12 mt-2 request-page">
<h2>Map Will Go Above Here </h2>
</div>
</div>
I can get the map to display if I load static in index.html and place the scripts in index.html but ideally I think I am meant to do this in base.html.
I have not changed settings.py, views.py or urls.py to accommodate Google maps, is that where my error is?
Thanks in advance.
if there is a blank gap create a CSS file and add#map {height:500px;width: 100%;}
do not forget to link it to html.
This is probably because the div element #map does not have a defined height. Try adding style="height: 300px" to it.
I am using a loading screen with a spinner that is displayed before all contents in the window have loaded. It works well on all pages and the window loads very fast on webpages with less content but on one of my pages, I am loading many iframes that embed youtube videos. $(window).on('load', function(){}); doesn't trigger until all contents have loaded, including iframes. That means that loading takes a long time and the loading screen with the spinner is shown long after the browser has finished loading the HTML, CSS, JS, and all images. I want to use skeleton loading for the iframes after the HTML, CSS, JS, and all images have loaded to cut down on perceived load time. Is there a way to tell that the rest of the window has fully loaded but the iframes are still loading? This is what I am currently doing to remove the loading screen with the spinner:
<html>
<head>
</head>
<div class="spinner-wrapper">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
<body>
{% for video in range(videos|length) %}
<iframe class="yvideo" src="{{ "https://www.youtube.com/embed/%s" + videos[video]}.get("url") }}"></iframe>
{% endfor %}
<script type=module src="{{ url_for('static', filename='js/video.js') }}"></script>
</body>
</html>
videos.js:
$(window).on('load', function() {
preloaderFadeOutTime = 300;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
There can be multiple ways to solve this issue:
One simple approach can be to keep source of iframes empty initially and dynamically set source of iframes upon window.load.
Here sample code:
<script>
$(window).on('load', function() {
document.getElementById('myIframe').src = "your URL";
document.getElementById('myIframe2').src = "your URL";
preloaderFadeOutTime = 300;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
</script>
<iframe id="myIframe" src="" ></iframe>
<iframe id="myIframe2" src="" ></iframe>
EDIT:
If you cannot change the video.js file but can create your own js files which can interact with html on the page then do below in your custom js file:
//your external js
// first get collection of your iframes by class
var listOfIframes = document.getElementsByClassName("yvideo");
for (let item of listOfIframes) {
item.src = ""; // set them to empty.
}
window.addEventListener("load", function() {
//once page is loaded then populate the source with your json file.
for (let item of listOfIframes) {
item.src = "URLs from JSON";
}
});
Second approach:
Instead of calling hidePreloader() only at window.load. You can also check for the rest of the items in your page that if they are loaded or not. Once they are loaded, then you can use call hidePreloader()
I'm making my first webapp using python and flask, it is a simple calculator but I'm currently stuck trying to use more than one button. At the beginning it was abe just to show a graph, here is the python code:
class FormulaForm(Form):
formula = StringField('formula')
graph = SubmitField('graph')
#app.route('/')
def calculate():
form = FormulaForm()
formula = request.args.get('formula','')
points = mp.make_points(formula,0,7)
comp = make_plot(points[0],points[1])
return render_template('index.html',the_script=comp[0],the_div=comp[1],form=form)
And here is the html code:
<form method="GET" action="">
<br />
{{ form.formula }}
<br />
{{ form.graph }}
</form>
So far so good. But I don't know how to add more functionality, for example I would like to add a button that shows the formula evaluated at some value x. I tried adding an extra inputfield and an extra button in the form, something like this:
class FormFormula(Form):
formula = StringField('formula')
graph = SubmitField('graph')
evaluate = StringField('evaluate_at')
evaluate = SubmitField('evaluate')
But then I don't know how to make the view handle two different actions.
I think I found a solution here but it only works when the method is "POST" and that makes the page reload which I don't want. So, is there a way to use multiple buttons in the same view?
#app.route('/start' ,methods=['POST'])
def stop():
"process done here"
return Something
Your app.py like this and and html file this
<script src="static/js/ajax.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#start").click(function(event){
$.post(
"/start",
function(data) {
window.alert(data);
}
);
});
});
</script>
<button id ="start" type="button" value = "Load Data">Start</button>
I am putting together a Cycle2-based carousel where, essentially, every other image should be a black and white image. So, on first load it would be something like this:
IMAGE A = B&W
IMAGE B = Color
IMAGE C = B&W
IMAGE D = NOT SHOWN
Once the slideshow advances, it would be something like this:
IMAGE A = NOT SHOWN
IMAGE B = B&W
IMAGE C = Color
IMAGE D = B&W
I discovered Gianluca Guarini's jQuery.BlackAndWhite plugin which handles the black and white conversion by adding the class .bwWrapper. If I use the scrollHorz parameter, the two work nicely together, but not when using carousel. The carousel runs as expected, but BlackAndWhite isn't coming into play.
My code is below. The only difference between the two blocks is one is in a DIV. My guess is jQuery.BlackAndWhite runs on (window).load and Cycle2 carousel enters the picture after that?
Any thoughts on how to get these to cooperate?
<h3>Cycle2</h3>
<div id="slideshow">
<img src="/assets/images/img01.jpg" height="200" alt="test image">
<img src="/assets/images/img02.jpg" height="200" alt="test image">
<img src="/assets/images/img03.jpg" height="200" alt="test image">
<img src="/assets/images/img04.jpg" height="200" alt="test image">
<img src="/assets/images/img05.jpg" height="200" alt="test image">
</div>
<div class="center">
Prev
Next
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/assets/js/jquery.cycle2.js"></script>
<script src="/assets/js/jquery.cycle2.carousel.min.js"></script>
<script src="/assets/js/jquery.BlackAndWhite.js"></script>
<script>
$(window).load(function() {
$('#slideshow').cycle({
fx: 'carousel',
speed: '1000',
slides: '> a',
next: '#next',
prev: '#prev'
});
$('.bwWrapper').BlackAndWhite({
hoverEffect: false,
invertHoverEffect: false
});
});
</script>
You can just use CSS to make the images grayscale. Here is a cross-browser compatible style that I've used in the past. The first filter is for Firefox, second for IE, and third for the other modern browsers.
.bwWrapper img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
I want to display a progress bar (or loading icon) while a image gallery is loading on django template.
Image gallery is having a div in the template and for that div only the progress bar should appear.
Please refer to http://www.openstudio.fr/jquery/ as I am using this gallery
Your best bet is probably to do this through JavaScript instead of trying to do much of anything in Django. You would have Django populate your JavaScript, and then have the JavaScript do your progress bar. I'll use jQuery UI for the progressbar.
Django Template:
var portfolio = {
image_count = {{ images|length }},
images = [
{% for image in images %}{
'src': "{{ image.url }}",
'title': "{{ image.title }}"
}{% if not forloop.last %},{% endif %}{% endfor %}
]
};
JavaScript:
<script>
// This helps us keep track of the progress:
var count = 0;
var updateProgress = function() {
count++;
// Calculate the % we are through the images.
progress = parseInt((count / portfolio.image_count) * 100);
// Update the progressbar.
$("#progressbar").progressbar("value", progress);
// Check if we're done.
if (progress >= 100) {
$("#progressbar").hide();
// Fire up the multimedia portfolio, per the OP.
$('#multimedia-portfolio').multimedia_portfolio({width: 800});
$("#portfolio-cont").show();
}
}
$(function() {
// Initialize the progressbar at 0%.
$("#progressbar").progressbar({value:0});
// Hide the portfolio for now.
$('#portfolio-cont').hide();
if (portfolio) {
// Loop over the images.
for (var i=0; i<portfolio.image_count; i++) {
var image = portfolio.images[i];
// Create an image, a link, an li.
// Once the image is loaded, will call updateProgress.
var img = $('<img>').attr('src', image.src)
.attr('title', image.title)
.load(updateProgress);
var a = $("<a>").attr("href", image.src)
.addClass("thickbox");
$(a).append(img);
var li = $("<li>").append(a);
// Append the li to the ul.
$('#multimedia-portfolio').append(li);
}
}
});
</script>
This is also assuming that you have this(-ish) HTML:
<div id="progressbar"></div>
<div id="portfolio-cont"><ul id="multimedia-portfolio"></ul></div>
Hope that helps you at least get some direction.