韓誥傭痔

Table of Contents

Crear un giny (tutorial)

Crear un giny (tutorial)

Aquest 谷s un tutorial passa a passa que ensenyacom crear un giny de tauler senzill.

La versi車 m赤nima requerida de 韓誥傭痔 per a aquest tutorial 谷s la 6.4.4.

Podeu descarregar tots els fitxers d'aquest giny en un arxiu ZIP: lesson_gauge_chart.zip.

Qu豕 fareu

Durant aquest tutorial, primer creareu un giny 莉角莽勳釵 "Hola, m車n!" i, a tot seguit, el convertireu a un giny m谷s avan?at que ensenya el valor d'un element com a gr角fic gauge. Aix赤谷s com es veur角 el giny enllestit:

Part I - "Hola, m車n!"

En aquesta secci車 aprendreu a crear els elements m赤nims de giny necessaris i afegir un nou giny a la interf赤cie 韓誥傭痔.

Afegir un giny buit a la interf赤cie 韓誥傭痔

Creeu el directori lesson_gauge_chart al directori 鳥辰餃喝梭莽 de la vostra instal﹞laci車 de 韓誥傭痔 (com ara zabbix/ui/modules).

Tots els ginys personalitzats es tracten com a 鳥辰餃喝梭莽 externs i s'han d'afegir al directori de 鳥辰餃喝梭莽 de 韓誥傭痔 (per exemple, zabbix/ui/modules). El directori zabbix/ui/widgets 谷s reservat per als ginys integrats de 韓誥傭痔 i s'actualitza juntament amb la interf赤cie d'usuari de 韓誥傭痔.

Creeu el fitxer manifest.json amb metadades b角siques del giny (veieu la descripci車 dels 梯硃娶角鳥梗喧娶梗莽 admesos).

ui/modules/lesson_gauge_chart/manifest.json

{
           "manifest_version": 2.0,
           "id": "lesson_gauge_chart",
           "type": "widget",
           "name": "Gauge chart",
           "namespace": "LessonGaugeChart",
           "version": "1.0",
           "author": "韓誥傭痔 SIA"
       }

A la interf赤cie 韓誥傭痔 aneu a la secci車 Administraci車↙General↙紼辰餃喝梭s i premeu el bot車 Escanejar directori.

Cerqueu el nou m辰dul Diagrama de mesura a la llista i canvieu l'estat del m辰dul de Desactivat a Actiu (feu clic a l'hiperenlla? Desactivat).

Obriu el Tauler de control, canvieu-lo a mode d'edici車 i afegiu-hi un nou giny. Al camp Tipus, trieu 勞娶角款勳釵 de mesura.

En aquest punt, la configuraci車 del giny Diagrama de mesura nom谷s cont谷 camps de giny habituals: Nom i Interval d'actualitzaci車. Premeu Afegir per afegir el giny al tauler.

Al tauler hauria d'apar豕ixer un giny en blanc. Premeu Desar els canvis a l'extrem superior dret per desar el tauler.

Afegir un nou giny

El fitxer view del giny s'ha d'ubicar al directori views (per a aquest tutorial, ui/modules/lesson_gauge_chart/views/). Si el fitxer t谷 un nom predeterminat widget.view.php, no cal que el registreu a manifest.json. Si el fitxer t谷 un nom diferent, especifiqueu-lo a la secci車 actions/widget.lesson_gauge_chart.view de manifest.json.

Afegiu un directori views al leson_gauge_chart.
Creeu el fitxer widget.view.php dins del directori views.

ui/modules/lesson_gauge_chart/views/widget.view.php

<?php
       
       /**
        * Visualitzaci車 del giny del gr角fic de mesura.
        *
        * @var CView $this
        * @var array $data
        */
           
       (new CWidgetView($data))
           ->addItem(
               new CTag('h1', true, 'Hello, world!')
           )
           ->show();

Recarregueu el tauler 韓誥傭痔. El giny 勞娶角款勳釵 de mesura ara ensenyar角 "Hola, m車n!".

Part II - 勞娶角款勳釵 de mesura

Afegiu 梯硃娶角鳥梗喧娶梗莽 a una vista de configuraci車 i empreu-los en una vista de giny

En aquesta secci車, aprendr角s a afegir un camp de configuraci車 del giny i a mostrar el valor introdu?t a la vista del giny com a text.

La configuraci車 del giny consta d'un formulari (韓誥傭痔\Widgets\CWidgetForm) i d'una vista de formulari de giny (widget.edit.php). Per afegir camps (韓誥傭痔\Widgets\CWidgetField), heu de crear una classe WidgetForm, que ampliar角 韓誥傭痔\Widgets\CWidgetForm.

El formulari cont谷 el conjunt de camps (韓誥傭痔\Widgets\CWidgetField) de diversos tipus, que s'empren per validar els valors introdu?ts per l'usuari. El camp de formulari (韓誥傭痔\Widgets\CWidgetField) per a cada tipus d'element d'entrada converteix el valor en un format 迆nic per emmagatzemar-lo a la base de dades.

