Widgets

lastValueViewer : Affichage de la dernière valeur d'une variable

Définition

Le widget lastValueViewer se charge de récupérer et de mettre en forme la dernière valeur d'une variable pour un client donné.

widget

Vous pouvez télécharger les fichiers de démonstration ici.

Paramètres

Name	Type	Required	Description
elemId	String	true	Identifiant de l'élément HTML dans lequel sera inséré le widget
client	String	true	Nom du Braincube
mbId	String	true	Identifiant de la DataSource (MemoryBase Braincube)
dpId	String	true	Identifiant de la variable
label	String	false	Nom d'affichage de la variable (si non renseigné, le nom de la variable dans Braincube sera affiché)
refreshTime	Integer	false	Délai de rafraîchissement du widget, en millisecondes (ne doit pas être inférieur à une minute)

Intégration

Inclure la feuille de style IPL.min.css : <link rel="stylesheet" href="https://cdn.mybraincube.com/ipl-js/prod/IPL.min.css"/>
Créer un élément dans lequel sera inséré le widget : <div id="widget-one"></div>
Inclure jQuery et le script ipl-js :

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://cdn.mybraincube.com/ipl-js/prod/IPL.min.js"></script>

Définir le script qui permet de créer le widget :

<script>
    var widgetOne = new IPL.Widget({
        type: 'lastValueViewer',
        elemId: 'widget-one',
        client: 'demo',
        mbId: 'mb20',
        dpId: 'd2000020'
    });
</script>

Exemple HTML

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.mybraincube.com/ipl-js/prod/IPL.min.css"/>
    </head>

    <body>
        <div id="widget-one"></div>

        <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
        <script src="https://cdn.mybraincube.com/ipl-js/prod/IPL.min.js"></script>

        <script>
            var widgetOne = new IPL.Widget({
                type: 'lastValueViewer',
                elemId: 'widget-one',
                client: 'demo',
                mbId: 'mb20',
                dpId: 'd2000020'
            });
        </script>
    </body>
</html>

Vous pouvez écrire votre propre feuille de style (à insérer à la place de IPL.min.css).

Contenu du fichier IPL.min.css fourni :

.ipl-widget-last-value {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    display: inline-block;
}

.variable-label,
.variable-value,
.variable-unit {
    float: left;
    color: white;
    padding: 5px;
}

.variable-label {
    background: gray;
}

.variable-value,
.variable-unit {
    background: blue;
}

Vous avez la possibilité d'intégrer un graphique depuis un permalien Braincube via une iframe.

widget-chart

Récupérer l'URL du permalien (par exemple https://demo.mybraincube.com/plk/demo/cbf23eb1-dc44-4658-a439-fb3227713e05!a6e9742d-8b6f-4634-be73-f35d3c659370)
Ajouter à la fin de l'URL &hideEnvironment=true (c'est un paramètre qui permet d'enlever le bandeau du permalien)
Créer l'iframe qui contiendra le graphique avec l'URL obtenue :

<iframe class="chart-one" src="https://demo.mybraincube.com/plk/demo/cbf23eb1-dc44-4658-a439-fb3227713e05!a6e9742d-8b6f-4634-be73-f35d3c659370&hideEnvironment=true"/>

Vous pouvez personaliser l'affichage de l'iframe en ajoutant du CSS, par exemple :

<style>
    .chart-one {
        width: 500px;
        height: 300px;
        border: none;
    }
</style>