I will start by saying I am far from a JavaScript guy. I work more with HTML and CSS, and "dabble" with JavaScript, as in tweak some code to make JQuery code do what I'd like it to on the front-end.
I am having a bit of an issue with a task I am trying to complete, which has led me to using NW.js (Node Webkit) for the first time.
I am trying to create a 4 button user interface that allows for the following 4 events to occur on click:
1. Load a website in a new window
2. Open windows explorer to a specific directory and allow the user to browse
3. Extend Windows Display on a Dual Monitor Setup
4. Clone Windows Display on a Dual Monitor Setup
I was originally pretty much finished and achieved my results easily with an HTML Application file - I know, outdated, but it allowed me to work within my skill set and achieve the tasks I needed fairly easily. Problem wa, it wouldn't allow for CSS3 and the website being opened used it, and it pretty much ruined the look of it as a whole. Sooo I needed something new.
I stumbled across NW.js and have started away on that. I've got my package loaded up, my "app" is now launch-able, but the old script isn't working and I am back to square one. I have no idea how to launch executables in Windows using NW.js - it's driving me bonkers!
Below is the code that worked in the HTML Application file (minus the file explorer, which I had yet to get to before realizing it wouldn't work):
<!DOCTYPE html>
<html>
<head>
<title>My HTML App</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" language="javascript">
function RunPad() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/system32/notepad.exe", 1, false);
}
function RunExtend() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/System32/DisplaySwitch.exe /extend", 1, false);
}
function RunClone() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/windows/System32/DisplaySwitch.exe /clone", 1, false);
}
function RunWebsite() {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("c:/Program Files/Internet Explorer/iexplore.exe", 1, false);
}
</script>
</head>
<body>
<div class="container">
<div class="col-1-2"><img src="website.jpg" onclick="RunWebsite();"></div>
<div class="col-1-2"><img src="resources.jpg"></a></div>
<div class="col-1-2"><img src="single_screen.jpg" onclick="RunExtend();"></div>
<div class="col-1-2"><img src="dual_screen.jpg" onclick="RunClone();"></div></div>
</div>
</body>
</html>
I'm really stuck on this and am not sure which route to take to complete this with NW.js
Any help would be appreciated.
ActiveXObject is for IE/Edge only so it won't work under Chromium (used by NW).
What you can do though is create individual Vbs scripts for each of your ActiveXObject functions and call/execute them as required with node.js (supported by NW) in this way...
function RunExtProgram(ProgName){
require('child_process').exec(ProgName,function(error,stdout,stderr){if(error!==null){alert('Unable to launch process:<br><br>'+stderr+'<br><br>'+ProgName);}});
}
Usage example:
RunExtProgram('C:/test/abc.vbs');
Related
Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.
I can write myself some JS code as long as its mostly plain. I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene. I'm also not used to using npm or any other similar package manager.
It was never really my job nor interest, so I never went there. Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.
I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later. But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.
I've picked two libraries that each seem easy to use and get the job done, when used separately. But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.
These are the libraries:
JSON Editor
JSON Schema Form Builder
They both declare a type named JSONEditor, which I can use as long as I don't reference both of the libraries at once.
So far I've tried to solve this by using modules and import-ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.
How would I solve this using plain JS if possible?
UPDATE: As suggested, I'm providing a minimal example that demonstrates my use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="editor" style="width: 300px; height: 200px;"></div>
<div id="form"></div>
</div>
<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>
<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>
<script>
// Library 1: The JSON code editor.
var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
// Library 2: The form builder.
var form = new JSONEditor(document.getElementById("form"), {
ajax: true,
schema: {
$ref: "/api/describe/service/test"
}
});
</script>
</body>
</html>
If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div>. But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:
Uncaught TypeError: t is undefined
This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.
This is understandable to me and isn't the issue per-se. The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.
The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270
His recommended solution is something like the following:
<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorB = JSONEditor;
</script>
If you must use script tags this is probably the way to go.
I have a really simple Delphi XE7 program. It is basically just a TWebBrowser component embedded in a form with no extra code attached, other than a button that fires off the Browser.Navigate method. My understanding is that TWebBrowser is just an ActiveX wrapper for IE.
I am trying to use this to display a very simple page that references the D3 Javascript library (but so far doesn't do anything with it), and the web pages are served from a localhost webserver that is running on my PC using WAMPSERVER.
The web pages run just fine in Chrome or IE 11 (I have Windows 7, 64 bit). But when I try to view them within the Delphi/TWebBrowser program I get the IE error message "An error has occurred on the script on this page" (see image attached). The error seems to occur when trying to access the d3.js javascript library in the d3test/d3 folder on the local host. I have verified that the d3.js file does exist in this folder and this seems to be borne out by the fact that the page runs and displays just fine in both Chrome and IE.
Perhaps there is an issue with having an embedded web browser access locally hosted pages? Additional background -I have also cleared the IE cache, reset the Internet options on the Windows Control Panel, set IE security settings to the minimum level and temporarily disable my Norton Firewall/Virus scanner.
Does anyone have any thoughts on this? I'm really hoping to be able to get some D3 charts embedded in my Windows-based program.
Here also is the html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3\d3.js"></script>
</head>
<body>
Hello World
</body>
</html>
I added answer from your comments below the question so its may
helpful to others
add this meta tag into your web page
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
In this case you should add this class to your code:
type TBrowserEmulationAdjuster = class
private
class function GetExeName(): String; inline;
public const
// Quelle: https://msdn.microsoft.com/library/ee330730.aspx, Stand: 2017-04-26
IE11_default = 11000;
IE11_Quirks = 11001;
IE10_force = 10001;
IE10_default = 10000;
IE9_Quirks = 9999;
IE9_default = 9000;
/// <summary>
/// Webpages containing standards-based !DOCTYPE directives are displayed in IE7
/// Standards mode. Default value for applications hosting the WebBrowser Control.
/// </summary>
IE7_embedded = 7000;
public
class procedure SetBrowserEmulationDWORD(const value: DWORD);
end platform;
class function TBrowserEmulationAdjuster.GetExeName(): String;
begin
Result := TPath.GetFileName( ParamStr(0) );
end;
class procedure TBrowserEmulationAdjuster.SetBrowserEmulationDWORD(const value: DWORD);
const registryPath = 'Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION';
var
registry: TRegistry;
exeName: String;
begin
exeName := GetExeName();
registry := TRegistry.Create(KEY_SET_VALUE);
try
registry.RootKey := HKEY_CURRENT_USER;
Win32Check( registry.OpenKey(registryPath, True) );
registry.WriteInteger(exeName, value)
finally
registry.Destroy();
end;
end;
Finaly add to your OnCreate of the Form:
TBrowserEmulationAdjuster.SetBrowserEmulationDWORD(TBrowserEmulationAdjuster.IE11_Quirks);
This should solve your problem
We've just launched our new Magento site and the letter 'c' is appearing in quotes immediately after the tag. It's not showing up before on my local machine or on our QA site, I've checked the template files and it is not there either. I'm almost certain it can not be a code issue as we have the same code running locally and on our QA site under version control with GIT.
We've cleared the cache and I've tried checking to see if JavaScript was inserting it with the chrome dev tools but could find nothing.
Strangely, the 'c' is not in the view source document but I can see it with the chrome inspector.
I also don't think it can be coming from Magento CMS Pages/Blocks as it loading immediately after the tag.
thanks for the link. after reviewing the page source, you have an extra c character in the header area:
<!-- END GOOGLE ANALYTICS CODE -->
c<script type="text/javascript">//<![CDATA[
var Translator = new Translate([]);
//]]></script>
Notice that c before the script tag?
Just in support to Benny Lin's very helpful answer.
What was happening was we had our Google Analytics code loading from a template file which contained the stray letter 'c'. We could see this on our local machines as this templates was disabled in the Magento admin settings, but not on production.
This issue seems to demonstrate that when a stray letter appears within the <body> tags on your dev tools inspector and not the view source page it may be because it is in the <head> section. The browser seems to push all poorly formatted html from the <head> section into the <body> section when rendering.
For example if you open the below html in the chrome browser you will see what I mean:
<!DOCTYPE html>
<html>
<head>
c<title>Title of the document in head</title>
<script type="text/javascript">
var test = "test";
</script>
</head>
<body>
The body of the document......
</body>
</html>
Also while we were searching for the stray letter, we were ably to remove it with the below JavaScript that targets the offending XML node in the DOM with an XPath expression and removes that node only.
<script type="text/javascript">
function _x(STR_XPATH) {
var xresult = document.evaluate(STR_XPATH, document, null, XPathResult.ANY_TYPE, null);
var xnodes = [];
var xres;
while (xres = xresult.iterateNext()) {
xnodes.push(xres);
}
return xnodes;
}
jQuery(_x('//html/body/text()[contains(.,"c")]')).remove();
</script>
As a proof of concept I would like to show the some Qooxdoo widgets (which i find pretty nice) in a very simple index.html file.
Here I try to show a button :
<head>
<title>Title</title>
<script type="text/javascript" src="http://demo.qooxdoo.org/3.5/framework/q-3.5.min.js"></script>
<script>
var button = new qx.ui.form.Button("Hello...");
this.getRoot().add(button, {left: 30, top: 20});
</script>
</head>
If I run the above I get this :
Uncaught ReferenceError: qx is not defined
Is my library link correct? Or is it even possible to link qooxdoo javascript in a HTML file? We already have a large established javascript application, and we would like to just drop in qooxdoo widgets that we like. Not sure if that is possible though.
You are including the qx.Website library and try to use qx.Desktop widgets. That ain't gonna work. Either you choose qx.Desktop and use the inline app approach [1] or you use the qx.Website widgets [2].
[1] http://manual.qooxdoo.org/current/pages/development/skeletons.html#inline
[2] http://demo.qooxdoo.org/devel/website-api/index.html#Accordion
I'm learning JavaScript on Khan Academy and on Codecademy. I have just started learning. I really like the way that Khan teaches JS, however, I'm not finding any way of being able to apply what I am learning anywhere else except on Khan's engine. Khan is focusing on graphics and not on console based commands.
What I'm really looking for is a way that I can take what I am learning on Khan (graphics) and Codecademy (console) and 'run' these offline on my PC. So for example, that I will be able to 'run' all of these functions, etc:
confirm(), prompt(), rect(), triangle(), ellipse(), console.log(), etc., etc.
So, can anyone explain to me how to write, save and run such JavaScript programs offline on my PC?
Programming on Khan Academy uses the JavaScript language along with the library ProcessingJS.
Here is a stand-alone program example derived from Processing.js Quick Start. This performs a very simple animation.
The graphics functions will match the the documentation at khanacademy.org and also here.
To run this, you need to download the file "processing.js" from here and save the following as "hello.html" (or whatever you want to call it), then open "hello.html" with a browser.
<script src="processing.js"></script>
<script type="application/processing" data-processing-target="pjs">
void setup() {
size(200, 200);
stroke(0), strokeWeight(2);
println('hello web!');
}
void draw() {
background(100); // clear the frame
ellipse(abs(frameCount%400-200), 50, 25, 25);
}
</script>
<canvas id="pjs"> </canvas>
Alternative: Advanced JavaScript programming style
Here is a stand-alone JavaScript program example based on snippets from Processing.js Quick Start -- this draws (and animates) a small analog clock.
The available graphics functions are the same as above, but here they require the prefix processing -- the parameter to sketchProc() below. Notice, in particular, the call to processing.line().
The instructions for running this are the same as above -- just put the following .html file in a folder along with the file processing.js...
<!DOCTYPE html>
<html>
<head>
<title>Hello Web - Processing.js Test</title>
<script src="processing.js"></script>
</head>
<body>
<h1>Processing.js Test</h1>
<p>This is my first Processing.js web-based sketch:</p>
<canvas id="canvas"></canvas>
<script>
function sketchProc(processing) {
processing.draw = function() {
var centerX = processing.width / 2, centerY = processing.height / 2;
var maxArmLength = Math.min(centerX, centerY);
function drawArm(position, lengthScale, weight) {
processing.strokeWeight(weight);
processing.line(centerX, centerY,
centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
}
processing.background(224);
var now = new Date();
var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
drawArm(hoursPosition, 0.5, 5);
var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
drawArm(minutesPosition, 0.80, 3);
var secondsPosition = now.getSeconds() / 60;
drawArm(secondsPosition, 0.90, 1);
};
}
var canvas = document.getElementById("canvas");
var processingInstance = new Processing(canvas, sketchProc);
</script>
</body>
</html>
You don't have to be online to run JavaScript. JavaScript is a client-side language, meaning it runs in your web browser. Since you're at the JavaScript stage, I'm going to assume you know at least the basics of HTML and hopefully CSS.
You can include a JavaScript file in your HTML document by placing this tag in the section.
<html>
<head>
<script src="/path/relavite/to/htmlpage/your.js"></script>
</head>
...
</html>
Then, you can either open your browser, then File > Open your html page, which now has the JavaScript linked to it, or you can right click the .html file in your file browser, and Open With > Chrome, FireFox, etc. to view the page locally.
Again, a connection to the web is not needed to run these files, since they are stored locally on your computer.
EDIT
Might as well include the file structure. It may be easier to visualize that way.
Locally on your computer, you create a folder named "myjavascripttest". Inside this folder, you create three files: index.html, style.css and script.js
The content of the HTML file is:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/path/relavite/to/htmlpage/your.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
The content of the CSS file is:
p {
background-color: blue;
}
The content of the JavaScript file is: (Note: this is jQuery, an extension of JavaScript)
$(document).ready(function() {
$(this).css('background-color', 'red');
});
Now, loading the HTML file in your browser will display a paragraph with a red background, though clearly the CSS says it should be blue. The JavaScript thus must be running!
The obvious solution would be to create an HTML file on disk with a tag containing the code you want to run. Open in a browser to run, refresh page to rerun.
You can also use nodejs, if you want to create command-line programs, or not use a browser.
confirm and prompt are native browser calls, but will need specific implementations in the case of nodejs. rect, triangle, and ellipse will need to be specifically implemented in both cases. console.log works natively in both nodejs and browsers.