El fitxer formulari del giny s'ha d'ubicar al directori includes (per a aquest tutorial, ui/modules/lesson_gauge_chart/includes/). Si el fitxer t谷 un nom predeterminat WidgetForm.php, no cal que el registreu a manifest.json. Si el fitxer t谷 un nom diferent, especifiqueu-lo a la secci車 widget/form_class de manifest.json.

Afegiu un directori includes al lesson_gauge_chart.
Creeu el fitxer WidgetForm.php dins del directori includes.

ui/modules/lesson_gauge_chart/includes/WidgetForm.php

<?php
           
       namespace Modules\LessonGaugeChart\Includes;
           
       use 韓誥傭痔\Widgets\CWidgetForm;
           
       class WidgetForm extends CWidgetForm {
       }

Afegiu un camp 嗨梗莽釵娶勳梯釵勳車 al formulari de configuraci車 del giny. Aquest 谷s un camp de text normal, on un usuari pot introduir qualsevol conjunt de car角cters. Podeu utilitzar la classe CWidgetFieldTextBox per a aix辰.

ui/modules/lesson_gauge_chart/includes/WidgetForm.php

<?php
       
       namespace Modules\LessonGaugeChart\Includes;
       
       use 韓誥傭痔\Widgets\CWidgetForm;
       
       use 韓誥傭痔\Widgets\Fields\CWidgetFieldTextBox;
       
       class WidgetForm extends CWidgetForm {
       
          public function addFields(): self {
             return $this
                ->addField(
                   new CWidgetFieldTextBox('description', _('Description'))
                );
          }
       }

Al directori views, creeu un fitxer de visualitzaci車 de configuraci車 del giny widget.edit.php i afegiu una vista per al nou camp 嗨梗莽釵娶勳梯釵勳車. Per a la classe de camp CWidgetFieldTextBox, la vista 谷s CWidgetFieldTextBoxView.

ui/modules/lesson_gauge_chart/views/widget.edit.php

<?php
           
       /**
        * Visualitzaci車 del formulari del giny del gr角fic de mesura.
        *
        * @var CView $this
        * @var array $data
        */
           
       (new CWidgetFormView($data))
           ->addField(
               new CWidgetFieldTextBoxView($data['fields']['description'])
           )
           ->show();

Aneu al Tauler i premeu la icona d'engranatge per obrir la configuraci車 del giny.
La configuraci車 del giny ara cont谷 un camp nou de text (嗨梗莽釵娶勳梯釵勳車). Introdu?u qualsevol valor, per exemple, 嗨梗莽釵娶勳梯釵勳車 del gr角fic de calibre.

Premeu Aplica a la configuraci車 del giny. Premeu Desar els canvis per desar el tauler. El text nou no 谷s visible enlloc i el giny encara mostra "Hola, m車n!".

Per veure-ho al giny, cal recuperar el valor del camp 嗨梗莽釵娶勳梯釵勳車 de la base de dades i passar a la vista del giny. Per fer-ho, heu de crear una classe d'acci車.

Afegiu un directori actions al lesson_gauge_chart.
Creeu un fitxer WidgetView.php dins del directori actions. La classe d'acci車 WidgetView ampliar角 la classe CControllerDashboardWidgetView.

Els valors dels camps de configuraci車 del giny s'emmagatzemen a la propietat $fields_values de la classe d'acci車.

ui/modules/lesson_gauge_chart/actions/WidgetView.php

<?php
           
       namespace Modules\LessonGaugeChart\Actions;
           
       use CControllerDashboardWidgetView,
           CControllerResponseData;
           
       class WidgetView extends CControllerDashboardWidgetView {
           
           protected function doAction(): void {
               $this->setResponse(new CControllerResponseData([
                   'name' => $this->getInput('name', $this->widget->getName()),
                   'description' => $this->fields_values['description'],
                   'user' => [
                       'debug_mode' => $this->getDebugMode()
                   ]
               ]));
           }
       }

Obriu el fitxer manifest.json i registreu WidgetView com a classe d'acci車 a la secci車 actions/widget.lesson_gauge_chart.view.

ui/modules/lesson_gauge_chart/manifest.json

{
            "manifest_version": 2.0,
            "id": "lesson_gauge_chart",
            "type": "giny",
            "name": "勞娶角款勳釵 de mesura",
            "namespace": "LessonGaugeChart",
            "version": "1.0",
            "author": "韓誥傭痔 SIA",
            "actions": {
                "widget.lesson_gauge_chart.view": {
                    "class": "WidgetView"
                }
            }
       }

Ara podeu emprar el valor del camp de descripci車, contingut a $data['description'], a la vista del giny. Obriu views/widget.view.php i substitu?u el text est角tic "Hola, m車n!" amb $餃硃喧硃啊'餃梗莽釵娶勳梯釵勳車'敕.

