Skip to content

Commit

Permalink
Style tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@lilleyse
lilleyse committed Apr 30, 2019
1 parent fe52af3 commit 72e3501
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 67 deletions.
68 changes: 28 additions & 40 deletions Apps/Sandcastle/gallery/Labels SDF.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@
padding: 4px;
border-radius: 4px;
}

</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
Expand All @@ -38,23 +37,20 @@
<input type="text" size="5" data-bind="value: outlineWidth">
</td>
</tr>

<tr>
<td>Scale</td>
<td>
<input type="range" min="0.1" max="20.0" step="0.01" data-bind="value: scale, valueUpdate: 'input'">
<input type="text" size="5" data-bind="value: scale">
</td>
</tr>

<tr>
<td class="header">Outline Color</td>
</tr>
<tr>
<td>Color</td>
<td><select data-bind="options: outlineColors, value: outlineColor"></select></td>
</tr>

<tr>
<td class="header">Texture Atlas Stats</td>
</tr>
Expand All @@ -70,7 +66,6 @@
function startup(Cesium) {
'use strict';
//Sandcastle_Begin

function getColor(colorName, alpha) {
var color = Cesium.Color[colorName.toUpperCase()];
return Cesium.Color.fromAlpha(color, parseFloat(alpha));
Expand All @@ -80,8 +75,8 @@

// The viewModel tracks the state of our mini application.
var viewModel = {
outlineWidth: 0.75,
scale: 1.0,
outlineWidth : 0.75,
scale : 1.0,
outlineColor : 'Red',
outlineColors : ['Red', 'Green', 'Blue', 'Yellow', 'Gray', 'Black']
};
Expand All @@ -95,50 +90,43 @@
// Create a label collection with two labels
var labels = viewer.scene.primitives.add(new Cesium.LabelCollection());
var label = labels.add({
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
text : 'Philadelphia',
fillColor: Cesium.Color.WHITE,
backgroundColor: Cesium.Color.BLACK,
font : '48px Calibri',
style: Cesium.LabelStyle.FILL_AND_OUTLINE
position : Cesium.Cartesian3.fromDegrees(-75.1641667, 39.9522222),
text : 'Philadelphia',
fillColor: Cesium.Color.WHITE,
backgroundColor: Cesium.Color.BLACK,
font : '48px Calibri',
style: Cesium.LabelStyle.FILL_AND_OUTLINE
});

var morgantown = labels.add({
position : Cesium.Cartesian3.fromDegrees(-79.9559, 39.6295),
text : 'Morgantown',
fillColor: Cesium.Color.YELLOW,
font : '24px Calibri',
outlineColor: Cesium.Color.BLUE,
outlineWidth: 2.0,
style: Cesium.LabelStyle.FILL_AND_OUTLINE
position : Cesium.Cartesian3.fromDegrees(-79.9559, 39.6295),
text : 'Morgantown',
fillColor: Cesium.Color.YELLOW,
font : '24px Calibri',
outlineColor: Cesium.Color.BLUE,
outlineWidth: 2.0,
style: Cesium.LabelStyle.FILL_AND_OUTLINE
});

var atlasStats = document.getElementById("atlasStats");
var atlasStats = document.getElementById('atlasStats');

Cesium.knockout.getObservable(viewModel, 'outlineWidth').subscribe(
function(newValue) {
label.outlineWidth = parseFloat(newValue);
}
);
Cesium.knockout.getObservable(viewModel, 'outlineWidth').subscribe(function(newValue) {
label.outlineWidth = parseFloat(newValue);
});

Cesium.knockout.getObservable(viewModel, 'scale').subscribe(
function(newValue) {
label.scale = parseFloat(newValue);
}
);
Cesium.knockout.getObservable(viewModel, 'scale').subscribe(function(newValue) {
label.scale = parseFloat(newValue);
});

Cesium.knockout.getObservable(viewModel, 'outlineColor').subscribe(
function(newValue) {
label.outlineColor = getColor(newValue, 1.0);
}
);
Cesium.knockout.getObservable(viewModel, 'outlineColor').subscribe(function(newValue) {
label.outlineColor = getColor(newValue, 1.0);
});

Sandcastle.addToggleButton('Debug Atlas', labels._billboardCollection.debugTextureAtlas, function(checked) {
labels._billboardCollection.debugTextureAtlas = checked;
Sandcastle.addToggleButton('Debug Atlas', labels._billboardCollection.debugShowTextureAtlas, function(checked) {
labels._billboardCollection.debugShowTextureAtlas = checked;
});

var outlineDelta = 0.1;

var fontDelta = -1.0;
var fontSize = 48.0;
var minFontSize = 1.0;
Expand All @@ -160,7 +148,7 @@
if (fontSize >= maxFontSize || fontSize <= minFontSize) {
fontDelta *= -1.0;
}
morgantown.font = fontSize + "px Calibri";
morgantown.font = fontSize + 'px Calibri';
});
//Sandcastle_End
Sandcastle.finishedLoading();
Expand Down
5 changes: 5 additions & 0 deletions CHANGES.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
Change Log
==========

### 1.58 - 2019-06-03

##### Additions :tada:
* Reworked label rendering to use signed distance fields for crisper text. [#7730](https://github.com/AnalyticalGraphicsInc/cesium/pull/7730)

### 1.57 - 2019-05-01

##### Additions :tada:
Expand Down
2 changes: 1 addition & 1 deletion Source/Scene/Billboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -975,7 +975,7 @@ define([
},

/**
* The outline width of this Billboard. Effective only for SDF billboards like Label glyphs.
* The outline width of this Billboard in pixels. Effective only for SDF billboards like Label glyphs.
* @memberof Billboard.prototype
* @type {Number}
* @private
Expand Down
6 changes: 3 additions & 3 deletions Source/Scene/BillboardCollection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -294,7 +294,7 @@ define([
*
* @default false
*/
this.debugTextureAtlas = defaultValue(options.debugTextureAtlas, false);
this.debugShowTextureAtlas = defaultValue(options.debugShowTextureAtlas, false);

/**
* The billboard blending option. The default is used for rendering both opaque and translucent billboards.
Expand Down Expand Up @@ -1952,8 +1952,8 @@ define([
commandList.push(command);
}

if (this.debugTextureAtlas) {
if (this.debugCommand === undefined) {
if (this.debugShowTextureAtlas) {
if (!defined(this.debugCommand)) {
this.debugCommand = createDebugCommand(this, frameState.context);
}

Expand Down
44 changes: 21 additions & 23 deletions Source/Scene/LabelCollection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,10 +84,10 @@ define([
var glyphFontSize = 48; // Font size in pixels
var glyphBuffer = 2; // Whitespace buffer around a glyph in pixels
var glyphRadius = 8; // How many pixels around the glyph shape to use for encoding distance
var glyphCutoff = 0.25; // How much of the radius (relative) is used for the inside part the glyph
var glyphCutoff = 0.25; // How much of the radius (relative) is used for the inside part the glyph

function getCSSValue(element, property) {
return document.defaultView.getComputedStyle(element,null).getPropertyValue(property);
return document.defaultView.getComputedStyle(element, null).getPropertyValue(property);
}

var fontInfoCache = {};
Expand All @@ -96,7 +96,7 @@ define([
*/
function getFontInfo(font) {
var fontInfo = fontInfoCache[font];
if (fontInfo) {
if (defined(fontInfo)) {
return fontInfo;
}

Expand All @@ -107,16 +107,16 @@ define([
document.body.appendChild(div);

var fontFamily = getCSSValue(div,'font-family');
var fontSize = getCSSValue(div,'font-size').replace('px','');
var fontSize = getCSSValue(div,'font-size').replace('px', '');
var fontStyle = getCSSValue(div,'font-style');
var fontWeight = getCSSValue(div,'font-weight');

document.body.removeChild(div);
fontInfo = {
fontFamily: fontFamily,
fontSize: fontSize,
fontStyle: fontStyle,
fontWeight: fontWeight
fontFamily : fontFamily,
fontSize : fontSize,
fontStyle : fontStyle,
fontWeight : fontWeight
};
fontInfoCache[font] = fontInfo;

Expand Down Expand Up @@ -149,17 +149,17 @@ define([
var ctx = canvas.getContext('2d');
var width = ctx.measureText(character).width;
var dimensions = {
bounds: {
minx: 0,
maxx: canvas.width,
miny: 0,
maxy: canvas.height
bounds : {
minx : 0,
maxx : canvas.width,
miny : 0,
maxy : canvas.height
},
width: width,
height: canvas.height,
ascent: 0,
descent: 0,
fontSize: glyphFontSize
width : width,
height : canvas.height,
ascent : 0,
descent : 0,
fontSize : glyphFontSize
};

return {
Expand Down Expand Up @@ -275,12 +275,10 @@ define([

// Convert to RGBA grayscale
var glyphData = new Uint8Array(width * height * 4);
for (var i = 0; i < width; i++)
{
for (var j = 0; j < height; j++)
{
for (var i = 0; i < width; i++) {
for (var j = 0; j < height; j++) {
var baseIndex = (j * width + i);
var alpha =sdf[baseIndex];
var alpha = sdf[baseIndex];
glyphData[baseIndex * 4 + 0] = alpha;
glyphData[baseIndex * 4 + 1] = alpha;
glyphData[baseIndex * 4 + 2] = alpha;
Expand Down

0 comments on commit 72e3501

Please sign in to comment.