Extending Cesium Viewer Toolbar

[Wes Tibbitts]

Are there any hooks into the Cesium Viewer toolbar so that I can add buttons or should I just getElementById and edit the html that way?

[Scott Hunter]

Generally, I would recommend creating your own buttons via normal JS/HTML/CSS (or using whatever toolkit you want).  The safest approach would be build your UI outside of the cesium container, and then use CSS to position your UI elements over top of the stock UI in whatever desired location.  Alternatively, you can dig around and find the toolbar div and appendChild directly to that element.  I'd suggest examining the source code to see what the different DOM elements are used for, and to make sure your elements won't get clobbered, since it's generally not documented.

On Fri, May 29, 2015 at 5:38 PM, Wes Tibbitts <wtib...@gmail.com> wrote:

Are there any hooks into the Cesium Viewer toolbar so that I can add buttons or should I just getElementById and edit the html that way?

--
You received this message because you are subscribed to the Google Groups "cesium-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cesium-dev+...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Left Gully]

On Friday, May 29, 2015 at 5:38:08 PM UTC-4, Wes Tibbitts wrote:

Are there any hooks into the Cesium Viewer toolbar so that I can add buttons or should I just getElementById and edit the html that way?

Wes,

Good advice from Scott; here's an example of how I appended my buttons to the Cesium toolbar div; so far, they seem to fit in portrait or landscape, even on small-screen mobile device;

its important to .setAttribute("class", "btn-mwac btn3dView-mwac"); to reference in the CSS formatting of the buttons;

I'm interested in your resolution, if you'll post back later;

thanks,

Jon 

here's the JS function (SCROLL WAY DOWN to see the CSS snippet):

addMwacButtonsToCesiumViewerToolbar : function (divContainer){

//20150131; Add MWAC's buttons into Cesium's toolbar...

// the divContainer passed to this function is the actual node, no need to getElementById from the document

try{

if (divContainer !== null) {

mwacCesiumToolbar = divContainer;

//ADD 3-D BUTTON to reset 3-D "home" view

var t = document.createTextNode('3-D View');       // Create a text node

var btn3dView = document.createElement('INPUT');       // Create pushbutton node

btn3dView.appendChild(t);   // Append text node to button

btn3dView.setAttribute("type", "button");

btn3dView.setAttribute("class", "btn-mwac btn3dView-mwac");

btn3dView.setAttribute("name", "btn3dView");

btn3dView.setAttribute("value", "3D");

btn3dView.setAttribute("style","padding-left:1px;");

btn3dView.setAttribute("title", "Reset 3D View of Mt Washington's Eastern Slope...");

//ADD EVENT LISTENERS

btn3dView.addEventListener("click", function() {

//cap.flyToMWACin3D(CesiumMapViewer, 44.24931, -71.224917, 1500,  44.265434, -71.281140, 1500) //20150403, new parameters

//flyToMWACin3D: function(CesiumMapViewer, targetLat, targetLng, targetHeightMeters, cameraHeading, cameraPitch, cameraRange);

cap.flyToMWACin3D(CesiumMapViewer, 44.265434, -71.281140, 5000, 225, 0.0, 3000);

//-71.3035000, 44.2708500,6288 is the summit of Mount Washington

//what are these coords? 44.265434, -71.281140

//20150324; reset 3 sliders to middle 0 position, and reset the var storing their value to clear any previous value

rngLeftRight.value = 0;

rotateCameraAroundTarget = 0;

rngUpDown.value = 0;

tiltCameraLookUpDownAtTarget = 0;

rngInOut.value = 0;

zoomCameraInOut = 0;

});

//CesiumMapViewer.scene.mode = 3;

divContainer.appendChild(btn3dView); // append button to div

//ADD STEEP SLOPES BUTTON to toggle overlay on/off

var t = document.createTextNode('Steep Slopes');       // Create a text node

var btnSteepSlopes = document.createElement('INPUT');       // Create pushbutton node

btnSteepSlopes.appendChild(t);   // Append text node to button

btnSteepSlopes.setAttribute("type", "button");

btnSteepSlopes.setAttribute("class", "btn-mwac btnSteepSlopes-mwac");

btnSteepSlopes.setAttribute("name", "btnSteepSlopes");

btnSteepSlopes.setAttribute("value", "Steep");

btnSteepSlopes.setAttribute("style","padding-left:0px;");

btnSteepSlopes.setAttribute("title", "Toggle visibility of Steep Slopes overlay...");

//ADD EVENT LISTENERS

btnSteepSlopes.addEventListener("click", function() {

cap.toggleCesium_SteepSlopesOverlay(CesiumMapViewer)

rngSteepSlopes.value = 0.5

});

divContainer.appendChild(btnSteepSlopes); // append button to div

//ADD NWS Doppler RADAR mosaic BUTTON to toggle overlay on/off

var t = document.createTextNode('Radar');       // Create a text node

var btnRadar = document.createElement('INPUT');       // Create pushbutton node

btnRadar.appendChild(t);   // Append text node to button

btnRadar.setAttribute("type", "button");

btnRadar.setAttribute("class", "btn-mwac btnRadar-mwac"); 

btnRadar.setAttribute("name", "btnRadar");

btnRadar.setAttribute("value", "Radar");

btnRadar.setAttribute("style","padding-left:0px;");

btnRadar.setAttribute("title", "Toggle visibility of NWS Dopler Radar overlay...");

//ADD EVENT LISTENER

btnRadar.addEventListener("click", function() {

cap.toggleCesium_RadarOverlay(CesiumMapViewer)});

divContainer.appendChild(btnRadar); // append button to div

//ADD MWObs BUTTON to toggle Mesonet overlay on/off

var t = document.createTextNode('MWObs');       // Create a text node

var btnMWObs = document.createElement('INPUT');       // Create pushbutton node

btnMWObs.appendChild(t);   // Append text node to button

btnMWObs.setAttribute("type", "button");

btnMWObs.setAttribute("class", "btn-mwac btnMWObs-mwac"); 

btnMWObs.setAttribute("name", "btnMWObs");

btnMWObs.setAttribute("value", "MWObs");

btnMWObs.setAttribute("style","padding-left:0px;");

btnMWObs.setAttribute("title", "Toggle visibility of MWObs Mesonet overlay...");

//ADD EVENT LISTENER

btnMWObs.addEventListener("click", function() {

toggleCesium_MWObsOverlay(CesiumMapViewer)});

divContainer.appendChild(btnMWObs); // append button to div

//ADD MWAC BUTTON to toggle Avalanche Polygons overlay on/off

var t = document.createTextNode('MWAC');       // Create a text node

var btnMWAC = document.createElement('INPUT');       // Create pushbutton node

btnMWAC.appendChild(t);   // Append text node to button

btnMWAC.setAttribute("type", "button");

btnMWAC.setAttribute("class", "btn-mwac btnMWAC-mwac"); 

btnMWAC.setAttribute("name", "btnMWAC");

btnMWAC.setAttribute("value", "MWAC");

btnMWAC.setAttribute("style","padding-left:0px;");

btnMWAC.setAttribute("title", "Toggle visibility of MWAC Avalanche Advisory overlay...");

//ADD EVENT LISTENER

btnMWAC.addEventListener("click", function() {

toggleCesium_MWACOverlay()});

divContainer.appendChild(btnMWAC); // append button to div

}

return mwacCesiumToolbar;

} catch(error){

strMessage = '...an error occurred in addMwacButtonsToCesiumViewerToolbar: ' + error.message;

console.log(strMessage);

return;

}

}, //end addMwacButtonsToCesiumViewerToolbar