ui/modules/lesson_gauge_chart/views/widget.view.php

<?php
           
       /**
         * Visualitzaci車 del giny del gr角fic de mesura.
         *
         * @var CView $this
         * @var array $data
         */
           
       (nou CWidgetView($data))
            ->addItem(
                new CTag('h1', true, $data['description'])
            )
            ->show();

Actualitzeu la p角gina Tauler. Haur赤eu de veure el text de descripci車 del giny en lloc de "Hola, m車n!".

Recuperar el valor d'un element mitjan?ant l'API

El giny hauria de mostrar el darrer valor d'un element triat per l'usuari. Per aix辰, heu d'afegir la possibilitat de triar elements a la configuraci車 del giny.

En aquesta secci車 aprendreu a afegir un camp de selecci車 d'elements al formulari del giny i a afegir la part visual d'aquest camp a la vista de configuraci車. Aleshores, el controlador de ginys podr角 recuperar les dades de lelement i el seu valor mitjan?ant una petici車 d'API. Un cop rebuda, el valor es pot mostrar a la vista del giny.

Obriu includes/WidgetForm.php i afegiu el camp CWidgetFieldMultiSelectItem. Aix辰 us permetr角 triar un element al formulari de configuraci車.

ui/modules/lesson_gauge_chart/includes/WidgetForm.php

<?php
       
       namespace Modules\LessonGaugeChart\Includes;
       
       use 韓誥傭痔\Widgets\{
           CWidgetField,
           CWidgetForm
       };
       
       use 韓誥傭痔\Widgets\Fields\{
           CWidgetFieldMultiSelectItem,
           CWidgetFieldTextBox
       };
       
       /**
        * Formulari de giny de gr角fic de calibre.
        */
       classe WidgetForm amplia CWidgetForm {
       
           public function addFields(): self {
               return $this
                   ->addField(
                       (newCWidgetFieldMultiSelectItem('itemid', _('Item')))
                           ->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
                           ->setMultiple (false)
                   )
                   ->addField(
                       new CWidgetFieldTextBox('餃梗莽釵娶勳梯釵勳車', _('嗨梗莽釵娶勳梯釵勳車'))
                   );
           }
       }

Obriu views/widget.edit.php i afegiu el component visual de camp a la vista de configuraci車.

ui/modules/lesson_gauge_chart/views/widget.edit.php

<?php
       
       /**
        * Visualitzaci車 del formulari del giny del gr角fic de mesura.
        *
        * @var CView $this
        * @var array $data
        */
       
       (new CWidgetFormView($data))
           ->addField(
               new CWidgetFieldMultiSelectItemView($data['fields']['itemid'], $data['captions']['items']['itemid'])
           )
           ->addField(
               new CWidgetFieldTextBoxView($data['fields']['description'])
           )
           ->show();

Torneu al tauler i feu clic a la icona d'engranatge del giny per obrir el formulari de configuraci車 del giny.
El formulari de configuraci車 del giny ara cont谷 un camp d'entrada nou Element. Trieu l'equip "Servidor 韓誥傭痔" i l'element "C角rrega mitjana (1 m de mitjana)".

Feu clic a Aplicar al formulari de configuraci車 del gint. Tot seguit, feu clic a Desar els canvis a l'extrem superior dret per desar el tauler.
Obriu i modifiqueu actions/WidgetView.php.

A partir d'ara, l'identificador de l'element ser角 disponible al controlador del giny a $this->fields_values['itemid']. El m豕tode del controlador doAction() recopila les dades de l'element (nom, tipus de valor, unitats) mitjan?ant el m豕tode API item.get i l'迆ltim valor de l'element mitjan?ant el M豕tode de l'API history.get.

ui/modules/lesson_gauge_chart/actions/WidgetView.php

<?php
       
       namespace Modules\LessonGaugeChart\Actions;
       
       use API,
           CControllerDashboardWidgetView,
           CCollerResponseData;
       
       class WidgetView extendsCControllerDashboardWidgetView {
       
           protected function doAction(): void {
               $db_items = API::Item()->get([
                   'output' => ['itemid', 'value_type', 'nom', 'unitats'],
                   'itemids' => $this->fields_values['itemid'],
                   'webitems' => true,
                   'filtre' => [
                       'value_type' => [ITEM_VALUE_TYPE_UINT64, ITEM_VALUE_TYPE_FLOAT]
                   ]
               ]);
       
               $value = nul;
       
               if ($db_items) {
                   $element = $db_items[0];
       
                   $堯勳莽喧辰娶勳硃 = API::History()->get([
                       'output' => API_OUTPUT_EXTEND,
                       'itemids' => $item['itemid'],
                       'history' => $item['value_type'],
                       'sortfield' => 'rellotge',
                       'sortorder' => ZBX_SORT_DOWN,
                       '梭赤鳥勳喧' => 1
                   ]);
       
                   si ($history) {
                       $value = convertUnitsRaw([
                           'valor' => $history[0]['valor'],
                           'unitats' => $item['unitats']
                       ]);
                   }
               }
       
               $this->setResponse(new CControllerResponseData([
                   'name' => $this->getInput('name', $this->widget->getName()),
                   'valor' => $value,
                   'description' => $this->fields_values['餃梗莽釵娶勳梯釵勳車'],
                   'usuari' => [
                       'debug_mode' => $this->getDebugMode()
                   ]
               ]));
           }
       }

