IonicaBizau / web-term

:tv: A fullscreen terminal in your browser.
MIT License
169 stars 21 forks source link

How can i modify the index page? #16

Closed misterzik closed 9 years ago

misterzik commented 9 years ago

Good Afternoon,

I am interested in building a small template on top of this beautiful app, you guys have created. I tried adding stuff to /node_modules/web-term/bin/public/index.html but i cannot see any changes.

Am i editing the right place? Also you guys rock for creating this web terminal \m/

Best Regards

IonicaBizau commented 9 years ago

Hey @misterzik!

Could you please explain what you're trying to do? Maybe such a feature would be nice to have it in web-term itself.

Editing bin/public/index.html should work.

Thanks! :sparkle:

misterzik commented 9 years ago

Hey, @IonicaBizau ,

Thanks for the quick response, I would like to add a template with different background, just like your sample. (https://camo.githubusercontent.com/390c4ec78b874793d395344b383958f7626416cc/687474703a2f2f692e696d6775722e636f6d2f343946547066492e706e67) and perhaps add a few tabs , and a footer in html.

I did edit the index, and close the terminal with ctrl + c, and re-ran web-term from the terminal but i cant see the changes ive made.

I would also like to add a few more javascripts libraries (UI Stuff). Will share my progress once ive something going on.

Thanks my friend

IonicaBizau commented 9 years ago

The background color is editable from CSS. The other ones are HTML + CSS (probably there is some position:fixed/absolute element).

IonicaBizau commented 9 years ago

@misterzik Here are some snippets:

misterzik commented 9 years ago

@IonicaBizau Good morning,

Thanks for the response, Yes that was the first thing i modified but my mistake was a bit more silly. I globally installed it, and also installed it on a different folder which is what i am testing on. SO! PALM FACE i was modifying my root folder for my server instead of my /usr/local/lib/. I know epic fail.

So now that ive erase it from my global, and only have installed it on the folder for my apache, im not able to run the cmd > web-term anymore because i erased it from my global. How can i run this without installing it globally? is it possible?

IonicaBizau commented 9 years ago

If you install it locally you could start it this way:

./path/to/the/web-term/bin/web-term

Cool, yeah? :smile:

misterzik commented 9 years ago

Thanks man, yeah i CD to the folder and ran it with ./ , I think im going to create a path for it, will send you the demo of my template when done. Thanks for your help my friend. :)

IonicaBizau commented 9 years ago

Nice! You're welcome! :+1:

misterzik commented 9 years ago

@IonicaBizau - is it possible to have two console runnings? within the same page. i went to web-term.js and modified it to

