Skip to content

Commit

Permalink
rewrite svg
Browse files Browse the repository at this point in the history
  • Loading branch information
@btomala
btomala committed Apr 22, 2024
1 parent 3700803 commit c87655e
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 74 deletions.
48 changes: 15 additions & 33 deletions index.css
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,11 @@
:root {
--size: 400px;
--size: 600px;
}
h2 {
h1 {
text-align: center;
}
.mask_white_stripes {
x: calc(50% - 2px);
y: 0;
height: 100%;
width: 4px;
fill: black;
}

.mask_drection {
x: 50%;
y: 50%;
height: 50%;
width: 50%;
fill: black;
#updated{
cursor: pointer;
}

.text {
Expand All @@ -26,38 +14,32 @@ h2 {
text-align: middle;
font-weight: bold;
}
#updated{
cursor: pointer;
}
.outer {
cx:50%;
cy:50%;
r:150;
fill:white;
r:150px;
fill:#eee;
stroke-width: 12px;
stroke:black;
}
.inner {
cx:50%;
cy:50%;
r:140;
fill:white;
r:140px;
fill:transparent;
stroke-width: 15px;
}
.dot {
cx:50%;
cy:50%;
r:10;
r:10px;
fill: black;
}
#arrow {
fill: green;
stroke:black;
stroke-width:2px;
}

.boxes {
max-width: var(--size);
background-color: black;
color: white;
font-size: 15px;
Expand Down Expand Up @@ -87,15 +69,15 @@ h2 {
width: 100%;
}
.windrose {
display: inline-block;
width: var(--size);
height: var(--size);
vertical-align: top;
@media screen and (min-width: 1200px) {
display: inline-block;
width: var(--size);
}
}
.charts {
@media screen and (min-width: 1200px) {
display: inline-block;
width: var(--size);
@media screen and (min-width: calc((var(--size) * 2)+10)) {
width: calc(100% - var(--size)-10);
width: calc( 100% - var(--size) - 10px);
}
}
47 changes: 12 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,46 +11,23 @@
</head>
<body onload="start(false);">

<h2>Skrzetla</h2>
<h1>Skrzetla</h1>

<div>
<div class="windrose">
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="white_stripes">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
<rect class="mask_white_stripes"/>
<rect class="mask_white_stripes" transform="rotate(30 200,200)"/>
<rect class="mask_white_stripes" transform="rotate(60 200,200)"/>
<rect class="mask_white_stripes" transform="rotate(90 200,200)"/>
<rect class="mask_white_stripes" transform="rotate(120 200,200)"/>
<rect class="mask_white_stripes" transform="rotate(150 200,200)"/>
</mask>
<mask id="green">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
<rect class="mask_drection" transform="rotate(10 200,200)"/>
<rect class="mask_drection" transform="rotate(100 200,200)"/>
<rect class="mask_drection" transform="rotate(190 200,200)"/>
<rect class="mask_drection" transform="rotate(210 200,200)"/>
</mask>
<mask id="yellow">
<rect x="0" y="0" width="100%" height="100%" fill="white"/>
<rect class="mask_drection" transform="rotate(10 200,200)"/>
<rect class="mask_drection" transform="rotate(100 200,200)"/>
<rect class="mask_drection" transform="rotate(170 200,200)"/>
</mask>
</defs>
<circle class="outer" mask="url(#white_stripes)" />
<circle class="inner" stroke="#eee" />
<circle class="inner" stroke="yellow" mask="url(#yellow)"/>
<circle class="inner" stroke="green" mask="url(#green)"/>
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" transform="scale(1)">
<circle class="outer" stroke-dasharray="75 3.55" transform="rotate(1 200,200)"/>
<circle id="greey" class="inner" stroke="lightgray" />
<circle id="possible" class="inner" stroke="yellow"/>
<circle id="recommended" class="inner" stroke="green"/>
<circle class="dot"/>
<polygon id="arrow" points="200,160 185,120 200,130 215,120" transform="rotate(30 200,200)" />

<polygon id="arrow" points="200,160 185,120 200,130 215,120"/>
<text id="updated" class="text" x="80%" y="50" fill="red" onclick="start(true)">&#x27F3 ?:?</text>
<text class="text" x="50%" y="8%" >N</text>
<text class="text" x="50%" y="93%">S</text>
<text class="text" x="7%" y="50%" >W</text>
<text class="text" x="93%" y="50%">E</text>
<text class="text" x="50%" y="9%" >N</text>
<text class="text" x="50%" y="94%">S</text>
<text class="text" x="7%" y="52%" >W</text>
<text class="text" x="93%" y="52%">E</text>
</svg>
<div class="boxes">
<div id="wind" class="box">
Expand Down
37 changes: 31 additions & 6 deletions index.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
const channel = 951169;
const possible_from = 10;
const possible_to = 70;
const recommended_from = 30;
const recommended_to = 50;
const circuit = 140 * 2 * 3.14

let last_entry_id;

function start(enforced) {
const speed = vegaEmbed('#speedChart', speedSpec, {actions: false})
const direction = vegaEmbed('#directionChart', directionSpec, {actions: false});
const temp = vegaEmbed('#tempChart', tempSpec, {actions: false});
setRecommended();
setPossible();
update(speed, direction, temp, 100, enforced);
}
function update(speed, direction, temp, n, enforced){
Expand Down Expand Up @@ -47,6 +55,22 @@ async function fetchThingspeakData(id, n) {
return data;
}

function setRecommended() {
const recommended = document.getElementById("recommended")
const range = circuit * (recommended_to - recommended_from) / 360;
const shift = -90 + recommended_from;
recommended.setAttribute("stroke-dasharray",`${range} ${circuit}`)
recommended.setAttribute("transform",`rotate(${shift} 200,200)`);
}

function setPossible() {
const possible = document.getElementById("possible")
const range = circuit * (possible_to - possible_from) / 360;
const shift = -90 + possible_from;
possible.setAttribute("stroke-dasharray",`${range} ${circuit}`)
possible.setAttribute("transform",`rotate(${shift} 200,200)`);
}

function dateToTime(updated) {
const date = new Date(updated);
return date.toLocaleTimeString('pl-PL', { hour: "2-digit", minute: "2-digit" });
Expand Down Expand Up @@ -109,9 +133,10 @@ function getSpeedColor(speed) {
}

function getDirectionColor(direction) {
if (direction > 350) return "yellow";
else if (direction < 20) return "yellow";
else if (direction < 100) return "green";
if (direction < possible_from) return "black";
if (direction < recommended_from) return "yellow";
else if (direction < recommended_to) return "green";
else if (direction < possible_to) return "yellow";
else return "black";
}
function getTemperatureColor(temp) {
Expand All @@ -136,7 +161,7 @@ function getDirection(feed) {
var speedSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
width: "container",
height: 150,
height: 200,
autosize: { type: "fit", resize: true},
data: {
name: "fetched",
Expand Down Expand Up @@ -191,7 +216,7 @@ var speedSpec = {
var directionSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
width: "container",
height: 150,
height: 200,
autosize: { type: "fit", resize: true},
data: {
name: "fetched",
Expand Down Expand Up @@ -223,7 +248,7 @@ var speedSpec = {
var tempSpec = {
$schema: 'https://vega.github.io/schema/vega-lite/v5.json',
width: "container",
height: 150,
height: 200,
autosize: { type: "fit", resize: true},
data: {
name: "fetched",
Expand Down

0 comments on commit c87655e

Please sign in to comment.