How does App.js/node-webkit Display Window/Graphics? - node.js

I am a bit green on Linux in general. I have a BeagleBone that has Angstrom installed. I'd like to strip away as much as I can to get boot times down to a minimum. All I want it to do, is boot up - straight to an App.js or node-webkit (I believe there are pretty much the same?) application, displaying a Twitter Bootstrap HTML/CSS GUI.
A node.js application will be tied to this; and will be serving the very same page up via express.js.
So what does App.js/node-webkit 'need' to display itself? How does it work?
I am from a Microsoft background, so to display anything, in my mind, is you load the OS which has all the API's for display, and then you load the graphical application. Does the Linux kernel itself have this built in? Or do you need other 'packages'?
Would love a detailed answer to this; I've been running around the Internet for days.

If you are going to be running on embedded linux then chromium or other browser plus nodejs is going to be quite heavy -- I would guess around 64 Meg or so. On top of that you will then need to run an x environment / display server so you get the graphical GUI up and running.
If you want to take the easy way out find a ubuntu linux distribution for the board you are developing for. There are many other distributions and you are welcome to try them, but I do find that there are lots of blog posts and help for ubuntu linux. Once you have that working on your device you can then install nodejs and a browser to view it.
If you don't need to have a display connected to the device then you can just run nodejs and surf to the machine which can then run your application on port 80.
If you want to create an "embedded" application and go the more visual studio route then you can look at QT. There is BootToQT which should boot an android like device but then take over the screen and run your application: http://qt.digia.com/Product/Boot-to-Qt/. They also have chromium so it is possible embed an html view in your application http://qt-project.org/. The Qt apps can be built in C++ but I think they also have an xml like structure for defining interfaces. QT Designer gives you an IDE to develop in.

Related

How to permanently display the Touch Bar from one specific app when running?

I've developed an app based on NodeJS with Electron for a web agency and try to extend it to the touch bar functionality of the MacBook Pro.
Developers launch the app once, which then automatically starts various processes in the background, such as compiling SASS files, optimizing images, etc.
Typically, these developers work with programs such as SublimeText or Atom. However, it often happens that the app expects user input during programming or inserts hints to optimize the code. I would like to display these things in the Touch Bar so that the user does not have to switch between the apps during programming. Unfortunately, the touch bar view of my app is hidden when switching to SublimeText or another app and replaced by the current app in the foreground.
Is there a way to display an app's specific touch bar while the app is running (even hidden) permanently without replacing it? I wonder if that is at least natively possible?
I couldn't find any information about this on the Electron documentary or somewhere elseā€¦
Thank you in advance!

Get OS display enumeration via nodejs

I'm looking at AppJS as a possible candidate to build a cross-browser application. AppJS runs HTML5 content with a Chromium window with hooks to NodeJS.
Is there a NodeJS module that can give me an enumeration of displays currently active? I need to support dual-monitor setups and knowing the bounds of each display is required.
I've search the Node npm directory with no luck so far.
Update:
Based on sihorton's answer, I'm playing with a javascript approach. Browser security prohibits my first approach from working in normal Chrome, but I will try this on AppJS chromium when I get home. Code here and here.
The basic approach is running code like:
OpenWindow('http://jsbin.com/axiwad/3/','test',400,500);
and then the opened window runs:
window.moveTo(screen.width+2, 0);
setTimeout(function(){
$(".s2w").html(screen.width+2);
$(".s2h").html(screen.height);
}, 500);
The issue of course, is that browser do not allow a moveTo outside the active screen boundary. It remains to be seen if AppJS chromium fork allows this.
If you are running AppJS then you can do the screen detection using tricks in javascript running in the chromium window part of AppJS. I quick google search found the following link, I am sure there are others and if you experiment enough then hopefully you will get a cross platform solution:-
http://archive.cpradio.org/code/javascript/dual-monitors-and-windowopen/
An alternative approach if you want to stay node-native is to implement a common api and then implement separate code behind that for each platform. I don't personally know of any better solution at the moment, and obviously this is less preferable to the javascript solution above. However if you must go this route then there is node edge:
http://tjanczuk.github.io/edge
This lets you run .net code from nodejs so you should be able to cover windows machines with that api. For linux you could then look into connecting into dbus:
https://github.com/sidorares/node-dbus
https://npmjs.org/package/dbus-native
Hopefully you can find appropriate sample code on the internet to get display properties using dbus and .net and then just plug it together and go from there.

