Improving look and feel for the application
This commit is contained in:
Guille
parent
b8171e0934
commit
63342a02c1
65
css/styles.css
Normal file
65
css/styles.css
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
|
||||||
|
.form-element {
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-left: 30px;
|
||||||
|
}
|
||||||
|
.form-element label{
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
.form-element select{
|
||||||
|
width: 204px;
|
||||||
|
}
|
||||||
|
#links {
|
||||||
|
padding-left: 40px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#img_logo {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info {
|
||||||
|
padding-left: -10px;
|
||||||
|
}
|
||||||
|
#parameters {
|
||||||
|
visibility: collapse;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
#runWorkflow {
|
||||||
|
--bs-btn-color: #fff;
|
||||||
|
--bs-btn-bg: #0d6efd;
|
||||||
|
--bs-btn-border-color: #0d6efd;
|
||||||
|
--bs-btn-hover-color: #fff;
|
||||||
|
--bs-btn-hover-bg: #0b5ed7;
|
||||||
|
--bs-btn-hover-border-color: #0a58ca;
|
||||||
|
--bs-btn-focus-shadow-rgb: 49,132,253;
|
||||||
|
--bs-btn-active-color: #fff;
|
||||||
|
--bs-btn-active-bg: #0a58ca;
|
||||||
|
--bs-btn-active-border-color: #0a53be;
|
||||||
|
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
||||||
|
--bs-btn-disabled-color: #fff;
|
||||||
|
--bs-btn-disabled-bg: #0d6efd;
|
||||||
|
--bs-btn-disabled-border-color: #0d6efd;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
height: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
float: inline-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
width: 600px;
|
||||||
|
float: inline-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
width: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
4
main.js
4
main.js
|
|
@ -4,8 +4,8 @@ const path = require('node:path')
|
||||||
|
|
||||||
const createWindow = () => {
|
const createWindow = () => {
|
||||||
const win = new BrowserWindow({
|
const win = new BrowserWindow({
|
||||||
width: 800,
|
width: 1400,
|
||||||
height: 600,
|
height: 1200,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
preload: path.join(__dirname, 'preload.js')
|
preload: path.join(__dirname, 'preload.js')
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
|
|
||||||
.form-element {
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
.form-element label{
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
.form-element select{
|
|
||||||
width: 204px;
|
|
||||||
}
|
|
||||||
#links {
|
|
||||||
padding-left: 40px;
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#img_logo {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
margin-left: 20px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#info {
|
|
||||||
width: 40%;
|
|
||||||
padding-left: -10px;
|
|
||||||
}
|
|
||||||
#parameters {
|
|
||||||
visibility: collapse;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#runWorkflow {
|
|
||||||
--bs-btn-color: #fff;
|
|
||||||
--bs-btn-bg: #0d6efd;
|
|
||||||
--bs-btn-border-color: #0d6efd;
|
|
||||||
--bs-btn-hover-color: #fff;
|
|
||||||
--bs-btn-hover-bg: #0b5ed7;
|
|
||||||
--bs-btn-hover-border-color: #0a58ca;
|
|
||||||
--bs-btn-focus-shadow-rgb: 49,132,253;
|
|
||||||
--bs-btn-active-color: #fff;
|
|
||||||
--bs-btn-active-bg: #0a58ca;
|
|
||||||
--bs-btn-active-border-color: #0a53be;
|
|
||||||
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
||||||
--bs-btn-disabled-color: #fff;
|
|
||||||
--bs-btn-disabled-bg: #0d6efd;
|
|
||||||
--bs-btn-disabled-border-color: #0d6efd;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
@ -6,12 +6,16 @@
|
||||||
<title>Energy+ workflow</title>
|
<title>Energy+ workflow</title>
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
<link href="../../css/bootstrap.min.css" rel="stylesheet">
|
<link href="../../css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="../../css/styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="../../index.html" class="nav-link"><i class="bi bi-house-fill"></i> Home</a>
|
<a href="../../index.html" class="nav-link"><i class="bi bi-house-fill"></i> Home</a>
|
||||||
<h1><img src="logo/logo.png" id="img_logo">Energy+ workflow</h1>
|
<h1><img src="logo/logo.png" id="img_logo">Energy+ workflow</h1>
|
||||||
<div class="row">
|
<div class="container">
|
||||||
<div class="col">
|
<div class="right">
|
||||||
|
<div id="info">EnergyPlus™ is a whole building energy simulation program that engineers, architects, and researchers use to model both energy consumption—for heating, cooling, ventilation, lighting and plug and process loads—and water use in buildings. Some of the notable features and capabilities of EnergyPlus include:<ul ><li ><strong >Integrated, simultaneous solution</strong> of thermal zone conditions and HVAC system response that does not assume that the HVAC system can meet zone loads and can simulate un-conditioned and under-conditioned spaces. </li><li><strong>Heat balance-based solution</strong> of radiant and convective effects that produce surface temperatures thermal comfort and condensation calculations.</li><li><strong>Sub-hourly, user-definable time steps</strong> for interaction between thermal zones and the environment; with automatically varied time steps for interactions between thermal zones and HVAC systems. These allow EnergyPlus to model systems with fast dynamics while also trading off simulation speed for precision.</li><li><strong>Combined heat and mass transfer</strong> model that accounts for air movement between zones.</li><li><strong>Advanced fenestration models</strong> including controllable window blinds, electrochromic glazings, and layer-by-layer heat balances that calculate solar energy absorbed by window panes.</li><li><strong>Illuminance and glare calculations</strong> for reporting visual comfort and driving lighting controls. </li><li ><strong>Component-based HVAC</strong> that supports both standard and novel system configurations. </li><li><strong>A large number of built-in HVAC and lighting control strategies</strong> and an extensible runtime scripting system for user-defined control.</li><li ><strong>Functional Mockup Interface</strong> import and export for co-simulation with other engines.</li><li><strong>Standard summary and detailed output reports</strong> as well as user definable reports with selectable time-resolution from annual to sub-hourly, all with energy source multipliers.</li></ul></div>
|
||||||
|
</div>
|
||||||
|
<div class="left">
|
||||||
<form id="form">
|
<form id="form">
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<input type="file" id="geometry_file" name="geometry_file" accept=".geojson, .gml"/>
|
<input type="file" id="geometry_file" name="geometry_file" accept=".geojson, .gml"/>
|
||||||
|
|
@ -59,9 +63,6 @@
|
||||||
</form>
|
</form>
|
||||||
<div id="links"></div>
|
<div id="links"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
|
||||||
<div id="info">Energy+ Workflow description</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<script src="./run.js"></script>
|
<script src="./run.js"></script>
|
||||||
<script src="../../js/bootstrap.bundle.min.js"></script>
|
<script src="../../js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -1,51 +0,0 @@
|
||||||
|
|
||||||
.form-element {
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
.form-element label{
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
.form-element select{
|
|
||||||
width: 204px;
|
|
||||||
}
|
|
||||||
#links {
|
|
||||||
padding-left: 40px;
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#img_logo {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
margin-left: 20px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#info {
|
|
||||||
width: 40%;
|
|
||||||
padding-left: -10px;
|
|
||||||
}
|
|
||||||
#parameters {
|
|
||||||
visibility: collapse;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#runWorkflow {
|
|
||||||
--bs-btn-color: #fff;
|
|
||||||
--bs-btn-bg: #0d6efd;
|
|
||||||
--bs-btn-border-color: #0d6efd;
|
|
||||||
--bs-btn-hover-color: #fff;
|
|
||||||
--bs-btn-hover-bg: #0b5ed7;
|
|
||||||
--bs-btn-hover-border-color: #0a58ca;
|
|
||||||
--bs-btn-focus-shadow-rgb: 49,132,253;
|
|
||||||
--bs-btn-active-color: #fff;
|
|
||||||
--bs-btn-active-bg: #0a58ca;
|
|
||||||
--bs-btn-active-border-color: #0a53be;
|
|
||||||
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
||||||
--bs-btn-disabled-color: #fff;
|
|
||||||
--bs-btn-disabled-bg: #0d6efd;
|
|
||||||
--bs-btn-disabled-border-color: #0d6efd;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
@ -6,12 +6,28 @@
|
||||||
<title>Monthly energy balance workflow</title>
|
<title>Monthly energy balance workflow</title>
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
<link href="../../css/bootstrap.min.css" rel="stylesheet">
|
<link href="../../css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="../../css/styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="../../index.html" class="nav-link"><i class="bi bi-house-fill"></i> Home</a>
|
<a href="../../index.html" class="nav-link"><i class="bi bi-house-fill"></i> Home</a>
|
||||||
<h1><img src="logo/logo.png" id="img_logo">INSEL monthly energy balance workflow</h1>
|
<h1><img src="logo/logo.png" id="img_logo">INSEL monthly energy balance workflow</h1>
|
||||||
<div class="row">
|
<div class="container">
|
||||||
<div class="col">
|
<div class="right">
|
||||||
|
<div>The MEB workflow calculates the monthly energy balance for each building in a given region, and as
|
||||||
|
a result, it provides the energy and electrical demand, the energy consumption and the peak loads for
|
||||||
|
heating, cooling, lighting and appliances.</div>
|
||||||
|
<div>All of these results are provided on both a monthly and a yearly basis.</div>
|
||||||
|
<div> the design of this workflow, the following assumptions are made:</div>
|
||||||
|
<ul>
|
||||||
|
<li>No building in the region has attics</li>
|
||||||
|
<li>All buildings have basements but those are not heated</li>
|
||||||
|
<li>The construction details come from NRCAN</li>
|
||||||
|
<li>The usage details come from NRCAN</li>
|
||||||
|
<li>The system details come from the Montreal Custom catalog</li>
|
||||||
|
<li>The weather file used is the epw of the area provided by EnergyPlus</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="left">
|
||||||
<form id="form">
|
<form id="form">
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<input type="file" id="geometry_file" name="geometry_file" accept=".geojson, .gml"/>
|
<input type="file" id="geometry_file" name="geometry_file" accept=".geojson, .gml"/>
|
||||||
|
|
@ -59,9 +75,6 @@
|
||||||
</form>
|
</form>
|
||||||
<div id="links"></div>
|
<div id="links"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
|
||||||
<div id="info">Insel monthly energy balance uses insel engine to calculate the monthly energy balance and the peak loads from the buildings in a geometry file, the process involves bla bla bla</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<script src="./run.js"></script>
|
<script src="./run.js"></script>
|
||||||
<script src="../../js/bootstrap.bundle.min.js"></script>
|
<script src="../../js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
|
|
||||||
.form-element {
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-left: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#links {
|
|
||||||
padding-left: 40px;
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#img_logo {
|
|
||||||
padding-bottom: 10px;
|
|
||||||
margin-left: 20px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#info {
|
|
||||||
width: 40%;
|
|
||||||
padding-left: -10px;
|
|
||||||
}
|
|
||||||
#runScenario {
|
|
||||||
--bs-btn-color: #fff;
|
|
||||||
--bs-btn-bg: #0d6efd;
|
|
||||||
--bs-btn-border-color: #0d6efd;
|
|
||||||
--bs-btn-hover-color: #fff;
|
|
||||||
--bs-btn-hover-bg: #0b5ed7;
|
|
||||||
--bs-btn-hover-border-color: #0a58ca;
|
|
||||||
--bs-btn-focus-shadow-rgb: 49,132,253;
|
|
||||||
--bs-btn-active-color: #fff;
|
|
||||||
--bs-btn-active-bg: #0a58ca;
|
|
||||||
--bs-btn-active-border-color: #0a53be;
|
|
||||||
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
|
|
||||||
--bs-btn-disabled-color: #fff;
|
|
||||||
--bs-btn-disabled-bg: #0d6efd;
|
|
||||||
--bs-btn-disabled-border-color: #0d6efd;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
@ -6,12 +6,22 @@
|
||||||
<title>Retrofit workflow</title>
|
<title>Retrofit workflow</title>
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
<link href="../../css/bootstrap.min.css" rel="stylesheet">
|
<link href="../../css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="../../css/styles.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a href="../../index.html" class="nav-link"><i class="bi bi-house-fill"></i> Home</a>
|
<a href="../../index.html" class="nav-link"><i class="bi bi-house-fill"></i> Home</a>
|
||||||
<h1><img src="logo/logo.png" id="img_logo"> Retrofit workflow</h1>
|
<h1><img src="logo/logo.png" id="img_logo"> Retrofit workflow</h1>
|
||||||
<div class="row">
|
<div class="container">
|
||||||
<div class="col">
|
<div class="right">
|
||||||
|
Retrofit workflow consist in a comparison of the cost-benefits for 3 different levels of retrofitting using the Insel monthly energy balance, co2 and cost workflows as a base to calculate the CO2 Energy and Cost values for each level.
|
||||||
|
<ul>
|
||||||
|
<li>R0 Business as usual: current status of the building, with its skin, but renewing the energy systems once its lifetime is finished (with the same performance as the original).</li>
|
||||||
|
<li>R1 1st Scenario with improved walls, windows, roof, and basement to current legislation.</li>
|
||||||
|
<li>R2 2nd Scenario HVAC systems optimization + PV: an update on HVAC systems to an aerothermal heat pump coupled with baseboard heaters for peak loads, with a combined seasonal COP of 2.79, coupled with the use of the available roof space for PV, in case the shaded area is less than 30% of the total available roof area. The panels are at a slope of 35º.</li>
|
||||||
|
<li>R3 3rd Scenario Combining R1 and R2</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="left">
|
||||||
<form id="form">
|
<form id="form">
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<select name="application" id="application">
|
<select name="application" id="application">
|
||||||
|
|
@ -23,14 +33,11 @@
|
||||||
<textarea id="buildings" name="buildings" rows="5" cols="33"></textarea>
|
<textarea id="buildings" name="buildings" rows="5" cols="33"></textarea>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-element">
|
<div class="form-element">
|
||||||
<a href="#" id="runScenario" class="btn btn-bd-primary mb-4">Run scenario</a>
|
<a href="#" id="runWorkflow" class="btn btn-bd-primary mb-4">Run workflow</a>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<div id="links"></div>
|
<div id="links"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
|
||||||
<div id="info">Retrofit workflow access to the precalculated data bla bla bla, we may need to put some explanation over here</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<script src="./run.js"></script>
|
<script src="./run.js"></script>
|
||||||
<script src="../../js/bootstrap.bundle.min.js"></script>
|
<script src="../../js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ let param = {
|
||||||
'application': '',
|
'application': '',
|
||||||
'buildings': []
|
'buildings': []
|
||||||
}
|
}
|
||||||
document.getElementById("runScenario").addEventListener("click", runScenario)
|
document.getElementById("runWorkflow").addEventListener("click", runScenario)
|
||||||
async function runScenario() {
|
async function runScenario() {
|
||||||
try {
|
try {
|
||||||
document.getElementById('links').innerHTML = '<img id="spinner" src="../../img/spinner.gif" width="50px" />'
|
document.getElementById('links').innerHTML = '<img id="spinner" src="../../img/spinner.gif" width="50px" />'
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user