GRAPHIC ARTIST

user manual

Overview

GraphicArtist is a framework for rendering intelligent HTML based graphics pages and web apps to deliver video output as NewTek NDI IP Video format, or via a BlackMagic Design video interface. Properly formatted compatible templates can deliver Fill and Key with transparency through NDI or a compatible BMD Interface with dual SDI outputs.

 

Licensing

GraphicArtist can be purchased from the Apple App Store. This version is sandboxed and as such it can not access all local file paths. Depending on your application this may or may not be a problem.  If you do need full access to local storage from your html5 pages, an un-sandboxed version of the app is available on request from appsupport [at] gallery.co.uk.  The app store version must be installed and run first to bless and license the system - after which the non sandboxed version will be allowed to run.  The non-sandboxed version will NOT run unless the appstore version is already installed and has run previously.

 

Modes

GraphicArtist uses the WebKit HTML rendering system to deliver beautiful, intelligent graphics which are self aware, 100% scriptable and able to pull in data from the outside world without intermediate database systems. By pulling the content from the heart of WebKit, Grpahic Artist can also extract rendered pixels with a transparent background to create Fill and Key. For this type of operation you would use the 'HTML5 Mode' from the popup on the far right  of the GraphicArtist toolbar.

 

If you are using a template which makes use of Flash, you may need to select the 'Flash Mode' menu item to get your Flash elements to render correctly. Note that using Flash Mode can affect some normal HTML5 elements, so use Flash Mode only if you require it.

 

There are some situations where the technique of extracting pixels directly from WebKit wont work. In particular certain type of HTML pages use graphic elements like Video where it can sometime push rendering to the GPU and hence the video content doesnt actually appear as part of the HTML rendering. In these situations you can use the 'Compability Mode' menu item.  In Compatibility Mode, the pixels are scraped directly from the screen, and so there is no transparency option.  Also in Compatibility mode your GraphicArtist window MUST be positioned top left and completely on-screen so the GPU pixels can be accessed.  NB: If you are using Compatibility Mode routinely, you may want to avoid using a mac with retina display, since when operating in hiDPI mode, and compatibility mode, GraphicArtist has to do more work to resize the image. In the other modes, Retina display is not an issue.

 

Note that its possible to have your HTML Template auto-select Compatibility mode by including the following in the page header:

<meta compatibility_mode = "TRUE">

 

 

Loading Templates

There are number of ways of loading a template into GraphicArtist:

- Drag HTML file into the window

- Type or drag the URL into the Address Bar

- File Menu Open or Open Recent

- Reload a previously saved location from the Bookmarks popup Menu

* A future version of Graphic Artist will add TCP and HTTP interfaces to control loading of templates.

 

Bookmarks

Having loaded a template, you can save it as a bookmark using the small pop up menu to the left of the address bar. This will create a .webloc document which can be reloaded into GraphicArtist.  You can delete bookmarks by selecting the 'Manage Bookmarks' menu item then deleting the appropriate .webloc files.

 

Preferences

GraphicArtist has 2 output models  - either using NewTek NDI IP Video, or via a compatible BlackMagic Design video interface. You can select with using the controls in the preferences window. You can also select the window size and frame rate which GraphicArtist uses for WebKit. For best results match your HTML Template size to the chosen window size and match that to the appropriate BMD video mode and frame rates.

If your BMD device supports Fill and Key output, Graphic Artist will use this when in HTML5 or Flash Modes.

You can also change the name of the NDI Device which is advertised on your local network.

 

Menus

The Mode menu and the bookmarks popup menus have been covered earlier in this manual.

The File Menu includes a 'Clear Cache' command which may be necessary when you are developing new templates, to flush any changes through GraphicArtist to eliminate cached older HTML data.

 

 

Tips on Creating Templates

- To Create a transparent background so GraphicArtist can deliver fill and key, set your HTML page <body> to use a transparent background

style="background-color:transparent;"

This may not always be necessary since GraphicArtist will try to enforce this in some cases.

- Animation - Try to use simple CSS animations for best and smoothest results. Complex javascript driven animation may not be so smooth. A good example is the fade in and out which renders nicely with a CSS transition but may be juddery with javascripted gradual change in opacity. There is a CSS fade example in the Templates library.