Simple webview application?

Hi, I’m trying to create a fullscreen desktop application for OSX. I’d like to use webtools (HTML, CSS, JS) to develop the app. Is there a way to create a simple app that is just a webview that loads the site?

I’ve looked into TideSDK and Fluid, but it seems with both of these options, the top-bar still shows up when the mouse is moved to the top of the screen, so I thought making a wrapper in C++ / OF might be a better solution, but how do I go about loading a website into the C++ application?

Or if anyone has another idea on how to achieve this, I’m all ears!

Thanks!

In my opinion, the easiest way to go about that on OSX is to make use of a Cocoa WebView. It’ll basically do all the web-related stuff for you automatically, you just tell it where to render in the window and what web page to load.

It doesn’t really integrate with C++, though, so it’s pretty situational. It might not be the best solution if you want to avoid Objective-C.

Here’s an incomplete addon that adds a WebView layer on top of an openFrameworks app. The meat of it is in this file if you’d just like to take out the important part.

There are C++ options available, though, like awesomeium.

If your app is really just a fullscreen webview, you’re probably best off not using OF and going the pure Cocoa WebView route.

Hmm, unless your application needs to be cross-platform, OF might not be the best fit (CEF can be a pain).

If you were to create a native Cocoa application in Xcode, it would only take a minute to create:

  • create a new Cocoa application
  • add WebKit.framework to the linked frameworks
  • add a WebView IBOutlet to your application delegate, and wire it up
  • in -applicationDidFinishLaunching: add the following:
[self.webView setMainFrameURL:@"http://openframeworks.cc"];
NSDictionary* options = @{
    NSFullScreenModeApplicationPresentationOptions: @(NSApplicationPresentationHideMenuBar | NSApplicationPresentationHideDock)
};
[self.webView enterFullScreenMode:[NSScreen mainScreen] withOptions:options];
1 Like

Chrome Kiosk Mode http://lifehacker.com/use-chromes-kiosk-mode-to-limit-someones-access-to-yo-1243433249

even works on a Pi apparently

I’ve looked into Chrome’s Kiosk Mode as well, as far as I can tell it isn’t supported on Mac though:


look at Chromium the openSource version of Chrome. We used it in Kiosk mode for our thingy at Google IO this year.

there is also PlainView by BarbarianGroup http://s3.amazonaws.com/plainviewapp/plainview_1.0.178.zip

or Safari Kiosk Mode https://github.com/mkb/safari-kiosk-mode
or FireFox extensions https://addons.mozilla.org/en-us/firefox/addon/r-kiosk/

Hey thanks for the suggestion, I tried this, but when I run the app I just get a white empty window. I don’t have much experience with Objective-C. Any idea what I’m doing wrong here? Here is my code:

AppDelegate.h :

#import <Cocoa/Cocoa.h>
#import <WebKit/WebKit.h>

@interface AppDelegate : NSObject <NSApplicationDelegate>

@property (weak) IBOutlet WebView *webview;
@property (assign) IBOutlet NSWindow *window;


@end

AppDelegate.m :

#import "AppDelegate.h"

@implementation AppDelegate

@synthesize webview;
@synthesize window;

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification
{
    // Insert code here to initialize your application
    [self.webview setMainFrameURL:@"http://openframeworks.cc"];
    NSDictionary* options = @{
                              NSFullScreenModeApplicationPresentationOptions: @(NSApplicationPresentationHideMenuBar | NSApplicationPresentationHideDock)
                              };
    [self.webview enterFullScreenMode:[NSScreen mainScreen] withOptions:options];

}

@end

Did you do it on a OSX or Windows? When I try running it I get:

open Chromium.app --kiosk
open: unrecognized option `--kiosk'
...

Tried all these options, and they still all show the top-bar when I move the mouse to the top of the screen. Is there any way to make a fullscreen web app that doesn’t show that top bar?

It is hard to say, did you add a WebView as a subview to the window’s content view in your XIB then wire it up to the AppDelegate outlet? You can skip the @synthesize steps, that is only required by the old runtime.

ummmmmmmm, huh?

How do I add a WebView as a subview to the window’s content view?
What is an XIB?
How do I wire it up to the AppDelegate outlet?

Sorry if these are total newb questions, but I have next to no experience with Cocoa and objective-c, so a little lost here…

we used OSX

@JackKalish I just tested starting Chrome and Chromium from the command line with --kiosk worked like a champ on my OSX 10.8 machine… not sure what you are doing wrong.

Actually check it out, I got it too work too, but the OSX top menu bar still pops up when I move my mouse to the top of the screen. Is there anyway to just get rid of that damn thing completely?

Wow OK, this took about two days of searching and I finally figured it out. I had to edit the application PLIST and add an Application UI Presentation Mode parameter set to value 3: “All hidden mode. In this mode, all UI elements are hidden, including the menu bar. Elements do not automatically show themselves in response to mouse movements or user activity.”

More info here: http://lifehacker.com/5280456/hide-your-mac-menu-bar-and-dock-for-a-cleaner-desktop

and here: https://developer.apple.com/library/ios/documentation/general/Reference/InfoPlistKeyReference/Articles/LaunchServicesKeys.html#//apple_ref/doc/uid/20001431-113616

Woo hoo! Thanks all for the help :smile: