I have an image in my app (android) taken from an URL:
<img src="URL"/>
If i change the image on the server (keeping the same URL), the app does not refresh and keeps always the old image.
How can i force the app to reload/refresh the right image (always on the same URL)?
(the app is written with jquery)
Try appending a querystring to the image url with a random number that you change each time you display the image.
This may for example be done with javascript.
<img id="myImage" src="URL"/>
<script>
var newRandomNumber = (new Date()).valueOf();
var img = document.getElementById('myImage');
img.src += "?random=" + newRandomNumber;
</script>
This script will get the html element with the id myImage and append a querystring parameter which will (hopefully) force a reload of the image.
(NB the value (new Date()).valueOf() in the code is not random but a number that represents the current time)
Hope this helps!
Related
I am using default cache setting which is 24hours.
However, when I refresh the page, I see updated html page every time. Why the file is not cached for 24hrs. I didn't set any invalidation mechanism.
Here's the URL: https://dhr5io29ip73w.cloudfront.net/
html file content:
<html>
<h1>Test</h1>
<p id='myTime'></p>
<script>
var d = new Date().toLocaleTimeString();
document.getElementById('myTime').innerHTML = d;
</script>
</html>
Your page includes JavaScript. The JavaScript code runs in the web browser. That means each time you load the page, your web browser executes those JavaScript statements in the <script> tag which includes updating the page with the current time.
CloudFront just caches the raw HTML of the page. It doesn't cache the rendered result.
I'm building a CMS in flask and I have built a simple wysiwyg editor using execcommands for creating and editing posts, and everything is working. For the insertImage command I'm using an input element to open a directory and choose an image. It works except of course it opens my computers default folder. I want it to open the uploads folder in the static directory where user images are stored in flask. How?
I have searched through flask docs, Python handling files documentation and there's no mention of this. This is a project I'm doing for a class. I'm going above and beyond the requirements for this project but that's how I keep things interesting. I mean it's supposed to be a CMS right. Well, CMS's always have wysiwyg's that open the default "uploads" folder to insert media. Also, when creating my upload functions I found that when uploading files flask needs the absolute path. But when serving them the relative path is necessary.
Any point in the right direction would be greatly appreciated. Thank you.
Here's the structure
<div class="col-md-1 tools">
<a href="#" data-command='insertImage'data-toggle="tooltip" title="Insert Media"><i class='material-icons'>add_photo_alternate</i>
</a>
<div class="editorInputs">
<input type="file" name="media" id="insertImage"
accept="audio/*,video/*,image/*"/>
</div>
</div>
Here's my js script
$('.tools a').mousedown(function(e){
let command = $(this).data('command');
if(command == 'insertImage'){
$(this).next().children('input').trigger('click');
let input = $(this).next().children();
input.on('change', function(e){
let val = $(input).val();
document.execCommand(command, false, val);
})
}
});
Here's how my uploads file is configured in flask
app.config['SITE_UPLOADS'] = 'D:/Courses/Development/Programming/Python/LaunchCode/LC101/unit2/build-a-blog/static/site/uploads/'
app.config['ADMIN_UPLOADS'] = 'D:/Courses/Development/Programming/Python/LaunchCode/LC101/unit2/build-a-blog/static/admin/uploads/'
app.config['ALLOWED_IMAGE_EXTENSIONS'] = ['PNG', 'JPG', 'JPEG', 'SVG', 'GIF']
app.config['DATA_FILES'] = 'D:/Courses/Development/Programming/Python/LaunchCode/LC101/unit2/build-a-blog/data/'
app.config['RELATIVE_PATH_SITE'] = '../static/site/uploads/'
app.config['RELATIVE_PATH_ADMIN'] = '/static/admin/uploads/'
So, I realized that I have to create a function to pull images from the uploads folder, display them, get their URL and pass it to the execcommand. And I did.
First, create the gallery structure with radio buttons to view files. Then put the gallery in a bootstrap modal to fire when the execccomand insertImage link is clicked. Grab the URL of the checked image. pass it to the execcomand function in my js.
On the flask side get a list of all files in the uploads directory with os.listdir(absolute/path/to/directory), returns a python list of the files. Next create file urls and put info in a dict by looping over the filenames in the list and adding the relative path to the filename. Pass the dict to the jinja2 template and populate the gallery.
Finally, execute the js.
Here's my python code and js code.
def get_uploads():
list_images = os.listdir(app.config['ADMIN_UPLOADS'])
images = []
i =0
length = len(list_images)
while i < length:
img = {}
img['name'] = list_images[i]
img['url'] = os.path.join(app.config['RELATIVE_PATH_ADMIN'], list_images[i])
images.append(img)
i+=1
return images
Here's my js.
if(command == 'insertImage'){
$("#uploadsGallery").modal();
$('.ftco-animate').addClass('fadeInUp ftco-animated')
let check = $(this).next().find('input.form-check-input');
let val;
check.on('change', function(e){
val = $(this).val();
});
$('#insertImg').click(function (e) {
r.setStart(editDiv, lastCaretPos);
r.setEnd(editDiv, lastCaretPos);
s.removeAllRanges();
s.addRange(r);
document.execCommand(command, false, val);
check.prop('checked', false);
});
}
In ac I got the images with their score of similarity in list format. I want to display all images in browser using django. How can I display each image in browser?
ac=obj.perform(newdoc.docfile.path)
for (score,resultID) in ac:
result = cv2.imread(path1 + "/" + resultID)
# cv2.imshow("Result", result)
return HttpResponse(cv2.imshow("Result", result))
From cv2.show("Result",result) a popup window is opened and shows the image but when I go through HttpResponse passing the image to the browser it gives the result None. How can I solve the issue?
You cannot do this by one view. I would suggest to have 2 views. first displays single image using StreamResponse. And second view will have a template where it goes trough every image and has <img> tag which src shows to your first view.
Also you cannot use cv2.imshow(), I'm not cv2 expert but as far as I know that function is for displaying your image in window. In your case you need to read the binary data from your cv2 object and pass it to StreamResoponse object as django response.
Other possible way is to have a template where you create img tag for each your case and put binary data to it as follows:
<img src="data:image/png;base64,{{ base64_data_from_cv2_object}}"/>
Here is the situation:
I have a webservice that returns a form.
This form is then used by many other sites in an iFrame element.
I need the form to "wear" the hosting site's background, color, or in other words CSS (but i will settle for background and logo if this is easier).
My webservice and the other sites are not on the same domain.
I have full control over my webservice and i can define general requirements for all sites.
What is the best way to handle this?
There are several ways to accomplish this:
1 - Pass in a stylesheet as a parameter into the iframe:
Pass in a CSS stylesheet as a query parameter in the src attribute of the iframe. This is perhaps the easiest method, and it gives the owner of that stylesheet more control over how the form looks on that person's site.
<body>
<!-- This is the client's website -->
<!-- This is your form -->
<iframe src="http://example.com/form/abc/?css=http://example.com/file/formStyle.css" />
2 - Pass in the color and logo into the iframe:
This is the same basic idea as in the first example, except you're not referencing an external stylesheet:
<iframe
src="http://example.com/form/abc/?color=#AAAAAA&logo=http://example.com/logo.png" />
3 - Use PostMessage:
Another option is to use the postMessage API. With postMessage, you can pass a message from one context to another, across domains. Thus, the client page could pass the background color to the iframe page, and this could be reused to pass other types of information and data as well.
Iframe code:
// register to listen for postMessage events
window.addEventListener("message", changeBackground, false);
// this is the callback handler to process the event
function changeBackground(event)
{
// make sure the code you put on the client's site is secure. You are responsible
// for making sure only YOU have cross domain access to his/her site.
// NOTE: example.org:8080 is the client's site
if (event.origin !== "http://example.org:8080")
return;
// event.data could contain "#AAAAAA" for instance
document.body.style.backgroundColor = event.data;
// do other stuff
}
}
Top Level Client Page:
// pass the string "#AAAAAA" to the iframe page, where the changeBackground
// function will change the color
// targetOrigin is the URL of the client's site
document.getElementById("theIframe").contentWindow.postMessage("#AAAAAA", targetOrigin);
This solution only works in modern browsers, including IE8, FF3.6+, Chrome 13+, Safari 5+, etc. See the Mozilla Developer Center for more information on HTML5 postMessage.
How to pull the CSS parameter from the query string?
Use the gup function in the iframe page to get the value of the CSS parameter:
function gup(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}
Afterwards, you can then use it to create a link CSS tag:
// get url parameter from iframe src:
var cssPath = gup("cssPath");
// create link and append to head
var linkElem = document.createElement("link");
linkElem.setAttribute("href", cssPath);
linkElem.setAttribute("rel","stylesheet");
document.getElementsByTagName("head")[0].appendChild(link);
OR
var color = gup("color");
document.body.setAttribute("style","background-color:" + color);
I have a Timeline App that creates a wall posting via the Graph API. The wall posting indicates that the posting was created by the App, which is fine. However, the link for the app points to the Canvas page: http://apps.facebook.com/app_name_space.
I need the link to point to the timeline version of the App: http://www.facebook.com/pages/PAGENAME/PAGEID?sk=app_APPID
I have tried the "actions" parameter on the Post call, but that didn't solve the problem.
Redirecting the Canvas page
Since you cannot use a 301 redirect for this purpose, here is what I did (asp.net):
1) Create a folder named 'canvas' under the website root.
2) Add a default.aspx file to the folder (can't use a static file as an app landing page)
3) Add the following javascript to the head tag:
<script type="text/javascript">
var parentPageName = '<%=ConfigurationSettings.AppSettings["ParentPageName"]%>';
var appID = '<%=ConfigurationSettings.AppSettings["AppID"]%>';
var myHREF = "http://www.facebook.com/" + parentPageName + "?sk=app_" + appID;
top.location.href = myHREF;
</script>
4) Change your App Canvas url to point to the 'canvas' folder.
That's how it works, the 'via' link goes to your app, not to an arbitrary page the app is installed on, because it could be installed on any Facebook page.
Redirect users that land on the canvas app to the page tab, if that's what you want