use chroma.js to calculate waterfall colors

config_webrx.py

@@ -248,13 +248,13 @@
 # ==== Color themes ====
 
 ### google turbo colormap (see: https://ai.googleblog.com/2019/08/turbo-improved-rainbow-colormap-for.html)
-waterfall_colors = [0x30123bff, 0x311542ff, 0x33184aff, 0x341b51ff, 0x351e58ff, 0x36215fff, 0x372466ff, 0x38266cff, 0x392973ff, 0x3a2c79ff, 0x3b2f80ff, 0x3c3286ff, 0x3d358bff, 0x3e3891ff, 0x3e3a97ff, 0x3f3d9cff, 0x4040a2ff, 0x4043a7ff, 0x4146acff, 0x4248b1ff, 0x424bb6ff, 0x434ebaff, 0x4351bfff, 0x4453c3ff, 0x4456c7ff, 0x4559cbff, 0x455bcfff, 0x455ed3ff, 0x4561d7ff, 0x4663daff, 0x4666ddff, 0x4669e1ff, 0x466be4ff, 0x466ee7ff, 0x4671e9ff, 0x4673ecff, 0x4676eeff, 0x4678f1ff, 0x467bf3ff, 0x467df5ff, 0x4680f7ff, 0x4682f9ff, 0x4685faff, 0x4587fcff, 0x458afdff, 0x448cfeff, 0x448ffeff, 0x4391ffff, 0x4294ffff, 0x4196ffff, 0x3f99ffff, 0x3e9bffff, 0x3d9efeff, 0x3ba1fdff, 0x3aa3fdff, 0x38a6fbff, 0x36a8faff, 0x35abf9ff, 0x33adf7ff, 0x31b0f6ff, 0x2fb2f4ff, 0x2db5f2ff, 0x2cb7f0ff, 0x2ab9eeff, 0x28bcecff, 0x26beeaff, 0x25c0e7ff, 0x23c3e5ff, 0x21c5e2ff, 0x20c7e0ff, 0x1fc9ddff, 0x1dccdbff, 0x1cced8ff, 0x1bd0d5ff, 0x1ad2d3ff, 0x19d4d0ff, 0x18d6cdff, 0x18d8cbff, 0x18dac8ff, 0x17dbc5ff, 0x17ddc3ff, 0x17dfc0ff, 0x18e0beff, 0x18e2bbff, 0x19e3b9ff, 0x1ae5b7ff, 0x1be6b4ff, 0x1de8b2ff, 0x1ee9afff, 0x20eaadff, 0x22ecaaff, 0x24eda7ff, 0x27eea4ff, 0x29efa1ff, 0x2cf09eff, 0x2ff19bff, 0x32f298ff, 0x35f394ff, 0x38f491ff, 0x3cf58eff, 0x3ff68bff, 0x43f787ff, 0x46f884ff, 0x4af980ff, 0x4efa7dff, 0x51fa79ff, 0x55fb76ff, 0x59fc73ff, 0x5dfc6fff, 0x61fd6cff, 0x65fd69ff, 0x69fe65ff, 0x6dfe62ff, 0x71fe5fff, 0x75ff5cff, 0x79ff59ff, 0x7dff56ff, 0x80ff53ff, 0x84ff50ff, 0x88ff4eff, 0x8bff4bff, 0x8fff49ff, 0x92ff46ff, 0x96ff44ff, 0x99ff42ff, 0x9cfe40ff, 0x9ffe3eff, 0xa2fd3dff, 0xa4fd3bff, 0xa7fc3aff, 0xaafc39ff, 0xacfb38ff, 0xaffa37ff, 0xb1f936ff, 0xb4f835ff, 0xb7f835ff, 0xb9f634ff, 0xbcf534ff, 0xbff434ff, 0xc1f334ff, 0xc4f233ff, 0xc6f033ff, 0xc9ef34ff, 0xcbee34ff, 0xceec34ff, 0xd0eb34ff, 0xd2e934ff, 0xd5e835ff, 0xd7e635ff, 0xd9e435ff, 0xdbe236ff, 0xdde136ff, 0xe0df37ff, 0xe2dd37ff, 0xe4db38ff, 0xe6d938ff, 0xe7d738ff, 0xe9d539ff, 0xebd339ff, 0xedd139ff, 0xeecf3aff, 0xf0cd3aff, 0xf1cb3aff, 0xf3c93aff, 0xf4c73aff, 0xf5c53aff, 0xf7c33aff, 0xf8c13aff, 0xf9bf39ff, 0xfabd39ff, 0xfaba38ff, 0xfbb838ff, 0xfcb637ff, 0xfcb436ff, 0xfdb135ff, 0xfdaf35ff, 0xfeac34ff, 0xfea933ff, 0xfea732ff, 0xfea431ff, 0xffa12fff, 0xff9e2eff, 0xff9c2dff, 0xff992cff, 0xfe962bff, 0xfe932aff, 0xfe9028ff, 0xfe8d27ff, 0xfd8a26ff, 0xfd8724ff, 0xfc8423ff, 0xfc8122ff, 0xfb7e20ff, 0xfb7b1fff, 0xfa781eff, 0xf9751cff, 0xf8721bff, 0xf86f1aff, 0xf76c19ff, 0xf66917ff, 0xf56616ff, 0xf46315ff, 0xf36014ff, 0xf25d13ff, 0xf05b11ff, 0xef5810ff, 0xee550fff, 0xed530eff, 0xeb500eff, 0xea4e0dff, 0xe94b0cff, 0xe7490bff, 0xe6470aff, 0xe4450aff, 0xe34209ff, 0xe14009ff, 0xdf3e08ff, 0xde3c07ff, 0xdc3a07ff, 0xda3806ff, 0xd83606ff, 0xd63405ff, 0xd43205ff, 0xd23105ff, 0xd02f04ff, 0xce2d04ff, 0xcc2b03ff, 0xca2903ff, 0xc82803ff, 0xc62602ff, 0xc32402ff, 0xc12302ff, 0xbf2102ff, 0xbc1f01ff, 0xba1e01ff, 0xb71c01ff, 0xb41b01ff, 0xb21901ff, 0xaf1801ff, 0xac1601ff, 0xaa1501ff, 0xa71401ff, 0xa41201ff, 0xa11101ff, 0x9e1001ff, 0x9b0f01ff, 0x980d01ff, 0x950c01ff, 0x920b01ff, 0x8e0a01ff, 0x8b0901ff, 0x880801ff, 0x850701ff, 0x810602ff, 0x7e0502ff, 0x7a0402ff]
+waterfall_colors = [0x30123b, 0x311542, 0x33184a, 0x341b51, 0x351e58, 0x36215f, 0x372466, 0x38266c, 0x392973, 0x3a2c79, 0x3b2f80, 0x3c3286, 0x3d358b, 0x3e3891, 0x3e3a97, 0x3f3d9c, 0x4040a2, 0x4043a7, 0x4146ac, 0x4248b1, 0x424bb6, 0x434eba, 0x4351bf, 0x4453c3, 0x4456c7, 0x4559cb, 0x455bcf, 0x455ed3, 0x4561d7, 0x4663da, 0x4666dd, 0x4669e1, 0x466be4, 0x466ee7, 0x4671e9, 0x4673ec, 0x4676ee, 0x4678f1, 0x467bf3, 0x467df5, 0x4680f7, 0x4682f9, 0x4685fa, 0x4587fc, 0x458afd, 0x448cfe, 0x448ffe, 0x4391ff, 0x4294ff, 0x4196ff, 0x3f99ff, 0x3e9bff, 0x3d9efe, 0x3ba1fd, 0x3aa3fd, 0x38a6fb, 0x36a8fa, 0x35abf9, 0x33adf7, 0x31b0f6, 0x2fb2f4, 0x2db5f2, 0x2cb7f0, 0x2ab9ee, 0x28bcec, 0x26beea, 0x25c0e7, 0x23c3e5, 0x21c5e2, 0x20c7e0, 0x1fc9dd, 0x1dccdb, 0x1cced8, 0x1bd0d5, 0x1ad2d3, 0x19d4d0, 0x18d6cd, 0x18d8cb, 0x18dac8, 0x17dbc5, 0x17ddc3, 0x17dfc0, 0x18e0be, 0x18e2bb, 0x19e3b9, 0x1ae5b7, 0x1be6b4, 0x1de8b2, 0x1ee9af, 0x20eaad, 0x22ecaa, 0x24eda7, 0x27eea4, 0x29efa1, 0x2cf09e, 0x2ff19b, 0x32f298, 0x35f394, 0x38f491, 0x3cf58e, 0x3ff68b, 0x43f787, 0x46f884, 0x4af980, 0x4efa7d, 0x51fa79, 0x55fb76, 0x59fc73, 0x5dfc6f, 0x61fd6c, 0x65fd69, 0x69fe65, 0x6dfe62, 0x71fe5f, 0x75ff5c, 0x79ff59, 0x7dff56, 0x80ff53, 0x84ff50, 0x88ff4e, 0x8bff4b, 0x8fff49, 0x92ff46, 0x96ff44, 0x99ff42, 0x9cfe40, 0x9ffe3e, 0xa2fd3d, 0xa4fd3b, 0xa7fc3a, 0xaafc39, 0xacfb38, 0xaffa37, 0xb1f936, 0xb4f835, 0xb7f835, 0xb9f634, 0xbcf534, 0xbff434, 0xc1f334, 0xc4f233, 0xc6f033, 0xc9ef34, 0xcbee34, 0xceec34, 0xd0eb34, 0xd2e934, 0xd5e835, 0xd7e635, 0xd9e435, 0xdbe236, 0xdde136, 0xe0df37, 0xe2dd37, 0xe4db38, 0xe6d938, 0xe7d738, 0xe9d539, 0xebd339, 0xedd139, 0xeecf3a, 0xf0cd3a, 0xf1cb3a, 0xf3c93a, 0xf4c73a, 0xf5c53a, 0xf7c33a, 0xf8c13a, 0xf9bf39, 0xfabd39, 0xfaba38, 0xfbb838, 0xfcb637, 0xfcb436, 0xfdb135, 0xfdaf35, 0xfeac34, 0xfea933, 0xfea732, 0xfea431, 0xffa12f, 0xff9e2e, 0xff9c2d, 0xff992c, 0xfe962b, 0xfe932a, 0xfe9028, 0xfe8d27, 0xfd8a26, 0xfd8724, 0xfc8423, 0xfc8122, 0xfb7e20, 0xfb7b1f, 0xfa781e, 0xf9751c, 0xf8721b, 0xf86f1a, 0xf76c19, 0xf66917, 0xf56616, 0xf46315, 0xf36014, 0xf25d13, 0xf05b11, 0xef5810, 0xee550f, 0xed530e, 0xeb500e, 0xea4e0d, 0xe94b0c, 0xe7490b, 0xe6470a, 0xe4450a, 0xe34209, 0xe14009, 0xdf3e08, 0xde3c07, 0xdc3a07, 0xda3806, 0xd83606, 0xd63405, 0xd43205, 0xd23105, 0xd02f04, 0xce2d04, 0xcc2b03, 0xca2903, 0xc82803, 0xc62602, 0xc32402, 0xc12302, 0xbf2102, 0xbc1f01, 0xba1e01, 0xb71c01, 0xb41b01, 0xb21901, 0xaf1801, 0xac1601, 0xaa1501, 0xa71401, 0xa41201, 0xa11101, 0x9e1001, 0x9b0f01, 0x980d01, 0x950c01, 0x920b01, 0x8e0a01, 0x8b0901, 0x880801, 0x850701, 0x810602, 0x7e0502, 0x7a0402]
 
 ### original theme by teejez:
