iFrame-Zoom: redraw zim_divCanvas manually

Questions
1

I make a scene in a ZIM.Frame. If I make a browserZoom with Ctrl+MouseWhell, the ZIM_divCanvas get automatic new width and height - the canvas continues to be sharply defined.

Now, this scene I put in an iFrame. I zoom the iFrame with css: scale - the browserZoom is still be 1.
But if I scale the iframe, the ZIM_divCanvas get not new width and height - the canvas becomes pixelated. I think, because browserZoom is still 1.

How can I manually set the width an height of ZIM_divCanvas and redraw the scene?

2

Can you give us a small sample page so we can make sure we see what the problem is?

Does the problem happen when you use the ctrl scrollwheel on the iFrame? Or is it when you scale the iFrame in another way?

Are you in the FIT mode for the Frame scaleMode?

3

Sure, here is an example:

File ZIM.html:

<html>
<head>
<script type="module">
	import "https://zimjs.org/cdn/020/zim";
	new zim.Frame({
		scaling: "zim_div",
		color: "#aaaaaa",
		width: 1024,
		height: 768,
		ready: ready,
	});
	function ready() {
		new zim.CheckBox({
			size: 50,
			label: "TEXT",
		}).addTo();
	}
</script>
<style>
	html, body {
		padding: 0;
		margin: 0;
	}
	#zim_container {
		display: block;
		width: 1024px;
		height: 768px;
	}
</style>
</head>
<body>
	<div id="zim_container">
		<div id="zim_div"></div>
	</div>
</body>
</html>

File index.html:

<html>
<head>
<script>
	let slider;
	let iframe;
	window.addEventListener("load", function(){
		slider = document.querySelector("#slider");
		iframe = document.querySelector("#iframe");
		slider.addEventListener("input", function(evt) {
			console.log(evt.target.value);
			iframe.style.scale = evt.target.value;
		});
	})
</script>
<style>
#iframe {
	transform-origin: 0 0;
}
</style>
</head>
<body>
	<p><input id="slider" type="range" min="0.5" max="3" value="1" step="any" /></p>
	<iframe id="iframe" src="zim.html" width="1024" height="768" ></iframe>
</body>
</html>

If I drag in index.html the slider, the iframe scale - but the content (File ZIM.html) becomes pixelated.
How can I achive, that in ZIM.html the "ZIM_divCanvas" becomes new width an hight and redraw the scene?

4

The content of the iframe is a canvas - which is a picture. So scaling it is like scaling a picture. Here is a solution - let me know if it works for you.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Parent</title>
<script>
window.addEventListener("load", () => {
    const slider = document.querySelector("#slider");
    const iframe = document.querySelector("#iframe");
    const baseW = 1024;
    const baseH = 768;

    slider.addEventListener("input", (e) => {
        const scale = parseFloat(e.target.value);
        iframe.width = baseW * scale;
        iframe.height = baseH * scale;
    });
});
</script>
</head>
<body style="margin: 0; padding: 20px;">
    <p>
        <label>Scale: </label>
        <input id="slider" type="range" min="0.5" max="3" value="1" step="any" />
    </p>
    <iframe id="iframe" src="iframe2.html" width="1024" height="768" style="border: none;"></iframe>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM Frame in iframe</title>
<script type="module">
import zim from "https://zimjs.org/cdn/020/zim";

new Frame(FIT, 1024, 768, "#aaaaaa", dark, ready);
function ready() {
    // F = Frame, S = Stage, W = 1024, H = 768
    new CheckBox({
        size: 50,
        label: "TEXT"
    }).pos(50, 50);
}
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body style="margin: 0; padding: 0; overflow: hidden;"></body>
</html>
5

Wow - yes:
So the magic thing is:

  • iframe size not style.scale but width and height
  • canvas-scaling "fit"
    Thank you.
1 Like