joachim/openwebrx-clone
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use sprites scaled to specific resolution (better performance, less

Browse Source 
scaling headaches)
This commit is contained in:
Jakob Ketterl 2020-09-11 22:12:01 +02:00
parent 6e3a13e0d2
commit d45cc207ad
6 changed files with 47 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
htdocs/css/openwebrx-globals.css
View File

@ -10,3 +10,11 @@ html, body
background-image: url(../gfx/openwebrx-sprites.png); background-image: url(../gfx/openwebrx-sprites.png);
display: inline-block; display: inline-block;
} }
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.sprite {
background-image: url(../gfx/openwebrx-sprites-2x.png);
background-size: 198px 77px;
}
}

24
htdocs/css/openwebrx-header.css
View File

@ -192,44 +192,44 @@
text-shadow: none; text-shadow: none;
} }
.sprite-panel-log { .sprite-panel-status {
background-position: 0 0; background-position: 0 0;
width: 44px;
height: 38px;
}
.sprite-panel-log {
background-position: -44px 0;
width: 38px; width: 38px;
height: 38px; height: 38px;
} }
.sprite-panel-receiver { .sprite-panel-receiver {
background-position: -38px 0; background-position: -82px 0;
width: 40px; width: 40px;
height: 38px; height: 38px;
} }
.sprite-panel-map { .sprite-panel-map {
background-position: -78px 0; background-position: -122px 0;
width: 38px; width: 38px;
height: 38px; height: 38px;
} }
.sprite-panel-settings { .sprite-panel-settings {
background-position: -116px 0; background-position: -160px 0;
width: 38px; width: 38px;
height: 38px; height: 38px;
} }
.sprite-panel-status {
background-position: -154px 0;
width: 44px;
height: 38px;
}
.sprite-rx-details-arrow-down { .sprite-rx-details-arrow-down {
background-position: -141px -467px; background-position: 0 -65px;
width: 43px; width: 43px;
height: 12px; height: 12px;
} }
.sprite-rx-details-arrow-up { .sprite-rx-details-arrow-up {
background-position: -141px -455px; background-position: -43px -65px;
width: 43px; width: 43px;
height: 12px; height: 12px;
} }

53
htdocs/css/openwebrx.css
View File

@ -1162,86 +1162,75 @@ img.openwebrx-mirror-img
margin: -10px; margin: -10px;
} }
.sprite-zoom { .sprite-zoom-in {
background-size: 55px 151px; background-position: 0 -38px;
width: 27px; width: 27px;
height: 27px; height: 27px;
} }
.sprite-zoom-in {
background-position: 0 -10px;
}
.sprite-zoom-out { .sprite-zoom-out {
background-position: 0 -38px; background-position: -27px -38px;
width: 27px;
height: 27px;
} }
.sprite-zoom-in-total { .sprite-zoom-in-total {
background-size: 49px 133px; background-position: -54px -38px;
background-position: 0 -57.5px;
width: 24px; width: 24px;
height: 27px;
} }
.sprite-zoom-out-total { .sprite-zoom-out-total {
background-size: 50px 139px; background-position: -78px -38px;
background-position: 0 -88.5px;
width: 25px; width: 25px;
height: 27px;
} }
.sprite-edit { .sprite-edit {
background-size: 70.7px 193.2px; background-position: -131px -51px;
background-position: -35px -145.25px;
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
.sprite-trashcan { .sprite-trashcan {
background-size: 70.7px 193.2px; background-position: -145px -38px;
background-position: -49px -145.25px;
width: 14px; width: 14px;
height: 14px; height: 14px;
} }
.sprite-speaker { .sprite-speaker {
background-size: 29.2px 79.7px;
width: 14px; width: 14px;
height: 14.6px; height: 15px;
} }
#openwebrx-mute-on .sprite-speaker { #openwebrx-mute-on .sprite-speaker {
background-position: -14.4px -20.4px; background-position: -117px -38px;
} }
#openwebrx-mute-off .sprite-speaker { #openwebrx-mute-off .sprite-speaker {
background-position: -14.4px -5.8px; background-position: -103px -38px;
} }
.sprite-squelch { .sprite-squelch {
background-size: 28.3px 77.3px; background-position: -131px -38px;
background-position: 0 -64.3px;
width: 14px; width: 14px;
height: 13px; height: 13px;
} }
.sprite-waterfall {
background-size: 27.7px 75.8px;
}
.sprite-waterfall-auto { .sprite-waterfall-auto {
background-position: -13.7px -45.6px; background-position: -103px -53px;
width: 14px; width: 14px;
height: 11.4px; height: 11px;
} }
.sprite-waterfall-default { .sprite-waterfall-default {
background-position: -13.7px -33.2px; background-position: -117px -53px;
width: 14px; width: 14px;
height: 12.5px; height: 12px;
} }
.sprite-bookmark { .sprite-bookmark {
background-size: 101px 276px; background-position: -159px -38px;
background-position: -50px -227.5px; width: 21px;
width: 20.5px;
height: 27px; height: 27px;
} }

BIN
htdocs/gfx/openwebrx-sprites-2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
htdocs/gfx/openwebrx-sprites.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

12
htdocs/index.html
View File

