HolosBindQuickButtons

The traditional way of interacting with web content is to use a mouse cursor and click on the screen. In Holos, using your finger to push a button on a card isn't really that great - there's a distinct lack of feedback. To work around this, we expose our in-house UI elements via a simple method in our API. We allow each card to have a "quick menu," which supports up to 8 buttons, as shown below.

You can specify up to 8 JavaScript functions to be bound to each of these buttons. If you don't specify a button, it will not be presented around the card in Holos.

To bind your functions to the Quick Buttons list, first we'll have to define an object with the data required. Our example does the following:

var function0 = {name: "Test 1", call: "Test1"};
var function1 = {name: "Test 2", call: "Test2"};
var function2 = {name: "Test 3", call: "Test3"};
var function3 = {name: "Test 4", call: "Test4"};
var function4 = {name: "Test 5", call: "Test5"};
var function5 = {name: "Test 6", call: "Test6"};
var function6 = {name: "Test 7", call: "Test7"};
var function7 = {name: "Test 8", call: "Test8"};

The name field defines the text to be overlaid over the button and will be loaded when the card is instantiated. The call field is the exact name of the JavaScript function to call when the button is pressed. No arguments or parameters are currently supported in the quick button menu.

Let's take a moment to talk about loading. When developing for Holos, loading is a two-stage process. The first one is exactly like you'd expect in a normal web-dev context. The browser instance loads your page, the scripts get loaded, etc., but, then, when the browser reports that the page has finished loading, Holos will initialize a post-launch pass. This post-launch pass will push a series of initial state variables to the browser instance running your card, registering all of the Holos API callbacks, including a method called HolosInit(). If it is available, it will be executed.

Our example implements the following HolosInit():

function HolosInit()
{
    HolosBindQuickButtons(function0, function1, function2, function3, function4, function5, function6, function7);
}

HolosQuickButtons() is a Holos API call. We prefix all of our API names with 'Holos' to prevent collisions. For this reason, it is highly recommended that you refrain from prefixing any of your code symbols with "Holos". This API call will take in all of the function name and/or call objects we declared earlier and will register them in Holos.

We now implement the functions like so:

function Test1()
{
    document.getElementById("cardButtonText").innerHTML = "Test 1 Fired!";
}

function Test2()
{
    document.getElementById("cardButtonText").innerHTML = "Test 2 Fired!";
}

function Test3()
{
    document.getElementById("cardButtonText").innerHTML = "Test 3 Fired!";
}

function Test4()
{
    document.getElementById("cardButtonText").innerHTML = "Test 4 Fired!";
}

function Test5()
{
    document.getElementById("cardButtonText").innerHTML = "Test 5 Fired!";
}

function Test6()
{
    document.getElementById("cardButtonText").innerHTML = "Test 6 Fired!";
}

function Test7()
{
    document.getElementById("cardButtonText").innerHTML = "Test 7 Fired!";
}

function Test8()
{
    document.getElementById("cardButtonText").innerHTML = "Test 8 Fired!";
}

Check out the interactive example on CodePen.