From 63342a02c10abb6698138e4d35170c9ad6356348 Mon Sep 17 00:00:00 2001 From: Guille Date: Mon, 13 May 2024 11:08:47 +0200 Subject: [PATCH] Improving look and feel for the application --- css/styles.css | 65 ++++++++++++++++++++++++++++ main.js | 4 +- menu.html | 1 - workflows/energy_plus/css/styles.css | 51 ---------------------- workflows/energy_plus/main.html | 11 ++--- workflows/meb/css/styles.css | 51 ---------------------- workflows/meb/main.html | 23 +++++++--- workflows/retrofit/css/styles.css | 42 ------------------ workflows/retrofit/main.html | 19 +++++--- workflows/retrofit/run.js | 2 +- 10 files changed, 105 insertions(+), 164 deletions(-) create mode 100644 css/styles.css delete mode 100644 menu.html diff --git a/css/styles.css b/css/styles.css new file mode 100644 index 0000000..8da8bb7 --- /dev/null +++ b/css/styles.css @@ -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; +} \ No newline at end of file diff --git a/main.js b/main.js index d585032..3394368 100644 --- a/main.js +++ b/main.js @@ -4,8 +4,8 @@ const path = require('node:path') const createWindow = () => { const win = new BrowserWindow({ - width: 800, - height: 600, + width: 1400, + height: 1200, webPreferences: { preload: path.join(__dirname, 'preload.js') } diff --git a/menu.html b/menu.html deleted file mode 100644 index 3096564..0000000 --- a/menu.html +++ /dev/null @@ -1 +0,0 @@ -Here the menu \ No newline at end of file diff --git a/workflows/energy_plus/css/styles.css b/workflows/energy_plus/css/styles.css index 5a29e91..e69de29 100644 --- a/workflows/energy_plus/css/styles.css +++ b/workflows/energy_plus/css/styles.css @@ -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; -} \ No newline at end of file diff --git a/workflows/energy_plus/main.html b/workflows/energy_plus/main.html index 0dc3a44..9eb1964 100644 --- a/workflows/energy_plus/main.html +++ b/workflows/energy_plus/main.html @@ -6,12 +6,16 @@ Energy+ workflow + Home

Energy+ workflow

-
-
+
+
+
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:
  • Integrated, simultaneous solution 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.
  • Heat balance-based solution of radiant and convective effects that produce surface temperatures thermal comfort and condensation calculations.
  • Sub-hourly, user-definable time steps 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.
  • Combined heat and mass transfer model that accounts for air movement between zones.
  • Advanced fenestration models including controllable window blinds, electrochromic glazings, and layer-by-layer heat balances that calculate solar energy absorbed by window panes.
  • Illuminance and glare calculations for reporting visual comfort and driving lighting controls.
  • Component-based HVAC that supports both standard and novel system configurations.
  • A large number of built-in HVAC and lighting control strategies and an extensible runtime scripting system for user-defined control.
  • Functional Mockup Interface import and export for co-simulation with other engines.
  • Standard summary and detailed output reports as well as user definable reports with selectable time-resolution from annual to sub-hourly, all with energy source multipliers.
+
+
@@ -59,9 +63,6 @@
-
-
Energy+ Workflow description
-
diff --git a/workflows/meb/css/styles.css b/workflows/meb/css/styles.css index 5a29e91..e69de29 100644 --- a/workflows/meb/css/styles.css +++ b/workflows/meb/css/styles.css @@ -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; -} \ No newline at end of file diff --git a/workflows/meb/main.html b/workflows/meb/main.html index 465daa8..10f1226 100644 --- a/workflows/meb/main.html +++ b/workflows/meb/main.html @@ -6,12 +6,28 @@ Monthly energy balance workflow + Home

INSEL monthly energy balance workflow

-
-
+
+
+
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.
+
All of these results are provided on both a monthly and a yearly basis.
+
the design of this workflow, the following assumptions are made:
+
    +
  • No building in the region has attics
    • +
  • All buildings have basements but those are not heated
    • +
  • The construction details come from NRCAN
    • +
  • The usage details come from NRCAN
    • +
  • The system details come from the Montreal Custom catalog
    • +
  • The weather file used is the epw of the area provided by EnergyPlus
    • +
+
+
@@ -59,9 +75,6 @@
-
-
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
-
diff --git a/workflows/retrofit/css/styles.css b/workflows/retrofit/css/styles.css index de2a372..e69de29 100644 --- a/workflows/retrofit/css/styles.css +++ b/workflows/retrofit/css/styles.css @@ -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; -} \ No newline at end of file diff --git a/workflows/retrofit/main.html b/workflows/retrofit/main.html index aba0d8f..ace66c8 100644 --- a/workflows/retrofit/main.html +++ b/workflows/retrofit/main.html @@ -6,12 +6,22 @@ Retrofit workflow + Home

Retrofit workflow

-
-
+
+
+ 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. +
    +
  • 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).
    • +
  • R1 1st Scenario with improved walls, windows, roof, and basement to current legislation.
    • +
  • 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º.
    • +
  • R3 3rd Scenario Combining R1 and R2
    • +
+
+
- Run scenario + Run workflow
-
-
Retrofit workflow access to the precalculated data bla bla bla, we may need to put some explanation over here
-
diff --git a/workflows/retrofit/run.js b/workflows/retrofit/run.js index f3c0d29..9ad29f2 100644 --- a/workflows/retrofit/run.js +++ b/workflows/retrofit/run.js @@ -3,7 +3,7 @@ let param = { 'application': '', 'buildings': [] } -document.getElementById("runScenario").addEventListener("click", runScenario) +document.getElementById("runWorkflow").addEventListener("click", runScenario) async function runScenario() { try { document.getElementById('links').innerHTML = ''