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
Related
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.
I made one email app where I want to use Adobe Creative SDK for editing images and adding text over image. All works almost great but when I click on "text" button and trying to add new layer (Add Text) I not see anything. All options is there, no erros in console just text layer not show up and I'm unable to insert text over image.
Here is my setup:
var featherEditor = new Aviary.Feather({
apiKey: '[MY-ID]',
tools : ['text','crop','resize','color'],
fileFormat : 'png,jpg,gif,jpeg',
theme:'light',
displayImageSize : true,
onSave: function(imageID, newURL) {
var img = document.getElementById(imageID);
img.src = newURL;
}
});
function launchEditor(id, src) {
featherEditor.launch({
image: id,
url: src,
cropPresets: [
'Original',
['Mail App','600x600'],
'4:3',
'16:9'
],
});
return false;
}
I also remove my CSS from this page and leave clean Adobe library and nothing chaged.
Can anyone help me?
I find solution for my problem. I just add one CSS code:
#avpw_canvas_element.avpw_position_by_transform {
z-index: 0;
}
This fix my layering problem and all work great.
I have an Openlayers map with several WMS layers from which I want to request feature information through "getGetFeatureInfoUrl". Visibility of layers can be turned on/off in the layer tree. I'd like to, upon clicking somewhere in the map:
Get Feature Info ONLY for layers that are currently visible
and, if there are more than one layers at the chosen location, get the Feature Info for all of them.
I used the sample code from the OpenLayers website. I tried variants of this code bit
var url = layers[2].getSource().getGetFeatureInfoUrl(
evt1.coordinate, viewResolution, 'EPSG:3857', {
'INFO_FORMAT': 'text/html',
'FEATURE_COUNT': '300'
});
like
var url = layers[].getSource().getGetFeatureInfoUrl( or
var url = layers[1,2].getSource().getGetFeatureInfoUrl(, but either no Feature Info is delivered, or merely for the last layer - regardless of whether it is visible or not.
I created a JSFiddle with two sample layers here: http://jsfiddle.net/kidalex/j34xzaa3/5/
Similar questions were asked before, like here: https://gis.stackexchange.com/questions/114297/querying-multiple-wms-layers-in-ol3-and-adding-to-a-single-popup-window; but I cannot fathom how to apply the solutions (JS/OL newbie here).
You should iterate over your layers and only call getFeatureInfo if they are visible and not the base layer, try something like:
map.on('singleclick', function (evt1) {
document.getElementById('info').innerHTML = '';
var viewResolution = /** #type {number} */
(view.getResolution());
var url = '';
document.getElementById('info').innerHTML ='';
layers.forEach(function (layer, i, layers) {
if (layer.getVisible() && layer.get('name')!='Basemap') {
url = layer.getSource().getGetFeatureInfoUrl(evt1.coordinate, viewResolution, 'EPSG:3857', {
'INFO_FORMAT': 'text/html',
'FEATURE_COUNT': '300'
});
if (url) {
document.getElementById('info').innerHTML +=
'<iframe seamless src="' + url + '"></iframe>';
}
}
});
});
EDIT: grammar
I have recently been learning about Firefox OS/B2G. I am aware of the extensive set of APIs in place that are able to fetch images from the wallpaper gallery, change settings and set reminders (to name a few). However, I'm completely stumped as to how to how to change the wallpaper, or, indeed, if this is even possible. Apologies if this is a silly question. Many thanks in advance.
You can do this by using a share activity
// imgToShare is the image you want to set as wallpaper
var shareImage = document.querySelector("#share-image"),
imgToShare = document.querySelector("#image-to-share");
if (shareImage && imgToShare) {
shareImage.onclick = function () {
if(imgToShare.naturalWidth > 0) {
// Create dummy canvas
var blobCanvas = document.createElement("canvas");
blobCanvas.width = imgToShare.width;
blobCanvas.height = imgToShare.height;
// Get context and draw image
var blobCanvasContext = blobCanvas.getContext("2d");
blobCanvasContext.drawImage(imgToShare, 0, 0);
// Export to blob and share through a Web Activitiy
blobCanvas.toBlob(function (blob) {
new MozActivity({
name: "share",
data: {
type: "image/*",
number: 1,
blobs: [blob]
}
});
});
}
else {
alert("Image failed to load, can't be shared");
}
};
}
You can test a live example with the Firefox OS boilerplate https://github.com/robnyman/Firefox-OS-Boilerplate-App/ .
I am using roslibjs to display information from ROS in the browser. One of the topics I am subscribing to has the type sensor_msgs/Image, and I would like to display the image in the browser. For example, I receive this message for an image that is 1 red pixel:
{
"encoding":"bgr8",
"height":1,
"header":{
"stamp":{
"secs":1394210281,
"nsecs":406450571
},
"frame_id":"image",
"seq":1
},
"step":3,
"data":"AAD+",
"width":1,
"is_bigendian":0
}
I want to turn this data into a base64 encoded image, so I can display the image as so:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY/jPwAAAAwEBAGMkVdMAAAAASUVORK5CYII=">
Does anyone know how (with javascript) I can use the ROS message to ultimately create a base64 encoded png?
Look into the mjpeg_server package from the Robot Web Tools group.
That might be a simpler solution!
http://wiki.ros.org/mjpeg_server
Instead of streaming sensor_msgs/Image type try to convert the image to base64, publish it and decode it into image inside your html page.
Python3 code:
import cv2
import rospy
import base64
from std_msgs.msg import String
publisher = rospy.Publisher(
'/viz_flow/rgb', String, queue_size=10
)
image = cv2.imread('some_image.jpg')
_, buffer = cv2.imencode('.jpg', image)
image_as_str = base64.b64encode(buffer).decode('utf-8')
publisher.publish(image_as_str)
JS code:
...
var stream_rgb_listener = new ROSLIB.Topic({
ros : ros,
name : '/viz_flow/rgb',
messageType : 'std_msgs/String'
});
listener.subscribe(function(msg) {
var canvas = document.getElementById('rgb-canvas');
ctx = canvas.getContext('2d');
var image = new Image();
image.onload = function() {
ctx.drawImage(image, 0, 0);
};
image.src = `data:image/png;base64,${msg.data}`;
});
...
Using web video server (http://wiki.ros.org/web_video_server) it's as easy as using an image with the src being the link of the stream