jay.chang/ibms-dome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[Frontend] 測試頁面(forgeTest2.html): 加上熱圖的圖示、熱圖顏色更改成四色

Browse Source
This commit is contained in:
wanli 2023-01-05 16:48:35 +08:00
parent 36b081d775
commit 8a57331696
2 changed files with 93 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
Frontend/forgetTest2.html
View File

@ -47,6 +47,10 @@
<button type="button" class="btn btn-dark" onclick="cancelTransparentModel()">取消透明物件</button>
<button type="button" class="btn btn-danger" onclick="proFile()">剖面</button>
<button type="button" class="btn btn-dark" onclick="getLevels()">取得levels</button>
<div style="height: 50px">
<canvas id="iot-heatmap-legend" width="300" height="50"></canvas>
</div>
<button type="button" class="btn btn-info" onclick="showHeat()">顯示熱圖圖示</button>
<!--<input id="lightBar" type="range" min="0" max="100" step="5" onchange="changeLightPower()">亮度-->
<!-- <input type="range">Main Axis</input> -->
</div>
@ -191,7 +195,9 @@
<script>
var curLightIsOpen = true;
var light;
//var light;
var cavas;
this.canvas = document.getElementById('iot-heatmap-legend');
$(document).ready(function () {
//launchViewer('dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6dnNjb2RlX2ZvcmdlX3Rlc3QvJUUzJTgwJTkwJUU1JThGJUIwJUU1JThDJTk3JUU0JUI4JUFEJUU4JThGJUIxJUU1JUE0JUE3JUU2JUE4JTkzJUUzJTgwJTkxQVJDLm53ZA');
@ -351,16 +357,16 @@
}
function openOrCloseLight() {
if (light != null) {
//if (light != null) {
if (curLightIsOpen) {
curLightIsOpen = false;
setLightOpenOrClose(curLightIsOpen, light);
setLightOpenOrClose(curLightIsOpen);//, light
}
else {
curLightIsOpen = true;
setLightOpenOrClose(curLightIsOpen, light);
}
setLightOpenOrClose(curLightIsOpen);//, light
}
//}
}
function changeColorHotspot() {
@ -396,6 +402,41 @@
profile();
}
function showHeat() {
const labels = [
`${(10).toFixed(2) }${"°C"}`,
`${(40 / 2).toFixed(2)}${"°C"}`,
`${(30).toFixed(2) }${"°C"}`
];
const colorStops = ['blue', 'green', 'yellow', 'red'];
createHeatmapRect(labels, colorStops);
}
function createHeatmapRect(labels, colorStops) {
if (!this.canvas) {
return;
}
const context = this.canvas.getContext('2d');
let i, len;
context.clearRect(0, 0, 300, 50);
context.fillStyle = 'back';//white
for (i = 0, len = labels.length; i < len; i++) {
let x = 10 + 280 * i / (len - 1);
if (i === len - 1) {
x -= context.measureText(labels[i]).width;
}
else if (i > 0) {
x -= 0.5 * context.measureText(labels[i]).width;
}
context.fillText(labels[i], x, 10);
}
const gradient = context.createLinearGradient(0, 0, 300, 0);
for (i = 0, len = colorStops.length; i < len; i++) {
gradient.addColorStop(i / (len - 1), colorStops[i]);
}
context.fillStyle = gradient;
context.fillRect(10, 20, 280, 20);
}

81
Frontend/js/forge/modeltest.js
View File

@ -4,12 +4,14 @@ var targetFloorZ;
var elevatorSpeed;
var allDbIdsStr;
let bulbLight;//點燈
let spotLight;//聚光燈
var spotLight;//聚光燈
var myDataList;//設備清單
var viewableData;
var dataVizExtn;
var spriteColorRed;
var levels;//剖面用
var light;
let pointLightHelper;
function launchViewer(urn) {
var av = Autodesk.Viewing;
@ -71,7 +73,7 @@ function onDocumentLoadSuccess(doc) {
var currSelection = viewer.getSelection();
var domElem = document.getElementById('id_printer');
domElem.innerText = currSelection[0];
var a = newLight();
/*var a = newLight();*/
//var color = new THREE.Vector4(255 / 255, 0, 0, 1);
@ -464,8 +466,8 @@ function onDocumentLoadSuccess(doc) {
//spotLight.target = cube;
//viewer.scene.add(spotLight);
//var light = newLight();
/*newLight();*/
//light = newLight();
newLight();
}
@ -480,7 +482,7 @@ async function addHotPoint(data) {
const spriteIcon = "https://d2zqnmauvnpnnm.cloudfront.net/assets-1/images/circle.svg"; //"/img/forge/hotspot.svg";
const style = new DataVizCore.ViewableStyle(viewableType, spriteColor, spriteIcon);
var a = newLight();
//function onSpriteClicked(event) {
// console.log(`Sprite clicked: ${event.dbId}`);
//}
@ -519,6 +521,7 @@ async function addHotPoint(data) {
event.hasStopped = true;
if (event != undefined && event != null) {
if (event.dbId >= 10 && event.dbId <= 13) {//event.dbId > 0 && event.dbId < 19
setLightValues(20, 0x00ff00)
console.log(`Sprite clicked: ${event.dbId}`);
openHotspotModal();
}
@ -1139,8 +1142,10 @@ async function loadHeatmaps(model) {
// Setup surface shading
await dataVizExtn.setupSurfaceShading(model, heatmapData);
//dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]);
dataVizExtn.registerSurfaceShadingColors("temperature", [0xff0000, 0x0000ff]);
const sensorColors = [0x0000ff, 0x00ff00, 0xffff00, 0xff0000];//0 ~ 1 藍綠黃紅
//dataVizExtn.registerSurfaceShadingColors("co2", [0x00ff00, 0xff0000]); 0~1
dataVizExtn.registerSurfaceShadingColors("temperature", sensorColors);//[0xff0000, 0x0000ff]
function getSensorValue(device, sensorType) {
return sensorVals[parseInt(device.id.slice(-1)) - 1]; // 值: 0~1之間
@ -1382,33 +1387,31 @@ async function newLight() {
//angle - 光從其上界為 Math.PI / 2 的方向散射的最大角度。
//半影 - 由於半影而衰減的聚光燈錐體的百分比。取值介於 0 和 1 之間。默認值為零。
//decay - 光沿光的距離變暗的量。
spotLight = new THREE.SpotLight(0xffffff, 200, 20, 0.6, 0.5, 10);//0xffffff 80, 10 //15, 20 , Math.PI / 12
spotLight.position.set(43.72, -15.65, -44.96); //set(-17.33, 51.03, -2.52); // -7.58, 18.20, -0.25 -44.96
spotLight.castShadow = false;
spotLight.visible = true;
//var geom = new THREE.BoxGeometry(); //create 幾何對象 -17.33, 51.03, -4.52
//var material = new THREE.MeshLambertMaterial({ color: 0xffff00 });//0xff0000
//var cube = new THREE.Mesh(geom, material);
//cube.position.set(43.72, -15.65, -46); //set(-17.33, 51.03, -10);//-4.52 // -7.58, 18.20, -1
//cube.scale.set(0.5, 0.5, 0.5);
//viewer.scene.add(cube);
//spotLight.target = cube;
//spotLight = new THREE.SpotLight(0xff0000, 200, 20, 0.6, 0.5, 10);//0xffffff 80, 10 //15, 20 , Math.PI / 12
//spotLight.position.set(43.72, -15.65, -44.96); //set(-17.33, 51.03, -2.52); // -7.58, 18.20, -0.25 -44.96
//spotLight.castShadow = false;
//spotLight.visible = true;
spotLight.target.position.set(43.72, -15.65, -60);// -15.65 -48
viewer.scene.add(spotLight.target);
//spotLight.target.position.set(43.72, -15.65, -60);// -15.65 -48
//viewer.scene.add(spotLight.target);
viewer.scene.add(spotLight);
//viewer.scene.add(spotLight);
viewer.impl.sceneUpdated(true);
//viewer.impl.sceneUpdated(true);
//return spotLight;
//加入點燈光
//bulbLight = new THREE.PointLight(0xff0000, 50, 20, 2);//0xff0000
//bulbLight.position.set(43.72, -15.65, -44.96);//17.880840301513672
//bulbLight.castShadow = true;
//viewer.scene.add(bulbLight);
//viewer.impl.sceneUpdated(true);
bulbLight = new THREE.PointLight(0xff0000, 50, 20, 2);//0xff0000
bulbLight.position.set(43.72, -15.65, -44.96);//17.880840301513672
bulbLight.castShadow = true;
bulbLight.visible = true;
viewer.scene.add(bulbLight);
//pointLightHelper = new THREE.PointLightHelper(pointLight);
//viewer.scene.add(pointLightHelper);
viewer.impl.sceneUpdated(true);
}
//-------------- 更改燈光範圍 --------------------------
@ -1418,23 +1421,31 @@ function setLightPower(value) {
viewer.impl.sceneUpdated(true);
}
function setLightValues(intensity, distance, angle, penumbra, decay) {
function setLightValues(intensity, color) {// distance, angle, penumbra, decay,
viewer.scene.remove(spotLight)
spotLight.intensity = intensity;
spotLight.distance = distance;
spotLight.angle = angle;
spotLight.penumbra = penumbra;
spotLight.decay = decay;
//spotLight.distance = distance;
//spotLight.angle = angle;
//spotLight.penumbra = penumbra;
//spotLight.decay = decay;
var tempcolor = new THREE.Color().setHex(color);
spotLight.color = tempcolor;
viewer.impl.sceneUpdated(true);
viewer.scene.add(spotLight);
viewer.impl.sceneUpdated(true);
}
function setLightOpenOrClose(value, light) {
function setLightOpenOrClose(value) {//, light
if (value) {
light.visible = true;
//light.visible = true;
//spotLight.visible = true;
bulbLight.visible = true;
}
else {
light.visible = false;
//light.visible = false;
//spotLight.visible = false;
bulbLight.visible = false;
}
viewer.impl.sceneUpdated(true);
}