Full Screen NOC View Map for 1080p or 1440p

jwusm

Is it possible to have Solarwinds Orion auto-detect the screen resolution size for a full screen NOC view map and adjust accordingly?  I have 1080p and 1440p wall displays and have been able to get the sizing fairly close for the 1080p, but the 1440p looks horrible when displaying the same maps.  I've tried the Custom HTML fix that was posted on Thwack a while back, but it breaks the ability to hover over the icons and display the node information.

jwusm

I was able to solve my own problem using the original Custom HTML from Full Screen NOC View - Adding your own Custom Styling .

I re-used their CSS code to move the edit buttons and hide the "Custom HTML" portion of the screen.  Instead of stretching the image, I used the max-device-width function to detect the screen resolution and the moz-transform function to adjust the screen zoom accordingly.  I then built my network Atlas maps on top of a background image sized at 1860x730 (it was a US map with the different locations on it), which was a perfect fit for my 1080p display board with the Chrome address bar and tabs still visible.  The code below contains zoom factors (at the very end of the code) for 1440p, 1080p, and a 1440x900 PC monitor.  You can include as many sizes here as you like, as long as they are a 16:9 ratio.

<style>

/*Button styling for the "Map" & "Custom HTML" edit links*/

div[sw-widget-title='Map'] a.EditResourceButton,

div[sw-widget-title='Custom HTML'] a.EditResourceButton {

background-color: #008CBA !important;

    border: none !important;

    padding: 15px 32px !important;

    text-align: center !important;

    text-decoration: none !important;

    display: inline-block !important;

    margin: 4px 2px !important;

    cursor: pointer !important;

-webkit-border-radius: 2px !important;

-moz-border-radius: 2px !important;

border-radius: 2px !important;

}

/*Button hover state styling for the "Map" & "Custom HTML" edit links*/

div[sw-widget-title='Map'] a.EditResourceButton:hover,

div[sw-widget-title='Custom HTML'] a.EditResourceButton:hover {

-webkit-box-shadow: 0 0 16px 0 rgba(207,235,245,0.10), 0 0 50px 0 rgba(207,235,245,0.05) !important;

-moz-box-shadow: 0 0 16px 0 rgba(207,235,245,0.10), 0 0 50px 0 rgba(207,235,245,0.05) !important;

box-shadow: 0 0 16px 0 rgba(207,235,245,0.10), 0 0 50px 0 rgba(207,235,245,0.05) !important;

background-color: #06a4d8 !important;

text-decoration: none !important;

}

/*Edit style of link text*/

div[sw-widget-title='Map'] .sw-btn-resource span,

div[sw-widget-title='Custom HTML'] .sw-btn-resource span {

font-size: 1.25em !important;

font-weight: bold !important;

color: white !important;

line-height: 1.25em !important;

}

div[sw-widget-title='Map'] .sw-btn-resource .sw-btn-t:hover,

div[sw-widget-title='Custom HTML'] .sw-btn-resource .sw-btn-t:hover {

text-decoration: none !important;

}

/* Moves link to top of all elements and to the top left of screen */

div[sw-widget-title='Map'] a.EditResourceButton {

z-index: 999;

position: fixed !important;

top: 60px !important;

}

/* adds text to end of edit link for readability */

div[sw-widget-title='Map'] .sw-btn-resource .sw-btn-t:after{

content: " THE MAP" !important;

}

/*******************************************

CSS targeting the Custom HTML Component

- Raises the edit link we styled above for the "Custom HTML" component over top of the map so it is accessible

- Removes component panel, header, etc. Basically, it hides everything except the edit link

*******************************************/

/* overwrites SolarWinds styling and moves link to top of all elements and to the top left of screen */

div[sw-widget-title='Custom HTML'] {

z-index: 500 !important;

position: fixed !important;

width: 20vh !important;

height: 10vh !important;

background: transparent !important;

box-shadow: none !important;

margin: 0 !important;

padding: 0 0 0 20px !important;

border: 0 !important;

}

div[sw-widget-title='Custom HTML'] > .HeaderBar {

border: 0 !important;

padding: 0 !important;

}

/* hides everything other than the edit link */

div[sw-widget-title='Custom HTML'] a.HelpButton,

div[sw-widget-title='Custom HTML'] a.sw-widget__title,

div[sw-widget-title='Custom HTML'] > .ResourceContent {

display: none !important;

}

/* adds text to end of edit link for readability */

div[sw-widget-title='Custom HTML'] .sw-btn-resource .sw-btn-t:after {

content: " THE PAGE CSS" !important;

}

/* If resolution is 2560x1440 zoom to 133% */

@media(max-device-width:2560px){

  html{

    -moz-transform: scale(1.33, 1.33);

    zoom: 1.33;

    zoom: 133%;

  }

}

/* If resolution is 1920x1080 zoom to 100% */

@media(max-device-width:1920px){

  html{

    -moz-transform: scale(1.00, 1.00);

    zoom: 1.00;

    zoom: 100%;

  }

}

/* If resolution is 1440x900 zoom to 75% */

@media(max-device-width:1440px){

  html{

    -moz-transform: scale(0.75, 0.75);

    zoom: 0.75;

    zoom: 75%;

  }

}

</style>