Obriu views/widget.view.php i afegiu el valor de l'element a la vista del giny.

ui/modules/lesson_gauge_chart/views/widget.view.php

<?php
       
       /**
        * Visualitzaci車 del giny del gr角fic de mesura.
        *
        * @var CView $this
        * @var array $data
        */
       
       (new CWidgetView($data))
           ->addItem([
               new CTag('h1', true, $data['餃梗莽釵娶勳梯釵勳車']),
               CDiv new($data['valor'] !== nul ? $data['valor']['valor'] : _('Sense dades'))
           ])
           ->show();

Actualitzeu la p角gina del tauler. El giny mostrar角 el valor de l'element m谷s recent.

Afegir JavaScript al giny.

En aquesta secci車, aprendreu a afegir elements Javascript al giny.

Afegirem:

un gr角fic de mesura fet amb JavaScript - per mostrar d'un cop d'ull si el valor m谷s recent 谷s normal o massa alt/massa baix.
釦梗釵釵勳車 唬棗紳款勳眶喝娶硃釵勳車 avan?ada per a 梯硃娶角鳥梗喧娶梗莽 opcionals, com ara el color, els valors m赤nims i m角xims, les unitats i el camp 嗨梗莽釵娶勳梯釵勳車 creat anteriorment.

Creeu un fitxer widget.edit.js.php dins del directori views.

JavaScript ser角 responsable d'amagar els camps opcionals darrere de la casella de selecci車 唬棗紳款勳眶喝娶硃釵勳車 avan?ada i d'inicialitzar el selector de colors a la vista de configuraci車. Podeu afegir-lo al mateix directori que la vista de configuraci車.

Com que el JavaScript per a la vista de configuraci車 s'ha de carregar amb el formulari, haureu d'incloure-lo a widget.edit.php tal com es mostra a les passes seg邦ents.

ui/modules/lesson_gauge_chart/views/widget.edit.js.php

<?php
           
       use Modules\LessonGaugeChart\Widget;
           
       ?>
           
       window.widget_lesson_gauge_chart_form = new class {
           
           init({color_palette}) {
               this._form = document.getElementById('widget-dialogue-form');
           
               this._advanced_configuration = document.getElementById('adv_conf');
               this._unit_select = document.getElementById('value_units');
               this._unit_value = document.getElementById('value_static_units');
           
               this._advanced_configuration.addEventListener('change', () => this.updateForm());
               this._unit_select.addEventListener('change', () => this.updateForm());
           
               colorPalette.setThemeColors(color_palette);
           
               for (const colorpicker of jQuery('.<?= ZBX_STYLE_COLOR_PICKER ?> input')) {
                   jQuery(colorpicker).colorpicker();
               }
           
               const overlay = overlays_stack.getById('widget_properties');
           
               for (const event of ['overlay.reload', 'overlay.close']) {
                   overlay.$dialogue[0].addEventListener(event, () => { jQuery.colorpicker('hide'); });
               }
           
               this.updateForm();
           }
           
           updateForm() {
               const show_advanced_configuration = this._advanced_configuration.checked;
           
               for (const element of this._form.querySelectorAll('.js-advanced-configuration')) {
                   element.style.display = show_advanced_configuration ? '' : 'none';
               }
           
               this._unit_value.disabled = this._unit_select.value == <?= Widget::UNIT_AUTO ?>;
           }
       };

Creeu un fitxer Widget.php al directori principal de ginys lesson_gauge_chart per crear una nova classe Giny.

La classe Giny ampliar角 la classe base CWidget per afegir/substituir la configuraci車 predeterminada del giny (en aquest cas - traduccions).

JavaScript, que es proporciona tot seguit, mostra la cadena "Sense dades" en cas que manquin dades. La cadena "Sense dades" 谷s present als fitxers de traducci車 de la interf赤cie d'usuari de 韓誥傭痔.

Si hi ha constants de giny, es recomana especificar-les tamb谷 a la classe Giny.

ui/modules/lesson_gauge_chart/Widget.php

<?php 
           
       namespace Modules\LessonGaugeChart;
           
       use 韓誥傭痔\Core\CWidget;
           
       class Widget extends CWidget {
           
           public const UNIT_AUTO = 0;
           public const UNIT_STATIC = 1;
           
           public function getTranslationStrings(): array {
               return [
                   'class.widget.js' => [
                       'No data' => _('No data')
                   ]
               ];
           }
       }

