diff --git a/CHANGELOG.md b/CHANGELOG.md index c43a7b81..67cb79e2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,9 @@ IMPORTANT NOTE: This version only works on CACTI 1.x++! --- develop --- +* Add traffic colour presets and optional high-load link pulsing + +* Fix Safari rendering of high-traffic link glows using native SVG filters * Make configuration saves and repairs atomic; coordinate writes, registration and deletion with destination-directory locks and report failed editor saves * Add editable map notes with alignment and sharp text at logical map dimensions diff --git a/cli/cacti-integrate.php b/cli/cacti-integrate.php index fc383925..2ac78b9e 100644 --- a/cli/cacti-integrate.php +++ b/cli/cacti-integrate.php @@ -425,7 +425,10 @@ } } -$map->WriteConfig($outputmapfile); +if (!$map->WriteConfig($outputmapfile)) { + fwrite(STDERR, "Could not write configuration to " . $outputmapfile . PHP_EOL); + exit(1); +} print 'Wrote config to ' . $outputmapfile . PHP_EOL; diff --git a/cli/convert-to-dsstats.php b/cli/convert-to-dsstats.php index 822dbcfc..b71f79a8 100644 --- a/cli/convert-to-dsstats.php +++ b/cli/convert-to-dsstats.php @@ -244,7 +244,10 @@ } } -$map->WriteConfig($outputfile); +if (!$map->WriteConfig($outputfile)) { + fwrite(STDERR, "Could not write configuration to " . $outputfile . PHP_EOL); + exit(1); +} print "Wrote new config to $outputfile" . PHP_EOL; diff --git a/cli/map-tidyup.php b/cli/map-tidyup.php index cbaab782..af4db624 100644 --- a/cli/map-tidyup.php +++ b/cli/map-tidyup.php @@ -129,7 +129,10 @@ // adjust node offsets so that links come from correct side of nodes, and ideally still // from underneath them (e.g. NE80 not NE) -$map->WriteConfig($outputfile); +if (!$map->WriteConfig($outputfile)) { + fwrite(STDERR, "Could not write configuration to " . $outputfile . PHP_EOL); + exit(1); +} print 'Wrote new config to ' . $outputfile . PHP_EOL; diff --git a/css/editor.css b/css/editor.css index 163688f0..9f85de23 100644 --- a/css/editor.css +++ b/css/editor.css @@ -346,6 +346,29 @@ body#mainView .ui-dialog textarea.ui-state-default { color: var(--text-color-lighter, #333) !important; } +/* Colour and image libraries. */ +#wm-scale-rows input { width: 85px; box-sizing: border-box; } +#wm-scale-rows .wm-range-tag { width: 110px; } +.wm-asset-colour { display: inline-flex; flex-direction: column; gap: 4px; } +.wm-asset-colour select { max-width: 180px; } +.wm-asset-colour summary { font-size: 0.9em; cursor: pointer; } +.wm-asset-delete { color: #c62828 !important; background: #fff !important; border: 1px solid #c62828 !important; font-size: 20px; } + +.wm-asset-swatches { display: flex; gap: 4px; } +.wm-asset-swatches button { width: 20px; height: 20px; border: 1px solid currentColor; cursor: pointer; padding: 0; } + +#wm-traffic-preview { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; } +.wm-traffic-band { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; } +.wm-traffic-swatch { width: 55px; height: 22px; border: 1px solid #777; } +#wm-traffic-advanced > summary { cursor: pointer; margin: 14px 0; } + +/* Use Cacti's own theme heading colours in every grouped editor dialog. */ +.dlgProperties .wm-editor-section { display: table; width: 100%; box-sizing: border-box; margin: 10px 0 6px; } +.dlgProperties table .wm-editor-section { margin: 0; } +#wm-colours-error:not(:empty) { color: inherit; border-left: 3px solid #c62828; padding-left: 8px; font-weight: bold; } + +#dlgColours > .dlgBody { display: block; } + /* Searchable node icon gallery; keep backgrounds on their existing selector. */ body#mainView .wm-icon-source { display: none; } body#mainView .wm-icon-picker { width: 320px; max-width: 100%; } diff --git a/css/weathermap.css b/css/weathermap.css index 1a742e26..aec954e6 100644 --- a/css/weathermap.css +++ b/css/weathermap.css @@ -121,3 +121,9 @@ button.wm-cycle-control.fas { font-family: "Font Awesome 5 Free"; font-weight: 9 /* Keep gallery headings readable against the theme title bar. */ .cactiTableTitleRow.wm-gallery-heading { color: var(--text-color-highlight, #fff); } + +.wm-traffic-glow { position: absolute; pointer-events: none; overflow: visible; } +.wm-traffic-pulse { opacity: .25; animation: wm-traffic-pulse 2.5s ease-in-out infinite; } +@keyframes wm-traffic-pulse { 0%, 100% { opacity: .2; } 50% { opacity: 1; } } +.wm-glow-paused .wm-traffic-pulse { animation: none; opacity: .65; } +@media (prefers-reduced-motion: reduce) { .wm-traffic-pulse { animation: none; opacity: .65; } } diff --git a/js/editor.js b/js/editor.js index 17080cb6..8ffed979 100644 --- a/js/editor.js +++ b/js/editor.js @@ -728,6 +728,8 @@ function manage_colours() { $('#action').val('set_map_colours'); show_dialog('dlgColours'); + $('#dlgColours').dialog('option', 'width', Math.min(1100, $(window).width() - 40)); + wmOpenColours(); } function manage_images() { @@ -962,6 +964,9 @@ function form_submit(event) { mapmode('existing'); } + if ($('#action').val() === 'set_map_properties') { + $('#map_background_colour').val($('#wm-map-background-colour .wm-colour-value').val()); + } if ($('#action').val() === 'place_note') { show_note('', $('#x').val(), $('#y').val()); return; @@ -1001,6 +1006,8 @@ function map_properties() { hide_all_dialogs(); + var background = wmAssetColour($('#map_background_colour').val(), false, true, true, wmEditorText.backgroundColour); + $('#wm-map-background-colour').empty().append(background); $('#action').val('set_map_properties'); show_dialog('dlgMapProperties'); @@ -1826,6 +1833,136 @@ function wmFriendlyLinkNames() { function wmDecodeEditorUrl(value) { return String(value || '').replace(/&/g, '&'); } +var wmAssetPalette = {Black: '#000000', White: '#ffffff', Blue: '#0000ff', Red: '#cc0000', Green: '#008000', Purple: '#800080', Orange: '#b35a00', Grey: '#666666', None: 'none'}; +function wmAssetColour(value, allowEmpty, swatches, solid, label) { + var box = $('
'), select = $('').attr('aria-label', label).val(/^#[0-9a-f]{6}$/i.test(value) ? value : '#000000').appendTo(advanced); + picker.on('input', function() { + var colour = this.value; + if (!select.find('option').filter(function() { return this.value === colour; }).length) select.append($('
- +
@@ -859,38 +876,30 @@ -
-
-
-
- Nothing in here works yet. The aim is to have a nice color picker somehow. -
- - - - - - - - - - - - - - -
Background Color
Link Outline Color
Scale ColorsSome pleasant way to design the bandwidth color scale goes in here???
-
-
-
- Cancel - Save -
-
-
- In the future, this form will allow you to set the various color variables at the Map level. For now, you can control these through a direct modification of your Weathermap configuration files. -
+
'> +
+ +
+
+ +

+
+ + +

+
+

+
+

+
+ +
+
+ + +
+
diff --git a/weathermap-cacti-plugin.php b/weathermap-cacti-plugin.php index a6ec5735..f6029119 100644 --- a/weathermap-cacti-plugin.php +++ b/weathermap-cacti-plugin.php @@ -203,11 +203,8 @@ print ''; - print wm_liveview_image_html($map, $id); - print $map->imap->subHTML('LEGEND:'); - print $map->imap->subHTML('TIMESTAMP'); - print $map->imap->subHTML('NODE:'); - print $map->imap->subHTML('LINK:'); + $map->imageuri = '?action=liveviewimage&id=' . rawurlencode((string)$id); + print $map->MakeHTML('weathermap_live_imap'); chdir($orig_cwd);