@ -164,20 +164,20 @@
<div class="openwebrx-panel-line"> <div class="openwebrx-panel-line">
<div title="Mute on/off" id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute();"><span class="sprite sprite-speaker openwebrx-sliderbtn-img"></span></div> <div title="Mute on/off" id="openwebrx-mute-off" class="openwebrx-button" onclick="toggleMute();"><span class="sprite sprite-speaker openwebrx-sliderbtn-img"></span></div>
<input title="Volume" id="openwebrx-panel-volume" class="openwebrx-panel-slider" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()"> <input title="Volume" id="openwebrx-panel-volume" class="openwebrx-panel-slider" type="range" min="0" max="150" value="50" step="1" onchange="updateVolume()" oninput="updateVolume()">
<div title="Auto-adjust waterfall colors" id="openwebrx-waterfall-colors-auto" class="openwebrx-button" onclick="waterfall_measure_minmax_now=true;"><span class="sprite sprite-waterfall sprite-waterfall-auto openwebrx-sliderbtn-img"></span></div> <div title="Auto-adjust waterfall colors" id="openwebrx-waterfall-colors-auto" class="openwebrx-button" onclick="waterfall_measure_minmax_now=true;"><span class="sprite sprite-waterfall-auto openwebrx-sliderbtn-img"></span></div>
<input title="Waterfall minimum level" id="openwebrx-waterfall-color-min" class="openwebrx-panel-slider" type="range" min="-200" max="100" value="50" step="1" onchange="updateWaterfallColors(0);" oninput="updateVolume()"> <input title="Waterfall minimum level" id="openwebrx-waterfall-color-min" class="openwebrx-panel-slider" type="range" min="-200" max="100" value="50" step="1" onchange="updateWaterfallColors(0);" oninput="updateVolume()">
</div> </div>
<div class="openwebrx-panel-line"> <div class="openwebrx-panel-line">
<div title="Auto-set squelch level" class="openwebrx-squelch-default openwebrx-button"><span class="sprite sprite-squelch openwebrx-sliderbtn-img"></span></div> <div title="Auto-set squelch level" class="openwebrx-squelch-default openwebrx-button"><span class="sprite sprite-squelch openwebrx-sliderbtn-img"></span></div>
<input title="Squelch" class="openwebrx-squelch-slider openwebrx-panel-slider" type="range" min="-150" max="0" value="-150" step="1"> <input title="Squelch" class="openwebrx-squelch-slider openwebrx-panel-slider" type="range" min="-150" max="0" value="-150" step="1">
<div title="Set waterfall colors to default" id="openwebrx-waterfall-colors-default" class="openwebrx-button" onclick="waterfallColorsDefault()"><span class="sprite sprite-waterfall sprite-waterfall-default openwebrx-sliderbtn-img"></span></div> <div title="Set waterfall colors to default" id="openwebrx-waterfall-colors-default" class="openwebrx-button" onclick="waterfallColorsDefault()"><span class="sprite sprite-waterfall-default openwebrx-sliderbtn-img"></span></div>
<input title="Waterfall maximum level" id="openwebrx-waterfall-color-max" class="openwebrx-panel-slider" type="range" min="-200" max="100" value="50" step="1" onchange="updateWaterfallColors(1);" oninput="updateVolume()"> <input title="Waterfall maximum level" id="openwebrx-waterfall-color-max" class="openwebrx-panel-slider" type="range" min="-200" max="100" value="50" step="1" onchange="updateWaterfallColors(1);" oninput="updateVolume()">
</div> </div>
<div class="openwebrx-panel-line"> <div class="openwebrx-panel-line">
<div class="openwebrx-button openwebrx-square-button" onclick="zoomInOneStep();" title="Zoom in one step"><span class="sprite sprite-zoom sprite-zoom-in"></span></div> <div class="openwebrx-button openwebrx-square-button" onclick="zoomInOneStep();" title="Zoom in one step"><span class="sprite sprite-zoom-in"></span></div>
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutOneStep();" title="Zoom out one step"><span class="sprite sprite-zoom sprite-zoom-out"></span></div> <div class="openwebrx-button openwebrx-square-button" onclick="zoomOutOneStep();" title="Zoom out one step"><span class="sprite sprite-zoom-out"></span></div>
<div class="openwebrx-button openwebrx-square-button" onclick="zoomInTotal();" title="Zoom in totally"><span class="sprite sprite-zoom sprite-zoom-in-total"></span></div> <div class="openwebrx-button openwebrx-square-button" onclick="zoomInTotal();" title="Zoom in totally"><span class="sprite sprite-zoom-in-total"></span></div>
<div class="openwebrx-button openwebrx-square-button" onclick="zoomOutTotal();" title="Zoom out totally"><span class="sprite sprite-zoom sprite-zoom-out-total"></span></div> <div class="openwebrx-button openwebrx-square-button" onclick="zoomOutTotal();" title="Zoom out totally"><span class="sprite sprite-zoom-out-total"></span></div>
<div id="openwebrx-smeter-db">0 dB</div> <div id="openwebrx-smeter-db">0 dB</div>
</div> </div>
<div class="openwebrx-panel-line"> <div class="openwebrx-panel-line">