I want to make some changes to the source code of xterm.js and test them before making a PR. I have been unsuccessful in generating a working 'distribution.'
(Apologies if my terminology is incorrect -- I am pretty new to web development)
Setup
I set up a simple test website with the following index.html
<!doctype html>
<html>
<head>
<script src="%PUBLIC_URL%/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
console.log(Terminal);
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>
</body>
</html>
In the location %PUBLIC_URL% I will place a JS source file xterm.js from either:
node_modules/xterm/dist/xterm.js - as added through npm
xterm.js/lib/xterm.js - as built from the GitHub repository
To build a local copy of xterm.js I took these steps:
git clone https://github.com/xtermjs/xterm.js.git xterm-local
cd xterm-local
npm install
npm run package
(Note: if you are following along at home I could not build xterm.js on Windows or Mac -- I only got through these steps using Ubuntu 18.04)
The commands all run successfully and the last one creates xterm-local/lib which contains xterm.js. I use that file to replace the copy that can be obtained from the NPM installation.
Results
Normal
When using the NPM dist/xterm.js I successfully see my terminal element rendered and the log reads
ƒ Terminal(options) {
this._core = new Terminal_1.Terminal(options);
this._addonManager = new AddonManager_1.AddonManager();
}
Using local build
When using my locally built output from xterm-local/lib/xterm.js there is no terminal element rendered, there is an error: Uncaught TypeError: Terminal is not a constructor and the log reads
{Terminal: ƒ, __esModule: true}
Terminal: ƒ e(e)
__esModule: true
__proto__: Object
Expectations
I would expect that after building my local copy of xterm.js that I could use it interchangeably with the NPM distribution. However I am curious why the command npm run package does not generate the dist folder but a lib folder instead. Are there additional steps that I am missing to make my own useable copy of xterm.js?
I've reached a semi-acceptable solution so I'd like to share what I can.
This is not the demo you are looking for
Thanks to user Peter I found my way to xterm.js' wiki page about contributing (not to be confused with the CONTRIBUTING.md file in the repo itself). It was hard to find because to an uninitiated individual this line in the repo's CONTRIBUTING.md document:
Get the xterm.js demo running.
seems to refer to the demo that can be found on xtermjs.org with these simple instructions:
First you need to install the module, we ship exclusively through npm so you need that installed and then add xterm.js as a dependency by running:
npm install xterm
To start using xterm.js on your browser, add the xterm.js and xterm.css to the head of your html page. Then create a onto which xterm can attach itself. Finally instantiate the Terminal object and then call the open function with the DOM object of the div.
<head>
<link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
<script src="node_modules/xterm/dist/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>
</body> </html> ```
However that is not the case. Instead they are talking about running the demo application that lives in xterm.js/demo
Running the real demo
The xterm.js maintainers are very very very much more experienced than me. They've provided so many ways to build and run the demo that it can be daunting. Eventually the SourceLair option worked out for me despite my aversion to giving them my credit card info.
First make a fork of the xterm.js repo - this is important because you want to be able to change the source code!
Handy as it may be this 'shortcut' https://lair.io/xtermjs/xtermjs kind of doesn't help. What you really want to do is go to SourceLair, create a new project based on your own fork of xterm and choose the preset 'Node' environment. That will allow you to both test the changes you make (by using the web server tool) AND save your changes (because you used your own fork instead of using the upstream repo)
Go to SourceLair
Start a new project by cloning a repo
Provide your repo URL
Wait for initialization (git clone, yarn install, webkit compilation etc)
Create a new branch for your changes (in the Terminal git checkout -b [name_of_your_new_branch])
Make your changes
Test them out in the Public URL of the project
Commit and push your changes back to your repo
(if you want to skip using the web editors then you could make changes to your repo and pull those changes into Source Lair for testing)
Challenges with other methods
Just FYI.
Docker: It was easy to use this pre-configured image but it was not easy to make the changes I needed to from within the container.
Foreman (Procfile runners): never heard of 'em... too little time to waste (this is a hobby, mind you!)
Linux / MacOSX: On linux I could build but could not test (my only linux is a VPS that I just SSH into) and on Mac I could (presumably) test but not build (because at time of writing the node-gyp dependency failed hard)
If all you need is to run and see how it feels, use node-pty package that's built on top of xtermjs
https://github.com/microsoft/node-pty/tree/master/examples/electron
Related
I can't generate OpenCV.js using this instructions: https://docs.opencv.org/master/d4/da1/tutorial_js_setup.html
I have this error:
CMake Error: CMake was unable to find a build program corresponding to
"Unix Makefiles". CMAKE_MAKE_PROGRAM is not set. You probably need
to select a different build tool.
When I'm trying to execute:
python ./platforms/js/build_js.py build_js
Alright, guys! You can download opencv.js from sources (press F12) of this Page: https://docs.opencv.org/master/js_face_detection_camera.html
You can find a nightly build at https://docs.opencv.org/master/opencv.js and some useful stuff at https://docs.opencv.org/master/utils.js .
<script async src="https://docs.opencv.org/master/opencv.js" type="text/javascript"></script>
I'm still not able to build it from source.
But this version of opencv.js worked for me on MacOS https://docs.opencv.org/3.4/opencv.js
I'll just list out the parts where installation was slightly different from what was outlined in https://docs.opencv.org/master/d4/da1/tutorial_js_setup.html.
For installing Binaryen, make sure you cd into the emsdk directory and then run these:
./emsdk install binaryen-master-64bit
./emsdk activate binaryen-master-64bit
From the official docs,
python ./platforms/js/build_js.py build_js
doesn't work because you need to add an additional flag --emscripten_dir to specify where the correct path. Note that you want the folder below the emsdk root directory, typically /fastcomp/emscripten/ (for the older “fastcomp” compiler; for the newer upstream LLVM wasm backend it will be /upstream/emscripten/).
I personally used the /upstream/emscripten one
So run this:
python /Users/fangran/opencv/platforms/js/build_js.py build_wasm --build_wasm --emscripten_dir /Users/fangran/emsdk/upstream/emscripten
And it should work and return:
=====
===== Build finished
=====
OpenCV.js location: /Users/fangran/opencv/build_wasm/bin/opencv.js
For more details: refer to this link
Looks like Emscripten doesn't setup the enviroment variable correctly to the SDK
For anyone trying to get this to build you need to specify the correct path to the Emscripten
which is the path where Emscripten is installed found in emsdk/upstream/emscripten
python ./platforms/js/build_js.py build_js --emscripten_dir=/home/username/Desktop/emsdk/upstream/emscripten
This should then work
I installed SPA templates (including angular) via dotnet new --install Microsoft.AspNetCore.SpaTemplates::*, per Scott Hanselman's guide.
Next, I created a new angular project: dotnet new angular -n MyProject
I opened this project in Visual Studio 2017. I ran it with Ctrl+F5, and the web site runs. I get a console screen telling me to go to http://localhost:5000. I go there and a site shows up in the browser, with a "Hello, World!" at the top of the page. A bunch of "info" appears in the console. So far so good.
I then go to ClientApp/app/components/home/home.component.html. I make a minor text change: I change <h1>Hello, world!</h1> to <h1>Hello, Matt!</h1>. In the console, I see a message Node will restart because file changed: ...home.component.html. Great. Except when I go to the browser, the change doesn't appear. It still says "Hello, world!". I've tried clearing cache, opening other browsers, etc, no dice.
I see no errors in the console or the browser console. It seems like wwwroot/dist/main-client.js is just not getting updated.
What am I missing? Why isn't this change being picked up?
UPDATE:
I have things partially figured out. I'm not ready to post an answer yet, because I'm not 100% sure I'm doing it right.
What I noticed was that when I run webpack from the command line, the dist folder got updated. Looking at the Configure method in Startup, I noticed that there is an app.UseWebpackDevMiddleware(...). I debugged through and realized this wasn't being called because env.IsDeveloper() was returning false. I looked at launchSettings.json (which got created by Visual Studio, not the template). I added ASPNETCORE_ENVIRONMENT (you can see the before & after in this gist). Once I did that, any changes I make in the angular files cause a rebuild and the dist folder to be updated.
SO... is this a problem with the template, a problem with VS2017, or a problem with my own dev environment?
Instead of installing the SPA templates, I would use the CLI to:
1- Install yo generator with "npm install -g yo"
2- Install the aspnetcore generator with "npm install -g yo generator-aspnetcore-spa"
3- Generate a new angular app using: "yo aspnetcore-spa"
I hope this helps.
I am trying to get up and running with Meteor and seeing what it can offer, while I like it overall, it seems it's a very very rigid system.
I set up a small testing setup using Velocity, it opens a small overlay window on the side which has a class of "velocityOverlay". The overlay is really small and makes error stack traces wrap. All I wanted to do was to edit the css of the "velocityOverlay" and increase the width.
I somehow (after wasting time) managed to find that Meteor is actually putting all the packages in my user directory by default, once I found that, I found the needed css file...
velocity_html-reporter/.0.5.1.aykpxq++os+web.browser+web.cordova/web.browser/packages/velocity_html-reporter/lib/client-report.less.css
And I did a small edit to the width, next thing you know the meteor app crashes when trying to launch using the "meteor" command throwing a "Error: couldn't read entire resource" error. I can't even edit the bootstrap.css file I installed using "ian_bootstrap-3".
Further more, I can't find any way to install packages locally just for my particular project, what if I wanted to modify a package only for my particular project? this is very easy to do in vanilla Node.js, you simply don't use the "-g" when using "npm install".
To add to that, within my project root, there is another ".meteor/local/build/web.browser" folder with most of the global package files replicated again. When does Meteor use which? This is very confusing.
You can run a package locally very easily.
Download it from Github (for example) and put it in the packages/ directory of your application like this /packages/package_name.
Then add it to your application with the same meteor add package_name command as usual.
Meteor will automatically look in the local folder before anywhere else and compile the package with the rest of your code.
This allows you to do any modification you want on the package and test it locally before publishing it to the registry.
Also, folders located in .meteor/local/* are used for building purpose only and are generated automatically by Meteor. So it is not the best place to edit the files!
This worked for me https://atmospherejs.com/i/publishing. mrt link-package didn't work for me, might just be outdated code.
Steps:
Download (or clone) package from GitHub to local dir
Stop meteor if running
2.1. Make sure you have a packages folder: mkdir packages
Locally link your package:
3.1 If you have mrt installed: Run mrt link-package /path/to/package in a project dir
3.2 If you don't have mrt: ln -s /path/to/package packages/package
Then run meteor add developer:package-name, do not forget to change package name
Run meteor in a project dir
From now any changes in developer:package-name package folder will cause rebuilding of project app
Download the package and place it in new package directory in your project root.
open the package.js inside the downloaded package and remove the author's name in the property "name:"
e.g: - name:'dburles:google-maps' to name:'google-maps'
then run
meteor add google-maps
I'm trying to create a way to view my security cameras without browser support for mjpg streaming.
The paparazzo.js seems like a good solution to test out:
https://github.com/rodowi/Paparazzo.js/
There is a demo script and I've uploded it to my page homepage:
http://intra.tobiasfransman.net/talo/demo/demo.html
But it not displaying the test camera image.
Am I doing something wrong, shouldn't the demo work with default out of box parameters?
Paparazzo.js runs on node.js.
So you need to install node.js, npm (node package manager) and download paparazzo.
After that:
cd into the directory where you downloaded paparazzo
run npm install
This will install all dependencies which paparazzo needs in order to function.
Finally cd {Paparazzo_Install_Location}/demo and run:
node bootstrap.js -> Paparazzo should now be running.
Keep in mind that you have to edit the server.coffee file in {Paparazzo_Install_Location}/demo and the demo.html according to your needs (host, port, path etc.). From where to get the stream and on which port to respond.
Hope this helps.
Does anyone know how to install GameClosure on Windows? According to the docs, on the installation guide, only osx is supported, although they have some success running on Linux and Windows. Unfortunately they don't expand on how to do this and a Google turns up only one promising looking page which returns a 404 (there is a cached version but it only seems to be a half article).
I have successfully installed the GC DevKit on Windows, there are a few additional steps like creating symbolic links BEFORE trying to install the GC DevKit.
Follow these steps carefully and you shouldn't have a problem getting it up and running. Read through them and try to understand what is required first.
Download the list of required items (Windows builds for Git, Node and Java) from the install guide.
Open up Git Bash (find it on the start menu under Git)
Continue with the install guide by cloning the repo (git clone https://github.com/gameclosure/devkit).
The files would have been installed to %USERPROFILE% if you did not change the directory while in Git Bash.
Move all the files in devkit\SDK somewhere else but make sure they are gone from that directory.
Open a normal command-prompt (cmd.exe).
Create symbolic links for everything that WAS under the devkit\SDK directory using mklink (available in Vista and above) from the command-prompt (not the Git Bash console). The files you moved in step 5 will contain the path as text that the link should be pointed to EG: > mklink /D "%USERPROFILE%\devkit\sdk\squill" "..\lib\squill\"
JSIO is special and actually needs to exist in a sub-directory at the time of writing. Create the directory devkit\SDK\jsio and then create a symbolic link INSIDE that going back one more relative path. EG: > mklink /D "%USERPROFILE%\devkit\sdk\jsio\jsio" "..\..\lib\js.io\packages\"
Go back you your Git Bash console and now continue with the installation for GC DevKit by switching to the devkit directory running the ./install.sh script as described.
Run basil by executing node src/basil [command]
If all the correct pre-requisites were in place everything should go smoothly. If basil throws errors it's more than likely the symbolic links, just check that everything is pointing to the right place and run ./install.sh to try again.
Good luck!!
There is now a full guide to installing Game Closure SDK on Windows here (I have also posted the contents in pastebin here in case the previous link disappears)
It's quite a process to get everything installed and configured, and looks like you can only develop for Android using the windows version of the SDK, but I may be mistaken
I wasn't able to get it installed on windows, but it's easy enough to install on linux, so I ended up using virtualbox and a linux vm. Cygwin could be another option but I didn't try it so unfortunately can't say for definite whether or not it would work