title: Adding "literal HTML" to an HTML widget with data from a datasource?
body: <p>When creating an HTML widget in FreeBoard, the following text is displayed:</p>
  
  <blockquote>
    <p>Can be literal HTML, or javascript that outputs HTML.</p>
  </blockquote>
  
  <p>I know I can do the following to return HTML with data, but if I want to do something more complex I'd prefer to use literal HTML</p>
  
  <p><strong>return html with data</strong></p>
  
  <p><code>return "&lt;div style='color: red'&gt;This is a red timestamp: " + datasources["DS"]["Timestamp"] + "&lt;/div&gt;"</code></p>
  
  <p><strong>literal html with no data</strong></p>
  
  <pre><code>&lt;div style='color: red'&gt;
    This is red text.
  &lt;/div&gt;
  &lt;div style='color: blue'&gt;
    This is blue text.
  &lt;/div&gt;
  </code></pre>
  
  <p>Both of those work.  My question is, how can I insert data from a datasource into the literal html example?</p>
  
  <p>For more context, here is what is at the top of the editor:</p>
  
  <blockquote>
    <p>This javascript will be re-evaluated any time a datasource referenced here is updated, and the value you <code>return</code> will be displayed in the widget. You can assume this javascript is wrapped in a function of the form <code>function(datasources)</code> where datasources is a collection of javascript objects (keyed by their name) corresponding to the most current data in a datasource.</p>
  </blockquote>
  
  <p>And here is the default text:</p>
  
  <pre><code>// Example: Convert temp from C to F and truncate to 2 decimal places.
  // return (datasources["MyDatasource"].sensor.tempInF * 1.8 + 32).toFixed(2);
  </code></pre>