Obriu includes/WidgetForm.php i afegiu els nous camps 唬棗紳款勳眶喝娶硃釵勳車 avan?ada (casella de selecci車), Color (selector de color), Min (camp num豕ric), Max (camp num豕ric), Unitats (trieu).

ui/modules/lesson_gauge_chart/includes/WidgetForm.php

<?php
           
       namespace Modules\LessonGaugeChart\Includes;
           
       use Modules\LessonGaugeChart\Widget;
       use 韓誥傭痔\Widgets\CWidgetField;
       use 韓誥傭痔\Widgets\CWidgetForm;
           
       use 韓誥傭痔\Widgets\Fields\CWidgetFieldCheckBox;
       use 韓誥傭痔\Widgets\Fields\CWidgetFieldColor;
       use 韓誥傭痔\Widgets\Fields\CWidgetFieldMultiSelectItem;
       use 韓誥傭痔\Widgets\Fields\CWidgetFieldNumericBox;
       use 韓誥傭痔\Widgets\Fields\CWidgetFieldSelect;
       use 韓誥傭痔\Widgets\Fields\CWidgetFieldTextBox;
           
       /**
        * Gauge chart widget form.
        */
       class WidgetForm extends CWidgetForm {
           
           public function addFields(): self {
               return $this
                   ->addField(
                       (new CWidgetFieldMultiSelectItem('itemid', _('Item')))
                           ->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
                           ->setMultiple(false)
                           ->setFilterParameter('numeric', true)
                   )
                   ->addField(
                       new CWidgetFieldCheckBox('adv_conf', _('Advanced configuration'))
                   )
                   ->addField(
                       (new CWidgetFieldColor('chart_color', _('Color')))->setDefault('666666')
                   )
                   ->addField(
                       (new CWidgetFieldNumericBox('value_min', _('Min')))
                           ->setDefault(0)
                           ->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
                   )
                   ->addField(
                       (new CWidgetFieldNumericBox('value_max', _('Max')))
                           ->setDefault(100)
                           ->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
                   )
                   ->addField(
                       (new CWidgetFieldSelect('value_units', _('Units'), [
                           Widget::UNIT_AUTO => _x('Auto', 'history source selection method'),
                           Widget::UNIT_STATIC => _x('Static', 'history source selection method')
                       ]))->setDefault(Widget::UNIT_AUTO)
                   )
                   ->addField(
                       (new CWidgetFieldTextBox('value_static_units'))
                   )
                   ->addField(
                       new CWidgetFieldTextBox('description', _('Description'))
                   );
           }
       }

Obriu views/widget.edit.php i afegiu els components visuals de camp a la vista de configuraci車.

El m豕tode addField() de la classe CWidgetFormView pren una cadena de classe CSS com a segon par角metre. Afegiu la cadena js-advanced-configuration a aquests camps i les seves etiquetes, que s'haurien d'amagar si no es tria 唬棗紳款勳眶喝娶硃釵勳車 avan?ada.

Per afegir un fitxer JavaScript a la vista de configuraci車, empreu el m豕tode includeJsFile(). Per afegir JavaScript en l赤nia, empreu el m豕tode addJavaScript().

ui/modules/lesson_gauge_chart/views/widget.edit.php

<?php
           
       /**
        * Visualitzaci車 del formulari del giny del gr角fic de mesura.
        *
        * @var CView $this
        * @var array $data
        */
           
       use 韓誥傭痔\Widgets\Fields\CWidgetFieldGraphDataSet;
           
       $lefty_units = new CWidgetFieldSelectView($data['fields']['value_units']);
       $lefty_static_units = (new CWidgetFieldTextBoxView($data['fields']['value_static_units']))
           ->setPlaceholder(_('value'))
           ->setWidth(ZBX_TEXTAREA_TINY_WIDTH);
           
       (new CWidgetFormView($data))
           ->addField(
               new CWidgetFieldMultiSelectItemView($data['fields']['itemid'], $data['captions']['items']['itemid'])
           )
           ->addField(
               new CWidgetFieldCheckBoxView($data['fields']['adv_conf'])
           )
           ->addField(
               new CWidgetFieldColorView($data['fields']['chart_color']),
               'js-advanced-configuration'
           )
           ->addField(
               new CWidgetFieldNumericBoxView($data['fields']['value_min']),
               'js-advanced-configuration'
           )
           ->addField(
               new CWidgetFieldNumericBoxView($data['fields']['value_max']),
               'js-advanced-configuration'
           )
           ->addItem([
               $lefty_units->getLabel()->addClass('js-advanced-configuration'),
               (new CFormField([
                   $lefty_units->getView()->addClass(ZBX_STYLE_FORM_INPUT_MARGIN),
                   $lefty_static_units->getView()
               ]))->addClass('js-advanced-configuration')
           ])
           ->addField(
               new CWidgetFieldTextBoxView($data['fields']['description']),
               'js-advanced-configuration'
           )
           ->includeJsFile('widget.edit.js.php')
           ->addJavaScript('widget_lesson_gauge_chart_form.init('.json_encode([
                   'color_palette' => CWidgetFieldGraphDataSet::DEFAULT_COLOR_PALETTE
               ], JSON_THROW_ON_ERROR).');')
           ->show();

