Data added for the second house

Rafael
jaume-nualart 7 months ago
parent 8bcb15372d
commit d2fe919944
  1. 3
      web-html/TraHus-Code_report.txt
  2. 36
      web-html/config/datamap.js
  3. 76
      web-html/css/dash.css
  4. 222
      web-html/dash.html
  5. 8
      web-html/js/bootstrap-datepicker.min.js
  6. 2
      web-html/js/bootstrap-datetimepicker.min.js
  7. 17178
      web-html/js/d3.v4.js
  8. 425
      web-html/js/dash.js
  9. 2
      web-html/js/jquery-3.7.0.min.js
  10. 18706
      web-html/js/jquery-ui.js
  11. 1
      web-html/js/moment.min.js

@ -1,4 +1,5 @@
Total Report:
Trahus Code Report
2023-10-10
---
All Files: js/dash.js, ../py/import.py, ../py/main.py, dash.html, home.html, css/dash.css, config/config.js, config/datamap.js, ../py/README.md
Number of Lines: 3563

@ -10,50 +10,44 @@ var PROJECTS =
"image": "imgs/house.jpg",
"map": "imgs/samplemap.png",
"map_url": "http://",
"range_years_month": ["2018-07", "2023-08"], // Defina the range of time you want to be able to choose, for example["2018-07", "2023-08"]
"families": [
{
"reference": "fam1", // A code to be read by software, not by a human
"name":"xxxx", // Human name for the family. Can content any character, words o sentence.
"type":"", // type of parameter that the members of the family (sensors) messure: temperature, humidity, what else?. Use a one-member family for the external mesures, like external temperature. Or: you also can group any group of sensors and create a family with them.
"listOfSensors":["Charly-Fam-S1.1-Temp", "Charly-Fam1-S1.2-Temp", "", "Charly-Fam1-S1.3-Temp", "Charly-Fam1-S1.4-Temp"],
"listOfSensors":["MP1_1.Temp_MP1_1_Pos1.celsius", "MP1_1.RF_MP1_1_Pos1.percentRH", "MP1_1.Temp_MP1_1_Pos2.celsius", "MP1_1.RF_MP1_1_Pos2.percentRH", "MP1_1.Temp_MP1_1_Pos3.celsius", "MP1_1.RF_MP1_1_Pos3.percentRH", "MP1_1.Temp_MP1_1_Pos4.celsius", "MP1_1.RF_MP1_1_Pos4.percentRH", "MP1_1.Temp_MP1_1_Pos5.celsius", "MP1_1.RF_MP1_1_Pos5.percentRH", "MP1_1.Temp_MP1_1_Pos6.celsius", "MP1_1.RF_MP1_1_Pos6.percentRH", "MP1_2.Temp_MP1_2_Pos1.celsius", "MP1_2.RF_MP1_2_Pos1.percentRH", "MP1_2.Temp_MP1_2_Pos2.celsius", "MP1_2.RF_MP1_2_Pos2.percentRH", "MP1_2.Temp_MP1_2_Pos3.celsius", "MP1_2.RF_MP1_2_Pos3.percentRH", "MP1_2.Temp_MP1_2_Pos4.celsius", "MP1_2.RF_MP1_2_Pos4.percentRH", "MP1_2.Temp_MP1_2_Pos5.celsius", "MP1_2.RF_MP1_2_Pos5.percentRH", "MP1_2.Temp_MP1_2_Pos6.celsius", "MP1_2.RF_MP1_2_Pos6.percentRH", "MP1_3.RelDisp_MP1_4.percent", "MP1_3.AbsDisp_MP1_4.mm", "MP1_3.RelDisp_MP2_X.percent", "MP1_3.AbsDisp_MP2_X.mm", "MP1_3.RelDisp_MP2_Y.percent", "MP1_3.AbsDisp_MP2_Y.mm", "MP1_5.Temp_MP1_5_Pos1.celsius", "MP1_5.RF_MP1_5_Pos1.percentRH", "MP1_5.MC_MP1_5_Pos1.percentEMC", "MP1_5.Resist_MP1_5_Pos1.Mohm", "MP1_5.Temp_MP1_5_Pos2.celsius", "MP1_5.RF_MP1_5_Pos2.percentRH", "MP1_5.MC_MP1_5_Pos2.percentEMC", "MP1_5.Resist_MP1_5_Pos2.Mohm", "MP1_5.Temp_MP1_5_Pos3.celsius", "MP1_5.RF_MP1_5_Pos3.percentRH", "MP1_5.MC_MP1_5_Pos3.percentEMC", "MP1_5.Resist_MP1_5_Pos3.Mohm", "MP1_5.TempCond_MP1_5.celsius", "MP1_5.RFCond_MP1_5.percentRH", "Internal.Temp_SC4", "Internal.Count_SC4", "Temp_MP4_1_Pos1", "MP4_1.RF_MP4_1_Pos1", "MP4_1.Temp_MP4_1_Pos2", "MP4_1.RF_MP4_1_Pos2", "MP4_1.Temp_MP4_1_Pos3", "MP4_1.RF_MP4_1_Pos3", "MP4_1.Temp_MP4_1_Pos4", "MP4_1.RF_MP4_1_Pos4", "MP4_1.Temp_MP4_1_Pos5", "MP4_1.RF_MP4_1_Pos5", "MP4_1.Temp_MP4_1_Pos6", "MP4_1.RF_MP4_1_Pos6", "MP4_1.AirPres_MP4_1", "Temp_MP4_2_Pos1", "MP4_2.RF_MP4_2_Pos1", "MP4_2.Temp_MP4_2_Pos2", "MP4_2.RF_MP4_2_Pos2", "MP4_2.Temp_MP4_2_Pos3", "MP4_2.RF_MP4_2_Pos3", "MP4_2.Temp_MP4_2_Pos4", "MP4_2.RF_MP4_2_Pos4", "MP4_2.Temp_MP4_2_Pos5", "MP4_2.RF_MP4_2_Pos5", "MP4_2.Temp_MP4_2_Pos6", "MP4_2.RF_MP4_2_Pos6","AvgWind_Weather", "WEATHER.MomWind_Weather", "WEATHER.Temp_Weather", "WEATHER.DirWind_Weather", "WEATHER.RF_Weather", "WEATHER.RainDay_Weather", "WEATHER.RainRate_Weather", "WEATHER.AirPres_Weather", "AvgWind_Weather", "Internal.Temp_SC1.celsius", "Internal.Count_SC1.celsius", "WEATHER.MomWind_Weather", "WEATHER.Temp_Weather", "WEATHER.DirWind_Weather", "WEATHER.RF_Weather", "WEATHER.RainDay_Weather", "WEATHER.RainRate_Weather", "WEATHER.AirPres_Weather"],
"position":[5, 10, 15, 20, 25, 30]
},
[
{
"reference": "fam1", // A code to be read by software, not by a human
"name":"xxxx", // Human name for the family. Can content any character, words o sentence.
"type":"", // type of parameter that the members of the family (sensors) messure: temperature, humidity, what else?. Use a one-member family for the external mesures, like external temperature. Or: you also can group any group of sensors and create a family with them.
"listOfSensors":["Charly-Fam-S1.1-Temp", "Charly-Fam1-S1.2-Temp", "", "Charly-Fam1-S1.3-Temp", "Charly-Fam1-S1.4-Temp"],
"position":[5, 10, 15, 20, 25, 30]
}
]
{
"reference": "fam2", // A code to be read by software, not by a human
"name":"xxxx", // Human name for the family. Can content any character, words o sentence.
"listOfSensors":["Charly-Fam-S1.1-Temp", "Charly-Fam1-S1.2-Temp", "", "Charly-Fam1-S1.3-Temp", "Charly-Fam1-S1.4-Temp"],
"position":[5, 10, 15, 20, 25, 30]
}
]
},
{
"xname": "housepilgayan",
"hname": "Hus Pilgayan",
"xname": "housepilgatan",
"hname": "Hus Pilgatan",
"type": "house", // normal= a standard house.
"subtitle": `At Pilgatan, we have about 120 sensors as well. It is only Temperature+Humidity sensors. The sensors are connected to two sensor cards, similarly as it is in Charlie. Here, the data files start with v1- and v6- for floor 1 and floor 6, respectively.`,
"image": "imgs/housepilgatan.png",
"map": "imgs/housepilgatan_map.png",
"map_url": "https://maps.app.goo.gl/HHj2Xua5doRufLQF6",
"range_years_month": ["2021-02", "2023-10"], // Defina the range of time you want to be able to choose, for example["2018-07", "2023-08"]
"families": [
{
"reference": "fam1", // A code to be read by software, not by a human
"name":"xxxx", // Human name for the family. Can content any character, words o sentence.
"type":"", // type of parameter that the members of the family (sensors) messure: temperature, humidity, what else?. Use a one-member family for the external mesures, like external temperature. Or: you also can group any group of sensors and create a family with them.
"listOfSensors":["a", "b"],
"position":[5, 10, 15, 20, 25, 30]
},
[
{
"reference": "fam1", // A code to be read by software, not by a human
"name":"xxxx", // Human name for the family. Can content any character, words o sentence.
"type":"", // type of parameter that the members of the family (sensors) messure: temperature, humidity, what else?. Use a one-member family for the external mesures, like external temperature. Or: you also can group any group of sensors and create a family with them.
{
"reference": "fam2", // A code to be read by software, not by a human
"name":"xxxx", // Human name for the family. Can content any character, words o sentence.
"listOfSensors":["a", "b"],
"position":[5, 10, 15, 20, 25, 30]
}
]
}
]
}
]

