I've just setup atom and installed p5.js packages.
it is running but canvas is not visible.
sketch.js
function setup() {
createcanvas(200,200)
canvas.style("visibility", "visible")
// put setup code here
}
function draw() {
// put drawing code here
background(0);
rect(100,100,50,50);
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js example</title>
<style>
body {
padding: 0;
margin: 0;
}
</style>
<script src="libraries/p5.js"></script>
<script src="libraries/p5.sound.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>
on running it using atom editor the canvas is not visible on the browser screen
You have to capitalize the second c in createCanvas(width, height);
You can't use canvas.style("visibility", "visible"), so remove that line
3.For future reference, inspect the page and look at the console, I found both of these things from errors.
function setup() {
createcanvas(200,200)//on this line, capitalize the c in canvas
canvas.style("visibility", "visible")//remove this line
// put setup code here
}
Your html is all correct
#Hgbanana is correct. I thinks it would be better if you put your library scripts in the head tag to make sure the libraries load before the page. But it should work anyways.
Related
expected result:
My understanding of the below scripts is that I should be able to uncomment the //src="PAWSmap.js"; line in the scripts portion of the HTML page, refer to the JavaScript file that should define the map I desire.
This would mean the JavaScript file would deal with the map and future data while the HTML would simply refer to that file to display it.
result:
The map box however does not show up in the web browser when I follow the above logic.
It DOES show up when I run the HTML as is below, where the map set up and var creating is held within the HTML script.
This despite having followed two tutorials that would suggest that I should be able to achieve the "expected" method, having followed them closely.
const apiKey = 'pk.eyJ1IjoibWF4ZHVzbyIsImEiOiJja3p3Mzh3cHQ4M2VuMm5waGE3c3NpcGRoIn0.RCKfV5n8aOn2AUbXiS2qqA';
var map = L.map('map',{
center: [43.64701, -79.39425],
zoom: 15
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"></script>
<title>Document</title>
<style>
#map{
height: 800px;
width: 800px;
margin: 5rem auto;
}
</style>
<h2>
Critiacally Listed Species in BC
</h2>
</head>
<body>
<div id="map"></div>
<script>
//src="PAWSmap.js";
var map = L.map('map',{
center: [54.259070, -124.943178],
zoom: 6
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
</body>
</html>
Question:
Why is the reference to the JavaScript map file not working whereas the creation of the mapbox within HTML does work?
The syntax to load an external JavaScript file from your HTML page is:
<script src="path/to/file.js"></script>
Note that the src attribute and its value are within the <script> tag angle brackets, not as a child (i.e. not in between the opening and closing tags).
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script for further details about the syntax and possible attributes.
I'm trying to get the HTML DOM from the following website: https://www.inputbcn.com/en/tickets#/events
The 'default' DOM of this website its the following:
<!doctype html>
<html lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<div id="xceed-widget"></div>
<script src="https://s3-eu-west-1.amazonaws.com/xceed-widget/2019-version/dist/loader.js" type="text/javascript"></script>
</body>
</html>
As you can see, when the page loads, a JavaScript script is called which will fill the page DOM.
I want to get the full page DOM after the script is executed and I'm using PhantomJS for this purpose. I began with the following code:
var page = require('webpage').create();
page.open("https://www.inputbcn.com/en/tickets#/events", function(status) {
console.log("Status: " + status);
if (status === "success") {
console.log(page.content);
}
});
But after executing this piece of code, I can see the response status fails.
How can I get the full document of this specific website?
NOTE: this answers did not help my purpose.
I'm working with Pixel Compare extension. It works well with rvt files, and almost with pdfs.
When comparing two pdf, the viewer will zoom in on a part of the file and i'm unable to unzoom it.
Furthermore, it appears the original file is reduced to the zoomed part.
Examples:
Heres the file before comparing :
And then after, it zooms on the left corner. I cannot access the rest of the file nor zoom out.
I looked for zooming properties on the api docs, but found nothing.
Ive honestly no idea what causes it and would welcome any pointer in the right direction.
Thanks in advance.
Edit:
I load pdf this way , Autodesk.Viewing.Initializer not pictured:
viewer1.addEventListener(Autodesk.Viewing.LOADER_LOAD_FILE_EVENT, function (e) {
viewer1.loadExtension('Autodesk.PDF').then(() => {
viewer1.loadExtension("Autodesk.Viewing.MarkupsCore");
viewer1.loadExtension("Autodesk.Viewing.MarkupsGui");
});
});
Have you tried other PDFs, and is this happening to all of them?
I just tried passing two arbitrary PDF files to the extension, and it seems to work fine:
If this is just related to a specific set of PDFs you're using, I'd ask you to share those with us (confidentially, we will not share them with anyone outside of Autodesk) via forge (dot) help (at) autodesk (dot) com so that we can debug it locally.
EDIT: here's a simple example of how I initialized the extension for the screenshots above:
<!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">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
<title>Autodesk Forge: Pixel Compare</title>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100vh;
}
#preview {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="preview"></div>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script>
Autodesk.Viewing.Initializer({ accessToken: '' }, function () {
const config = {
extensions: ['Autodesk.Viewing.MarkupsCore', 'Autodesk.Viewing.MarkupsGui']
};
const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'), config);
viewer.start();
viewer.loadModel('/path/to/one.pdf', {}, (model1) => {
viewer.loadModel('/path/to/another.pdf', {}, async (model2) => {
const pixelCompareExt = await viewer.loadExtension('Autodesk.Viewing.PixelCompare');
pixelCompareExt.compareTwoModels(model1, model2);
});
});
});
</script>
</body>
</html>
Try using this yourself, just replacing /path/to/one.pdf and /path/to/another.pdf with URLs to your own PDFs.
I used window.print() function and saved to a .pdf file.
Inside the page I've saved there is a <a href="www.example.com"> tag. When I'm downloading the file from Chrome the link works and it opens the right page. When downloading it from Edge it won't work and stays as a simple text.
Any solution?
I tested and reproduced the issue. I think we can only use some plugins to generate the pdf to get the href link working in Edge Legacy.
You could use jsPDF to generate the PDF. Use .textWithLink() to mimic standard HTML hyperlinks:
doc.textWithLink(text, x, y, { url: url });
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>
</head>
<body>
<script>
var doc = new jsPDF('p', 'pt');
doc.textWithLink('link', 20, 30, { url: 'http://www.google.com' });
doc.save("info.pdf");
</script>
</body>
</html>
I am trying setting up a self hosted VR-TheWorld server and render using Cesium.
When connecting to the VR-TheWorld server using a WebMapServiceImageryProvider (or a TileMapServiceImageryProvider) in cesium it connectes and renders correctly.
When point it to my locally hosted version, cesium throws the error:
An error occurred while rendering. Rendering has stopped.<br />
SecurityError: SecurityError
I cannot work out what is causing this error to occur, any pointers in the right direction would be appreciated.
HTML page used to connect below.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Viewer</title>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="../Build/Cesium/Cesium.js"></script>
<style>
#import url(../Build/Cesium/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script type="text/javascript">
var viewer = new Cesium.Viewer('cesiumContainer', {
imageryProvider: new Cesium.WebMapServiceImageryProvider({
url: 'http://www.vr-theworld.com/vr-theworld/tiles?',
//url: 'http://vrtw.local/tiles?',
layers: 1
}),
//imageryProvider: new Cesium.TileMapServiceImageryProvider({
//url: 'http://www.vr-theworld.com/vr-theworld/tiles1.0.0/1/',
//url: 'http://vrtw.local/tiles1.0.0/1/',
//fileExtension: 'jpeg'
//}),
baseLayerPicker: false
});
</script>
</body>
</html>
Turns out to be a CORS issue.
Once enabled on the localhost server cesium displayed the local data with no problems.