Torneu al tauler, canvieu al mode d'edici車 i premeu la icona d'engranatge per obrir la configuraci車 del giny. La configuraci車 del giny ara cont谷 una nova casella de selecci車 Opcions avan?ades.

Marqueu la casella de selecci車 唬棗紳款勳眶喝娶硃釵勳車 avan?ada per veure camps addicionals de configuraci車 de ginys. Ompliu els camps amb valors i seleccioneu un color de giny.

Premeu Aplicar a la configuraci車 del giny. A continuaci車, premeu Desar els canvis per desar el tauler.
Obriu actions/WidgetView.php i actualitzeu el controlador.

La propietat $this->fields_values ara cont谷 els valors de tots els camps 唬棗紳款勳眶喝娶硃釵勳車 avan?ada. Finalitzeu el controlador per permetre passar la configuraci車 i el valor de l'element triat a la vista del giny.

ui/modules/lesson_gauge_chart/actions/WidgetView.php

<?php
           
       namespace Modules\LessonGaugeChart\Actions;
           
       use API, CControllerDashboardWidgetView, CControllerResponseData;
           
       class WidgetView extends CControllerDashboardWidgetView {
           
           protected function doAction(): void {
               $db_items = API::Item()->get([
                   'output' => ['itemid', 'value_type', 'name', 'units'],
                   'itemids' => $this->fields_values['itemid'],
                   'webitems' => true,
                   'filter' => [
                       'value_type' => [ITEM_VALUE_TYPE_UINT64, ITEM_VALUE_TYPE_FLOAT]
                   ]
               ]);
           
               $history_value = null;
           
               if ($db_items) {
                   $item = $db_items[0];
           
                   $history = API::History()->get([
                       'output' => API_OUTPUT_EXTEND,
                       'itemids' => $item['itemid'],
                       'history' => $item['value_type'],
                       'sortfield' => 'clock',
                       'sortorder' => ZBX_SORT_DOWN,
                       'limit' => 1
                   ]);
           
                   if ($history) {
                       $history_value = convertUnitsRaw([
                           'value' => $history[0]['value'],
                           'units' => $item['units']
                       ]);
                   }
               }
           
               $this->setResponse(new CControllerResponseData([
                   'name' => $this->getInput('name', $this->widget->getName()),
                   'history' => $history_value,
                   'fields_values' => $this->fields_values,
                   'user' => [
                       'debug_mode' => $this->getDebugMode()
                   ]
               ]));
           }
       }

Obriu i modifiqueu views/widget.view.php

Heu de crear un contenidor per al gr角fic de mesura, que dibuixareu a les passes seg邦ents, i un contenidor per a la descripci車.

Per passar valors a JavaScript com a objecte JSON, empreu el m豕tode setVar().

ui/modules/lesson_gauge_chart/views/widget.view.php

<?php
           
       /**
        * Visualitzaci車 del giny del gr角fic de mesura.
        *
        * @var CView $this
        * @var array $data
        */
           
       (new CWidgetView($data))
           ->addItem([
               (new CDiv())->addClass('chart'),
               $data['fields_values']['description']
                   ? (new CDiv($data['fields_values']['description']))->addClass('description')
                   : null
           ])
           ->setVar('history', $data['history'])
           ->setVar('fields_values', $data['fields_values'])
           ->show();

Creeu un directori actius al gr角fic_indicador de lli?ons. Aquest directori s'emprar角 per emmagatzemar Javascript, CSS i, potencialment, qualsevol altre actiu, com fonts o imatges.
Per a JavaScript de visualitzaci車 de ginys, creeu un directori js dins del directori assets.
Creeu un fitxer widget.js al directori assets/js.

Aquesta classe de widget de JavaScript ampliar角 la classe de JavaScript base de tots els ginys del tauler - CWidget.

El tauler de control es basa en una implementaci車 correcta d'un giny i comunica qualsevol informaci車 rellevant al giny mitjan?ant la crida als m豕todes JavaScript respectius. El tauler tamb谷 espera que el giny generi esdeveniments quan es produeixi alguna interacci車. Aix赤, la classe CWidget cont谷 un conjunt de m豕todes amb la implementaci車 predeterminada del comportament del giny, que es pot personalitzar ampliant la classe.

En aquest cas, cal una mica de personalitzaci車; per tant, s'implementar角 una l辰gica personalitzada per al comportament del giny seg邦ent:

