Print or Export Cesium Map Loading Division - javascript

It prints with this code but, the code is actually unable to get contents of the div where the map actually loads. I'm using toDataURL() in order to fulfill the need.
My HTML is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script href="script.js" type="text/javascript"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<button id="printVoucher" onclick="print();">Print</button>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTAwMTYzZi1kOGFjLTQyMDQtYjI0Ny03MWQ5ZTM1OGE2NjYiLCJpZCI6Nzc4Niwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDQ3NDQ4OX0.LRLrZO7tSId3sR7xYPOxkS1ODfaQuyQygD9mwWQ1TGQ';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
My CSS is as follows:
body
{
background-color: wheat;
}
canvas
{
border:1px solid red;
width: 100%;
height: 100px;
}
#cesiumContainer
{
width: 100%;
height: 500px;
}
My JavaScript is as follows:
$(function()
{
var viewer = document.getElementById("cesiumContainer");
function print_voucher()
{
var win = window.open();
win.document.write("<br><img src='"+viewer.toDataURL()+"'/>");
win.print();
win.location.reload();
}
$("#printVoucher").click(function(){ print_voucher(); });
});
See the Output what I get with this above code.
Click here to visit the GitHub Project Link.

The problem was because by the time you're taking the screenshot, the WebGL drawing buffer has already been swapped out. This happens for performance reasons, you can read more about it here:
https://stackoverflow.com/a/32641456/1278023
The issue has been fixed by changing some lines of codes as follows:
var viewer = new Cesium.Viewer('cesiumContainer', {
contextOptions: {
webgl: {
preserveDrawingBuffer: true
}
}
});
Here is the full set of HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script href="script.js" type="text/javascript"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<button id="printVoucher" onclick="print();">Print</button>
<script>
Cesium.Ion.defaultAccessToken = 'XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX';
var viewer = new Cesium.Viewer('cesiumContainer', {
contextOptions: {
webgl: {
preserveDrawingBuffer: true
}
}
});
</script>
</body>
</html>
Find the updated GitHub project Link

Related

Window.showDirectoryPicker() not working in Google Chrome 107

I've read about Window.showDirectoryPicker() here and it should be supported by Google Chrome 107, so I don't understand why I'm not seeing a window popup to select a directory!
const butDir = document.getElementById('butDirectory');
butDir.addEventListener('click', async () => {
const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
console.log(entry.kind, entry.name);
}
});
body {
background: #6e28d9;
padding: 0 24px;
margin: 0;
height: 100vh;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<h1>Hi friend, try edit me!</h1>
<p>Just some text</p>
<input type="button" id="butDirectory" value="Open Directory">
</body>
<script src="src/script.js"></script>
</html>
Sorry! It's actually working, but it needs to be opened in its own tab entirely, i.e. not in JSFiddle!

How can I hyperlink the last letter in a Quill editor?

I have the following code (also on jfiddle https://jsfiddle.net/96ye4hL4/1/ )
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link href="https://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.quilljs.com/1.2.0/quill.js"></script>
</head>
<body>
<div id="editor0"></div>
<script type="text/javascript">
const quill = new Quill("#editor0", {
modules: { toolbar: true },
theme: "snow"
});
quill.setContents({"ops":[{"insert":"Index"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"link":"http://google.com"},"insert":"FooM"},{"insert":"\n"},{"insert":"\n"}]},)
</script>
</body>
</html>
When I click on the right most character in a hyperlink (the M in FooM), the hyperlink window does not pop up.
How can I pop up the hyperlink window upon clicking the last letter in FooM?
This is an open issue with the Quill library.
https://github.com/quilljs/quill/issues/1931
Notice your code snippet will not run, but standard HREF does:
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<link href="https://cdn.quilljs.com/1.2.0/quill.snow.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.quilljs.com/1.2.0/quill.js"></script>
</head>
<body>
<div id="editor0"></div>
<script type="text/javascript">
const quill = new Quill("#editor0", {
modules: { toolbar: true },
theme: "snow"
});
quill.setContents({"ops":[{"insert":"Index"},{"attributes":{"header":1},"insert":"\n"},{"attributes":{"link":"http://google.com"},"insert":"FooM"},{"insert":"\n"},{"insert":"\n"}]},)
</script>
FooM
</body>
</html>

JavaScript - document.write not working

I am trying to print an h3 that has an id of question, but it won't work.
function questions() {
var question = document.getElementById("question");
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>
As you can see, the result is fine until it reaches the JavaScript. How can I fix this? I know document.write isn't the best thing to use to print stuff, but I am just testing something.
document.getElementById("question") returns a DOM object (as you saw) and you want to access the HTML within it, so use the innerHTML property to get it with document.getElementById("question").innerHTML. So technically there's nothing wrong with document.write; it's doing its job. You're just not selecting the content of the element.
function questions() {
var question = document.getElementById("question").innerHTML;
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>
question is an object of type HTMLHeadingElement. You are writing the string representation of that object, which is [object HTMLHeadingElement].
You are either interested in the raw HTML used to generate that element (question.outerHTML) or its contents (question.innerHTML).
Try waiting for dom content to load by placing your script in here:
document.addEventListener("DOMContentLoaded", function() {
// code...
});
Set question with innerHTML
var question = document.getElementById("question").innerHTML;
Also, dont nest the tags, use a span instead:
<h3>What is<span id="question">1+1?</span></h3>
You are trying to write an HTMLheading object into the page.
Use the .outerHTML property for this to work.
function questions() {
var question = document.getElementById("question").outerHTML;
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>

vim, right way to indent css and js inside html

Couldn't find proper solution in old questions, so
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body, input{
background-color:red;
}
</style>
<script>
function test() {
return false
}
</script>
</head>
<body>
<div></div>
</body>
</html>
everything except code inside <style> and <script> tags indented ok, how can I fix it?
As it turns out: That this has been done on purpose! Even my current Vim 8.1 installation contains an indent/html.vim-file which has such zero-indentation as its default setting.
That is however configurable via vimrc with:
let g:html_indent_script1 = "inc"
let g:html_indent_style1 = "inc"
...and -shame on us- is also mentioned in :help html-indent
I use othree/html5.vim plugin which supports css/javascript inside html. It works although this isn't probably the simplest solution.
Your code is indented like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body, input{
background-color:red;
}
</style>
<script>
function test() {
return false
}
</script>
</head>
<body>
<div></div>
</body>
</html>

Popup window does't work with google maps

I have a script that opens a popup windows every time the page is loaded. The script is:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ColorBox demo</title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</head>
<body>
<h1>Hello, there!</h1>
<h2>This is some content</h2>
<p>The popup will open in five seconds</p>
<div class="test">
<p>testtest</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"60%", height:"60%", href: "http://www.sitepoint.com"});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
It works fine, but if I use it with google maps, the popup windows resizes unexpectedly and the background color that surrounds the popup disappears. The code is:
<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
<script>
function openColorBox(){
$.colorbox({iframe:true, width:"30%", height:"30%", href: "http://www.sitepoint.com"});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>
I can't figure out why it won't display properly. Does anyone have an idea?
Thanks a lot!
I'm not sure about that api colorbox but I would go with the jQuery ui modal and just customize the look from there. Run this code below. Note: I added the reference to the jQuery ui css and code base. Then I append a new div to the body with an iframe in it then call the dialog method on that element. Hope this helps.
<!DOCTYPE html>
<html>
<html lang="ro">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7_q4j3wbRGmQr3V-wtKZrlv7Uz_-G7Dk&sensor=true"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100%; width: 100%; }
</style>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng( 44.4325, 26.1039),
zoom: 12
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
<div id="map-canvas">
</div>
<script>
function openColorBox(){
$('body').append("<div id='modalBox'><iframe style='height:300px; width:350px;' src='http://www.sitepoint.com'></iframe></div>");
$('#modalBox').dialog({
height:400,
width: 400
});
}
setTimeout(openColorBox,0);
</script>
</body>
</html>

Categories