diff --git a/.vscode/launch.json b/.vscode/launch.json index 0697965..acd1201 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -4,18 +4,17 @@ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ - { "name": "Frontend", "request": "launch", - "type": "pwa-chrome", + "type": "chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/server", "skipFiles": [ "/**", "**/*.min.js", "**/vendor/**" - ] + ], }, { "name": "Data:stations", @@ -40,7 +39,10 @@ "compounds": [ { "name": "Compound", - "configurations": ["Frontend", "Server"] + "configurations": [ + "Frontend", + "Server" + ] } ] } \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index ebca767..88e7166 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,7 +4,7 @@ ], "liveSassCompile.settings.formats": [ { - "format": "expanded", + "format": "compressed", "extensionName": ".css", "savePath": "/server/styles", "savePathSegmentKeys": null, diff --git a/server/fonts/Star4000 Large-old.ttf b/server/fonts/Star4000 Large-old.ttf new file mode 100644 index 0000000..60400ec Binary files /dev/null and b/server/fonts/Star4000 Large-old.ttf differ diff --git a/server/fonts/Star4000 Large.ttf b/server/fonts/Star4000 Large.ttf index 60400ec..8bf3a4d 100644 Binary files a/server/fonts/Star4000 Large.ttf and b/server/fonts/Star4000 Large.ttf differ diff --git a/server/scripts/modules/progress.js b/server/scripts/modules/progress.js index 0c8dcb4..6abc5f0 100644 --- a/server/scripts/modules/progress.js +++ b/server/scripts/modules/progress.js @@ -1,11 +1,11 @@ // regional forecast and observations -/* globals WeatherDisplay, utils, STATUS, draw, navigation */ +/* globals WeatherDisplay, utils, STATUS, navigation */ // eslint-disable-next-line no-unused-vars class Progress extends WeatherDisplay { constructor(navId, elemId) { - super(navId, elemId); + super(navId, elemId, '', false, true); // pre-load background image (returns promise) this.backgroundImage = utils.image.load('images/BackGround1_1.png'); @@ -14,103 +14,91 @@ class Progress extends WeatherDisplay { this.timing = false; this.version = document.getElementById('version').innerHTML; + + // setup event listener + this.elem.querySelector('.container').addEventListener('click', this.lineClick.bind(this)); } async drawCanvas(displays, loadedCount) { super.drawCanvas(); - // set up an event listener - if (!this.eventListener) { - this.eventListener = true; - this.canvas.addEventListener('click', (e) => this.canvasClick(e), false); - } - // get the background image - const backgroundImage = await this.backgroundImage; - - // only draw the background once - if (!this.backgroundDrawn) { - this.context.drawImage(backgroundImage, 0, 0, 640, 480, 0, 0, 640, 480); - draw.horizontalGradientSingle(this.context, 0, 90, 52, 399, draw.sideColor1, draw.sideColor2); - draw.horizontalGradientSingle(this.context, 584, 90, 640, 399, draw.sideColor1, draw.sideColor2); - draw.horizontalGradientSingle(this.context, 0, 30, 500, 90, draw.topColor1, draw.topColor2); - draw.triangle(this.context, 'rgb(28, 10, 87)', 500, 30, 450, 90, 500, 90); - draw.titleText(this.context, 'WeatherStar', `4000+ ${this.version}`); - } - - this.finishDraw(); // if no displays provided just draw the backgrounds (above) if (!displays) return; - displays.forEach((display, idx) => { - const y = 120 + idx * 29; - const dots = Array(120 - Math.floor(display.name.length * 2.5)).join('.'); - draw.text(this.context, 'Star4000 Extended', '19pt', '#ffffff', 70, y, display.name + dots, 2); + const lines = displays.map((display, index) => { + const fill = {}; - let statusText; - let statusColor; + fill.name = display.name; + + let statusClass; switch (display.status) { case STATUS.loading: - statusText = 'Loading'; - statusColor = '#ffff00'; + statusClass = 'loading'; break; case STATUS.loaded: - statusText = 'Press Here'; - statusColor = '#00ff00'; - this.context.drawImage(backgroundImage, 440, y - 20, 75, 25, 440, y - 20, 75, 25); + statusClass = 'press-here'; break; case STATUS.failed: - statusText = 'Failed'; - statusColor = '#ff0000'; + statusClass = 'failed'; break; case STATUS.noData: - statusText = 'No Data'; - statusColor = '#C0C0C0'; - draw.box(this.context, 'rgb(33, 40, 90)', 475, y - 15, 75, 15); + statusClass = 'no-data'; break; case STATUS.disabled: - statusText = 'Disabled'; - statusColor = '#C0C0C0'; - this.context.drawImage(backgroundImage, 470, y - 20, 45, 25, 470, y - 20, 45, 25); + statusClass = 'disabled'; break; default: } - // Erase any dots that spill into the status text. - this.context.drawImage(backgroundImage, 475, y - 20, 165, 30, 475, y - 20, 165, 30); - draw.text(this.context, 'Star4000 Extended', '19pt', statusColor, 565, y, statusText, 2, 'end'); - }); + + // make the line + const line = this.fillTemplate('item', fill); + // because of timing, this might get called before the template is loaded + if (!line) return false; + + // update the status + const links = line.querySelector('.links'); + links.classList.remove('loading'); + links.classList.add(statusClass); + links.dataset.index = index; + return line; + }).filter((d) => d); + + // get the container and update + const container = this.elem.querySelector('.container'); + container.innerHTML = ''; + container.append(...lines); + + this.finishDraw(); // calculate loaded percent const loadedPercent = (loadedCount / displays.length); if (loadedPercent < 1.0) { // Draw a box for the progress. - draw.box(this.context, '#000000', 51, 428, 534, 22); - draw.box(this.context, '#ffffff', 53, 430, 530, 18); - // update the progress gif - draw.box(this.context, '#1d7fff', 55, 432, 526 * loadedPercent, 14); + } else { // restore the background - this.context.drawImage(backgroundImage, 51, 428, 534, 22, 51, 428, 534, 22); + } } - canvasClick(e) { - // un-scale - const scale = e.target.getBoundingClientRect().width / e.target.width; - const x = e.offsetX / scale; - const y = e.offsetY / scale; - // eliminate off canvas and outside area clicks - if (!this.isActive()) return; - if (y < 100 || y > 410) return; - if (x < 440 || x > 570) return; + lineClick(e) { + // get index + const indexRaw = e.target?.parentNode?.dataset?.index; + if (indexRaw === undefined) return; + const index = +indexRaw; // stop playing navigation.message('navButton'); // use the y value to determine an index - const index = Math.floor((y - 100) / 29); const display = navigation.getDisplay(index); if (display && display.status === STATUS.loaded) { display.showCanvas(navigation.msg.command.firstFrame); - this.hideCanvas(); + if (this.canvas) { + this.canvas.style.display = 'none'; + } + if (this.isHtml) { + this.elem.classList.remove('show'); + } } } } diff --git a/server/styles/compiled.css b/server/styles/compiled.css deleted file mode 100644 index ce6effb..0000000 --- a/server/styles/compiled.css +++ /dev/null @@ -1,441 +0,0 @@ -.weather-display { - width: 640px; - height: 480px; - overflow: hidden; - position: relative; - background-image: url(../images/BackGround1_1.png); - /* this method is required to hide blocks so they can be measured while off screen */ - height: 0px; -} -.weather-display.show { - height: 480px; -} -.weather-display .template { - display: none; -} -.weather-display .header { - width: 640px; - height: 60px; - padding-top: 30px; -} -.weather-display .header .title { - color: yellow; - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; - font-family: "Star4000"; - font-size: 24pt; - position: absolute; - width: 250px; -} -.weather-display .header .title.single { - left: 170px; - top: 25px; -} -.weather-display .header .title.dual { - left: 170px; -} -.weather-display .header .title.dual > div { - position: absolute; -} -.weather-display .header .title.dual .top { - top: -3px; -} -.weather-display .header .title.dual .bottom { - top: 26px; -} -.weather-display .header .logo { - top: 30px; - left: 50px; - position: absolute; - z-index: 10; -} -.weather-display .header .noaa-logo { - position: absolute; - top: 39px; - left: 356px; -} -.weather-display .header .title.single { - top: 40px; -} -.weather-display .header .date-time { - white-space: pre; - color: white; - font-family: "Star4000 Small"; - font-size: 24pt; - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; - left: 415px; - width: 170px; - text-align: right; - position: absolute; -} -.weather-display .header .date-time.date { - padding-top: 22px; -} -.weather-display .main { - position: relative; -} -.weather-display .main.has-scroll { - width: 640px; - height: 310px; - overflow: hidden; -} -.weather-display .main.has-box { - margin-left: 64px; - margin-right: 64px; - width: calc(100% - 128px); -} -.weather-display .scroll { - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; - width: 640px; - height: 80px; - overflow: hidden; - margin-top: 10px; -} -.weather-display .scroll .fixed { - font-family: "Star4000"; - font-size: 24pt; - margin-left: 55px; -} - -.weather-display .main.hourly.main { - overflow-y: hidden; -} -.weather-display .main.hourly.main .column-headers { - background-color: rgb(32, 0, 87); - height: 20px; - position: absolute; - width: 100%; -} -.weather-display .main.hourly.main .column-headers { - position: -webkit-sticky; - position: sticky; - top: 0px; - z-index: 5; -} -.weather-display .main.hourly.main .column-headers div { - display: inline-block; - font-family: "Star4000 Small"; - font-size: 24pt; - color: yellow; - position: absolute; - top: -14px; - z-index: 5; - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; -} -.weather-display .main.hourly.main .column-headers .temp { - left: 355px; -} -.weather-display .main.hourly.main .column-headers .like { - left: 435px; -} -.weather-display .main.hourly.main .column-headers .wind { - left: 535px; -} -.weather-display .main.hourly.main .hourly-lines { - min-height: 338px; - padding-top: 10px; - background: repeating-linear-gradient(0deg, #001040 0px, #102080 136px, #102080 202px, #001040 338px); -} -.weather-display .main.hourly.main .hourly-lines .hourly-row { - font-family: "Star4000 Large"; - font-size: 24pt; - height: 72px; - color: yellow; - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; - position: relative; -} -.weather-display .main.hourly.main .hourly-lines .hourly-row > div { - position: absolute; - white-space: pre; - top: 8px; -} -.weather-display .main.hourly.main .hourly-lines .hourly-row .hour { - left: 25px; -} -.weather-display .main.hourly.main .hourly-lines .hourly-row .icon { - left: 255px; - width: 70px; - text-align: center; - top: unset; -} -.weather-display .main.hourly.main .hourly-lines .hourly-row .temp { - left: 355px; -} -.weather-display .main.hourly.main .hourly-lines .hourly-row .like { - left: 425px; -} -.weather-display .main.hourly.main .hourly-lines .hourly-row .wind { - left: 505px; - width: 100px; - text-align: right; -} - -.weather-display .main.current-weather.main .col { - height: 50px; - width: 255px; - display: inline-block; - margin-top: 10px; - position: absolute; - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; -} -.weather-display .main.current-weather.main .col.left { - font-family: "Star4000 Extended"; - font-size: 24pt; -} -.weather-display .main.current-weather.main .col.right { - right: 0px; - font-family: "Star4000 Large"; - font-size: 20px; - font-weight: bold; -} -.weather-display .main.current-weather.main .col.right .row { - margin-bottom: 12px; -} -.weather-display .main.current-weather.main .col.right .row .label, -.weather-display .main.current-weather.main .col.right .row .value { - display: inline-block; -} -.weather-display .main.current-weather.main .col.right .row .label { - margin-left: 20px; -} -.weather-display .main.current-weather.main .col.right .row .value { - float: right; - margin-right: 10px; -} -.weather-display .main.current-weather.main .center { - text-align: center; -} -.weather-display .main.current-weather.main .temp { - font-family: "Star4000 Large"; - font-size: 24pt; -} -.weather-display .main.current-weather.main .icon { - height: 100px; -} -.weather-display .main.current-weather.main .icon img { - max-width: 126px; -} -.weather-display .main.current-weather.main .wind-container { - margin-bottom: 10px; -} -.weather-display .main.current-weather.main .wind-container > div { - width: 45%; - display: inline-block; - margin: 0px; -} -.weather-display .main.current-weather.main .wind-container .wind-label { - margin-left: 5px; -} -.weather-display .main.current-weather.main .wind-container .wind { - text-align: right; -} -.weather-display .main.current-weather.main .wind-gusts { - margin-left: 5px; -} -.weather-display .main.current-weather.main .location { - color: yellow; - margin-bottom: 10px; -} - -.weather-display .local-forecast .container { - position: relative; - top: 15px; - margin: 0px 10px; - box-sizing: border-box; - height: 280px; - overflow: hidden; -} -.weather-display .local-forecast .forecasts { - position: relative; -} -.weather-display .local-forecast .forecast { - font-family: "Star4000"; - font-size: 24pt; - text-transform: uppercase; - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; - min-height: 280px; - line-height: 40px; -} - -.weather-display .latest-observations.main { - overflow-y: hidden; -} -.weather-display .latest-observations.main .column-headers { - height: 20px; - position: absolute; - width: 100%; -} -.weather-display .latest-observations.main .column-headers { - top: 0px; -} -.weather-display .latest-observations.main .column-headers div { - display: inline-block; - font-family: "Star4000 Small"; - font-size: 24pt; - position: absolute; - top: -14px; - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; -} -.weather-display .latest-observations.main .column-headers .temp { - display: none; -} -.weather-display .latest-observations.main .column-headers .temp.show { - display: inline-block; -} -.weather-display .latest-observations.main .temp { - left: 230px; -} -.weather-display .latest-observations.main .weather { - left: 280px; -} -.weather-display .latest-observations.main .wind { - left: 430px; -} -.weather-display .latest-observations.main .observation-lines { - min-height: 338px; - padding-top: 10px; -} -.weather-display .latest-observations.main .observation-lines .observation-row { - font-family: "Star4000"; - font-size: 24pt; - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; - position: relative; - height: 40px; -} -.weather-display .latest-observations.main .observation-lines .observation-row > div { - position: absolute; - top: 8px; -} -.weather-display .latest-observations.main .observation-lines .observation-row .wind { - white-space: pre; - text-align: right; -} - -#regional-forecast-html.weather-display { - background-image: url("../images/BackGround5_1.png"); -} - -.weather-display .main.regional-forecast { - position: relative; -} -.weather-display .main.regional-forecast .map { - position: absolute; -} -.weather-display .main.regional-forecast .location { - position: absolute; - width: 140px; - margin-left: -40px; - margin-top: -35px; -} -.weather-display .main.regional-forecast .location > div { - position: absolute; - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; -} -.weather-display .main.regional-forecast .location .icon { - top: 26px; - left: 44px; -} -.weather-display .main.regional-forecast .location .icon img { - max-height: 32px; -} -.weather-display .main.regional-forecast .location .temp { - font-family: "Star4000 Large Compressed"; - font-size: 28px; - color: yellow; - top: 32px; - text-align: right; - width: 40px; -} -.weather-display .main.regional-forecast .location .city { - font-family: Star4000; - font-size: 20px; -} - -#extended-forecast-html.weather-display { - background-image: url("../images/BackGround2_1.png"); -} - -.weather-display .main.extended-forecast .day-container { - margin-top: 16px; - margin-left: 27px; -} -.weather-display .main.extended-forecast .day { - /* eventually, when chrome supports paint-order for html elements */ - /* -webkit-text-stroke: 2px black; */ - /* paint-order: stroke fill; */ - text-shadow: 3px 3px 0 black, -1.5px -1.5px 0 black, 0 -1.5px 0 black, 1.5px -1.5px 0 black, 1.5px 0 0 black, 1.5px 1.5px 0 black, 0 1.5px 0 black, -1.5px 1.5px 0 black, -1.5px 0 0 black; - padding: 5px; - height: 285px; - width: 155px; - display: inline-block; - margin: 0px 15px; - font-family: "Star4000"; - font-size: 24pt; -} -.weather-display .main.extended-forecast .day .date { - text-transform: uppercase; - text-align: center; - color: yellow; -} -.weather-display .main.extended-forecast .day .condition { - text-align: center; - height: 74px; - margin-top: 10px; -} -.weather-display .main.extended-forecast .day .icon { - text-align: center; - height: 75px; -} -.weather-display .main.extended-forecast .day .icon img { - max-height: 75px; -} -.weather-display .main.extended-forecast .day .temperatures { - width: 100%; - margin-top: 5px; -} -.weather-display .main.extended-forecast .day .temperatures .temperature-block { - display: inline-block; - width: 44%; -} -.weather-display .main.extended-forecast .day .temperatures .temperature-block > div { - text-align: center; -} -.weather-display .main.extended-forecast .day .temperatures .temperature-block .value { - font-family: "Star4000 Large"; - margin-top: 4px; -} -.weather-display .main.extended-forecast .day .temperatures .temperature-block.lo .label { - color: #8080FF; -} -.weather-display .main.extended-forecast .day .temperatures .temperature-block.hi .label { - color: yellow; -}/*# sourceMappingURL=compiled.css.map */ \ No newline at end of file diff --git a/server/styles/compiled.css.map b/server/styles/compiled.css.map deleted file mode 100644 index e15e900..0000000 --- a/server/styles/compiled.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sources":["scss/_weatherdisplay.scss","compiled.css","scss/_colors.scss","scss/_utils.scss","scss/_hourly.scss","scss/_current-weather.scss","scss/_local-forecast.scss","scss/_latest-observations.scss","scss/_regional-forecast.scss","scss/_extended-forecast.scss"],"names":[],"mappings":"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","file":"compiled.css"} \ No newline at end of file diff --git a/server/styles/index.css b/server/styles/index.css deleted file mode 100644 index 4cae269..0000000 --- a/server/styles/index.css +++ /dev/null @@ -1,364 +0,0 @@ -@font-face -{ - font-family: "Star4000"; - src: url('../fonts/Star4000.woff') format('woff'); -} -body -{ - font-family: "Star4000"; -} - -input, button -{ - font-family: "Star4000"; -} - -#imgGetGps -{ - height: 13px; - vertical-align: middle; -} - -#txtAddress -{ - width: 490px; - font-size: 16pt; -} - -#btnGetGps, #btnGetLatLng, #btnClearQuery -{ - font-size: 16pt; -} - -.autocomplete-suggestions -{ - background-color: #ffffff; - border: 1px solid #000000; - /*overflow: auto;*/ -} -.autocomplete-suggestion -{ - /*padding: 2px 5px;*/ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-size: 16pt; -} -.autocomplete-selected -{ - background-color: #0000ff; - color: #ffffff; -} -#divTwc -{ - display: block; - background-color: #000000; - color: #ffffff; - width: 100%; - max-width: 640px; -} - -#divTwcLeft -{ - display: none; - text-align: right; - flex-direction: column; - vertical-align: middle; -} -#divTwcLeft > div -{ - flex: 1; - padding-right: 12px; - display: flex; - flex-direction: column; - justify-content: center; -} - -#divTwcRight -{ - text-align: left; - display: none; - flex-direction: column; - vertical-align: middle; -} -#divTwcRight > div -{ - flex: 1; - padding-left: 12px; - display: flex; - flex-direction: column; - justify-content: center; -} - -#divTwcBottom -{ - /* visibility: hidden; */ - display: flex; - flex-direction: row; - background-color: #000000; - color: #ffffff; - width: 100%; -} -#divTwcBottom > div -{ - padding-left: 6px; - padding-right: 6px; -} -#divTwcBottomLeft -{ - flex: 1; - text-align: left; -} -#divTwcBottomMiddle -{ - flex: 0; - text-align: center; -} -#divTwcBottomRight -{ - flex: 1; - text-align: right; -} - -#divTwcNavContainer -{ - display: none; -} - -#divTwcNav -{ - width: 100%; - display: flex; - flex-direction: row; - background-color: #000000; - color: #ffffff; - max-width: 640px; -} -#divTwcNav > div -{ - padding-left: 6px; - padding-right: 6px; -} -#divTwcNavLeft -{ - flex: 1; - text-align: left; -} -#divTwcNavMiddle -{ - flex: 0; - text-align: center; -} -#divTwcNavRight -{ - flex: 1; - text-align: right; -} - -#imgPause1x, #imgPause2x -{ - visibility: hidden; - position: absolute; -} - -.HideCursor -{ - cursor: none !important; -} - -#txtScrollText -{ - width: 475px; -} - -@font-face -{ - font-family: "Star4000"; - src: url('../fonts/Star4000.woff') format('woff'); -} -@font-face -{ - font-family: "Star 4 Radar"; - src: url('../fonts/Star 4 Radar.woff') format('woff'); -} -@font-face -{ - font-family: 'Star4000 Extended'; - src: url('../fonts/Star4000 Extended.woff') format('woff'); -} -@font-face -{ - font-family: 'Star4000LCN'; - src: url('../fonts/Star4000LCN.woff') format('woff'); -} -@font-face - { - font-family: 'Star4000 Large Compressed'; - src: url('../fonts/Star4000 Large Compressed.woff') format('woff'); -} -@font-face -{ - font-family: 'Star4000 Large'; - src: url('../fonts/Star4000 Large.woff') format('woff'); -} -@font-face - { - font-family: 'Star4000 Small'; - src: url('../fonts/Star4000 Small.woff') format('woff'); -} - -#display -{ - font-family: "Star4000"; - margin: 0 0 0 0; - /* overflow: hidden; */ - width: 100%; - /* height: 480px; */ - /* max-width: 640px; */ -} - -jsgif -{ - display: none; -} - -#Star4000 -{ - font-family: 'Star4000'; -} -#Star4000Extended -{ - font-family: 'Star4000 Extended'; -} -#Star4000LargeCompressed -{ - font-family: 'Star4000 Large Compressed'; -} -#Star4000Large -{ - font-family: 'Star4000 Large'; -} -#Star4000LargeCompressedNumbers -{ - font-family: 'Star4000LCN'; -} -#Star4000Small -{ - font-family: 'Star4000 Small'; -} -#Star4Radar -{ - font-family: 'Star 4 Radar'; -} - -#container { - position: relative; - width: 100%; - /* max-width: 640px; */ - height: 100%; - max-height: 480; - background-image: url(../images/BackGround1_1.png); -} -#divTwc:fullscreen #container { - background-image: none; -} -#loading { - width: 640px; - height: 480px; - max-width: 100%; - text-shadow: 4px 4px black; - display: flex; - align-items: center; - text-align: center; - justify-content: center; -} -#loading .title { - font-family: Star4000 Large; - font-size: 36px; - color: yellow; - margin-bottom: 40px; -} -#loading .instructions {font-size: 18pt;} -#container canvas { - /* position: absolute; */ - width: 100%; - /* max-width: 640px; */ -} -.heading { - font-weight: bold; - margin-top: 15px; -} -#enabledDisplays { - margin-bottom: 15px; -} -#enabledDisplays label { - display: block; - max-width: 300px; -} -#divTwcBottom img { - zoom: 150%; -} -#divTwc:fullscreen { - display:flex; - align-items: center; - justify-content: center; - align-content: center; -} - -#divTwc:fullscreen #display { - - position: relative; -} -#divTwc:fullscreen #divTwcBottom { - display: flex; - flex-direction: row; - background-color: rgb(0 0 0 / 0.5); - color: #ffffff; - width: 100%; - position: absolute; - bottom: 0px; -} - -@media screen and (orientation: portrait) { - #divTwc:fullscreen canvas { - width: 100vw; - max-width: 100vw; - height: auto; - } - #divTwc:fullscreen #container { - width: 100vw; - height: auto; - max-height: unset; - max-width: unset; - } -} - -@media screen and (orientation: landscape) { - #divTwc:fullscreen canvas { - height: 100vh; - max-height: 100vh; - width: auto; - } - #divTwc:fullscreen #container { - height: 100vh; - width: auto; - max-width: 100vw; - max-height: unset; - } -} - -.navButton { - cursor: pointer; -} - -.visible { - visibility: visible; - opacity: 1; - transition: opacity 1s linear; -} - -.hidden { - visibility: hidden; - opacity: 0; - transition: visibility 0s 1s, opacity 1s linear -} \ No newline at end of file diff --git a/server/styles/main.css b/server/styles/main.css new file mode 100644 index 0000000..6e8984a --- /dev/null +++ b/server/styles/main.css @@ -0,0 +1 @@ +@font-face{font-family:"Star4000";src:url("../fonts/Star4000.woff") format("woff")}body{font-family:"Star4000"}input,button{font-family:"Star4000"}#imgGetGps{height:13px;vertical-align:middle}#txtAddress{width:490px;font-size:16pt}#btnGetGps,#btnGetLatLng,#btnClearQuery{font-size:16pt}.autocomplete-suggestions{background-color:#fff;border:1px solid #000}.autocomplete-suggestion{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:16pt}.autocomplete-selected{background-color:blue;color:#fff}#divTwc{display:block;background-color:#000;color:#fff;width:100%;max-width:640px}#divTwcLeft{display:none;text-align:right;flex-direction:column;vertical-align:middle}#divTwcLeft>div{flex:1;padding-right:12px;display:flex;flex-direction:column;justify-content:center}#divTwcRight{text-align:left;display:none;flex-direction:column;vertical-align:middle}#divTwcRight>div{flex:1;padding-left:12px;display:flex;flex-direction:column;justify-content:center}#divTwcBottom{display:flex;flex-direction:row;background-color:#000;color:#fff;width:100%}#divTwcBottom>div{padding-left:6px;padding-right:6px}#divTwcBottomLeft{flex:1;text-align:left}#divTwcBottomMiddle{flex:0;text-align:center}#divTwcBottomRight{flex:1;text-align:right}#divTwcNavContainer{display:none}#divTwcNav{width:100%;display:flex;flex-direction:row;background-color:#000;color:#fff;max-width:640px}#divTwcNav>div{padding-left:6px;padding-right:6px}#divTwcNavLeft{flex:1;text-align:left}#divTwcNavMiddle{flex:0;text-align:center}#divTwcNavRight{flex:1;text-align:right}#imgPause1x,#imgPause2x{visibility:hidden;position:absolute}.HideCursor{cursor:none !important}#txtScrollText{width:475px}@font-face{font-family:"Star4000";src:url("../fonts/Star4000.woff") format("woff")}@font-face{font-family:"Star 4 Radar";src:url("../fonts/Star 4 Radar.woff") format("woff")}@font-face{font-family:"Star4000 Extended";src:url("../fonts/Star4000 Extended.woff") format("woff")}@font-face{font-family:"Star4000LCN";src:url("../fonts/Star4000LCN.woff") format("woff")}@font-face{font-family:"Star4000 Large Compressed";src:url("../fonts/Star4000 Large Compressed.woff") format("woff")}@font-face{font-family:"Star4000 Large";src:url("../fonts/Star4000 Large.ttf") format("truetype")}@font-face{font-family:"Star4000 Small";src:url("../fonts/Star4000 Small.woff") format("woff")}#display{font-family:"Star4000";margin:0 0 0 0;width:100%}jsgif{display:none}#Star4000{font-family:"Star4000"}#Star4000Extended{font-family:"Star4000 Extended"}#Star4000LargeCompressed{font-family:"Star4000 Large Compressed"}#Star4000Large{font-family:"Star4000 Large"}#Star4000LargeCompressedNumbers{font-family:"Star4000LCN"}#Star4000Small{font-family:"Star4000 Small"}#Star4Radar{font-family:"Star 4 Radar"}#container{position:relative;width:100%;height:100%;max-height:480;background-image:url(../images/BackGround1_1.png)}#divTwc:-webkit-full-screen #container{background-image:none}#divTwc:-ms-fullscreen #container{background-image:none}#divTwc:fullscreen #container{background-image:none}#loading{width:640px;height:480px;max-width:100%;text-shadow:4px 4px #000;display:flex;align-items:center;text-align:center;justify-content:center}#loading .title{font-family:Star4000 Large;font-size:36px;color:#ff0;margin-bottom:40px}#loading .instructions{font-size:18pt}#container canvas{width:100%}.heading{font-weight:bold;margin-top:15px}#enabledDisplays{margin-bottom:15px}#enabledDisplays label{display:block;max-width:300px}#divTwcBottom img{zoom:150%}#divTwc:-webkit-full-screen{display:flex;align-items:center;justify-content:center;align-content:center}#divTwc:-ms-fullscreen{display:flex;align-items:center;justify-content:center;align-content:center}#divTwc:fullscreen{display:flex;align-items:center;justify-content:center;align-content:center}#divTwc:-webkit-full-screen #display{position:relative}#divTwc:-ms-fullscreen #display{position:relative}#divTwc:fullscreen #display{position:relative}#divTwc:-webkit-full-screen #divTwcBottom{display:flex;flex-direction:row;background-color:rgba(0,0,0,.5);color:#fff;width:100%;position:absolute;bottom:0px}#divTwc:-ms-fullscreen #divTwcBottom{display:flex;flex-direction:row;background-color:rgba(0,0,0,.5);color:#fff;width:100%;position:absolute;bottom:0px}#divTwc:fullscreen #divTwcBottom{display:flex;flex-direction:row;background-color:rgba(0,0,0,.5);color:#fff;width:100%;position:absolute;bottom:0px}@media screen and (orientation: portrait){#divTwc:-webkit-full-screen canvas{width:100vw;max-width:100vw;height:auto}#divTwc:-ms-fullscreen canvas{width:100vw;max-width:100vw;height:auto}#divTwc:fullscreen canvas{width:100vw;max-width:100vw;height:auto}#divTwc:-webkit-full-screen #container{width:100vw;height:auto;max-height:unset;max-width:unset}#divTwc:-ms-fullscreen #container{width:100vw;height:auto;max-height:unset;max-width:unset}#divTwc:fullscreen #container{width:100vw;height:auto;max-height:unset;max-width:unset}}@media screen and (orientation: landscape){#divTwc:-webkit-full-screen canvas{height:100vh;max-height:100vh;width:auto}#divTwc:-ms-fullscreen canvas{height:100vh;max-height:100vh;width:auto}#divTwc:fullscreen canvas{height:100vh;max-height:100vh;width:auto}#divTwc:-webkit-full-screen #container{height:100vh;width:auto;max-width:100vw;max-height:unset}#divTwc:-ms-fullscreen #container{height:100vh;width:auto;max-width:100vw;max-height:unset}#divTwc:fullscreen #container{height:100vh;width:auto;max-width:100vw;max-height:unset}}.navButton{cursor:pointer}.visible{visibility:visible;opacity:1;transition:opacity 1s linear}.hidden{visibility:hidden;opacity:0;transition:visibility 0s 1s,opacity 1s linear}.weather-display .main.current-weather.main .col{height:50px;width:255px;display:inline-block;margin-top:10px;position:absolute;text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000}.weather-display .main.current-weather.main .col.left{font-family:"Star4000 Extended";font-size:24pt}.weather-display .main.current-weather.main .col.right{right:0px;font-family:"Star4000 Large";font-size:20px;font-weight:bold}.weather-display .main.current-weather.main .col.right .row{margin-bottom:12px}.weather-display .main.current-weather.main .col.right .row .label,.weather-display .main.current-weather.main .col.right .row .value{display:inline-block}.weather-display .main.current-weather.main .col.right .row .label{margin-left:20px}.weather-display .main.current-weather.main .col.right .row .value{float:right;margin-right:10px}.weather-display .main.current-weather.main .center{text-align:center}.weather-display .main.current-weather.main .temp{font-family:"Star4000 Large";font-size:24pt}.weather-display .main.current-weather.main .icon{height:100px}.weather-display .main.current-weather.main .icon img{max-width:126px}.weather-display .main.current-weather.main .wind-container{margin-bottom:10px}.weather-display .main.current-weather.main .wind-container>div{width:45%;display:inline-block;margin:0px}.weather-display .main.current-weather.main .wind-container .wind-label{margin-left:5px}.weather-display .main.current-weather.main .wind-container .wind{text-align:right}.weather-display .main.current-weather.main .wind-gusts{margin-left:5px}.weather-display .main.current-weather.main .location{color:#ff0;margin-bottom:10px}#extended-forecast-html.weather-display{background-image:url("../images/BackGround2_1.png")}.weather-display .main.extended-forecast .day-container{margin-top:16px;margin-left:27px}.weather-display .main.extended-forecast .day{text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000;padding:5px;height:285px;width:155px;display:inline-block;margin:0px 15px;font-family:"Star4000";font-size:24pt}.weather-display .main.extended-forecast .day .date{text-transform:uppercase;text-align:center;color:#ff0}.weather-display .main.extended-forecast .day .condition{text-align:center;height:74px;margin-top:10px}.weather-display .main.extended-forecast .day .icon{text-align:center;height:75px}.weather-display .main.extended-forecast .day .icon img{max-height:75px}.weather-display .main.extended-forecast .day .temperatures{width:100%;margin-top:5px}.weather-display .main.extended-forecast .day .temperatures .temperature-block{display:inline-block;width:44%;vertical-align:top}.weather-display .main.extended-forecast .day .temperatures .temperature-block>div{text-align:center}.weather-display .main.extended-forecast .day .temperatures .temperature-block .value{font-family:"Star4000 Large";margin-top:4px}.weather-display .main.extended-forecast .day .temperatures .temperature-block.lo .label{color:#8080ff}.weather-display .main.extended-forecast .day .temperatures .temperature-block.hi .label{color:#ff0}.weather-display .main.hourly.main{overflow-y:hidden}.weather-display .main.hourly.main .column-headers{background-color:#200057;height:20px;position:absolute;width:100%}.weather-display .main.hourly.main .column-headers{position:-webkit-sticky;position:sticky;top:0px;z-index:5}.weather-display .main.hourly.main .column-headers div{display:inline-block;font-family:"Star4000 Small";font-size:24pt;color:#ff0;position:absolute;top:-14px;z-index:5;text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000}.weather-display .main.hourly.main .column-headers .temp{left:355px}.weather-display .main.hourly.main .column-headers .like{left:435px}.weather-display .main.hourly.main .column-headers .wind{left:535px}.weather-display .main.hourly.main .hourly-lines{min-height:338px;padding-top:10px;background:repeating-linear-gradient(0deg, #001040 0px, #102080 136px, #102080 202px, #001040 338px)}.weather-display .main.hourly.main .hourly-lines .hourly-row{font-family:"Star4000 Large";font-size:24pt;height:72px;color:#ff0;text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000;position:relative}.weather-display .main.hourly.main .hourly-lines .hourly-row>div{position:absolute;white-space:pre;top:8px}.weather-display .main.hourly.main .hourly-lines .hourly-row .hour{left:25px}.weather-display .main.hourly.main .hourly-lines .hourly-row .icon{left:255px;width:70px;text-align:center;top:unset}.weather-display .main.hourly.main .hourly-lines .hourly-row .temp{left:355px}.weather-display .main.hourly.main .hourly-lines .hourly-row .like{left:425px}.weather-display .main.hourly.main .hourly-lines .hourly-row .wind{left:505px;width:100px;text-align:right}.weather-display .latest-observations.main{overflow-y:hidden}.weather-display .latest-observations.main .column-headers{height:20px;position:absolute;width:100%}.weather-display .latest-observations.main .column-headers{top:0px}.weather-display .latest-observations.main .column-headers div{display:inline-block;font-family:"Star4000 Small";font-size:24pt;position:absolute;top:-14px;text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000}.weather-display .latest-observations.main .column-headers .temp{display:none}.weather-display .latest-observations.main .column-headers .temp.show{display:inline-block}.weather-display .latest-observations.main .temp{left:230px}.weather-display .latest-observations.main .weather{left:280px}.weather-display .latest-observations.main .wind{left:430px}.weather-display .latest-observations.main .observation-lines{min-height:338px;padding-top:10px}.weather-display .latest-observations.main .observation-lines .observation-row{font-family:"Star4000";font-size:24pt;text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000;position:relative;height:40px}.weather-display .latest-observations.main .observation-lines .observation-row>div{position:absolute;top:8px}.weather-display .latest-observations.main .observation-lines .observation-row .wind{white-space:pre;text-align:right}.weather-display .local-forecast .container{position:relative;top:15px;margin:0px 10px;box-sizing:border-box;height:280px;overflow:hidden}.weather-display .local-forecast .forecasts{position:relative}.weather-display .local-forecast .forecast{font-family:"Star4000";font-size:24pt;text-transform:uppercase;text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000;min-height:280px;line-height:40px}.weather-display .progress{text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000;font-family:"Star4000 Extended";font-size:19pt}.weather-display .progress .container{position:relative;top:15px;margin:0px 10px;box-sizing:border-box;height:280px;overflow:hidden}.weather-display .progress .container .item{position:relative}.weather-display .progress .container .item .name{white-space:nowrap}.weather-display .progress .container .item .name::after{content:"........................................................................"}.weather-display .progress .container .item .links{position:absolute;text-align:right;right:0px;top:0px}.weather-display .progress .container .item .links>div{background-color:#26235a;display:none;padding-left:4px}.weather-display .progress .container .item .links .loading{color:#ff0}.weather-display .progress .container .item .links .press-here{color:lime;cursor:pointer}.weather-display .progress .container .item .links .failed{color:red}.weather-display .progress .container .item .links .no-data{color:silver}.weather-display .progress .container .item .links .disabled{color:silver}.weather-display .progress .container .item .links.loading .loading{display:block}.weather-display .progress .container .item .links.press-here .press-here{display:block}.weather-display .progress .container .item .links.failed .failed{display:block}.weather-display .progress .container .item .links.no-data .no-data{display:block}.weather-display .progress .container .item .links.disabled .disabled{display:block}#regional-forecast-html.weather-display{background-image:url("../images/BackGround5_1.png")}.weather-display .main.regional-forecast{position:relative}.weather-display .main.regional-forecast .map{position:absolute}.weather-display .main.regional-forecast .location{position:absolute;width:140px;margin-left:-40px;margin-top:-35px}.weather-display .main.regional-forecast .location>div{position:absolute;text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000}.weather-display .main.regional-forecast .location .icon{top:26px;left:44px}.weather-display .main.regional-forecast .location .icon img{max-height:32px}.weather-display .main.regional-forecast .location .temp{font-family:"Star4000 Large";font-size:28px;color:#ff0;top:28px;text-align:right;width:40px}.weather-display .main.regional-forecast .location .city{font-family:Star4000;font-size:20px}.weather-display{width:640px;height:480px;overflow:hidden;position:relative;background-image:url(../images/BackGround1_1.png);height:0px}.weather-display.show{height:480px}.weather-display .template{display:none}.weather-display .header{width:640px;height:60px;padding-top:30px}.weather-display .header .title{color:#ff0;text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000;font-family:"Star4000";font-size:24pt;position:absolute;width:250px}.weather-display .header .title.single{left:170px;top:25px}.weather-display .header .title.dual{left:170px}.weather-display .header .title.dual>div{position:absolute}.weather-display .header .title.dual .top{top:-3px}.weather-display .header .title.dual .bottom{top:26px}.weather-display .header .logo{top:30px;left:50px;position:absolute;z-index:10}.weather-display .header .noaa-logo{position:absolute;top:39px;left:356px}.weather-display .header .title.single{top:40px}.weather-display .header .date-time{white-space:pre;color:#fff;font-family:"Star4000 Small";font-size:24pt;text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000;left:415px;width:170px;text-align:right;position:absolute}.weather-display .header .date-time.date{padding-top:22px}.weather-display .main{position:relative}.weather-display .main.has-scroll{width:640px;height:310px;overflow:hidden}.weather-display .main.has-box{margin-left:64px;margin-right:64px;width:calc(100% - 128px)}.weather-display .scroll{text-shadow:3px 3px 0 #000,-1.5px -1.5px 0 #000,0 -1.5px 0 #000,1.5px -1.5px 0 #000,1.5px 0 0 #000,1.5px 1.5px 0 #000,0 1.5px 0 #000,-1.5px 1.5px 0 #000,-1.5px 0 0 #000;width:640px;height:80px;overflow:hidden;margin-top:10px}.weather-display .scroll .fixed{font-family:"Star4000";font-size:24pt;margin-left:55px}/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/server/styles/main.css.map b/server/styles/main.css.map new file mode 100644 index 0000000..ffb22ff --- /dev/null +++ b/server/styles/main.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["scss/_page.scss","scss/_current-weather.scss","scss/shared/_utils.scss","scss/shared/_colors.scss","scss/_extended-forecast.scss","scss/_hourly.scss","scss/_latest-observations.scss","scss/_local-forecast.scss","scss/_progress.scss","scss/_regional-forecast.scss","scss/_weather-display.scss"],"names":[],"mappings":"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","file":"main.css"} \ No newline at end of file diff --git a/server/styles/scss/_current-weather.scss b/server/styles/scss/_current-weather.scss index a0cd9e4..3e5ae70 100644 --- a/server/styles/scss/_current-weather.scss +++ b/server/styles/scss/_current-weather.scss @@ -1,5 +1,5 @@ -@use 'colors'as c; -@use 'utils'as u; +@use 'shared/_colors'as c; +@use 'shared/_utils'as u; .weather-display .main.current-weather { &.main { diff --git a/server/styles/scss/_extended-forecast.scss b/server/styles/scss/_extended-forecast.scss index 0eff184..a6befa2 100644 --- a/server/styles/scss/_extended-forecast.scss +++ b/server/styles/scss/_extended-forecast.scss @@ -1,5 +1,5 @@ -@use 'colors'as c; -@use 'utils'as u; +@use 'shared/_colors'as c; +@use 'shared/_utils'as u; #extended-forecast-html.weather-display { background-image: url('../images/BackGround2_1.png'); @@ -49,10 +49,10 @@ .temperature-block { display: inline-block; width: 44%; + vertical-align: top; >div { text-align: center; - ; } .value { diff --git a/server/styles/scss/_hourly.scss b/server/styles/scss/_hourly.scss index f7fee46..5601111 100644 --- a/server/styles/scss/_hourly.scss +++ b/server/styles/scss/_hourly.scss @@ -1,5 +1,5 @@ -@use 'colors'as c; -@use 'utils'as u; +@use 'shared/_colors'as c; +@use 'shared/_utils'as u; .weather-display .main.hourly { &.main { diff --git a/server/styles/scss/_latest-observations.scss b/server/styles/scss/_latest-observations.scss index 02240c7..2910548 100644 --- a/server/styles/scss/_latest-observations.scss +++ b/server/styles/scss/_latest-observations.scss @@ -1,5 +1,5 @@ -@use 'colors'as c; -@use 'utils'as u; +@use 'shared/_colors'as c; +@use 'shared/_utils'as u; .weather-display .latest-observations { diff --git a/server/styles/scss/_local-forecast.scss b/server/styles/scss/_local-forecast.scss index 76ecb14..e2e5f07 100644 --- a/server/styles/scss/_local-forecast.scss +++ b/server/styles/scss/_local-forecast.scss @@ -1,5 +1,5 @@ -@use 'colors'as c; -@use 'utils'as u; +@use 'shared/_colors'as c; +@use 'shared/_utils'as u; .weather-display .local-forecast { .container { diff --git a/server/styles/scss/_page.scss b/server/styles/scss/_page.scss new file mode 100644 index 0000000..7a82517 --- /dev/null +++ b/server/styles/scss/_page.scss @@ -0,0 +1,365 @@ +@font-face { + font-family: "Star4000"; + src: url('../fonts/Star4000.woff') format('woff'); +} + +body { + font-family: "Star4000"; +} + +input, +button { + font-family: "Star4000"; +} + +#imgGetGps { + height: 13px; + vertical-align: middle; +} + +#txtAddress { + width: 490px; + font-size: 16pt; +} + +#btnGetGps, +#btnGetLatLng, +#btnClearQuery { + font-size: 16pt; +} + +.autocomplete-suggestions { + background-color: #ffffff; + border: 1px solid #000000; + /*overflow: auto;*/ +} + +.autocomplete-suggestion { + /*padding: 2px 5px;*/ + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-size: 16pt; +} + +.autocomplete-selected { + background-color: #0000ff; + color: #ffffff; +} + +#divTwc { + display: block; + background-color: #000000; + color: #ffffff; + width: 100%; + max-width: 640px; +} + +#divTwcLeft { + display: none; + text-align: right; + flex-direction: column; + vertical-align: middle; +} + +#divTwcLeft>div { + flex: 1; + padding-right: 12px; + display: flex; + flex-direction: column; + justify-content: center; +} + +#divTwcRight { + text-align: left; + display: none; + flex-direction: column; + vertical-align: middle; +} + +#divTwcRight>div { + flex: 1; + padding-left: 12px; + display: flex; + flex-direction: column; + justify-content: center; +} + +#divTwcBottom { + /* visibility: hidden; */ + display: flex; + flex-direction: row; + background-color: #000000; + color: #ffffff; + width: 100%; +} + +#divTwcBottom>div { + padding-left: 6px; + padding-right: 6px; +} + +#divTwcBottomLeft { + flex: 1; + text-align: left; +} + +#divTwcBottomMiddle { + flex: 0; + text-align: center; +} + +#divTwcBottomRight { + flex: 1; + text-align: right; +} + +#divTwcNavContainer { + display: none; +} + +#divTwcNav { + width: 100%; + display: flex; + flex-direction: row; + background-color: #000000; + color: #ffffff; + max-width: 640px; +} + +#divTwcNav>div { + padding-left: 6px; + padding-right: 6px; +} + +#divTwcNavLeft { + flex: 1; + text-align: left; +} + +#divTwcNavMiddle { + flex: 0; + text-align: center; +} + +#divTwcNavRight { + flex: 1; + text-align: right; +} + +#imgPause1x, +#imgPause2x { + visibility: hidden; + position: absolute; +} + +.HideCursor { + cursor: none !important; +} + +#txtScrollText { + width: 475px; +} + +@font-face { + font-family: "Star4000"; + src: url('../fonts/Star4000.woff') format('woff'); +} + +@font-face { + font-family: "Star 4 Radar"; + src: url('../fonts/Star 4 Radar.woff') format('woff'); +} + +@font-face { + font-family: 'Star4000 Extended'; + src: url('../fonts/Star4000 Extended.woff') format('woff'); +} + +@font-face { + font-family: 'Star4000LCN'; + src: url('../fonts/Star4000LCN.woff') format('woff'); +} + +@font-face { + font-family: 'Star4000 Large Compressed'; + src: url('../fonts/Star4000 Large Compressed.woff') format('woff'); +} + +@font-face { + font-family: 'Star4000 Large'; + src: url('../fonts/Star4000 Large.ttf') format('truetype'); +} + +@font-face { + font-family: 'Star4000 Small'; + src: url('../fonts/Star4000 Small.woff') format('woff'); +} + +#display { + font-family: "Star4000"; + margin: 0 0 0 0; + /* overflow: hidden; */ + width: 100%; + /* height: 480px; */ + /* max-width: 640px; */ +} + +jsgif { + display: none; +} + +#Star4000 { + font-family: 'Star4000'; +} + +#Star4000Extended { + font-family: 'Star4000 Extended'; +} + +#Star4000LargeCompressed { + font-family: 'Star4000 Large Compressed'; +} + +#Star4000Large { + font-family: 'Star4000 Large'; +} + +#Star4000LargeCompressedNumbers { + font-family: 'Star4000LCN'; +} + +#Star4000Small { + font-family: 'Star4000 Small'; +} + +#Star4Radar { + font-family: 'Star 4 Radar'; +} + +#container { + position: relative; + width: 100%; + /* max-width: 640px; */ + height: 100%; + max-height: 480; + background-image: url(../images/BackGround1_1.png); +} + +#divTwc:fullscreen #container { + background-image: none; +} + +#loading { + width: 640px; + height: 480px; + max-width: 100%; + text-shadow: 4px 4px black; + display: flex; + align-items: center; + text-align: center; + justify-content: center; +} + +#loading .title { + font-family: Star4000 Large; + font-size: 36px; + color: yellow; + margin-bottom: 40px; +} + +#loading .instructions { + font-size: 18pt; +} + +#container canvas { + /* position: absolute; */ + width: 100%; + /* max-width: 640px; */ +} + +.heading { + font-weight: bold; + margin-top: 15px; +} + +#enabledDisplays { + margin-bottom: 15px; +} + +#enabledDisplays label { + display: block; + max-width: 300px; +} + +#divTwcBottom img { + zoom: 150%; +} + +#divTwc:fullscreen { + display: flex; + align-items: center; + justify-content: center; + align-content: center; +} + +#divTwc:fullscreen #display { + + position: relative; +} + +#divTwc:fullscreen #divTwcBottom { + display: flex; + flex-direction: row; + background-color: rgb(0 0 0 / 0.5); + color: #ffffff; + width: 100%; + position: absolute; + bottom: 0px; +} + +@media screen and (orientation: portrait) { + #divTwc:fullscreen canvas { + width: 100vw; + max-width: 100vw; + height: auto; + } + + #divTwc:fullscreen #container { + width: 100vw; + height: auto; + max-height: unset; + max-width: unset; + } +} + +@media screen and (orientation: landscape) { + #divTwc:fullscreen canvas { + height: 100vh; + max-height: 100vh; + width: auto; + } + + #divTwc:fullscreen #container { + height: 100vh; + width: auto; + max-width: 100vw; + max-height: unset; + } +} + +.navButton { + cursor: pointer; +} + +.visible { + visibility: visible; + opacity: 1; + transition: opacity 1s linear; +} + +.hidden { + visibility: hidden; + opacity: 0; + transition: visibility 0s 1s, opacity 1s linear +} \ No newline at end of file diff --git a/server/styles/scss/_progress.scss b/server/styles/scss/_progress.scss new file mode 100644 index 0000000..3d66bbd --- /dev/null +++ b/server/styles/scss/_progress.scss @@ -0,0 +1,85 @@ +@use 'shared/_colors'as c; +@use 'shared/_utils'as u; + +.weather-display .progress { + @include u.text-shadow(); + font-family: 'Star4000 Extended'; + font-size: 19pt; + + .container { + position: relative; + top: 15px; + margin: 0px 10px; + box-sizing: border-box; + height: 280px; + overflow: hidden; + + .item { + position: relative; + + .name { + white-space: nowrap; + + &::after { + content: '........................................................................'; + } + } + + .links { + position: absolute; + text-align: right; + right: 0px; + top: 0px; + + >div { + background-color: c.$blue-box; + display: none; + padding-left: 4px; + } + + .loading { + color: #ffff00; + } + + .press-here { + color: #00ff00; + cursor: pointer; + } + + .failed { + color: #ff0000; + } + + .no-data { + color: #C0C0C0; + } + + .disabled { + color: #C0C0C0; + } + + &.loading .loading { + display: block; + } + + &.press-here .press-here { + display: block; + } + + &.failed .failed { + display: block; + } + + &.no-data .no-data { + display: block; + } + + &.disabled .disabled { + display: block; + } + + } + } + } + +} \ No newline at end of file diff --git a/server/styles/scss/_regional-forecast.scss b/server/styles/scss/_regional-forecast.scss index 9920154..312e8f0 100644 --- a/server/styles/scss/_regional-forecast.scss +++ b/server/styles/scss/_regional-forecast.scss @@ -1,5 +1,5 @@ -@use 'colors'as c; -@use 'utils'as u; +@use 'shared/_colors'as c; +@use 'shared/_utils'as u; #regional-forecast-html.weather-display { background-image: url('../images/BackGround5_1.png'); @@ -35,10 +35,10 @@ } .temp { - font-family: 'Star4000 Large Compressed'; + font-family: 'Star4000 Large'; font-size: 28px; color: c.$title-color; - top: 32px; + top: 28px; text-align: right; width: 40px; } diff --git a/server/styles/scss/_weatherdisplay.scss b/server/styles/scss/_weather-display.scss similarity index 96% rename from server/styles/scss/_weatherdisplay.scss rename to server/styles/scss/_weather-display.scss index 0b169f9..d39b1c1 100644 --- a/server/styles/scss/_weatherdisplay.scss +++ b/server/styles/scss/_weather-display.scss @@ -1,5 +1,5 @@ -@use 'colors'as c; -@use 'utils'as u; +@use 'shared/_colors'as c; +@use 'shared/_utils'as u; .weather-display { width: 640px; diff --git a/server/styles/scss/compiled.scss b/server/styles/scss/compiled.scss deleted file mode 100644 index 3a62219..0000000 --- a/server/styles/scss/compiled.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use '_weatherdisplay'; -@use '_hourly'; -@use '_current-weather'; -@use '_local-forecast'; -@use '_latest-observations'; -@use '_regional-forecast'; -@use '_extended-forecast'; \ No newline at end of file diff --git a/server/styles/scss/main.scss b/server/styles/scss/main.scss new file mode 100644 index 0000000..0df464d --- /dev/null +++ b/server/styles/scss/main.scss @@ -0,0 +1,9 @@ +@import 'page'; +@import 'current-weather'; +@import 'extended-forecast'; +@import 'hourly'; +@import 'latest-observations'; +@import 'local-forecast'; +@import 'progress'; +@import 'regional-forecast'; +@import 'weather-display'; \ No newline at end of file diff --git a/server/styles/scss/_colors.scss b/server/styles/scss/shared/_colors.scss similarity index 82% rename from server/styles/scss/_colors.scss rename to server/styles/scss/shared/_colors.scss index 8141d23..b74834e 100644 --- a/server/styles/scss/_colors.scss +++ b/server/styles/scss/shared/_colors.scss @@ -7,4 +7,6 @@ $column-header: rgb(32, 0, 87); $gradient-main-background-1: #102080; $gradient-main-background-2: #001040; -$extended-low: #8080FF; \ No newline at end of file +$extended-low: #8080FF; + +$blue-box: #26235a; \ No newline at end of file diff --git a/server/styles/scss/_utils.scss b/server/styles/scss/shared/_utils.scss similarity index 100% rename from server/styles/scss/_utils.scss rename to server/styles/scss/shared/_utils.scss diff --git a/views/index.ejs b/views/index.ejs index f5974d8..3a66405 100644 --- a/views/index.ejs +++ b/views/index.ejs @@ -3,159 +3,155 @@ - - WeatherStar 4000+ - - - - + + WeatherStar 4000+ + + + + - - - - - + + + + + - <% if (production) { %> - - - - <% } else { %> - - - - - - - - - + <% if (production) { %> + + + + <% } else { %> + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + - <% } %> + <% } %> -
-
- - - -
-
-
-
+
+
+ + + +
+
+
+
-
+
- - - + + + -
-
-
-
-
WeatherStar 4000+
-
Enter your location above to continue
-
-
-
- <%- include('partials/hourly.ejs') %> -
-
- <%- include('partials/current-weather.ejs') %> -
-
- <%- include('partials/local-forecast.ejs') %> -
-
- <%- include('partials/latest-observations.ejs') %> -
-
- <%- include('partials/regional-forecast.ejs') %> -
-
- <%- include('partials/extended-forecast.ejs') %> -
-
-
-
- - - - -
-
- -
-
- -
-
-
+
+
+
+
+
WeatherStar 4000+
+
Enter your location above to continue
+
+
+
+ <%- include('partials/progress.ejs') %> +
+
+ <%- include('partials/hourly.ejs') %> +
+
+ <%- include('partials/current-weather.ejs') %> +
+
+ <%- include('partials/local-forecast.ejs') %> +
+
+ <%- include('partials/latest-observations.ejs') %> +
+
+ <%- include('partials/regional-forecast.ejs') %> +
+
+ <%- include('partials/extended-forecast.ejs') %> +
+
+
+
+ + + + +
+
+ +
+
+ +
+
+
-
+
-
- More information -
+
+ More information +
-
Selected displays
-
+
Selected displays
+
-
+
-
- Location:
- Station Id:
- Radar Id:
- Zone Id:
-
+
+ Location:
+ Station Id:
+ Radar Id:
+ Zone Id:
+
-
- Last Update: (None)
- -
+
+ Last Update: (None)
+ +
-
- Units: - - -
+
+ Units: + + +
diff --git a/views/partials/extended-forecast.ejs b/views/partials/extended-forecast.ejs index 64025e9..ba6aa52 100644 --- a/views/partials/extended-forecast.ejs +++ b/views/partials/extended-forecast.ejs @@ -1,23 +1,23 @@ <%- include('header.ejs', {titleDual:{ top: 'Extended' , bottom: 'Forecast' }, hasTime: true }) %> -
-
-
-
-
- -
-
-
-
-
Lo
-
-
-
-
Hi
-
-
-
-
-
-
- <%- include('scroll.ejs') %> \ No newline at end of file +
+
+
+
+
+ +
+
+
+
+
Lo
+
+
+
+
Hi
+
+
+
+
+
+
+<%- include('scroll.ejs') %> \ No newline at end of file diff --git a/views/partials/progress.ejs b/views/partials/progress.ejs new file mode 100644 index 0000000..7bb9412 --- /dev/null +++ b/views/partials/progress.ejs @@ -0,0 +1,15 @@ +<%- include('header.ejs', {titleDual:{ top: 'WeatherStar' , bottom: '4000+ v' + version }, hasTime: true}) %> +
+
+
+
Current Conditions
+
+
Loading
+
Press Here
+
Failed
+
No Data
+
Disabled
+
+
+
+
\ No newline at end of file diff --git a/ws4kp.code-workspace b/ws4kp.code-workspace index eb8fece..7ce7d20 100644 --- a/ws4kp.code-workspace +++ b/ws4kp.code-workspace @@ -42,5 +42,11 @@ "**/twc3.js", ], "editor.tabSize": 2, + "emmet.includeLanguages": { + "ejs": "html", + }, + "[html]": { + "editor.defaultFormatter": "j69.ejs-beautify" + }, }, } \ No newline at end of file