@ -101,3 +101,79 @@
.c3-grid-lines {
width:100%;
}
.card-img-top {
width:150px;
}
#myhouse {
background-color: #3e3e3e;
color:#ffffff;
padding:1.5em;
}
#templates {
margin-top:10px;
margin-bottom:10px;
}
.frama {
margin-top:20px;
width:100%;
}
.col {
border-right: 1rem solid #3e3e3e;
padding: 3px;
overflow: auto;
width: 30%;
float:left;
resize:horizontal
}
.frame div:hover {
border-bottom:1px dashed #c51313;
}
.resizable-column {
overflow: auto;
}
.resizable-column:hover {
cursor: col-resize;
}
div span, h5, h4, svg, canvas, .col div {
cursor: default;
}
.mysvg {
/* Set the width of each div */
margin: 10px; /* Set the margin to create space between divs */
background-color: #dddcdc; /* Optional background color for clarity */
border-bottom: 4px solid #7f7f81;
display:block;
}
div svg {
display:block;
}
.myheight {
height:360px;
}
div.sortable-item {
cursor:move;
}
#tooltip {
display: block;
position: absolute;
background-color: white;
padding: 5px;
border: 1px solid #ccc;
}
/*------------------*/
.tooltip {
position: absolute;
background-color: rgba(255, 255, 255, 0.8);
padding: 5px;
border: 1px solid #ddd;
border-radius: 3px;
pointer-events: none;
font-size: 12px;
}
.axis {
fill: none;
font-size: 10px;
shape-rendering: crispEdges;
}

