We Keep Coding

Adobe Creative SDK web displaying a small image after load

I'm integrating Adobe Creative SDK WEB to my angularjs website.
I have followed the "Image Editor UI" guide from official Adobe website
And also a this example using angularjs:
https:// github.com/CreativeSDK/web-getting-started-samples/tree/master/image-editor-ui/image-editor-ui-angular-express>
In both cases I tried with dynamic and hard coded id and image src.
** This is working **
When I click the "edit" link, editor opens fine and start loading the image.
While loading, the image size is exactly the same as my placeholder size.
Screen capture of my table with image and link https://ibb.co/kZ5ama
** End this is working **
The problem I'm getting is this:
After the photo is loaded, the size shrinks and goes to the top left corner.
Also when I try to draw on top of it, I have to start by clicking inside the small photo and continue as if the size of the photo is the entire screen.
Screen capture of the editor here, look at the end of the red stroke and my cursor position: https://ibb.co/iYJECF
Here is my edit link
<a href="javascript:;" id="edit-image-button" class="btn btn-primary btn-block button-panel" ng-click="launchEditor('image_'+$index, item2)">
Edit Image
</a>
My image placeholder
<a ng-click="openLightboxModal(name2,'notsynced')" >
<img id="image_{{$index}}"class="img-responsive" src="{{item2}}" alt="">
</a>
$scope.getImageEditor = function() {
$scope.imageEditor = new Aviary.Feather({
apiKey: "My id is here",
onSave: function(imageID, newURL) {
$scope.currentImageSrc = newURL;
$scope.imageEditor.close();
$scope.$digest();
console.log(newURL);
},
onError: function(errorObj) {
console.log(errorObj.code);
console.log(errorObj.message);
console.log(errorObj.args);
}
});
}
$scope.launchEditor = function(imageId, imageURL) {
$scope.originalImageSrc = imageURL;
$scope.currentImageSrc = $scope.originalImageSrc;
console.log(imageId);
console.log(imageURL);
$scope.imageId = imageId;
var terms = /^https?:///;
var isUrl = $scope.currentImageSrc.match(terms);
if (isUrl) {
$scope.imageEditor.launch({
image: $scope.imageId,
url: $scope.currentImageSrc
});
}
else {
$scope.imageEditor.launch({
image: $scope.imageId
});
}
}

After removing all CSS and inspecting element by element, I have found the culprit. It was a CSS conflict, which made all CANVAS element to have a fixed height of 100px.
Thanks for reading.

Can I display font-awesome icons in html5 notifications

I was trying to display desktop notifications on my website.As per this documentation here, I can provide a URL to the icon image.But my website is using font awesome icons, therefore I do not have a URL for icons.Any help or alternatives will be appreciated
function spawnNotification(theBody,theIcon,theTitle) {
var options = {
body: theBody,
icon: theIcon //this should be a URL can I provide an icon class of a text content?
}
var n = new Notification(theTitle,options);
}

Fontawesome icons does come in png, you can directly use a URL to the icon image.
You can host your images on your server
function spawnNotification(theBody,theIcon,theTitle) {
var options = {
body: theBody,
icon: 'http://yourdomain.com/icons/icon.png'
}
var n = new Notification(theTitle,options);
}
For more info about the icons refer here

How to change playback rate in jwplayer

