Just struggling to get the Attach addon working. The main xterm (4.4.0) comes up fine, but the Chrome browser Javascript console reports 'Uncaught TypeError: AttachAddon is not a constructor' when I try to reference the addon. The webserver is golang/echo, and I pull in the xterm.js and xterm-addon-attach.js from the packages as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
<script src="xterm-addon-attach.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://example.net:8080/ws')
const attachAddon = new AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
</html>
Can anyone help to point out what I've done wrong?
Also the examples in the docs where I took this from doesn't have the term.open() call, so how would the Terminal instance know what element to attach to? Eg at https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-attach
Many thanks in advance
Andy
Update:
I changed the HTML to include the import statements, as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script type="module">
import { AttachAddon } from "./xterm-addon-attach.js";
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://boundstone.dynamic-dns.net:8080/ws');
const attachAddon = new AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
</html>
but the Chrome console now reports: "The requested module './xterm-addon-attach.js' does not provide an export named 'AttachAddon'". The webserver serves the script with content type application/javascript, and the Chrome console recognises the structure of the AttachAddon as a Webpack it seems.
I'm afraid I'm not familiar as I clearly should be with JS modules. The web server for my project is not (and can't be) Node, but does that make a difference?
Many thanks in advance
Andy
This is what worked for me. The only thing you have to do is use AttachAddon twice as shown below using the OP's example. That's the only trick to getting it working. I am also using the fit addon and it was the same thing with that.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="xterm.css" />
<script src="xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new window.Terminal();
term.open(document.getElementById('terminal'));
ws = new WebSocket('ws://boundstone.dynamic-dns.net:8080/ws');
const attachAddon = new AttachAddon.AttachAddon(ws);
term.loadAddon(attachAddon);
</script>
</body>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<title>Avacados</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ar.marketscale.com/test/test.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<a style="display:none" id="ar-link" href="intent://arvr.google.com/scene-viewer/1.0?file=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf&mode=ar_only&link=https://www.google.com&sourceid=chrome&ie=UTF-8&title=Acocados#Intent;scheme=https;package=com.google.android.googlequicksearchbox;action=android.intent.action.VIEW;S.browser_fallback_url=https://developers.google.com/ar;end;">Avovados</a>
<footer>
<script type="text/javascript">
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
$(document).ready(function(){
setTimeout(function(){
// $('#ar-link').trigger('click');
$('#ar-link').click(function() {
this.click();
}).click();
},1000);
});
} else {
window.location.href = "https://ar.marketscale.com/test/testfallback.css"
}
</script>
</footer>
<!-- đ Include both scripts below to support all browsers! -->
<!-- Loads <model-viewer> for modern browsers: -->
<script type="module"
src="https://unpkg.com/#google/model-viewer/dist/model-viewer.min.js">
</script>
<!-- Loads <model-viewer> for old browsers like IE11: -->
<script nomodule
src="https://unpkg.com/#google/model-viewer/dist/model-viewer-legacy.js">
</script>
</body>
</html>
I am using Scene Viewer and triggering the explicit intent from HTML. It's running in ar_only. The goal is when you visit this website it launches AR automatically. I have a URL and I have a QR code that points to that URL.
When you scan the QR code it starts AR no problem. When you type in the URL it sends you to the fallback website. I know the phone is compatible because it works when you scan the QR code. I have also tried this on other phones and it gives me the same results.
I think Javascript is the issue. I'm using it to "click" or run this automatically. Any ideas on what could be going on?
the link is ar.marketscale.com/test/ar_avacado.html
here is a QR code that links to that URL:
QR CODE
i downloaded the nicedit with mathtype js plugin files
but i cannot setup the editor
i get the window.opener is null error
second thing i cannot find the com.wiris.jsEditor class in any js files
<i><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<textarea name="area"></textarea>
<div id="editorContainer">
</div>
<script src="../js/nicEdit.js"></script>
<script>
_wrs_currentPath = "/var/www/html/nicedit/"
nicedit_wiris_path = "nicedit_wiris"
</script>
<script src="../nicedit_wiris/core/WIRISplugins.js?viewer_image"></script>
<script src="../nicedit_wiris/nicedit_wiris.js"></script>
<script src="../nicedit_wiris/core/core.js"></script>
<script src="../nicedit_wiris/core/display.js"></script>
<script src="../nicedit_wiris/core/displaymathml.js"></script>
<script src="../nicedit_wiris/core/cas.js"></script>
<script src="../nicedit_wiris/core/editor.js"></script>
<script>
bkLib.onDomLoaded(function () {
nicEditors.allTextAreas()
// editor = new com.wiris.jsEditor.JsEditor('editor', null);
});
</script>
</body>
</html></i>
unfortunately, we do not give support to NicEdit anymore. The version of the MathType plugin that you have is 5 years old and does not work for the current version of NicEditor.
On the other hand, we do have MathType plugins implementations for the main HTML editors like TinyMCE, CKEditor or Froala.
In case you really need to use NicEdit, you could build your own implementation upon our Generic integration. In that case, we will give some assistance. Please, find some documentation below.
https://www.npmjs.com/package/#wiris/mathtype-generic
Best!
I am point the href of css link to a php script. Works good in all browser. When i try the same in iOs its not working.
If I put the manual entry instead of programtic entry it works.
The source that works
<html>
<head>
<link rel="stylesheet" href="http://localhost/assets?action=writeCss&cssId=38">
</head>
<body>
</body>
</html>
The source that not works
<html>
<head>
<link rel="stylesheet" href="http://localhost/assets?action=writeCss&cssId=<?php echo "38"; ?>">
</head>
<body>
</body>
</html>
Thanks in Advance.
Are you trying to use PHP in a UIWebView? I think you can't run PHP on the iOS, PHP runs on the server and not on the browser.
Read this and this.
I am having trouble with using OpenLayers in Gmaps4Rails (Gem version 1.5.2.) When I click on a marker I would like to show the typical callout (Infobox). Unfortunately I get the following JavaScript error:
this.serviceObject is undefined
Firebug calls the line 195 of the file "gmaps4rails.openlayers.js" responsable:
return this.serviceObject.addPopup(popup);
If I use Google Maps as API provider instead, everything works fine. Showing and hiding the infobox works nicely. This is why I assume that the error must be somewhere in "gmaps4rails.openlayers.js"
I tried on the latest FF and Chrome on Mac.
For reproducing the error in a reduced example, I created a simple HTML page in the public folder of my Rails 3.2 app and directly linked the needed JS and CSS files. To create the HTML page I copied the HTML code of my broken Rails app and reduced it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="/assets/gmaps4rails.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/gmaps4rails/gmaps4rails.base.js" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.openlayers.js" type="text/javascript"></script>
</head>
<body>
<div class="map_container">
<div id="map" class="gmaps4rails_map"></div>
</div>
<script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsOpenlayers();
Gmaps.load_map = function() {
Gmaps.map.map_options.provider = "openlayers";
Gmaps.map.initialize();
Gmaps.map.markers = [
{"description":"<p>This shall be in in the popup</p>",
"id":117979030,
"lat":39.5715,
"lng":2.64694}
];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
Gmaps.oldOnload = window.onload;
window.onload = function() {
Gmaps.triggerOldOnload();
Gmaps.loadMaps();
};
</script>
</body>
</html>
Unfortunately I could not find a working example of a successful Gmap4RailsâOpenlayers integration on the web. Am I missing a mandatory parameter?
Thanks in advance.
It's a bug.
Replace:
return this.serviceObject.addPopup(popup);
with:
return this.map.addPopup(popup);
I'll push a fix soon, thanks and +1
I have a phone gap application with jquery mobile and I can get external links to work and single page navigation working but I cannot open another file in my application. All the files are located in the www folder. The error message is "Failed to load webpage with error: The requested URL was not found on this server. If i comment out the jquery-1.6.4.min.js file it will work but that's not a good solution. I've tried rel="external" and several other things I've seen by googling but nothing seems to work
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="include/jquery.mobile-1.0.min.css" />
<script src="include/jquery-1.6.4.min.js"></script>
<script src="include/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
//do something
}
</script>
</head>
<body onload="onBodyLoad()">
<div data-role="page" id="manage">
<div data-role="content" id="inputs">
About
</div>
</div>
</body>
</html>
Make sure that you update your PhoneGap manifest. Look for PhoneGap.plist, open it and look for ExternalHosts. You need to add the urls one by one, or you can simply add "*". This will allow the use of all urls within the application. PhoneGap blocks all urls by default.