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.
Related
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 cant figure out how you detect the user changing a ratchet toggle element in javascript. In the code below I have got it to detect clicking on the toggle but it doesn't work if the user slides the toggle. Is there a standard correct way of detecting toggle state change? (A documentation link would be fine here - I couldn't find anything).
(BTW, I am currently just running in the firefox browser to evaluate Ratchet, before I add to a Cordova project.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ratchet template page</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link href="/My_Webs/experiments/cordova/ratchet-example/css/ratchet.css" rel="stylesheet">
<link href="/My_Webs/experiments/cordova/ratchet-example/css/ratchet-theme-ios.css" rel="stylesheet">
<script src="/My_Webs/experiments/cordova/ratchet-example/js/ratchet.js"></script>
<script src="/My_Webs/experiments/cordova/ratchet-example/js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function(){
$("body").on(
"click",
"#toggle1",
function(e){
console.log("toggle1 clicked " + $("#toggle1 .toggle").hasClass("active"));
});
});
</script>
</head>
<body>
<div class="content">
<ul class="table-view">
<li class="table-view-cell" id="toggle1">
Item 1
<div class="toggle">
<div class="toggle-handle"></div>
</div>
</li>
</li>
</ul>
</div>
</body>
This works...
document
.addEventListener(
'toggle',
function( e ){
console.log(
$(e.target).parent().attr("id") + ", " +
$(e.target).hasClass("active")
);
}
);
If you want to post a toggle as a checkbox input type, you may link the toggle and a hidden input into your form.
The link is done by the id of the input and the data-matcher property of the toggle.
The script will link all your toggles to inputs given that you have correctly set the id and data-matcher tags.
Following script will do the state copy of the toggle to the input.
<input style="visibility: hidden" type="checkbox" value="" id="accept_cgu">
<ul class="table-view">
<li class="table-view-cell">
Accepter les termes des CGU *
<div class="toggle" data-matcher="accept_cgu">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
<script>
$( document ).ready(function() {
$('.toggle').on('toggle', function (event) {
var inactive_ids = [];
var active_ids = [];
$('.toggle').each(function () {
if ($(this).hasClass("active")) {
active_ids.push($(this).attr("data-matcher"))
} else {
inactive_ids.push($(this).attr("data-matcher"))
}
});
$.each(active_ids, function (key, value) {
$('#' + value).prop('checked', true);
});
$.each(inactive_ids, function (key, value) {
$('#' + value).prop('checked', false);
});
});
});
</script>
This is what I have tried:
<!doctype html>
<html>
<head>
<title>Editor</title>
<meta http-equiv="x-ua-compatible" content="ie=9"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/connector.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />
<script type="text/javascript">
window.onload = function ()
{
var paper = new Raphael(Raphael("container", "100%", "100%"));
var line = paper.path();
var start = function (x, y) {
this.ox = this.attr("x");
this.oy = this.attr("y");
var line = paper.path("M", this.ox, this.oy);
},
move = function (dx, dy) {
this.attr({
x: this.ox + dx,
y: this.oy + dy
});
paper.path("L",x,y);
},
up = function () {
this.animate({
opacity: 0
}, 500);
};
paper.set(line).drag(move, start, up);
};
</script>
</head>
<body>
<div id="container">
<div id="header" style="margin-bottom: 0;">
<h1 id="title">Editor</h1>
<div id="footer"></div>
</div>
</div>
</body>
</html>
Here's the live demo: https://jsbin.com/giqufilusu/1/edit?html,output
I don't know why its not working. Is there a syntax problem or I didn't code the correct way. There are some examples on web but most of them use jquery + raphael js to draw line on mouse events but I want to draw with drag() method of raphael. How do I fix this?
I don't know if I got you right.
I guess this is what you want to achieve?
You defined the line variable only in the scope of the start function. To adapt the line you need to make it available to all functions. The jsBin is a quick and dirty approach which should give you a hint how you can do this line drawing with Raphael.
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>
I'm unable to get a dojo example listed under dojo's official documentation to work.
When I run Dojo's demo from their web page, it works fine. But when I copy and paste the code (which appears below) and try to run it in ay web browser, I get an error. For multiple different web browsers, I get an error in my console log that says:
Error: Tried to register widget with id==borderContainerThree but that
id is already registered
This is frustrating because I can't figure out the difference that is causing my code to fail, but their code to work.
I've copied their code verbatim from the web page.
The example is given on the page:
http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html
and is titled:
"BorderContainer Inside A Dijit Template"
A similar question here (dojo 1.8: Error: Tried to register widget with id==main_bContainer but that id is already registered) and here (Dojo - "Tried to register widget with id==centerPane but that id is already registered") said this might be because I'm calling parser.parse twice, but if I uncomment the parser.parse line,
the error disappears, but there is no content displayed on the web page.
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dijit/layout/BorderContainer — The Dojo Toolkit - Reference Guide</title>
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/default.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/pygments.css" type="text/css" />
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/css/site.css">
<link rel="stylesheet" href="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/resources/guide.css">
<script type="text/javascript">
dojoConfig = {
async: true
};
</script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/dojo/dojo.js"></script>
<script type="text/javascript" src="http://dojotoolkit.org/reference-guide/1.9/_static/js/docs/guide.js"></script>
</head>
<body class="claro" >
My Test
<script type="text/javascript">
require([
"dojo/parser",
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/AccordionContainer",
"dijit/layout/AccordionPane"
], function(parser, declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin){
declare("MyDijit",
[_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
// Note: string would come from dojo/text! plugin in a 'proper' dijit
templateString: '<div style="width: 100%; height: 100%;">' +
'<div data-dojo-type="dijit/layout/BorderContainer" design="headline" ' +
' style="width: 100%; height: 100%;" data-dojo-attach-point="outerBC">' +
'<div data-dojo-type="dijit/layout/ContentPane" region="center">MyDijit - Center content goes here.</div>' +
'<div data-dojo-type="dijit/layout/ContentPane" region="bottom">MyDijit - Bottom : ' +
' <div data-dojo-type="dijit/form/Button">A Button</div>' +
'</div>' +
'</div></div>'
});
parser.parse();
});
</script>
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true" id="borderContainerThree">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div data-dojo-type="dijit/form/Button" id="createButton">Create Inner Dijit
<script type="dojo/on" data-dojo-event="click">
require(["dojo/dom", "dojo/dom-construct"], function(dom, domConstruct){
// Create a new instance
var newdijit = new MyDijit({}, domConstruct.create('div'));
newdijit.placeAt(dom.byId('mydijitDestination'));
newdijit.startup();
});
</script>
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left', splitter:false">
OUTER LEFT<br />
This is my content.<br />
There is much like it,<br />
but this is mine.<br />
My content is my best friend.<br />
It is my life.<br />
I must master it,<br />
as I must master my life.
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:false">
<div id="mydijitDestination" style="width: 100%; height: 100%"></div>
</div>
</div>
</body>
</html>
Any suggestions given as to what I'm doing wrong would be greatly appreciated.
The error indeed indicates that you're trying to create a widget with the same ID twice, either because you have two elements with the same ID, or because you are parsing the same markup twice.
I suggest commenting the line parser.parse() and by adding parseOnLoad: true to dojoConfig, for example:
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: true
};
</script>
The reason you won't see a thing when you comment the parsing line, is another issue. Most layout widgets in Dojo are generating their layout according to the space of the parent DOM node. This means you have to set the space of the widget by using CSS first, for example:
#borderContainerThree {
width: 100%;
height: 100%;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
overflow:hidden;
}
If you do that, then everything should work fine, just as in this fiddle: http://jsfiddle.net/92NT4/