I am new with the ElectronJS and sorry for being not be smart with these staffs yet.
I am trying to make a login page for my future company but first I need to prepare everything to able to start something.
So if someone is turn on the computer then they need to use the windows login and when logged in then my application will appear and asking for the specific pin code.
Big story, in short I need to make the application to hide the desktop on all of the screens.
I did this way in C# (because I started to do in C# the project and then I found this ElectronJS and changed my mind to use this instead):
private static Rectangle GetDesktopBounds(Form main)
{
Rectangle result = new Rectangle();
for (int i = 0; i < Screen.AllScreens.Length; i++)
{
Screen screen = Screen.AllScreens[i];
result = Rectangle.Union(result, screen.Bounds);
}
main.Top = result.Top;
main.Left = result.Left;
main.Width = result.Width;
main.Height = result.Height;
return result;
}
It works fine in C# but I need in ElectronJS and I did try to make something like this:
let x;
let y;
for (let i = 0; i < screen.getAllDisplays().length; i++) {
x += screen.getAllDisplays()[i].bounds.width;
console.log(screen.getAllDisplays()[i].bounds.width);
y += screen.getAllDisplays()[i].bounds.height;
console.log(screen.getAllDisplays()[i].bounds.height);
}
And then:
win.setSize(x, y, false);
But it doesn't put the window to all of the screens to fullscreen. It does only in the primary screen. If I console log the x and y then I get the NaN message.
So the question is: How I can make the window in fullscreen and put on all of the screens same time?
Thank you for the answers in advance.
Alright.
I found a solution. maybe not the perfect but works fine for me:
let displays = screen.getAllDisplays()
let externalDisplay = displays.map(function (display, index, displays) {
win = new BrowserWindow(
{
x: display.bounds.x,
y: display.bounds.y,
width: 1280,
height: 720,
fullscreen: true,
backgroundColor: "#363636",
frame: false,
enableLargerThanScreen: true,
skipTaskbar: true,
disableAutoHideCursor: false
}
);
})
Related
I'm developing a basic window frame configurator. I splitted glasses in function below. I want to change color when i clicked and get the position of clicked glass to draw openin direction lines.
I tried to understand and implement Lavrton's method(https://codesandbox.io/s/0xj7zml2zl?file=/src/index.js) but i couldn't succeed.
function glassDraw(piece, frameWidth, frameHeight) {
var glassGroup = new Konva.Group();
for (i = 0; i <piece; i++) {
var glass = new Konva.Rect({
name: 'Rect',
x: padding + (frameWidth / piece) * i,
y: padding,
width: frameWidth / piece,
height: frameHeight - padding * 2,
fill: 'lightblue',
id: 'glass'+i,
});
glassGroup.add(glass);
}
glassGroup.find("Rect").on('click', function (e) {
// get id of the cube i drag
var clickedId = e.target.attrs.id;
$('#theId').html(clickedId);
})
return glassGroup;
}
When i use getelementbyid method with id of konva element("glass"+i), it returns null. I think i need to get as a konva element.
You have to create a click listener for all of your rectangles.
for (let rect of glassGroup.children) {
rect.on('click', () => {
console.log(rect.x(), rect.y()); // current position of the object
console.log(rect.id()); // log id of the object
rect.fill('green'); // set color to green
layer.batchDraw(); // update layer (batchDraw just for better performance .draw() would work to)
})
}
Make sure you always update the stage by either call stage.draw() or layer.draw() (or batchDraw() for better performance) after changing something, otherwise your stage will not show anything of what you do.
If something with this code don't work feel free to ask.
Have a nice day.
I'm looking for help as I really don't know where the bug would come from.
I have a chart in my Ionic App that is well displayed like that :
chart well displayed
But when I export as png, the chart looks like that :
badly displayed chart
The blue range totally changed here and I don't know why. Can you help me ?
The problem only appears on iOS
The problem is on amCharts JS library. If I comment a line in the case 1 of simplifiedImageExport function, this works well. Here is the line to delete :
case 1:
_a.trys.push([1, 6, , 7]);
canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
// Line to delete
// ctx = canvas.getContext("2d");
DOMURL = this.getDOMURL();
svg = new Blob([this.normalizeSVG("<g></g>", {}, 1, 1)], {
type: "image/svg+xml"
});
url = DOMURL.createObjectURL(svg);
img = void 0;
_a.label = 2;
I have a youtube video that I am loading in createScene(). The video loads and plays, but it disables my FirstPersonControls. I tried to attach click events to both the element and the iframe, but I'm not having any luck in catching the event. My theory is that I could use e.preventDefault(), but I'm not sure if that would even work. I am using CSS3DRenderer to render the CSS3D object.
In this example you are able to start the youtube vid and still use the threejs controls. For me, after I click on the youtube widget, none of my keyboard keys work anymore, and the only thing I can interact with is the youtube widget, no other objects in my scene.
Not really sure what to show in my code that could be causing the issue...
var YoutubePlane = function (id, x, y, z, ry) {
let element = document.createElement('div')
let width = '500px'
let height = '400px'
element.style.width = width;
element.style.height = height;
element.style.backgroundColor = '#ffffff'
element.className = 'three-div'
let iframe = document.createElement('iframe')
// iframe.style.pointerEvents = "none";
iframe.style.width = width
iframe.style.height = height
iframe.style.border = '0px'
iframe.src = ['https://www.youtube.com/embed/', id, '?rel=0&controls=0'].join('')
element.appendChild(iframe)
let div = new THREE.CSS3DObject(element)
div.position.set(x, y, z)
div.rotation.y = ry
div.name = "youtube"
return div;
}
One thing to note: While the keyboard controls are disabled, the click control still works (moves camera forward).
I have two styles of interactions, one highlights the feature, the second places a tooltop with the feature name. Commenting both out, they're very fast, leave either in, the map application slows in IE and Firefox (but not Chrome).
map.addInteraction(new ol.interaction.Select({
condition: ol.events.condition.pointerMove,
layers: [stationLayer],
style: null // this is actually a style function but even as null it slows
}));
$(map.getViewport()).on('mousemove', function(evt) {
if(!dragging) {
var pixel = map.getEventPixel(evt.originalEvent);
var feature = null;
// this block directly below is the offending function, comment it out and it works fine
map.forEachFeatureAtPixel(pixel, function(f, l) {
if(f.get("type") === "station") {
feature = f;
}
});
// commenting out just below (getting the feature but doing nothing with it, still slow
if(feature) {
target.css("cursor", "pointer");
$("#FeatureTooltip").html(feature.get("name"))
.css({
top: pixel[1]-10,
left: pixel[0]+15
}).show();
} else {
target.css("cursor", "");
$("#FeatureTooltip").hide();
}
}
});
I mean this seems like an issue with OpenLayers-3 but I just wanted to be sure I wasn't overlooking something else here.
Oh yeah, there's roughly 600+ points. Which is a lot, but not unreasonably so I would think. Zooming-in to limit the features in view definitely helps. So I guess this is a # of features issue.
This is a known bug and needs more investigation. You can track progress here: https://github.com/openlayers/ol3/issues/4232.
However, there is one thing you can do to make things faster: return a truthy value from map.forEachFeatureAtPixel to stop checking for features once one was found:
var feature = map.forEachFeatureAtPixel(pixel, function(f) {
if (f.get('type') == 'station') {
return feature;
}
});
i had same issue, solved a problem by setInterval, about this later
1) every mouse move to 1 pixel fires event, and you will have a quee of event till you stop moving, and the quee will run in calback function, and freezes
2) if you have an objects with difficult styles, all element shown in canvas will take time to calculate for if they hit the cursor
resolve:
1. use setInterval
2. check for pixels moved size from preview, if less than N, return
3. for layers where multiple styles, try to simplify them by dividing into multiple ones, and let only one layer by interactive for cursor move
function mouseMove(evt) {
clearTimeout(mm.sheduled);
function squareDist(coord1, coord2) {
var dx = coord1[0] - coord2[0];
var dy = coord1[1] - coord2[1];
return dx * dx + dy * dy;
}
if (mm.isActive === false) {
map.unByKey(mm.listener);
return;
}
//shedules FIFO, last pixel processed after 200msec last process
const elapsed = (performance.now() - mm.finishTime);
const pixel = evt.pixel;
const distance = squareDist(mm.lastP, pixel);
if (distance > 0) {
mm.lastP = pixel;
mm.finishTime = performance.now();
mm.sheduled = setTimeout(function () {
mouseMove(evt);
}, MIN_ELAPSE_MSEC);
return;
} else if (elapsed < MIN_ELAPSE_MSEC || mm.working === true) {
// console.log(`distance = ${distance} and elapsed = ${elapsed} mesc , it never should happen`);
mm.sheduled = setTimeout(function () {
mouseMove(evt);
}, MIN_ELAPSE_MSEC);
return;
}
//while multithreading is not working on browsers, this flag is unusable
mm.working = true;
let t = performance.now();
//region drag map
const vStyle = map.getViewport().style;
vStyle.cursor = 'default';
if (evt.dragging) {
vStyle.cursor = 'grabbing';
}//endregion
else {
//todo replace calback with cursor=wait,cursor=busy
UtGeo.doInCallback(function () {
checkPixel(pixel);
});
}
mm.finishTime = performance.now();
mm.working = false;
console.log('mm finished', performance.now() - t);
}
In addition to #ahocevar's answer, a possible optimization for you is to utilize the select interaction's select event.
It appears that both the select interaction and your mousemove listener are both checking for hits on the same layers, doing double work. The select interaction will trigger select events whenever the set of selected features changes. You could listen to it, and show the popup whenever some feature is selected and hide it when not.
This should reduce the work by half, assuming that forEachFeatureAtPixel is what's hogging the system.
I have a UIActionSheet that works just fine on the iPhone simulator. It is presented when the user touches a UIButton.
Using the iPad, I believe UIActionSheets are wrapped into a UIPopupController.
When I call the same code using the iPad simulator, I get a thin "line" displayed, which looks like a UIPopupController (you can see the small arrow that usually points to a control). None of the content can be seen.
What is the correct way to use a UIActionSheet using the iPad with MonoTouch? Here is a bit of sample code I have been testing with - creating the UIActionSheet:
var actionSheet = new UIActionSheet () { Style = UIActionSheetStyle.BlackTranslucent };
actionSheet.Frame = actionSheetFrame;
actionSheet.Clicked += (s, e) => { Console.WriteLine ("Clicked on item {0}", e.ButtonIndex); };
actionSheet.AddSubview (doneButton);
Then, I am showing the actionsheet by calling the following from a button:
btnSay.TouchUpInside += (sender, e) => {
actionSheet.ShowFrom(tmpBtn.Frame, tmpView, false);
};
I get something like the attached screenshot when using the iPad simulator.
For reference, here is what the UIActionSheet looks like when using the iPhone simulator.
Note: The project is a universal single-view MonoTouch c# project.
Any pointers or help would be much appreciated!
I faced this same problem with a recent app I released to the app store.
When you show a UIActionSheet on iPad, iOS wraps the UIActionSheet in a UIPopoverView.
I used the following code to detect whether this is an iPad, and if it is, adjust the frame of the popover view:
const int CHROMEWIDTHLEFT = 9;
const int CHROMEWIDTHRIGHT = 8;
const int MARGIN = 50;
UIActionSheet _actionSheet;
...
if (UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Pad) {
var popover = _actionSheet.Superview.Superview;
if (popover != null)
{
var x = _actionSheet.Frame.X + MARGIN;
var y = (UIScreen.MainScreen.ApplicationFrame.Height - _actionSheet.Frame.Height) / 2;
var width = _actionSheet.Frame.Width - (MARGIN * 2);
var height = _actionSheet.Frame.Height;
popover.Frame = new RectangleF (x, y, width, height);
_actionSheet.Frame = new RectangleF (x, y, width - (CHROMEWIDTHLEFT + CHROMEWIDTHRIGHT), height - (CHROMEWIDTHLEFT + CHROMEWIDTHRIGHT));
}
}
The example is based upon the Xamarin ActionSheet Date Picker here
I have put these up as a Gist (Normal and DatePicker)