xtermjs doesn't display correctly and shows crooked text - javascript
I'm saving data from a tmux session with capture-pane into a file.txt and I get for instance this result:
PC1:/path$ cd /usr
PC1:/usr$ ll
total 0
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34m.[0;39m/
drwxr-xr-x 1 root root 4096 Aug 1 2019 [1;34m..[0;39m/
drwxr-xr-x 1 root root 4096 Mar 17 15:09 [1;34mbin[0;39m/
drwxr-xr-x 1 root root 4096 Apr 12 2016 [1;34mgames[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34minclude[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34mlib[0;39m/
drwxr-xr-x 1 root root 4096 Nov 26 14:52 [1;34mlocal[0;39m/
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34msbin[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34mshare[0;39m/
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34msrc[0;39m/
PC1:/usr$`
If I do cat file.txt it displays correctly with colors. If I write that some data to xtermjs it shows all crooked:
I've tried:
Adjusting the cols, rows on the Terminal options (I get the current columns and rows with tput cols and tput lines on linux)
Using "xterm-addon-fit"
I've tried several ways of loading the file just to see if I'm not losing some information in the copy/pasting
I tried with the package xterm-for-reacth
I also tried vanilla js but had the same issues
Nothing worked. At this moment I just want to find a way of getting the text from a tmux session and display it correctly on xtermjs.
You can see the issue in this codesandbox.
edit:
xtermjs only accepts CRLF (aka \r\n) so if the \r is converted to \r\n will make it work.
I had several wrong assumptions:
That xtermjs write would process line endings (as it processes everything else)
There were tabs on my text
I only found out the issue when I rendered the line endings and noticed there were no tabs at the start.
The weirdness in the image above is just the word wrap. xterm works focused on adding lines and not loading full screens.
The example below works albeit only for testing purposes.
import { useEffect } from "react";
import { Terminal } from "xterm";
import "./styles.css";
import "xterm/css/xterm.css";
const txt = `
PC1:/path$ cd /usr
PC1:/usr$ ll
total 0
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34m.[0;39m/
drwxr-xr-x 1 root root 4096 Aug 1 2019 [1;34m..[0;39m/
drwxr-xr-x 1 root root 4096 Mar 17 15:09 [1;34mbin[0;39m/
drwxr-xr-x 1 root root 4096 Apr 12 2016 [1;34mgames[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34minclude[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34mlib[0;39m/
drwxr-xr-x 1 root root 4096 Nov 26 14:52 [1;34mlocal[0;39m/
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34msbin[0;39m/
drwxr-xr-x 1 root root 4096 Feb 8 09:44 [1;34mshare[0;39m/
drwxr-xr-x 1 root root 4096 May 21 2019 [1;34msrc[0;39m/
PC1:/usr$`;
let terminal;
export default function App() {
useEffect(() => {
terminal = new Terminal();
terminal.open(document.getElementById("terminal"));
const lines = txt.split(/\n/);
lines.forEach((l) => terminal.write(l + "\r\n"));
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<div id="terminal" />
</div>
);
}
Related
I got an error "TypeError: Cannot read property 'producer' of undefined" in Tensorflowjs tf.loadGraphModel
I am doing Fine-Tuning using ssd_mobilenet_v2_coco_2018_03_29 on Google Colab. I am in trouble because the model converted by Tensorflowjs_converter cannot be read by Javascript. tensorflowjs==1.3.1 tensorflowjs_converter \ --input_format=tf_saved_model \ --output_format=tfjs_graph_model \ --output_node_names='num_detections,detection_boxes,detection_scores,detection_classes,detection_masks' \ --signature_name=serving_default \ --saved_model_tags=serve \ ./saved_model \ ./web_model Listing of "web_model" derectory -rw-r--r-- 1 root root 4194304 Nov 2 03:24 group1-shard1of5.bin -rw-r--r-- 1 root root 4194304 Nov 2 03:24 group1-shard2of5.bin -rw-r--r-- 1 root root 4194304 Nov 2 03:24 group1-shard3of5.bin -rw-r--r-- 1 root root 4194304 Nov 2 03:24 group1-shard4of5.bin -rw-r--r-- 1 root root 1753480 Nov 2 03:24 group1-shard5of5.bin -rw-r--r-- 1 root root 303953 Nov 2 03:24 model.json HTML ... var model = await tf.loadGraphModel('https://domain/web_model/model.json'); Error tfjs#1.3.1:2 Uncaught (in promise) TypeError: Cannot read property 'producer' of undefined at t. (tfjs#1.3.1:2) at tfjs#1.3.1:2 at Object.next (tfjs#1.3.1:2) at o (tfjs#1.3.1:2) I don't know if the cause is the version or the conversion is bad. If you know anyone, please let me know.
try loadLayersModel: const model = await tf.loadLayersModel('https://domain/web_model/model.json') took from here
asp.net ShieldUI bar chart dates
I’m currently trying to implement a ShieldUI bar chart with dates as the X axis as defined by a date group in my data and I’m finding that the graph is shifting the data by one month. So, data that is supposed to be for 1/2017 is being graphed as 12/2016. The ShieldUI suite I'm using is asp.net. The data is being brought over from SQL Server using a SQLDataSource object. I know that the underlying "engine" for the ShieldUI stuff is javascript and I also know that javascript uses zero based dates. Does anyone have any suggestions on how to get the chart to graph the dates correctly? Thanks in advance for the help. --Edit: To help visualize what is happening, the data being passed to the graph from SQL Server looks like this: Date Group Company A Company B Company C 1/1/2016 3 22 14 ---This row graphs out as Dec 2015 2/1/2016 3 11 18 ---This row graphs out as Jan 2016 3/1/2016 1 3 25 ---This row graphs out as Feb 2016 4/1/2016 3 14 17 ---This row graphs out as Mar 2016 5/1/2016 NULL 7 16 ---This row graphs out as Apr 2016 6/1/2016 NULL 6 10 ---This row graphs out as May 2016 7/1/2016 NULL 8 23 ---This row graphs out as Jun 2016 8/1/2016 2 12 18 ---This row graphs out as Jul 2016 9/1/2016 3 9 20 ---This row graphs out as Aug 2016 10/1/2016 2 16 17 ---This row graphs out as Sep 2016 11/1/2016 2 4 11 ---This row graphs out as Oct 2016 12/1/2016 3 9 18 ---This row graphs out as Nov 2016
Javascript Formatting date not working
I am using the ionic framework and I am trying to calculate the number of days between today and Sun Apr 18 2017 15:14:36 GMT+0800 (MYT) and today :Thu Mar 09 2017 17:52:48 GMT+0800 (MYT) it's showing that there are 44 days but I know it's 40 days. Can someone help me fix my code $scope.daysLeft=Math.floor(Math.abs(newDate - new Date())/86400000);
You are wrong and the result is actually ok from your program. There are 44 days between today and the selected date. Just try here if you don't believe it.
Javascript huge date bug in windows... Solutions?
My dev environment is in mac. I use bootstrap datepicker to choose dates in an application. When a day like 27/11/2013 is selected in mac when I debug, the screen shows... day: 1385510400 and the translation to an date object in the same debug tool is, Wed Nov 27 2013 00:00:00 GMT+0000 (GMT) which is correct. All is OK, since here. I upload the code to a windows environment and open the same page with IE8. Start the nightmare... :) In windows, the same day variable is shown like that... day: 1385506800 and the translation to an date object in the same debug tool is, Wed Nov 27 2013 00:00:00 GMT+0000 (GMT) which, is not correct? If we go to a external tool, the day that gave IE8 is day before, and the translation should be, Tue, 26 Nov 2013 23:00:00 GMT. How I can understand this? There is no relation with the timestamp and the translation to date object, and obviously I can't find a way to make this works in both systems. Could you wake me up from this nightmare? Sorry for my english!
Fiddle In JS in Chrome: new Date(1385510400000) : Wed Nov 27 2013 01:00:00 GMT+0100 new Date(1385506800000) : Wed Nov 27 2013 00:00:00 GMT+0100 new Date("11/27/2013") : Wed Nov 27 2013 00:00:00 GMT+0100 Please note the order of the date string, it is in US order Also note the 000 at the end; JS timestamps are in milliseconds The same in IE8 Wed Nov 27 01:00:00 UTC+0100 2013 Wed Nov 27 00:00:00 UTC+0100 2013 Wed Nov 27 00:00:00 UTC+0100 2013 So exactly the same dates, on hour difference on the first If you subtract the 1 hour from all dates, you get midnight on the first and 11pm on the 26th on the rest To normalise you can do var d = new Date(1385510400000); d.setHours(0,0,0); or change to UTC
How can I parse Javascript variables using python?
The problem: A website I am trying to gather data from uses Javascript to produce a graph. I'd like to be able to pull the data that is being used in the graph, but I am not sure where to start. For example, the data might be as follows: var line1= [["Wed, 12 Jun 2013 01:00:00 +0000",22.4916114807,"2 sold"], ["Fri, 14 Jun 2013 01:00:00 +0000",27.4950008392,"2 sold"], ["Sun, 16 Jun 2013 01:00:00 +0000",19.5499992371,"1 sold"], ["Tue, 18 Jun 2013 01:00:00 +0000",17.25,"1 sold"], ["Sun, 23 Jun 2013 01:00:00 +0000",15.5420341492,"2 sold"], ["Thu, 27 Jun 2013 01:00:00 +0000",8.79045295715,"3 sold"], ["Fri, 28 Jun 2013 01:00:00 +0000",10,"1 sold"]]; This is pricing data (Date, Price, Volume). I've found another question here - Parsing variable data out of a js tag using python - which suggests that I use JSON and BeautifulSoup, but I am unsure how to apply it to this particular problem because the formatting is slightly different. In fact, in this problem the code looks more like python than any type of JSON dictionary format. I suppose I could read it in as a string, and then use XPATH and some funky string editing to convert it, but this seems like too much work for something that is already formatted as a Javascript variable. So, what can I do here to pull this type of organized data from this variable while using python? (I am most familiar with python and BS4)
If your format really is just one or more var foo = [JSON array or object literal];, you can just write a dotall regex to extract them, then parse each one as JSON. For example: >>> j = '''var line1= [["Wed, 12 Jun 2013 01:00:00 +0000",22.4916114807,"2 sold"], ["Fri, 14 Jun 2013 01:00:00 +0000",27.4950008392,"2 sold"], ["Sun, 16 Jun 2013 01:00:00 +0000",19.5499992371,"1 sold"], ["Tue, 18 Jun 2013 01:00:00 +0000",17.25,"1 sold"], ["Sun, 23 Jun 2013 01:00:00 +0000",15.5420341492,"2 sold"], ["Thu, 27 Jun 2013 01:00:00 +0000",8.79045295715,"3 sold"], ["Fri, 28 Jun 2013 01:00:00 +0000",10,"1 sold"]];\s*$''' >>> values = re.findall(r'var.*?=\s*(.*?);', j, re.DOTALL | re.MULTILINE) >>> for value in values: ... print(json.loads(value)) [[['Wed, 12 Jun 2013 01:00:00 +0000', 22.4916114807, '2 sold'], ['Fri, 14 Jun 2013 01:00:00 +0000', 27.4950008392, '2 sold'], ['Sun, 16 Jun 2013 01:00:00 +0000', 19.5499992371, '1 sold'], ['Tue, 18 Jun 2013 01:00:00 +0000', 17.25, '1 sold'], ['Sun, 23 Jun 2013 01:00:00 +0000', 15.5420341492, '2 sold'], ['Thu, 27 Jun 2013 01:00:00 +0000', 8.79045295715, '3 sold'], ['Fri, 28 Jun 2013 01:00:00 +0000', 10, '1 sold']]] Of course this makes a few assumptions: A semicolon at the end of the line must be an actual statement separator, not the middle of a string. This should be safe because JS doesn't have Python-style multiline strings. The code actually does have semicolons at the end of each statement, even though they're optional in JS. Most JS code has those semicolons, but it obviously isn't guaranteed. The array and object literals really are JSON-compatible. This definitely isn't guaranteed; for example, JS can use single-quoted strings, but JSON can't. But it does work for your example. Your format really is this well-defined. For example, if there might be a statement like var line2 = [[1]] + line1; in the middle of your code, it's going to cause problems. Note that if the data might contain JavaScript literals that aren't all valid JSON, but are all valid Python literals (which isn't likely, but isn't impossible, either), you can use ast.literal_eval on them instead of json.loads. But I wouldn't do that unless you know this is the case.
Okay, so there are a few ways to do it, but I ended up simply using a regular expression to find everything between line1= and ; #Read page data as a string pageData = sock.read() #set p as regular expression p = re.compile('(?<=line1=)(.*)(?=;)') #find all instances of regular expression in pageData parsed = p.findall(pageData) #evaluate list as python code => turn into list in python newParsed = eval(parsed[0]) Regex is nice when you have good coding, but is this method better (EDIT: or worse!) than any of the other answers here? EDIT: I ultimately used the following: #Read page data as a string pageData = sock.read() #set p as regular expression p = re.compile('(?<=line1=)(.*)(?=;)') #find all instances of regular expression in pageData parsed = p.findall(pageData) #load as JSON instead of using evaluate to prevent risky execution of unknown code newParsed = json.loads(parsed[0])
The following makes a few assumptions such as knowing how the page is formatted, but a way of getting your example into memory on Python is like this # example data data = 'foo bar foo bar foo bar foo bar\r\nfoo bar foo bar foo bar foo bar \r\nvar line1=\r\n[["Wed, 12 Jun 2013 01:00:00 +0000",22.4916114807,"2 sold"],\r\n["Fri, 14 Jun 2013 01:00:00 +0000",27.4950008392,"2 sold"],\r\n["Sun, 16 Jun 2013 01:00:00 +0000",19.5499992371,"1 sold"],\r\n["Tue, 18 Jun 2013 01:00:00 +0000",17.25,"1 sold"],\r\n["Sun, 23 Jun 2013 01:00:00 +0000",15.5420341492,"2 sold"],\r\n["Thu, 27 Jun 2013 01:00:00 +0000",8.79045295715,"3 sold"],\r\n["Fri, 28 Jun 2013 01:00:00 +0000",10,"1 sold"]];\r\nfoo bar foo bar foo bar foo bar\r\nfoo bar foo bar foo bar foo bar' # find your variable's start and end x = data.find('line1=') + 6 y = data.find(';', x) # so you can get just the relevant bit interesting = data[x:y].strip() # most dangerous step! don't do this on unknown sources parsed = eval(interesting) # maybe you'd want to use JSON instead, if the data has the right syntax from json import loads as JSON parsed = JSON(interesting) # now parsed is your data
Assuming you have a python variable with a javascript line/block as a string like"var line1 = [[a,b,c], [d,e,f]];", you could use the following few lines of code. >>> code = """var line1 = [['a','b','c'], ['d','e','f'], ['g','h','i']];""" >>> python_readable_code = code.strip("var ;") >>> exec(python_readable_code) >>> print(line1) [['a', 'b', 'c'], ['d', 'e', 'f'], ['g', 'h', 'i']] exec() Will run the code that is formatted as a string. In this case it will set the variable line1 to a list with lists. And than you could use something like this: for list in line1: print(list[0], list[1], list[2]) # Or do something else with those values, like save them to a file