Web help wanted: viewing Joe Orr's Leo view page locally

[Edward K. Ream]

In another thread (don't remember where), I said that I wanted to "recreate" Joe Orr's Leo viewer page, or words to that effect.  The conversation then shifted to discussions about web frameworks, abstraction layers, etc.

But I meant something much simpler!  I just want to be able to download the page on my local machine, and have the page work as it does via the link above.  But it doesn't.  Maybe scripts got "disconnected" somehow, or maybe the problem lies in the css. Or somewhere else.

I've studied the code on the page in a text editor (and anyway, the page displays its own source code). I don't see why things don't "just work".

Can anyone explain what is going on, and how to make the local page work like the original? I'm guessing that just a few tweaks would do the job.  That would be a big step forward for me.

Any volunteers?

Edward

[Terry Brown]

On Tue, 12 Sep 2017 08:01:47 -0700 (PDT)
"Edward K. Ream" <edre...@gmail.com> wrote:

> In another thread (don't remember where), I said that I wanted to
> "recreate" Joe Orr's Leo viewer page

> <https://bl.ocks.org/kaleguy/cef095e16e147bc04dd6c5812d732fb2>, or

> words to that effect. The conversation then shifted to discussions
> about web frameworks, abstraction layers, etc.
>
> But I meant something much simpler! I just want to be able to
> download the page on my local machine, and have the page work as it
> does via the link above. But it doesn't. Maybe scripts got
> "disconnected" somehow, or maybe the problem lies in the css. Or
> somewhere else.

Are you using file:// protocol to access it? That doesn't work when
parts of the JS are remote, like d3 at least, in the above.

So just set up a web server on your system and access it through
that :-)

python -m SimpleHTTPServer # Python 2.x

in the root dir. of the project should serve stuff up at

http://127.0.0.1:8000/

Cheers -Terry

[Chris George]

I could never seem to get js set-up properly on my machine. So I gave up.

It looks like I need to revisit it.

https://kaleguy.github.io/leoviewer/#/t/1/

Chris

--
You received this message because you are subscribed to the Google Groups "leo-editor" group.
To unsubscribe from this group and stop receiving emails from it, send an email to leo-editor+unsubscribe@googlegroups.com.
To post to this group, send email to leo-e...@googlegroups.com.
Visit this group at https://groups.google.com/group/leo-editor.
For more options, visit https://groups.google.com/d/optout.

[Chris George]

Well that is certainly slick.

I got node.js working (known bug with apt package) and installed http-server. I created a ./public folder in the root and copied the contents of the dist directory to it. I started the http-server on an unused port and changed docs.leo to the desired file in the static directory.

Now it works. It even handles my ten year old My Life file (2.3mb) without blinking.

Chris

[vitalije]

About month ago I made a prototype of Leo as electron application. There is only basic functionality browsing tree and editing bodies. It doesn't load derived files nor it saves outline. However, I don't expect it to be too difficult to add read/save functions that I wrote earlier. 

Here is simple demonstration video

It is written in Clojurescript  and theoretically it can run on any platform Linux, Windows, Mac. I can't test platforms other than Linux, but electron is said to be available for all these platforms. 

It has only 400 lines of code and was written in 5 days. After writing this first part as a proof of concept I had to turn my attention to other duties and leave this code for some other (better) time. I didn't intend to show it yet, but since Edward asked there it is. As attachment to this post there is leo.asar file. To run it you must have installed electron binary. You can find it on their site or directly from releases. Run electron executable providing path to leo.asar file as argument and you should see window with the tree on the right and body on the left. In fact you have to click once in the empty tree box on the right side, to render tree for the first time.

It renders tree on a canvas and uses Codemirror javascript library for syntax colorizing.

Tree data is represented in an interesting data structure. I have made also an experimental python version and tested it a little comparing with Leo position. It has shown better performance in traversing operations than legacy Leo position code. But on inserting and deleting nodes Leo will certainly perform better, because these operations are expensive in my data structure. Considering that traversing tree is done much more often than inserts or deletes, it may prove to be worthy. 

ATM I don't have enough time to work on this prototype, but it should not be too hard to change it so that it runs in ordinary web browser.

If anyone is interested I can put the code online. As I said there isn't much code and Clojurescript is kind of Lisp language, it has very simple syntax rules so even if it is the first time for you to read Clojurescript, you can guess pretty much what is the meaning of each expression.

To build it one need to install:

• node and its npm (package manager)
• java (for compiling clojurescript)
• leiningen (a clojure build tool)
• grunt (node build tool)

The rest of the libraries and tools will be automatically downloaded by these build tools.

Vitalije

PS: unfortunately Google doesn't accept 7.2Mb attachments. So, leo.asar file is here http://kviziracija.org/files/leo.asar

[Edward K. Ream]

On Tue, Sep 12, 2017 at 11:05 AM, Terry Brown <terry...@gmail.com> wrote:

So just set up a web server on your system and access it through
that :-)

    python -m SimpleHTTPServer  # Python 2.x

in the root dir. of the project should serve stuff up at

    http://127.0.0.1:8000/

​I'm getting a message about "Filtered by ABE: blocked"

