From a2b6c90c127f105e41f1af61b2261a0a3a4776db Mon Sep 17 00:00:00 2001
From: Sven Schneider <icedoggy@gmx.de>
Date: Thu, 15 Oct 2020 16:37:18 +0200
Subject: [PATCH] added colorbar image to display next to pressure sim. legend.
updated streamlines (point cloud) by fixing an error in stoeckachStreams.js
(czml failuer)
---
public/iStoeck.html | 16 ++-
public/iStoeckHM.html | 15 ++-
public/iStoeckHMGeoJSON.html | 15 ++-
public/iStoeckHexgrid_2m.html | 14 ++-
public/imgs/colorbarJET.png | Bin 0 -> 1635 bytes
public/stoeckachStreams.js | 194 +++++++---------------------------
6 files changed, 88 insertions(+), 166 deletions(-)
create mode 100644 public/imgs/colorbarJET.png
diff --git a/public/iStoeck.html b/public/iStoeck.html
index 166464f..fcdd633 100644
--- a/public/iStoeck.html
+++ b/public/iStoeck.html
@@ -34,10 +34,18 @@
<div id="cesiumContainer" class="pagecesium">
<div id="legend">
- <p>Pressure (Pa) <br>
- <h6>Values + 112976</h6>
- </p>
- <div class="inner"></div>
+ <table>
+ <tr style="height: 30px;vertical-align: top;">
+ <td colspan="2">Pressure (Pa) </td>
+ <td></td>
+ </tr>
+ <tr>
+ <td rowspan="1" style="height:100px;text-align:right;"><img src="imgs/colorbarJET.png" height="100" width="20"> </td>
+ <td>- 113006<p style="margin-top: 78px;"><p> - 112976</td>
+ </tr>
+ </table>
+
+
</div>
</div>
diff --git a/public/iStoeckHM.html b/public/iStoeckHM.html
index d9ee710..16f4252 100644
--- a/public/iStoeckHM.html
+++ b/public/iStoeckHM.html
@@ -33,12 +33,23 @@
<script src="stoeckachJSONtoTiles.js"></script>
<div id="cesiumContainer" class="pagecesium">
- <div id="legend">
+ <!-- <div id="legend">
<p>Pressure (Pa) <br>
<h6>Values + 112976</h6>
</p>
<div class="inner"></div>
- </div>
+ </div> -->
+ <div id="legend">
+ <table>
+ <tr style="height: 30px;vertical-align: top;">
+ <td colspan="2">Pressure (Pa) </td>
+ <td></td>
+ </tr>
+ <tr>
+ <td rowspan="1" style="height:100px;text-align:right;"><img src="imgs/colorbarJET.png" height="100" width="20"> </td>
+ <td>- 113006<p style="margin-top: 78px;"><p> - 112976</td>
+ </tr>
+ </table>
</div>
diff --git a/public/iStoeckHMGeoJSON.html b/public/iStoeckHMGeoJSON.html
index e47422f..8a1fb71 100644
--- a/public/iStoeckHMGeoJSON.html
+++ b/public/iStoeckHMGeoJSON.html
@@ -33,12 +33,23 @@
<script src="stoeckachGeoJ.js"></script>
<div id="cesiumContainer" class="pagecesium">
- <div id="legend">
+ <!-- <div id="legend">
<p>Pressure (Pa) <br>
<h6>Values + 112976</h6>
</p>
<div class="inner"></div>
- </div>
+ </div> -->
+ <div id="legend">
+ <table>
+ <tr style="height: 30px;vertical-align: top;">
+ <td colspan="2">Pressure (Pa) </td>
+ <td></td>
+ </tr>
+ <tr>
+ <td rowspan="1" style="height:100px;text-align:right;"><img src="imgs/colorbarJET.png" height="100" width="20"> </td>
+ <td>- 113006<p style="margin-top: 78px;"><p> - 112976</td>
+ </tr>
+ </table>
</div>
diff --git a/public/iStoeckHexgrid_2m.html b/public/iStoeckHexgrid_2m.html
index f3dadad..595430c 100644
--- a/public/iStoeckHexgrid_2m.html
+++ b/public/iStoeckHexgrid_2m.html
@@ -34,11 +34,23 @@
<div id="cesiumContainer" class="pagecesium">
<div id="legend">
+ <table>
+ <tr style="height: 30px;vertical-align: top;">
+ <td colspan="2">Pressure (Pa) </td>
+ <td></td>
+ </tr>
+ <tr>
+ <td rowspan="1" style="height:100px;text-align:right;"><img src="imgs/colorbarJET.png" height="100" width="20"> </td>
+ <td>- 113006<p style="margin-top: 78px;"><p> - 112976</td>
+ </tr>
+ </table>
+
+ <!-- <div id="legend">
<p>Pressure (Pa) <br>
<h6>Values + 112976</h6>
</p>
<div class="inner"></div>
- </div>
+ </div> -->
</div>
diff --git a/public/imgs/colorbarJET.png b/public/imgs/colorbarJET.png
new file mode 100644
index 0000000000000000000000000000000000000000..a88f8fecd8b9a562f7635d4d1f10d731e2603f1b
GIT binary patch
literal 1635
zcmX9<e@v5C6#dWvDxe|T5LalK&Eg*jXf_L3XB!OclbFGTMFvEmLw*TZgswoLR0TIo
zqzzdXvXEh5O9pGCt;mp{9c56alZGiEFkq}0M2iJ1Xr-k)@3TqUbKg1lp8LLc`+Dv3
zSlVaLdwVE~@`*Va6_4+CC~8OIt{p%Dcg#9`xfRFLC#bg3fMo=4Wk-G%Nl`kLmqX-^
zcz5B+q+*KNJ4oJcMsdqIEc#2Lzmz11vm_;=qD-n#lzTxEdLdI1^ik;1P@Xe(_Y;b8
ze;5-L`9*2!(Cqs;lUwZJwL|{i9wLvb!oHyWRRig(MLr%?13>|RM@I1W_crX!7KyZ1
z-@M!h4F<y%W*ss@o7|J`EXgBBUsM=eMs@FjeJ;n<0Xl5_!8*k^D04C|1&%$X_{|+|
z((1smVW9hN(x{Z3mR<bj6(IgjOO4d?k*_qW9B7k48jnZ5f!<o~#{uaykPi?$owms?
z1&U}}77ETF(Fzehks$X6d66M=FFErRheMpt6ax7fRp3}X<2niXJmhi?spo`z5i5f6
z3`BN`DzMIEBeeuG8T4ZDae#S-IRPeY6Owopj2G{L>HixN^>J*aPO||<28ozS?w<ma
zLL{?Ha%{SDULimApUKyL0U|5Z;81wc6QasTjOa8N&P&2nlES|bW`beLz@(wDJ(KZ%
z%;q1|AS~-JDz)78WU%2fOHD6Kv8XmGM`n;ax2)r0k!+(63073z)ZBC_I~UamIi#GH
z$tS+5avZ@y{c|06y#cI#h2%QgP|8{k(8LIhU=&XwSz_ZbN7CTwKno-DGLo#Yf>A-z
zL&UEa5;~?{^~6nPnZ<&Hlz(5TO%qw>FhOENt#GR%gyrhmR(+SfXcBMUyHU}^V<~Jy
z(>siuidG&=|MKy4zGF1;yjOsJV;pdJ@_hSRUYaJPu)@MZ)sgVL_O&MQxL<@|bp`z0
z67c=j3BQQB7k$(Dz0bBfrb><bkT2d674YWPf5PIjvBO;%?)aI<(%5qgc&Quh@C&X?
zZK$nxHpA3*PjBtqn2&9&6YBH5+t<9p(E3tpYe=EvFEvbCNfU32ANoa9TJFPiBn692
zoq1jX!qwOUUcYsAI={kH4il?P&tuK6sS(e3A{N`Vh;64KS}?<O(%H>prM+kXKQ2ao
z+FB3blogx$K+%Ftj&T6p6~AVh6>YAI>(?Fj`<3=yA^Iuaj&G<nz0NDRZ2oZjOhawl
zR(SzW@R$P^d)zThj_{uh+BQo@ax5GNF8>;1zn__@8<<4fpO^~{Gm`Q`Fy&zSipfmb
zCcubE@-&mI!>KC~;s@7lR6h9~tj6&&<am;>?9*+>t)n{bbO{PHLMCPEt=usxbI91G
zV1_I;JS^T`VDp=gG3IJ4CSOFtEiz}#^$2BzU1G$IU9f0HsYVpha%C1UG{dlo`DHNA
znW5^&;5GL=*C}$Bg{7zFP*6lmh-oKUl{{cN_krPA(%T#7L^L89f~1~l^K22AXd=P>
zkvs=xi6mqHcxDH{{3vCZyI?-~_FWOZUE~TLLR-B*_=)J!bD;+1sy4M6$)(qh087jo
zTrp+jlrqh(!Drw5qR@iew2N=3Y5}Ixx!AHn-36Te4RBmAo~pFEvjtdH0?a<F(gKI|
z0yq8vd}z|eCy&XAdkOa-&@2$S8-Md8*Fy>r52ygQqNQd6ciGLoT5j?Ia-W6N-*%*3
X4|jZ}S45ccA3()K$40fCNWbzw!p|)2
literal 0
HcmV?d00001
diff --git a/public/stoeckachStreams.js b/public/stoeckachStreams.js
index be50277..9a2e5d1 100644
--- a/public/stoeckachStreams.js
+++ b/public/stoeckachStreams.js
@@ -234,8 +234,8 @@ $(function () {
nameOverlay.style.backgroundColor = 'green';
- var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
- viewer.dataSources.add(dataSourcePromise);
+ // var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
+ // viewer.dataSources.add(dataSourcePromise);
/*
// Information about the currently selected feature
@@ -440,163 +440,43 @@ viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
+
+ function showLegend() {
+ $("#legend").css("display", "block");
+ }
+ function hideLegend() {
+ $("#legend").css("display", "none");
+ }
+
+ // Legend - Colour Table
+ function emptyColourTable() {
+ $(".inner").empty();
+ }
+
+
+
+ function setHeightTable() {
+ $(".inner").append( "<table>" +
+ "<tr><td class='outlined' bgcolor='red'> </td><td> > 3.5 </td></tr>" +
+ "<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 3 </td></tr>" +
+ "<tr><td class='outlined' bgcolor='#ffb400'></td><td> 2.5 </td></tr>" +
+ "<tr><td class='outlined' bgcolor='yellow'></td><td> 2</td></tr>" +
+ "<tr><td class='outlined' bgcolor='#89FF8F'></td><td> 1.5 </td></tr>" +
+ "<tr><td class='outlined' bgcolor='cyan'></td><td> 1 </td></tr>" +
+ "<tr><td class='outlined' bgcolor='blue'></td><td> 0.5 </td></tr>" +
+ "</table>" );
+ }
- /*
- return Cesium.when(tileset.readyPromise).then(function (tileset) {
- tileset.style = new Cesium.Cesium3DTileStyle({
-
- color: {
-
- conditions: [
-
-
- ["${Latitude} >= 48.8170", "color('purple', 0.5)"],
-
- ["${Latitude} >= 48.7950", "color('red')"],
-
- ["${Latitude} >= 48.7830", "color('orange')"],
-
- ["${Latitude} >= 48.7710", "color('yellow')"],
-
- ["${Latitude} >= 48.7690", "color('lime')"],
-
- ["${Latitude} >= 48.7570", "color('cyan')"],
-
- ["${Latitude} >= 48.7470", "color('CORNFLOWERBLUE')"],
-
- ["${Latitude} >= 48.7370", "color('DARKMAGENTA')"],
-
- ["true", "color('lightblue')"]
-
- ]
-
- }
-
- });
- });
-*/
-
-function showLegend() {
- $("#legend").css("display", "block");
-}
-function hideLegend() {
- $("#legend").css("display", "none");
-}
-
-// Legend - Colour Table
-function emptyColourTable() {
- $(".inner").empty();
-}
-
-/*
-function setHeightTable() {
- $(".inner").append( "<table>" +
- "<tr><td class='outlined' bgcolor='red'> </td><td> 113007 </td></tr>" +
- "<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 113001 </td></tr>" +
- "<tr><td class='outlined' bgcolor='#ffb400'></td><td> 112996 </td></tr>" +
- "<tr><td class='outlined' bgcolor='yellow'></td><td> 112991</td></tr>" +
- "<tr><td class='outlined' bgcolor='#00ff00'></td><td> 112986 </td></tr>" +
- "<tr><td class='outlined' bgcolor='cyan'></td><td> 112981 </td></tr>" +
- "<tr><td class='outlined' bgcolor='blue'></td><td> 112976 </td></tr>" +
- "</table>" );
-}
-*/
-
-/*
-function setHeightTable() {
- $(".inner").append( "<table>" +
- "<tr><td class='outlined' bgcolor='red'> </td><td> x </td></tr>" +
- "<tr><td class='outlined' bgcolor='green'></td><td> y </td></tr>" +
- "<tr><td class='outlined' bgcolor='blue'></td><td> z </td></tr>" +
- "</table>" );
-}
-*/
-
-
-function setHeightTable() {
- $(".inner").append( "<table>" +
- "<tr><td class='outlined' bgcolor='red'> </td><td> > 3.5 </td></tr>" +
- "<tr><td class='outlined' bgcolor='#ff6b21'></td><td> 3 </td></tr>" +
- "<tr><td class='outlined' bgcolor='#ffb400'></td><td> 2.5 </td></tr>" +
- "<tr><td class='outlined' bgcolor='yellow'></td><td> 2</td></tr>" +
- "<tr><td class='outlined' bgcolor='#89FF8F'></td><td> 1.5 </td></tr>" +
- "<tr><td class='outlined' bgcolor='cyan'></td><td> 1 </td></tr>" +
- "<tr><td class='outlined' bgcolor='blue'></td><td> 0.5 </td></tr>" +
- "</table>" );
-}
-
- return Cesium.when(tileset.readyPromise).then(function (tileset) {
- tileset.style = new Cesium.Cesium3DTileStyle({
-
- color: "color('white',1)",
- /*color: {
-
- conditions: [
-
-
-
- ['Number(${MeasuredHeight}) >= 40', 'rgb(255,0,0)'],
-
- ['Number(${MeasuredHeight}) >= 30.', 'rgb(255, 93 , 0)'],
-
- ['Number(${MeasuredHeight}) >= 25', 'rgb(255, 180, 0)'],
-
- ['Number(${MeasuredHeight}) >= 20', 'rgb(255,255,0)'],
-
- ['Number(${MeasuredHeight}) >= 15', 'rgb(0,255,0)'],
-
- ['Number(${MeasuredHeight}) >= 10', 'rgb(0,0,255)'],
-
- ['Number(${MeasuredHeight}) >= 7.5', 'rgb(75, 0, 130)'],
-
- ['Number(${MeasuredHeight}) >= 4', 'rgb(248, 100, 221)'],
-
- ['Number(${MeasuredHeight}) >= 0.1', 'rgb(248, 100, 221)'],
+ return Cesium.when(tileset.readyPromise).then(function (tileset) {
+ tileset.style = new Cesium.Cesium3DTileStyle({
+
+ color: "color('white',1)",
- ['true', 'color("lightblue")']
-
- ]
-
- }
- */
-
- });
- showLegend();
- setHeightTable();
- });
-
- /*
- return Cesium.when(tileset.readyPromise).then(function (tileset) {
- tileset.style = new Cesium.Cesium3DTileStyle({
-
- color: {
-
- conditions: [
-
- ['Number(${YearOfConstruction}) >= 2015', 'rgb(127,201,127)'],
-
- ['Number(${YearOfConstruction}) >= 2005', 'rgb(190,174,212)'],
-
- ['Number(${YearOfConstruction}) >= 1990', 'rgb(253,192,134)'],
-
- ['Number(${YearOfConstruction}) >= 1975', 'rgb(255,255,153)'],
-
- ['Number(${YearOfConstruction}) >= 1950', 'rgb(56,108,176)'],
-
- ['Number(${YearOfConstruction}) >= 1920', 'rgb(240,2,127)'],
-
- ['Number(${YearOfConstruction}) >= 1900', 'rgb(191,91,23)'],
-
- ['Number(${YearOfConstruction}) >= 1800', 'rgb(102,102,102)'],
-
- ['true', 'color("lightblue")']
-
- ]
-
- }
-
- });
- }); */
+ });
+ showLegend();
+ setHeightTable();
+ });
+
});
\ No newline at end of file
--
GitLab