I am making my first Electron application. I am trying to save a text file to the appData folder (example C:\Users\user\AppData\Roaming). I know I need to add import { app } from "electron"; some where but I am unsure where to place it.
In my index.js javascript I am writing the database settings that the user submits in his form to a text file. This is where I need to have the appData directory address.
// Write data to text file
var filepath = app.getPath("appData")
var filename = "database_quick_image_forensics.txt"
var inp_data = inp_host + "|" + inp_username + "|" + inp_password + "|" + inp_database_name + "|" + inp_table_prefix;
write_to_file(filepath, filename, inp_data);
My entire code is below:
./setup/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Setup</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="../_webdesign/dark/dark.css" />
<!-- // CSS -->
<!-- jQuery -->
<script>window.$ = window.jQuery = require('../javascripts/jquery/jquery-3.4.1.js');</script>
<script src="../javascripts/jquery/jquery-3.4.1.js" charset="utf-8"></script>
<!-- //jQuery -->
<!-- jQuery -->
<script src="./index.js" charset="utf-8"></script>
<!-- //jQuery -->
</head>
<body>
<div id="main_single_column">
<h1>Setup</h1>
<!-- Feedback -->
<div id="feedback_div" class="success">
<p id="feedback_p">Success</p>
</div>
<!-- //Feedback -->
<!-- Database connection form -->
<p>Host:<br />
<input type="text" name="inp_host" id="inp_host" value="localhost" />
</p>
<p>Port:<br />
<input type="text" name="inpport" id="inp_port" value="" />
</p>
<p>Username:<br />
<input type="text" name="inp_username" id="inp_username" value="root" />
</p>
<p>Password:<br />
<input type="text" name="inp_password" id="inp_password" />
</p>
<p>Database name:<br />
<input type="text" name="inp_database_name" id="inp_database_name" value="quick" />
</p>
<p>Table prefix:<br />
<input type="text" name="inp_table_prefix" id="inp_table_prefix" value="cf_" />
</p>
<p>
<button id="form_connect_to_database_submit">Connect to database</button>
</p>
<!-- //Database connection form -->
</div>
</body>
</html>
./setup/index.js
const fs = require('fs');
// Action = On submit
$(document).ready(function(){
$("#form_connect_to_database_submit").click( function() {
// Feedback
$('#feedback_div').show();
$('#feedback_div').removeClass("success");
$('#feedback_div').addClass("info");
$('#feedback_p').text("Connecting!")
// get all the inputs
var inp_host = $("#inp_host"). val();
var inp_username = $("#inp_username"). val();
var inp_password = $("#inp_password"). val();
var inp_database_name = $("#inp_database_name"). val();
var inp_table_prefix = $("#inp_table_prefix"). val();
// Test connection
var connection_result = connect_to_database(inp_host, inp_username, inp_password, inp_database_name, inp_table_prefix);
if(connection_result != "connection_ok"){
// Connection Failed
$('#feedback_div').removeClass("info");
$('#feedback_div').addClass("error");
$('#feedback_p').text(connection_result)
}
else{
// Connection OK
$('#feedback_div').removeClass("info");
$('#feedback_div').addClass("success");
$('#feedback_p').text("Connected")
// Write data to text file
var filepath = app.getPath("appData")
var filename = "database_quick_image_forensics.txt"
var inp_data = inp_host + "|" + inp_username + "|" + inp_password + "|" + inp_database_name + "|" + inp_table_prefix;
$('#feedback_p').text("Connected " + filepath)
write_to_file(filepath, filename, inp_data);
// Feedback
$('#feedback_div').removeClass("info");
$('#feedback_div').addClass("success");
$('#feedback_p').text("Connected to")
}
});
$('#inp_host').focus();
});
// Function connect to database
function connect_to_database(inp_host, inp_username, inp_password, inp_database_name, inp_table_prefix){
var mysql = require('mysql');
// Add the credentials to access your database
var connection = mysql.createConnection({
host : inp_host,
user : inp_username,
password : null, // or the original password : 'apaswword'
database : inp_database_name
});
// connect to mysql
connection.connect(function(err) {
// in case of error
if(err){
console.log(err.code);
console.log(err.fatal);
return err.code;
}
});
// Perform a query
$query = 'SELECT * FROM `cf_admin_liquidbase` LIMIT 10';
connection.query($query, function(err, rows, fields) {
if(err){
console.log("An error ocurred performing the query.");
console.log(err);
return;
}
console.log("Query succesfully executed", rows);
});
return "connection_ok";
} // connect_to_database
// Function write setup
function write_to_file(filepath, filename, inp_data){
var fullpath = filepath + "\\" + filename;
fs.writeFile(fullpath, inp_data, (err) => {
// throws an error, you could also catch it here
if (err) throw err;
// success case, the file was saved
console.log('Lyric saved!');
});
} // write_to_file
./main.js
const { app, BrowserWindow } = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow () {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
win.loadFile('index.html')
// Open the DevTools.
// win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
I know I need to add import { app } from "electron"; some where but I
am unsure where to place it.
The app module is always (in my experience) imported in your main process so you can control the applications lifecycle. However, if you want to use some of the app module functionality in your renderer process, you can import it there through the remote module ( as shown in the accepted answer to this question: How to use electron's app.getPath() to store data? )
const remote = require('electron').remote;
const app = remote.app;
console.log(app.getPath('userData'));
The main and renderer processes are key concepts in Electron so I'd suggest reading up on those. The gist is that you have one main process – it has no visual representation and it is involved with the lifecycle of your app, creating and destroying renderer processes (like BrowserWindows), communication between renderer processes, etc. – and you can have as many renderer processes as you need.
So if you want to read and write files you can do it in the renderer process as shown above – or you can do it in the main process. In the latter case, if a renderer process wants to save a file, it can message the main process through IPC, sending the data to be saved.
Which way you do it is an architectural choice.
To get the app path at your main process. Then use this code at your main.js
switch(process.platform) {
case 'darwin': {
return path.join(process.env.HOME, 'Library', 'Application Support', ...);
}
case 'win32': {
return path.join(process.env.APPDATA, ...);
}
case 'linux': {
return path.join(process.env.HOME, ...);
}
}
And going to get the path from the renderer then use this code at your renderer
const remote = require('electron').remote;
const app = remote.app;
console.log(app.getPath('userData'));
But to use require at your renderer, please make sure nodeintegration is true.
If I were you, I was going to get the app path at main process and store the file at main process as well.
Hence, importing many dependencies at renderer process is not a good choice.
The renderer process mainly takes care of showing your app in the Chromium browser.
So to make this operation at main process. Use this
at your main.js
const { ipcMain } = require('electron')
const appPath = () => {
switch(process.platform) {
case 'darwin': {
return path.join(process.env.HOME, 'Library', 'Application Support');
}
case 'win32': {
return process.env.APPDATA;
}
case 'linux': {
return process.env.HOME;
}
}
}
const writeToFile = (fileName, inData) => {
const fullPath = path.join(appPath(), "\\", fileName);
fs.writeFile(fullPath, inData, (err) => {
// throws an error, you could also catch it here
if (err) throw err;
// success case, the file was saved
console.log('Lyric saved!');
});
} // write_to_file
ipcMain.on('WRITE_TEXT', async (event, arg) => {
writeToFile(arg.fileName, arg.inData)
});
At your renderer process add this code.
const {ipcRenderer} = require('electron')
ipcRenderer.sendSync('WRITE_TEXT',{fileName, inData})
As you can see, at renderer process, this is sending the inp_data to your main process through 'WRITE_TEXT' IPC channel.
One more thing here, at your code. You are connecting your DB at your renderer and it's possible but this is not a right choice. Please think while you are having the several renderer. You should move this to main process too.
Context: I have a use case where in the components used is firebase realtime database in Polymer 2.x. I have a function that does transformations on certain user activity with the firebase realtime object. I used polymerfire webcomponent.
What I want is: on user closes tab or window, save the data into firebase realtime database and then close the window.
Result: I used on beforeunload of window in the script of the polymer element. But not able to fire a method inside polymer element that triggers storage of the data in realtime db.
What I am looking for:
1. A way to initiate the element public function from script of an element.
Or
2. a better way to implement on window/tab close save the data
Thanks.
Code:
<!DOCTYPE html>
<dom-module id="t-page">
<template is="dom-bind">
....
</template>
<script>
var myEvent = window.attachEvent || window.addEventListener;
var chkevent = window.attachEvent ? 'onbeforeunload' :
'beforeunload'; /// make IE7, IE8 compitable
myEvent(chkevent, async function (e) { // For >=IE7, Chrome, Firefox
var confirmationMessage = 'Are you sure to leave the page?'; // a space
(e || window.event).returnValue = confirmationMessage;
setTimeout(async () => {
document.getElementById('trello-page').onCloseWindow();
}, 2500);
return confirmationMessage;
});
/**
* #polymer
* #extends HTMLElement
*/
class TPage extends Polymer.Element {
static get is() {
return 't-page';
}
... some properties ....{ colUpdateArr{...}}
async onCloseWindow() {
for (var i = 0; i < this.colUpdateArr.length; i += 2) {
var toCol = this.colUpdateArr[i];
var fromCol = this.colUpdateArr[i + 1];
await this.$.query.ref.child(toCol.$key).child('tasks').set(toCol.tasks);
await this.$.query.ref.child(fromCol.$key).child('tasks').set(fromCol.tasks);
}
}
} //end Polymer.Element
window.customElements.define(TPage.is, TPage);
</script>
</dom-module>
I'm trying to get recapatcha v2 working in my ASP MVC project. The client's computers have IE10/IE11 and shows all intranet pages in compatibility view which causes the recaptcha not to show as it is intended.
The problem is it rarely accepts my answer even though it's right. It just shows a new image, but every once in awhile I get it right. Anyone else experience this?
If you enable compability view for google.com in IE and visit the demo site you can try it out.
reCAPTCHA requires that compatibility view is not enabled in order to work, see:
https://support.google.com/recaptcha/?hl=en-GB#6223838
You are seeing reCaptcha's fallback. It seems that you have to get two correct answers in a row. It then gives you a response code that you copy and paste into a <textarea> element.
So what you are possibly experiencing is that you aren't getting two consecutive reCaptchas correct.
You can test the fallback recaptcha by adding the fallback=true parameter to the JavaScript resource:
<script src="https://www.google.com/recaptcha/api.js?fallback=true" async defer></script>
As explained by #Coulton recaptcha does not support IE compatibility mode.
reCaptcha uses a function in javascript named querySelectorAll, and querySelector. IE 11 in compatibility mode renders as IE 7.0, and IE 7.0 and below don't seem to have the functions querySelectorAll and querySelector and that is why it fails.
Now, I am using .net webforms so you may have to adapt it a little for MVC, but here it is:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="reCaptcha.aspx.cs" Inherits="reCaptcha" %>
<!DOCTYPE html>
<script type="text/javascript">
// this defines these functions if they don't exist.
if (!document.querySelectorAll) {
document.querySelectorAll = function (selectors) {
var style = document.createElement('style'), elements = [], element;
document.documentElement.firstChild.appendChild(style);
document._qsa = [];
style.styleSheet.cssText = selectors +
'{x-qsa:expression(document._qsa && document._qsa.push(this))}';
window.scrollBy(0, 0);
style.parentNode.removeChild(style);
while (document._qsa.length) {
element = document._qsa.shift();
element.style.removeAttribute('x-qsa');
elements.push(element);
}
document._qsa = null;
return elements;
};
}
if (!document.querySelector) {
document.querySelector = function (selectors) {
var elements = document.querySelectorAll(selectors);
return (elements.length) ? elements[0] : null;
};
}
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js' type="text/javascript"></script>
<script src='https://www.google.com/recaptcha/api.js' type="text/javascript"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js' type="text/javascript"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>reCaptcha Test</title>
</head>
<body>
<h1>reCaptcha Test</h1>
<form id="frmResult" runat="server">
<div class="g-recaptcha" data-sitekey=""></div>
<script type="text/javascript">
function IeVersion() {
//Set defaults
var value = {
IsIE: false,
TrueVersion: 0,
ActingVersion: 0,
CompatibilityMode: false
};
//Try to find the Trident version number
var trident = navigator.userAgent.match(/Trident\/(\d+)/);
if (trident) {
value.IsIE = true;
//Convert from the Trident version number to the IE version number
value.TrueVersion = parseInt(trident[1], 10) + 4;
}
//Try to find the MSIE number
var msie = navigator.userAgent.match(/MSIE (\d+)/);
if (msie) {
value.IsIE = true;
//Find the IE version number from the user agent string
value.ActingVersion = parseInt(msie[1]);
} else {
//Must be IE 11 in "edge" mode
value.ActingVersion = value.TrueVersion;
}
//If we have both a Trident and MSIE version number, see if they're different
if (value.IsIE && value.TrueVersion > 0 && value.ActingVersion > 0) {
//In compatibility mode if the trident number doesn't match up with the MSIE number
value.CompatibilityMode = value.TrueVersion != value.ActingVersion;
}
return value;
}
var ie = IeVersion();
var reCaptchaApi = "";
$(document).ready(function () {
$('.g-recaptcha').each(function (index, obj) {
grecaptcha.render(obj, { 'sitekey': reCaptchaApi });
});
if (ie.CompatibilityMode) {
// loading it twice makes it load in compatibility mode.
$('.g-recaptcha').each(function (index, obj) {
grecaptcha.render(obj, { 'sitekey': reCaptchaApi });
});
}
});
</script>
</form>
</body>
</html>
This allows reCaptcha V-2 to load in compatibility mode.
I'm tinkering with the code from the Angular Dart tutorial to make use of the Tooltip class. Rather than have the text for the tooltip in the Dart file, I want to place it in the html file. I've tried
dom.Element footnote;
footnote = querySelector("#fn1");
htext = footnote.innerhtml;
This code is in the Tooltip class. I get warnings on the last two lines and the Dart doesn't run nor does it throw an error. How do I retrieve HTML from the main html file (i.e., not from a component html file)?
The original code is from the angular dart website tutorial, chapter four. The unchanged code doesn't build cleanly, but it doesn't appear to affect it operation. This is a known bug for which there is an open issue.
pub build output
[Info from Dart2JS]:
Compiling tutorial|web/main.dart...
[Dart2JS on tutorial|web/main.dart]:
1 warning(s) suppressed in package:tutorial.
[Info from Dart2JS]:
Took 0:00:11.779928 to compile tutorial|web/main.dart.
Built 182 files to "build".
This output is with the last line commented out
tooltip.dart
library tooltip;
import 'dart:html' as dom;
import 'package:angular/angular.dart';
#Decorator(selector: '[tooltip]')
class Tooltip
{
final dom.Element element;
#NgOneWay('tooltip')
TooltipModel displayModel;
dom.Element tooltipElem;
dom.Element footnote;
Tooltip(this.element)
{
element..onMouseEnter.listen((_) => _createTemplate())
..onMouseLeave.listen((_) => _destroyTemplate());
}
void _createTemplate()
{
assert(displayModel != null);
tooltipElem = new dom.DivElement();
footnote = querySelector("#fn1");
htext = footnote.innerhtml;
if (displayModel.text != null)
{
dom.DivElement textSpan = new dom.DivElement()
..appendHtml(displayModel.text)
..style.color = "white"
..style.fontSize = "smaller"
..style.paddingBottom = "5px";
tooltipElem.append(textSpan);
}
tooltipElem.style
..padding = "5px"
..paddingBottom = "0px"
..backgroundColor = "black"
..borderRadius = "5px"
..width = "${displayModel.imgWidth.toString()}px";
// position the tooltip.
var elTopRight = element.offset.topRight;
tooltipElem.style
..position = "absolute"
..top = "${elTopRight.y}px"
..left = "${elTopRight.x + 10}px";
// Add the tooltip to the document body. We add it here because we need to position it
// absolutely, without reference to its parent element.
dom.document.body.append(tooltipElem);
}
void _destroyTemplate()
{
tooltipElem.remove();
}
}
class TooltipModel
{
final String text;
final int imgWidth;
TooltipModel(this.text, this.imgWidth);
}
As you can see, I'm not using the html yet. I'm trying to get it to work one step at a time.
index.html
<!DOCTYPE html>
<html ng-app>
<head>
<title>Chapter Four - A Simple Recipe Book</title>
<link rel="stylesheet" href="style.css">
<script src="packages/web_components/webcomponents.js"></script>
<script src="packages/web_components/dart_support.js"></script>
</head>
<body>
<recipe-book></recipe-book>
<div id="fn1">
<h2>Citation</h2>
<p>source specification</p>
<p>additional information</p>
</div>
<script type="application/dart" src="main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
I added the div with the id fn1.
Answer
To summarize Günter Zöchbauer answers, I made the following changes to get it to work:
footnote = dom.querySelector("#fn1");
String htext = footnote.innerHtml;
You have import 'dart:html' as dom; which means that querySelector (without qualifier) can't be found or is used from another unqualified import if found.
With
footnode = dom.querySelector("#fn1");
// or
footnode = dom.document.querySelector("#fn1");
the whole document is searched except the content of shadow DOMs. If you want to search the shadow DOMs too you can use
footnote = dom.document.querySelector("* /deep/ #fn1");
or
footnote = dom.document.querySelector("* >>> #fn1");
The 2nd version is the newest but I don't know which browsers or polyfills support it yet.
It might sound stupid question but I am looking a way to give ID to each side of x3dom object, lets say cube so that i can create different attributes for each individual face. The only method that I have seen so far is "def" function. It would be really helpful if anyone can provide a simple sample for a cube. Thanking you in advance.
def is for defining a shape for reuse
you can def an object and then reuse it in a scene. useful for say making a forest of similar trees. an example on x3dom site is here just take a look at the source.
http://x3dom.org/x3dom/example/x3dom_defUse.xhtml
if you are using just a x3d Box defining every side isnt possible as its a primitive shape, def or id on the box wouldnt be able to effect a single face
if you used indexed triangle sets each one of them could be assigned an id that way
more on them here
http://x3dgraphics.com/examples/X3dForWebAuthors/Chapter13-GeometryTrianglesQuadrilaterals/_pages/page03.html
for how to use css ids
http://x3dom.org/docs/dev/tutorial/styling.html
here is a simple example using both the getelement by tag and by id
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://x3dom.org/x3dom/example/x3dom.css"></link>
<script type="text/javascript" src = "http://x3dom.org/x3dom/example/x3dom.js"></script>
</head>
<body>
<X3D width="500px" height="400px" showLog='true' showStat="true">
<Scene DEF='scene' >
<Shape >
<Box onclick="toggleRendering();" onmouseover="toggleRendering2();" onmouseout="toggleRendering3();" />
<Appearance><Material id="themat" diffuseColor='0 1 0' /></Appearance>
</Shape>
</Scene>
</X3D>
<script>
var flag = true;
function toggleRendering()
{
flag = !flag;
var aMat = document.getElementById("themat");
if (flag) aMat.diffuseColor = "1 0 0";
else aMat.diffuseColor = "0 0 1";
return false;
}
function toggleRendering2()
{
var mat = document.getElementsByTagName("Material");
var aMat = mat[0];
aMat.diffuseColor = "1 1 1";
return false;
}
function toggleRendering3()
{
var mat = document.getElementsByTagName("Material");
var aMat = mat[0];
aMat.diffuseColor = "0 0 0";
return false;
}
</script>
</body>
</html>