/** output toolbar HTML looks like this

<div id="mwac_cesiumToolbar" style= "display: inline-block; margin: 5px; padding: 2px 5px; position: absolute;">

<form>

<input style="font-size:12px; height:25px; width:100px; display:inline-block; margin: 5px; padding: 2px 5px;" name="btn3dView" type="button" value="3D View" onclick="mwac-map.cap.threeD_toggleOnOff()" </input>

<input style="font-size:12px; height:25px; width:100px; display:inline-block; margin: 5px; padding: 2px 5px;" name="btnSteepSlopes" type="button" value="Steep Slopes" onclick="mwac-map.cap.steep_slopes_toggleOnOff()" </input>

<input style="font-size:12px; height:25px; width:100px; display:inline-block; margin: 5px; padding: 2px 5px;" name="btnIRradar" type="button" value="IR Radar" </input>

<input style="font-size:12px; height:25px; width:100px; display:inline-block; margin: 5px; padding: 2px 5px;" name="btnNEXRAD_radar" type="button" value="NEXRAD Radar" </input>

<input style="font-size:12px; height:25px; width:100px; display:inline-block; margin: 5px; padding: 2px 5px;" name="btnWeatherAlerts" type="button" value="Weather Alerts" </input>

</form>

</div>  

*/

here's a snippet of the CSS:

.btn-mwac {

-moz-box-sizing: border-box;

-moz-user-select: none;

-webkit-user-select: none;

background: #303336;

border: 2px outset buttonface;

border-radius: 14%;

box-sizing: border-box;

color: #edffff;

cursor: pointer;

display: inline-block;

fill: #edffff;

height: 32px;

margin: 2px 3px;

overflow: hidden;

padding: 2px 0px 2px;

position: relative;

user-select: none;

vertical-align: middle;

width: 32px;

z-index: 0;

}

.btn-mwac:focus {

color: #fff;

fill: #fff;

border-color: #ea4;

outline: none;

}

.btn-mwac:hover {

color: #fff;

fill: #fff;

background: #48b;

border-color: #aef;

box-shadow: 0 0 8px #fff;

}

.btn-mwac:active {

color: #000;

fill: #000;

background: #adf;

border-color: #fff;

box-shadow: 0 0 8px #fff;

}

  

.btn3dView-mwac {

font-size: 12px;

}

.btnSteepSlopes-mwac {

font-size: 9px;

padding: 2px 0px 2px;

}

.btnRadar-mwac {

font-size: 9px;

padding: 2px 0px 2px;

}

.btnMWObs-mwac {

font-size: 9px;

padding: 2px 0px 2px;

}

.btnMWAC-mwac {

font-size: 9px;

padding: 2px 0px 2px;

}

[Mike LP]

Thanks Left...

[apps....@gmail.com]

thanks, here is another implementation with jquery.

function CreateBtn(text) {

var self = this;
this.$el = $('<div class="cesium-button cesium-toolbar-button " onmouseout="selectzone()" onmouseover="noselectzone()"/>');
this.$el.append(text);
new Button(this.$el, {
click: function() {
alert('hi');
}
});
return this;
}
var divContainer = $('.cesium-viewer-toolbar');

this.animationToggle = CreateBtn('TEST');

$(this.animationToggle).on('click', function(e, data) {
//call action
});

divContainer.append(this.animationToggle.$el);