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:

• formatted text, with many more possibilities than the Rich Text asset. For example, pre-formatted content coming from a content management system such as Wordpress.
• Web components (widgets) such as YouTube, Facebook, etc.

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

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

NOTE: See the HTML Frame Asset limitations about how to reference resources.

Properties, Triggers & Actions

Properties

Appearance

Triggers

Actions

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.

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

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.intuiface.com">Intuiface.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.

Web components / widgets

To integrate content from the web, search for that content's "embed" code, then copy & paste that 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.

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

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

Video player

Intuiface already contains a dedicated YouTube Asset, but if 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>

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

Many online services enable you to create 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>

SVG Animation

The HTML Frame 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 is scalable to avoid unexpected behavior.

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>

Limitations

• Resources used by the HTML Frame Asset will only work when referenced using absolute paths, such as <img src="https://www.webdomain.com/myimage.png">, even in css files. Referencing resources using relative paths such as  <img src="../myimage.png"> or <img src="myimage.png"> will not be resolved.
• Text fields created in the HTML Frame Asset will not trigger an appearance of the Intuiface keyboard. It will trigger the device's keyboard instead (iOS, Android, Samsung Tizen).
• The HTML Frame Asset should never be used to replace the Rich Text asset when creating experiences for Windows-based devices as it requires significantly more resources to be rendered. Each HTML Frame Asset will instantiate a dedicated process that requires system memory and processor time. Having multiple HTML Frame Assets on the same scene will inevitably fill up your system's memory.
• CSS-referenced font files will not be loaded.
• Rendering on Windows devices might be affected if the experience's resolution does not match the display's resolution.
• On ChromeOS, external resources like JavaScript, CSS, or images cannot be loaded.