-#waterfall_colors = [0x000000FF, 0x0000FFFF, 0x00FFFFFF, 0x00FF00FF, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFFFFFFFF]
+#waterfall_colors = [0x000000, 0x0000FF, 0x00FFFF, 0x00FF00, 0xFFFF00, 0xFF0000, 0xFF00FF, 0xFFFFFF]
 
 ### old theme by HA7ILM:
-# waterfall_colors = "[0x000000ff,0x2e6893ff, 0x69a5d0ff, 0x214b69ff, 0x9dc4e0ff,  0xfff775ff, 0xff8a8aff, 0xb20000ff]"
+#waterfall_colors = [0x000000, 0x2e6893, 0x69a5d0, 0x214b69, 0x9dc4e0, 0xfff775, 0xff8a8a, 0xb20000]
 # waterfall_min_level = -115 #in dB
 # waterfall_max_level = 0
 # waterfall_auto_level_margin = {"min": 20, "max": 30}

htdocs/openwebrx.js

@@ -700,7 +700,7 @@ function on_ws_recv(evt) {
                 switch (json.type) {
                     case "config":
                         var config = json['value'];
-                        waterfall_colors = config['waterfall_colors'];
+                        waterfall_colors = chroma.scale(config['waterfall_colors']);
                         waterfall_min_level_default = config['waterfall_min_level'];
                         waterfall_max_level_default = config['waterfall_max_level'];
                         waterfall_auto_level_margin = config['waterfall_auto_level_margin'];
@@ -1207,16 +1207,9 @@ function open_websocket() {
 }
 
 function waterfall_mkcolor(db_value, waterfall_colors_arg) {
-    if (typeof waterfall_colors_arg === 'undefined') waterfall_colors_arg = waterfall_colors;
-    if (db_value < waterfall_min_level) db_value = waterfall_min_level;
-    if (db_value > waterfall_max_level) db_value = waterfall_max_level;
-    var full_scale = waterfall_max_level - waterfall_min_level;
-    var relative_value = db_value - waterfall_min_level;
-    var value_percent = relative_value / full_scale;
-    var percent_for_one_color = 1 / (waterfall_colors_arg.length - 1);
-    var index = Math.floor(value_percent / percent_for_one_color);
-    var remain = (value_percent - percent_for_one_color * index) / percent_for_one_color;
-    return color_between(waterfall_colors_arg[index + 1], waterfall_colors_arg[index], remain);
+    waterfall_colors_arg = waterfall_colors_arg || waterfall_colors;
+    var value_percent = (db_value - waterfall_min_level) / (waterfall_max_level - waterfall_min_level);
+    return waterfall_colors(Math.max(0, Math.min(1, value_percent)));
 }
 
 function color_between(first, second, percent) {
@@ -1311,9 +1304,9 @@ function waterfall_add(data) {
     //Add line to waterfall image
     var oneline_image = canvas_context.createImageData(w, 1);
     for (var x = 0; x < w; x++) {
-        var color = waterfall_mkcolor(data[x]);
-        for (i = 0; i < 4; i++)
-            oneline_image.data[x * 4 + i] = ((color >>> 0) >> ((3 - i) * 8)) & 0xff;
+        var color = waterfall_mkcolor(data[x]).rgb();
+        for (i = 0; i < 3; i++) oneline_image.data[x * 4 + i] = color[i];
+        oneline_image.data[x * 4 + 3] = 255;
     }
 
     //Draw image
@@ -1619,8 +1612,9 @@ function secondary_demod_waterfall_add(data) {
     //Add line to waterfall image
     var oneline_image = secondary_demod_current_canvas_context.createImageData(w, 1);
     for (var x = 0; x < w; x++) {
-        var color = waterfall_mkcolor(data[x] + secondary_demod_fft_offset_db);
-        for (var i = 0; i < 4; i++) oneline_image.data[x * 4 + i] = ((color >>> 0) >> ((3 - i) * 8)) & 0xff;
+        var color = waterfall_mkcolor(data[x] + secondary_demod_fft_offset_db).rgb();
+        for (var i = 0; i < 3; i++) oneline_image.data[x * 4 + i] = color[i];
+        oneline_image.data[x * 4 + 3] = 255;
     }
 
     //Draw image

owrx/controllers/assets.py

@@ -116,6 +116,7 @@ class CompiledAssetsController(GzipMixin, ModificationAwareController):
             "openwebrx.js",
             "lib/jquery-3.2.1.min.js",
             "lib/jquery.nanoscroller.js",
+            "lib/chroma.min.js",
             "lib/Header.js",
             "lib/Demodulator.js",
             "lib/DemodulatorPanel.js",