diff --git a/.github/workflows/docker-publish.yml b/.github/workflows/docker-publish.yml index 3700f17..03aa302 100644 --- a/.github/workflows/docker-publish.yml +++ b/.github/workflows/docker-publish.yml @@ -2,7 +2,9 @@ name: Build and publish Docker container on: push: - branches: [ "master" ] + branches: + - master + - develop # Publish semver tags as releases. tags: [ 'v*.*.*' ] pull_request: @@ -37,11 +39,17 @@ jobs: username: ${{ github.actor }} password: ${{ secrets.GITHUB_TOKEN }} - - name: Extract Docker metadata + - name: Docker meta id: meta - uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f # v5.8.0 + uses: docker/metadata-action@v5 with: images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }} + tags: | + type=semver,pattern={{raw}},enable={{is_default_branch}} + type=ref,event=branch + type=ref,event=tag + type=ref,event=pr + type=raw,value=latest,enable={{is_default_branch}} - name: Build and push Docker image id: build-and-push diff --git a/app/lib/jinja.py b/app/lib/jinja.py index 2e7611c..1164ccb 100644 --- a/app/lib/jinja.py +++ b/app/lib/jinja.py @@ -153,4 +153,9 @@ def now(): return arrow.utcnow() +@jglobal() +def js_color(name): + return Markup(f'') + + jglobal()(users_enabled) diff --git a/app/screens/openweather/jinja.py b/app/screens/openweather/jinja.py index 406ae61..530c6c2 100644 --- a/app/screens/openweather/jinja.py +++ b/app/screens/openweather/jinja.py @@ -94,6 +94,13 @@ def weather_convert(value, to_units, what, d=2, from_units='standard'): return Markup(f'{value} {suffix}') +@jfilter() +@jglobal() +def wi(name, extra_class=''): + url = url_for('fruitstand_openweather.static', filename=f'images/{name}.svg') + return Markup(f'') + + @jglobal() def get_conditions_image(forecast): """\ @@ -330,4 +337,4 @@ def get_conditions_image(forecast): else: image_name = 'wi-na' - return url_for('fruitstand_openweather.static', filename=f'images/{image_name}.svg') + return image_name diff --git a/app/screens/openweather/src/js/openweather.js b/app/screens/openweather/src/js/openweather.js index 865b57d..14113ce 100644 --- a/app/screens/openweather/src/js/openweather.js +++ b/app/screens/openweather/src/js/openweather.js @@ -56,7 +56,7 @@ import Chart from 'chart.js/auto' }, tooltip: { enabled: false - } + }, }, scales: { x: { @@ -117,7 +117,7 @@ import Chart from 'chart.js/auto' data: window.graph_data.map(row => row.temp), yAxisID: 'yTemp', pointStyle: false, - borderColor: '#000', + borderColor: js_color('.openweather.graph.temperature', 'color'), borderWidth: 2, order: 1, }, @@ -126,7 +126,7 @@ import Chart from 'chart.js/auto' label: 'Precipitation', data: window.graph_data.map(row => row.precip * 100), yAxisID: 'yPercent', - backgroundColor: bgPattern(), + backgroundColor: js_color('.openweather.graph.precipitation', 'color', bgPattern()), order: 2, }, { @@ -135,8 +135,8 @@ import Chart from 'chart.js/auto' data: window.graph_data.map(row => row.humid * 100), yAxisID: 'yPercent', showLine: false, - pointBackgroundColor: '#fff', - pointBorderColor: '#000', + pointBackgroundColor: js_color('.openweather.graph.humidity', 'background-color', '#fff'), + pointBorderColor: js_color('.openweather.graph.humidity', 'color'), order: 0, }, ] diff --git a/app/screens/openweather/src/sass/_graph.scss b/app/screens/openweather/src/sass/_graph.scss new file mode 100644 index 0000000..40301ca --- /dev/null +++ b/app/screens/openweather/src/sass/_graph.scss @@ -0,0 +1,44 @@ +@use "colors" as *; + +// default - hide so not used +#js_colors { + .openweather { + &.graph { + visibility: hidden; + } + } +} + +.cs-3b, .cs-3b7 { + #js_colors { + .openweather { + &.graph { + visibility: visible; + &.humidity { + color: $c-3b-black; + background-color: $c-3b-green; + } + &.precipitation { + color: $c-3b-blue; + } + } + } + } +} + +.cs-16b, .cs-full { + #js_colors { + .openweather { + &.graph { + visibility: visible; + &.humidity { + color: #444; + background-color: #62e941; + } + &.precipitation { + color: #4f8eff; + } + } + } + } +} diff --git a/app/screens/openweather/src/sass/_icons.scss b/app/screens/openweather/src/sass/_icons.scss new file mode 100644 index 0000000..54f265a --- /dev/null +++ b/app/screens/openweather/src/sass/_icons.scss @@ -0,0 +1,166 @@ +@use "colors" as *; + +svg { + // Default fill; suitable for B&W + path { + fill: black; + } +} + +.cs-3b, .cs-3b7 { + svg { + #biohazard, #error, #radiation, #fire, #meteor, #flag-gale-1, #flag-gale-2, #flag-hurricane-1, #flag-hurricane-2, #flag-storm-1, #flag-small-craft-advisory-1, #thermometer-inner { + fill: $c-3b-red; + } + #error-text, #warning-text, #eye-pupil, #text, #line, #indicator, #horizon { + fill: $c-3b-black; + } + #eye { + fill: $c-3b-green; + } + #warning, #sun, #lightning, #star { + fill: $c-3b-yellow; + stroke: black; + stroke-width: 2%; + } + #wind, #dust2, #smoke { + fill: $c-3b-black; + } + #cloud, #hail { + fill: $c-3b-black; + } + #cloud2 { + fill: $c-3b-black; + } + #fog { + fill: $c-3b-blue; + } + #rain { + fill: $c-3b-blue; + } + #haze, #dust, #sand { + fill: $c-3b-black; + } + #lightning2 { + fill: $c-3b-yellow; + } + #sleet { + fill: $c-3b-blue; + } + #snow { + fill: $c-3b-blue; + } + #snowflake { + fill: $c-3b-blue; + } + #fire2 { + fill: $c-3b-red; + } + #water { + fill: $c-3b-blue; + } + #heat { + fill: $c-3b-red; + } + #hurricane { + fill: $c-3b-blue; + } + #moon { + fill: $c-3b-black; + } + #smog { + fill: $c-3b-black; + } + #alien { + fill: $c-3b-green; + } + } + .stats-item { + .wi-sunrise, .wi-sunset, .wi-day-sunny { + background: $c-3b-black; + border-radius: 50%; + #horizon { + fill: $c-3b-white; + } + } + svg { + #warning, #sun, #lightning, #star { + stroke-width: 0; + } + } + } +} + +.cs-3b7 { + svg { + #haze, #dust, #sand, #wind { + fill: $c-3b7-dkyellow; + } + } +} + +.cs-16b, .cs-full { + svg { + #biohazard, #error, #radiation, #fire, #meteor, #flag-gale-1, #flag-gale-2, #flag-hurricane-1, #flag-hurricane-2, #flag-storm-1, #flag-small-craft-advisory-1, #thermometer-inner { + fill: red; + } + #error-text, #warning-text, #eye, #eye-pupil, #text, #line, #indicator, #horizon { + fill: black; + } + #warning, #sun, #lightning, #star { + fill: #f6dd38; + } + + #wind, #dust2, #smoke { + fill: gray; + } + #cloud, #hail { + fill: #ccc; + } + #cloud2 { + fill: #ddd; + } + #fog { + fill: #888; + } + #rain { + fill: #67b1ff; + } + #haze, #dust, #sand { + fill: tan; + } + #lightning2 { + fill: #f6d964; + } + #sleet { + fill: #4a5141; + } + #snow { + fill: #b8d4ff; + } + #snowflake { + fill: #7294ff; + } + #fire2 { + fill: #5f1604; + } + #water { + fill: #0031f7; + } + #heat { + fill: #fc5146; + } + #hurricane { + fill: blue; + } + #moon { + fill: #aae5ff; + } + #smog { + fill: #7f5e49; + } + #alien { + fill: green; + } + } +} \ No newline at end of file diff --git a/app/screens/openweather/src/sass/openweather.scss b/app/screens/openweather/src/sass/openweather.scss index 410fac2..5c2fcdb 100644 --- a/app/screens/openweather/src/sass/openweather.scss +++ b/app/screens/openweather/src/sass/openweather.scss @@ -1,4 +1,6 @@ @use "breakpoints" as *; +@use "icons"; +@use "graph"; #weather { display: block; @@ -7,12 +9,16 @@ box-sizing: border-box; padding: 0.5em; + .icon { + width: auto; + } + // Tiny screens .row-2, .loc-forecast { display: none; } .current { - img { + .icon { display: none; } .details { @@ -46,7 +52,7 @@ .current { display: grid; grid-template-columns: repeat(2, 1fr); - img { + .icon { display: block; } .temp { @@ -82,7 +88,7 @@ } @include bp(xs) { - .row-1 .loc-forecast .forecast-item img { + .row-1 .loc-forecast .forecast-item .icon { max-height: 3em; } } @@ -101,7 +107,7 @@ .current { display: flex; flex-direction: column; - img { + .icon { max-height: 4em; } .temp { @@ -162,7 +168,7 @@ .icon { display: inline-block; vertical-align: middle; - max-height: 1.5em; + max-height: 1.65em; } .stats-data { display: inline-block; @@ -191,7 +197,7 @@ display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; - img { + .icon { max-height: unset; } .temp { diff --git a/app/screens/openweather/static/css/openweather.css b/app/screens/openweather/static/css/openweather.css index 2b8f298..c170562 100644 --- a/app/screens/openweather/static/css/openweather.css +++ b/app/screens/openweather/static/css/openweather.css @@ -1 +1 @@ -#weather{display:block;width:100%;height:100%;box-sizing:border-box;padding:.5em}#weather .row-2,#weather .loc-forecast{display:none}#weather .current img{display:none}#weather .current .details .temp{display:block;text-align:center;align-items:flex-end}#weather .current .details .temp .temp-number{font-size:4em;line-height:.85em}#weather .current .details .feelslike{text-align:center}#weather .current .details .feelslike .temp-prefix{font-size:.8em}@media(min-width: 240px){#weather .row-1{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;text-align:center;align-items:center}#weather .row-1 .current{display:grid;grid-template-columns:repeat(2, 1fr)}#weather .row-1 .current img{display:block}#weather .row-1 .current .temp .temp-number{line-height:unset}#weather .row-1 .loc-forecast{width:100%;display:flex;flex-direction:column;justify-content:space-between}#weather .row-1 .loc-forecast .location{display:none}#weather .row-1 .loc-forecast .date{font-size:.8em}#weather .row-1 .loc-forecast .forecast{width:100%;display:flex;justify-content:space-between}#weather .row-1 .loc-forecast .forecast .forecast-item{flex:1 1 0px}#weather .row-1 .loc-forecast .forecast .forecast-item .details{display:none}}@media(min-width: 320px){#weather .row-1 .loc-forecast .forecast-item img{max-height:3em}}@media(min-width: 480px){#weather{display:flex;flex-direction:column;max-height:100%}#weather .row-1{display:grid;grid-template-columns:1fr 4fr;gap:1em;height:unset;text-align:left;align-items:flex-start}#weather .row-1 .current{display:flex;flex-direction:column}#weather .row-1 .current img{max-height:4em}#weather .row-1 .current .temp .temp-number{font-size:3em}#weather .row-1 .current .feelslike{display:none}#weather .row-1 .loc-forecast{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-areas:"loc date" "fc fc"}#weather .row-1 .loc-forecast .location{display:block;grid-area:loc;font-size:.9em}#weather .row-1 .loc-forecast .date{grid-area:date;font-size:.9em}#weather .row-1 .loc-forecast .forecast{grid-area:fc;text-align:center}#weather .row-1 .loc-forecast .forecast .forecast-item .details{display:block;font-size:.8em}#weather .row-2{display:block;flex:1}#weather .row-2 .stats{display:none}#weather .row-2 .graph{width:100%;height:100%}}@media(min-width: 600px){#weather .row-2{display:grid;grid-template-columns:1fr 3fr}#weather .row-2 .stats{display:block}#weather .row-2 .stats .stats-item .icon{display:inline-block;vertical-align:middle;max-height:1.5em}#weather .row-2 .stats .stats-item .stats-data{display:inline-block}#weather .row-2 .stats .stats-item .title{display:none}#weather .row-2 .stats .stats-item .details{white-space:nowrap}#weather .row-2 .stats .stats-item .details .icon{display:inline;max-height:.8em}}@media(min-width: 800px){#weather{row-gap:1em}#weather .row-1{grid-template-columns:1fr 2fr;align-items:center}#weather .row-1 .current{display:grid;grid-template-columns:repeat(2, 1fr);align-items:center}#weather .row-1 .current img{max-height:unset}#weather .row-1 .current .temp{white-space:nowrap}#weather .row-1 .current .temp .temp-number{font-size:6em;line-height:.8em}#weather .row-1 .current .feelslike{display:block}#weather .row-1 .loc-forecast{align-items:first baseline;column-gap:1em;row-gap:.5em}#weather .row-1 .loc-forecast .location{font-size:1.5em;justify-self:right}#weather .row-1 .loc-forecast .date{font-size:1.2em}#weather .row-2{grid-template-columns:2fr 3fr}#weather .row-2 .stats{display:grid;grid-template-columns:repeat(2, 1fr)}#weather .row-2 .stats .stats-item{display:grid;grid-template-columns:1fr 4fr}#weather .row-2 .stats .stats-item .title{display:block;font-size:.9em}#weather .row-2 .stats .stats-item .details{font-size:1.1em}#weather .row-2 .stats .stats-item .details .suffix{font-size:.8em}#weather .row-2 .stats .stats-item>.icon{max-height:1.7em}} +svg path{fill:#000}.cs-3b svg #biohazard,.cs-3b svg #error,.cs-3b svg #radiation,.cs-3b svg #fire,.cs-3b svg #meteor,.cs-3b svg #flag-gale-1,.cs-3b svg #flag-gale-2,.cs-3b svg #flag-hurricane-1,.cs-3b svg #flag-hurricane-2,.cs-3b svg #flag-storm-1,.cs-3b svg #flag-small-craft-advisory-1,.cs-3b svg #thermometer-inner,.cs-3b7 svg #biohazard,.cs-3b7 svg #error,.cs-3b7 svg #radiation,.cs-3b7 svg #fire,.cs-3b7 svg #meteor,.cs-3b7 svg #flag-gale-1,.cs-3b7 svg #flag-gale-2,.cs-3b7 svg #flag-hurricane-1,.cs-3b7 svg #flag-hurricane-2,.cs-3b7 svg #flag-storm-1,.cs-3b7 svg #flag-small-craft-advisory-1,.cs-3b7 svg #thermometer-inner{fill:red}.cs-3b svg #error-text,.cs-3b svg #warning-text,.cs-3b svg #eye-pupil,.cs-3b svg #text,.cs-3b svg #line,.cs-3b svg #indicator,.cs-3b svg #horizon,.cs-3b7 svg #error-text,.cs-3b7 svg #warning-text,.cs-3b7 svg #eye-pupil,.cs-3b7 svg #text,.cs-3b7 svg #line,.cs-3b7 svg #indicator,.cs-3b7 svg #horizon{fill:#000}.cs-3b svg #eye,.cs-3b7 svg #eye{fill:lime}.cs-3b svg #warning,.cs-3b svg #sun,.cs-3b svg #lightning,.cs-3b svg #star,.cs-3b7 svg #warning,.cs-3b7 svg #sun,.cs-3b7 svg #lightning,.cs-3b7 svg #star{fill:#ff0;stroke:#000;stroke-width:2%}.cs-3b svg #wind,.cs-3b svg #dust2,.cs-3b svg #smoke,.cs-3b7 svg #wind,.cs-3b7 svg #dust2,.cs-3b7 svg #smoke{fill:#000}.cs-3b svg #cloud,.cs-3b svg #hail,.cs-3b7 svg #cloud,.cs-3b7 svg #hail{fill:#000}.cs-3b svg #cloud2,.cs-3b7 svg #cloud2{fill:#000}.cs-3b svg #fog,.cs-3b7 svg #fog{fill:blue}.cs-3b svg #rain,.cs-3b7 svg #rain{fill:blue}.cs-3b svg #haze,.cs-3b svg #dust,.cs-3b svg #sand,.cs-3b7 svg #haze,.cs-3b7 svg #dust,.cs-3b7 svg #sand{fill:#000}.cs-3b svg #lightning2,.cs-3b7 svg #lightning2{fill:#ff0}.cs-3b svg #sleet,.cs-3b7 svg #sleet{fill:blue}.cs-3b svg #snow,.cs-3b7 svg #snow{fill:blue}.cs-3b svg #snowflake,.cs-3b7 svg #snowflake{fill:blue}.cs-3b svg #fire2,.cs-3b7 svg #fire2{fill:red}.cs-3b svg #water,.cs-3b7 svg #water{fill:blue}.cs-3b svg #heat,.cs-3b7 svg #heat{fill:red}.cs-3b svg #hurricane,.cs-3b7 svg #hurricane{fill:blue}.cs-3b svg #moon,.cs-3b7 svg #moon{fill:#000}.cs-3b svg #smog,.cs-3b7 svg #smog{fill:#000}.cs-3b svg #alien,.cs-3b7 svg #alien{fill:lime}.cs-3b .stats-item .wi-sunrise,.cs-3b .stats-item .wi-sunset,.cs-3b .stats-item .wi-day-sunny,.cs-3b7 .stats-item .wi-sunrise,.cs-3b7 .stats-item .wi-sunset,.cs-3b7 .stats-item .wi-day-sunny{background:#000;border-radius:50%}.cs-3b .stats-item .wi-sunrise #horizon,.cs-3b .stats-item .wi-sunset #horizon,.cs-3b .stats-item .wi-day-sunny #horizon,.cs-3b7 .stats-item .wi-sunrise #horizon,.cs-3b7 .stats-item .wi-sunset #horizon,.cs-3b7 .stats-item .wi-day-sunny #horizon{fill:#fff}.cs-3b .stats-item svg #warning,.cs-3b .stats-item svg #sun,.cs-3b .stats-item svg #lightning,.cs-3b .stats-item svg #star,.cs-3b7 .stats-item svg #warning,.cs-3b7 .stats-item svg #sun,.cs-3b7 .stats-item svg #lightning,.cs-3b7 .stats-item svg #star{stroke-width:0}.cs-3b7 svg #haze,.cs-3b7 svg #dust,.cs-3b7 svg #sand,.cs-3b7 svg #wind{fill:orange}.cs-16b svg #biohazard,.cs-16b svg #error,.cs-16b svg #radiation,.cs-16b svg #fire,.cs-16b svg #meteor,.cs-16b svg #flag-gale-1,.cs-16b svg #flag-gale-2,.cs-16b svg #flag-hurricane-1,.cs-16b svg #flag-hurricane-2,.cs-16b svg #flag-storm-1,.cs-16b svg #flag-small-craft-advisory-1,.cs-16b svg #thermometer-inner,.cs-full svg #biohazard,.cs-full svg #error,.cs-full svg #radiation,.cs-full svg #fire,.cs-full svg #meteor,.cs-full svg #flag-gale-1,.cs-full svg #flag-gale-2,.cs-full svg #flag-hurricane-1,.cs-full svg #flag-hurricane-2,.cs-full svg #flag-storm-1,.cs-full svg #flag-small-craft-advisory-1,.cs-full svg #thermometer-inner{fill:red}.cs-16b svg #error-text,.cs-16b svg #warning-text,.cs-16b svg #eye,.cs-16b svg #eye-pupil,.cs-16b svg #text,.cs-16b svg #line,.cs-16b svg #indicator,.cs-16b svg #horizon,.cs-full svg #error-text,.cs-full svg #warning-text,.cs-full svg #eye,.cs-full svg #eye-pupil,.cs-full svg #text,.cs-full svg #line,.cs-full svg #indicator,.cs-full svg #horizon{fill:#000}.cs-16b svg #warning,.cs-16b svg #sun,.cs-16b svg #lightning,.cs-16b svg #star,.cs-full svg #warning,.cs-full svg #sun,.cs-full svg #lightning,.cs-full svg #star{fill:#f6dd38}.cs-16b svg #wind,.cs-16b svg #dust2,.cs-16b svg #smoke,.cs-full svg #wind,.cs-full svg #dust2,.cs-full svg #smoke{fill:gray}.cs-16b svg #cloud,.cs-16b svg #hail,.cs-full svg #cloud,.cs-full svg #hail{fill:#ccc}.cs-16b svg #cloud2,.cs-full svg #cloud2{fill:#ddd}.cs-16b svg #fog,.cs-full svg #fog{fill:#888}.cs-16b svg #rain,.cs-full svg #rain{fill:#67b1ff}.cs-16b svg #haze,.cs-16b svg #dust,.cs-16b svg #sand,.cs-full svg #haze,.cs-full svg #dust,.cs-full svg #sand{fill:tan}.cs-16b svg #lightning2,.cs-full svg #lightning2{fill:#f6d964}.cs-16b svg #sleet,.cs-full svg #sleet{fill:#4a5141}.cs-16b svg #snow,.cs-full svg #snow{fill:#b8d4ff}.cs-16b svg #snowflake,.cs-full svg #snowflake{fill:#7294ff}.cs-16b svg #fire2,.cs-full svg #fire2{fill:#5f1604}.cs-16b svg #water,.cs-full svg #water{fill:#0031f7}.cs-16b svg #heat,.cs-full svg #heat{fill:#fc5146}.cs-16b svg #hurricane,.cs-full svg #hurricane{fill:blue}.cs-16b svg #moon,.cs-full svg #moon{fill:#aae5ff}.cs-16b svg #smog,.cs-full svg #smog{fill:#7f5e49}.cs-16b svg #alien,.cs-full svg #alien{fill:green}#js_colors .openweather.graph{visibility:hidden}.cs-3b #js_colors .openweather.graph,.cs-3b7 #js_colors .openweather.graph{visibility:visible}.cs-3b #js_colors .openweather.graph.humidity,.cs-3b7 #js_colors .openweather.graph.humidity{color:#000;background-color:lime}.cs-3b #js_colors .openweather.graph.precipitation,.cs-3b7 #js_colors .openweather.graph.precipitation{color:blue}.cs-16b #js_colors .openweather.graph,.cs-full #js_colors .openweather.graph{visibility:visible}.cs-16b #js_colors .openweather.graph.humidity,.cs-full #js_colors .openweather.graph.humidity{color:#444;background-color:#62e941}.cs-16b #js_colors .openweather.graph.precipitation,.cs-full #js_colors .openweather.graph.precipitation{color:#4f8eff}#weather{display:block;width:100%;height:100%;box-sizing:border-box;padding:.5em}#weather .icon{width:auto}#weather .row-2,#weather .loc-forecast{display:none}#weather .current .icon{display:none}#weather .current .details .temp{display:block;text-align:center;align-items:flex-end}#weather .current .details .temp .temp-number{font-size:4em;line-height:.85em}#weather .current .details .feelslike{text-align:center}#weather .current .details .feelslike .temp-prefix{font-size:.8em}@media(min-width: 240px){#weather .row-1{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;text-align:center;align-items:center}#weather .row-1 .current{display:grid;grid-template-columns:repeat(2, 1fr)}#weather .row-1 .current .icon{display:block}#weather .row-1 .current .temp .temp-number{line-height:unset}#weather .row-1 .loc-forecast{width:100%;display:flex;flex-direction:column;justify-content:space-between}#weather .row-1 .loc-forecast .location{display:none}#weather .row-1 .loc-forecast .date{font-size:.8em}#weather .row-1 .loc-forecast .forecast{width:100%;display:flex;justify-content:space-between}#weather .row-1 .loc-forecast .forecast .forecast-item{flex:1 1 0px}#weather .row-1 .loc-forecast .forecast .forecast-item .details{display:none}}@media(min-width: 320px){#weather .row-1 .loc-forecast .forecast-item .icon{max-height:3em}}@media(min-width: 480px){#weather{display:flex;flex-direction:column;max-height:100%}#weather .row-1{display:grid;grid-template-columns:1fr 4fr;gap:1em;height:unset;text-align:left;align-items:flex-start}#weather .row-1 .current{display:flex;flex-direction:column}#weather .row-1 .current .icon{max-height:4em}#weather .row-1 .current .temp .temp-number{font-size:3em}#weather .row-1 .current .feelslike{display:none}#weather .row-1 .loc-forecast{display:grid;grid-template-columns:repeat(2, 1fr);grid-template-areas:"loc date" "fc fc"}#weather .row-1 .loc-forecast .location{display:block;grid-area:loc;font-size:.9em}#weather .row-1 .loc-forecast .date{grid-area:date;font-size:.9em}#weather .row-1 .loc-forecast .forecast{grid-area:fc;text-align:center}#weather .row-1 .loc-forecast .forecast .forecast-item .details{display:block;font-size:.8em}#weather .row-2{display:block;flex:1}#weather .row-2 .stats{display:none}#weather .row-2 .graph{width:100%;height:100%}}@media(min-width: 600px){#weather .row-2{display:grid;grid-template-columns:1fr 3fr}#weather .row-2 .stats{display:block}#weather .row-2 .stats .stats-item .icon{display:inline-block;vertical-align:middle;max-height:1.65em}#weather .row-2 .stats .stats-item .stats-data{display:inline-block}#weather .row-2 .stats .stats-item .title{display:none}#weather .row-2 .stats .stats-item .details{white-space:nowrap}#weather .row-2 .stats .stats-item .details .icon{display:inline;max-height:.8em}}@media(min-width: 800px){#weather{row-gap:1em}#weather .row-1{grid-template-columns:1fr 2fr;align-items:center}#weather .row-1 .current{display:grid;grid-template-columns:repeat(2, 1fr);align-items:center}#weather .row-1 .current .icon{max-height:unset}#weather .row-1 .current .temp{white-space:nowrap}#weather .row-1 .current .temp .temp-number{font-size:6em;line-height:.8em}#weather .row-1 .current .feelslike{display:block}#weather .row-1 .loc-forecast{align-items:first baseline;column-gap:1em;row-gap:.5em}#weather .row-1 .loc-forecast .location{font-size:1.5em;justify-self:right}#weather .row-1 .loc-forecast .date{font-size:1.2em}#weather .row-2{grid-template-columns:2fr 3fr}#weather .row-2 .stats{display:grid;grid-template-columns:repeat(2, 1fr)}#weather .row-2 .stats .stats-item{display:grid;grid-template-columns:1fr 4fr}#weather .row-2 .stats .stats-item .title{display:block;font-size:.9em}#weather .row-2 .stats .stats-item .details{font-size:1.1em}#weather .row-2 .stats .stats-item .details .suffix{font-size:.8em}#weather .row-2 .stats .stats-item>.icon{max-height:1.7em}} diff --git a/app/screens/openweather/static/images/air_filter.svg b/app/screens/openweather/static/images/air_filter.svg index 7b62f25..79fd60a 100644 --- a/app/screens/openweather/static/images/air_filter.svg +++ b/app/screens/openweather/static/images/air_filter.svg @@ -8,7 +8,7 @@ version="1.1" id="svg12" sodipodi:docname="air_filter.svg" - inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)" + inkscape:version="1.4.3 (0d15f75, 2025-12-25)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -24,37 +24,34 @@ inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" showgrid="false" - inkscape:zoom="20.603629" - inkscape:cx="7.7170871" - inkscape:cy="13.78398" - inkscape:window-width="1920" - inkscape:window-height="1025" - inkscape:window-x="0" - inkscape:window-y="24" + inkscape:zoom="32" + inkscape:cx="13.609375" + inkscape:cy="19.4375" + inkscape:window-width="2560" + inkscape:window-height="1387" + inkscape:window-x="1352" + inkscape:window-y="25" inkscape:window-maximized="1" - inkscape:current-layer="svg12" /> - - - - - - + inkscape:current-layer="svg12" + inkscape:showpageshadow="2" + inkscape:deskcolor="#d1d1d1" /> + + + diff --git a/app/screens/openweather/static/images/biological_hazard_symbol.svg b/app/screens/openweather/static/images/biological_hazard_symbol.svg index 2f73bbc..6ad56f7 100644 --- a/app/screens/openweather/static/images/biological_hazard_symbol.svg +++ b/app/screens/openweather/static/images/biological_hazard_symbol.svg @@ -7,7 +7,7 @@ preserveAspectRatio="xMidYMid" id="svg18" sodipodi:docname="biological_hazard_symbol.svg" - inkscape:version="1.2.2 (b0a8486541, 2022-12-01)" + inkscape:version="1.4.3 (0d15f75, 2025-12-25)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -26,40 +26,20 @@ inkscape:document-units="pt" showgrid="false" inkscape:zoom="0.50383782" - inkscape:cx="1484.6047" - inkscape:cy="854.44162" - inkscape:window-width="1920" - inkscape:window-height="1052" - inkscape:window-x="1920" - inkscape:window-y="0" - inkscape:window-maximized="1" + inkscape:cx="1156.126" + inkscape:cy="801.84532" + inkscape:window-width="2560" + inkscape:window-height="1387" + inkscape:window-x="1352" + inkscape:window-y="25" + inkscape:window-maximized="0" inkscape:current-layer="svg18" /> Created by potrace 1.15, written by Peter Selinger 2001-2017 - - - - - - - - + diff --git a/app/screens/openweather/static/images/error_icon.svg b/app/screens/openweather/static/images/error_icon.svg index ab0f255..3bf7d8d 100644 --- a/app/screens/openweather/static/images/error_icon.svg +++ b/app/screens/openweather/static/images/error_icon.svg @@ -7,7 +7,7 @@ version="1.1" id="svg8" sodipodi:docname="error_icon.svg" - inkscape:version="1.2.2 (b0a8486541, 2022-12-01)" + inkscape:version="1.4.3 (0d15f75, 2025-12-25)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -25,16 +25,20 @@ inkscape:deskcolor="#d1d1d1" showgrid="false" inkscape:zoom="26.71875" - inkscape:cx="15.94386" + inkscape:cx="15.962573" inkscape:cy="16" - inkscape:window-width="1920" - inkscape:window-height="1052" - inkscape:window-x="1920" - inkscape:window-y="0" - inkscape:window-maximized="1" + inkscape:window-width="1024" + inkscape:window-height="1186" + inkscape:window-x="2240" + inkscape:window-y="25" + inkscape:window-maximized="0" inkscape:current-layer="svg8" /> + style="stroke-width:0.78" + d="M 128,46.88 A 81.12,81.12 0 1 0 209.12,128 81.2058,81.2058 0 0 0 128,46.88 Z m 0,149.76 A 68.64,68.64 0 1 1 196.64,128 68.718,68.718 0 0 1 128,196.64 Z" + id="error" /> + diff --git a/app/screens/openweather/static/images/house.svg b/app/screens/openweather/static/images/house.svg index 2239fea..a15b54a 100644 --- a/app/screens/openweather/static/images/house.svg +++ b/app/screens/openweather/static/images/house.svg @@ -10,7 +10,7 @@ style="enable-background:new 0 0 512 512;" xml:space="preserve" sodipodi:docname="house.svg" - inkscape:version="1.1.2 (0a00cf5339, 2022-02-04, custom)" + inkscape:version="1.4.3 (0d15f75, 2025-12-25)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" @@ -24,15 +24,17 @@ inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" showgrid="false" - inkscape:zoom="0.58350119" - inkscape:cx="171.37926" - inkscape:cy="577.54809" - inkscape:window-width="1920" - inkscape:window-height="1025" - inkscape:window-x="0" - inkscape:window-y="24" - inkscape:window-maximized="1" - inkscape:current-layer="Layer_1" /> + inkscape:zoom="0.70710678" + inkscape:cx="48.790368" + inkscape:cy="172.53405" + inkscape:window-width="2560" + inkscape:window-height="1387" + inkscape:window-x="1352" + inkscape:window-y="25" + inkscape:window-maximized="0" + inkscape:current-layer="Layer_1" + inkscape:showpageshadow="2" + inkscape:deskcolor="#d1d1d1" /> +{% endblock %} + +{% block content %} +
+ {% for icon in icons %} +
+ + {{ icon }} +
+ {% endfor %} +
+{% endblock %} diff --git a/app/screens/openweather/templates/main.html.j2 b/app/screens/openweather/templates/main.html.j2 index 08b17c7..32e8101 100644 --- a/app/screens/openweather/templates/main.html.j2 +++ b/app/screens/openweather/templates/main.html.j2 @@ -11,11 +11,18 @@ {% endblock %} +{% block js_colors %} + {{ super() }} + {{ js_color('openweather graph temperature') }} + {{ js_color('openweather graph humidity') }} + {{ js_color('openweather graph precipitation') }} +{% endblock %} + {% block content %}
- + {{ get_conditions_image(forecast.current) |wi(extra_class='icon') }}
{{ forecast.current.temp |fixed(d=0) }} @@ -36,7 +43,7 @@ {% for day in forecast.daily[:5] %}
{{ day.dt |dt(format='ddd', timezone=forecast.timezone, no_markup=True) }}
- + {{ get_conditions_image(day) |wi(extra_class='icon') }}
{{ day.temp.max |fixed(d=0) }}° | @@ -50,21 +57,21 @@
- + {{ wi('wi-sunrise', extra_class='icon') }}
Sunrise {{ forecast.current.sunrise |dt(format='h:mma', timezone=forecast.timezone, no_markup=True) }}
- + {{ wi('wi-sunset', extra_class='icon') }}
Sunset {{ forecast.current.sunset |dt(format='h:mma', timezone=forecast.timezone, no_markup=True) }}
- + {{ wi('wi-strong-wind', extra_class='icon') }}
Wind @@ -75,7 +82,7 @@
- + {{ wi('wi-humidity', extra_class='icon') }}
Humidity @@ -85,7 +92,7 @@
- + {{ wi('wi-day-sunny', extra_class='icon') }}
UV Index @@ -109,14 +116,14 @@
- + {{ wi('wi-barometer', extra_class='icon') }}
Pressure {{ forecast.current.pressure |weather_convert(screen.config.units, 'pressure') }}
- + {{ wi('air_filter', extra_class='icon') }}
Air Quality @@ -142,7 +149,7 @@
- + {{ wi('visibility_icon', extra_class='icon') }}
Visibility @@ -152,7 +159,7 @@
{% if context.metrics.internal_temp is defined %}
- + {{ wi('house_thermometer', extra_class='icon') }}
Temperature {{ context.metrics.internal_temp.temp |weather_convert(screen.config.units, 'temp', from_units=context.metrics.internal_temp.units) }} @@ -161,7 +168,7 @@ {% endif %} {% if context.metrics.internal_humidity is defined %}
- + {{ wi('house_humidity', extra_class='icon') }}
Humidity @@ -173,7 +180,7 @@ {% endif %} {% if context.metrics.internal_pressure is defined %}
- + {{ wi('house_pressure', extra_class='icon') }}
Pressure {{ context.metrics.internal_pressure.pressure |weather_convert(screen.config.units, 'pressure', from_units=context.metrics.internal_pressure.units) }} diff --git a/app/screens/openweather/view.py b/app/screens/openweather/view.py index 2c067bb..c08ae20 100644 --- a/app/screens/openweather/view.py +++ b/app/screens/openweather/view.py @@ -1,4 +1,4 @@ -from flask import Blueprint, g, render_template +from flask import Blueprint, g, render_template, current_app, abort import arrow from app.lib.jinja import dt @@ -25,3 +25,244 @@ def render(): if arrow.get(h['dt']) <= in_24_h ] return g.screen.render_template('main.html.j2', forecast=forecast, air_pollution=air_pollution, graph_data=graph_data) + + +@bp.get('/icon-demo') +def icon_demo(): + # if not current_app.config.get('DEBUG'): + # abort(404) + + icons = [ + 'air_filter.svg', + 'biological_hazard_symbol.svg', + 'error_icon.svg', + 'house.svg', + 'house_humidity.svg', + 'house_pressure.svg', + 'house_raindrops.svg', + 'house_thermometer.svg', + 'ionizing_radiation_symbol.svg', + 'visibility_icon.svg', + 'warning_icon.svg', + 'wi-alien.svg', + 'wi-barometer.svg', + 'wi-celsius.svg', + 'wi-cloud-down.svg', + 'wi-cloud-refresh.svg', + 'wi-cloud-up.svg', + 'wi-cloud.svg', + 'wi-cloudy-gusts.svg', + 'wi-cloudy-windy.svg', + 'wi-cloudy.svg', + 'wi-day-cloudy-gusts.svg', + 'wi-day-cloudy-high.svg', + 'wi-day-cloudy-windy.svg', + 'wi-day-cloudy.svg', + 'wi-day-fog.svg', + 'wi-day-hail.svg', + 'wi-day-haze.svg', + 'wi-day-light-wind.svg', + 'wi-day-lightning.svg', + 'wi-day-rain-mix.svg', + 'wi-day-rain-wind.svg', + 'wi-day-rain.svg', + 'wi-day-showers.svg', + 'wi-day-sleet-storm.svg', + 'wi-day-sleet.svg', + 'wi-day-snow-thunderstorm.svg', + 'wi-day-snow-wind.svg', + 'wi-day-snow.svg', + 'wi-day-sprinkle.svg', + 'wi-day-storm-showers.svg', + 'wi-day-sunny-overcast.svg', + 'wi-day-sunny.svg', + 'wi-day-thunderstorm.svg', + 'wi-day-windy.svg', + 'wi-degrees.svg', + 'wi-direction-down-left.svg', + 'wi-direction-down-right.svg', + 'wi-direction-down.svg', + 'wi-direction-left.svg', + 'wi-direction-right.svg', + 'wi-direction-up-left.svg', + 'wi-direction-up-right.svg', + 'wi-direction-up.svg', + 'wi-dust.svg', + 'wi-earthquake.svg', + 'wi-fahrenheit.svg', + 'wi-fire.svg', + 'wi-flood.svg', + 'wi-fog.svg', + 'wi-gale-warning.svg', + 'wi-hail.svg', + 'wi-horizon-alt.svg', + 'wi-horizon.svg', + 'wi-hot.svg', + 'wi-humidity.svg', + 'wi-hurricane-warning.svg', + 'wi-hurricane.svg', + 'wi-lightning.svg', + 'wi-lunar-eclipse.svg', + 'wi-meteor.svg', + 'wi-moon-alt-first-quarter.svg', + 'wi-moon-alt-full.svg', + 'wi-moon-alt-new.svg', + 'wi-moon-alt-third-quarter.svg', + 'wi-moon-alt-waning-crescent-1.svg', + 'wi-moon-alt-waning-crescent-2.svg', + 'wi-moon-alt-waning-crescent-3.svg', + 'wi-moon-alt-waning-crescent-4.svg', + 'wi-moon-alt-waning-crescent-5.svg', + 'wi-moon-alt-waning-crescent-6.svg', + 'wi-moon-alt-waning-gibbous-1.svg', + 'wi-moon-alt-waning-gibbous-2.svg', + 'wi-moon-alt-waning-gibbous-3.svg', + 'wi-moon-alt-waning-gibbous-4.svg', + 'wi-moon-alt-waning-gibbous-5.svg', + 'wi-moon-alt-waning-gibbous-6.svg', + 'wi-moon-alt-waxing-crescent-1.svg', + 'wi-moon-alt-waxing-crescent-2.svg', + 'wi-moon-alt-waxing-crescent-3.svg', + 'wi-moon-alt-waxing-crescent-4.svg', + 'wi-moon-alt-waxing-crescent-5.svg', + 'wi-moon-alt-waxing-crescent-6.svg', + 'wi-moon-alt-waxing-gibbous-1.svg', + 'wi-moon-alt-waxing-gibbous-2.svg', + 'wi-moon-alt-waxing-gibbous-3.svg', + 'wi-moon-alt-waxing-gibbous-4.svg', + 'wi-moon-alt-waxing-gibbous-5.svg', + 'wi-moon-alt-waxing-gibbous-6.svg', + 'wi-moon-first-quarter.svg', + 'wi-moon-full.svg', + 'wi-moon-new.svg', + 'wi-moon-third-quarter.svg', + 'wi-moon-waning-crescent-1.svg', + 'wi-moon-waning-crescent-2.svg', + 'wi-moon-waning-crescent-3.svg', + 'wi-moon-waning-crescent-4.svg', + 'wi-moon-waning-crescent-5.svg', + 'wi-moon-waning-crescent-6.svg', + 'wi-moon-waning-gibbous-1.svg', + 'wi-moon-waning-gibbous-2.svg', + 'wi-moon-waning-gibbous-3.svg', + 'wi-moon-waning-gibbous-4.svg', + 'wi-moon-waning-gibbous-5.svg', + 'wi-moon-waning-gibbous-6.svg', + 'wi-moon-waxing-6.svg', + 'wi-moon-waxing-crescent-1.svg', + 'wi-moon-waxing-crescent-2.svg', + 'wi-moon-waxing-crescent-3.svg', + 'wi-moon-waxing-crescent-4.svg', + 'wi-moon-waxing-crescent-5.svg', + 'wi-moon-waxing-gibbous-1.svg', + 'wi-moon-waxing-gibbous-2.svg', + 'wi-moon-waxing-gibbous-3.svg', + 'wi-moon-waxing-gibbous-4.svg', + 'wi-moon-waxing-gibbous-5.svg', + 'wi-moon-waxing-gibbous-6.svg', + 'wi-moonrise.svg', + 'wi-moonset.svg', + 'wi-na.svg', + 'wi-night-alt-cloudy-gusts.svg', + 'wi-night-alt-cloudy-high.svg', + 'wi-night-alt-cloudy-windy.svg', + 'wi-night-alt-cloudy.svg', + 'wi-night-alt-hail.svg', + 'wi-night-alt-lightning.svg', + 'wi-night-alt-partly-cloudy.svg', + 'wi-night-alt-rain-mix.svg', + 'wi-night-alt-rain-wind.svg', + 'wi-night-alt-rain.svg', + 'wi-night-alt-showers.svg', + 'wi-night-alt-sleet-storm.svg', + 'wi-night-alt-sleet.svg', + 'wi-night-alt-snow-thunderstorm.svg', + 'wi-night-alt-snow-wind.svg', + 'wi-night-alt-snow.svg', + 'wi-night-alt-sprinkle.svg', + 'wi-night-alt-storm-showers.svg', + 'wi-night-alt-thunderstorm.svg', + 'wi-night-clear.svg', + 'wi-night-cloudy-gusts.svg', + 'wi-night-cloudy-high.svg', + 'wi-night-cloudy-windy.svg', + 'wi-night-cloudy.svg', + 'wi-night-fog.svg', + 'wi-night-hail.svg', + 'wi-night-lightning.svg', + 'wi-night-partly-cloudy.svg', + 'wi-night-rain-mix.svg', + 'wi-night-rain-wind.svg', + 'wi-night-rain.svg', + 'wi-night-showers.svg', + 'wi-night-sleet-storm.svg', + 'wi-night-sleet.svg', + 'wi-night-snow-thunderstorm.svg', + 'wi-night-snow-wind.svg', + 'wi-night-snow.svg', + 'wi-night-sprinkle.svg', + 'wi-night-storm-showers.svg', + 'wi-night-thunderstorm.svg', + 'wi-rain-mix.svg', + 'wi-rain-wind.svg', + 'wi-rain.svg', + 'wi-raindrop.svg', + 'wi-raindrops.svg', + 'wi-refresh-alt.svg', + 'wi-refresh.svg', + 'wi-sandstorm.svg', + 'wi-showers.svg', + 'wi-sleet.svg', + 'wi-small-craft-advisory.svg', + 'wi-smog.svg', + 'wi-smoke.svg', + 'wi-snow-wind.svg', + 'wi-snow.svg', + 'wi-snowflake-cold.svg', + 'wi-solar-eclipse.svg', + 'wi-sprinkle.svg', + 'wi-stars.svg', + 'wi-storm-showers.svg', + 'wi-storm-warning.svg', + 'wi-strong-wind.svg', + 'wi-sunrise.svg', + 'wi-sunset.svg', + 'wi-thermometer-exterior.svg', + 'wi-thermometer-internal.svg', + 'wi-thermometer.svg', + 'wi-thunderstorm.svg', + 'wi-time-1.svg', + 'wi-time-10.svg', + 'wi-time-11.svg', + 'wi-time-12.svg', + 'wi-time-2.svg', + 'wi-time-3.svg', + 'wi-time-4.svg', + 'wi-time-5.svg', + 'wi-time-6.svg', + 'wi-time-7.svg', + 'wi-time-8.svg', + 'wi-time-9.svg', + 'wi-tornado.svg', + 'wi-train.svg', + 'wi-tsunami.svg', + 'wi-umbrella.svg', + 'wi-volcano.svg', + 'wi-wind-beaufort-0.svg', + 'wi-wind-beaufort-1.svg', + 'wi-wind-beaufort-10.svg', + 'wi-wind-beaufort-11.svg', + 'wi-wind-beaufort-12.svg', + 'wi-wind-beaufort-2.svg', + 'wi-wind-beaufort-3.svg', + 'wi-wind-beaufort-4.svg', + 'wi-wind-beaufort-5.svg', + 'wi-wind-beaufort-6.svg', + 'wi-wind-beaufort-7.svg', + 'wi-wind-beaufort-8.svg', + 'wi-wind-beaufort-9.svg', + 'wi-wind-deg.svg', + 'wi-windy.svg', + ] + + return render_template('icon_demo.html.j2', icons=icons) \ No newline at end of file diff --git a/app/src/sass/_colors.scss b/app/src/sass/_colors.scss new file mode 100644 index 0000000..934669b --- /dev/null +++ b/app/src/sass/_colors.scss @@ -0,0 +1,19 @@ +$c-1b-black: #000000; +$c-1b-white: #ffffff; + +$c-3b-black: #000000; +$c-3b-white: #ffffff; +$c-3b-red: #ff0000; +$c-3b-green: #00ff00; +$c-3b-blue: #0000ff; +$c-3b-cyan: #00ffff; +$c-3b-yellow: #ffff00; +$c-3b-magenta: #ff00ff; + +$c-3b7-black: #000000; +$c-3b7-white: #ffffff; +$c-3b7-green: #00ff00; +$c-3b7-blue: #0000ff; +$c-3b7-red: #ff0000; +$c-3b7-yellow: #ffff00; +$c-3b7-dkyellow: #ffa500; diff --git a/app/src/sass/_statusbar.scss b/app/src/sass/_statusbar.scss index d737334..2b0715b 100644 --- a/app/src/sass/_statusbar.scss +++ b/app/src/sass/_statusbar.scss @@ -1,5 +1,6 @@ @use "breakpoints" as *; @use "vars" as *; +@use "colors" as *; #statusbar { height: $statusbar_height; @@ -13,10 +14,58 @@ .statusbar-item { height: 100%; - img { + img, svg { display: inline-block; vertical-align: middle; height: 100%; + width: auto; + } + } +} + +svg { + // Default fill; suitable for B&W + path { + fill: black; + } +} + +.cs-3b, .cs-3b7 { + svg { + &.good { + path { + fill: $c-3b-green; + } + } + &.ok { + path { + fill: $c-3b-yellow; + } + } + &.bad { + path { + fill: $c-3b-red; + } + } + } +} + +.cs-16b, .cs-full { + svg { + &.good { + path { + fill: green; + } + } + &.ok { + path { + fill: #f6dd38; + } + } + &.bad { + path { + fill: red; + } } } } \ No newline at end of file diff --git a/app/src/sass/screen_base.scss b/app/src/sass/screen_base.scss index d2085ea..c4d6f0a 100644 --- a/app/src/sass/screen_base.scss +++ b/app/src/sass/screen_base.scss @@ -38,4 +38,8 @@ body { flex-grow: 1; max-height: calc(100% - $statusbar_height); } + + #js_colors { + display: none; + } } \ No newline at end of file diff --git a/app/static/css/screen_base.css b/app/static/css/screen_base.css index 40bf872..ff9a8c0 100644 --- a/app/static/css/screen_base.css +++ b/app/static/css/screen_base.css @@ -1 +1 @@ -.d-t-block,.d-xs-block,.d-s-block,.d-m-block,.d-l-block,.d-xl-block,.d-t-inline,.d-xs-inline,.d-s-inline,.d-m-inline,.d-l-inline,.d-xl-inline,.d-t-inline-block,.d-xs-inline-block,.d-s-inline-block,.d-m-inline-block,.d-l-inline-block,.d-xl-inline-block{display:none}@media(min-width: 240px){.d-t-none{display:none}.d-t-block{display:block}.d-t-inline{display:inline}.d-t-inline-block{display:inline-block}}@media(min-width: 320px){.d-xs-none{display:none}.d-xs-block{display:block}.d-xs-inline{display:inline}.d-xs-inline-block{display:inline-block}}@media(min-width: 480px){.d-s-none{display:none}.d-s-block{display:block}.d-s-inline{display:inline}.d-s-inline-block{display:inline-block}}@media(min-width: 600px){.d-m-none{display:none}.d-m-block{display:block}.d-m-inline{display:inline}.d-m-inline-block{display:inline-block}}@media(min-width: 800px){.d-l-none{display:none}.d-l-block{display:block}.d-l-inline{display:inline}.d-l-inline-block{display:inline-block}}@media(min-width: 1024px){.d-xl-none{display:none}.d-xl-block{display:block}.d-xl-inline{display:inline}.d-xl-inline-block{display:inline-block}}#statusbar{height:20px;font-size:15px;display:flex;flex-direction:row;justify-content:flex-start;gap:1em;border-top:1px solid #000}#statusbar .statusbar-item{height:100%}#statusbar .statusbar-item img{display:inline-block;vertical-align:middle;height:100%}html,body{border:0;margin:0;height:100%;width:100%;font-family:liberation_sansregular,Tahoma,sans-serif;letter-spacing:.9px}body:not(.ds-browser){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:none;font-smooth:never;text-rendering:geometricPrecision;shape-rendering:crispEdges;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:optimize-contrast;-ms-interpolation-mode:nearest-neighbor}body{display:flex;flex-direction:column}body #main{flex-grow:1;max-height:calc(100% - 20px)} +.d-t-block,.d-xs-block,.d-s-block,.d-m-block,.d-l-block,.d-xl-block,.d-t-inline,.d-xs-inline,.d-s-inline,.d-m-inline,.d-l-inline,.d-xl-inline,.d-t-inline-block,.d-xs-inline-block,.d-s-inline-block,.d-m-inline-block,.d-l-inline-block,.d-xl-inline-block{display:none}@media(min-width: 240px){.d-t-none{display:none}.d-t-block{display:block}.d-t-inline{display:inline}.d-t-inline-block{display:inline-block}}@media(min-width: 320px){.d-xs-none{display:none}.d-xs-block{display:block}.d-xs-inline{display:inline}.d-xs-inline-block{display:inline-block}}@media(min-width: 480px){.d-s-none{display:none}.d-s-block{display:block}.d-s-inline{display:inline}.d-s-inline-block{display:inline-block}}@media(min-width: 600px){.d-m-none{display:none}.d-m-block{display:block}.d-m-inline{display:inline}.d-m-inline-block{display:inline-block}}@media(min-width: 800px){.d-l-none{display:none}.d-l-block{display:block}.d-l-inline{display:inline}.d-l-inline-block{display:inline-block}}@media(min-width: 1024px){.d-xl-none{display:none}.d-xl-block{display:block}.d-xl-inline{display:inline}.d-xl-inline-block{display:inline-block}}#statusbar{height:20px;font-size:15px;display:flex;flex-direction:row;justify-content:flex-start;gap:1em;border-top:1px solid #000}#statusbar .statusbar-item{height:100%}#statusbar .statusbar-item img,#statusbar .statusbar-item svg{display:inline-block;vertical-align:middle;height:100%;width:auto}svg path{fill:#000}.cs-3b svg.good path,.cs-3b7 svg.good path{fill:lime}.cs-3b svg.ok path,.cs-3b7 svg.ok path{fill:#ff0}.cs-3b svg.bad path,.cs-3b7 svg.bad path{fill:red}.cs-16b svg.good path,.cs-full svg.good path{fill:green}.cs-16b svg.ok path,.cs-full svg.ok path{fill:#f6dd38}.cs-16b svg.bad path,.cs-full svg.bad path{fill:red}html,body{border:0;margin:0;height:100%;width:100%;font-family:liberation_sansregular,Tahoma,sans-serif;letter-spacing:.9px}body:not(.ds-browser){-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:none;font-smooth:never;text-rendering:geometricPrecision;shape-rendering:crispEdges;image-rendering:optimizeSpeed;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated;image-rendering:optimize-contrast;-ms-interpolation-mode:nearest-neighbor}body{display:flex;flex-direction:column}body #main{flex-grow:1;max-height:calc(100% - 20px)}body #js_colors{display:none} diff --git a/app/static/images/.DS_Store b/app/static/images/.DS_Store deleted file mode 100644 index 1157c6c..0000000 Binary files a/app/static/images/.DS_Store and /dev/null differ diff --git a/app/static/js/screen_helpers.js b/app/static/js/screen_helpers.js new file mode 100644 index 0000000..a4ada35 --- /dev/null +++ b/app/static/js/screen_helpers.js @@ -0,0 +1,28 @@ +document.querySelectorAll('img.inline-svg').forEach(el => { + fetch(el.src).then(r => { + r.text().then(c => { + const doc = (new DOMParser()).parseFromString(c, 'text/xml'); + const svg = doc.querySelector('svg'); + svg.id = el.id || svg.id + // svg.classList = el.classList || svg.classList; + el.classList.forEach(cl => svg.classList.add(cl)); + // need to remove "xmlns:a" attr? + // width/height are not useful + svg.setAttribute('width', ''); + svg.setAttribute('height', ''); + el.replaceWith(svg); + }); + }); +}); + +function js_color(selector, property, dfl) { + const el = document.querySelector('#js_colors ' + selector); + let out; + if (el) { + const s = getComputedStyle(el); + if (s && s.getPropertyValue('visibility') != 'hidden') { + out = s.getPropertyValue(property); + } + } + return out || dfl || 'black'; +} \ No newline at end of file diff --git a/app/templates/screen_templates/base.html.j2 b/app/templates/screen_templates/base.html.j2 index 218c106..d45331a 100644 --- a/app/templates/screen_templates/base.html.j2 +++ b/app/templates/screen_templates/base.html.j2 @@ -15,57 +15,57 @@
{% block statusbar %} -
- +
+ {{ now() |dt(no_markup=True) }}
{% if context.metrics.wifi %} -
+
{% if context.metrics.wifi.b == 0 %} - + Bad {% elif context.metrics.wifi.b == 1 %} - + Poor {% elif context.metrics.wifi.b == 2 %} - + OK {% elif context.metrics.wifi.b == 3 %} - + Good {% elif context.metrics.wifi.b == 4 %} - + Excellent {% else %} - + Off {% endif %} ({{ context.metrics.wifi.dbm }} dBm)
{% endif %} {% if context.metrics.battery %} -
+
{% if context.metrics.battery.charging %} - + [Charging] {% elif context.metrics.battery.percent >= 0.95 %} - + {% elif context.metrics.battery.percent >= 0.81 %} - + {% elif context.metrics.battery.percent >= 0.67 %} - + {% elif context.metrics.battery.percent >= 0.53 %} - + {% elif context.metrics.battery.percent >= 0.39 %} - + {% elif context.metrics.battery.percent >= 0.25 %} - + {% elif context.metrics.battery.percent >= 0.11 %} - + {% elif context.metrics.battery.percent >= 0.05 %} - + {% else %} - + {% endif %} {{ context.metrics.battery.percent |percent }} ({{ context.metrics.battery.voltage |fixed(d=2) }}v) @@ -73,6 +73,11 @@ {% endif %} {% endblock %}
- {% block scripts %}{% endblock %} +
+ {% block js_colors %}{% endblock %} +
+ {% block scripts %} + + {% endblock %} \ No newline at end of file