I am trying electron's BrowserView to embed third party web content in an Electron BrowserWindow.
My electron version is 10.
// In the main process.
const { BrowserView, BrowserWindow } = require('electron')
const win = new BrowserWindow({ width: 800, height: 600 })
const view = new BrowserView()
win.setBrowserView(view)
view.setBounds({ x: 0, y: 0, width: 300, height: 300 })
view.webContents.loadURL('https://electronjs.org')
This is working fine and now I wanted to hide scrollbars by adding a line
view.webContents.insertCSS('html, body { overflow: hidden; }')
but this is not hiding scrollbar.
How can I hide scrollbar in BrowserView?
Related
My code below animates a rectangle to grow right as soon as I start it. How can I make it simultaneously grow left? I have tried (line.x -= line.dx) and a few other variations and it does not seem to work.
const line = {
x: 600,
y: 100,
width: 1,
height: 3,
dx: 1,
dy: 1,
}
let totalLineWidth = line.x + line.width;
const drawLine = () => {
ctx.fillRect(line.x, line.y , line.width, line.height)
}
const update = () => {
drawLine()
line.x += line.dx
requestAnimationFrame(update)
}
update()
At the same time as you draw a new bit to the right, draw a new bit to the left.
The new bit to the left goes an equal amount to the left as the new bit to the right. So that's (600 - (left.x - 600) - and of course update the 600 if you ever change the start position.
Run this snippet in full page and click the button to start the drawing.
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const line = {
x: 600,
y: 100,
width: 1,
height: 3,
dx: 1,
dy: 1,
}
let totalLineWidth = line.x + line.width;
const drawLine = () => {
ctx.fillRect(line.x, line.y, line.width, line.height);
ctx.fillRect(600 - (line.x - 600), line.y, line.width, line.height);
}
const update = () => {
drawLine()
line.x += line.dx
requestAnimationFrame(update)
}
//removed just for demo so we can wait until user clicks the button
//update()
canvas {
background-color: pink;
/* just for demo so we can see where the canvas is */
}
<button onclick="update(); this.style.display = 'none';">Click me to start</button>
<br>
<canvas width=1200 height=200></canvas>
I have a React/Electron app, where I'm trying to use the new CSS Houdini paint() function (as demonstrated in this page). In my project's index.html file I have added a script tag with the paintWorklet addModule() function as shown:
<script>
CSS.paintWorklet.addModule('../src/ResultDisplay/DefaultResultDisplay/testPaint.js');
</script>
Then in that testPaint.js file I have essentially a copy of what's shown in that blog post:
registerPaint(
"testPaint",
class {
paint(ctx, geom) {
console.log("painting!!!");
const circleSize = 10;
const bodyWidth = geom.width;
const bodyHeight = geom.height;
const maxX = Math.floor(bodyWidth / circleSize);
const maxY = Math.floor(bodyHeight / circleSize);
for (let y = 0; y < maxY; y++) {
for (let x = 0; x < maxX; x++) {
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(
x * circleSize * 2 + circleSize,
y * circleSize * 2 + circleSize,
circleSize,
0,
2 * Math.PI,
true
);
ctx.closePath();
ctx.fill();
}
}
}
}
);
And finally my css file:
.container {
background-image: paint(testPaint);
display: flex;
margin: 4px;
border-radius: 12px;
height: 75px;
}
I should point out I am using CSS Modules, so this file is defaultResultStyles.module.scss; not sure if that affects anything. When I bring up the component that's meant to have these styles in my app, it has no styles, though inspecting it, it does display background-image: paint(testPaint). The console.log that I added to the testPaint.js` file is never shown.
I have tried multiple variations of the filepath for addModule; I've tried just testPaint.js, starting it with ./src and src both, but nothing seems to work; is this possible in an Electron/React app?
The addModule function will not work through webpack or other bundlers, it instead works through the native module system of browsers. You have to put the testPaint.js file in the public directory, otherwise it would get bundled with everything else.
Here's what I added to the index.html to get it to run from the public directory on a local Create React App project:
<script>
CSS.paintWorklet.addModule('%PUBLIC_URL%/testPaint.js');
</script>
I didn't actuallly set up any of the markup and just added the container class to test it out:
If you want to use this without going through the public folder (at all, because normally you'd have to add the paint module in the index.html which is changing the public directory), then I'd suggest using React Helmet to set up the script tags. As a note with this, the hot-reload features of CRA seems to prevent the scripts from updating, so every time you change the script tags, you'll need to refresh the page manually.
import React from 'react';
import { render } from 'react-dom';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';
// Render these styled components like normal react components.
// They will pass on all props and work
// like normal react components – except they're styled!
const Demo = styled.div`
background: #1108a0;
padding: 50px 0;
`;
const Test = styled.div`
--color: cyan;
--multiplier: 0.24;
--pad: 30;
--slant: 20;
background: paint(background-canvas);
transition: --multiplier 0.4s;
font: bold 6em sans-serif;
color: yellow;
text-shadow: 0 3px 1px cyan;
line-height: 1.5em;
width: max-content;
padding-left: 30px;
padding-right: 50px;
isolation: isolate;
&:hover {
--multiplier: 1;
}
& span {
mix-blend-mode: exclusion;
}
`;
export const App = () => (
<Demo>
<Test className="el" right={'right'}>
<span>JS-in-CSS</span>
</Test>
</Demo>
);
export const Helm = () => (
<Helmet>
<script language="javascript+paint">{`
registerPaint('background-canvas', class {
static get inputProperties() {
return ['--multiplier', '--color', '--pad', '--slant'];
}
paint(ctx, geom, properties) {
let multiplier = +properties.get('--multiplier').toString();
let c = properties.get('--color').toString();
let pad = +properties.get('--pad').toString();
let slant = +properties.get('--slant').toString();
ctx.moveTo(0, 0);
ctx.lineTo(pad + (geom.width - slant - pad) * multiplier, 0);
ctx.lineTo(pad + (geom.width - slant - pad) * multiplier + slant, geom.height);
ctx.lineTo(0, geom.height);
ctx.fillStyle = c;
ctx.fill();
}
})
`}</script>
<script>{`
if ("paintWorklet" in CSS) {
const src = document.querySelector('script[language$="paint"]').innerHTML;
const blob = new Blob([src], {
type: 'text/javascript'
});
CSS.paintWorklet.addModule(URL.createObjectURL(blob));
}
`}</script>
</Helmet>
);
render(
<div>
<Helm />
<App />
</div>,
document.getElementById('root')
);
If you're looking to avoid using /public, you can use a monorepo manager like Yarn Workspaces to keep your worklet in a dedicated package. Then, you can import it into your client app like you would any other package dependency.
Step by step (using Yarn Workspaces):
create dedicated packages for your app (package.json name is #packages/myapp) and worklet (#packages/myworklet)
add your worklet as a dependency to your app -- from #packages/myapp run yarn add #packages/myworklet
import your worklet from #packages/myworklet and add it -- see https://houdini.how/usage/
I have a Map and a List inside the same container with 2:5 flex ratio set. I would like to be able to toggle doubleclick on the map to maximize it to fill the container or reset it back to the original size depending whether the List is hidden. I wrote the function below and bound it to the map's dblclick event. I see it go into this function but it has no effect on what I see. Any ideas why my list won't animate and hide?
google.maps.event.addListener(that.getMap(), 'dblclick', function () {
var list = Ext.ComponentQuery.query('#BuildingList')[0];
var height = list.getHeight();
if (list.isHidden()) {
list.show(Ext.Anim({
easing: 'easeInOut',
duration: 1000,
autoClear: false,
from: {
opacity: 0,
height: '0px'
},
to: {
opacity: 1,
height: list.getHeight() + 'px'
}
}));
} else {
list.hide(Ext.Anim({
easing: 'easeInOut',
duration: 1000,
autoClear: false,
from: {
opacity: 1,
height: list.getHeight() + 'px'
},
to: {
opacity: 0,
height: '0px'
}
}))
}
});
The best way to do this sort of thing I found was to set the flex to 0 of the list on the dblclick event (which I had to add as an override to the map), as follows:
that.addAfterListener('dblclick', function (view, map, zoomlevel, eOpts) {
var list = view.getParent().down('buildings');
Ext.Anim.run(list, 'fade', {
easing: 'easeInOut',
autoClear: false,
duration: 300,
after: function () {
list.setFlex(0);
}
});
});
I am trying to test this code but I am encountering problems. I have netbeans with default JavaFX platform.
This example is from this web site: http://onjava.com/pub/a/onjava/2007/07/27/introduction-to-javafx-script.html?page=4
package captureexample1;
import java.io.*;
import javafx.ui.*;
import javafx.ui.canvas.*;
import javafx.ui.filter.*;
import java.awt.Robot;
import java.awt.Rectangle;
import java.awt.image.RenderedImage;
import javax.imageio.ImageIO;
import java.lang.System;
class CaptureExample extends CompositeNode{
attribute lx: Integer;
attribute ly: Integer;
operation CaptureExample();
}
attribute CaptureExample.lx = 0;
attribute CaptureExample.ly = 0;
operation saveCapture(lx_copy:Integer, ly_copy:Integer) {
var robot = new Robot();
var rect = new Rectangle (lx_copy, ly_copy, 50, 50);
var BI=robot.createScreenCapture(rect);
var file = new File(".//capture.jpg");
ImageIO.write((RenderedImage)BI, "jpg", file);
}
function CaptureExample.composeNode() =
Group{
transform: []
content:[ImageView {
transform: []
image: Image { url: ".//app//Sunset.gif" }
cursor: DEFAULT
onMouseClicked: operation(e:CanvasMouseEvent) {
saveCapture(e.source.XOnScreen,e.source.YOnScreen);
}
onMouseMoved: operation(e:CanvasMouseEvent) {
lx = e.x;
ly = e.y;
}
},
Rect{
x: bind lx
y: bind ly
width: 50
height:50
strokeWidth: 1
stroke: black
}]
};
Frame {
centerOnScreen: true
visible: true
height: 230
width: 300
title: "Capture the screen..."
onClose: operation() {System.exit(0);}
content: ScrollPane {
background: white
view: Canvas {
background: black
cursor: DEFAULT
content: CaptureExample
}
}
}
It seems you are mixing JavaFX script and JavaFX2.
JavaFX script (aka JavaFX 1.3) is obsolete, not supported and old.
modern JavaFX 2 uses Java as language instead of FX script. You can see examples here: http://docs.oracle.com/javafx/2/get_started/jfxpub-get_started.htm
If you really want to use JavaFX 1.3:
get older NetBeans, like 6.1
rename you .java file to .fx
But if you just trying to learn JavaFX I really advise you to try JavaFX 2.
Can I apply clipview to a vertical expanding Group? Time to time I'm appending text to a group and want to use scrollbar to navigate in that group. The scrollbar part is working when I assign it to the group itself but want to limit the size of the group by using clipview.
Anyone having experience in this?
The clipview basically just creates a view portal into its content. Here is a simple example. (You would need to handle the clipY properly when clip.maxY is < scene.height).
var group = VBox { };
var ndx:Integer = 0;
def cv : ClipView = ClipView {
pannable: false
node: group
width: bind scene.width - sb.layoutBounds.width
height: bind scene.height
};
var scene: Scene;
var sb: ScrollBar;
Stage {
title: "ClipView Test"
scene: scene = Scene {
width: 250
height: 80
content: [
cv,
Rectangle {
layoutX: bind scene.width - sb.layoutBounds.width - 50
width: 50
height: 50
fill: Color.RED
onMouseClicked: function(e) {
insert Text { content: "Text - {ndx++}" } into group.content;
if(cv.maxClipY > scene.height) {
cv.clipY = cv.maxClipY;
}
}
}
sb = ScrollBar {
vertical: true
layoutX: bind scene.width - sb.layoutBounds.width
height: bind scene.height
min: 0
max: bind cv.maxClipY
value: bind cv.clipY with inverse
}
]
}
}