HowTo Install Widgets

Most smartvisu widgets consist of up to 3 files:

• widget_xxx.html
• widget_xxx.js
• widget_xxx.css

Copy all these files to your pages folder (eg. /var/www/smartvisu/pages/fhem)

---

Add widget_xxx.js to your visu.js (create this file in your pages folder, if not already done)
visu.js:

// -----------------------------------------------------------------------------
// Function to include code from widget_xxx.js (by HCS)
// For details see: http://forum.fhem.de/index.php/topic,30909.msg276209.html#msg276209
// -----------------------------------------------------------------------------

var scriptFolder = (function() {
  var result = document.currentScript.getAttribute("src", 2);
  return result.substring(0, result.lastIndexOf("/") +1);
}());

function include(script) {
  script = scriptFolder + script;
  $.ajax({
    url: script,
    dataType: "script",
    async: false,
    error: function () {
      alert("Could not load '" + script + "'");
    }
  });
}

// -----------------------------------------------------------------------------
// Widgets to include...
// -----------------------------------------------------------------------------
include("widget_xxx.js");
include("widget_yyy.js");
include("widget_zzz.js");
// -----------------------------------------------------------------------------

---

Add widget_xxx.css to your visu.css (create this file in your pages folder, if not already done)
visu.css:

/** see http://wiki.selfhtml.org/wiki/CSS/@-Regeln#.40import_-_Einbinden_externer_Stylesheets for details */
/** must be the first statemants in visu.css */
@import "widget_xxx.css";
@import "widget_yyy.css";
@import "widget_zzz.css";

/** Other global css statemants may follow here */

---

Include widget_xxx.html to corresponding rooms_xyz.html and call widget. Parameters ('...') for xxx.widgetX can be found in widget_xxx.html or widget documentation.
rooms_xyz.html:

{% extends "rooms.html" %}
{% block content %}

{% import "widget_xxx.html" as xxx %}

<div class="block">
  <div class="set-1" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
    <div data-role="collapsible" data-collapsed="false">
    <h3>UZSU</h3>
      {{ xxx.widgetX('...') }}
    </div>
  </div>
</div>

{% endblock %}

---

Check that permissions of copied/created files are correctly, your webserver must have read access. You can use chmod/chown to adopt permissions on unix/linux based opearation systems.