I use electron to convert a video game made with Phaser 2 to a .exe. But arround my content, I have some border or margin.
I tried to use full screen to change that, I also tried with useContentSize but the problem was not solve.
So this is my JS file :
const { app, BrowserWindow } = require('electron')
let win;
function createWindow () {
// Cree la fenetre du navigateur.
win = new BrowserWindow({
//width: 886,
//height: 473,
useContentSize : true,
autoHideMenuBar : true,
icon: "favicon.ico",
//met la fenetre sans bordure
//frame : false,
//fullscreen : true,
})
//load the index.html.
win.loadFile('src/junkbuster.html');
win.setMenuBarVisibility(false);
win.setMenu(null);
//win.setContentSize(1700,1200);
}
app.on('ready', function(){
createWindow();
console.log(win.getContentBounds());
//800,600 => 786, 563
console.log(win.getSize()+"=>"+win.getContentSize());
});
And this is my HTML file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="./phaser.js"></script>
<script src="./index.js"></script>
<style type="text/css">
body {
background-color: black;
width:100vw;
height:100vh;
margin:0px;
}
body * {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
</body>
</html>
According to Issue #9419, the workaround that worked for me was to avoid mainWindow.setResizable(false) and use this instead:
mainWindow.on('will-resize', (e) => {
//prevent resizing even if resizable property is true.
e.preventDefault();
});
This problem come from the scaleMangaer of Phaser 2. So to fix this you need to go to Boot init file and to change the your scaleMode.
Go to https://phaser.io/docs/2.6.2/Phaser.ScaleManager.html for more informations
Related
I'm trying to change position and dimensions of the canvas but it's set as inline code with !important added, editing style attribute is instantly changed to original styling.
There is fullscreen option but it doesn't change anything for me: docs.
I've spend a lot of time trying to change it with no luck.
Simple example showing issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>tsParticles</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background-color: #212121;
}
#tsparticles {
width: 200px;
height: 200px;
position: absolute;
}
</style>
</head>
<body>
<div id="tsparticles"></div>
<script
src="https://cdn.jsdelivr.net/npm/tsparticles-preset-bubbles#2/tsparticles.preset.bubbles.bundle.min.js"></script>
<script>
(async () => {
await loadBubblesPreset(tsParticles); // this is required only if you are not using the bundle script
await tsParticles.load("tsparticles", {
autoPlay: false, //works
// FullScreen: false, //nothing changes
FullScreen: { enable: false, zIndex: 99 }, ////nothing changes
preset: "bubbles",
});
})();
</script>
</body>
</html>
`
I've tried changing inline styling and find a way to set it in config. Version v1 was sized according to its parent. With version v2 I'm stuck and out of ideas.
The property for disabling the full screen options is fullScreen, not FullScreen. The options are case sensitive.
I'm having a page with some inline css & javascript, the javascript on the original page contains some click and scroll logic which looks like this
$('#abc').on('click', function() {
$('html, body').scrollTop($('#xyz').offset().top)
});
it works fine on the original page;
Now I'm having a new page, which imports the original page as an iframe on the new page, but because it is iframe, the scope of the javascript code on original page inside this iframe is now bind to the iframe itself, and because it's bind to iframe itself, the $('html, body').scrollTop no longer works...
Is there anyway I can modify the original page to make it work through iframe?
for obvious security reasons, iframes are isolated in their own sandbox.
however, if you are in control of the code of the parent page and the iframe page, then you can use the message mechanism and pass your information through the event.data part.
here the example only passes text, for more extensive data, use JSON.stringify () / JSON.parse ()
file z1.html (parent)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Z1</title>
<style>
#iFrameZ2 { width: 400px; height: 150px; border: 1px solid red; }
#receiveTxt { margin: .5em; border: 1px solid blue; padding: .2em; width: 15em; }
</style>
</head>
<body>
<h4>main page (z1.html)</h4>
<input type="text" id="messageTxt" placeholder="a message...">
<button id="btSender">send to iframe</button>
<div id="receiveTxt">.</div>
<br> <br> iframe:<br>
<iframe id="iFrameZ2" src="z2.html" frameborder="0"></iframe>
<script>
window.onmessage = e =>
{
receiveTxt.textContent = e.data
/* ----------------------
if (e.data==='scroll')
{
document.querySelector('#xyz').scrollTop
}
------------------ */
}
btSender.onclick = _ =>
{
let info = messageTxt.value.trim()
if (info!='')
iFrameZ2.contentWindow.postMessage( info,'*')
}
</script>
</body>
</html>
file z2.html (iframe)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h6>z2.html</h6>
<input id="msgTxt" type="text" placeholder="send a message">
<button id="btSender">send msg</button>
<p id="getMsg">...</p>
<script>
btSender.onclick=_=>
{
let info = msgTxt.value.trim()
if (info!='')
window.parent.postMessage(info,'*')
}
window.onmessage = e =>
{
getMsg.textContent = e.data
}
</script>
</body>
</html>
when i try to export a variable in my HTML file and import in my main.js file it it throws an error:
SyntaxError: Unexpected token '<' that refeers to the <!DOCTYPE html> at the start of my index.html and i don't know why require doesn't grab the script with the module tag?
I just want the variable to show up in the main.js
I tried it with global.foo but that didn't work either
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Minecraft Launcher</title>
<link href="https://fonts.googleapis.com/css2?family=Open Sans" rel="stylesheet">
<style>
body {
background-color: rgb(0, 0, 0);
background-position: center;
color: white;
font-family: 'Open Sans', sans-serif;
}
</style>
</head>
<body>
<input type="button" value="Try me" id="startbutton">
<input type="text" name="input" id="input">
<script>
require('./renderer.js')
</script>
<script type="module">
module.exports.foo = 5;
</script>
</body>
</html>
main.js:
const { app, BrowserWindow } = require('electron')
// Variables
let startbutton;
app.on('ready', () => {
createWindow();
})
function startvariables() {
console.log("jup")
startbutton = window.document.getElementById("input")
console.log(startbutton.value)
}
function createWindow() {
var mainWindow = new BrowserWindow({
width: 950,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadFile('./index.html')
mainWindow.webContents.openDevTools()
}
setInterval(() => {
var foo1 = require('./index.html')
console.log(foo1)
}, 200)
That will definitely not work: node and electron's implementations of require expect a JS file, whether from the main or a renderer process. It is unable to extract the content of a <script> tag within an HTML file.
It looks like you may be trying to communicate some data from your renderer to your main process: electron offers IPC system for this very purpose.
The following simple code open a webpage with an Amazon phone softphone, I would like to also open a URL on the same page - to the right of the softphone. I cant figure it out. Thank you kindly for your help. This line opens the URL in a new tab, but I want it in the same window to the right of the softphone: window.open(screenpopURL) all of the whitespace in the attached image.
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Call Center</title>
<meta charset="UTF-8">
<script src="amazon-connect.min.js"></script>
<style>
*, body {
margin: 0;
padding:0
}
iframe {
border: 0px
}
#containerDiv {
float: left;
width: 320px;
height: 465px
}
</style>
</head>
<body>
<div id="containerDiv"></div>
<script>
connect.core.initCCP(containerDiv, {
ccpUrl:"https://XXXX.awsapps.com/connect/ccp-v2/softphone",
loginPopup: true,
softphone: {
allowFramedSoftphone: true
}
});
connect.contact(function(contact) {
contact.onConnecting(function(contact) {
var attributeMap = contact.getAttributes();
var baseURL = attributeMap.screenPopURL.value;
var searchString = attributeMap.screenPopValue.value;
var screenpopURL = baseURL + searchString + ".html";
window.open(screenpopURL)
});
});
</script>
</body>
</html>
Create a full page background image slideshow like http://beyondfayte.com/ and http://hmxmedia.com/ using Flash?
I'm new to flash and I want to know hoe to create these full screen image slideshows, that start on page load and scale proportionally just like the above two websites, using Flash CS5 AS3.
Something like:
HTML:
<!doctype html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="your_styles.css">
</head>
<body>
<object>
<embed src="your_flash.swf" />
</object>
</body>
</html>
CSS:
html,
body
{
height: 100%;
padding: 0px;
}
body{ overflow: hidden; }
object,
embed
{
width: 100%;
height: 100%;
}
AS3:
package
{
import flash.display.Sprite;
import flash.display.StageScaleMode;
import flash.display.StageAlign;
public class Document extends Sprite
{
/**
* Constructor
*/
public function Document()
{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
}
}
}
You need to the flash width and height to 100% in the HTML tags, and listen to the Event.RESIZE handler to manually scale and move around the content as you want (use stage.stageWidth / stage.stageHeight to get the new size).
You also need to set the scaleMode to something useful, eg: stage.scaleMode = StageScaleMode.NO_SCALE;