mirror of
https://github.com/mempool/mempool.git
synced 2024-11-20 02:11:49 +01:00
implement clock face & dial
This commit is contained in:
Mononaut
parent
f879a34021
commit
3ddd51d4cb
@ -20,68 +20,23 @@
|
||||
height="384"
|
||||
viewBox="0 0 384 384"
|
||||
>
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.35815948,0.20465831,-0.46186107,0.80827368,136.25965,-98.671146)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.35815948,0.20465831,0.46186107,0.80827368,247.72948,-98.603866)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1-4" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.35815948,0.20465831,0.46186107,0.80827368,406.167,175.64488)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-5-1-4-6" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.35815948,0.20465831,-0.46186107,0.80827368,-22.20143,175.70014)" />
|
||||
<path id="polyline22" style="color:#000000;fill:#ffffff;fill-opacity:0.7;stroke-width:0.411929;" d="m 192,14.058594 -9.3164,0.24414 -9.28907,0.730469 -9.24023,1.21875 -9.16211,1.697266 -9.0625,2.175781 -8.93555,2.646484 -8.7832,3.109375 -8.61133,3.56836 -8.41016,4.011719 -8.1914,4.447265 -7.945316,4.869143 -7.679687,5.27734 -7.392579,5.67383 -7.087891,6.05078 -6.759764,6.414063 -6.414064,6.761718 -6.050779,7.085937 -5.67383,7.392581 -5.279295,7.679686 -4.869142,7.945309 -4.445312,8.19141 -4.013672,8.41016 -3.566407,8.61133 -3.109374,8.7832 -2.648438,8.93554 -2.173828,9.06055 -1.699219,9.16406 -1.216797,9.23828 -0.730468,9.29102 -0.244141,9.31641 0.244141,9.31445 0.730468,9.29101 1.216797,9.23829 1.699219,9.16406 2.173828,9.06055 2.648438,8.93554 3.109374,8.78516 3.566407,8.60937 4.013672,8.41211 4.445312,8.18946 4.869142,7.94531 5.279295,7.67969 5.67383,7.39453 6.050779,7.08593 6.414064,6.75977 6.759764,6.41406 7.087891,6.05274 7.392579,5.67187 7.679687,5.2793 0.18164,0.11133 1.058595,-1.69727 -0.150392,-0.0918 -7.593749,-5.21875 -7.310548,-5.60938 -7.005859,-5.98437 -6.683594,-6.34375 -6.343748,-6.6836 -5.984376,-7.00586 -5.609375,-7.31054 -5.21875,-7.59375 -4.814453,-7.85547 -4.396484,-8.09961 -3.966797,-8.31446 -3.525391,-8.51367 -3.076172,-8.68554 -2.617187,-8.83594 -2.150391,-8.95899 -1.679687,-9.06054 -1.203125,-9.13477 -0.722657,-9.18554 -0.242187,-9.21094 0.242187,-9.21094 0.722657,-9.18555 1.203125,-9.13672 1.679687,-9.06054 2.150391,-8.95899 2.617187,-8.83593 3.076172,-8.6836 3.525391,-8.51367 3.966797,-8.31641 4.396484,-8.09765 4.814453,-7.857424 5.21875,-7.593749 5.609375,-7.31055 5.984376,-7.005859 6.343748,-6.683591 6.683594,-6.343752 7.005859,-5.98242 7.310548,-5.609375 7.593749,-5.220705 L 104,39.638672 l 8.09766,-4.394531 8.3164,-3.96875 8.51368,-3.525391 8.68554,-3.076172 8.83399,-2.617187 8.96093,-2.150391 9.0586,-1.679688 9.13672,-1.201171 9.18554,-0.72461 9.21094,-0.240234 9.21094,0.240234 9.18554,0.72461 9.13672,1.201171 9.0586,1.679688 8.96093,2.150391 8.83399,2.617187 8.68555,3.076172 8.51367,3.525391 4.56055,2.175781 0.88671,-1.791016 -4.63281,-2.210937 -8.61133,-3.56836 -8.7832,-3.109375 -8.93555,-2.646484 -9.0625,-2.175781 -9.16211,-1.697266 -9.24023,-1.21875 -9.28906,-0.730469 z m 82.4082,20.269531 -0.88867,1.792969 6.48047,3.517578 7.85742,4.814453 7.59375,5.220705 7.31055,5.609375 7.00586,5.98242 6.68359,6.343752 6.34375,6.683591 5.98438,7.005859 5.60937,7.31055 5.21875,7.593749 4.81445,7.857424 4.39649,8.09765 3.96679,8.31641 3.5254,8.51367 3.07617,8.6836 2.61719,8.83593 1.39453,5.8125 1.95898,-0.41015 -1.41992,-5.91993 -2.64844,-8.93554 -3.10937,-8.7832 -3.56641,-8.61133 -4.01367,-8.41016 -4.44531,-8.19141 -4.86915,-7.945309 -5.27929,-7.679686 -5.67383,-7.392581 -6.05078,-7.085937 -6.41406,-6.761718 -6.75977,-6.414063 -7.08789,-6.05078 -7.39258,-5.67383 -7.67968,-5.27734 -7.94532,-4.869143 z m 92.20899,123.447265 -1.95899,0.41016 1.17579,6.34179 1.20312,9.13672 0.72265,9.18555 0.23829,9.10742 -0.23829,9.31446 -0.72265,9.18554 -1.20312,9.13477 -1.67969,9.06054 -2.15039,8.95899 -2.61719,8.83594 -3.07617,8.68554 -3.5254,8.51367 -3.96679,8.31446 -4.39649,8.09961 -4.81445,7.85547 -5.21875,7.59375 -5.60937,7.31054 -5.98438,7.00586 -6.34375,6.6836 -6.68359,6.34375 -7.00586,5.98437 -7.31055,5.60938 -7.59375,5.21875 -0.0898,0.0547 1.0625,1.69531 0.11719,-0.0723 7.67968,-5.2793 7.39258,-5.67187 7.08789,-6.05274 6.75977,-6.41406 6.41406,-6.75977 6.05078,-7.08593 5.67383,-7.39453 5.27929,-7.67969 4.86915,-7.94531 4.44531,-8.18946 4.01367,-8.41211 3.56641,-8.60937 3.10937,-8.78516 2.64844,-8.93554 2.17383,-9.06055 1.69922,-9.16406 1.21679,-9.23829 0.73047,-9.29101 0.24024,-9.3418 h 0.004 l -0.004,-0.0762 0.002,-0.0488 h -0.002 l -0.24024,-9.16406 -0.73047,-9.29102 -1.21679,-9.23828 z m -83.96485,185.08008 -2.65234,1.625 -4.17578,2.26758 0.92383,1.77539 4.2539,-2.31055 2.71094,-1.66211 z m -181.24218,0.039 -1.0586,1.69531 2.64649,1.62305 8.1914,4.44726 8.41016,4.01172 8.61133,3.56641 8.7832,3.10937 8.93555,2.64844 9.0625,2.17578 9.16211,1.69727 9.24023,1.2168 9.28907,0.73046 9.3164,0.24414 9.31641,-0.24414 9.28906,-0.73046 9.24023,-1.2168 9.16211,-1.69727 9.0625,-2.17578 8.93555,-2.64844 8.7832,-3.10937 8.61133,-3.56641 7.03711,-3.35547 -0.92383,-1.77734 -6.92773,3.30469 -8.51367,3.52539 -8.68555,3.07617 -8.83399,2.61719 -8.96093,2.15039 -9.0586,1.67969 -9.13672,1.20312 -9.18554,0.72266 -9.21094,0.24218 -9.21094,-0.24218 -9.18554,-0.72266 -9.13672,-1.20312 -9.0586,-1.67969 -8.96093,-2.15039 -8.83399,-2.61719 -8.68554,-3.07617 -8.51368,-3.52539 -8.3164,-3.9668 L 104,344.48045 Z" />
|
||||
<polyline points="509.173,84.150 511.419,62.783 " id="polyline27" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="549.153,90.482 553.620,69.467 " id="polyline32" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="588.253,100.959 594.892,80.526 " id="polyline37" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="626.043,115.465 634.781,95.838 " id="polyline42" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="696.058,155.888 708.686,138.507 " id="polyline52" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="727.515,181.362 741.891,165.396 " id="polyline57" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="756.138,209.985 772.104,195.609 " id="polyline62" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="781.612,241.442 798.993,228.814 " id="polyline67" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="822.035,311.457 841.662,302.719 " id="polyline77" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="836.541,349.247 856.974,342.608 " id="polyline82" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="847.018,388.347 868.033,383.880 " id="polyline87" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="853.350,428.327 874.717,426.081 " id="polyline92" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="855.469,468.750 876.953,468.750 " id="polyline97-5" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.93092534,0,0,0.41250847,-456.01771,-1.2975921)" />
|
||||
<polyline points="853.350,509.173 874.717,511.419 " id="polyline102" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="847.018,549.153 868.033,553.620 " id="polyline107" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="836.541,588.253 856.974,594.892 " id="polyline112" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="822.035,626.043 841.662,634.781 " id="polyline117" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="781.612,696.058 798.993,708.686 " id="polyline127" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="756.138,727.515 772.104,741.891 " id="polyline132" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="727.515,756.138 741.891,772.104 " id="polyline137" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="696.058,781.612 708.686,798.993 " id="polyline142" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="626.043,822.035 634.781,841.662 " id="polyline152" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="588.253,836.541 594.892,856.974 " id="polyline157" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="549.153,847.018 553.620,868.033 " id="polyline162" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="509.173,853.350 511.419,874.717 " id="polyline167" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="468.750,855.469 468.750,876.953 " id="polyline172-3" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3985193,-455.90164)" />
|
||||
<polyline points="428.327,853.350 426.081,874.717 " id="polyline177" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="388.347,847.018 383.880,868.033 " id="polyline182" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="349.247,836.541 342.608,856.974 " id="polyline187" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="311.457,822.035 302.719,841.662 " id="polyline192" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="241.442,781.612 228.814,798.993 " id="polyline202" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="209.985,756.138 195.609,772.104 " id="polyline207" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="181.362,727.515 165.396,741.891 " id="polyline212" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="155.888,696.058 138.507,708.686 " id="polyline217" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="115.465,626.043 95.838,634.781 " id="polyline227" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="100.959,588.253 80.526,594.892 " id="polyline232" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="90.482,549.153 69.467,553.620 " id="polyline237" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="84.150,509.173 62.783,511.419 " id="polyline242" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="82.031,468.750 60.547,468.750 " id="polyline247" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.93092534,0,0,0.41250847,-32.751357,-1.3034227)" />
|
||||
<polyline points="84.150,428.327 62.783,426.081 " id="polyline252" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="90.482,388.347 69.467,383.880 " id="polyline257" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="100.959,349.247 80.526,342.608 " id="polyline262" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="115.465,311.457 95.838,302.719 " id="polyline267" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="155.888,241.442 138.507,228.814 " id="polyline277" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="181.362,209.985 165.396,195.609 " id="polyline282" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="209.985,181.362 195.609,165.396 " id="polyline287" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="241.442,155.888 228.814,138.507 " id="polyline292" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="311.457,115.465 302.719,95.838 " id="polyline302" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="349.247,100.959 342.608,80.526 " id="polyline307" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="388.347,90.482 383.880,69.467 " id="polyline312" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="428.327,84.150 426.081,62.783 " id="polyline317" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:0.7" transform="matrix(0.41250847,0,0,0.41250847,-1.3627708,-1.3034227)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.20473747,0.35811424,-0.80817157,0.46203972,290.78491,-87.940191)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.20473747,-0.35811424,-0.80817157,-0.46203972,290.78094,472.0941)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1-3" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.20473747,-0.35811424,0.80817157,-0.46203972,93.209761,472.08427)" />
|
||||
<polyline points="468.750,82.031 468.750,60.547 " id="polyline322-1-1-3-0" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(-0.20473747,0.35811424,0.80817157,0.46203972,93.213741,-87.973607)" />
|
||||
<path id="path1485" style="color:#000000;fill:#8F5FF6;" d="m 191.70703,6.0546875 0.0293,18.0000005 c 25.92793,-0.04081 50.70715,5.83951 72.89844,16.486328 l 7.97265,-16.097657 C 247.9762,12.573302 220.46847,6.0094202 191.70703,6.0546875 Z m 86.26172,21.0800785 -7.9707,16.099609 c 42.19467,22.134002 74.21637,61.841645 85.57812,110.720705 l 17.62305,-3.68555 C 360.68281,95.905845 324.97659,51.686549 277.96875,27.134766 Z m 96.48437,129.001954 -17.61914,3.68555 c 13.35969,68.32077 -16.83107,137.08767 -74.56445,173.8164 l 1.21485,-0.76172 9.54101,15.24024 c 63.20757,-40.86873 96.22493,-116.78347 81.42773,-191.98047 z M 58.640625,294.08398 44.347656,305.02539 c 13.279174,17.3476 29.141083,31.79971 46.701172,43.13867 l 9.513672,-15.24609 0.45898,0.28711 C 85.090962,322.93877 70.69637,309.83333 58.640625,294.08398 Z m 221.566405,40.84375 c -5.51648,3.39833 -11.27615,6.50878 -17.26758,9.30079 -51.98184,24.22348 -111.05797,19.80883 -157.85351,-8.48633 l 0.5664,0.35351 -9.509762,15.24024 c 51.766092,31.10054 117.058832,35.92722 174.398442,9.20703 1.53058,-0.71326 3.04761,-1.44484 4.55078,-2.19531 l -8.28711,-15.94336 5.32422,-2.76758 8.28515,15.9414 c 2.54788,-1.37601 5.05637,-2.80312 7.51953,-4.28515 l -9.53515,-15.23242 z" />
|
||||
<polyline points="468.750,82.031 468.750,41.8 " id="polyline322" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3627708,-32.692008)" />
|
||||
<path id="gnomon" style="opacity:1;fill:#80C2E1;fill-opacity:1;stroke:none;stroke-width:3.73798;stroke-opacity:1" d="M 46.463002,316.72751 33.743954,300.31177 65.383738,288.93232 Z" />
|
||||
<defs>
|
||||
<pattern id="dial-gradient" patternUnits="userSpaceOnUse" width="384" height="384">
|
||||
<image class="dial-gradient-img" href="/resources/clock/gradient.png" x="0" y="0" width="384" height="384" [style.transform]="'rotate(' + (minutes * 6) + 'deg)'" />
|
||||
</pattern>
|
||||
</defs>
|
||||
|
||||
<path *ngFor="let angle of minorTicks" class="tick minor" d="M 192,27 v 10" [style.transform]="'rotate(' + angle + 'deg)'"/>
|
||||
<path *ngFor="let angle of majorTicks" class="tick major" d="M 192,27 v 18" [style.transform]="'rotate(' + angle + 'deg)'"/>
|
||||
|
||||
<ng-container *ngFor="let segment of segments; trackBy: trackBySegment">
|
||||
<path class="block-segment" [attr.d]="segment.path" />
|
||||
<!-- <circle class="segment-mark start" [attr.cx]="segment.start.x" [attr.cy]="segment.start.y" r="2" style="fill:green;stroke:white;stroke-width:1px;" />
|
||||
<circle class="segment-mark end" [attr.cx]="segment.end.x" [attr.cy]="segment.end.y" r="2" style="fill:red;stroke:white;stroke-width:1px;" /> -->
|
||||
</ng-container>
|
||||
<!-- <polyline points="468.750,82.031 468.750,35 " id="polyline322" style="fill:none;stroke:#ffffff;stroke-width:4.84839;stroke-dasharray:none;stroke-opacity:1" transform="matrix(0.41250847,0,0,0.93092534,-1.3627708,-32.692008)" /> -->
|
||||
<path class="tick very major" d="M 192,0 v 45" />
|
||||
<path id="hour" class="gnomon hour" d="M 178,3 206,3 192,40 Z" [style.transform]="'rotate(' + (hours * 30) + 'deg)'" />
|
||||
<path id="minute" class="gnomon minute" d="M 180,4 204,4 192,38 Z" [style.transform]="'rotate(' + (minutes * 6) + 'deg)'" />
|
||||
</svg>
|
||||
</div>
|
||||
@ -17,4 +17,52 @@
|
||||
fill: #11131f;
|
||||
}
|
||||
}
|
||||
|
||||
.gnomon {
|
||||
transform-origin: center;
|
||||
stroke-linejoin: round;
|
||||
|
||||
&.minute {
|
||||
fill:#80C2E1;
|
||||
stroke:#80C2E1;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
&.hour {
|
||||
fill: #105fb0;
|
||||
stroke: #105fb0;
|
||||
stroke-width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.tick {
|
||||
transform-origin: center;
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 2px;
|
||||
|
||||
&.minor {
|
||||
stroke-opacity: 0.5;
|
||||
}
|
||||
|
||||
&.very.major {
|
||||
stroke-width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.block-segment {
|
||||
fill: none;
|
||||
stroke: url(#dial-gradient);
|
||||
stroke-width: 18px;
|
||||
}
|
||||
|
||||
.dial-segment {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 2px;
|
||||
}
|
||||
|
||||
.dial-gradient-img {
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,55 @@
|
||||
import { Component, Input, OnChanges } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
|
||||
import { Subscription, tap, timer } from 'rxjs';
|
||||
import { WebsocketService } from '../../services/websocket.service';
|
||||
import { StateService } from '../../services/state.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-clock-face',
|
||||
templateUrl: './clock-face.component.html',
|
||||
styleUrls: ['./clock-face.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
})
|
||||
export class ClockFaceComponent implements OnChanges {
|
||||
export class ClockFaceComponent implements OnInit, OnChanges, OnDestroy {
|
||||
@Input() size: number = 300;
|
||||
faceStyle;
|
||||
|
||||
constructor() {}
|
||||
blocksSubscription: Subscription;
|
||||
timeSubscription: Subscription;
|
||||
|
||||
faceStyle;
|
||||
dialPath;
|
||||
blockTimes = [];
|
||||
segments = [];
|
||||
hours: number = 0;
|
||||
minutes: number = 0;
|
||||
minorTicks: number[] = [];
|
||||
majorTicks: number[] = [];
|
||||
|
||||
constructor(
|
||||
public stateService: StateService,
|
||||
private websocketService: WebsocketService,
|
||||
private cd: ChangeDetectorRef
|
||||
) {
|
||||
this.updateTime();
|
||||
this.makeTicks();
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.timeSubscription = timer(0, 250).pipe(
|
||||
tap(() => {
|
||||
this.updateTime();
|
||||
})
|
||||
).subscribe();
|
||||
this.websocketService.want(['blocks']);
|
||||
this.blocksSubscription = this.stateService.blocks$
|
||||
.subscribe(([block]) => {
|
||||
if (block) {
|
||||
this.blockTimes.push([block.height, new Date(block.timestamp * 1000)]);
|
||||
// using block-reported times, so ensure they are sorted chronologically
|
||||
this.blockTimes = this.blockTimes.sort((a, b) => a[1].getTime() - b[1].getTime());
|
||||
this.updateSegments();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
ngOnChanges(): void {
|
||||
this.faceStyle = {
|
||||
@ -17,4 +57,93 @@ export class ClockFaceComponent implements OnChanges {
|
||||
height: `${this.size}px`,
|
||||
};
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.timeSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
updateTime(): void {
|
||||
const now = new Date();
|
||||
const seconds = now.getSeconds() + (now.getMilliseconds() / 1000);
|
||||
this.minutes = (now.getMinutes() + (seconds / 60)) % 60;
|
||||
this.hours = now.getHours() + (this.minutes / 60);
|
||||
this.updateSegments();
|
||||
}
|
||||
|
||||
updateSegments(): void {
|
||||
const now = new Date();
|
||||
this.blockTimes = this.blockTimes.filter(time => (now.getTime() - time[1].getTime()) <= 3600000);
|
||||
const tail = new Date(now.getTime() - 3600000);
|
||||
const hourStart = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours());
|
||||
|
||||
const times = [
|
||||
['start', tail],
|
||||
...this.blockTimes,
|
||||
['end', now],
|
||||
];
|
||||
const minuteTimes = times.map(time => {
|
||||
return [time[0], (time[1].getTime() - hourStart.getTime()) / 60000];
|
||||
});
|
||||
this.segments = [];
|
||||
const r = 174;
|
||||
const cx = 192;
|
||||
const cy = cx;
|
||||
for (let i = 1; i < minuteTimes.length; i++) {
|
||||
const arc = this.getArc(minuteTimes[i-1][1], minuteTimes[i][1], r, cx, cy);
|
||||
if (arc) {
|
||||
arc.id = minuteTimes[i][0];
|
||||
this.segments.push(arc);
|
||||
}
|
||||
}
|
||||
const arc = this.getArc(minuteTimes[0][1], minuteTimes[1][1], r, cx, cy);
|
||||
if (arc) {
|
||||
this.dialPath = arc.path;
|
||||
}
|
||||
|
||||
this.cd.markForCheck();
|
||||
}
|
||||
|
||||
getArc(startTime, endTime, r, cx, cy): any {
|
||||
const startDegrees = (startTime + 0.2) * 6;
|
||||
const endDegrees = (endTime - 0.2) * 6;
|
||||
const start = this.getPointOnCircle(startDegrees, r, cx, cy);
|
||||
const end = this.getPointOnCircle(endDegrees, r, cx, cy);
|
||||
const arcLength = endDegrees - startDegrees;
|
||||
// merge gaps and omit lines shorter than 1 degree
|
||||
if (arcLength >= 1) {
|
||||
const path = `M ${start.x} ${start.y} A ${r} ${r} 0 ${arcLength > 180 ? 1 : 0} 1 ${end.x} ${end.y}`;
|
||||
return {
|
||||
path,
|
||||
start,
|
||||
end
|
||||
};
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
getPointOnCircle(deg, r, cx, cy) {
|
||||
const modDeg = ((deg % 360) + 360) % 360;
|
||||
const rad = (modDeg * Math.PI) / 180;
|
||||
return {
|
||||
x: cx + (r * Math.sin(rad)),
|
||||
y: cy - (r * Math.cos(rad)),
|
||||
};
|
||||
}
|
||||
|
||||
makeTicks() {
|
||||
this.minorTicks = [];
|
||||
this.majorTicks = [];
|
||||
for (let i = 1; i < 60; i++) {
|
||||
if (i % 5 === 0) {
|
||||
this.majorTicks.push(i * 6);
|
||||
} else {
|
||||
this.minorTicks.push(i * 6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
trackBySegment(index: number, segment) {
|
||||
return segment.id;
|
||||
}
|
||||
}
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: radial-gradient(transparent 0%, transparent 48%, #11131f 62%, #11131f 100%);
|
||||
background: radial-gradient(transparent 0%, transparent 44%, #11131f 58%, #11131f 100%);
|
||||
}
|
||||
|
||||
.block-cube {
|
||||
|
||||
@ -66,7 +66,7 @@ export class ClockComponent implements OnInit {
|
||||
resizeCanvas(): void {
|
||||
this.chainWidth = window.innerWidth;
|
||||
this.chainHeight = Math.max(60, window.innerHeight / 8);
|
||||
this.clockSize = Math.min(500, window.innerWidth, window.innerHeight - (1.4 * this.chainHeight));
|
||||
this.clockSize = Math.min(800, window.innerWidth, window.innerHeight - (1.4 * this.chainHeight));
|
||||
const size = Math.ceil(this.clockSize / 75) * 75;
|
||||
const margin = (this.clockSize - size) / 2;
|
||||
this.blockSizerStyle = {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.divider {
|
||||
position: absolute;
|
||||
left: -1px;
|
||||
left: -0.5px;
|
||||
top: 0;
|
||||
.divider-line {
|
||||
stroke: white;
|
||||
|
||||
@ -39,8 +39,8 @@ export class ClockchainComponent implements OnInit, OnChanges, OnDestroy {
|
||||
});
|
||||
this.connectionStateSubscription = this.stateService.connectionState$.subscribe(state => {
|
||||
this.connected = (state === 2);
|
||||
})
|
||||
firstValueFrom(this.stateService.chainTip$).then(tip => {
|
||||
});
|
||||
firstValueFrom(this.stateService.chainTip$).then(() => {
|
||||
this.loadingTip = false;
|
||||
});
|
||||
}
|
||||
|
||||
BIN
frontend/src/resources/clock/gradient.png
Normal file
BIN
frontend/src/resources/clock/gradient.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
Loading…
Reference in New Issue
Block a user