@ -18,6 +18,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <link href="./css/dash.css" rel="stylesheet"> -->
<style>
.card-img-top {
@ -98,20 +99,14 @@
</style>
<!-- JS libs-->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>
<!-- <script src="https://d3js.org/d3.v7.min.js"></script> -->
<!-- <script src="https://d3js.org/d3.v6.min.js"></script> -->
<!-- <script src="https://unpkg.com/d3-horizon-chart@0.0.5"></script> -->
<script src="./js/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<script src="./js/jquery-ui.js"></script>
<script src="./js/d3.v4.js"></script>
<script src="./js/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js" integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="./js/bootstrap-datepicker.min.js" integrity="sha512-LsnSViqQyaXpD4mBBdRYeP6sRwJiJveh2ZIbW41EBrNmKxgr/LFZIiWT6yr+nycvhvauz8c2nYMhrP80YhG7Cw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="./js/moment.min.js"></script>
<script src="./js/bootstrap-datetimepicker.min.js"></script>
<!-- JS local & config-->
<script src="./js/d3-horizon-chart0.0.5.js"></script>
@ -225,13 +220,7 @@
<div id="SelectFamSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PYFamSensor" name="PYFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select sensor family</option>
<option value="S1">family S1</option>
<option value="S2">family S2</option>
<option value="S3">family S3</option>
<option value="S4">family S4</option>
<option value="S5">family S5</option>
<option value="V1">family V1</option>
</select>
</div>
<p>&nbsp;</p>
@ -239,12 +228,7 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PYParameter" name="PYParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mô"></option>
</select>
</div>
<p>&nbsp;</p>
@ -253,13 +237,7 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PYYear" name="PYYear" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select year</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
</div>
@ -269,7 +247,7 @@
<label for="time">Time</label>
<div class="input-group date" id="grid-timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="PYTime" name="PYTime" type="text" class="timePicker span2">
<input id="PYTime" disabled name="PYTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -294,13 +272,7 @@
<div id="SelectFamSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PMFamSensor" name="PMFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select sensor family</option>
<option value="S1">family S1</option>
<option value="S2">family S2</option>
<option value="S3">family S3</option>
<option value="S4">family S4</option>
<option value="S5">family S5</option>
<option value="V1">family V1</option>
</select>
</div>
<p>&nbsp;</p>
@ -308,12 +280,7 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PMParameter" name="PMParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mô"></option>
</select>
</div>
@ -331,7 +298,7 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="PMTime" name="PMTime" type="text" class="timePicker span2">
<input id="PMTime" disabled name="PMTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -356,13 +323,7 @@
<div id="SelectFamSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PWFamSensor" name="PWFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select sensor family</option>
<option value="S1">family S1</option>
<option value="S2">family S2</option>
<option value="S3">family S3</option>
<option value="S4">family S4</option>
<option value="S5">family S5</option>
<option value="V1">family V1</option>
</select>
</div>
<p>&nbsp;</p>
@ -370,12 +331,7 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PWParameter" name="PWParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mô"></option>
</select>
</div>
<p>&nbsp;</p>
@ -393,7 +349,7 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="PMTime" name="PMTime" type="text" class="timePicker span2">
<input id="PMTime" disabled name="PMTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -419,13 +375,7 @@
<div id="SelectFamSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PDFamSensor" name="PDFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select sensor family</option>
<option value="S1">family S1</option>
<option value="S2">family S2</option>
<option value="S3">family S3</option>
<option value="S4">family S4</option>
<option value="S5">family S5</option>
<option value="V1">family V1</option>
</select>
</div>
<p>&nbsp;</p>
@ -433,12 +383,7 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="PDParameter" name="PDParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mô"></option>
</select>
</div>
<p>&nbsp;</p>
@ -456,7 +401,7 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input placeholder="Disabled Input" disabled id="PDTime" name="PDTime" type="text" class="timePicker span2">
<input placeholder="Disabled Input" disabled id="PDTime" disabled name="PDTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -536,12 +481,7 @@
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GYSensor" name="GYSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option selected>select sensor</option>
<option value="S1:1">sensor 1</option>
<option value="S2:1">sensor 2</option>
<option value="S3:1">sensor 3</option>
<option value="S4:1">sensor 4</option>
<option value="V1:1">sensor 5</option>
</select>
</div>
<p>&nbsp;</p>
@ -549,24 +489,14 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GYParameter" name="GYParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mô"></option>
</select>
</div>
<p>&nbsp;</p>
<div id="gridSelectYear" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<select id="GYYear" name="GYYear" class="form-select" aria-label="grid-yearly-select">
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
</div>
@ -576,7 +506,7 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="GYTime" name="GYTime" type="text" class="timePicker span2">
<input id="GYTime" disabled name="GYTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -600,12 +530,7 @@
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GMSensor" name="GMSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option selected>select sensor</option>
<option value="S1:1">sensor 1</option>
<option value="2:1">sensor 2</option>
<option value="S3:1">sensor 3</option>
<option value="S4:1">sensor 4</option>
<option value="V1:1">sensor 5</option>
</select>
</div>
<p>&nbsp;</p>
@ -613,12 +538,7 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GMParameter" name="GMParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mô"></option>
</select>
</div>
<p>&nbsp;</p>
@ -635,7 +555,7 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="GMTime" name="GMTime" type="text" class="timePicker span2">
<input id="GMTime" disabled name="GMTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -659,12 +579,7 @@
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GWSensor" name="GWSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select sensor</option>
<option value="S1:1">sensor 1</option>
<option value="S2:1">sensor 2</option>
<option value="S3:1">sensor 3</option>
<option value="S4:1">sensor 4</option>
<option value="V1:1">sensor 5</option>
</select>
</div>
<p>&nbsp;</p>
@ -672,12 +587,7 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="GWParameter" name="GWParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mô"></option>
</select>
</div>
<p>&nbsp;</p>
@ -694,7 +604,7 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="GWTime" name="GWTime" type="text" class="timePicker span2">
<input id="GWTime" disabled name="GWTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -779,12 +689,7 @@
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HYFamSensor" name="HYFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select sensor</option>
<option value="S1:1">sensor 1</option>
<option value="S2:1">sensor 2</option>
<option value="S3:1">sensor 3</option>
<option value="S4:1">sensor 4</option>
<option value="V1:1">sensor 5</option>
</select>
</div>
<p>&nbsp;</p>
@ -795,24 +700,14 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HYParameter" name="HYParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mô"></option>
</select>
</div>
<p>&nbsp;</p>
<div id="horizon-optionMonthly" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-calendar3" aria-hidden="true"></i></span>
<select id="HYYear" name="HYYear" class="form-select" aria-label="horizon-yearly-select">
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
</select>
</div>
@ -822,7 +717,7 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="HYTime" name="HYTime" type="text" class="timePicker span2">
<input id="HYTime" disabled name="HYTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -849,12 +744,7 @@
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HMFamSensor" name="HMFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select sensor</option>
<option value="S1:1">sensor 1</option>
<option value="S2:1">sensor 2</option>
<option value="S3:1">sensor 3</option>
<option value="S4:1">sensor 4</option>
<option value="V1:1">sensor 5</option>
</select>
</div>
<p>&nbsp;</p>
@ -865,12 +755,7 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HMParameter" name="HMParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mô"></option>
</select>
</div>
<p>&nbsp;</p>
@ -887,7 +772,7 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="HMTime" name="HMTime" type="text" class="timePicker span2">
<input id="HMTime" disabled name="HMTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -916,12 +801,7 @@
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HWFamSensor" name="HWFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select sensor</option>
<option value="S1:1">sensor 1</option>
<option value="S2:1">sensor 2</option>
<option value="S3:1">sensor 3</option>
<option value="S4:1">sensor 4</option>
<option value="V1:1">sensor 5</option>
</select>
</div>
<p>&nbsp;</p>
@ -932,12 +812,7 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HWParameter" name="HWParameter" class="form-select col-md-3 span2" aria-label="grid-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mo"></option>
</select>
</div>
<p>&nbsp;</p>
@ -955,7 +830,7 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input id="HWTime" name="HWTime" type="text" class="timePicker span2">
<input id="HWTime" disabled name="HWTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->
@ -980,13 +855,7 @@
<div id="SelectSensor" class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HDFamSensor" name="HDFamSensor" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select sensor family</option>
<option value="S1">family S1</option>
<option value="S2">family S2</option>
<option value="S3">family S3</option>
<option value="S4">family S4</option>
<option value="S5">family S5</option>
<option value="V1">family V1</option>
</select>
</div>
<p>&nbsp;</p>
@ -994,12 +863,7 @@
<div class="input-group date">
<span class="input-group-text input-group-addon"><i class="bi bi-list-ul" aria-hidden="true"></i></span>
<select id="HDParameter" name="HDParameter" class="form-select col-md-3 span2" aria-label="parallel-family-select">
<option value="" selected>select parameter</option>
<option value="celsius">Temperature(C°=</option>
<option value="percent">Humidity (%)</option>
<option value="hPa">hPA</option>
<option value="mm">mm</option>
<option value="Mô"></option>
</select>
</div>
<p>&nbsp;</p>
@ -1017,7 +881,7 @@
<label for="time">Time</label>
<div class="input-group date" id="timePicker">
<span class="input-group-text input-group-addon"><i class="bi bi-clock" aria-hidden="true"></i></span>
<input placeholder="Disabled Input" disabled id="PDTime" name="PDTime" type="text" class="timePicker span2">
<input placeholder="Disabled Input" disabled id="PDTime" disabled name="PDTime" type="text" class="timePicker span2">
</div>
</div>
<!-- SUBMIT BUTTON -->

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

17178
web-html/js/d3.v4.js vendored

File diff suppressed because it is too large Load Diff

@ -1,185 +1,3 @@
//////////////////////
// HTML static pieces
var HTML_navBar = `
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="`+homePagageUrl+`">
<img src="imgs/infravis.jpg" alt="" width="30" height="24" class="d-inline-block align-text-top">
TräHus
</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="`+homePagageUrl+`">Home</a>
</li>
</ul>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="http://infravis.se" target="_infravis_se_site" aria-current="page">Powered by Infravis</a>
</li>
</ul>
</div>
</div>
`;
// LIST OF SENSOR NAME and Families.
// Get unique list of families
//var listSensors = ["Internal.Temp_SC1.celsius","Internal.Count_SC1.count","MP1_1.Temp_MP1_1_Pos1.celsius","MP1_1.RF_MP1_1_Pos1.percentRH","MP1_1.Temp_MP1_1_Pos2.celsius","MP1_1.RF_MP1_1_Pos2.percentRH","MP1_1.Temp_MP1_1_Pos3.celsius","MP1_1.RF_MP1_1_Pos3.percentRH","MP1_1.Temp_MP1_1_Pos4.celsius","MP1_1.RF_MP1_1_Pos4.percentRH","MP1_1.Temp_MP1_1_Pos5.celsius","MP1_1.RF_MP1_1_Pos5.percentRH","MP1_1.Temp_MP1_1_Pos6.celsius","MP1_1.RF_MP1_1_Pos6.percentRH","MP1_2.Temp_MP1_2_Pos1.celsius","MP1_2.RF_MP1_2_Pos1.percentRH","MP1_2.Temp_MP1_2_Pos2.celsius","MP1_2.RF_MP1_2_Pos2.percentRH","MP1_2.Temp_MP1_2_Pos3.celsius","MP1_2.RF_MP1_2_Pos3.percentRH","MP1_2.Temp_MP1_2_Pos4.celsius","MP1_2.RF_MP1_2_Pos4.percentRH","MP1_2.Temp_MP1_2_Pos5.celsius","MP1_2.RF_MP1_2_Pos5.percentRH","MP1_2.Temp_MP1_2_Pos6.celsius","MP1_2.RF_MP1_2_Pos6.percentRH","MP1_3.RelDisp_MP1_4.percent","MP1_3.AbsDisp_MP1_4.mm","MP1_3.RelDisp_MP2_X.percent","MP1_3.AbsDisp_MP2_X.mm","MP1_3.RelDisp_MP2_Y.percent","MP1_3.AbsDisp_MP2_Y.mm","MP1_5.Temp_MP1_5_Pos1.celsius","MP1_5.RF_MP1_5_Pos1.percentRH","MP1_5.MC_MP1_5_Pos1.percentEMC","MP1_5.Resist_MP1_5_Pos1.Mohm","MP1_5.Temp_MP1_5_Pos2.celsius","MP1_5.RF_MP1_5_Pos2.percentRH","MP1_5.MC_MP1_5_Pos2.percentEMC","MP1_5.Resist_MP1_5_Pos2.Mohm","MP1_5.Temp_MP1_5_Pos3.celsius","MP1_5.RF_MP1_5_Pos3.percentRH","MP1_5.MC_MP1_5_Pos3.percentEMC","MP1_5.Resist_MP1_5_Pos3.Mohm","MP1_5.TempCond_MP1_5.celsius","MP1_5.RFCond_MP1_5.percentRH"];
var listSensors = ["MP1_1.Temp_MP1_1_Pos1.celsius", "MP1_1.RF_MP1_1_Pos1.percentRH", "MP1_1.Temp_MP1_1_Pos2.celsius", "MP1_1.RF_MP1_1_Pos2.percentRH", "MP1_1.Temp_MP1_1_Pos3.celsius", "MP1_1.RF_MP1_1_Pos3.percentRH", "MP1_1.Temp_MP1_1_Pos4.celsius", "MP1_1.RF_MP1_1_Pos4.percentRH", "MP1_1.Temp_MP1_1_Pos5.celsius", "MP1_1.RF_MP1_1_Pos5.percentRH", "MP1_1.Temp_MP1_1_Pos6.celsius", "MP1_1.RF_MP1_1_Pos6.percentRH", "MP1_2.Temp_MP1_2_Pos1.celsius", "MP1_2.RF_MP1_2_Pos1.percentRH", "MP1_2.Temp_MP1_2_Pos2.celsius", "MP1_2.RF_MP1_2_Pos2.percentRH", "MP1_2.Temp_MP1_2_Pos3.celsius", "MP1_2.RF_MP1_2_Pos3.percentRH", "MP1_2.Temp_MP1_2_Pos4.celsius", "MP1_2.RF_MP1_2_Pos4.percentRH", "MP1_2.Temp_MP1_2_Pos5.celsius", "MP1_2.RF_MP1_2_Pos5.percentRH", "MP1_2.Temp_MP1_2_Pos6.celsius", "MP1_2.RF_MP1_2_Pos6.percentRH", "MP1_3.RelDisp_MP1_4.percent", "MP1_3.AbsDisp_MP1_4.mm", "MP1_3.RelDisp_MP2_X.percent", "MP1_3.AbsDisp_MP2_X.mm", "MP1_3.RelDisp_MP2_Y.percent", "MP1_3.AbsDisp_MP2_Y.mm", "MP1_5.Temp_MP1_5_Pos1.celsius", "MP1_5.RF_MP1_5_Pos1.percentRH", "MP1_5.MC_MP1_5_Pos1.percentEMC", "MP1_5.Resist_MP1_5_Pos1.Mohm", "MP1_5.Temp_MP1_5_Pos2.celsius", "MP1_5.RF_MP1_5_Pos2.percentRH", "MP1_5.MC_MP1_5_Pos2.percentEMC", "MP1_5.Resist_MP1_5_Pos2.Mohm", "MP1_5.Temp_MP1_5_Pos3.celsius", "MP1_5.RF_MP1_5_Pos3.percentRH", "MP1_5.MC_MP1_5_Pos3.percentEMC", "MP1_5.Resist_MP1_5_Pos3.Mohm", "MP1_5.TempCond_MP1_5.celsius", "MP1_5.RFCond_MP1_5.percentRH", "Internal.Temp_SC4", "Internal.Count_SC4", "Temp_MP4_1_Pos1", "MP4_1.RF_MP4_1_Pos1", "MP4_1.Temp_MP4_1_Pos2", "MP4_1.RF_MP4_1_Pos2", "MP4_1.Temp_MP4_1_Pos3", "MP4_1.RF_MP4_1_Pos3", "MP4_1.Temp_MP4_1_Pos4", "MP4_1.RF_MP4_1_Pos4", "MP4_1.Temp_MP4_1_Pos5", "MP4_1.RF_MP4_1_Pos5", "MP4_1.Temp_MP4_1_Pos6", "MP4_1.RF_MP4_1_Pos6", "MP4_1.AirPres_MP4_1", "Temp_MP4_2_Pos1", "MP4_2.RF_MP4_2_Pos1", "MP4_2.Temp_MP4_2_Pos2", "MP4_2.RF_MP4_2_Pos2", "MP4_2.Temp_MP4_2_Pos3", "MP4_2.RF_MP4_2_Pos3", "MP4_2.Temp_MP4_2_Pos4", "MP4_2.RF_MP4_2_Pos4", "MP4_2.Temp_MP4_2_Pos5", "MP4_2.RF_MP4_2_Pos5", "MP4_2.Temp_MP4_2_Pos6", "MP4_2.RF_MP4_2_Pos6","AvgWind_Weather", "WEATHER.MomWind_Weather", "WEATHER.Temp_Weather", "WEATHER.DirWind_Weather", "WEATHER.RF_Weather", "WEATHER.RainDay_Weather", "WEATHER.RainRate_Weather", "WEATHER.AirPres_Weather", "AvgWind_Weather", "Internal.Temp_SC1.celsius", "Internal.Count_SC1.celsius", "WEATHER.MomWind_Weather", "WEATHER.Temp_Weather", "WEATHER.DirWind_Weather", "WEATHER.RF_Weather", "WEATHER.RainDay_Weather", "WEATHER.RainRate_Weather", "WEATHER.AirPres_Weather"];
var listParametersRepeated = [];
// Get families anmes and sensors select optionssensors
var listSensorsOptions = "";
var listFamiliesRepeated = [];
for (var i = 0; i < listSensors.length; i++) {
listFamiliesRepeated.push(listSensors[i].split(".")[0]);
listParametersRepeated.push(listSensors[i].split(".")[2]);
listSensorsOptions += `<option value="${listSensors[i].split(".")[1]}">${listSensors[i].split(".")[1]}</option>`;
}
var listFamiliesRepeated2 = new Set(listFamiliesRepeated);
var listFamilies = Array.from(listFamiliesRepeated2);
var listFamiliesOptions = "";
// Get fammily select options
for (var i = 0; i < listFamilies.length; i++) {
listFamiliesOptions += `<option value="${listFamilies[i]}">${listFamilies[i]}</option>`;
}
var listParametersRepeated2 = new Set(listParametersRepeated);
var listParameters = Array.from(listParametersRepeated2);
var listParametersOptions = "";
// Get parameters select options
for (var i = 0; i < listParameters.length; i++) {
listParametersOptions += `<option value="${listParameters[i]}">${listParameters[i]}</option>`;
}
///////////////////////////////////////////
// Div diagrams buttons: remove, popup:
// Function to remove the div
function removeDiv(button) {
const div = button.parentElement;
div.remove();
}
// Function to open a new window with the div content
function openPopup(button) {
const divContent = button.parentElement.innerHTML;
const newWindow = window.open('', '', 'width=600,height=400');
newWindow.document.write('<html><head><title>Popup Window</title></head><body>');
newWindow.document.write('<div>' + divContent + '</div>');
newWindow.document.write('</body></html>');
newWindow.document.close();
}
function openPopupXX(button) {
const divContent = button.parentElement.innerHTML;
// Open a new window
const newWindow = window.open('', '', 'width=600,height=400');
// Write the basic HTML structure to the new window
newWindow.document.write('<html><head><title>Popup Window</title></head><body>');
// Copy the content of the main page's head to the new window's head
const mainPageHead = document.head;
const newWindowHead = newWindow.document.head;
for (let i = 0; i < mainPageHead.children.length; i++) {
const element = mainPageHead.children[i];
if (element.tagName === 'LINK' || element.tagName === 'STYLE' || element.tagName === 'SCRIPT') {
// Copy link, style, and script elements
newWindowHead.appendChild(element.cloneNode(true));
}
}
// Write the content of the DIV to the new window's body
newWindow.document.write('<div>' + divContent + '</div>');
// Close the HTML structure
newWindow.document.write('</body></html>');
// Close the new window document
newWindow.document.close();
}
// Open popup only for Hotizon in <canvas>
function openPopupCanvas(button) {
function exportCanvasToNewWindow(dataURLs, textContents, titles, initialTitle) {
// Open a new window
const newWindow = window.open('', '', 'width=800,height=400');
// Write the basic HTML structure to the new window
newWindow.document.write('<html><head><title>Canvas Export</title></head><body>');
// Create an <h2> element for the initialTitle and prepend it to the container
const initialH2 = newWindow.document.createElement('h2');
initialH2.textContent = initialTitle;
newWindow.document.body.appendChild(initialH2);
// Create a container div for canvas, text, and titles
const containerDiv = newWindow.document.createElement('div');
containerDiv.style.display = 'flex';
containerDiv.style.flexWrap = 'wrap'; // Allow elements to wrap to the next line
// Loop through each canvas, text, and title
for (let i = 0; i < dataURLs.length; i++) {
// Create a div for each canvas, text, and title
const div = newWindow.document.createElement('div');
div.style.marginRight = '20px'; // Add spacing between elements
// Create an image element with the captured canvas content
const canvasImage = new Image();
canvasImage.src = dataURLs[i];
div.appendChild(canvasImage);
// Create a <p> element for the text content
const textElement = newWindow.document.createElement('p');
textElement.textContent = textContents[i];
div.appendChild(textElement);
// Create a <span> element for the title content
const titleElement = newWindow.document.createElement('span');
titleElement.className = 'title';
titleElement.textContent = titles[i];
div.appendChild(titleElement);
// Append the div to the container
containerDiv.appendChild(div);
}
// Append the container div to the new window
newWindow.document.body.appendChild(containerDiv);
// Close the HTML structure
newWindow.document.write('</body></html>');
newWindow.document.close();
}
// Get all the canvas, text, and title elements inside the div with id "col-right"
const colRightDiv = document.getElementById('col-right');
const canvasElements = colRightDiv.querySelectorAll('canvas');
const textElements = colRightDiv.querySelectorAll('p');
const titleElements = colRightDiv.querySelectorAll('.title');
// Extract data URLs from canvas elements
const dataURLs = Array.from(canvasElements).map((canvas) => canvas.toDataURL());
// Extract text content from <p> elements
const textContents = Array.from(textElements).map((p) => p.textContent);
// Extract title content from <span class="title"> elements
const titles = Array.from(titleElements).map((span) => span.textContent);
// Define the initialTitle
const initialTitle = "Trä hus data flexiboard , powered by infravis.se"; // Replace with your desired title
// Call the function to export all canvas, text, and title content to a new window
exportCanvasToNewWindow(dataURLs, textContents, titles, initialTitle);
}
/////////////////////////////////////////////
// Check if house var is selected: if not then go back to home.html
@ -218,11 +36,110 @@ document.getElementById("h1_title").innerHTML = h1_title;
document.getElementById("subtitle").innerHTML = subtitle;
/////////////////////////////////
// Get and apply the range of time for the data.
//////////////////////////////////
// LIST OF SENSOR NAME and Families.
// Get the list of sensors, amnd the range_years_month from config/datamap.js
var projectName = myParam;
var listSensors = null;
var range_year_month;
for (var i = 0; i < PROJECTS.items.length; i++) {
if (PROJECTS.items[i].xname === projectName) {
range_year_month = PROJECTS.items[i].range_years_month;
listSensors = PROJECTS.items[i].families[0].listOfSensors;
break;
}
}
// Arrange the range_years_month
var first_year = parseInt(range_year_month[0].split("-")[0], 10);
var first_year_month = range_year_month[0];
var last_year = parseInt(range_year_month[1].split("-")[0], 10);
var last_year_month = range_year_month[1];
// Creta select option according to time range:
listYearOptions = "";
for (var i = last_year; i >= first_year; i--) {
listYearOptions += `<option value="${i}">${i}</option>`;
}
// Get unique list of families
var listParametersRepeated = [];
// Get families anmes and sensors select optionssensors
var listSensorsOptions = "";
var listFamiliesRepeated = [];
for (var i = 0; i < listSensors.length; i++) {
listFamiliesRepeated.push(listSensors[i].split(".")[0]);
listParametersRepeated.push(listSensors[i].split(".")[2]);
listSensorsOptions += `<option value="${listSensors[i].split(".")[1]}">${listSensors[i].split(".")[1]}</option>`;
}
var listFamiliesRepeated2 = new Set(listFamiliesRepeated);
var listFamilies = Array.from(listFamiliesRepeated2);
var listFamiliesOptions = "";
// Get fammily select options
for (var i = 0; i < listFamilies.length; i++) {
listFamiliesOptions += `<option value="${listFamilies[i]}">${listFamilies[i]}</option>`;
}
var listParametersRepeated2 = new Set(listParametersRepeated);
var listParameters = Array.from(listParametersRepeated2);
var listParametersOptions = "";
// Get parameters select options
for (var i = 0; i < listParameters.length; i++) {
listParametersOptions += `<option value="${listParameters[i]}">${listParameters[i]}</option>`;
}
/////////////////////////////////
// ADDING HTML dynamic pieces
// Adding HTML navbar
var HTML_navBar = `
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="`+homePagageUrl+`">
<img src="imgs/infravis.jpg" alt="" width="30" height="24" class="d-inline-block align-text-top">
TräHus
</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="`+homePagageUrl+`">Home</a>
</li>
</ul>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="http://infravis.se" target="_infravis_se_site" aria-current="page">Powered by Infravis</a>
</li>
</ul>
</div>
</div>
`;
document.getElementById("navbar").innerHTML = HTML_navBar;
// AddingSELECT OPTIONS for:
// Time range:
document.getElementById("PYYear").innerHTML = listYearOptions
document.getElementById("GYYear").innerHTML = listYearOptions
document.getElementById("HYYear").innerHTML = listYearOptions
// time range of data
document.getElementById("PYYear").innerHTML = listYearOptions;
document.getElementById("GYYear").innerHTML = listYearOptions;
document.getElementById("HYYear").innerHTML = listYearOptions;
// Families:
document.getElementById("PYFamSensor").innerHTML = listFamiliesOptions;
document.getElementById("PMFamSensor").innerHTML = listFamiliesOptions;
@ -1075,6 +992,132 @@ function getApiUrls() {
///////////////////////////////////////////
// Div diagrams buttons: remove, popup:
// Function to remove the div
function removeDiv(button) {
const div = button.parentElement;
div.remove();
}
// Function to open a new window with the div content
function openPopup(button) {
const divContent = button.parentElement.innerHTML;
const newWindow = window.open('', '', 'width=600,height=400');
newWindow.document.write('<html><head><title>Popup Window</title></head><body>');
newWindow.document.write('<div>' + divContent + '</div>');
newWindow.document.write('</body></html>');
newWindow.document.close();
}
function openPopupXX(button) {
const divContent = button.parentElement.innerHTML;
// Open a new window
const newWindow = window.open('', '', 'width=600,height=400');
// Write the basic HTML structure to the new window
newWindow.document.write('<html><head><title>Popup Window</title></head><body>');
// Copy the content of the main page's head to the new window's head
const mainPageHead = document.head;
const newWindowHead = newWindow.document.head;
for (let i = 0; i < mainPageHead.children.length; i++) {
const element = mainPageHead.children[i];
if (element.tagName === 'LINK' || element.tagName === 'STYLE' || element.tagName === 'SCRIPT') {
// Copy link, style, and script elements
newWindowHead.appendChild(element.cloneNode(true));
}
}
// Write the content of the DIV to the new window's body
newWindow.document.write('<div>' + divContent + '</div>');
// Close the HTML structure
newWindow.document.write('</body></html>');
// Close the new window document
newWindow.document.close();
}
// Open popup only for Hotizon in <canvas>
function openPopupCanvas(button) {
function exportCanvasToNewWindow(dataURLs, textContents, titles, initialTitle) {
// Open a new window
const newWindow = window.open('', '', 'width=800,height=400');
// Write the basic HTML structure to the new window
newWindow.document.write('<html><head><title>Canvas Export</title></head><body>');
// Create an <h2> element for the initialTitle and prepend it to the container
const initialH2 = newWindow.document.createElement('h2');
initialH2.textContent = initialTitle;
newWindow.document.body.appendChild(initialH2);
// Create a container div for canvas, text, and titles
const containerDiv = newWindow.document.createElement('div');
containerDiv.style.display = 'flex';
containerDiv.style.flexWrap = 'wrap'; // Allow elements to wrap to the next line
// Loop through each canvas, text, and title
for (let i = 0; i < dataURLs.length; i++) {
// Create a div for each canvas, text, and title
const div = newWindow.document.createElement('div');
div.style.marginRight = '20px'; // Add spacing between elements
// Create an image element with the captured canvas content
const canvasImage = new Image();
canvasImage.src = dataURLs[i];
div.appendChild(canvasImage);
// Create a <p> element for the text content
const textElement = newWindow.document.createElement('p');
textElement.textContent = textContents[i];
div.appendChild(textElement);
// Create a <span> element for the title content
const titleElement = newWindow.document.createElement('span');
titleElement.className = 'title';
titleElement.textContent = titles[i];
div.appendChild(titleElement);
// Append the div to the container
containerDiv.appendChild(div);
}
// Append the container div to the new window
newWindow.document.body.appendChild(containerDiv);
// Close the HTML structure
newWindow.document.write('</body></html>');
newWindow.document.close();
}
// Get all the canvas, text, and title elements inside the div with id "col-right"
const colRightDiv = document.getElementById('col-right');
const canvasElements = colRightDiv.querySelectorAll('canvas');
const textElements = colRightDiv.querySelectorAll('p');
const titleElements = colRightDiv.querySelectorAll('.title');
// Extract data URLs from canvas elements
const dataURLs = Array.from(canvasElements).map((canvas) => canvas.toDataURL());
// Extract text content from <p> elements
const textContents = Array.from(textElements).map((p) => p.textContent);
// Extract title content from <span class="title"> elements
const titles = Array.from(titleElements).map((span) => span.textContent);
// Define the initialTitle
const initialTitle = "Trä hus data flexiboard , powered by infravis.se"; // Replace with your desired title
// Call the function to export all canvas, text, and title content to a new window
exportCanvasToNewWindow(dataURLs, textContents, titles, initialTitle);
}
///////////////////////////////
@ -1293,12 +1336,18 @@ $(document).ready(function() {
////////////////////////////////////////////////////////////////
//// DATE/TIME DIALOGS FOR DIAGRAM GENERATOR
// Range dates formatted:
var first_date = first_year_month.split("-")
var myStartDate_MM_YYYY = first_date[1]+"/"+first_date[0];
var last_date = last_year_month.split("-")
var myEndDate_MM_YYYY = last_date[1]+"/"+last_date[0];
// Used in Parallel-yearly, Parallel-monthly
$('#SelectYearMonth, #SelectYearMonth1, #grid-SelectYearMonth, #horizon-SelectYearMonth').datepicker({
format: "mm/yyyy",
weekStart: 1,
startDate: "07/2018",
endDate: "08/2023",
startDate: myStartDate_MM_YYYY,
endDate: myEndDate_MM_YYYY,
startView: 1,
minViewMode: 1,
maxViewMode: 2,
@ -1311,8 +1360,8 @@ $(document).ready(function() {
$('#SelectYearMonthDay, #SelectYearMonthDay1').datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
startDate: "01/07/2018",
endDate: "31/08/2023",
startDate: "01/"+myStartDate_MM_YYYY,
endDate: "31/"+myEndDate_MM_YYYY,
maxViewMode: 2,
clearBtn: true,
orientation: "bottom auto",
@ -1323,8 +1372,8 @@ $('#SelectYearMonthDay, #SelectYearMonthDay1').datepicker({
$('#SelectYearMonthWeek, #horizonSelectYearMonthWeek, #parallelSelectYearMonthWeek').datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
startDate: "01/07/2018",
endDate: "31/08/2023",
startDate: "01/"+myStartDate_MM_YYYY,
endDate: "31/"+myEndDate_MM_YYYY,
maxViewMode: 2,
clearBtn: true,
orientation: "bottom auto",

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save