I have a map as an image that can be accessed over an API on an url. As part of a mapping process this image is constantly being updated while the url is always the same.
To display it in frontend (react) I use the BitmapLayer with the image property set to the desired url. It is correctly rendered on initialization.
The problem I have is how to update the map. I have an event that is triggered when the image is updated on the server. When this event is triggered I update the layers. But the image is not getting updated, which actually makes sense since deck.gl only updates on change and the url did not change... So I tried to fix this problem by using the updateTriggers property like so:
new BitmapLayer({
id: "bitmap-layer",
image: image_url,
updateTriggers: {
image: [Math.random()]
}
})
with the idea to update the image when the trigger changes (called when change event is triggered). But the image is not getting updated.
I also tried to change the id of the image layer on each change but the image still did not change.
My question would therefore be, if it is somehow possible to trigger the update of the image without changing the url?
One way to refresh an image at the same url can be adding a unique cache-busting query parameter such as:
image: image_url + "?t=" + new Date().getTime(),
Related
I am making a website in elm that includes a dynamic element for browsing pictures. One can click a given thumb to see the full picture in a lightbox, navigate to the next or previous picture or let the picture change automatically every three second.
By default one sees only a small selection (4 thumbs) but it is possible to previews all the thumbs by clicking on "voir toute les photos"
running example here
Each user click or tick of the clock change the underlying model, which in turn makes the browser actualize the HTML accordingly.
I am mostly satisfied with the current level of functionality except for the fact than I can't find a way to display a transition screen (or picture) while the next picture is loading.
The lightbox displays the last displayed picture while loading the next one, and transitions abruptly.
Is there a way to trigger a change in the model only when the next picture is loaded?
Or a more idiomatic way to do this sort of thing? I am quite new to elm and web development in general.
the elm code for the gallery is visible at:
https://github.com/eniac314/mairieMurol/blob/master/src/Gallery.elm
It sounds like you just need a way to know when an image is finally loaded. You can tie into the img.onload DOM event, but first you'll need a Json Decoder to pull image src attribute out of an event.
Updated to elm-0.18
onLoadSrc : (String -> msg) -> Html.Attribute msg
onLoadSrc tagger =
on "load" (JD.map tagger targetSrc)
targetSrc : JD.Decoder String
targetSrc =
JD.at [ "target", "src" ] JD.string
Now you can use that decoder to call a new ImageLoaded String action, passing the image source as a string.
img
[ src imgsrc
, onLoadSrc ImageLoaded
]
[]
Look at demo and code (you may need to change the random number in the image url to combat the browser caching the image).
I have a WinJS app where the user can choose via a dropdown menu, to view one of several images.
During the dropdown's onchange event, I'm using:
URL.createObjectURL(file, { oneTimeOnly: true })
To generate a URL which I set as a html <img> element's src property.
Whilst this works 'some' of of the time, the behaviour is very inconsistent a high proportion of the time, I get the error:
DOM7009: Unable to decode image at URL: 'blob:7743DB87-59F8-4750-B3A2-3505518CA7CB'.
Obviously the blob URL varies.
This doesn't seem related to the actual image, as during testing I'm only using 3 images (all of which will load at times) but all three of them won't load at other times.
Am I using the wrong approach here? or could something else be the problem? any thoughts greatly appreciated.
I am trying to write a component based on the foundation Image component that will write the image to the DAM instead of the "local" jcr node on file upload. I also want it to activate the "DAM Update Asset" workflow so that it will create the different size renditions. Can you use a listener to write it to the DAM or is there another or better way to accomplish this?
I don't see a way to just do it within the component itself. But an EventListener could be triggered if someone uploads an image. In this EventListener you can move the image to a defined folder in DAM and start the workflows you want programmatically. Then you update the component so it references the new DAM asset instead of a directly attached nt:file.
Depending on which configuration of the image component you use and which browser is used, the upload is a bit different. The file usually first gets stored in /tmp and then moved. I am not sure it this only happens if the dialog is closed. So the safest way would be to await this event, eg. a add/change event on the jcr:lastModified property.
Is there any possibility to manually define an image for flattered things?
Or are there plans by the devs to implement this?
Specify the image using Open Graph metadata in the page that is submitted, like you do for eg. Facebook: http://ogp.me/
If you're using WordPress or such there's likely a plugin that you could use.
I just checked the API and there seems to be no way of defining the image upfront. Not with an auto-submit URL and not with the create-thing request.
Only thing I could find is once you created a thing, you can edit it using this URL:
https://flattr.com/thing/edit/<thing-id>
The form has a text field that is labeled Change image by providing an url. (will take some time to update). Enter a URL to an image.
I tried it and it took about 30 secs to update.
I've been working on this issue for about two days now. I've posted more task specific questions, got great answers, only to figure out the approach I was taking wouldn't work.
Basically, I want a user to be able to upload images in a form and see a preview of the image they upload before submitting the form. The images and the parent form have a has_many relationship. The images are nested in the parent form using fields_for.
I tried using a client side approach, but ran into cross browser and security issues. My current approach I'm trying is to save the images, reload the div portion of the page, and then assign the parent_id to the image after the partent form is submitted (since I will not have a id for the partent form until it is created).
Is it possible to use ajax to submit the fields_for portion of a form and not the entire parent form? Has anyone attempted to do something similar?
Of course you can submit only the fields of that image by using jQuery to select only the fields that you want to send, serialize them and send them as data of the ajax request.
Be careful, you need to send the authtoken, that's why I have type=hidden in the selector
var data = form.find('[name*=image],[type=hidden]').not('[name*=items]').serialize();
$.ajax({url: this.form.attr('action'), context: this, type: 'POST', data: data
The next step with the image I once implemented as storing the in their own database table, returning the client the id to that who then adds it to the form.