I am creating a project in Electron in which I need to capture screenshots of the entire system and not just of the browser, so I am using Electron's desktopCapturer feature to do so, but I have noticed that in case of multiple screens attached to a single system, it only captures screenshots of one screen and not of both.
I use this piece of code to capture screen-shots and I have not found any option to target multi-screen issue:
const image = await desktopCapturer.getSources({
types: ['screen'],
thumbnailSize: {
width, // custom width, and height are provided according to the screen resolution here
height,
},
});
Related
I am trying to do something I feel is very simple, yet seems that I am clearly misunderstanding a crucial piece of the mapbox addlayer feature.
The Goal
Create dynamically identified icons, based on a features data value (e.g. geojson feature data vale title: "walmart"). Essentially just adding dynamic store icons from the sprite image when those locations are queried via tilequery. picture representation here
The problem
I keep getting an error when trying to use the sprite values from the style. Error: util.js:349 Image "airport-11" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event.
I see tons of resources talking about sprites, but none discuss how to exactly implement them in this fashion. I have even tried querying the sprite and then adding the values using dot notation to access sprite values. This gives an error of "undefined" and invalid value.
Example code:
map.addLayer({
id: "tilequery-points",
type: "symbol",
source: "tilequery", // Set the layer source
layout: {
"icon-image": [
"match",
["get", "title"],
["HEB"],
"H-E-B_logo",
["Pilot Flying j"],
sprite.Pilot_Travel_Centers_logo,
// "Pilot_Travel_Centers_logo",
["Dollar General"],
"Dollar_General_logo",
["Cumberland Farms Corp"],
"Cumberland_Farms_logo (1)",
["CEFCO"],
"CEFCO-convenience-stores-Logo_510px",
["BJs Wholesale Inc"],
The Question
How do I access the sprite values and not get an error?!!!
Thanks for the help! I Wouldn't ask if I didn't need it!
UPDATE
I have figured out that to use sprite images inside of any layer, the images will automatically be available if you have them in your Mapbox studio sprite image collection. The confusion was that previously, I was not able to use them from link. However, it should work automatically.
Hope it helps!
It's true the documentation about sprites is not super clear. I'll try to summarise (simplifying a bit).
A Mapbox GL style has one sprite. That's a PNG containing all the icons, plus a JSON file specifying what each icon is called (its icon ID), and where it located within the PNG. The sprite is specified by giving a URL as the sprite property: https://docs.mapbox.com/mapbox-gl-js/style-spec/sprite/
You can also add images to the sprite dynamically after the map loads, with map.loadImage and map.addImage, specifying the icon ID.
To display an icon, you use that same ID in a symbol layer: "icon-image": "myicon".
You can run into trouble when you try to combine your own icons with those in a Mapbox basemap (which are Maki icons with names like `airport-11').
To combine them, you can do one of these three things:
upload your icons to a style in Mapbox Studio
load your icons dynamically
generate a new sprite sheet offline, using something like mbsprite
I don't know what you meant about "dot notation", but no, that's not the right path.
On desktop, it detects the current viewport size correctly, but if I simulate mobile view on Chrome Dev Tools, the Image component detects the wrong device size.
I'd like to know how the Image component detects device sizes.
The "Image" component doesn't detect device size. It generates an <img/> with preset srcset attribute. The browser reads this value and loads an image of appropriate size for the current viewport (see article).
You may see inconsistency in DevTools because of caching. If the browser downloaded a larger image and then you downsize viewport and update page, it still would retrieve the cached image for "wrong" viewport.
Hard reload won't be enough. Try to use "Clear cache and hard reload" after switching viewport size.
You can specify a list of device width breakpoints using the deviceSizes property. These widths are used when the next/image component uses layout="responsive" or layout="fill" so that the correct image is served for the device visiting your website.
module.exports = {
images: {
deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
},
}
See also: https://nextjs.org/docs/basic-features/image-optimization
You need to check your devicePixelRatio.
I also got confused when the image that got loaded is always twice the size of my viewport.
I think the browser decide to load the image that is nearest to viewportwidth * devicePixelRatio in my case devicePixelRatio = 2.
I have a need to test against different screen sizes in my protractor test suites, and after a quick search came across this post Run protractor tests with different window sizes?
One of the answers talks about using the multipleCapabilities config option which looks to be a nice and concise approach.
I was wondering if there is a way to name these capabilities with some sort of alias or similar which could be interrogated during the tests, so to check what 'mode' the test is running in, e.g, small screen, large screen, etc.
Currently I have separate test files named like feature.sm.spec.js, feature.lg.spec.js, which set the screen size in a beforeAll(), one of the tests checks table responsiveness so checks the right number of columns and the column headings text are what they should be.
It would be nice if I could have just the one test spec file, and using the current screen size mode its running under, the expectation could be varied dynamically, e.g. in some utility functions, so I just check the expected columns based on the known screen size.
Anyone out there done this kinda thing?
Cheers
Two things that come to mind are you could create a different test suite to run for each screen size, or pass in the screen size you want to test using a command line argument, which can be defined in your conf.js You would use the params object and can access that value in your specs using browser.params.YourObjectOrVarHere.
If you want just one spec file, i think the browser.params approach would work best for you, but you would have to run the test for each screen size.
The simple approach for the problem is by passing the screen size as command line arguments and in onPrepare() method you can set the browser size based on the parameter passed. Look at below example spec.
exports.config = {
capabilities: {
browserName: 'chrome',
},
onPrepare: function () {
if(browser.params.screenSize){
var width = browser.params.screenSize.split("x")[0]
var height = browser.params.screenSize.split("x")[1]
browser.manage().window().setSize(parseInt(width), parseInt(height));
}else{
browser.manage().window().maximize();
}
},
params : {
screenSize : "1420x850" //default screensize
}
}
And in terminal use the below command to pass the screenSize as parameter.
protractor config.js --params.screenSize 1920x900
Now the browser will be launched and set's the screen size as 1920x900
I have a web application that uses Dygraphs to create charts.
The application allows a user to create multiple Dygraph charts (each with their own Y-Axis) that will be stacked on top of each other.
Here's an example of what the multiple Dygraphs look like on a PC browser: Notice that the example displays three different Dygraphs each having their own Y-axis, but the X-axis is hidden for the top 2 charts and visible on the bottom chart.
I will allow the user to save the chart to disk as a PNG. - The way I currently save the multiple Dygraphs as one PNG is:
Create a target canvas that will be used to contain all the visible Dygraphs
Extract each canvas out of each Dygraph, then add each canvas to the target canvas **
Create a PNG via the .toDataURL() function on the target canvas
Here's an example of what the above screenshot looks like when saved as one PNG: (This is exactly what I want from the PNG)
The procedure works fine on browsers on a PC. But when I attempt to save the multiple Dygraphs into one PNG on a phone/tablet browser, the resultant PNG doesn't match the graph that is visible on the screen.
Example:
Here's what the multiple Dygraphs look like on an iPad (screenshot)
And here's what the resultant PNG looks like (Notice how the width and height of each chart does not match the actual iPad display).
I don't understand why the PNG is rendered correctly when I use a PC browser, but is not rendered correctly when I use a browser on a mobile device.
I'm not sure if this problem is due to limitations of the Canvas.toDataURL() function or if this is a Dygraphs problem or something else. I'm fishing for advice that may point me in the right direction and/or shed light on this particular problem.
**I should mention that I use Juan Manuel Caicedo Carvajal's Dygraph-Export extension
I'm guessing the Problem occurs, because the generated canvas isn't rendered fully to the responsive screen of an iPad.
You can try to export the original canvas (instead of generating a new one with the said library) yourself with toDataUrl https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Dygraphs generates 2 canvas, one for the legend and one for the actual graph and lays them ontop of each other. So make sure you choose the right one (not the _hidden_canvas). If the examples works you can draw the legend onto the graph canvas with canvas.drawImage(otherCanvas)
How to Copy Contents of One Canvas to Another Canvas Locally
Hope this helps. Keep me updated!
My workaround/hack for the problem stated in my OP was to make a change to the Dygraph source in the Dygraph.getContextPixelRatio function.
Notice in the code below that I set devicePixelRatio = 1
dygraph-combined.js
Dygraph.getContextPixelRatio = function (context) {
try {
//var devicePixelRatio = window.devicePixelRatio;
var devicePixelRatio = 1; // Hack!!!
var backingStoreRatio = context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
if (devicePixelRatio !== undefined) {
return devicePixelRatio / backingStoreRatio;
} else {
// At least devicePixelRatio must be defined for this ratio to make sense.
// We default backingStoreRatio to 1: this does not exist on some browsers
// (i.e. desktop Chrome).
return 1;
}
} catch (e) {
return 1;
}
};
In my case, this hack fixed my problem (stated in the OP) and didn't negatively affect any other parts of my application that uses Dygraphs. That said, if you find a better/correct way to fix the problem stated in the OP, please share.
I am uploading the file using the script from "UPLOADIFY" site, The image is uploading successfully, But Now I want to preview the image on my UI Page, I have written some script (Converted image into Base 64 Encrypted code) to preview the image.
Both the functionalities are working fine individually, But I am unable to execute both functionalities one by one. Here is the code I have used Please help Me.
$(document).ready(function() {
$('#file_upload').uploadify({
'uploader' : '/js/uploadify/uploadify.swf',
'script' : 'index.php',
'fileExt' : '*.jpeg;*.gif;*.png',
'fileDesc' : 'Image Files',
'buttonText' : 'Select File',
'sizeLimit' : 102400,
'onSelect' : function() {preview(this);}
});
});
I'm assuming you would like to preview the image onSelect... That is not possible due to security measures in modern browsers which prevent local (user-local) images from being displayed. This means that in order to preview the image you must first upload it (for example, set the upload mode to 'auto' and then onComplete add the temporary image to a div) and then the user would have a button of some sort to 'confirm' that the temporary image is indeed the desired one. That button would then move the temporary image to a definitive folder and add it to the database.
Sorry for not adding code, but I think you can easily manage to do it on your own. There are some great tutorials around too.
Cheers