HTML Frame Asset

Table of Contents

    Introduction

    The HTML Frame Asset enables the display of HTML content in an IntuiFace experience as a lighter alternative to using the Web Browser Asset. The HTML content can be entered directly in Composer or retrieved through binding from any external source. The content can be:

    After adding the HTML Frame Asset into a scene, double-click it to open a large, convenient editor.

    SimpleHTMLCSS.jpg

    If you want to embed a web component / widget from an existing website, check these examples below.

    Important note: All local content referenced within the HTML, JavaScript or CSS must be referenced using absolute paths.

    Properties, Triggers & Actions

    Properties

    • HTML: The HTML content to display in this asset. It can contain JavaScript embedded in a <script> </script> tag.
    • CSS: (optional) The CSS to apply to this HTML content.

    Triggers

    See Triggers Overview to get details of common triggers shared by all assets or collections

    • Link is clicked: Raised when a link is clicked within the HTML Frame Asset. This trigger raises the following parameter:
      • URL: the URL associated with the clicked link.

    Actions

    See Actions Overview to get details of common actions shared by all assets or collections

    • Set CSS: Replace existing CSS code with new content.
    • Set HTML: Replace existing HTML code with new content.

    Usage Samples

    Formatted text

    You can use the HTML property, with or without CSS content (listed inline with the HTML or separately in the CSS property) to format text.

    Here is a simple HTML example, using only the HTML property.

    SimpleHTML.jpg

    Here is another example, combining the HTML and CSS properties.

    SimpleHTMLCSS.jpg

    Formatted content from a CMS

    The example below illustrates some formatted content that could come from a content management system via a REST Web Service Interface Asset created using API Explorer. It contains formatted text, a list and an image.

    <h1>HTML Ipsum Presents</h1>
    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum <code>commodo vitae</code>, <span style="color:red;">ornare sit amet</span> <a href="https://www.intuilab.com">IntuiLab.com</a> in turpis pulvinar facilisis. Ut felis.</p>
    <h2>Header Level 2</h2>
    <ol>
       <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
       <li>Aliquam tincidunt mauris eu risus.</li>
    </ol>
    <img src="https://dl.airtable.com/HsurIW5MSl63sApzLnKN_full_Roberta's_Trip.jpg" width="100%">
    

    Here is the result in Composer, using binding to store content within the HTML property.

    HTMLBinding.jpg

    Web components / widgets

    To integrate content from the Web, search for the Embed / Embed code button usually located next to the Share option, then copy & paste the HTML code into the HTML property of the HTML Frame Asset. When you do, you might need to clean the default CSS property of the HTML Frame Asset to make sure your component renders as it is intended.

    Let's see an example using this Sketchfab 3D model.
    Click the Embed button to retrieve the associated HTML code.

    mechDrone.jpg

    Then copy (ctrl + C) the code from the displayed pop-up.

    Embed.jpg

    In Composer, within the HTML Frame Asset properties panel, paste (ctrl + V) the code into the HTML property.

    PasteHTML.jpg

    Video player

    IntuiFace already proposes a dedicated YouTube Asset, but in case you want to use another provider such as DailyMotion or Vimeo, you can use its share/embed feature with the HTML Frame Asset.

    Let's take the example of this Vimeo video from an IntuiFace expert that leads to the following embed code:

    <iframe src="https://player.vimeo.com/video/62665612?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
    <p><a href="https://vimeo.com/62665612">BMW Intuiface Demo</a> from <a href="https://vimeo.com/prendi">Prendi</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
    

    Vimeo.png

    You could remove the second part of the HTML code (the <p> tag) to keep only the iframe containing the video while removing the text line with links.

    Countdown widget

    Lots of online services enable you to creat a countdown clock for a specific date and time. We picked Tickcounter. Configure the countdown on their website, click on Embed on your website, then copy / paste the auto-generated HTML code into the HTML Frame Asset.

    
    <div data-type="countdown" data-id="416701" class="tickcounter" style="width: 100%; position: relative; padding-bottom: 25%">
       <a href="//www.tickcounter.com/countdown/416701/my-countdown-example" title="My Countdown Example">My Countdown Example</a>
       <a href="//www.tickcounter.com/" title="Countdown">Countdown</a>
    </div>
    <script>
       (function(d, s, id) { var js, pjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//www.tickcounter.com/static/js/loader.js"; pjs.parentNode.insertBefore(js, pjs); }(document, "script", "tickcounter-sdk"));
    </script>
    

    countdownHTML.gif

    SVG Animation

    The HTML asset can also be used to display static or animated vector graphics using the SVG format.

    If the HTML Frame Asset container is set to Free, make sure the SVG was made to be scalable to avoid unexpected behavior.

    heartSVG.gif

    Google Charts

    The HTML property can contain JavaScript and be used to display dynamic components or animation.

    Here is an example using Google Charts. The JavaScript code is directly embedded in the HTML property using <script> tags.

    <html>
      <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load('current', {'packages':['corechart']});
          google.charts.setOnLoadCallback(drawChart);
    
          function drawChart() {
    
            var data = google.visualization.arrayToDataTable([
              ['Task', 'Hours per Day'],
              ['Work',     11],
              ['Eat',      2],
              ['Commute',  2],
              ['Watch TV', 2],
              ['Sleep',    7]
            ]);
    
            var options = {
              title: 'My Daily Activities'
            };
    
            var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    
            chart.draw(data, options);
          }
        </script>
      </head>
      <body>
        <div id="piechart" style="width: 900px; height: 500px;"></div>
      </body>
    </html>
    

    GoogleChart.jpg

    Known limitations

    • Using Player for Kiosks on the Chrome OS platform, external resources (JavaScript, CSS, images, ...) are not loaded.