Linux - Does it have an hta equivalent?

Windows has hta files. They are a bit like html files. They include html5 and javascript but they launch as desktop applications which are fully-trusted. (They use a file called mshta.exe found in the IE installed components in order to run.)
The great thing is you can port many web pages to desktop applications with just a few extra lines of code.
Info can be found here:
http://msdn.microsoft.com/en-gb/library/ms536496%28v=vs.85%29.aspx
Do the latest releases of Linux (and possibly apple mac desktops) have an equivalent of hta files?
If you are aiming to deliver HTML content you can take a much more flexible road: use a GUI framework with HTML capabilities like QT.
here there is a simple example about how to use webkit ( a rendering engine for the web ) to embed a fully working web browser in your GUI, and QT works under many desktop and mobile platforms.
You can try to use node webkit for this purpose.

Can I embed a browser inside a screensaver? On both Windows and Macs?

Here's the deal. I've animated + coded a variety of 'screensavers' in Actionscript3/Flash. They make extensive use of the timeline, AS3 code, the TweenLite library, and embedded fonts. That's the limit of my programming knowledge. I've tried, to no avail, to convert my .SWFs into screensaver files using a variety of software, such as InstantStorm. Somehow it never works, the code never executes properly, it's a disaster.
So, I'm wondering if it's possible to make a screensaver that simply contains an embedded browser, and have it point to my .SWF file, hosted on my web-server. Basically, imagine a full-screen website acting as a screensaver.
If this is possible, what is the EASIEST and FASTEST way for me to whip up a solution for both PCs and Macs? Language, etc. I'm hoping something that has a library I can simply draw from to embed the browser view :)
My startup is developing a product to do exactly this, it's called Screensaver Ninja and you can find it at https://Screensaver.Ninja.
You can set many different web pages with different timers. The configuration tool allows you log in and navigate to the page you want to display:
It uses WebKit, on Mac OS X it uses Safari's and on Windows it uses Chrome's and in both cases it has a separate session from any other browser installed on the computer.
Here's a small Windows-only solution:
https://github.com/cwc/web-page-screensaver/releases
You could modify this open-source one for the Mac so that it's hard-coded to your URL:
http://www.liquidx.net/blog/2010/11/13/webviewscreensaver-for-mac/
Modify hasConfigureSheet() to return NO and change the URL in kScreenSaverDefaultURL. And change the name!

Web Browser Boot-Only Operating System

Is it possible to create an operating system that loads a web browser without menu bars, tabs etc. and that is all it loads.
I do not mean like Chrome OS but I mean all it loads is a html page which can be interacted with like an ordinary web page e.g. google.com, youtube.com.
Also, if this is possible, I would prefer it to be a Linux based OS and Webkit based browser.
You might have to roll your own for something like that...my recommendation would be a small linux distribution and then figure out how to run the surf browser, possibly with the tabbed extension, exclusively. When the x environment starts up just execute those programs. You'd honestly never know the difference.
Here is a screenshot of what this all looks like on my computer, running dwm for window management, and surf + tabbed. This browser is controlled via the keyboard, so you'd have to get use to that.
You don't need to create an operating system, you can use Linux.
A simple implementation would be creating an application using Qt Embedded (qws) with a Widget containing a QWebView only (it's WebKit based), that would load a predefined address.
You could spawn that app from the init scripts (rcS for example) in an endless loop (simple bash script, so if the app crashes it gets loaded again)
You can prototype it with a simple hardware like beagleboard.org or friendlyarm.net boards.

Resources