Using NeutralinoJS, how can start the app right in the center of the screen?
It should look like the splashscreen of any app. Unlike ElectronJS, Neutralino's window options doesn't seem to have a center() method.
I made a simple javascript function by using native API of neutralionJS. Used Neutralino.computer.getDisplays() to height & width of the screen along with Neutralino.window.getSize() to height & width of the window and Neutralino.window.move(x,y) to center it. Note: x,y is the coordinates of the top right corner of the window. For a better explaination I have also attested a img demostrating it.
async function centerWindow(){
let display = await Neutralino.computer.getDisplays();
const displayHeight = display[0].resolution.height;
const displayWidth = display[0].resolution.width;
let window = await Neutralino.window.getSize();
const windowHeight = window.height;
const windowWidth = window.width;
const x = (displayWidth - windowWidth) / 2;
const y = (displayHeight - windowHeight) / 2;
Neutralino.window.move(x,y);
}
centerWindow();
Image link
The black dot is actual center of screen, red dot is where Neutralino.window.move(x,y) takes you too.
Related
I have one pdf file and one image file which is the signature of the client. I need to place the client signature image on the top right corner of every page of pdf. This whole process is in node js so I have used the pdf-lib npm package to attach image on pdf. The current issue I'm unable to place the image on the top-right corner.
Below is the logic which I used to set an image on the top-right corner of the pdf but this logic is not true for every case in some cases when the width of the image or pdf changes then it's not worked as expected. Sometimes images are getting too much small or sometimes too much large.Just because I set fix height and width. As I don't know how to calculate it dynamically
const pages = pdfDoc.getPages();
for (let i = 0; i < pdfDoc.getPageCount(); i++) {
let imagePage='';
imagePage = pdfDoc.getPage(i);
console.log(i+1)
console.log(imagePage.getWidth())
let xx=imagePage.getWidth()
console.log(imagePage.getHeight())
console.log(img.width)
console.log(img.height)
let yy=imagePage.getHeight()
imagePage.drawImage(img, {
x: xx-150,
y: yy-70,
width: 70,
height: 70
})
}
Please check console values below
595.5 at imagePage.getWidth()
842.2499787 at imagePage.getHeight()
1200 at img.width
700 at img.height
please check the above image where I attached the signature to pdf but in this case, the signature image is not properly visible so how can I set the image to pdf on the top-right corner?
How can I calculate the x and y position dynamically for any pdf?
I got the solution to get dynamic x and y values to set an image on the top-right corner of the pdf
let xx=imagePage.getWidth();
console.log(imagePage.getHeight());
console.log("[PAGE_HEIGHT]",imagePage.getHeight());
const imgHeight = img.height;
const imgWidth = img.width;
console.log("[SIGNATURE_IMAGE_WIDTH]",img.width);
console.log("[SIGNATURE_IMAGE_HEIGHT]",img.height);
const marginX = 50;
let yy=imagePage.getHeight();
imagePage.drawImage(img, {
x: xx -marginX-imgWidth,
y: yy- marginX-imgHeight,
width: imgWidth,
height: imgHeight
})
margin is a fixed value to move an image from the top and right sides to get a proper view.
I have removed image height and width from the actual page width and height that will return top right corner.
I am a fabric.js novice, I have got through a great deal of documentation and code samples, but still can't figure out how can I achieve such simple goal.
I start from a DOM canvas, and would like to obtain a downsized canvas, using the lanczos filter.
var canvas = /* a DOM canvas, obtained through prior processing */
var width = /* target width, smaller than source canvas width */
var height = /* target height, smaller than source canvas height */
I create the filter:
var filter = new fabric.Image.filters.Resize();
filter.resizeType = 'lanczos';
filter.LanczosLobes = 3;
I calculate the scaling:
var scalingX = width / canvas.width;
var scalingY = height / canvas.height;
Now it is not clear to me how can I apply the filter to the canvas, and get the downsized canvas.
Or could someone suggest another javascript library or function, as simple as possible, to perform a canvas-to-canvas lanczos downsize?
I have an issue regarding a kendo dialog window including an upload.
When I upload multiple elements the list gets longer and longer and at some point gets bigger than my browserwindow and runs out of bounds at the bottom of the screen.
The insert button then is below the bottom bound of the browser but the browser doesn't allow me to scroll (firefox + chrome).
How can I limit my window to the browser screen and not exceed it?
#(Html.Kendo().Dialog()
.Name("ImageBrowser")
.Content( Html.Partial("ImageBrowserContent").ToString())
.MinWidth(400)
.MinHeight(800)
.MaxHeight(1000)
.MaxWidth(800)
.Modal(true)
.Visible(false)
)
#(Html.Kendo().Upload()
.Name("imageUpload")
.Messages(mess => mess.Select("Upload"))
.Async(a => a
.Save("Upload", "Image")
.Remove("RemoveUpload", "Image")
.AutoUpload(true)
)
)
I have provided a dojo here for you which hopefully is what you are after.
https://dojo.telerik.com/eqaZibIL
It uses the javascript version but you can just apply the function I have created to the dialog initial event. like so:
#Html.Kendo().Dialog().Events(e => e.InitOpen("dialog_resize"))
(This is some code I have modified for handling kendoWindow's so could be optimized more I think)
function dialog_resize() {
//THIS GETS THE POPUP DIALOG
var popUpDialog = $('#dialog').data("kendoDialog");
//THIS GETS THE CONTENT AREA FOR THE ENTIRE DIALOG
var contentArea = $(".k-widget.k-window.k-dialog");
//THIS GETS THE ACTUAL CONTENT AREA OF THE DIALOG IE.WHAT YOU WANT DISPLAYED
var innerForm = $("#dialog");
var windowHeight = $(window).innerHeight();
var windowWidth = $(window).innerWidth();
//CALCULATE THE WIDTH OF THE DIALOG AND SET IT TO 80%
//OF SCREEN REALESTATE TO STRECH OUT.
//NOT REQUIRED IF YOU ARE SETTING THE WIDTH MANUALLY.
contentArea.width(windowWidth * 0.8)
//CENTER THE DIALOG ON THE SCREEN.
popUpDialog.center();
//GET 97% OF THE AVAILABLE DIALOG CONTENT AREA TO SHOW Y-SCROLL BAR
var fixedHeight = (contentArea.height() * 0.97);
var fixedWidth = contentArea.width() * 0.965;
//SET THE HEIGHT, WIDTH AND SCROLL BAR OF THE CONTENT AREA
//SHOWING BLUE BORDER TO SHOW THE ITEM IS POSITIONING CORRECTLY IN DIALOG
innerForm.height(fixedHeight).width(fixedWidth).css({
maxHeight: fixedHeight + 'px !important',
maxWidth: fixedWidth + 'px !important',
overflowY: 'scroll',
overflowX: 'hidden',
border: '1px solid blue'
});
}
Hopefully you can follow what is going off here.
As long as you have set the maxHeight for the dialog on initialization all this seems to work correctly. I have applied a blue border to the content area just for demo purposes so you can see it in action.
I m using fabric.js in one of my projects.
I m using zooming functionalities . I would like to know if there a simple way to zoom all the canvas (with all the elements ) in on click.
Try out this jsfiddle demonstrating zoom onclick of a button: http://jsfiddle.net/cmontgomery/H7Utw/1/. In essence you get all objects on the canvas and scale/move them by the same factor, giving the visual appearance of zoom.
var objects = canvas.getObjects();
for (var i in objects) {
var scaleX = objects[i].scaleX;
var scaleY = objects[i].scaleY;
var left = objects[i].left;
var top = objects[i].top;
var tempScaleX = scaleX * SCALE_FACTOR;
var tempScaleY = scaleY * SCALE_FACTOR;
var tempLeft = left * SCALE_FACTOR;
var tempTop = top * SCALE_FACTOR;
objects[i].scaleX = tempScaleX;
objects[i].scaleY = tempScaleY;
objects[i].left = tempLeft;
objects[i].top = tempTop;
objects[i].setCoords();
}
canvas.renderAll();
If you use zoom with fabricjs without modifying all objects use: https://github.com/wojtek-krysiak/fabricjs-viewport.
Example: http://wojtek-krysiak.github.io/fabricjs-viewport/
I need to 'scale' text to fill an antire HTML5 canvas. It appears that the scale() method does not affect text. I've seen approximation methods with iterative loops on the measureText() method but this doesn't get me exactly what I need. Ideally I'd like to fill both horizontally and vertically without conserving the aspect ratio. Would SVG possibly be able to help with this?
My bad - Scale DOES apply to text. I've come up with a solution:
context.font = "20px 'Segoe UI'";
var metrics = context.measureText("Testing!");
var textWidth = metrics.width;
var scalex = (canvas.width / textWidth);
var scaley = (canvas.height / 23);
var ypos = (canvas.height / (scaley * 1.25));
context.scale(scalex, scaley);
context.fillText("Testing!", 0, ypos);
Scale does affect text. Try this:
var can = document.getElementById('test');
var ctx = can.getContext('2d');
ctx.fillText("test", 10, 10); // not scaled text
ctx.scale(3,3);
ctx.fillText("test", 10, 10); // scaled text
See it in action here:
http://jsfiddle.net/3zeBk/8/