Here is my code of angularjs to export only pdf but i want to export with a custom logo. Any help on this question?
My Kendo Chart HTML Code is here:
<div kendo-chart="vm.chart"
k-options="vm.chartOptions"
k-data-source="vm.chartOptions.datasource">
</div>
And Export Button code is here..
vm.saveAsPdf = function (event) {
var elem ;
if (navigator.userAgent.indexOf("Chrome") !== -1) {
elem = event.toElement;
}
else {
elem = event.currentTarget;
}
//$(elem).parent().next().find('.k-chart').getKendoChart().saveAsPDF();
debugger;
var chart = $(".k-chart").getKendoChart();
var fileName = $(elem).closest('li').children().find('.ng-binding').text().trim();
chart.exportPDF({ paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } }).done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: fileName + ".pdf"
});
});
}
Use the render event of the chart to draw on its surface once the chart has been rendered.
Then use the Kendo Drawing Image to add the logo.
render: function(e){
var chart = e.sender;
var draw = kendo.drawing;
var geom = kendo.geometry;
var rect = new geom.Rect(
[50, 0], // Position of the top left corner
[400, 60] // Size of the rectangle
);
var image = new draw.Image("https://www.w3.org/Icons/SVG/svg-logo-h.svg", rect);
chart.surface.draw(image);
}
DEMO
In the demo I am adding a random image near the top left of the chart.
Related
I want to change the color of label when dropdown is shown and return the color of label to normal when dropdown hides. How can I do it with binding?
so there will be a property
property: {
icon: {
check: Boolean,
apply: handleVisibility
}
}
this.handleVisibility = function(value) {}
this.bind()?
my code
var label = new qx.ui.basic.Label("Default");
label.setFont("bold");
this.getRoot().add(label, {
left: 20,
top: 20,
});
// create a combo box
var comboBox = new qx.ui.form.ComboBox();
// fill the combo box with some stuff
for (var i = 1; i < 31; i++) {
var tempItem = new qx.ui.form.ListItem(
"2^ " + i + " = " + Math.pow(2, i)
);
comboBox.add(tempItem);
}
// add the combobox to the documents root
this.getRoot().add(comboBox, {
left: 20,
top: 40,
});
I've appended about 20 lines to your code, here, to show how you might do it. You can plug this into https://playground.qooxdoo.org to test it.
var label = new qx.ui.basic.Label("Default");
label.setFont("bold");
this.getRoot().add(label, {
left: 20,
top: 20,
});
// create a combo box
var comboBox = new qx.ui.form.ComboBox();
// fill the combo box with some stuff
for (var i = 1; i < 31; i++) {
var tempItem = new qx.ui.form.ListItem(
"2^ " + i + " = " + Math.pow(2, i)
);
comboBox.add(tempItem);
}
// add the combobox to the documents root
this.getRoot().add(comboBox, {
left: 20,
top: 40,
});
// Get easy access to the textfield of the comboBox and its popup list
let textfield = comboBox.getChildControl("textfield");
let popup = comboBox.getChildControl("popup");
// When the popup's `visibility` property changes, modify the textfield's
// `backgroundColor` property. The value of the `visibility` property will be
// "hidden" or "visible". We use a `converter`, to convert the value
// from one of those, to the color to be used. (A color of `null`, used in
// this example when the popup is hidden, means use the default color.)
popup.bind(
"visibility",
textfield,
"backgroundColor",
{
converter : function(data, model, source, target)
{
return data == "visible" ? "cyan" : null;
}
});
I want to draw a rectangle over a background image on canvas using angular.js. I can draw it by placing the rectangle code inside the image.onload function.But I want them to be separated.How can I do it?
$scope.printStars = function() {
var c = document.getElementById("myCanvas");
c.width=1920;
c.height=1080;
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 800, 800);
ctx.scale(c.width/1920,c.height/1080);
ctx.translate(1920-500,0);
var imagePaper = new Image();
imagePaper.onload = function(){
ctx.drawImage(imagePaper,100, 20, 500,500);
};
ctx.fillRect(20, 20, 200, 200);
imagePaper.src = "Img/Back1.jpg";
}
My code works if I do this
imagePaper.onload = function(){
ctx.drawImage(imagePaper,100, 20, 500,500);
ctx.fillRect(20, 20, 200, 200);
};
But I want the drawrectangle code outside of image function.
You can assign the ctx to a variable on the $scope and access it in other places now. For example:
$scope.drawRectangle = function() {
$scope.ctx.fillRect(20, 20, 200, 200);
}
<button ng-click=drawRectangle()>Draw rectangle</button>
How can I store image logo in local storage while page gets loaded in angularJS.
angular.module('app', [
'ngStorage'
]).
controller('Ctrl', function(
$scope,
$localStorage
){
// here I need to store image
});
});
Try this
controller('Ctrl', ['$localStorageProvider', function(
$scope,
$localStorageProvider
){
$http.get("http://someurl.com/someimagepath")
.then(function(response){
$scope.myImage = response.data;
$scope.myImage = window.btoa($scope.myImage); // store it as base64 format
$localStorageProvider.set('MyImage', $scope.myImage);
});
});
});
Use it like
<img ng-src="data:image/JPEG;base64,{{myImage}}">
We can't save directly image to local storage. We need covert it to base64 then save to local storage
This is demo: How to save convert image to base 64 then save it to local storage
http://jsfiddle.net/8V9w6/
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,
'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
localStorage.setItem('img', e.target.result);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
if(localStorage.img) {
var span = document.createElement('span');
span.innerHTML += ['<img class="thumb" src="', localStorage.img,
'" title="test"/>'].join('');
document.getElementById('list').insertBefore(span, null);
}
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
You can convert your image to base64 and store it in localstorage
<canvas id="myCanvas" />
Create an element in your html file
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("preview");
ctx.drawImage(img, 10, 10);
$localStorage.logo = c.toDataURL()
alert(c.toDataURL());
I am getting error when i click google map marker how to solve this problem i have enclosed fiddle http://jsfiddle.net/cLADs/135/ .when i click button it should pass id value based on marker click some one help me out to move forward.
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
// Our markers
markers1 = [
['0', 'Madivala', 12.914494, 77.560381, 'car','as12'],
['1', 'Majestic', 12.961229, 77.559281, 'third','as13'],
['2', 'Ecity', 12.92489905, 77.56070772, 'car','as14'],
['3', 'Jp nagar', 12.91660662, 77.52047465, 'second','as15']
];
/**
* Function to init map
*/
function initialize() {
var center = new google.maps.LatLng(12.9667,77.5667);
var mapOptions = {
zoom: 12,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
}
/**
* Function to add marker to map
*/
function addMarker(marker) {
var category = marker[4];
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
var fullContent = marker.slice(1,6).join();
var marker1 = new google.maps.Marker({
title: title,
position: pos,
category: category,
map: map
});
gmarkers1.push(marker1);
// Marker click listener
google.maps.event.addListener(marker1, 'click', (function (marker1, fullContent) {
return function () {
console.log('Gmarker 1 gets pushed');
infowindow.setContent(fullContent);
infowindow.open(map, marker1);
map.panTo(this.getPosition());
map.setZoom(15);
///////
// Set CSS for the control border.
var controlDiv = document.createElement("div");
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = '#fff';
controlUI.style.border = '2px solid #fff';
controlUI.style.borderRadius = '3px';
controlUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
controlUI.style.cursor = 'pointer';
controlUI.style.marginBottom = '22px';
controlUI.style.textAlign = 'center';
controlUI.title = 'Click to recenter the map';
controlDiv.appendChild(controlUI);
// Set CSS for the control interior.
var controlText = document.createElement('div');
controlText.style.color = 'rgb(25,25,25)';
controlText.style.fontFamily = 'Roboto,Arial,sans-serif';
controlText.style.fontSize = '16px';
controlText.style.lineHeight = '38px';
controlText.style.paddingLeft = '5px';
controlText.style.paddingRight = '5px';
controlText.innerHTML = 'Center Map';
controlUI.appendChild(controlText);
// Setup the click event listeners: simply set the map to Chicago.
controlUI.addEventListener('click', function() {
//Do Whatever you want here
});
controlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(controlDiv);
///////
}
})(marker1, fullContent));
}
/**
* Function to filter markers by category
*/
filterMarkers = function (category) {
for (i = 0; i < markers1.length; i++) {
marker = gmarkers1[i];
// If is same category or category not picked
if (marker.category == category || category.length === 0) {
marker.setVisible(true);
}
// Categories don't match
else {
marker.setVisible(false);
}
}
}
// Init map
initialize();
#map-canvas {
width: 500px;
height: 500px;
}
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
<option value="">Please select category</option>
<option value="second">second</option>
<option value="car">car</option>
<option value="third">third</option>
</select>
if you print our your i in your listener, you will realized it always to be 4. Basically, the listener does not remember the number i, since it is a globe variable.
Look at the Google Example, they called a function and setup the info window inside.(so that it is i independent) You might do the same too.
Another solution is to store the value i as a tag to the marker, so that you can retrieve it from the marker object.
I am building an ExtJS4 Web Application. I have a form that the user can fill up. I am able to do basic CRUD on the data that the user inputs. I added functionality to this by enabling the user to print the form. To achieve this, I wrote an override for the form.Panel X-Types as such. I modified a code I found online:
print: function(pnl) {
if (!pnl) {
pnl = this;
}
// instantiate hidden iframe
var iFrameId = "printerFrame";
var printFrame = Ext.get(iFrameId);
if (printFrame === null) {
printFrame = Ext.getBody().appendChild({
id: iFrameId,
tag: 'iframe',
cls: 'x-hidden',
style: {
display: "none"
}
});
}
var cw = printFrame.dom.contentWindow;
var stylesheets = "";
var markup;
// instantiate application stylesheets in the hidden iframe
var printTask = new Ext.util.DelayedTask(function(){
// print the iframe
cw.print();
// destroy the iframe
Ext.fly(iFrameId).destroy();
});
var strTask = new Ext.util.DelayedTask(function(){
var str = Ext.String.format('<html><head>{0}</head><body>{1}</body></html>',stylesheets,markup);
// output to the iframe
cw.document.open();
cw.document.write(str);
cw.document.close();
// remove style attrib that has hardcoded height property
// cw.document.getElementsByTagName('DIV')[0].removeAttribute('style');
printTask.delay(500);
});
var markUpTask = new Ext.util.DelayedTask(function(){
// get the contents of the panel and remove hardcoded overflow properties
markup = pnl.getEl().dom.innerHTML;
while (markup.indexOf('overflow: auto;') >= 0) {
markup = markup.replace('overflow: auto;', '');
}
while (markup.indexOf('background: rgb(255, 192, 203) !important;') >= 0) {
markup = markup.replace('background: rgb(255, 192, 203) !important;', 'background: pink !important;');
}
strTask.delay(500);
});
var styleSheetConcatTask = new Ext.util.DelayedTask(function(){
// various style overrides
stylesheets += ''.concat(
"<style>",
".x-panel-body {overflow: visible !important;}",
// experimental - page break after embedded panels
// .x-panel {page-break-after: always; margin-top: 10px}",
"</style>"
);
markUpTask.delay(500);
});
var styleSheetCreateTask = new Ext.util.DelayedTask(function(){
for (var i = 0; i < document.styleSheets.length; i++) {
stylesheets += Ext.String.format('<link rel="stylesheet" href="{0}" />', document.styleSheets[i].href);
}
styleSheetConcatTask.delay(500);
});
styleSheetCreateTask.delay(500);
}
I used the delay functions to ensure that the function finishes its operations because there are times that the print preview fails.
This code works, it can print out text fields, labels, as well as field sets. However, it does not render radio buttons at all. Now, I am not sure why it does not.