-

svg creation html file 


<svg width="60" height="200">
<defs>
<linearGradient id="gradient_3" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
<stop offset="0%" stop-color="#2868F1" stop-opacity="1"></stop>
<stop offset="50%" stop-color="white" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#D1D3D7" stop-opacity="1"></stop>
</linearGradient>
</defs>
<g><rect x="0" y="0" width="60" height="100%" fill="url(#gradient_3)"></rect></g>
<g><line x1="0" y1="0" x2="60" y2="0" stroke-width="3" stroke="black"></line></g>
<g><circle radius="10" y="0"/>

</g></svg>

<div class="meter">
<h4 class="meter-title">Humidity</h4><div>
<!-- react-text: 95 -->63.69<!-- /react-text -->
<!-- react-text: 96 --> <!-- /react-text -->
<!-- react-text: 97 -->%<!-- /react-text --></div>
<div class="meter-container">
<svg width="60" height="200">
<defs>
<linearGradient id="gradient_1" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
<stop offset="0%" stop-color="#c00" stop-opacity="1"></stop>
<stop offset="50%" stop-color="yellow" stop-opacity="1"></stop>
<stop offset="100%" stop-color="#0c0" stop-opacity="1"></stop></linearGradient>
</defs>
<g><rect x="0" y="0" width="60" height="100%" fill="url(#gradient_1)"></rect>
</g>
<g><line x1="63.69" y1="200-63.69" x2="0" y2="200-63.69" stroke-width="3" stroke="white"></line></g>
<g><circle cx="30" cy="200-63.62" r="10" fill="white"></circle></g>
</svg></div></div>




Canvas Examples

https://canvas-gauges.com/documentation/examples/

Comments

Post a Comment

Popular posts from this blog

-
Node Js Non-Blocking IO Overview of Blocking vs Non-Blocking This overview covers the difference between  blocking  and  non-blocking  calls in Node.js. This overview will refer to the event loop and libuv but no prior knowledge of those topics is required. Readers are assumed to have a basic understanding of the JavaScript language and Node.js  callback pattern . "I/O" refers primarily to interaction with the system's disk and network supported by  libuv . Blocking Blocking  is when the execution of additional JavaScript in the Node.js process must wait until a non-JavaScript operation completes. This happens because the event loop is unable to continue running JavaScript while a  blocking  operation is occurring. In Node.js, JavaScript that exhibits poor performance due to being CPU intensive rather than waiting on a non-JavaScript operation, such as I/O, isn't typically referred to as  blocking . Synchronous methods in t...
Read more
-
Python for Everyone Course  Link :  http://www.py4inf.com/ Book with all materials and lessons :  https://www.py4e.com/ PPTS :
Read more
-
Geoserver Print Module Geoserver print process involves two steps. First at the  server side , you have to configure your yaml file, called config.yaml. Go through the detailed documentation at  MapFish print module documentation page . Once this done, the second step is for  client side . Considering you are using openlayers for your front-end, in order to get the list of visible layers, you will need a simple loop with visibility check, e.g. var layers = "" ; for ( var i = 0 ; i < map . layers . length ; i ++) { if ( map . layers [ i ]. visibility == true ){ //get a string of visible layers layers = layers + map . layers [ i ]. name + ',' } } //remove the trailing ',' layers = layers . slice ( 0 , - 1 ); var maptitle = "This is the map title" ; var mapcomment = "This is the map comment" var printurl = "http://host:post/geoserver/pdf/print.pdf?spec={" units ...
Read more