I want to change the playback speed of video in HTML5 mode of jwplayer. I am not interested in flash browser, we will be restricting this feature only for HTML5 browsers
Issue:
I tried changing the playbackrate for HTML5 in jwplayer but playbackrate is coming undefined
i am attaching my code below
jwplayer('my-video').setup({
sources: [
{file:'./test.mp4' , type: "mp4" },
],
width:'640px',
height:'360px',
image : './test.jpg'
});
$("#speed_10").click(function() {
myVid=$( "#my-video" ).find('.jwvideo').find('video');
alert(myVid.length);
alert($( "#my-video" ).find('.jwvideo').find('video').attr('src'))
alert(myVid.playbackRate)
alert($( "#my-video" ).find('.jwvideo').find('video').length)
$( "#my-video" ).find('.jwvideo').find('video').PlaybackRate=0.5;
});
1st alert coming as 1
2nd alert coming undefined
3rd alert is showing "source"
4th alert is 1
I am able to catch the div but not able to change the playback rate in jquery !!!
http://www.longtailvideo.com/support/forums/jw-player/feature-suggestions/32556/playbackrate-support/
following above link i also tried with java script and it worked using code below
(document.getElementsByTagName('video')[0].playbackRate=0.2.
but if i use above code how do i use this for multiple video since there is no ID involved in above code [no unique id is passed for above javascript]
Below is the div structure for the jwplayer

I found the answer for this, main issue which i faced for multiple video was how to make each video unique.i just had to get div by ID first and after get 'Video' tag than change playbackrate
adding the code below
var video = document.getElementById('exampleId')
var video_speed = video.getElementsByTagName('video')[0]
alert(video_speed.playbackRate)
video_speed.playbackRate=0.2;
alert(video_speed.playbackRate)
I even tried with multiple video, it worked fine

Found this script manually manipulating the DOM for custom speeds:
<script type="text/javascript">
jwplayer("video").setup({
image: 'https://<your_CDN_ID>.cloudfront.net/static/splash/<splash.png>',
width: 960,
height: 600,
flashplayer: "https://<your_CDN_ID>.cloudfront.net/assets/jwplayer.flash.swf",
html5player: "https://<your_CDN_ID>.cloudfront.net/assets/jwplayer.html5.js",
primary: 'html5',
sources: [
{ file: 'https://<your_CDN_ID>.cloudfront.net/static/videos/<video>.mp4' },
{ file: 'https://<your_CDN_ID>.cloudfront.net/static/videos/<video>.webm' }
]
});
var tag;
jwplayer().onReady(function(){
if (jwplayer().getRenderingMode() == "flash") {
return;
}
tag = document.querySelector('video');
tag.defaultPlaybackRate = 1.0;
tag.playbackRate = 1.0;
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/25.png", "", function(){
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 0.25;
},"025");
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/05.png", "", function(){
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 0.5;
},"05");
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/1.png", "", function() {
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 1.0;
},"1");
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/125.png", "", function() {
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 1.25;
},"125");
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/15.png", "", function() {
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 1.5;
},"15");
jwplayer().addButton("https://<your_CDN_ID>.cloudfront.net/assets/2.png", "", function() {
jwplayer().seek(jwplayer().getPosition());
tag.playbackRate = 2.0;
},"2");
});
</script>
Instead of toggle like the excellent blogpost from Ethan there are speed buttons.
Just setting a custom speed:
document.querySelector('video').playbackRate=0.80;

https://developer.jwplayer.com/jw-player/demos/advanced/set-playback-rate/
only add line playbackRateControls in .setup()
jwplayer('user-player').setup({
playlist: 'https://cdn.jwplayer.com/v2/media/gaCRFWjn',
// Set the available playback rates of your choice
playbackRateControls: [0.75, 1, 1.25, 1.5]
});

Just add ids to your videos and use document.getElementsById (id) instead of document.getElementsByTagName.
document.getElementsById('yourid').playbackRate=0.2

I wrote a blog post about a how to do this in the JW Player, by the way. It might be helpful! - http://www.longtailvideo.com/blog/33860/slow-motion-with-jw-player

control image width and height when upload image

