cncjs / cncjs-pendant-tinyweb

A tiny web console for small 320x240 LCD display
https://cncjs.github.io/cncjs-pendant-tinyweb/src/
MIT License
26 stars 25 forks source link

Auto select USB port #6

Open nickm324 opened 6 years ago

nickm324 commented 6 years ago

When tinyweb starts it goes directly to the USB port screen (connection) and does not select the comport automatically and go to the actual control interface. Is there a way to make it connect automatically and start on the control screen?

MitchBradley commented 6 years ago

I added that feature to cncjs-shopfloor-tablet, which was derived from cncjs-pendant-tinyweb. The relevant code is one line in index.html that changes from:

            } else {
                window.location = '#/connection';
            }

to

            } else {
                window.location = cnc.reConnect() ? '#/axes' : '#/connection';
            }

plus the following addition to app.js at line350 (between the // Workspace and // Connection sections):

cnc.reConnect = function() {
    if (cnc.controllerType && cnc.port && cnc.baudrate) {
    controller.openPort(cnc.port, {
            controllerType: cnc.controllerType,
            baudrate: Number(cnc.baudrate)
    });
    return true;
    }
    return false;
};
nickm324 commented 6 years ago

Awesome, thank you very much. I will give it a try.

nickm324 commented 6 years ago

I made the changes you provided above but it didn't seem to have any affect. My X-Carve is on /dev/tty/USB0 and is included in the dropdown list but I still have to manually select it as it stops at the connection screen with the /dev/ttyAMA0 as the first item in the dropdown to select a port.

nickm324 commented 6 years ago

Not sure if it makes any difference or not but my Pi boots and automatically and opens tinyweb in chromium kiosk mode on the attached LCD screen. Problem is it stops at the connection screen.

MitchBradley commented 6 years ago

Probably best to start debugging by connecting via a different computer so you can run a browser on a large screen. Trying to do it on a small LCD is likely to be frustrating.

First thing to check is whether the serial cookies are set. In Chrome, you can navigate to the cookies viewer via Settings>Privacy and Security>Content Settings>Cookies>See all cookies and site data>[your Pi IP address] or just go directly to it with this url: chrome://settings/cookies/detail?site=192.168.2.100 (using your Pi IP instead of 192.168.2.100).

Here's what it looks like for me:

image

You can then drop down the individual cnc.* items to see what the port is set to.

Note that they will not be set the first time you go to the /pendant page; you have to go through the connection page once before they are set. After they are set, cnc.reConnect() is supposed to notice them and subsequently go directly to the axes page.

Debugging on another computer lets you find out if the program logic is correct, but there could still be problems with the chromium browser that is running on the LCD. For example, it might not be storing cookies for itself - the cookies are stored on a per-browser basis, not in the cncjs server.

Another level of debugging can be done by firing up Developer Tools in Chrome, then setting a breakpoint on app.js : cnc.reConnect() . I can walk you through that if necessary. Explaining how to debug in the modern world is so tedious! Everything is hidden behind multiple layers of menus and tabs and hierarchies and the visual appearance is rarely the same in different people's environments ...

Another complicating factor is the multi-step dance that cncjs does when it is authenticating. It bounces through several URLs before it settles down.

MitchBradley commented 6 years ago

Apparently you can look at the chromium cookies in the file ~/.config/google-chrome/Default/Cookies

https://askubuntu.com/questions/697807/where-can-i-get-cookies-of-chrome-web-browser-in-ubuntu-14-04

nickm324 commented 6 years ago

Ok, I will try and see if its not storing cookies. That was my suspicion since I ran the tinyweb in chrome on my regular PC and it does store the cookie and is verified when I re-open the browser and it will automatically go to the axes page and already be connected.

I am software engineer so I am very familiar with the developer tools and debugging, although I mainly develop .Net applications and I am not that familiar with chromium, wasn't even sure if it was a actual version of Chrome or not.

nickm324 commented 6 years ago

So initially I was using localhost to run tinyweb, http://localhost:8000/tinyweb. And then I viewed the cookie and it is setting as a session only cooike, Expires:Session. So I did some digging and came across this thread that states that chrome or chromium will not store cookies for localhost or and IP. https://bugs.chromium.org/p/chromium/issues/detail?id=56211

So I thought Ok, no problem I will just add a host entry mycncjs.com and resolve it locally to 127.0.0.1.

Added it and tested, still only creating a Session level cookie that expires when the browser closes.

Here is an image from Chromium on my PI of the cookie when I am running tinyweb.

Not sure what else to do to get it to store the cookie permanently. Although there is some info in that thread with some info about how to store the cookie.

tinyweb_cookie

nickm324 commented 6 years ago

Ok i found a solution at least for me anyway. The reason it was session only was because no expiration was being set.

I modified the app.js file and update the cookie.set calls to:

Cookies.set('cnc.controllerType', controllerType,{ expires: 365 }); Cookies.set('cnc.port', port,{ expires: 365 }); Cookies.set('cnc.baudrate', baudrate,{ expires: 365 });

This seems to have resolved my issue, at least for the next year.

tinyweb_cookie2

MitchBradley commented 6 years ago

Nice debugging! Getting software to run for a year is pretty good theses days.

nickm324 commented 6 years ago

You can see the lang cookie in is being set with a 365 day expiration by default.

johnboiles commented 5 years ago

@nickm324 do you have these changes in a branch somewhere that we could make a pull-request from? It’d be great to get these in!