Any idea what that might mean?

Edward

[Edward K. Ream]

​Disabled ABE (Application Boundary Enforcement) in a weird popup in Mozilla, and now the page works​.  Sheesh.  I have no idea how to turn in back on.  Should I be worried?

Edward

[Terry Brown]

Never hear of ABE. https://noscript.net/abe/

A browser extension, so perhaps you installed it some time? Anyway,
nothing to worry about I wouldn't think.

[Edward K. Ream]

​I do use noscript, though sometimes is seem more of a pain than useful.

Anyway, I have gotten Joe Orr's page to work, kinda.  There are mysteries still, but I think your suggestion was the key to further progress.  Thanks for your help.

Edward

[Joe Orr]

Sorry for the slow reply, been busy with a startup and another side project, but getting back to this now.

About getting a leo file to load up in LeoViewer easily, see this repo:

https://github.com/kaleguy/leo-examples

All you need to do is download index.html and put it in the same folder as the leo file you'd like to view, edit index.html (settings are self explanatory) and then view index.html in the browser. You'll need to use something like http-server if you want to do this locally.

Also, the relative links in the main demo site were broken, just fixed those.

The example site above shows Leoviewer displaying Youtube videos. If you look at the source Leo file, you'll see this a simple Vue component. Next steps for LeoViewer is to make more Vue components work out of the box + integrate form.io, so that you can build analytics dashboards and other complicated programs using Leo to design your UI. Probably will change the name to LeoVue.

Joe

[john lunzer]

I want to thank you for this work Joe, this is really amazing and has the potential how I use Leo to share information. I was able to download all the files listed in index.html from the aws site and run the entire thing locally without having to run a web server. Just open the link up in my web browser and I've got an instant Leo file viewer that I can package up.

But I would like to ask you Joe: I would like to be able to to just zip up a directory with all the required javascript/html and a .leo file and send it to somebody for viewing. Outside of the files listed in the index.html file are there any other javascript dependencies I'm not taking into account?

[Joe Orr]

John,

Thanks, glad it is working for you.

You can just zip those files, that is everything required.

Those files aren't always up to date, for the most recent version, download the repo and look at the files in the docs folder. You just need index.html + whatever files in the static folder you want to distribute.

The docs folder has some junk in it I'll be removing with the next release, should be within a week or so. But it is easy to figure out what is not needed. You just need the index.html, the leo file and the js and css folders.

Joe

[Edward K. Ream]

On Tuesday, October 10, 2017 at 9:53:18 AM UTC-5, john lunzer wrote:

I want to thank you for this work Joe, this is really amazing and has the potential how I use Leo to share information. I was able to download all the files listed in index.html from the aws site and run the entire thing locally without having to run a web server.

Could you provide a link for these files.  I just signed up for a free aws account, but don't see how to get the files.

Thanks,

Edward

[Edward K. Ream]

​Never mind.  Just entering the actual urls into the browser url tab works, for example:

leoviewer.s3.amazonaws.com/manifest.js

That is, the contents of the desired file appears in the browser, and it's then possible to save the file locally.

Edward​

[Joe Orr]

You can also get the newest versions from the project repo, run 'npm run build', they will be in dist folder. Will update readme soon.

BTW @john, you can load multiple leo files by putting a link to a leo file in the node title. The doc.leo file has an example of this, see also the Shakespeare file. 

Joe

[Edward K. Ream]

On Thu, Oct 19, 2017 at 2:48 PM, Joe Orr <joe...@gmail.com> wrote:

You can also get the newest versions from the project repo, run 'npm run build'

​This fails for me.  The contents of npm-debug.log is:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\PROGRA~1\\nodejs\\node.exe',
1 verbose cli   'C:\\PROGRA~1\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using n...@2.15.1
3 info using no...@v4.4.4
4 verbose stack Error: ENOENT: no such file or directory, open 'c:\Web\leo-examples\package.json'
4 verbose stack     at Error (native)
5 verbose cwd c:\Web\leo-examples
6 error Windows_NT 10.0.15063
7 error argv "C:\\PROGRA~1\\nodejs\\node.exe" "C:\\PROGRA~1\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
8 error node v4.4.4
9 error npm  v2.15.1
10 error path c:\Web\leo-examples\package.json
11 error code ENOENT
12 error errno -4058
13 error syscall open
14 error enoent ENOENT: no such file or directory, open 'c:\Web\leo-examples\package.json'
14 error enoent This is most likely not a problem with npm itself
14 error enoent and is related to npm not being able to find a file.
15 verbose exit [ -4058, true ]

Edward

[vitalije]

`npm run build` must be executed in terminal inside project folder. Project is what you get by git cloning repository https://github.com/kaleguy/leoviewer not leo-examples.

I haven't tried it, just guessing. 

Vitalije

[Edward K. Ream]

On Fri, Oct 20, 2017 at 2:56 AM, vitalije <vita...@gmail.com> wrote:

`npm run build` must be executed in terminal inside project folder. Project is what you get by git cloning repository https://github.com/kaleguy/leoviewer not leo-examples.

I haven't tried it, just guessing. 

​Thanks for this.  I'll try it soon.

Edward