Backend API
<div id="gauge-demo">
<div id="gauge-container">
<div class="left-section">
<dx-circular-gauge [value]="speedValue / 2">
<dxo-circular-gauge-size
[width]="90"
[height]="90"
></dxo-circular-gauge-size>
<dxo-circular-gauge-value-indicator [color]="color">
</dxo-circular-gauge-value-indicator>
<dxo-circular-gauge-geometry [startAngle]="180" [endAngle]="90">
</dxo-circular-gauge-geometry>
<dxo-circular-gauge-scale
[startValue]="0"
[endValue]="100"
[tickInterval]="50"
>
</dxo-circular-gauge-scale>
</dx-circular-gauge>
<dx-circular-gauge [value]="speedValue / 2">
<dxo-circular-gauge-size
[width]="90"
[height]="90"
></dxo-circular-gauge-size>
<dxo-circular-gauge-value-indicator
[color]="color"
></dxo-circular-gauge-value-indicator>
<dxo-circular-gauge-geometry [startAngle]="-90" [endAngle]="-180">
</dxo-circular-gauge-geometry>
<dxo-circular-gauge-scale
[startValue]="100"
[endValue]="0"
[tickInterval]="50"
>
</dxo-circular-gauge-scale>
</dx-circular-gauge>
</div>
<div class="center-section">
<dx-circular-gauge
id="speed-gauge"
[value]="speedValue"
centerTemplate="centerTemplate"
>
<dxo-circular-gauge-size [width]="260"></dxo-circular-gauge-size>
<dxo-circular-gauge-value-indicator
[indentFromCenter]="55"
[color]="color"
[spindleSize]="0"
[spindleGapSize]="0"
>
</dxo-circular-gauge-value-indicator>
<dxo-circular-gauge-geometry [startAngle]="225" [endAngle]="315">
</dxo-circular-gauge-geometry>
<dxo-circular-gauge-scale
[startValue]="20"
[endValue]="200"
[tickInterval]="20"
[minorTickInterval]="10"
>
</dxo-circular-gauge-scale>
<svg *dxTemplate="let gauge of 'centerTemplate'">
<circle
cx="100"
cy="100"
r="55"
[attr.stroke]="color"
stroke-width="2"
fill="transparent"
></circle>
<text
text-anchor="middle"
y="100"
x="100"
font-size="50"
font-weight="lighter"
alignment-baseline="middle"
[attr.fill]="color"
>
{{ gauge.value() }}
</text>
</svg>
</dx-circular-gauge>
<dx-linear-gauge id="fuel-gauge" [value]="50 - speedValue * 0.24">
<dxo-linear-gauge-size
[width]="90"
[height]="20"
></dxo-linear-gauge-size>
<dxo-linear-gauge-scale
[startValue]="0"
[endValue]="50"
[tickInterval]="25"
[minorTickInterval]="12.5"
>
<dxo-linear-gauge-minor-tick
[visible]="true"
></dxo-linear-gauge-minor-tick>
<dxo-linear-gauge-label [visible]="false"></dxo-linear-gauge-label>
</dxo-linear-gauge-scale>
<dxo-linear-gauge-value-indicator
[color]="color"
[size]="8"
[offset]="7"
>
</dxo-linear-gauge-value-indicator>
</dx-linear-gauge>
</div>
<div class="right-section">
<dx-circular-gauge [value]="speedValue / 2">
<dxo-circular-gauge-size
[width]="90"
[height]="90"
></dxo-circular-gauge-size>
<dxo-circular-gauge-value-indicator [color]="color">
</dxo-circular-gauge-value-indicator>
<dxo-circular-gauge-geometry [startAngle]="90" [endAngle]="0">
</dxo-circular-gauge-geometry>
<dxo-circular-gauge-scale
[startValue]="100"
[endValue]="0"
[tickInterval]="50"
>
</dxo-circular-gauge-scale>
</dx-circular-gauge>
<dx-circular-gauge [value]="speedValue / 2">
<dxo-circular-gauge-size
[width]="90"
[height]="90"
></dxo-circular-gauge-size>
<dxo-circular-gauge-value-indicator
[color]="color"
></dxo-circular-gauge-value-indicator>
<dxo-circular-gauge-geometry [startAngle]="0" [endAngle]="-90">
</dxo-circular-gauge-geometry>
<dxo-circular-gauge-scale
[startValue]="0"
[endValue]="100"
[tickInterval]="50"
>
</dxo-circular-gauge-scale>
</dx-circular-gauge>
</div>
</div>
<dx-slider
id="slider"
[min]="0"
[max]="200"
[width]="155"
[(value)]="speedValue"
>
</dx-slider>
</div>
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, enableProdMode, provideZoneChangeDetection } from '@angular/core';
import { DxCircularGaugeModule, DxLinearGaugeModule, DxSliderModule } from 'devextreme-angular';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
preserveWhitespaces: true,
imports: [
DxCircularGaugeModule,
DxLinearGaugeModule,
DxSliderModule,
],
})
export class AppComponent {
speedValue = 40;
color = '#f05b41';
}
bootstrapApplication(AppComponent, {
providers: [
provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }),
],
});
::ng-deep #gauge-demo {
height: 500px;
}
::ng-deep #gauge-container {
text-align: center;
margin: 20px auto;
background-image: url('../../../../images/Gauges/mask.png');
background-repeat: no-repeat;
width: 786px;
height: 500px;
}
::ng-deep #gauge-container > div {
display: inline-block;
position: relative;
}
::ng-deep .left-section {
top: -20px;
left: -40px;
}
::ng-deep .center-section {
top: 25px;
}
::ng-deep .right-section {
top: -20px;
right: -40px;
}
::ng-deep #fuel-gauge {
position: absolute;
left: 34%;
bottom: 5%;
}
::ng-deep #slider {
position: relative;
top: -105px;
margin: 0 auto;
}
::ng-deep #slider .dx-slider-bar {
background-color: #fff;
}
::ng-deep #slider .dx-slider-handle {
background-color: #f05b41;
width: 16px;
height: 16px;
margin-top: -8px;
margin-right: -8px;
border-radius: 50%;
border: none;
}
::ng-deep #slider .dx-slider-handle .dx-inkripple-wave {
background: none;
}
::ng-deep #slider .dx-slider-handle::after {
background-color: #f05b41;
}
::ng-deep #slider .dx-slider-range.dx-slider-range-visible {
border-color: #f05b41;
background-color: #f05b41;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script>
<script src="./bundle.js" type="module"></script>
</body>
</html>
�PNG
IHDR � �F} pHYs ��
OiCCPPhotoshop ICC profile xڝSgTS�=���BK���KoR RB���&*! J�!��Q�EEȠ�����Q,�
��!���������{�kּ������>�����H3Q5��B������.@�
$p �d!s�# �~<<+"�� x� �M��0���B�\���t�8K� @z�B� @F���&S � `�cb� P- `'�� ����{ [�!�� e�D h; ��V�E X0 fK�9 �- 0IWfH �� ��� 0Q��) { `�##x �� F�W<�+��* x��<�$9E�[-qWW.(�I+6aa�@.�y�2�4��� �����x����6��_-��"bb���ϫp@ �t~��,/��;�m��%�h^�u��f�@� ���W�p�~<<E���������J�B[a�W}�g�_�W�l�~<�����$�2]�G�����L�ϒ �b��G�����"�Ib�X*�Qq�D���2�"�B�)�%��d��,�>�5 �j>{�-�]c�K'Xt��� �o��(�h���w��?�G�% �fI�q ^D$.Tʳ?� D��*�A��,�����`6�B$��BB
d�r`)��B(�Ͱ*`/�@4�Qh��p.�U�=p�a��(�� A�a!ڈb�X#����!�H�$ ɈQ"K�5H1R�T UH�=r9�\F��;� 2����G1���Q=��C��7�F��dt1�����r�=�6��Ыhڏ>C�0��3�l0.��B�8, �c˱"����V����cϱw�E� 6wB aAHXLXN�H� $4� 7 �Q�'"��K�&���b21�XH,#��/{�C�7$�C2'��I��T��F�nR#�,��4H#���dk�9�, +ȅ����3��!�[
�b@q��S�(R�jJ��4�e�2AU��Rݨ�T5�ZB���R�Q��4u�9̓IK�����hh�i��t�ݕN��W���G���w
��Ljg(�gw��L�Ӌ�T071���oUX*�*|��
�J�&�*/T����ުU�U�T��^S}�FU3S� Ԗ�U��P�SSg�;���g�oT?�~Y��Y�L�OC�Q��_�� c�x,!k
��u�5�&���|v*�����=���9C3J3W�R�f?�q��tN �(���~���)�)�4L�1e\k����X�H�Q�G�6�����E�Y��A�J'\'Gg����S�Sݧ
�M=:��.�k���Dw�n��^��Lo��y���}/�T�m���GX�$��<�5qo</���QC]�@C�a�a�ᄑ��<��F�F�i�\�$�m�mƣ&&!&KM�M�RM��)�;L;L���͢�֙5�=1�2��כ߷`ZxZ,����eI��Z�Yn�Z9Y�XUZ]�F���%ֻ�����N�N���gð�ɶ�����ۮ�m�}agbg�Ů��}�}��=
���Z~s�r:V:ޚΜ�?}���/gX���3��)�i�S��Ggg�s�K��.�>.���Ƚ�Jt�q]�z��������ۯ�6�i�ܟ�4�)�Y3s���C�Q��?��0k߬~OCO�g��#/c/�W�װ��w��a�>�>r��>�<7�2�Y_�7��ȷ�O�o�_��C#�d�z�� ��%g��A�[��z|!��?:�e����A���AA�������!h�쐭!��Α�i�P~���a�a��~'���W�?�p�X�1�5w��Cs�D�D�Dޛg1O9�-J5*>�.j<�7�4�?�.fY��X�XIlK9.*�6nl��������{�/�]py�����.,:�@L�N8��A*��%�w%�
y��g"/�6ш�C\*N�H*Mz�쑼5y$�3�,幄'���L
Lݛ:��v m2=:�1����qB�!M��g�g�fvˬe����n��/��k���Y-
�B��TZ(�*�geWf�͉�9���+��̳�ې7�����ᒶ��KW-X潬j9�<qy�
�+�V�<���*m�O��W��~�&zMk�^�ʂ��k�U
�}����]OX/Yߵa���>������(�x��oʿ�ܔ���Ĺd�f�f���-�[����n
�ڴ
�V����E�/��(ۻ��C���<��e����;?T�T�T�T6��ݵa��n��{��4���[���>ɾ�UUM�f�e�I���?�������m]�Nmq����#����=TR��+�G�����w-
6
U����#pDy��� ��
:�v�{���vg/jB��F�S��[b[�O�>����z�G��4<YyJ�T�i��ӓg�ό���}~.��`ۢ�{�c��jo�t��E���;�;�\�t���W�W��:_m�t�<���Oǻ�����\k��z��{f���7���y���՞9=ݽ�zo������~r'��˻�w'O�_�@�A�C݇�?[�����j�w����G��������C���ˆ
��8>99�?r����C�d�&����ˮ/~�����јѡ�m|������������x31^�V���w�w��O�| (�h���SЧ��������c3-� cHRM z% �� �� �� u0 �` :� o�_�F }IDATx���w�$�u��{Wu:���9b0�0�0� � !� -}��{�lɖxmɶ�+]�ʲ%��-��#��l�W��H��@
$H�� �&���ӹ+�]����O� ��lL�:��U���Wk�k�-[� �H$�D"�H$R� H$�D"�H$R�Ri�H$҇[B,-1���G"�H$�D���D"�$H$�@�$�D A"�H��}Mv��?�D"H�H$iՠAx�{}�G� lE���D"H�H$AÊ���빖/����Ċ���D"H�H$�C&` z��V��v�_�u<���K��v'� �H$ �D������S�t�Ȃ� ��XR��X�oE��%��D"� �H�D,@^.0,5!2>�+�f���3~g ��ь��F K�
�D"� �H�
����������n� �b�%e����=uz.��V�H$��D"]G��
�CC���"�=��6������ĘH�8d��XT�H$��D"�2<��8�?]xy�!ې �l���+�)��:�#���L�����2$�D A"�H� "T��p�'S!R�/�ݡcuA"�d�!��C8`O���e��}��]���� � �H$ �DZAx�
B���ѱN�WKX�X������R��N�q�躇
�ݽ�eX��) �d��ƺ�E`��E6��,�D"H�H$��U��~����DpF\�n +�]g�w�w�^p�Hp-����`��mږl���$�[��e��00uvt���*H$�@�D"�V ���Cv �[iT�À�J�������� ���2I �%�o?�q"�ɋ�����s"��>'��]���q��EP�$3�`-��*��D"�$H$D�R @ ${Db�!
�u`��
�] p!@� ��O^$(��� B>w"V
$��($���&ǁ��������c��N���u2���d+���E�cx�P�H$��D"xH��ҠC�� �� A!���( �n� ��H���0ĕ:��C,�@ ۶�8�>;���\$y3:��,�J�V$AE<�!�U��'*{"�H$���� �xH�:�����x6��Ż���n�/ �Z����a||������188���!axx���X,�X,"��A�_�j�Z�mB4
0�`� c�F�F�z�f�V�V��T�X\\D�R�2�6�~�f%ض[�䂅{[
�/���?K�p����*Dl�R��D"}�Ķl�&h3�H�@�ώGa�<t�A7��T�C8W�(�u�m�nBf8�شi6n܀M�6cӦ�X�v-֭[���� =��w4�N2O�# �_�G��)����"���P.�155���ILO�`jj
�W�}��� �E �w���������"��
CC�xt�v���� � �H$�tCD��4 �"1�gTU����J�P<�P"� ϐ��c��صk'v�܉ݻwc���P%�4(lj�ߎ���0�����8�����/ɲm/^�ٳgq��y\�p�ϟC�V�D�?a�,lXV,,�J������� ��R�fSP�H$ �D������=��i��:�i�i` �P"$8�@�"����ؿ� ��ۇݻwa]I�g�Ár�_�4a�&ÀeY�mۿ϶�@[����H�7���O��(��r��r,�����}I�����ȸ�Z��s�����s8u��{�],,,�A{�K!��䂅��ض�j�����/�Vt��^��I�P�H$ �D���[��I�<��,)�2렪�X����t�غu+n��8���v֬Y+�q����u�뺎v�
�0��:4M���h�Z0�Z
�f�v�v�\i�>`�A"~?)�����[�B.�C�P@�XD�TB�T��� FFF���100�?^(���Q*�P(�m�IJ8h�����q�� ���{x�wp��e�p|`�m��.8١l��m[�%P�,�{�'C<KA@A"�$H$���C����C�x�<g��l�</˖TU�=�9w�����z@�X�x ���q��V�]��hH3s�T*���h�u��ò,���ÇeE�f���(�B�����q/���@.�6��rPU�B�B!���������
����#0!�B>��(�u���z�m���+�p��Kτ �m]��a�V$��Tș�P��ԵI"�D"� �H�,@�e:K���o�� TU�o�̄�:�;����Gp�����qp�4
�f�f�z�F���������Q���l6�LD�DI�-ٶ�oY�RW+P��$�H��_�9ɒ(��p;J
c||X�f
���144���a�]���bX�A�^��嗿���_�믿�V��Vض�C�eE�Bz,dG(��5^��-KA@A"�$H$���,CX�H���%<���W}�صk��.�u�]طo�~v@���:��:��*��*fgg133�r��j��g �J��9
юI� T�D<��Aķu�,�4�p�2����;8����~,�����(
~�bttkņ
�~�z���btt���(
>�ȋ|�N�:�W^y���+8w��p"��{H���q�R�!-{A@A"�$H$麀��D��nW �̳�(H������܋�.MԜ+ n�ix�~<��X�f����Af��:*�
���155���i����ن��AC<������`��^�i/p��v�l�v���B����V���R2��^Ȭ�ڵk�i�&lڴ k֬��������E*E���<���o���~�
���e��E�-��3�KW����[9�R��`�D"H�H$Ҳ ��ǡ_��}�AUs><�3܀��;��#��?����HW$yV�4M�Z-�j5,..bzz.\���?�M�4�� M�`�v�A�aO�<C���ߤ�B8���k�s�;^7)����q���
w_�vB�C�r���"FG݁{�7oƎ;�q�F���cdd~�S��(
*�
���o���&Ο?9��?$,�쀊�,E�|�0G"�H$� b� ":|.|�1���. ��ڶ�����8� |�#c���~�!\r$}r�ڥK�0==�,�M��g���]��`= �g���Is"�fGd
d�2r}��?��I�_�p{�xVFQ���[�@mܸ۶m��IE��T>���(����_���������<,�PH�0;ʞ��"