-
Notifications
You must be signed in to change notification settings - Fork 75
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #577 from OpenGeoscience/heatmap-example-controls
Add controls to the heatmap example.
- Loading branch information
Showing
8 changed files
with
450 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,109 @@ | ||
| extends ../common/templates/index.jade | ||
|
|
||
| block append mainContent | ||
| div#controls | ||
| .form-group(title="The data set to plot.") | ||
| label(for="dataset") Data Set | ||
| select#dataset(param-name="dataset", placeholder="Activity") | ||
| option(value="adderall", url="AdderallCities2015.csv" title="9555 points") Adderall | ||
| option(value="cities", url="cities.csv" title="30101 points") U.S. Cities | ||
| option(value="earthquakes", url="earthquakes.json" title="1.3 million points") Earthquakes | ||
| span#points-loaded | ||
| .form-group(title="Number of points. Leave blank for the entire original data set. If a smaller number, only a subset of points will be shown. If a larger number, some of the data will be duplicated with random offsets.") | ||
| label(for="points") Number of Points | ||
| input#points(type="number" min="1" step="100") | ||
| span#points-shown | ||
| .form-group(title="Delay between movement and heatmap recalculation in milliseconds.") | ||
| label(for="updateDelay") Update Delay (ms) | ||
| input#updateDelay(type="number" placeholder="50" min=0) | ||
| .form-group(title="Opacity of heatmap layer (0 to 1).") | ||
| label(for="opacity") Opacity | ||
| input#opacity(type="number" placeholder="0.75" min=0 max=1 step=0.05) | ||
| .form-group(title="Value to map to minimum intensity. Leave blank to auto calculate.") | ||
| label(for="minIntensity") Min. Intensity | ||
| input#minIntensity(type="number") | ||
| .form-group(title="Value to map to maximum intensity. Leave blank to auto calculate.") | ||
| label(for="maxIntensity") Max. Intensity | ||
| input#maxIntensity(type="number") | ||
| .form-group(title="Radius of center of points in pixels.") | ||
| label(for="radius") Radius | ||
| input#radius(type="number" placeholder="25" min=1) | ||
| .form-group(title="Radius of blur around points in pixels.") | ||
| label(for="blurRadius") Blur Radius | ||
| input#blurRadius(type="number" placeholder="15" min=0) | ||
| .form-group(title="Color Gradient. Entries with intensities of 0 and 1 are needed to form a valid color gradient.") | ||
| label Color Gradient | ||
| table.gradient | ||
| tr | ||
| th(title="Intensity. 0 is minimum, 1 is maximum") I | ||
| th(title="Red channel, 0 to 255") R | ||
| th(title="Green channel, 0 to 255") G | ||
| th(title="Blue channel, 0 to 255") B | ||
| th(title="Alpha channel, 0 to 1") A | ||
| tr | ||
| td | ||
| input#gradI1(type="number" min=0 max=1 step=0.01) | ||
| td | ||
| input#gradR1(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradG1(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradB1(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradA1(type="number" min=0 max=1 step=0.01) | ||
| tr | ||
| td | ||
| input#gradI2(type="number" min=0 max=1 step=0.01) | ||
| td | ||
| input#gradR2(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradG2(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradB2(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradA2(type="number" min=0 max=1 step=0.01) | ||
| tr | ||
| td | ||
| input#gradI3(type="number" min=0 max=1 step=0.01) | ||
| td | ||
| input#gradR3(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradG3(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradB3(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradA3(type="number" min=0 max=1 step=0.01) | ||
| tr | ||
| td | ||
| input#gradI4(type="number" min=0 max=1 step=0.01) | ||
| td | ||
| input#gradR4(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradG4(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradB4(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradA4(type="number" min=0 max=1 step=0.01) | ||
| tr | ||
| td | ||
| input#gradI5(type="number" min=0 max=1 step=0.01) | ||
| td | ||
| input#gradR5(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradG5(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradB5(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradA5(type="number" min=0 max=1 step=0.01) | ||
| tr | ||
| td | ||
| input#gradI6(type="number" min=0 max=1 step=0.01) | ||
| td | ||
| input#gradR6(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradG6(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradB6(type="number" min=0 max=255 step=1) | ||
| td | ||
| input#gradA6(type="number" min=0 max=1 step=0.01) | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| #controls { | ||
| overflow-x: hidden; | ||
| overflow-y: auto; | ||
| position: absolute; | ||
| left: 10px; | ||
| top: 80px; | ||
| z-index: 1; | ||
| border-radius: 5px; | ||
| border: 1px solid grey; | ||
| box-shadow: 1px 1px 3px black; | ||
| opacity: 0.5; | ||
| transition: opacity 250ms ease; | ||
| background: #CCC; | ||
| color: black; | ||
| padding: 4px; | ||
| font-size: 14px; | ||
| max-height: calc(100% - 100px); | ||
| min-width: 310px; | ||
| } | ||
| #controls:hover { | ||
| opacity: 1; | ||
| } | ||
| #controls .form-group { | ||
| margin-bottom: 0; | ||
| } | ||
| #controls label { | ||
| min-width: 120px; | ||
| } | ||
| #controls #points { | ||
| width: 100px; | ||
| } | ||
| #controls #points-loaded,#controls #points-shown { | ||
| display: inline-block; | ||
| font-size: 11px; | ||
| padding-left: 5px; | ||
| } | ||
| #controls table input { | ||
| width: 55px; | ||
| } | ||
| #controls table th { | ||
| text-align: center; | ||
| } |
Oops, something went wrong.