Whenever i try to load the google maps html code i never get anything to display and i get the following error:
ReferenceError: google is not defined
I can create a hyperlink to google maps but this isn't what i want. I also went ahead and got my own API key and put it into my code. Why isn't google defined? This seems too common of a problem to not have a solution.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>My first Google Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDX71YSt1efYJH3MdIsH3SF3kyJNjN-Z78&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatLng = new google.maps.LatLng(54.124634, -3.237029)
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var myMarker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "A place on Earth",
draggable: true,
})
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" />
</body>
</html>
Related
So, I am building an electron application and that application compares two csv files and create a file with data which is in both files. Now while this process is running I want to show a progress bar on browser window so how can I create a progress bar that will show progress of that script ?
P.S:- I don't want to open any new browser window. everything should be on same window.
You can create a simple progress bar by using nested divs:
const progressBar = document.getElementById('bar');
function setBar(percentage) {
progressBar.style.width = percentage + "%";
}
#bar-container {
width: 400px;
height: 25px;
background-color: lightgray;
}
#bar {
width: 0;
height: 100%;
background-color: firebrick;
transition: width 0.2s;
}
<button onClick="setBar(0);">0%</button>
<button onClick="setBar(20);">20%</button>
<button onClick="setBar(40);">40%</button>
<button onClick="setBar(60);">60%</button>
<button onClick="setBar(80);">80%</button>
<button onClick="setBar(100);">100%</button>
<div id="bar-container">
<div id="bar"></div>
</div>
In your index.html (or which page want to use it) add a link, progress and script elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo progress</title>
</head>
<body>
<a href="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_5MG.mp3" download >Download demo file</a>
<progress value="0" max="100" id="progress"></progress>
<script type="text/javascript">
window.progress = document.getElementById('progress')
</script>
</body>
</html>
(If you want you can use this site for testing: https://file-examples.com/)
In your main.js file add this inside the createWindow function:
ses.on("will-download", (event, downloadItem, webContents) => {
let fileName = downloadItem.getFilename();
let fileSize = downloadItem.getTotalBytes();
// This will save the file to your desktop:
downloadItem.setSavePath(app.getPath("desktop") + `/${fileName}`);
downloadItem.on("updated", (event, state) => {
let received = downloadItem.getReceivedBytes();
if (state === 'progressing' && received) {
let progress = Math.round((received / fileSize) * 100);
webContents.executeJavaScript(`window.progress.value = ${progress}`)
}
});
});
When you click the link the progress bar will show your download status in your index.html.
I am developing an AR app using Reactjs and 'AR.js'.I created this react app using the 'create-react-app' npm package. And I am hosting it on firebase. But the problem is that when I try to run the app it is showing the following error.
> [error] Error loading KPM data: error reading data. [error] Error
> reading KPM data from /markerNFT_0.fset3 [error] ARToolKitJS(): Unable
> to set up NFT marker.
The camera loads but the marker show the following error on console. The NFT markers are fine I check with another app it worked fine.
Below Is My Source Code
NB:- Both the marker and the GLTF file actually getting downloaded. I checked it with the chrome dev tools network tab. They are fine. This to Script on index.html is for the Home.js
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
DOWNLOAD GLTF
DOWNLOAD NFT MARKER
Home.js
import React, { Component } from 'react';
import fire from "./config/fire";
class Home extends Component{
constructor(props)
{
super(props)
this.state={
}
}
logout(){
fire.auth().signOut();
}
render()
{
return(
<div>
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true;"
embedded
arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
>
<a-nft
type="nft"
url="https://reactlogin3.web.app/trex"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
>
<a-entity
gltf-model="https://reactlogin3.web.app/scene.gltf"
scale="5 5 5"
position="0 0 0"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
</div>
)
}
}
export default Home;
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe#1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I cannot scale the image when moving the scale controller. It shows the following error:
Uncaught TypeError: canvas.requestRenderAll is not a function
Can please anyone help to solve this problem? I want the functionality to be implemented for image please refer to this. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Instagram</title>
<script type="text/javascript" src="fabric.js-1.7.21/dist/fabric.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<canvas id="c" width="500px" height="400px"></canvas>
<div id="range">
<input type="range" class="image-scale-lever" step="0.1" max="3" min="0.1" value="1" id="scale-control"></label>
</div>
<script type="text/javascript">
jQuery( document ).ready(function() {
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Image.fromURL('locket.png', function(oImg) {
oImg.set({
left: 0,
top: 0,
width:500,
height:400
});
canvas.add(oImg);
var scaleControl = $('#scale-control');
scaleControl.oninput = function(x) {
this.val(x);
oImg.scale(parseFloat(x)).setCoords();
canvas.requestRenderAll();
}
function updateControls() {
scaleControl.oninput(oImg.scaleX);
}
canvas.observe("object:scaling", function (e) {
updateControls();
});
});
});
[1]: https://withyoulockets.com/pub/media/catalog/product/cache/image/700x700/e9c3970ab036de70892d86c6d221abfe/k/a/katieopen1100px-min.png
Here is the result. You need to change the scale of the object on onchange event callback.
<!DOCTYPE html>
<html>
<head>
<title>Instagram</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" >
jQuery( document ).ready(function() {
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Image.fromURL('https://withyoulockets.com/pub/media/catalog/product/cache/image/700x700/e9c3970ab036de70892d86c6d221abfe/k/a/katieopen1100px-min.png', function(oImg) {
oImg.set({
left: 0,
top: 0,
width:500,
height:400
});
canvas.add(oImg);
var scaleControl = $('#scale-control');
scaleControl.on("change",function() {
var newValue = this.value;
oImg.scale(parseFloat(newValue)).setCoords();
canvas.renderAll();
})
function updateControls() {
scaleControl.oninput(oImg.scaleX);
}
canvas.observe("object:scaling", function (e) {
updateControls();
});
});
});
</script>
<body>
<canvas id="c" width="500px" height="400px"></canvas>
<div id="range">
<input type="range" class="image-scale-lever" step="0.1" max="3" min="0.1" value="1" id="scale-control"></label>
</div>
Check here:
https://jsfiddle.net/3mjhxcyn/2/
For some reason my code is not working. I don't get an error with badfile.jpg and regardless of the file, when I drop an image it just displays the image in the browser regardless of where it is dropped. I have not defined the button action yet. Any idea on why it's not working?
HomeController.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
namespace MVCDropZone.Controllers
{
public class HomeController : Controller
{
public IActionResult Index() {
return View();
}
private IHostingEnvironment _hostingEnvironment;
public HomeController(IHostingEnvironment environment)
{
_hostingEnvironment = environment;
}
[HttpPost]
public async Task<IActionResult> UploadFiles(IFormFile file)
{
var uploads = Path.Combine(_hostingEnvironment.WebRootPath, "uploads");
if (file.Length > 0)
{
using (var fileStream = new FileStream(Path.Combine(uploads, file.FileName), FileMode.Create))
{
await file.CopyToAsync(fileStream);
}
}
return RedirectToAction("Index");
}
}
}
Index.cshtml
#{
ViewData["Title"] = "Index";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" />
<title>Dropzone simple example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="~/Scripts/dropzone.js"></script>
</head>
<body>
<style>
.dropzone-container {
width: 100%;
}
.dropzone-drop-area {
background-color: lightcyan;
border: dashed 3px grey;
width: 450px;
min-height: 150px;
box-sizing: border-box;
padding: 6px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
cursor: pointer;
position: relative;
}
.dropzone-drop-area:hover {
background-color: darkorange;
border: dashed 3px black;
}
</style>
<script>
$(document).ready(function () {
Dropzone.options.uploader = {
paramName: "file", // The name that will be used to transfer the file
maxFilesize: 2, // MB
maxFiles: 1,
clickable: true,
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
uploadMultiple: false,
createImageThumbnails: true,
accept: function (file, done) {
if (file.name == "badfile.jpg") {
done("This is a bad file!");
}
else {
//Show a confirm alert and display the image on the page.
}
}
};
});
</script>
<div class="col-md-9">
<h2>File Drag & Drop Upload</h2>
<div class="dropzone-container" id="dropzone">
<form action="/Home/UploadFiles" id="uploader">
<div id="dropzone-drop-area" class="dropzone-drop-area">
</div>
</form>
</div>
<br />
<button type="button" class="btn btn-primary">Upload Files</button>
</div>
</body>
</html>
Your code looks fine, except the missing class dropzone in your form.
Dropzone.js attaches itself to all elements with the dropzone class.
See: https://www.dropzonejs.com/#usage
So try to change your Form-Code to:
<form action="/Home/UploadFiles" id="uploader" class="dropzone">
<div id="dropzone-drop-area" class="dropzone-drop-area">
</div>
</form>
I feel strange that I cannot find the actual dragging-handling code in Fabric.js's demo (for example, this one), but the objects are already draggable "automatically", which is not my case. Here's my code in an external test.js file:
$(function(){
var canvas = new fabric.Canvas('c');
canvas.setWidth(window.innerWidth);
canvas.setHeight(window.innerHeight);
fabric.Image.fromURL('1.png', function(img) {
var group = new fabric.Group([img],
{
hasBorders: false,
hasControls: false,
selectable: true,
evented: true
})
canvas.add(group).setActiveObject(group);
},
{
originX: 'left',
originY: 'top'
});
canvas.renderAll();
});
And here is the test.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
Am I missing something? Thank you.
UPDATE: solved by using the newest fabricjs (1.3.12) in github.