Balkenanzeige wie Slider mit Modifikationen... wie?

[Morg]

Moin,

ich möchte gern den Füllstand der verschiedenen (Server-)Platten in der Visu anzeigen lassen. Ein erster Versuch mit

{{ basic.slider('', 'd.server.disk.root.percent', 0, 100, '', '', 'handle', '', '', 0, 'linear-gradient(90deg, rgb(0, 255, 0), rgb(255, 0, 0))') }}

funktioniert, aber ich würde gern Folgendes ändern:

1. würde ich gern im Handle nicht den Wert "gefüllt zu x Prozent" anzeigen, sondern z.B. "frei: x GB", x käme aus einem Item
2. brauche ich keine Möglichkeit, den Wert zu setzen (optional, der Prozent-Wert würde eh automatisch zurückgesetzt)

Dazu war meine Idee, das basic.slider-Widget zu kopieren und zu bearbeiten. Ich habe custom widgets im Ordner "project/widgets" abgelegt und importiere die bei Bedarf von Hand. Einen HTML-/Twig-Wrapper für andere Widgets zu bauen, bekomme ich hin, aber ich scheitere schon daran, den eigenen JS-Code zu binden....

Im Widget steht zB "data-widget='basic.slider'", wie verweise ich auf project/widgets/disk.js, wenn dort

$.widget("sv.my_disk", $.sv.widget, {​

steht?

Oder hat ggf. schon jemand sowas fertig, bevor ich das alles umstricke?

[wvhn]

Moin Morg,

wenn "project" (./pages/project) der konfigurierte Ordner Deiner Visu ist, werden die Dateien im Unterordner "./pages/project/widgets" automatisch importiert. Das gilt für die html und die js-Datei. Anderenfalls musst Du Dich selbst um den Import der html und das Laden der disk.js kümmern, oder beide Dateien in ./dropins/widgets ablegen.

Sinnvollerweise benennst Du die Widget-Dateien mit dem gleichen Grundnamen, also disk.html und disk.js. Wenn das Makro "mydisk" heißt, ist der Widgetname "disk.mydisk". Damit der js-Teil des Widgets initialisiert wird, muss im html-Teil das Attribut

data-widget="disk.mydisk"

gesetzt werden. Auf der js-Seite muss der initSelector entsprechend angegeben werden:

$.widget("sv.disk_mydisk", $.sv.widget, {​
    initSelector: 'div[data-widget="disk.mydisk"]',
    ...

Im Übrigen können Füllstände auch ganz gut mit basic.tank angezeigt werden.

Gruß
Wolfram

[Morg]

Oh, danke erstmal. basic.tank schau ich mir an, das hatte ich wohl noch nicht gesehen...

[Morg]

Hm.. ein modifizierter Tank (für horizontale Füllung...)

disk.html:

{% macro mydisk(id, item_pos, color) %}
    <div{% if not id is empty %} id="{{ uid(page, id) }}"{% endif %} data-widget="disk.mydisk" data-item="{{ item_pos }}"
        data-min="0" data-max="100"
        class="mydisk">
        <div>&nbsp;</div>
    </div>
{% endmacro %}
​

disk.js:

$.widget("sv.disk_mydisk", $.sv.widget, {

    initSelector: 'div[data-widget="disk.mydisk"]',

    options: {
        min: 0,
    max: 100,
    },

    _update: function(response) {
        var max = this.options.max;
        var min = this.options.min;

        var factor = Math.min(Math.max((response[0] - min) / (max - min), 0), 1);

        this.element.attr('title', Math.round(factor * 100) + '%')
            .find('div').css('width', factor * this.element.height());
    },

});
​

im Quelltext:

                    <td align="right">x{{ disk.mydisk('', 'd.server.disk.root.percent') }}y</td>
​

Ausgabe:

<td align="right">xy</td>

Er erzeugt anscheinend keine (Makro-)Ausgabe. Offensichtliche Fehler? Oder kann ich das irgendwie debuggen?

[wvhn]

Wenn ich die beiden Dateien in .dropins/widgets ablege, finde ich den Widget-Code in der html-Ausgabe und title sowie width verändern sich mit dem item-Wert.

<div data-widget="disk.mydisk" data-item="test.varnum" data-min="0" data-max="100" class="mydisk" title="100%">
   <div style="width: 21px;">&nbsp;</div>
</div>

Ich vermute, dass die Dateien bei Dir in einem Ordner liegen, aus dem der Import nicht funktioniert.

Damit der Abstand zwischen x und y sich verändert, musst Du im Widget im ersten div noch ein "display: inline-block;" ergänzen.

Gruß
Wolfram

[Morg]

Die Dateien liegen in <SV>/pages/<project>/widgets. Kann / muss man da irgendwas neu laden lassen?

x und y waren nur dazu da, einfacher zu sehen, ob das Widget in der Ausgabe auftaucht

In derselben Seite sind andere Widgets aus demselben Ordner, die funktionieren, ohne importiert worden zu sein... ich bin irritiert.

[wvhn]

Hab die Dateien auch mal nach <SV>/pages/<project>/widgets geschoben. Funzt ebenso ohne manuellen import. Reload (Shift-F5) reicht aus.
Hast Du irgendwo noch eine andere Datei disk.html oder disk.js? Browser Cache mal gelöscht?

[Morg]

Okay, wieder ein Punkt "zu blöd für einfache Lösungen"... hab die Datei auf dem Server vom PC aus angelegt, keine Leserechte für other...

Aber trotzdem danke für deine Hinweise, Stück für Stück kommen Funktion und Design zusammen