-inicialitzaci車 del giny que s'encarrega de definir l'estat inicial del giny (veieu el m豕tode _init()); -mostrar el contingut del giny (谷s a dir, dibuixar el gr角fic de l'indicador) si el proc谷s d'actualitzaci車 del giny ha estat satisfactori i sense errors (veieu el m豕tode _processUpdateResponse(response) i els m豕todes _resizeChart() i _updatedChart() relacionats) -canviar la mida del giny (veieu el m豕tode resize() i el m豕tode _resizeChart() relacionat)

Per a altres aspectes del giny del gr角fic gauge, s'utilitzar角 la implementaci車 predeterminada del comportament del giny. Per obtenir m谷s informaci車 sobre els m豕todes JavaScript de la classe CWidget, consulteu: JavaScript.

Com que aquest JavaScript 谷s necessari per a la vista del widget, s'hauria de carregar amb la p角gina del tauler. Per habilitar la c角rrega de JavaScript, haureu d'actualitzar els 梯硃娶角鳥梗喧娶梗莽 assets/js i js_class de manifest.json tal com es veu a la passa seg邦ent.

ui/modules/lesson_gauge_chart/assets/js/widget.js

class WidgetLessonGaugeChart extends CWidget {
           
           static UNIT_AUTO = 0;
           static UNIT_STATIC = 1;
           
           _init() {
               super._init();
           
               this._refresh_frame = null;
               this._chart_container = null;
               this._canvas = null;
               this._chart_color = null;
               this._min = null;
               this._max = null;
               this._value = null;
               this._last_value = null;
               this._units = '';
           }
           
           _processUpdateResponse(response) {
               if (response.history === null) {
                   this._value = null;
                   this._units = '';
               }
               else {
                   this._value = Number(response.history.value);
                   this._units = response.fields_values.value_units == WidgetLessonGaugeChart.UNIT_AUTO
                       ? response.history.units
                       : response.fields_values.value_static_units;
               }
           
               this._chart_color = response.fields_values.chart_color;
               this._min = Number(response.fields_values.value_min);
               this._max = Number(response.fields_values.value_max);
           
               if (this._canvas === null) {
                   super._processUpdateResponse(response);
           
                   this._chart_container = this._content_body.querySelector('.chart');
                   this._canvas = document.createElement('canvas');
           
                   this._chart_container.appendChild(this._canvas);
           
                   this._resizeChart();
               }
               else {
                   this._updatedChart();
               }
           }
           
           resize() {
               super.resize();
           
               if (this._state === WIDGET_STATE_ACTIVE) {
                   this._resizeChart();
               }
           }
           
           _resizeChart() {
               const ctx = this._canvas.getContext('2d');
               const dpr = window.devicePixelRatio;
           
               this._canvas.style.display = 'none';
               const size = Math.min(this._chart_container.offsetWidth, this._chart_container.offsetHeight);
               this._canvas.style.display = '';
           
               this._canvas.width = size * dpr;
               this._canvas.height = size * dpr;
           
               ctx.scale(dpr, dpr);
           
               this._canvas.style.width = `${size}px`;
               this._canvas.style.height = `${size}px`;
           
               this._refresh_frame = null;
           
               this._updatedChart();
           }
           
           _updatedChart() {
               if (this._last_value === null) {
                   this._last_value = this._min;
               }
           
               const start_time = Date.now();
               const end_time = start_time + 400;
           
               const animate = () => {
                   const time = Date.now();
           
                   if (time <= end_time) {
                       const progress = (time - start_time) / (end_time - start_time);
                       const smooth_progress = 0.5 + Math.sin(Math.PI * (progress - 0.5)) / 2;
                       let value = this._value !== null ? this._value : this._min;
                       value = (this._last_value + (value - this._last_value) * smooth_progress - this._min) / (this._max - this._min);
           
                       const ctx = this._canvas.getContext('2d');
                       const size = this._canvas.width;
                       const char_weight = size / 12;
                       const char_shadow = 3;
                       const char_x = size / 2;
                       const char_y = size / 2;
                       const char_radius = (size - char_weight) / 2 - char_shadow;
           
                       const font_ratio = 32 / 100;
           
                       ctx.clearRect(0, 0, size, size);
           
                       ctx.beginPath();
                       ctx.shadowBlur = char_shadow;
                       ctx.shadowColor = '#bbb';
                       ctx.strokeStyle = '#eee';
                       ctx.lineWidth = char_weight;
                       ctx.lineCap = 'round';
                       ctx.arc(char_x, char_y, char_radius, Math.PI * 0.749, Math.PI * 2.251, false);
                       ctx.stroke();
           
                       ctx.beginPath();
                       ctx.strokeStyle = `#${this._chart_color}`;
                       ctx.lineWidth = char_weight - 2;
                       ctx.lineCap = 'round';
                       ctx.arc(char_x, char_y, char_radius, Math.PI * 0.75,
                           Math.PI * (0.75 + (1.5 * Math.min(1, Math.max(0, value)))), false
                           );
                       ctx.stroke();
           
                       ctx.shadowBlur = 2;
                       ctx.fillStyle = '#1f2c33';
                       ctx.font = `${(char_radius * font_ratio)|0}px Arial`;
                       ctx.textAlign = 'center';
                       ctx.textBaseline = 'middle';
                       ctx.fillText(`${this._value !== null ? this._value : t('No data')}${this._units}`,
                           char_x, char_y, size - char_shadow * 4 - char_weight * 2
                       );
           
                       ctx.fillStyle = '#768d99';
                       ctx.font = `${(char_radius * font_ratio * .5)|0}px Arial`;
                       ctx.textBaseline = 'top';
           
                       ctx.textAlign = 'left';
                       ctx.fillText(`${this._min}${this._min != '' ? this._units : ''}`,
                           char_weight * .75, size - char_weight * 1.25, size / 2 - char_weight
                       );
           
                       ctx.textAlign = 'right';
                       ctx.fillText(`${this._max}${this._max != '' ? this._units : ''}`,
                           size - char_weight * .75, size - char_weight * 1.25, size / 2 - char_weight
                       );
           
                       requestAnimationFrame(animate);
                   }
                   else {
                       this._last_value = this._value;
                   }
               };
           
               requestAnimationFrame(animate);
           }
       }

Obriu manifest.json i afegiu:

nom del fitxer (widget.js) a la matriu a la secci車 assets/js.
nom de classe (WidgetLessonGaugeChart) al par角metre js_class a la secci車 giny.

La classe WidgetLessonGaugeChart ara es carregar角 autom角ticament amb el tauler.

ui/modules/lesson_gauge_chart/manifest.json

{
           "manifest_version": 2.0,
           "id": "lesson_gauge_chart",
           "type": "widget",
           "name": "Gauge chart",
           "namespace": "LessonGaugeChart",
           "version": "1.0",
           "author": "韓誥傭痔 SIA",
           "actions": {
               "widget.lesson_gauge_chart.view": {
                   "class": "WidgetView"
               }
           },
           "widget": {
               "js_class": "WidgetLessonGaugeChart"
           },
           "assets": {
               "js": ["class.widget.js"]
           }
       }

Afegir estils CSS al giny.

En aquesta secci車 aprendreu a afegir estils CSS personalitzats per fer que el giny sembli m谷s atractiu.

Per als estils de giny, creeu un nou directori css dins del directori assets.
Afegiu el fitxer widget.css a assets/css. Per estilitzar els elements del giny, empreu el selector div.dashboard-widget-{widget id}. Per configurar CSS per a tot el giny, empreu el selector form.dashboard-widget-{widget id}

ui/modules/lesson_gauge_chart/assets/css/widget.css

div.dashboard-widget-lesson_gauge_chart {
           display: grid;
           grid-template-rows: 1fr;
           padding: 0; 
       }
             
       div.dashboard-widget-lesson_gauge_chart .chart {
           display: grid;
           align-items: center;
           justify-items: center; 
       }
               
       div.dashboard-widget-lesson_gauge_chart .chart canvas {
           background: white; 
       }
             
       div.dashboard-widget-lesson_gauge_chart .description {
           padding-bottom: 8px;
           font-size: 1.750em;
           line-height: 1.2;
           text-align: center; 
       }
           
       .dashboard-grid-widget-hidden-header div.dashboard-widget-lesson_gauge_chart .chart {
           margin-top: 8px; 
       }

Obriu manifest.json i afegiu el nom del fitxer (widget.css) a la matriu a la secci車 assets/css. Aix辰 permetr角 que els estils CSS definits al widget.css es carreguin amb la p角gina del tauler.

ui/modules/lesson_gauge_chart/manifest.json

{
           "manifest_version": 2.0,
           "id": "lesson_gauge_chart",
           "type": "widget",
           "name": "Gauge chart",
           "namespace": "LessonGaugeChart",
           "version": "1.0",
           "author": "韓誥傭痔 SIA",
           "actions": {
               "widget.lesson_gauge_chart.view": {
                   "class": "WidgetView"
               }
           },
           "widget": {
               "js_class": "WidgetLessonGaugeChart"
           },
           "assets": {
               "css": ["widget.css"],
               "js": ["widget.js"]
           }
       }

Actualitzeu la p角gina del tauler per veure la versi車 acabada del giny.

韓誥傭痔

Documentation

Crear un giny (tutorial)

Qu豕 fareu

Part I - "Hola, m車n!"

Afegir un giny buit a la interf赤cie 韓誥傭痔

Afegir un nou giny

Part II - 勞娶角款勳釵 de mesura

Afegiu 梯硃娶角鳥梗喧娶梗莽 a una vista de configuraci車 i empreu-los en una vista de giny

Recuperar el valor d'un element mitjan?ant l'API

Afegir JavaScript al giny.

Afegir estils CSS al giny.