I've created a couple of shared templates (.xdp) which will be shared among several clients. Obviously, each client has their own logo and I'd like to set the logo upon form generation.
I've managed to change the logo dynamically although I'm not sure if my approach is good.
In the xml datasource I've got this element: <ClientID>SomeNumber</ClientId>
In the form itself I set the image href with this javascript code:
SomeHiddenTextField::calculate
HeaderLogo.value.image.href = $record.ClientID + "_logo.jpg";
I've got the logos stored on the server in the same folder as the shared templates.
Is this an alright approach to load logos dynamically?
I've been trying to achieve the same dynamic behaviour with each client's footer fragment, but I have been unable to figure out how to load these on demand. I could make each footer fragment in to an image but I'd like to avoid it if possible.
I know generally for loading images dynamically I had to do the following:
Create a SOAP service that returns a byte[] with the image data (base64)
Call the service from LiveCycle:
var cURL = "http://host/path/MyService?wsdl"
var oService = SOAP.connect(cURL);
try {
var cText = "";
var myRequest;
var cSOAPAction;
myRequest = {
myMethod: {
Param1:value
};
cSOAPAction= "http://mynamespace/myMethod";
}
var myNamespace = "http://mynamespace";
var oResults = SOAP.request ({
cURL: cURL,
oRequest: oGetNameByIdRequest,
cAction: cSOAPAction,
bEncoded: false, // If false then document/literal encoding will be used.
cNamespace: myNamespace,
cResponseStyle: SOAPMessageStyle.Message
});
HeaderLogo.rawValue = oResults[0].soapValue[0].soapValue;
...
Related
I was trying Azure maps Symbol feature. I wanted to add a custom image as symbol.
When i used path of local image, it was not working.
"All resources, such as icon images, must be loaded into the WebGL context."
Please help me how to make local image to be loaded as webGL context.
You must add your image to the maps image sprite before you the symbol layer can use it. You would pass the URL and a unique name for the image into the map.imageSprite.add function. This is a Promise that you have to wait for as the image is loaded asynchronously. Once loaded, you can then set the image option of the symbol layers iconOptions to the unique name of the image.
Some additional code samples can be found here: https://samples.azuremaps.com/?sample=custom-symbol-image-icon
Update:
Here is a code block show how to add an image to the maps image sprite (WebGL context).
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Load the custom image icon into the map resources.
map.imageSprite.add('my-custom-icon', '/images/icons/showers.png').then(function () {
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: 'my-custom-icon'
}
}));
});
});
If you have multiple images you want to use, you can create an array of the imade add promises, then use Promise.all. Here is a good code sample: https://samples.azuremaps.com/?sample=data-driven-symbol-icons And here is a simply code block example:
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create an array of custom icon promises to load into the map.
var iconPromises = [
map.imageSprite.add('gas_station_icon', '/images/icons/gas_station_pin.png'),
map.imageSprite.add('grocery_store_icon', '/images/icons/grocery_cart_pin.png'),
map.imageSprite.add('restaurant_icon', '/images/icons/restaurant_pin.png'),
map.imageSprite.add('school_icon', '/images/icons/school_pin.png'),
];
//Load all the custom image icons into the map resources.
Promise.all(iconPromises).then(function () {
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Use a data driven expression based on properties in the features to determine which image to use for each feature.
image: [
'match',
//In this example each feature has a "EntityType" property that we use to select the appropriate icon.
['get', 'EntityType'],
//For each entity type, specify the icon name to use.
'Gas Station', 'gas_station_icon',
'Grocery Store', 'grocery_store_icon',
'Restaurant', 'restaurant_icon',
'School', 'school_icon',
//Default fallback icon.
'marker-blue'
]
}
}));
});
Can you provide us your code?
I've tried to add local file as image to Azure Maps symbol layer. See examples here: click.
Local file file:///D:/showers.png failed with error: URL scheme must be "http" or "https" for CORS request., but same file on localhost server worked well:
P.S. Maybe I do not clearly understand the problem?
Is it possible to reload an image with an identical file name from a server using jQuery?
For example, I have an image on a page, however, the physical image can change based on user actions. Note, this does not mean the file name changes, but the actual file itself.
ie:
User views image on default page
User uploads new image
Default image on page does not change(I assume this is due to the file name being identical, the browser uses the cached version)
Regardless of how often the code below is called, the same issue persists.
$("#myimg").attr("src", "/myimg.jpg");
In the jQuery documentation, the "load" function would be perfect if it had a default method of firing the event as opposed to binding a callback function to a successful/complete load of an element.
Any assistance is greatly appreciated.
It sounds like it's your browser caching the image (which I now notice you wrote in your question). You can force the browser to reload the image by passing an extra variable like so:
d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
It's probably not the best way, but I've solved this problem in the past by simply appending a timestamp to the image URL using JavaScript:
$("#myimg").attr("src", "/myimg.jpg?timestamp=" + new Date().getTime());
Next time it loads, the timestamp is set to the current time and the URL is different, so the browser does a GET for the image instead of using the cached version.
This could be one of the two problems you mention yourself.
The server is caching the image
The jQuery does not fire or at least doesn't update the attribute
To be honest, I think it's number two. Would be a lot easier if we could see some more jQuery. But for a start, try remove the attribute first, and then set it again. Just to see if that helps:
$("#myimg").removeAttr("src").attr("src", "/myimg.jpg");
Even if this works, post some code since this is not optimal, imo :-)
with one line with no worries about hardcoding the image src into the javascript (thanks to jeerose for the ideas:
$("#myimg").attr("src", $("#myimg").attr("src")+"?timestamp=" + new Date().getTime());
To bypass caching and avoid adding infinite timestamps to the image url, strip the previous timestamp before adding a new one, this is how I've done it.
//refresh the image every 60seconds
var xyro_refresh_timer = setInterval(xyro_refresh_function, 60000);
function xyro_refresh_function(){
//refreshes an image with a .xyro_refresh class regardless of caching
//get the src attribute
source = jQuery(".xyro_refresh").attr("src");
//remove previously added timestamps
source = source.split("?", 1);//turns "image.jpg?timestamp=1234" into "image.jpg" avoiding infinitely adding new timestamps
//prep new src attribute by adding a timestamp
new_source = source + "?timestamp=" + new Date().getTime();
//alert(new_source); //you may want to alert that during developement to see if you're getting what you wanted
//set the new src attribute
jQuery(".xyro_refresh").attr("src", new_source);
}
This works great! however if you reload the src multiple times, the timestamp gets concatenated to the url too. I've modified the accepted answer to deal with that.
$('#image_reload_button').on('click', function () {
var img = $('#your_image_selector');
var src = img.attr('src');
var i = src.indexOf('?dummy=');
src = i != -1 ? src.substring(0, i) : src;
var d = new Date();
img.attr('src', src + '?dummy=' + d.getTime());
});
Have you tried resetting the image containers html. Of course if it's the browser that is caching then this wouldn't help.
function imageUploadComplete () {
$("#image_container").html("<img src='" + newImageUrl + "'>");
}
Some times actually solution like -
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));
also not refresh src properly, try out this, it worked for me ->
$("#Image").attr("src", "dummy.jpg");
$("#Image").attr("src", $('#srcVal').val()+"&"+Math.floor(Math.random()*1000));
Using "#" as a delimiter might be useful
My images are kept in a "hidden" folder above "www" so that only logged users are allowed access to them. For this reason I cannot use the ordinary <img src=/somefolder/1023.jpg> but I send requests to the server like <img src=?1023> and it responds by sending back the image kept under name '1023'.
The application is used for image cropping, so after an ajax request to crop the image, it is changed as content on the server but keeps its original name. In order to see the result of the cropping, after the ajax request has been completed, the first image is removed from the DOM and a new image is inserted with the same name <img src=?1023>.
To avoid cashing I add to the request the "time" tag prepended with "#" so it becomes like <img src=?1023#1467294764124>. The server automatically filters out the hash part of the request and responds correctly by sending back my image kept as '1023'. Thus I always get the last version of the image without much server-side decoding.
Based on #kasper Taeymans' answer.
If u simply need reload image (not replace it's src with smth new), try:
$(function() {
var img = $('#img');
var refreshImg = function(img) {
// the core of answer is 2 lines below
var dummy = '?dummy=';
img.attr('src', img.attr('src').split(dummy)[0] + dummy + (new Date()).getTime());
// remove call on production
updateImgVisualizer();
};
// for display current img url in input
// for sandbox only!
var updateImgVisualizer = function() {
$('#img-url').val(img.attr('src'));
};
// bind img reload on btn click
$('.img-reloader').click(function() {
refreshImg(img);
});
// remove call on production
updateImgVisualizer();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img id="img" src="http://dummyimage.com/628x150/">
<p>
<label>
Current url of img:
<input id="img-url" type="text" readonly style="width:500px">
</label>
</p>
<p>
<button class="img-reloader">Refresh</button>
</p>
I may have to reload the image source several times. I found a solution with Lodash that works well for me:
$("#myimg").attr('src', _.split($("#myimg").attr('src'), '?', 1)[0] + '?t=' + _.now());
An existing timestamp will be truncated and replaced with a new one.
If you need a refresh of the exact URL and your browser has the image cached, you can use AJAX and a request header to force your browser to download a new copy (even if it isn't stale yet). Here's how you'd do that:
var img = $("#myimg");
var url = img.attr("src");
$.ajax({
url: url,
headers: { "Cache-Control": "no-cache" }
}).done(function(){
// Refresh is complete, assign the image again
img.attr("src", url);
});
Nothing else worked for me because while appending a token to the query string would download the new image, it didn't invalidate the image in the cache at the old URL so future requests would continue to show the old image. The old URL is the only one sent to the browser, and the server was directing the client to cache the image for longer than it should.
If this still doesn't refresh the image for you, see if this answer helps. For more information, here is documentation on the Cache-Control request header.
In the html:
foreach (var item in images) {
<Img src="#Url.Content(item.ImageUrl+"?"+DateTime.Now)" >
}
I simply do this in html:
<script>
$(document).load(function () {
d = new Date();
$('#<%= imgpreview.ClientID %>').attr('src','');
});
</script>
And reload the image in code behind like this:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
image.Src = "/image.jpg"; //url caming from database
}
}
I have to show local image file in html through stagewebview.
When I load url of html in flex application, text content displyaed correctly, but it doesn't show a images for that. Any way I can load local file through html in stage web view?
The solution involves copying all your necessary files (html, images, css) to a storage directory, and then call your html in there. The URLs to images and CSS will be relative to that directory.
This code shows how to copy the contents of an entire directory called html into that storage directory, and then load test.html into your StageWebView object.
var source:File = File.applicationDirectory.resolvePath("html/") ;
var destination:File = File.applicationStorageDirectory;
source.copyTo(destination, true);
var initialURL = new File(destination.resolvePath("test.html").nativePath).url;
webView.loadURL( initialURL );
Be aware that you will be responsible for cleaning up that directory though.
You can load a local HTML file using the File Class. So it would be something like this:
var _locaWebFile:File = File.documentsDirectory.resolvePath(pathToHTMLContent);
var _webview:StageWebView = new StageWebView();
_stage.scaleMode = StageScaleMode.NO_SCALE;
_webview.stage = _stage;
_webview.loadURL(_localWebFile.url);
_webview.addEventListener(flash.events.Event.COMPLETE, loadData);
function loadData(e:Event):void
{
_webview.viewPort = new Rectangle(0, 0, _stage.stageWidth, _stage.stageHeight);
}
Also, you might have to make sure your paths to your images are correct.
I have an ASP.NET app (it uses DevExpress v 10.2). There is a button called PRINT on a page. When the button is clicked the application should:
1. extract a file from its DB. The file is either PDF or JPEG (the application knows its type in runtime only)
2. TO PRINT OUT the file. Some ‘preview’ should be shown to user during this
The question is – how to implement this (the item ‘2’)? There is a well-known method to print out an image using JavaScript like the following:
function DisplayPrintPopup(html) {
var win = window.open('', 'popup', 'toolbar=no,menubar=no,width=500,height=500,scrollbars=yes');
self.focus();
win.document.open();
win.document.write('<head><style></style></head><body>' + html + '<style></style></head><body>');
win.document.close();
win.print();
win.close();
}
This could be Ok for me. But what to do when a file is PDF?
This just print an element from you page where strid=id of the element you want to print,
before the print is possible to view a preview:
function CallPrint(strid) {
var prtContent = document.getElementById(strid);
var WinPrint = window.open('', '', 'letf=0,top=0,width=800,height=600,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
}
http://forums.asp.net/t/1034884.aspx/1
I might be missing something, but it seems that Meteor's "magic" revolves around binding data to DOM elements, and updating text and HTML fragments via handlebars: http://docs.meteor.com/#reactivity
This is great, however, when trying to write a meteor app that displays live data in a <canvas> element, I cannot figure out the "meteor way" to update my canvas when the live data changes, since the canvas is populated via JS code like:
var g = canvas.getContext('2d')
g.fillRect(x, y, w, h)
and not data-backed text in the HTML template.
I am trying to draw on the canvas using data from a Meteor.Collection.
My only thought was to embed canvas-drawing JS code in the HTML template in a script tag populated by handlebar vars, but this seems wrong since meteor's events and data-binding code is already client-side JS.
Is there some way listen for live data changes, which triggers drawing on the canvas via JS instead of HTML elements/text?
Please let me know if I can clarify the question in some way
Update:
Tom's answer below made me notice Meteor.deps, which look to allow executing arbitrary code in a reactive context:
http://docs.meteor.com/#on_invalidate
I will try this out and update here if it works.
Perhaps the answer to your question is to use Collection.observe (http://docs.meteor.com/#observe) and trigger the relevant redrawing code in the various callbacks.
For instance, something like:
Rectangles.observe({
added: function(rect) {
var g = canvas.getContext('2d');
g.fillRect(rect.x, rect.y, rect.w, rect.h);
},
// etc
})
This works:
var Shapes = new Meteor.Collection('shapes')
if (Meteor.is_client) {
// Function that redraws the entire canvas from shapes in Meteor.Collection
function drawShapes() {
var shapes = Shapes.find({})
shapes.forEach(function(shape) {
// draw each on canvas
})
}
var startUpdateListener = function() {
// Function called each time 'Shapes' is updated.
var redrawCanvas = function() {
var context = new Meteor.deps.Context()
context.on_invalidate(redrawCanvas) // Ensures this is recalled for each update
context.run(function() {
drawShapes()
})
}
redrawCanvas()
}
Meteor.startup(function() {
startUpdateListener()
})
}
I had some trouble with updating the canvas so I created this simple game demo:
https://github.com/randompast/Meteor-SimpleGame