$(document).ready(function() {
    $(".term1").webTerm();
);

i was wondering if doing this will help,

$(document).ready(function() {
    $(".term1").webTerm();
    $(".term2").webTerm();

);

and on the html call it inside the divs? would it work to get a new session of the console?

IonicaBizau commented 9 years ago

Theoretically yes, practically I guess it's buggy. :smile: But it's supposed to work. Can you confirm that both sides become black?

Btw, you can use tmux for splitting.

misterzik commented 9 years ago

@IonicaBizau Yes it's buggy :( i cant no longer type on the first window, and everything i write on the first one comes out on the second window! weird!

What i am trying to aim is to have multiple terminals, within the same page with different sections to be able to multitasks on different ssh accounts.

misterzik commented 9 years ago

woo @IonicaBizau :) , still trying to figure it out, how to run multiple console with different sessions in the same page! thanks for help man.

Used api,

$(".container2").webTerm().create();

when i type on the top one, i get the same from both,

woo2

IonicaBizau commented 9 years ago

The problem is that on the server there is one terminal instance created. This should be fixed (contributions welcome!).

Will debug the things next week if you are not faster than me. :smile:

misterzik commented 9 years ago

@IonicaBizau am i going in the right direction? https://github.com/misterzik/web-term/blob/master/lib/index.js xD

IonicaBizau commented 9 years ago

@misterzik It's a good start, but not really a good solution. Not sure, but somewhere I think I there is a global (file-level) variable which has the terminal... But will give you some help in the next few minutes.... :smile:

IonicaBizau commented 9 years ago

Ok, so, it's not really a global, but we should change the code a little: to be able to create WebTerm instances like this: var myTerm = new WebTerm()–that will allow us to create how many terminals we want.

So, here in the bin script we will define a variable var terminal = null and in the create callback we will set the terminal value: terminal = new WebTerm({ /* maybe some options */ }). In the other callbacks terminal will be used instead of WebTerm.

Then, in the library file we will remove the new here–and call the create method here:

function WebTerm(options) {
    this.terminal = null;
    this.create(options);
}

(by the way, the create method doesn't need a callback function)


If everything will go smoothly, you just need to enjoy then! Donations are always welcome, too! :four_leaf_clover:

misterzik commented 9 years ago

@IonicaBizau thanks for the help, the server hung on me! and def will be sending something over paypal \m/ cheers

info  Successfully started the web term server: http://localhost:9000

Missing error handler on `socket`.
TypeError: object is not a function
at Socket.<anonymous> (/Web/Terminals/node_modules/web-term/bin/web-term:88:20)
at Socket.emit (events.js:118:17)
at Socket.onevent (/Web/Terminals/node_modules/web-term/node_modules/socket.io/lib/socket.js:330:8)
at Socket.onpacket (/Web/Terminals/node_modules/web-term/node_modules/socket.io/lib/socket.js:290:12)
at Client.ondecoded (/Web/Terminals/node_modules/web-term/node_modules/socket.io/lib/client.js:193:14)
at Decoder.Emitter.emit (/Web/Terminals/node_modules/web-term/node_modules/socket.io/node_modules/socket.io-parser/node_modules/component-emitter/index.js:134:20)
at Decoder.add (/Web/Terminals/node_modules/web-term/node_modules/socket.io/node_modules/socket.io-parser/index.js:247:12)
at Client.ondata (/Web/Terminals/node_modules/web-term/node_modules/socket.io/lib/client.js:175:18)
at Socket.emit (events.js:107:17)
at Socket.onPacket (/Web/Terminals/node_modules/web-term/node_modules/socket.io/node_modules/engine.io/lib/socket.js:99:14)
/Web/Terminals/node_modules/web-term/bin/web-term:120
    WebTerm.kill();
            ^
TypeError: undefined is not a function
at Socket.<anonymous> (/Web/Terminals/node_modules/web-term/bin/web-term:120:17)
at Socket.emit (events.js:107:17)
at Socket.emit (/Web/Terminals/node_modules/web-term/node_modules/socket.io/lib/socket.js:129:10)
at Socket.onclose (/Web/Terminals/node_modules/web-term/node_modules/socket.io/lib/socket.js:418:8)
at Client.onclose (/Web/Terminals/node_modules/web-term/node_modules/socket.io/lib/client.js:230:12)
at Client.onerror (/Web/Terminals/node_modules/web-term/node_modules/socket.io/lib/client.js:211:8)
at Client.ondata (/Web/Terminals/node_modules/web-term/node_modules/socket.io/lib/client.js:177:10)
at Socket.emit (events.js:107:17)
at Socket.onPacket (/Web/Terminals/node_modules/web-term/node_modules/socket.io/node_modules/engine.io/lib/socket.js:99:14)
at XHR.emit (events.js:107:17)
IonicaBizau commented 9 years ago

@misterzik Please push the changes you did and open a pull request. I'm happy to fix the errors that still exist and see what's going on. Thanks! :dizzy:

IonicaBizau commented 9 years ago

Please check out the mulitple-terms branch–hope you don't mind if I used <iframe>s to create multiple terminals. :smile:

After starting the process you should be able to access localhost:9000/vs and localhost:9000/hs for split windows.

I guess you have to install some missing packages first (npm i <package-name>).

misterzik commented 9 years ago

@IonicaBizau w00t! sorry i took long, was away for the weekend, I am trying this right now, Installed all the dependencies, and pow! its work now!

Great work my friend, great work.. The fixes you gave me before it wasnt enough right? there was couple of dependencies to add? and by the way i will be uploading few themes, if anybody is interested feel free to get them.

IonicaBizau commented 9 years ago

@misterzik npm i -g web-term@latest should work well–you can check if it worked by running web-term -v. :dart:

Great work my friend, great work..

Thanks! :smile:

The fixes you gave me before it wasnt enough right?

Actually I think they were–maybe with some little adjustments. :bulb: But in 3.1.0 we now have one terminal/connection (that means one terminal per page). Before it was one terminal per server, which was good, but you just found the limitation. :smile_cat:

and by the way i will be uploading few themes, if anybody is interested feel free to get them.

Fell free to create a pull request and add them. Maybe it would be interesting to have a way to include CSS files or so (maybe a file like ~/.web-term.json which will contain the config?). But definitely, just add them and add yourself as contributor. :construction_worker: