[Codebeispiel] Neues Widget für formatierte Werte

[2ndsky]

Hallo Freunde der smartVISU,

angeregt durch die Diskussion hier: Werte-formatieren (https://knx-user-forum.de/showthread.php?t=28920) und weil ich es selber gerade brauchen kann, habe ich ein Widget erstellt, das Werte beliebig formatieren kann. Dabei kann man aber nicht einfach eine Funktion mitgeben (oder geht das?) sondern man muss den Namen der Funktion hinterlegen. Diese Funktion muss beim Prototyp Number vorher hinterlegt worden sein. Sieht dann so aus (bisher heißt das Widget visu.format):

Widget

/**
* Displays a formatted value
*
* @param unique id for this widget
* @param a gad/item
* @param a name of a format function
* @param a unit, tries to get the format for that unit from the language-file (optional)
* @param the parent html-tag for the value (optional, default 'span')
*/
{% macro format(id, gad, format, unit, tag) %}

        <{{ tag|default('span') }} id="{{ uid(page, id) }}" data-widget="visu.format" data-item="{
{ gad }}"
    data-unit="{{ unit }}" data-format="{{ format }}">-.- {{ unit }}</{{ tag|default('span') }}>

{% endmacro %}

zugehöriger JS Code:

$(document).delegate('[data-widget="visu.format"]', {
    'update': function (event, response) {
        $('#' + this.id).html(parseFloat(response)[$(this).attr('data-format')]() + ' ' + $(this).attr('data-unit'));
    }   
});

Verwendet wird das ganze dann so:

{{ visu.format('wp.wp_hours', 'wp.wp_hours', 'transExSecondsToHours', 'h') }}

Und natürlich muss nun im Projekt JS noch irgendwo die transExSecondsToHours für Numbers definiert werden:

Number.prototype.transExSecondsToHours = function() {
    return (this / (60 * 60)).toFixed(1);
};

Viel Spass damit und Feedback erwünscht!

[henfri]

Wow. Danke

von Unterwegs getippert