Straight to point. I want to set the limit of the width and height of the image when user upload an image using plupload.
Letsay:
if
width: 1000px
height: 1000px
else
you must upload image with at least width:1000px and height:1000px
// $(".form").validator();
$(function() {
if($("#uploader").length > 0) {
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight',
browse_button : 'pickfile',
container : 'uploader',
max_file_size : '10mb',
url : 'design.php?do=upload&ajax=1',
multiple_queues: false,
file_data_name: 'design',
flash_swf_url : www + '/js/plupload.flash.swf',
silverlight_xap_url : www + '/js/plupload.silverlight.xap',
filters : [
{title : "Image files", extensions : "jpg,gif,png,jpeg,bmp"}
]
});
$('#uploadfiles').click(function(e) {
if($("#uploader select[name=category]").val() == "") {
$("#uploader select[name=category]").next('.error-required').show();
return false;
}
uploader.start();
e.preventDefault();
});
uploader.init();
So, is this possible?

You can easily write a filter for plupload.
Here is filter for min required width.
Add bellow code to your script. (Just copy)
plupload.addFileFilter('min_width', function(maxwidth, file, cb) {
var self = this, img = new o.Image();
function finalize(result) {
// cleanup
img.destroy();
img = null;
// if rule has been violated in one way or another, trigger an error
if (!result) {
self.trigger('Error', {
code : plupload.IMAGE_DIMENSIONS_ERROR,
message : "Image width should be more than " + maxwidth + " pixels.",
file : file
});
}
cb(result);
}
img.onload = function() {
// check if resolution cap is not exceeded
finalize(img.width >= maxwidth);
};
img.onerror = function() {
finalize(false);
};
img.load(file.getSource());
});
And add this filter to your upload script.
filters : {
min_width: 700,
},

Plupload doesn't support this itself (although it has been requested). There are probably a couple of reasons for this, firstly because you just can't get the image dimensions before upload in IE (you can in some other browsers) and secondly, whilst that would work for some browsers using the using the HTML4/5 methods, I am not sure that the Flash/Silverlight etc. methods would also be able to reliably determine dimensions.
If you were happy with limited browser, HTML4/5 methods only you should hook into the "FilesAdded" event e.g.
uploader.bind('FilesAdded', function(up, files) {
//Get src of each file, create image, remove from file list if too big
});

I recently wanted to do the same thing, and was able to achieve it the way Thom was suggesting. He was correct on it's limitation though; if you want to add this, it will only work in modern browsers and not in the flash or silverlight runtimes. This is not a huge issue, as my non-html5 users will just get an error after upload, rather than before.
I initialized a total image count variable to keep track of the images placed on the page. Also a vairable to store photos we want to delete after we read them all.
var total_image_count = 0;
var files_to_remove = [];
Then I read the pending files with FileReader(), place them on the page, and get their width
init:{
FilesAdded: function(up, files) {
if (uploader.runtime == "html5"){
files = jQuery("#"+uploader.id+"_html5")[0].files
console.log(files);
for (i in files){
//create image tag for the file we are uploading
jQuery("<img />").attr("id","image-"+total_image_count).appendTo("#upload-container");
reader_arr[total_image_count] = new FileReader();
//create listener to place the data in the newly created
//image tag when FileReader fully loads image.
reader_arr[total_image_count].onload = function(total_image_count) {
return function(e){
var img = $("#image-"+total_image_count);
img.attr('src', e.target.result);
if ($(img)[0].naturalWidth < 1000){
files_to_remove.push(files[i]); //remove them after we finish reading in all the files
//This is where you would append an error to the DOM if you wanted.
console.log("Error. File must be at least 1000px");
}
}
}(total_image_count);
reader_arr[total_image_count].readAsDataURL(files[i]);
total_image_count++;
}
for (i in files_to_remove){
uploader.removeFile(files_to_remove[i]);
}
}
}
}
As a side note, I was wanting to show image thumbnails anyway, so this method works great for me. I have not figured out how to get an image's width without first appending it to the DOM.
Sources:
Thumbnail an image before upload:
https://stackoverflow.com/a/4459419/686440
Accessing image's natural width:
https://stackoverflow.com/a/1093414/686440

to access width and heigth without thumbnail an image you can do this:
uploader.bind('FilesAdded', function(up, files) {
files = jQuery("#"+uploader.id+"_html5").get(0).files;
jQuery.each(files, function(i, file) {
var reader = new FileReader();
reader.onload = (function(e) {
var image = new Image();
image.src = e.target.result;
image.onload = function() {
// access image size here using this.width and this.height
}
};
});
reader.readAsDataURL(file);
}
}

Loop through images with shared class in Jquery and apply Pixastic filter

I am using pixastic (http://www.pixastic.com/lib/docs/actions/blend/) on a site I am implementing and need to use JQuery to loop though a collection of images that have a shared class and apply blend code to each image.
The sample code on the pixastic site doesn't make much sense to me (it looks like it is creating a new image) any help would be really appreciated.
var img = new Image();
img.onload = function() {
var blendImg = new Image();
blendImg.onload = function() {
Pixastic.process(img, "blend",
{
amount : 1,
mode : "multiply",
image : blendImg
}
);
}
blendImg.src = "blendimage.jpg";
}
img.src = "myimage.jpg";

Kind of a shot in the dark here, but does this work?
$("img.yourClass").each(function() {
Pixastic.process($(this).get(0), "blend", {
amount: 1,
mode: "multiply",
image: [imageToBlendItWith]
});
});