<!-- Remove unecessary link and scripts --><!DOCTYPE html><html lang="1"> <head> <meta charset="UTF-8"> <title>PVGIS 5.3 SOLAR PANEL CALCULATOR</title> <meta name="description" content="Easily calculate solar energy potential and visualize it with PVGIS mapping tool. Empower your solar projects with accurate data insights and precision."> <meta name="robots" content="index,follow"> <meta name="viewport" content="width=1700, initial-scale=0, user-scalable=yes"> <link rel="canonical" href="https://pvgis.com"> <meta property="og:title" content="PVGIS 5.3 SOLAR PANEL CALCULATOR"> <meta property="og:description" content="Easily calculate solar energy potential and visualize it with PVGIS mapping tool. Empower your solar projects with accurate data insights and precision."> <meta property="og:url" content="https://pvgis.com"> <meta property="og:type" content="website"><meta property="og:image" content="https://cdn.pvgis.com/images/logo.png" /><meta property="og:image:alt" content="Logo PVGIS" /> <!-- link --> <link rel="apple-touch-icon" sizes="180x180" href="https://pvgis.com/public/assets/images/icon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://pvgis.com/public/assets/images/icon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://pvgis.com/public/assets/images/icon/favicon-16x16.png"> <link rel="manifest" href="https://pvgis.com/public/assets/images/icon/site.webmanifest"> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/jquery_ui.min.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/normalize.min.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/loader.css?v=220120251321"> <link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://pvgis.com/public/assets/min-css/toastr.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/bootstrap.min.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/css/main.css?v=220120251321"> <link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://cdn.pvgis.com/assets/css/webtools.europa.eu/webtools.theme-ec.css"> <link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://cdn.pvgis.com/assets/css/bootstrap-icons/bootstrap-icons-1-11.css"> <link onload="this.rel='stylesheets'" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"> <!-- <noscript> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/bootstrap.min.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/css/main.css?v=220120251321"> <link rel="stylesheet" href="https://cdn.pvgis.com/assets/css/webtools.europa.eu/webtools.theme-ec.css"> <link rel="stylesheet" href="https://cdn.pvgis.com/assets/css/bootstrap-icons/bootstrap-icons-1-11.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"> </noscript> --> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/fonts.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/width_grid.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/cookieconsent.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/header.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/color.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/account.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/min-css/custom_radio_checkbox.css?v=220120251321"> <link rel="stylesheet" href="https://pvgis.com/public/assets/css/map.css?v=220120251321"> <script> window.env = { UI_BASE_URL: "https://pvgis.com", AUTH_API_URL: "https://auth.pvgis.com", PVGIS_AUTH_API: "https://auth.pvgis.com", BASE_URL: "https://api.pvgis.com", TRANSLATION_API_URL: "https://ts.pvgis.com", PRINT_URL: "https://print.pvgis.com/pvgis", MAP_LAYER_URL: "https://gisco-services.ec.europa.eu/maps/tiles/OSMCartoBackground/EPSG3857/{z}/{x}/{y}.png", LABEL_LAYER_URL: "https://gisco-services.ec.europa.eu/maps/tiles/OSMCartoLabels/EPSG3857/{z}/{x}/{y}.png", SENTINEL_LAYER_URL: "https://tiles.maps.eox.at/", SATELLITE_LAYER_URL: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", SOLAR_LAYER_URL: "https://re.jrc.ec.europa.eu/pvg_tiles/api5_2/{z}/{x}/{-y}.png", ELEVATION_URL: "https://api.open-meteo.com/v1/elevation?", GEOCODE_URL: "https://gisco-services.ec.europa.eu/api?lang=en&limit=1&q=", GA_MEASUREMENT_ID: "G-7160PCEY5S", KISS_2_PVGIS: "https://kiss2pvgis.com", SOLAR_DROP_SHIPPING: "https://solardropshipping.com", CMS_URL: "https://cms.pvgis.com/content-management-system", CURRENT_CLIENT_IP: "3.237.223.94", COUNTRY_LIST: "https://restcountries.com/v3.1/all", PRODUCTION: true, FILE_UPLOAD_URL: "https://fs.pvgis.com", BROADCAST_URL: "https://bs.pvgis.com", BP_BASE_URL: "https://bp.pvgis.com", EXCHANGE_RATE_URL: "https://cs.pvgis.com", LATEST_PVGIS_API_VERSION: "5.3", MINIFY_CSS_JS: true, CDN_URL: "https://cdn.pvgis.com", SETTING_URL: "https://cfg.pvgis.com", STRIPE_PUBLISHABLE_KEY: "pk_live_51Psh8RCNxPSZy3wjNk3YeGrTrJVP2vKEonxodiALZYaYhCbpukHxWITjoFqbaH5DxHhUx2ZuJNqRdFJzrwZH8eo800cpfHoWeG", RESOURCE_VERSION: "220120251321", GOOGLE_LABELS_LAYER_LINK: "https://mt1.google.com/vt/lyrs=h&x={x}&y={y}&z={zoom}", GOOGLE_SATELLITE_LAYER_LINK: "https://khms2.google.com/kh/v=991?x={x}&y={y}&z={zoom}", GOOGLE_MAPS_API_KEY: "AIzaSyBGwuAzneXJqwq8ZQ4oJFb9-crInpddy2E", GOOGLE_STATIC_MAPS_URL: "https://maps.googleapis.com/maps/api/staticmap?center={lat},{lng}&zoom={zoom}&size={size}&maptype={mapTypeId}&markers=color:red%7Clabel:+%7C{markerLat},{markerLng}&key=AIzaSyBGwuAzneXJqwq8ZQ4oJFb9-crInpddy2E", ENABLE_STATIC_RESULTS_MAP: "true" === "true", GOOGLE_MAPS_MAP_ID: "e1b4b31e9c1e44e9" }; window.simulatorPvgisMeta = { apiVersion: "5.3", databases: "PVGIS-SARAH3,PVGIS-ERA5".split(',') };</script> <link rel="preload" as="style" onload="this.rel='stylesheet'" href='https://pvgis.com/public/assets//css/log_to_pdf_modal.css?v=220120251321' ><link rel="preload" as="style" onload="this.rel='stylesheet'" href='https://pvgis.com/public/assets//css/login.css?v=220120251321' ><link rel="preload" as="style" onload="this.rel='stylesheet'" href='https://pvgis.com/public/assets//css/register.css?v=220120251321' ><link rel="preload" as="style" onload="this.rel='stylesheet'" href='https://pvgis.com/public/assets//css/pdf_editor.css?v=220120251321' ><link rel="preload" as="style" onload="this.rel='stylesheet'" href='https://pvgis.com/public/assets//css/popup.css?v=220120251321' ><link rel="preload" as="style" onload="this.rel='stylesheet'" href='https://pvgis.com/public/assets//css/components/dropdown-select.css?v=220120251321' > <style> body {min-width:1280px} </style> <link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"> <link rel="preload" as="style" onload="this.rel='stylesheet'" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <!-- end link --> <!-- <script src="https://pvgis.com/public/assets/min-js/jquery.js?v=220120251321"></script> --> <script> window.customerSavedLanguage =window.customerSavedLanguage || "en"; window.cmsKey = "pvgis.homepage"; let isConnected = false; function isSafari() { return /^((?!chrome|android).)*safari/i.test(navigator.userAgent); } function isEpiphany() { return /epiphany/i.test(navigator.userAgent); } if(isSafari() || isSafari()) { addCSSLinkDynamically("safari.css"); } function addCSSLinkDynamically(cssFile) { let linkElem = document.createElement('link'); linkElem.rel = 'stylesheet'; linkElem.href = `https://pvgis.com/public/assets/min-css/${cssFile}?v=220120251321` ; document.head.appendChild(linkElem); } </script></head><body> <div class="cssloader-container" style="overflow:hidden;width:100%;height:100%"> <div class="cssloader-speeding-wheel"></div> <p> <!-- <img width="285" height="44" src="http://ssdg.mu/wp-content/uploads/2021/08/cropped-logo-ssdg.mu_.png" alt="ssdg.mu"> --> PVGIS.COM </p> <p id="custom-loader-text" class="custom-loader-text"> <span id="custom-loader-text-content" data-ts="pvgis.simulation.loading_simulation">Loading the simulation</span> <span class="dots"> <span>.</span> <span>.</span> <span>.</span> </span> </p></div> <div id="loadingPdf"></div> <div class="main-content"> <div class="header" id="header"> <div class="header-top"> <div class="container-fluid c-header"> <div class="menu-btn-container"> <button class="menu-btn" aria-label="humbergerMenu"><i class="fas fa-bars"></i></button> </div> <div class="logo-content"> <div class="logo-title"><a href="/" data-cms-link><img class="logo-internet" loading="lazy" width="300" height="45.8" src="/public/assets/images/icon/logo_internet_pvgis.com.png" alt="Logo PVGIS.COM" srcset=""></a></div> <div> <p class="title-header" data-ts="pvgis.header_title">PHOTOVOLTAIC GEOGRAPHICAL INFORMATION SYSTEM </p> </div> </div> <div class="h-top-right"> <div class="side-web-menu font-medium"> <div class="google-analytics-info-container"> <div class="google-analytics-info-content"> <span class="text-uppercase" id="active-users-ga" style="white-space: nowrap;">83.977 UTILISATEURS ACTIFS*</span> </div> </div> <div class="side-menu-item-lang"> <!-- etoooo --> <span class="lang-label"> <span class="custom-span lang-selected">en</span> <i class="fas fa-sort-down icon icon-select-lang"></i> </span> <div class="lang-popover"> </div> <div class="more-lang-popover"></div> </div> <div class="account-menu-container account-menu-large"> <!-- <span class="account account-menu-toggler" data-ts="pvgis.header.account_title">Account</span> <i class="fas fa-sort-down account-menu-toggler"></i> --> <!-- <span class="account account-menu-toggler" data-tstype="title" data-ts="pvgis.header.account_menu.title"><i class="fas fa-lock account-menu-toggler fa-xs"></i></span> --> <a href="/register" class="btn btn-outline-light" data-ts="pvgis.header.account_menu.subscribe">Je m'abonne</a> <a href="/login" class="btn btn-outline-light" data-ts="pvgis.header.account_menu.login">login</a> <!-- <div> <div class="account-menu"> <div class="account-menu-title" data-ts="pvgis.header.account_title">Account</div> <div><a href="/register" data-ts="pvgis.header.account_menu.registration">Registration</a></div> <div class="clickable-div"><a href="/login" data-ts="pvgis.header.account_menu.login">Login</a></div> </div> </div> --> </div> </div> </div> <!-- <h2 class="header-text-slug" data-ts="pvgis.header.slug">PVGIS.COM provides information on solar radiation and PV system performance for any location in the world</h2> --> </div> </div> <div class="header-bottom"> <div class="h-nav-container font-bold"> <div class="container-fluid selected-nav-container"> <div class="seleted-nav" data-ts="pvgis.header.simulator"></div> <div class="side-menu-item-lang"> <!-- <div class="flag"><i class="fi fi-us"></i></div> --> <div class="selected-lang lang-selected">eng</div> <div class="lang-dropdown-btn"><i class="fas fa-sort-down"></i></div> <!-- <div class="lang-popover"></div> --> </div> <div class="account-menu-container"> <!-- <span class="account account-menu-toggler" data-ts="pvgis.header.account_title">Account</span> <i class="fas fa-sort-down account-menu-toggler"></i> --> <span class="account account-menu-toggler" data-tstype="title" data-ts="pvgis.header.account_menu.title"><i class="fas fa-lock account-menu-toggler fa-xs"></i></span> <div> <div class="account-menu"> <div class="account-menu-title" data-ts="pvgis.header.account_title">Account</div> <div class="clickable-div"><a href="/login" data-ts="pvgis.header.account_menu.login">Login</a></div> <div><a href="/register" data-ts="pvgis.header.account_menu.registration">Registration</a> </div> </div> </div> </div> </div> <nav class="container-fluid nav-web-menu"> <ul class="navigation-menu-container"> </ul> </nav> </div> </div> <div class="menu-mobile"> <div class="menu-mobile-container"> <div class="menu-m-header"> <div class="m-logo-container"> <span>PVGIS</span> <button><i class="fas fa-times"></i></button> </div> <div class="m-title"> PHOTOVOLTAIC GEOGRAPHICAL INFORMATION SYSTEM </div> </div> <div class="menu-mobile-body"> <ul class="navigation-menu-container font-bold"></ul> <div class="separate"></div> <ul class="side-menu-container font-medium"></ul> </div> </div> </div> <script>var customerIdToast = '';</script><div id="toast" class="toast-view-container"> <div class="toast-view"> <div class="toast-body"> <div class="toast-header"> <strong id="toast-title" data-ts="pvgis.toast.confirm_profile_information"> Confirm Profile Information </strong> <!-- <button type="button" class="btn-close-toast" onclick="hideToast()">×</button> --> </div> <span> <p id="toast-message" data-ts="pvgis.toast.confirm_profile_information_message">Please Confirm some Profile Information before proceeding</p> </span> </div> <div class="toast-footer" id="confirm-toast"> <button type="button" class="btn-confirm-toast" onclick="redirectToAccountInfo()"> <span data-ts="pvgis.toast.confirm">Confirm</span> </button> </div> </div></div> <script src="https://pvgis.com/public/assets/min-js/toast/toast.js?v=220120251321"> </script> <style> /* .account-menu-container { padding: 10px; position: fixed; bottom: 20px; right: 20px; z-index: 1000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 8px; background-color: rgb(0, 101, 162); ; } */ .account-menu-container .account-menu .clickable-div a { display: block; } .account-menu-container .account-menu .clickable-div { cursor: pointer; } /* .account.account-menu-toggler { opacity: 0.7; } */ .btn.btn-warning { background-color: #FED400 !important; color: #174E88 !important; padding-left: 10px !important; padding-right: 10px !important; border-radius: 10px !important; border: none !important; /* height: 28px; */ } </style> </div> <div class="banner-outer-container"> <div class="banner-inner-container"> <!-- <div class="banner-left-container"> --> <!-- <span class="banner-highlight" data-ts="pvgis.banner.new">Nouveau</span> --> <!-- <span class="banner-title">PVGIS.COM</span> --> <!-- </div> --> <div class="banner-right-container "> <span class="banner-text" data-ts="pvgis.banner.calculate_simulate_optimize">Calclulez, simulez et optimisez avec</span> <a href="/solar-calculator" data-cms-link class="banner-banner-button" data-ts="pvgis.calculator.title">SOLAR CALCULATOR</a> </div> </div></div> <div class="modal fade simulator-content" id="modalSteps" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> </div> </div> </div> <div id="stepsButton" class="stepsButton simulator-content" data-toggle="modal" data-target="#modalSteps"> <span class="text-uppercase"><strong data-ts="pvgis.simulator.quick_steps"></strong> <span class="stepsIcon"><i class="fas fa-bars"></i></span></span> </div> <div style="padding-inline: 85px;max-width: 1400px;margin: 0 auto;margin-top:20px"> <h1 class="title" data-ts="pvgis.simulator.new_pvgis_current" data-tsVar='{"pvgisApiVersion": "5.3"}'>PVGIS 5.3 CALCULATEUR</h1> </div> <div class="container-fluid simulator-content"> <!-- <h1 class="title" data-ts="pvgis.simulator.pvgis_current" data-tsVar='{"pvgisApiVersion": "5.3"}'>PVGIS 5.3 CALCULATEUR</h1> --> <div class="main"> <div class="stepsSimulator"> <div id="steps"> <div id="steps-content"> <div class="steps" id="accordeon"> <div class="titleSteps"> <h3 class="text-uppercase"><strong data-ts="pvgis.simulator.quick_steps">Quick steps</strong></h3> <button type="button" class="close" data-dismiss="modal"> <strong><i class="fas fa-times fa-1x"></i></strong> </button> </div> <h5><a role="button" class="stepsTitle collapse" data-toggle="collapse" data-parent="#accordeon" href="#solarsite" aria-expanded="true" aria-controls="solarsite"><span data-ts="pvgis.simulator.step_one_title">1 • Enter the address of the solar production site</span> <span class="toggle-icon"></span></a></h5> <div id="solarsite" class="panel-collapse collapse in"> <p class="guide" data-ts="pvgis.simulator.step_one_consigne">Provide the following information</p> <form class="form-group setps-form-container"> <div> <div class="custom-select-steps" id="customSelect"> <input type="text" aria-label="pays" data-tstype="placeholder" data-ts="pvgis.simulator.country" placeholder="Country" name="pays" id="pays" class="form-control" oninput="filterOptions()"> <div class="dropdown-content-steps" id="dropdownContent"></div> </div> <div class="custom-select-steps" id="customCity"> <input type="text" aria-label="ville" data-tstype="placeholder" data-ts="pvgis.simulator.city" placeholder="City" name="ville" id="ville" class="form-control" oninput="filterCity()"> <div class="dropdown-content-steps" id="dropdownCity"></div> </div> <input type="text" aria-label="rue" data-tstype="placeholder" data-ts="pvgis.simulator.street" placeholder="Street" name="rue" id="rue" class="form-control"> <div class="addressButton"> <input type="text" aria-label="numrue" data-tstype="placeholder" data-ts="pvgis.simulator.num_street" placeholder="Street number" name="numrue" id="numrue" class="form-control"> </div> </div> <button class="btn btn-primary" data-dismiss="modal" onclick="geocodeSteps()" type="button" data-ts="pvgis.simulator.go">Go!</button> </form> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#zoom" aria-expanded="false" aria-controls="zoom"><span data-ts="pvgis.simulator.step_two_title">2 • Zoom in with + and - to control your GPS point</span> <span class="toggle-icon"></span></a></h5> <div id="zoom" class="panel-collapse collapse"> <div class="stepsContent"> <div class="text-center btn-group-vertical"> <div> <button class="stepsInteraction" data-dismiss="modal" id="stepsIn" disabled><i class="fas fa-plus fa-lg"></i></button> <button class="stepsInteraction" data-dismiss="modal" id="stepsOut" disabled><i class="fas fa-minus fa-lg"></i></button> </div> </div> <div class="px-10"> <p data-ts="pvgis.simulator.step_two_consigne">If the marker does not correspond to your solar production address, use an area approach, using the + and - on the map to geographically define your GPS point.</p> </div> </div> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#ol" aria-expanded="false" aria-controls="ol"><span data-ts="pvgis.simulator.step_three_title">3 • Solar Radiation</span> <span class="toggle-icon"></span></a></h5> <div id="ol" class="panel-collapse collapse"> <p class="guide" data-ts="pvgis.simulator.step_three_guide">We advise you not to modify this color code.</p> <div class="stepsContent"> <div class="text-center btn-group-vertical"> <div class="wide-button"> <button class="wide-letter stepsInteraction" data-dismiss="modal" id="stepsOpacityButton" disabled>O</button> <button class="wide-letter stepsInteraction" data-dismiss="modal" id="stepsLegendButton" disabled> L</button> </div> </div> <div class="px-10"> <p data-ts="pvgis.simulator.step_three_consigne">O (Opacity) modifies the opacity of the map and the visualization of solar irradiance through a color gradient defined in L (Legend). Modifying opacity has no effect on productivity calculations.</p> </div> </div> <div> <input type="range" name="stepsopacity" id="stepsopacity" step="0.1" min="0" max="1" value="0.6" style="display: none;"> <p class="text-center"><img src="https://cdn.pvgis.com/images/loading-ps.svg" class="lazyLoad" data-src="https://cdn.pvgis.com/images/layers/legend_solar.png" alt="legend_solar" id="stepslegend" style="display: none; max-width: 220px; min-width:180px; width:100%"></p> </div> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#shadows" aria-expanded="false" aria-controls="shadows"><span data-ts="pvgis.simulator.step_four_title">4 • Using terrain shadows</span> <span class="toggle-icon"></span></a></h5> <div id="shadows" class="panel-collapse collapse shadows"> <p class="guide" data-ts="pvgis.simulator.step_four_guide">For a quick calculation we advise you to check calculated horizon</p> <div> <form class="form-group"> <p class="form-group-title"><b data-ts="pvgis.simulator.use_terrain_shadows">Use terrain shadows</b><b>:</b></p> <p class="form-group-label"><input type="checkbox" aria-label="calculatedHorizon" name="stepscalculated" id="stepscalculated" checked> <label for="stepscalculated" data-ts="pvgis.simulator.calculated_horizon">Calculated horizon</label></p> <p class="form-group-label"><input type="checkbox" aria-label="uploadHorizonFile" name="stepsupload" id="stepsupload"> <label for="stepsupload" data-ts="pvgis.simulator.upload_horizon_file">Upload horizon file</label></p> <input type="file" name="horizonFileInput" id="stepshorizoninput" onchange="readFileAndSetHiddenValue('stepshorizoninput', 'cbhorizonFormattedInput', userhorizonFormatter)" style="display: none;"> </form> <p class="text-right"><a role="button" data-toggle="collapse" href="#stepshorizoncontent" aria-expanded="false" aria-controls="stepshorizoncontent"> <span class="toggle-iconplus"></span></a></p> </div> <p id="stepshorizoncontent" class="panel-collapse collapse" data-ts="pvgis.simulator.step_four_consigne">The solar radiation and photovoltaic production will change if there are local hills or mountains that block sunlight during certain periods of the day. PVGIS can calculate the effect of this by using data on ground elevation with a resolution of 3 arc-seconds (approximately 90 meters).<br><br>This calculation does not take into account shadows from very close objects such as houses or trees. In this case, you can upload your own information about the horizon by checking the "Download horizon file" box in CSV or JSON format.</p> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#estimation" aria-expanded="false" aria-controls="estimation"><span data-ts="pvgis.simulator.step_five_title">5 • Type of solar production estimation for your site</span> <span class="toggle-icon"></span></a></h5> <div id="estimation" class="panel-collapse collapse nav-stacked-container"> <p class="guide" data-ts="pvgis.simulator.step_five_guide">For a roof-mounted production site connected to the public grid, we recommend checking "connected to the grid."</p> <!-- <img src="https://cdn.pvgis.com/images/loading-ps.svg" class="lazyLoad" data-src="https://cdn.pvgis.com/images/layers/grid.png" alt="grid-connected"> --> <ul class="nav nav-tabs nav-stacked" id="tablist2"> <li class="liData tab-option active t_tool"><a data-toggle="tab" href="#grid-connected-tab" class="text-uppercase" data-ts="pvgis.simulator.grid_connected">grid connected</a></li> <li class="liData tab-option t_tool"><a data-toggle="tab" href="#tracking-pv-tab" class="text-uppercase" data-ts="pvgis.simulator.tracking_pv">tracking pv</a></li> <li class="liData tab-option t_tool"><a data-toggle="tab" href="#off-grid-tab" class="text-uppercase" data-ts="pvgis.simulator.off_grid">off-grid</a></li> <li class="liData tab-option t_data"><a data-toggle="tab" href="#monthly-tab" class="text-uppercase" data-ts="pvgis.simulator.monthly_data">monthly data</a></li> <li class="liData tab-option t_data"><a data-toggle="tab" href="#daily-tab" class="text-uppercase" data-ts="pvgis.simulator.daily_data">daily data</a></li> <li class="liData tab-option t_data"><a data-toggle="tab" href="#hourly-tab" class="text-uppercase" data-ts="pvgis.simulator.hourly_data">hourly data</a></li> <li class="liData tab-option t_tmy"><a data-toggle="tab" href="#tmy-tab" class="text-uppercase" data-ts="pvgis.simulator.tmy">tmy</a></li> </ul> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#database" aria-expanded="false" aria-controls="database"><span data-ts="pvgis.simulator.step_six_title">6 • Solar Radiation Databases</span> <span class="toggle-icon"></span></a></h5> <div id="database" class="panel-collapse collapse"> <p class="guide" data-ts="pvgis.simulator.step_six_guide">We recommend keeping the default database determined by PVGIS.</p> <div> <div> <form class="form-group form-inline setps-form-container"> <label for="stepsselectdbgridconnected"><span data-ts="pvgis.simulator.forms.solar_radiation_database">Solar radiation database</span><span class="text-danger">*</span></label> <select aria-label="selectDb" name="db" id="stepsselectdbgridconnected" class="duplicate-input-selectdb form-control text-uppercase sr-db"> </select> </form> <p class="text-right"><a role="button" data-toggle="collapse" href="#stepsdbcontent" aria-expanded="false" aria-controls="stepsdbcontent"> <span class="toggle-iconplus"></span></a></p> </div> <p id="stepsdbcontent" class="panel-collapse collapse" data-ts="pvgis.simulator.step_six_consigne">PPVGIS offers four different databases on solar radiation with hourly resolution. Currently, there are three satellite-based databases: <br><br> PVGIS-SARAH2 (0.05º x 0.05º): Produced by CM SAF to replace SARAH-1 (PVGIS-SARAH). It covers Europe, Africa, most of Asia, and some parts of South America. Time range: 2005-2020. <br><br> VGIS-SARAH (0.05º x 0.05º): Produced using the CM SAF algorithm. Similar coverage to SARAH-2. Time range: 2005-2016. PVGIS-SARAH will be discontinued by the end of 2022. <br><br> PVGIS-NSRDB (0.04º x 0.04º): Result of collaboration with NREL (USA), providing the NSRDB solar radiation database to PVGIS. Time range: 2005-2015. <br><br> In addition, there is a worldwide reanalysis database: <br><br> PVGIS-ERA5 (0.25º x 0.25º): The latest global reanalysis from ECMWF (ECMWF). Time range: 2005-2020. <br><br>Reanalysis of solar radiation data generally has higher uncertainty than satellite-based databases. Therefore, we recommend using reanalysis data only when satellite-based data is missing or outdated. For more information on databases and their accuracy, please refer to the PVGIS webpage on calculation methods.</p> </div> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#dataprofile" aria-expanded="false" aria-controls="dataprofile"><span data-ts="pvgis.simulator.step_seven_title">7 • Daily Radiation Profile Data</span> <span class="toggle-icon"></span></a></h5> <div id="dataprofile" class="panel-collapse collapse"> <p class="guide" data-ts="pvgis.simulator.step_seven_guide">By default, PVGIS provides solar panels made up of crystalline silicon cells. These solar panels correspond to the majority of rooftop-installed solar panel technology. PVGIS does not differentiate between polycrystalline and monocrystalline cells.</p> <div> <form class="form-group"> <select aria-label="pvtechchoice" name="pvtechchoice" id="stepspvtechchoice" class="duplicate-input-selectpvtechchoice form-control text-uppercase"> <option value="crystSi" class="text-uppercase" data-ts="pvgis.simulator.forms.crystalline_silicon"> crystalline sillicon </option> <option value="CIS" class="text-uppercase">cis</option> <option value="CdTe" class="text-uppercase">cdte</option> <option data-ts="pvgis.simulator.forms.unknown" value="Unknown" class="text-uppercase">unknown</option> </select> </form> <p class="text-right"><a role="button" data-toggle="collapse" href="#stepsprofilecontent" aria-expanded="false" aria-controls="stepsprofilecontent"> <span class="toggle-iconplus"></span></a></p> </div> <p id="stepsprofilecontent" class="panel-collapse collapse" data-ts="pvgis.simulator.step_seven_consigne">The performance of photovoltaic modules depends on temperature, solar irradiance, and the spectrum of sunlight. However, the exact dependence varies among different types of photovoltaic modules. <br> Currently, we can estimate losses due to temperature and irradiance effects for the following types of modules: <br><br> • Crystalline silicon cells <br> • Thin-film modules made from CIS or CIGS <br> • Thin-film modules made from cadmium telluride (CdTe) <br><br> For other technologies, especially various amorphous technologies, this correction cannot be calculated here. <br><br> If you choose one of the first three options here, the performance calculation will take into account the temperature dependence of the chosen technology. If you choose the other option (other/unknown), the calculation will assume an 8% power loss due to temperature effects (a generic value that has been found reasonable for temperate climates). <br><br> Note that the calculation of the spectral variations' effect is currently available only for crystalline silicon and CdTe. The spectral effect cannot yet be considered for areas covered only by the PVGIS-NSRDB database. <br><br> Monocrystalline or Polycrystalline? <br> Monocrystalline silicon is composed of a single silicon crystal, as it is manufactured from a stretched ingot. Polycrystalline silicon is composed of a mosaic of silicon crystals (in fact, residual monocrystalline silicon is used to make polycrystalline silicon). <br><br> Monocrystalline solar panels currently have a better efficiency, higher than that of polycrystalline panels, by approximately 1 to 3%. <br><br> Monocrystalline solar panels can produce more electricity than polycrystalline ones because they are better at capturing sunlight, even in diffuse radiation. Therefore, they are suitable for regions with less intense sunlight, such as temperate zones. <br><br> Polycrystalline solar panels are particularly more efficient in very sunny and hot regions.</p> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#picpower" aria-expanded="false" aria-controls="picpower"><span data-ts="pvgis.simulator.step_eight_title">8 • Installed peak PV power [kWp]</span> <span class="toggle-icon"></span></a></h5> <div id="picpower" class="panel-collapse collapse"> <p class="guide" data-ts="pvgis.simulator.step_eight_guide">Please provide the total power of the installed panels in kilowatts. For example, if you have 9 panels each with a capacity of 500 Watts, you would enter 4.5. (9 panels x 500 Watts = 4500 Watts, which is 4.5 kilowatts)</p> <div> <form class="form-group form-inline setps-form-container"> <span><label for="stepspeakpower" data-ts="pvgis.simulator.forms.peak_pv_power">Installed peak PV power [kWp] </label><span class="text-danger">*</span></span> <input type="number" aria-label="peakpower" min="0" id="stepspeakpower" class="duplicate-input-picpower form-control text-right" name="peakpower" value="1" /> </form> <p class="text-right"><a role="button" data-toggle="collapse" href="#stepspicpowercontent" aria-expanded="false" aria-controls="stepspicpowercontent"> <span class="toggle-iconplus"></span></a></p> </div> <p id="stepspicpowercontent" class="panel-collapse collapse" data-ts="pvgis.simulator.step_eight_consigne">This is the power that the manufacturer declares the photovoltaic system can produce under standard test conditions, which include constant solar irradiance of 1000 W per square meter in the plane of the system, at a system temperature of 25 °C. The peak power should be entered in kilowatt-peak (kWp).</p> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#perte" aria-expanded="false" aria-controls="perte"><span data-ts="pvgis.simulator.step_nine_title">9 • System Loss Estimation [%]</span> <span class="toggle-icon"></span></a></h5> <div id="perte" class="panel-collapse collapse"> <p class="guide" data-ts="pvgis.simulator.step_nine_guide">PVGIS provides a default value of 14% for overall losses in the solar electricity production system. If you have a good idea that your value will be different (perhaps due to a highly efficient inverter), you can slightly reduce this value.</p> <div> <form class="form-group form-inline setps-form-container"> <span><label for="stepsloss" data-ts="pvgis.simulator.forms.system_loss">System loss [%]</label><span class="text-danger">*</span></span> <input type="number" aria-label="loss" id="stepsloss" min="0" class="duplicate-input-gcloss form-control text-right" name="loss" value="14" /> </form> <p class="text-right"><a role="button" data-toggle="collapse" href="#stepsgclosscontent" aria-expanded="false" aria-controls="stepsgclosscontent"> <span class="toggle-iconplus"></span></a></p> </div> <p id="stepsgclosscontent" class="panel-collapse collapse" data-ts="pvgis.simulator.step_nine_consigne">The estimated losses of the system encompass all losses within the system, resulting in the actual energy supplied to the electrical grid being less than the energy produced by the photovoltaic modules. <br><br> There are several factors contributing to these losses, including cable losses, inverters, dirt (sometimes snow) on the modules, etc. <br><br> Over the years, modules also tend to lose a bit of their power, so the average annual production over the system's lifespan will be a few percentage points lower than the production in the initial years.</p> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#montage" aria-expanded="false" aria-controls="montage"><span data-ts="pvgis.simulator.step_ten_title">10 • Mounting Position</span> <span class="toggle-icon"></span></a></h5> <div id="montage" class="panel-collapse collapse"> <p class="guide" data-ts="pvgis.simulator.step_ten_guide"> There are two installation possibilities: Freestanding/On-Top Installation: Modules are mounted on a rack with free air circulation behind them.<br><br> Roof-Integrated/Building-Integrated: Modules are fully integrated into the structure of a building's wall or roof, with little or no air movement behind the modules. <br><br> The majority of rooftop installations are currently on-top installations.</p> <div> <form class="form-group form-inline setps-form-container"> <span><label for="stepsmountingplace" data-ts="pvgis.simulator.forms.mounting_option">Mounting position</label><span class="text-danger">*</span></span> <select aria-label="mountingplace" id="stepsmountingplace" name="mountingplace" class="duplicate-input-gcmounting form-control text-uppercase"> <option value="free" class="text-uppercase" data-ts="pvgis.simulator.forms.freestanding">Free-standing</option> <option value="building" class="text-uppercase" data-ts="pvgis.simulator.forms.roof_added_building_integrated"> Roof added / Building integrated </option> </select> </form> <p class="text-right"><a role="button" data-toggle="collapse" href="#stepsgcmpountingcontent" aria-expanded="false" aria-controls="stepsgcmpountingcontent"> <span class="toggle-iconplus"></span></a></p> </div> <p id="stepsgcmpountingcontent" class="panel-collapse collapse" data-ts="pvgis.simulator.step_ten_consigne">For fixed systems (without tracking), the way modules are mounted will influence the module temperature, which, in turn, affects efficiency. Experiments have shown that if air movement behind the modules is limited, the modules can be considerably warmer (up to 15°C at 1000 W/m2 sunlight). <br><br>Some mounting types fall between these two extremes. For example, if modules are mounted on a roof with curved tiles, allowing air to move behind the modules. In such cases, performance will be somewhere between the results of the two calculations possible here. To be conservative in such cases, the roof-added/integrated construction option can be used.</p> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#angleperte" aria-expanded="false" aria-controls="angleperte"><span data-ts="pvgis.simulator.step_eleven_title">11 • Angle or Tilt Loss</span> <span class="toggle-icon"></span></a></h5> <div id="angleperte" class="panel-collapse collapse"> <p class="guide" data-ts="pvgis.simulator.step_eleven_guide">You are aware of the tilt angle of your sloped roof; please provide information on this angle.</p> <div> <div> <form class="form-group form-inline setps-form-container"> <label for="stepsslope"><span data-ts="pvgis.simulator.forms.slope">Slope</span> [°]<span class="text-danger">*</span></label> <input id="stepsslope" type="number" min="0" class="duplicate-input-gcslope form-control text-right" name="slope" value="35" /> </form> <p> <input type="checkbox" aria-label="optimalinclination" id="stepsgcoptmizeslope" name="optimalinclination" value="1" /> <label for="stepsgcoptmizeslope" data-ts="pvgis.simulator.forms.optimize_slope"> Optimize slope </label> <br> <span data-ts="pvgis.simulator.step_eleven_consignee">This application can calculate the optimal values for slope and orientation (assuming fixed angles throughout the year).</span> </p> </div> <p class="text-right"><a role="button" data-toggle="collapse" href="#stepsgcslopecontent" aria-expanded="false" aria-controls="stepsgcslopecontent"> <span class="toggle-iconplus"></span></a></p> </div> <p id="stepsgcslopecontent" class="panel-collapse collapse"><span data-ts="pvgis.simulator.step_eleven_consigne">This concerns the angle of the photovoltaic modules in relation to the horizontal plane, for a fixed installation (without tracking). <br><br> If you have the opportunity to choose the tilt angle of your mounting system for your solar installation, whether it be on a flat roof or on the ground (concrete slab), you will check the angle optimization.</span> </p> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#azimuth" aria-expanded="false" aria-controls="azimuth"><span data-ts="pvgis.simulator.step_twelve_title">12 • Azimuth or Orientation</span> <span class="toggle-icon"></span></a></h5> <div id="azimuth" class="panel-collapse collapse"> <p class="guide" data-ts="pvgis.simulator.step_twelve_guide">You are familiar with the azimuth or orientation of your sloped roof; please provide information on this azimuth as follows. </p> <div> <div> <form class="form-group form-inline setps-form-container"> <label for="stepsangle"><span data-ts="pvgis.simulator.forms.optimize_slope_and_azimuth">Azimuth</span> [°]<span class="text-danger">*</span></label> <input id="stepsangle" type="number" class="duplicate-input-gcazimuth form-control text-right" name="angle" value="0" /> </form> <p> <input type="checkbox" aria-label="optimalangles" id="stepsgcoptmizeazimuth" name="optimalangles" value="1" /> <label for="stepsgcoptmizeazimuth" data-ts="pvgis.simulator.forms.optimize_slope_and_azimuth"> Optimize slope and azimuth</label> <br><br> <span data-ts="pvgis.simulator.step_twelve_consignee">This application can calculate the optimal values for tilt and orientation (assuming fixed angles throughout the year).</span> <br> <br> </p> </div> <p class="text-right"><a role="button" data-toggle="collapse" href="#stepsgcazimuthcontent" aria-expanded="false" aria-controls="stepsgcazimuthcontent"> <span class="toggle-iconplus"></span></a></p> </div> <p id="stepsgcazimuthcontent" class="panel-collapse collapse"><span data-ts="pvgis.simulator.step_twelve_consigne">The azimuth, or orientation, is the angle of the photovoltaic modules in relation to the direction: <br><br> • SOUTH 0° <br> • NORTH 180° <br> • EAST - 90° <br> • WEST 90° <br> • SOUTHWEST 45° <br> • SOUTHEAST - 45° <br> • NORTHWEST 135° <br> • NORTHEAST - 135° <br><br> If you have the opportunity to choose the azimuth or orientation of your mounting system for your solar installation, whether it be on a flat roof or on the ground (concrete slab), you will check the optimization of both the angle and the azimuth.</span> </p> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#cost" aria-expanded="false" aria-controls="cost"><span data-ts="pvgis.simulator.step_thirteen_title">13 • Cost of Photovoltaic Electricity [per kWh]</span> <span class="toggle-icon"></span></a></h5> <div id="cost" class="panel-collapse collapse"> <p class="guide" data-ts="pvgis.simulator.step_thirteen_guide"> This is a very approximate option for calculating the cost of produced kWh. This option has no impact on the electricity production calculation, and like any option, it is not mandatory. </p> <div> <form class="form-group"> <input type="checkbox" aria-label="pvprice" name="pvprice" value="1" id="stepspvprice" /> <label for="stepspvprice" data-ts="pvgis.simulator.forms.pv_electricity_price">PV electricity price</label> <div class="form-inline setps-form-container"> <label for="stepspvsystemcost"><span data-ts="pvgis.simulator.forms.pv_system_cost">PV system cost (your currency)</span><span class="text-danger">*</span></label> <input type="number" aria-label="systemcost" min="0" class="duplicate-input-gcsystemcost form-control" id="stepspvsystemcost" name="systemcost" /> </div> <div class="form-inline setps-form-container"> <label for="stepspvinterest"><span data-ts="pvgis.simulator.forms.interest">Interest</span> [ % / <span data-ts="year">year</span> ]<span class="text-danger">*</span></label> <input type="number" aria-label="interest" min="0" class="duplicate-input-gcinterest form-control" id="stepspvinterest" name="interest" /> </div> <div class="form-inline setps-form-container"> <label for="stepspvlifetime"><span data-ts="pvgis.simulator.forms.lifetime">Lifetime</span> [ <span data-ts="year">year</span> ]<span class="text-danger">*</span></label> <input type="number" aria-label="lifetime" min="0" class="duplicate-input-gclifetime form-control" id="stepspvlifetime" name="lifetime" /> </div> </form> <p class="text-right"><a role="button" data-toggle="collapse" href="#stepsgccostcontent" aria-expanded="false" aria-controls="stepsgccostcontent"> <span class="toggle-iconplus"></span></a></p> </div> <p id="stepsgccostcontent" class="panel-collapse collapse" data-ts="pvgis.simulator.step_thirteen_consigne">The calculated cost of the kWh does not take into account maintenance costs, insurance, and other corrective maintenance costs. The essence of PVGIS is the calculation of the production of your photovoltaic system based on your geographic location and installation information.<br><br> Nevertheless, you have the option to calculate, based on the electricity production estimate, the cost of photovoltaic electricity per kWh. <br><br> • Cost of the Photovoltaic System: Here, you need to enter the total installation cost of the photovoltaic system, including photovoltaic components (photovoltaic modules, mounting, inverters, cables, etc.) and installation costs (planning, installation, ...). The choice of currency is yours to decide; the electricity price calculated by PVGIS will then be the price per kWh of electricity in the same currency you have used. <br><br> • Interest Rate: This is the interest rate you pay on all loans necessary to finance the photovoltaic system. This assumes a fixed interest rate on the loan that will be repaid through annual payments over the system's lifespan. Enter 0 if it is a cash financing, without a loan. <br><br>• Photovoltaic System Lifespan: This is the expected lifespan of the photovoltaic system in years. This is used to calculate the effective cost of electricity for the system. If the photovoltaic system lasts longer, the cost of electricity will be proportionally lower. Power purchase agreements with grids are generally for 20 years. We recommend choosing this duration as information about the system's lifespan. </p> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#resultat" aria-expanded="false" aria-controls="resultat"><span data-ts="pvgis.simulator.step_fourteen_title">14 • Visualize the Results</span> <span class="toggle-icon"></span></a></h5> <div id="resultat" class="panel-collapse collapse"> <p class="guide" data-ts="pvgis.simulator.step_fourteen_guide">Click to view the results on the screen.</p> <p class="text-center"><button data-dismiss="modal" onclick="stepsvisualizeresult('grid-connected-tab', 'grid-connected-result')" id="stepsgcvisualizeresult" class="btn-visualize-grid-connected btn btn-primary"><i class="fas fa-eye"></i> <span data-ts="pvgis.simulator.forms.visualize_results">visualize results</span></button></p> <p data-ts="pvgis.simulator.step_fourteen_example">Example of solar production month by month.</p> <p class="text-center"><img src="https://cdn.pvgis.com/images/loading-ps.svg" class="lazyLoad" data-src="https://cdn.pvgis.com/images/layers/exampleresultgc.png" alt="exemple production solaire" style="width: 100%; max-width: 367px;"></p> </div> <hr> <p class="verySmall" style="margin-top: 38px;"><span class="sous-title" data-ts="pvgis.simulator.comment">Commentary on the Results</span></p><br> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#infos" aria-expanded="false" aria-controls="infos"><span data-ts="pvgis.simulator.step_fifteen_title">15 • Information Provided</span> <span class="toggle-icon"></span></a></h5> <div id="infos" class="panel-collapse collapse"> <table class="table table-results"> <tr class="table-header"> <td colspan="2" data-ts="pvgis.simulator.step_fifteen_input">Provided inputs :</td> </tr> <tbody> <tr> <td data-ts="pvgis.simulator.step_fifteen_location">Location [Lat/Lon]:</td> <td>-15.599 , -53.881</td> </tr> <tr> <td data-ts="pvgis.simulator.step_fifteen_horizon">Horizon:</td> <td data-ts="pvgis.simulator.step_fifteen_caculated">calculated</td> </tr> <tr> <td data-ts="pvgis.simulator.step_fifteen_tdatabase">Database used:</td> <td>PVGIS-SARAH2</td> </tr> <tr> <td data-ts="pvgis.simulator.step_fifteen_techpv">PV technology:</td> <td>CRYSTALLINE SILLICON</td> </tr> <tr> <td data-ts="pvgis.simulator.step_fifteen_instalpv">PV installed [Wp]:</td> <td>1</td> </tr> <tr> <td data-ts="pvgis.simulator.step_fifteen_losssystem">System loss [%]:</td> <td>14</td> </tr> </tbody> </table> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#systemresultat" aria-expanded="false" aria-controls="systemresultat"><span data-ts="pvgis.simulator.step_sixteen_title">16 • Results of the Grid-Connected Photovoltaic System</span> <span class="toggle-icon"></span></a></h5> <div id="systemresultat" class="panel-collapse collapse"> <p class="text-center"><button data-dismiss="modal" onclick="stepsvisualizeresult('grid-connected-tab', 'grid-connected-result')" id="stepsmvisualizeresult" class="btn-visualize-grid-connected btn btn-primary"><i class="fas fa-eye"></i> <span data-ts="pvgis.simulator.forms.visualize_results">visualize results</span></button></p> <p class="indication" data-ts="pvgis.simulator.step_sixteen_indication">The result of the photovoltaic energy calculation is the average monthly energy production and the average annual production by the photovoltaic system with the properties you have chosen.<br><br>The year-to-year variability is the standard deviation of the annual values calculated over the period covered by the selected solar radiation database.</p> <span class="steps-data-container"> <span class="steps-data-container-title" data-ts="pvgis.simulator.step_sixteen_resume_one"> Annual Production in kW, taking into account geographic and climatic parameters: </span> <span class="steps-results-data"> <b>Yearly PV energy production (kWh):</b> <b id="steps-energy-production">--</b> </span> <span data-ts="pvgis.simulator.step_sixteen_resume_two"> Annual Irradiation, the potential production of kWhs per m<sup>2</sup>: </span> <span class="steps-results-data"> <b> Yearly in-plane irradiation (kWh/m<sup>2</sup>): </b> <b id="steps-in-plane-radiation">--</b> </span> <span data-ts="pvgis.simulator.step_sixteen_resume_three"> Annual Variability in kWh, representing the possible variation between two years: </span> <span class="steps-results-data"> <b>Yearly-to-year variability (kWh):</b> <b id="steps-yeatly-to-year-variability">--</b> </span> <span data-ts="pvgis.simulator.step_sixteen_resume_four"> Total estimates of losses, taking into account production losses due to the angle, spectral effects, and site temperature. </span> </span> <table> <tr> <td colspan="2"> <b data-ts="pvgis.simulator.step_sixteen_change">Changes in output due to:</b> </td> </tr> <tr> <td colspan="2"><br></td> </tr> <tr> <td> <b data-ts="pvgis.simulator.step_sixteen_angle">Angle of incidence (%):</b> </td> <td class="right-align"> <b id="steps-angle-of-incidence">--</b> </td> </tr> <tr> <td> <b data-ts="pvgis.simulator.step_sixteen_spectral">Spectral effects (%):</b> </td> <td class="right-align"> <b id="steps-spectral-effects">--</b> </td> </tr> <tr> <td> <b data-ts="pvgis.simulator.step_sixteen_temperature">Temperature and low irradiance (%):</b> </td> <td class="right-align"> <b id="steps-sixteen-temperature">--</b> </td> </tr> <tr> <td colspan="2"><br></td> </tr> <tr> <td> <b data-ts="pvgis.simulator.step_sixteen_total">Total loss (%):</b> </td> <td class="right-align"> <b id="steps-total-loss">--</b> </td> </tr> </table> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#productionmensuelle" aria-expanded="false" aria-controls="productionmensuelle"><span data-ts="pvgis.simulator.step_seventeen_title">17 • Monthly Energy Production of the Fixed-Angle Photovoltaic System in kW/h</span> <span class="toggle-icon"></span></a></h5> <div id="productionmensuelle" class="panel-collapse collapse"> <p class="text-center"><button data-dismiss="modal" class="btn btn-primary" id="stepsgcpvoutput" data-toggle="tab" href="#grid-connected-pv-output-tab" onclick="scrollToResult()"><i class="fas fa-eye"></i> <span data-ts="pvgis.result.pv_output">PV output</span></button></p> <p class="text-center"><img src="https://cdn.pvgis.com/images/loading-ps.svg" class="lazyLoad" data-src="https://cdn.pvgis.com/images/layers/examplepvgc.png" alt="exemple pv output" style="width: 100%; max-width: 362px;"></p> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#radiationmensuelle" aria-expanded="false" aria-controls="radiationmensuelle"><span data-ts="pvgis.simulator.step_eighteen_title">18 • Monthly Irradiation in the plane for the fixed angle in kW/h per m2</span> <span class="toggle-icon"></span></a></h5> <div id="radiationmensuelle" class="panel-collapse collapse"> <p class="text-center"><button data-dismiss="modal" class="btn btn-primary" id="stepsgcradiation" data-toggle="tab" href="#grid-connected-radiation-tab" onclick="scrollToResult()"><i class="fas fa-eye"></i> <span data-ts="pvgis.result.radiation">Radiation</span></button></p> <p class="text-center"><img src="https://cdn.pvgis.com/images/loading-ps.svg" class="lazyLoad" data-cms-link data-cms-baseURL="https://cdn.pvgis.com/images/home" data-src="https://cdn.pvgis.com/images/home/en/irradiation.jpg" alt="exemple radiation" style="width: 100%; max-width: 361px;"></p> </div> <hr> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#horizon" aria-expanded="false" aria-controls="horizon"><span data-ts="pvgis.simulator.step_nineteen_title">19 • Horizon Contour</span> <span class="toggle-icon"></span></a></h5> <div id="horizon" class="panel-collapse collapse"> <p class="text-center"><img src="https://cdn.pvgis.com/images/loading-ps.svg" class="lazyLoad" data-cms-link data-cms-baseURL="https://cdn.pvgis.com/images/home" data-src="https://cdn.pvgis.com/images/home/en/horizon.jpg" alt="exemple horizon profile" style="width: 100%; max-width: 363px;"></p> </div> <hr> <p class="verySmall" style="margin-top: 38px;"><span class="sous-title" data-ts="pvgis.simulator.exporting_results">Exporting Results</span></p><br> <h5><a role="button" class="stepsTitle collapsed" data-toggle="collapse" data-parent="#accordeon" href="#exportpdf" aria-expanded="false" aria-controls="exportpdf"><span data-ts="pvgis.simulator.step_twenty_title">20 • Export PDF of Results</span> <span class="toggle-icon"></span></a></h5> <div id="exportpdf" class="panel-collapse collapse"> <p class="indication" data-ts="pvgis.simulator.step_twenty_indication">Export a PDF of the results of your simulation of the performance of your grid-connected photovoltaic system.<br><br>By clicking on PDF, you download your simulation.</p> <br> <!-- <p class="text-center"><button data-dismiss="modal" class="btn btn-primary" id="stepsgcpdf" onclick="downloadPdfGridConnected()"><i class="fas fa-print"></i><span data-ts="pvgis.result.pdf"> PDF</span></button></p><br> --> <p class="text-center"><button data-dismiss="modal" class="btn btn-primary disabled" id="stepsgcpdf" ><i class="fas fa-print"></i><span data-ts="pvgis.result.pdf"> PDF</span></button></p><br> <p class="text-center"><img src="https://cdn.pvgis.com/images/loading-ps.svg" class="lazyLoad" data-src="https://cdn.pvgis.com/images/layers/examplepdfgc.png" alt="exemple horizon profile" style="width: 100%; max-width: 874px;"></p> </div> <hr></div> </div> </div> </div> <!-- <div class="col-md-0 col-lg-0"></div> --> <div class="mapSimulator"> <!-- --> <div class="map-address-container" style="min-height:700px"> <div class="loading-container"> <div class="loadingMapAndSimulator" style="display:none"></div> <!-- <div id="map" class="loadingMapAndSimulatorResult "> --> <div id="map" class="loadingMapAndSimulatorResult"> <div id="instructionMap"> <p class="opacityRange"><span class="bgbtn"><button title="Change opacity" class="" id="opacityButton">O</button></span> <input type="range" name="opacity" id="opacity" step="0.1" min="0" max="1" value="0.6" style="display: none;"></p> <p class="opacityRange"><span class="bgbtn"><button title="Legend" id="legendButton">L</button></span> <img src="https://cdn.pvgis.com/images/loading-ps.svg" data-src="https://cdn.pvgis.com/images/layers/legend_solar.png" class="lazyLoad" width="250" id="legend" style="display: none;" alt="legend_solar"></p> </div> <div id="changeLayer"> <p class="bgbtn"><span class="changeLayer"><button title="Layer" class="" id="changeLayerButton"></button></span></p> </div> <div id="changeLayerContainer"> <p class="layerP"> <input type="checkbox" name="label" id="label"> <label for="label" data-ts="pvgis.simulator.label">Labels</label> </p> <p class="layerP"> <input type="checkbox" name="solar" id="solar"> <label for="solar" data-ts="pvgis.simulator.solar">Solar radiation</label> </p> <p class="layerP"> <input type="radio" aria-label="sentinel" name="layer" value="sentinel" id="sentinel"> <label for="sentinel" data-ts="pvgis.simulator.sentinel">Sentinel-2 cloudless</label> </p> <p class="layerP"> <input type="radio" aria-label="osm" name="layer" value="osm" id="osm"> <label for="osm" data-ts="pvgis.simulator.osm">Open Street Map</label> </p> <p class="layerP"> <input type="radio" aria-label="terrain" name="layer" value="terrain" id="terrain"> <label for="terrain" data-ts="pvgis.simulator.terrain">Terrain</label> </p> </div> </div> <!-- <div id="google-map" class="google-map d-none"></div> --> </div> <div class="map-input address-container"> <div class="address address-box"> <div class="addressButton"> <input type="text" aria-label="adresse" class="form-control" id="address" name="address" placeholder="Address" data-tstype="placeholder" data-ts="pvgis.simulator.address"> <button class="btn btn-primary" onclick="geocode()" type="button" data-ts="pvgis.simulator.go">Go!</button> </div> <p id="ip-indicator"><span data-ts="pvgis.simulator.based_on_ip"></span>: 3.237.223.94</p> </div> <div class="address-box address"> <div class="addressButton"> <input type="number" aria-label="latitude" class="form-control lonLat" name="latitude" id="latitude_input" placeholder="Lat: (8.611)"> <input type="number" aria-label="longitude" class="form-control lonLat" name="longitude" id="longitude_input" placeholder="Lon: (45.815)"> <button class="btn btn-primary" onclick="searchLocation()" type="button" data-ts="pvgis.simulator.go">Go!</button> </div> </div> </div> </div> <div class="coordinate"> <div class="loading-container-form"> <div class="loadingMapAndSimulator" style="height: 200px"></div> <div class="border-main loadingMapAndSimulatorResult" id="dataFile"> <div> <form id="locationForm" class="row"> <input type="hidden" name="lat" id="lat"> <input type="hidden" name="lon" id="lon"> <div class="col-md-4"> <p class="clearfix"><span class=""><strong><span class="" data-ts="pvgis.simulator.cursor">Cursor</span>:</strong></span> <span class="" id="latitude"></span> <span id="longitude"></span></p> <p class="clearfix"><strong><span class="" data-ts="pvgis.simulator.selected">Selected</span>:<span></span> <span class="" id="latitudeSelected"><span class="text-danger" data-ts="pvgis.simulator.select">Select</span></span> <span id="longitudeSelected"><span class="text-danger" data-ts="pvgis.simulator.location">location!</span></span></strong></p> <p class="clearfix elevation"><span class="" data-ts="pvgis.simulator.elevation">Elevation (m):</span> <span class="" id="elevation"></span></p> </div> <div class="col-md-8"> <p><b data-ts="pvgis.simulator.use_terrain_shadows">Use terrain shadows</b><b>:</b></p> <p class="p-in-btn-container"> <span class=""><input type="checkbox" aria-label="calculatedHorizon" name="cbhorizon1" class="cbhorizon" id="calculated" value="calculated" /> <a role="button" class="horizonFile" data-toggle="collapse" href="#shadows" aria-expanded="false" aria-controls="shadows" data-ts="pvgis.simulator.calculated_horizon">Calculated horizon</a></span> <span class="p-in-btn-box"><button type="button" class="btn btn-primary" id="cbhorizoncsv" onclick="downloadHorizon('csv')"><i class="fas fa-download"></i> csv</button><button type="button" onclick="downloadHorizon('json')" class="btn btn-primary p-in-cibled-btn" id="cbhorizonjson"><i class="fas fa-download"></i> json</button></span> </p> <p class="p-in-btn-container"> <span class=""><input type="checkbox" aria-label="uploadHorizonFile" name="cbhorizon2" class="cbhorizon" id="upload" value="user" /> <a role="button" class="horizonFile" data-toggle="collapse" href="#shadows" aria-expanded="false" aria-controls="shadows" data-ts="pvgis.simulator.upload_horizon_file">Upload horizon file</a> </span> <span class="custom-file-input" style="margin-top: 4px; "> <input class="hidden-input" type="file" name="horizonfileInput" id="cbhorizoninput" onchange="readFileAndSetHiddenValue('cbhorizoninput', 'cbhorizonFormattedInput', userhorizonFormatter)"> <label for="cbhorizoninput" class="file-label">Parcourir...</label> <span class="file-name" data-ts="pvgis.simulator.no_file_selected">Aucun fichier sélectionné</span> <!-- <label class="btn input-file btn-primary"> <i class="fas fa-upload"></i> <span data-ts="pvgis.simulator.file">Project</span> <input style="display: none;" type="file" name="horizonfileInput" id="cbhorizoninput" onchange="readFileAndSetHiddenValue('cbhorizoninput', 'cbhorizonFormattedInput', userhorizonFormatter)"> </label> --> </span> <input type="hidden" id="cbhorizonFormattedInput"> </p> </div> </form> <div class="row"> <div class="col-md-4 col-xs-5"> <p class="clearfix"><span class="" data-ts="pvgis.simulator.version">PVGIS ver.</span> <span class=""><strong>5.3</strong></span></p> </div> <div class="col-md-8 col-xs-7" style="margin-top: 4px;"><a href="/?is_api_legacy=1" class="version-switcher-btn" data-ts="pvgis.simulator.switch_version" data-tsVar='{"altPvgisApiVersion":"5.2"}'>Switch to version 5.2</a></div> </div> </div> <hr> <div id="tabs" class="coordinate box-shadow"> <div class="row tabs-containers"> <ul class="nav nav-tabs nav-stacked col-xs-12 col-sm-3 col-md-3" id="tablist"> <li class="liData tab-option active t_tool"><a data-toggle="tab" href="#grid-connected-tab" class="text-uppercase font-size-16" id="font-size-16" data-ts="pvgis.simulator.grid_connected">grid connected</a></li> <li class="left-3 left-1 liData tab-option t_tool"><a data-toggle="tab" href="#tracking-pv-tab" class="text-uppercase font-size-16" id="font-size-16" data-ts="pvgis.simulator.tracking_pv">tracking pv</a></li> <li class="left-3 liData tab-option t_tool"><a data-toggle="tab" href="#off-grid-tab" class="text-uppercase font-size-16" id="font-size-16" data-ts="pvgis.simulator.off_grid">off-grid</a></li> <li class="left-1 liData tab-option t_data"><a data-toggle="tab" href="#monthly-tab" class="text-uppercase font-size-16" id="font-size-16" data-ts="pvgis.simulator.monthly_data">monthly data</a></li> <li class="left-3 liData tab-option t_data"><a data-toggle="tab" href="#daily-tab" class="text-uppercase font-size-16" id="font-size-16" data-ts="pvgis.simulator.daily_data">daily data</a></li> <li class="left-1 left-3 liData tab-option t_data"><a data-toggle="tab" href="#hourly-tab" class="text-uppercase font-size-16" id="font-size-16" data-ts="pvgis.simulator.hourly_data">hourly data</a></li> <li class="liData tab-option t_tmy"><a data-toggle="tab" href="#tmy-tab" class="text-uppercase font-size-16" id="font-size-16" data-ts="pvgis.simulator.tmy">tmy</a></li> </ul> <div class="simulator-tab tab-content data-tab col-xs-12 col-sm-9 col-md-9" id="tab-chart"> <div id="grid-connected-tab" class="tab-pane fade in active"> <div class="data-content"> <div class="t_tool-content"> <span class="text-white"><i class="fas fa-solar-panel fa-lg"></i></span> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.grid_connected_perf_pv">performance of grid-connected pv</span> </h4> <span class="text-white" role="button" data-toggle="modal" data-target="#gcTooltip" aria-label="gcTooltip"><i class="fas fa-question-circle fa-lg"></i></span> <div class="modal fade" id="gcTooltip" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="modal-title text-uppercase" data-ts="pvgis.simulator.forms.grid_connected_perf_pv">performance of grid-connected pv</h4> </div> <div class="modal-body"> <p data-ts="pvgis.simulator.forms.gc_tooltip">This tool makes it possible to estimate the average monthly and yearly energy production of a PV system connected to the electricity grid, without battery storage. The calculation takes into account the solar radiation, temperature, wind speed and type of PV module. The user can choose how the modules are mounted, whether on a free-standing rack mounting, or integrated in a building surface. PVGIS can also calculate the optimum slope and orientation that maximizes the yearly energy production. For sun-tracking mountings, see the separate tool below this one.</p> </div> </div> </div> </div> </div> <form id="grid-connected-form"> <div class="form-group padding-right"> <div class="row select"> <div class="col-xs-6 label-select"> <a class="linktab" role="button" data-toggle="collapse" href="#database" aria-expanded="false" aria-controls="database"><span data-ts="pvgis.simulator.forms.solar_radiation_database">Solar radiation database</span><span class="text-danger">*</span></a> </div> <div class="col-xs-6"> <select aria-label="selectdbgridconnected" name="db" id="selectdbgridconnected" class="duplicate-input-selectdb form-control text-uppercase sr-db"> </select> </div> </div> <div class="row select"> <div class="col-xs-6 label-select"> <a class="linktab" role="button" data-toggle="collapse" href="#dataprofile" aria-expanded="false" aria-controls="dataprofile"> <span data-ts="pvgis.simulator.forms.pv_technology">PV technology</span><span class="text-danger">*</span> </a> </div> <div class="col-xs-6"> <select aria-label="pvtechchoice" name="pvtechchoice" id="pvtechchoice" class="duplicate-input-selectpvtechchoice form-control text-uppercase"> <option value="crystSi" class="text-uppercase" data-ts="pvgis.simulator.forms.crystalline_silicon"> crystalline sillicon </option> <option value="CIS" class="text-uppercase">cis</option> <option value="CdTe" class="text-uppercase">cdte</option> <option data-ts="pvgis.simulator.forms.unknown" value="Unknown" class="text-uppercase">unknown</option> </select> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <a class="linktab" role="button" data-toggle="collapse" href="#picpower" aria-expanded="false" aria-controls="picpower"> <span data-ts="pvgis.simulator.forms.peak_pv_power">Installed peak PV power</span> <span class="text-danger">*</span> </a> </div> <div class="col-xs-3"> <input type="number" aria-label="peakpower" min="0" class="duplicate-input-picpower form-control text-right" name="peakpower" value="1" /> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <a class="linktab" role="button" data-toggle="collapse" href="#perte" aria-expanded="false" aria-controls="perte"> <span data-ts="pvgis.simulator.forms.system_loss">System loss</span><span class="text-danger">*</span> </a> </div> <div class="col-xs-3"> <input type="number" aria-label="loss" min="0" class="duplicate-input-gcloss form-control text-right" name="loss" value="14" /> </div> </div> <div class="row"> <div class="col-xs-6" style="margin-top: 10px"> <b style="font-weight: 700;" data-ts="pvgis.simulator.forms.fixed_mounting_options">Fixed mounting options</b> </div> </div> <div class="row select"> <div class="col-xs-6 label-select"> <a class="linktab" role="button" data-toggle="collapse" href="#montage" aria-expanded="false" aria-controls="montage"><span data-ts="pvgis.simulator.forms.mounting_option">Mounting position</span><span class="text-danger">*</span></a> </div> <div class="col-xs-6"> <select aria-label="mountingplace" name="mountingplace" class=" duplicate-input-gcmounting form-control text-uppercase"> <option value="free" class="text-uppercase" data-ts="pvgis.simulator.forms.freestanding">Free-standing</option> <option value="building" class="text-uppercase" data-ts="pvgis.simulator.forms.roof_added_building_integrated"> Roof added / Building integrated </option> </select> </div> </div> <p></p> <div class="row"> <div class="col-xs-3 label-select mobile-75"> <a class="linktab" role="button" data-toggle="collapse" href="#angleperte" aria-expanded="false" aria-controls="angleperte"><span data-ts="pvgis.simulator.forms.slope">Slope</span> [°]<span class="text-danger">*</span></a> </div> <div class="col-xs-3"> <input type="number" aria-label="angle" min="0" max="90" class="duplicate-input-gcslope form-control text-right" name="angle" id="gcslope" value="35" /> </div> <div class="col-xs-6 label-select "> <input type="checkbox" aria-label="optimalinclination" id="gcoptimalinclination" name="optimalinclination" value="1" /> <label class="label-thin" for="gcoptimalinclination" data-ts="pvgis.simulator.forms.optimize_slope">Optimize slope</label> </div> </div> <div class="row"> <span id="slope-error" style="color: red; display: none;margin-left:145px" data-ts="pvgis.slope_validation_error">Please enter a value between 0 and 90.</span> </div> <p></p> <div class="row"> <div class="col-xs-3 label-select mobile-75"> <a class="linktab" role="button" data-toggle="collapse" href="#azimuth" aria-expanded="false" aria-controls="azimuth"><span data-ts="pvgis.simulator.forms.azimuth">Azimuth</span> [°]<span class="text-danger">*</span></a> </div> <div class="col-xs-3"> <input type="number" aria-label="aspect" class="duplicate-input-gcazimuth form-control text-right" name="aspect" id="gcazimuth" value="0" min="-180" max="180" /> </div> <div class="col-xs-6 label-select label-thin"> <input type="checkbox" aria-label="optimalangles" id="gcoptimalangles" name="optimalangles" value="1" /> <label class="label-thin" for="gcoptimalangles" data-ts="pvgis.simulator.forms.optimize_slope_and_azimuth">Optimize slope and azimuth</label> </div> </div> <div class="row"> <span id="gcazimuth-error" style="color: red; display: none;margin-left:145px" data-ts="pvgis.simulator.forms.azimuth-error">Value must be between -180 and 180.</span> </div> <p></p> <div class="row"> <div class="col-xs-6"> <input type="checkbox" aria-label="pvprice" class="checkboxSimulator" name="pvprice" value="1" id="pvprice" /> <label for="pvprice" data-ts="pvgis.simulator.forms.pv_electricity_price">PV electricity price</label> </div> </div> <p></p> <div class="row select"> <div class="col-xs-9 label-select"> <a class="linktab" role="button" data-toggle="collapse" href="#cost" aria-expanded="false" aria-controls="cost" data-ts="pvgis.simulator.forms.pv_system_cost">PV system cost (your currency)</a> </div> <div class="col-xs-3"> <input type="number" aria-label="systemcost" min="0" class="duplicate-input-gcsystemcost form-control" id="pvpsystemcost" name="systemcost" /> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <a class="linktab" role="button" data-toggle="collapse" href="#cost" aria-expanded="false" aria-controls="cost"><span data-ts="pvgis.simulator.forms.interest">Interest</span> [ % / <span data-ts="year">year</span> ]<span class="text-danger">*</span></a> </div> <div class="col-xs-3"> <input type="number" aria-label="interest" min="0" class="duplicate-input-gcinterest form-control" id="pvpinterest" name="interest" /> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <a class="linktab" role="button" data-toggle="collapse" href="#cost" aria-expanded="false" aria-controls="cost"><span data-ts="pvgis.simulator.forms.lifetime">Lifetime</span> [ <span data-ts="year">year</span> ]<span class="text-danger">*</span></a> </div> <div class="col-xs-3"> <input type="number" aria-label="lifetime" min="0" class="duplicate-input-gclifetime form-control" id="pvplifetime" name="lifetime" /> </div> </div> </div> </form></div> </div> <div id="tracking-pv-tab" class="tab-pane fade"> <div class="data-content"> <div class="t_tool-content"> <span class="text-white"><i class="fas fa-solar-panel fa-lg"></i></span> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.performance_of_tracking_pv"> performance of tracking pv </span> </h4> <span class="text-white" role="button" data-toggle="modal" data-target="#trackingTooltip" aria-label="trackingTooltip"><i class="fas fa-question-circle fa-lg"></i></span> <div class="modal fade" id="trackingTooltip" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="moda-title text-uppercase" data-ts="pvgis.simulator.forms.performance_of_tracking_pv">performance of tracking pv</h4> </div> <div class="modal-body"> <p data-ts="pvgis.simulator.forms.tracking_tooltip"></p> </div> </div> </div> </div> </div> <form id="tracking-form"> <div class="form-group padding-right"> <div class="row select"> <div class="col-xs-6 label-select"> <span><span data-ts="pvgis.simulator.forms.solar_radiation_database"> Solar radiation database</span><span class="text-danger">*</span></span> </div> <div class="col-xs-6"> <select aria-label="selectdbTracking" name="db" id="selectdbTracking" class="form-control text-uppercase sr-db"> </select> </div> </div> <div class="row select"> <div class="col-xs-6 label-select"> <span><span data-ts="pvgis.simulator.forms.pv_technology">PV technology</span><span class="text-danger">*</span></span> </div> <div class="col-xs-6"> <select aria-label="pvtechchoice" name="pvtechchoice" class="form-control text-uppercase"> <option value="crystSi" class="text-uppercase" data-ts="pvgis.simulator.forms.crystalline_silicon"> crystalline sillicon </option> <option value="CIS" class="text-uppercase">cis</option> <option value="CdTe" class="text-uppercase">cdte</option> <option data-ts="pvgis.simulator.forms.unknown" value="Unknown" class="text-uppercase">unknown</option> </select> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <span> <span class="pvgis.simulator.forms.peak_pv_power">Installed peak PV power</span> [kWp] <span class="text-danger">*</span> </span> </div> <div class="col-xs-3"> <input type="number" aria-label="peakpower" min="0" class="form-control" name="peakpower" value="1" /> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <span> <span class="pvgis.simulator.forms.system_loss">System loss</span> [%] <span class="text-danger">*</span> </span> </div> <div class="col-xs-3"> <input type="number" aria-label="loss" min="0" class="form-control" name="loss" value="14" /> </div> </div> <div class="row"> <div class="col-xs-6"> <b data-ts="pvgis.simulator.forms.tracking_mounting_option">Tracking mounting options</b> </div> </div> <div class="row"> <div class="col-xs-6 label-select mobile-100"> <input type="checkbox" aria-label="vertical_axis" class="checkboxSimulator" name="vertical_axis" id="tmoverticalax" value="1" /> <label for="tmoverticalax" class="labelThin" data-ts="pvgis.simulator.forms.vertical_axis">Vertical axis</label> </div> <div class="col-xs-3 label-select mobile-75" data-ts="pvgis.extranet.file_info.slope">Slope [°]</div> <div class="col-xs-3"> <input type="number" aria-label="verticalaxisangle" min="0" max="90" class="form-control" name="verticalaxisangle" id="tmoverticalangle" placeholder="(0-90)" /> </div> <div class="col-xs-3 label-select mobile-100"> <input type="checkbox" aria-label="vertical_optimum" name="vertical_optimum" id="tmooptimalax" value="1" /> <label for="tmooptimalax" data-ts="pvgis.simulator.forms.optimize">Optimize</label> </div> <div class="row"> <span id="slope-error-4" style="color: red; display: none;margin-left:140px" data-ts="pvgis.slope_validation_error">Please enter a value between 0 and 90.</span> </div> </div> <p></p> <div class="row"> <div class="col-xs-6 label-select mobile-100"> <input type="checkbox" aria-label="inclined_axis" class="checkboxSimulator" name="inclined_axis" id="tmoinclinedax" value="1" /> <label for="tmoinclinedax" class="labelThin" data-ts="pvgis.simulator.forms.inclined_axis">Inclined axis</label> </div> <div class="col-xs-3 label-select mobile-75"><span data-ts="pvgis.simulator.forms.slope">Slope</span> [°]</div> <div class="col-xs-3"> <input type="number" aria-label="inclinedaxisangle" min="0" class="form-control" name="inclinedaxisangle" id="tmoinclinedaxangle" placeholder="(0-90)" /> </div> <div class="col-xs-3 label-select mobile-100"> <input type="checkbox" aria-label="inclined_optimum" name="inclined_optimum" id="tmooptimalinclined" value="1" /> <label for="tmooptimalinclined" data-ts="pvgis.simulator.forms.optimize">Optimize</label> </div> <div class="row"> <span id="slope-error-5" style="color: red; display: none;margin-left:140px" data-ts="pvgis.slope_validation_error">Please enter a value between 0 and 90.</span> </div> </div> <p></p> <div class="row"> <div class="col-xs-3 label-select mobile-100"> <input type="checkbox" aria-label="twoaxis" class="checkboxSimulator" name="twoaxis" id="tmotwo" value="1" /> <label for="tmotwo" class="labelThin" data-ts="pvgis.simulator.forms.two_axis">Two axis </label> </div> </div> </div> </form></div> </div> <div id="off-grid-tab" class="tab-pane fade"> <div class="data-content"> <div class="t_tool-content" style="padding-left: 3px !important; padding-right: 3px !important;"> <span class="text-white"><i class="fas fa-car-battery fa-lg"></i></span> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.performance_offgrid_pv_systems">performance of off-grid pv systems</span> </h4> <span class="text-white" role="button" data-toggle="modal" data-target="#ogTooltip" aria-label="ogTooltip"><i class="fas fa-question-circle fa-lg"></i></span> <div class="modal fade" id="ogTooltip" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="modal-title text-uppercase" data-ts="pvgis.simulator.forms.performance_offgrid_pv_systems">performance of off-grid pv systems</h4> </div> <div class="modal-body"> <p data-ts="pvgis.simulator.forms.og_tooltip">This part of PVGIS calculates the performance of PV systems that are not connected to the electricity grid but instead rely on battery storage to supply energy when the sun is not shining. The calculation uses information about the daily variation in electricity consumption for the system to simulate the flow of energy to the users and into and out of the battery.</p> </div> </div> </div> </div> </div> <form id="offgridForm"> <div class="form-group padding-right"> <div class="row select"> <div class="col-xs-6 label-select"> <span><span data-ts="pvgis.simulator.forms.solar_radiation_database">Solar radiation database</span><span class="text-danger">*</span></span> </div> <div class="col-xs-6"> <select aria-label="selectdboffgrid" name="db" id="selectdboffgrid" class="form-control text-uppercase sr-db"> </select> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <span><span data-ts="pvgis.simulator.forms.peak_pv_power">Installed peak PV power</span> [Wp]<span class="text-danger">*</span></span> </div> <div class="col-xs-3"> <input type="number" aria-label="peakpower" min="0" class="form-control text-right" name="peakpower" value="50" /> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <span><span data-ts="pvgis.simulator.forms.battery_capacity">Battery capacity</span> [Wh]<span class="text-danger">*</span></span> </div> <div class="col-xs-3"> <input type="number" aria-label="batterycapacity" min="0" class="form-control text-right" name="batterycapacity" value="600" /> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <span><span data-ts="pvgis.simulator.forms.discharge_cutoff_limit"> Discharge cutoff limit</span> [%]<span class="text-danger">*</span></span> </div> <div class="col-xs-3"> <input type="number" aria-label="discharge" min="0" class="form-control text-right" name="discharge" value="40" /> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <span><span data-ts="pvgis.simulator.forms.consumption_per_day">Consumption per day</span> [Wh]<span class="text-danger">*</span></span> </div> <div class="col-xs-3"> <input type="number" aria-label="consumptionperday" min="0" class="form-control text-right" name="consumptionperday" value="300" /> </div> </div> <div class="row select"> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="consumptionFile" class="checkboxSimulator" name="consumptionFile" id="consumptionFile" value="consumptionFile" /> <label for="consumptionFile" class="labelThin" data-ts="pvgis.simulator.forms.upload_consumption_data">Upload consumption data</label> </div> <div class="col-xs-6 abel-select"> <input type="file" name="consumptionFileInput" id="consumptionFileInput" onchange="readFileAndSetHiddenValue('consumptionFileInput','hourconsumption', consumptionDayFormatter)" /> <input type="hidden" id="hourconsumption" /> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <span><span data-ts="pvgis.simulator.forms.slope">Slope</span> [°]<span class="text-danger">*</span></span> </div> <div class="col-xs-3"> <input type="number" aria-label="shsangle" min="0" max="90" class="form-control text-right" id="shsangle" name="shsangle" value="35" /> </div> <div class="row"> <span id="slope-error-2" style="color: red; display: none;margin-left:285px" data-ts="pvgis.slope_validation_error">Please enter a value between 0 and 90.</span> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <span><span data-ts="pvgis.simulator.forms.azimuth">Azimuth</span> [°]<span class="text-danger">*</span></span> </div> <div class="col-xs-3"> <input type="number" aria-label="shsaspect" class="form-control text-right" name="shsaspect" value="0" /> </div> </div> </div> </form></div> </div> <div id="monthly-tab" class="tab-pane fade"> <div class="data-content"> <div class="t_data-content"> <span class="text-white"><i class="fas fa-calendar-check fa-lg"></i></span> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.monthly_irradiation_data">monthly irradiation data</span> </h4> <span class="text-white" role="button" data-toggle="modal" data-target="#monthlyTooltip" aria-label="monthlyTooltip"><i class="fas fa-question-circle fa-lg"></i></span> <div class="modal fade" id="monthlyTooltip" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="modal-title text-uppercase" data-ts="pvgis.simulator.forms.monthly_irradiation_data">monthly irradiation data</h4> </div> <div class="modal-body"> <p data-ts="pvgis.simulator.forms.monthly_tooltip">Here we calculate the monthly averages of solar radiation for the chosen location, showing in graphs or tables how the average solar irradiation varies over a multi-year period. The results are given for radiation on horizontal and/or inclined planes, as well as Direct Normal Irradiation (DNI).</p> </div> </div> </div> </div> </div> <div class="form-group padding-right"> <form id="monthlyForm"> <div class="row select"> <div class="col-xs-6 label-select"> <span><span data-ts="pvgis.simulator.forms.solar_radiation_database">Solar radiation database</span><span class="text-danger">*</span></span> </div> <div class="col-xs-6"> <select aria-label="selectdbmonthly" name="db" id="selectdbmonthly" class="form-control text-uppercase sr-db"> </select> </div> </div> <div class="row select"> <div class="col-xs-3 label-select mobile-65"> <span><span data-ts="pvgis.simulator.forms.start_year"> Start year</span><span class="text-danger">*</span></span> </div> <div class="col-xs-3 mobile-35"> <select aria-label="startyear" name="startyear" class="form-control text-uppercase"> <option value="2005" class="text-uppercase">2005</option> <option value="2006" class="text-uppercase">2006</option> <option value="2007" class="text-uppercase">2007</option> <option value="2008" class="text-uppercase">2008</option> <option value="2009" class="text-uppercase">2009</option> <option value="2010" class="text-uppercase">2010</option> <option value="2011" class="text-uppercase">2011</option> <option value="2012" class="text-uppercase">2012</option> <option value="2013" class="text-uppercase">2013</option> <option value="2014" class="text-uppercase">2014</option> <option value="2015" class="text-uppercase">2015</option> <option value="2016" class="text-uppercase">2016</option> <option value="2017" class="text-uppercase">2017</option> <option value="2018" class="text-uppercase">2018</option> <option value="2019" class="text-uppercase">2019</option> <option value="2020" class="text-uppercase">2020</option> </select> </div> <div class="col-xs-3 label-select mobile-65 top-10"> <span><span data-ts="pvgis.simulator.forms.end_year">End year</span><span class="text-danger">*</span></span> </div> <div class="col-xs-3 top-10 mobile-35"> <select aria-label="endyear" name="endyear" class="form-control text-uppercase"> <option value="2005" class="text-uppercase">2005</option> <option value="2006" class="text-uppercase">2006</option> <option value="2007" class="text-uppercase">2007</option> <option value="2008" class="text-uppercase">2008</option> <option value="2009" class="text-uppercase">2009</option> <option value="2010" class="text-uppercase">2010</option> <option value="2011" class="text-uppercase">2011</option> <option value="2012" class="text-uppercase">2012</option> <option value="2013" class="text-uppercase">2013</option> <option value="2014" class="text-uppercase">2014</option> <option value="2015" class="text-uppercase">2015</option> <option value="2016" class="text-uppercase">2016</option> <option value="2017" class="text-uppercase">2017</option> <option value="2018" class="text-uppercase">2018</option> <option value="2019" class="text-uppercase">2019</option> <option value="2020" class="text-uppercase">2020</option> </select> </div> </div> <div class="row"> <div class="col-xs-6"> <b data-ts="pvgis.simulator.forms.irradiation">Irradiation</b> </div> </div> <div class="row"> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="horirrad" class="checkboxSimulator" name="horirrad" id="horirrad" value="1" /> <label for="horirrad" class="labelThin" data-ts="pvgis.simulator.forms.global_horizontal_irradiation">Global horizontal irradiation</label> </div> </div> <div class="row"> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="mr_dni" class="checkboxSimulator" name="mr_dni" id="mr_dni" value="1" /> <label for="mr_dni" class="labelThin" data-ts="pvgis.simulator.forms.direct_normal_irradiation">Direct Normal Irradiation</label> </div> </div> <div class="row"> <div class="col-xs-7 label-select"> <input type="checkbox" aria-label="optrad" class="checkboxSimulator" name="optrad" id="optrad" value="1" /> <label for="optrad" class="labelThin" data-ts="pvgis.simulator.forms.global_irradiation_optimum_angle">Global irradiation optimum angle</label> </div> </div> <div class="row"> <div class="col-xs-9 label-select mobile-71"> <input type="checkbox" aria-label="selectrad" class="checkboxSimulator" name="selectrad" id="selectrad" value="1" /> <label for="selectrad" class="labelThin" data-ts="pvgis.simulator.forms.global_irradiation_at_angle">Global irradiation at angle</label> </div> <div class="col-xs-3 mobile-29"> <input type="number" aria-label="angle" min="0" class="form-control" id="mangle" name="angle" placeholder="(0-90)" /> </div> </div> <div class="row"> <span id="slope-error-7" style="color: red; display: none;margin-left:275px" data-ts="pvgis.slope_validation_error">Please enter a value between 0 and 90.</span> </div> <p></p> <div class="row"> <div class="col-xs-6"> <b data-ts="pvgis.simulator.forms.ratio">Ratio</b> </div> </div> <div class="row"> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="d2g" class="checkboxSimulator" name="d2g" id="d2g" value="1" /> <label for="d2g" class="labelThin" data-ts="pvgis.simulator.forms.diffuse_global_ratio">Diffuse/global ratio</label> </div> </div> <p></p> <div class="row"> <div class="col-xs-6"> <b data-ts="pvgis.simulator.forms.temperature">Temperature</b> </div> </div> <div class="row"> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="avtemp" class="checkboxSimulator" name="avtemp" id="avtemp" value="1" /> <label for="avtemp" class="labelThin" data-ts="pvgis.simulator.forms.average_temperature">Average temperature</label> </div> </div> </form> </div></div> </div> <div id="daily-tab" class="tab-pane fade"> <div class="data-content"> <div class="t_data-content"> <span class="text-white"><i class="fas fa-radiation-alt fa-lg"></i></span> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.average_daily_irradiance_data">average daily irradiance data</span> </h4> <span class="text-white" role="button" data-toggle="modal" data-target="#dailyTooltip" aria-label="dailyTooltip"><i class="fas fa-question-circle fa-lg"></i></span> <div class="modal fade" id="dailyTooltip" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="modal-title text-uppercase" data-ts="pvgis.simulator.forms.average_daily_irradiance_data">average daily irradiance data</h4> </div> <div class="modal-body"> <p data-ts="pvgis.simulator.forms.daily_tooltip">In this section of PVGIS we show the average solar irradiation for each hour during the day for a chosen month, with the average taken over all days in that month during the multi-year time period for which we have data. In addition to calculating the average of the solar radiation the daily radiation application also calculates the daily variation in the clear-sky radiation, both for fixed and for 2-axis sun-tracking surfaces.</p> </div> </div> </div> </div> </div> <div class="form-group padding-right"> <form id="dailyForm"> <div class="row select"> <div class="col-xs-6 label-select"> <span><span data-ts="pvgis.simulator.forms.solar_radiation_database">Solar radiation database</span><span class="text-danger">*</span></span> </div> <div class="col-xs-6"> <select aria-label="selectdbDaily" name="db" id="selectdbDaily" class="form-control text-uppercase sr-db"> </select> </div> </div> <div class="row select"> <div class="col-xs-6 label-select"> <span><span data-ts="month">Month</span><span class="text-danger">*</span></span> </div> <div class="col-xs-6 form-group"> <select aria-label="month" name="month" class="form-control text-uppercase"> <option value="1" class="text-uppercase" data-ts="months.january">january</option> <option value="2" class="text-uppercase" data-ts="months.february">february</option> <option value="3" class="text-uppercase" data-ts="months.march">march</option> <option value="4" class="text-uppercase" data-ts="months.april">april</option> <option value="5" class="text-uppercase" data-ts="months.may">may</option> <option value="6" class="text-uppercase" data-ts="months.june">june</option> <option value="7" class="text-uppercase" data-ts="months.july">july</option> <option value="8" class="text-uppercase" data-ts="months.august">august</option> <option value="9" class="text-uppercase" data-ts="months.september">september</option> <option value="10" class="text-uppercase" data-ts="months.october">october</option> <option value="11" class="text-uppercase" data-ts="months.november">november</option> <option value="12" class="text-uppercase" data-ts="months.december">december</option> </select> </div> </div> <div class="row"> <div class="col-xs-6 label-select"> <input type="radio" aria-label="utc" id="utc" name="localtime" value="0" checked /> <label for="utc" class="labelThin" data-ts="pvgis.simulator.forms.utc_time">UTC time</label> </div> <div class="col-xs-6 label-select"> <input type="radio" aria-label="local" id="local" name="localtime" value="1" /> <label for="local" class="labelThin" data-ts="pvgis.simulator.forms.local_time">Local time</label> </div> </div> <p></p> <div class="row"> <div class="col-xs-6"> <b data-ts="pvgis.simulator.forms.on_fixed_plane">On fixed plane</b> </div> </div> <div class="row"> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="isGlobal" class="checkboxSimulator" id="ofpglobal" name="isGlobal" value="1" /> <label for="ofpglobal" class="labelThin" data-ts="pvgis.simulator.forms.irradiance">Irradiance</label> </div> </div> <div class="row"> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="clearsky" class="checkboxSimulator" id="ofpclearsky" name="clearsky" value="1" /> <label for="ofpclearsky" class="labelThin" data-ts="pvgis.simulator.forms.clear_sky_irradiance">Clear-sky irradiance</label> </div> </div> <div class="row select"> <div class="col-xs-3 label-select mobile-75"> <span><span data-ts="pvgis.simulator.forms.slope">Slope</span> [°]<span class="text-danger">*</span></span> </div> <div class="col-xs-3"> <input type="number" aria-label="angle" min="0" max="90" class="form-control text-right" id="ofpdangle" name="angle" value="35" /> </div> </div> <div class="row"> <span id="slope-error-6" style="color: red; display: none;margin-left:145px" data-ts="pvgis.slope_validation_error">Please enter a value between 0 and 90.</span> </div> <div class="row select"> <div class="col-xs-3 label-select mobile-75"> <span><span data-ts="pvgis.simulator.forms.azimuth">Azimuth</span> [°]<span class="text-danger">*</span></span> </div> <div class="col-xs-3"> <input type="number" aria-label="aspect" class="form-control text-right" id="ofpdaspect" name="aspect" value="0" /> </div> </div> <div class="row"> <span id="azimuth-error-2" style="color: red; display: none;margin-left:145px" data-ts="pvgis.simulator.forms.azimuth-error">Value must be between -180 and 180.</span> </div> <p></p> <div class="row"> <div class="col-xs-6"> <b data-ts="pvgis.simulator.forms.on_sun_tracking_pane">On sun-tracking plane</b> </div> </div> <div class="row"> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="glob_2axis" class="checkboxSimulator" id="glob_2axis" name="glob_2axis" value="1" /> <label for="glob_2axis" class="labelThin" data-ts="pvgis.simulator.forms.irradiance">Irradiance</label> </div> </div> <div class="row"> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="clearsky_2axis" class="checkboxSimulator" id="clearsky_2axis" name="clearsky_2axis" value="1" /> <label for="clearsky_2axis" class="labelThin" data-ts="pvgis.simulator.forms.clear_sky_irradiance">Clear-sky irradiance</label> </div> </div> <p></p> <div class="row"> <div class="col-xs-6"> <b data-ts="pvgis.simulator.forms.temperature">Temperature</b> </div> </div> <div class="row"> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="showtemperatures" class="checkboxSimulator" id="showtemperatures" name="showtemperatures" value="1" /> <label for="showtemperatures" class="labelThin" data-ts="pvgis.simulator.forms.daily_temperature_profile">Daily temperature profile</label> </div> </div> </form> </div></div> </div> <div id="hourly-tab" class="tab-pane fade"> <div class="data-content"> <div class="t_data-content"> <span class="text-white"><i class="fas fa-hourglass-half fa-lg"></i></span> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.hourly_radiation_data">hourly radiation data</span> </h4> <span class="text-white" role="button" data-toggle="modal" data-target="#hourlyTooltip" aria-label="hourlyTooltip"><i class="fas fa-question-circle fa-lg"></i></span> <div class="modal fade" id="hourlyTooltip" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="modal-title text-uppercase" data-ts="pvgis.simulator.forms.hourly_radiation_data">hourly radiation data</h4> </div> <div class="modal-body"> <p data-ts="pvgis.simulator.forms.hourly_tooltip">The solar radiation data used by PVGIS consists of values for every hour over a period of several years, based on data from satellites and reanalysis. This part of PVGIS makes it possible to download the full set of hourly data for solar radiation and/or PV output power for the chosen location. Unlike the other parts of PVGIS, the data will not be shown as graphs but will be available for download only.</p> </div> </div> </div> </div> </div> <div class="form-group padding-right"> <form id="hourlyForm"> <div class="row select"> <div class="col-xs-6 label-select"> <span><span data-ts="pvgis.simulator.forms.solar_radiation_database">Solar radiation database</span><span class="text-danger">*</span></span> </div> <div class="col-xs-6"> <select aria-label="selectdbhourly" name="db" id="selectdbhourly" class="form-control text-uppercase sr-db"> </select> </div> </div> <div class="row select"> <div class="col-xs-3 label-select mobile-65"> <span><span data-ts="pvgis.simulator.forms.start_year">Start year</span><span class="text-danger">*</span></span> </div> <div class="col-xs-3 mobile-35"> <select aria-label="startyear" name="startyear" class="form-control text-uppercase"> <option value="2005" class="text-uppercase">2005</option> <option value="2006" class="text-uppercase">2006</option> <option value="2007" class="text-uppercase">2007</option> <option value="2008" class="text-uppercase">2008</option> <option value="2009" class="text-uppercase">2009</option> <option value="2010" class="text-uppercase">2010</option> <option value="2011" class="text-uppercase">2011</option> <option value="2012" class="text-uppercase">2012</option> <option value="2013" class="text-uppercase">2013</option> <option value="2014" class="text-uppercase">2014</option> <option value="2015" class="text-uppercase">2015</option> <option value="2016" class="text-uppercase">2016</option> <option value="2017" class="text-uppercase">2017</option> <option value="2018" class="text-uppercase">2018</option> <option value="2019" class="text-uppercase">2019</option> <option value="2020" class="text-uppercase">2020</option> </select> </div> <div class="col-xs-3 label-select mobile-65 top-10"> <span><span data-ts="pvgis.simulator.forms.end_year">End year</span><span class="text-danger">*</span></span> </div> <div class="col-xs-3 top-10 mobile-35"> <select aria-label="endyear" name="endyear" class="form-control text-uppercase"> <option value="2005" class="text-uppercase">2005</option> <option value="2006" class="text-uppercase">2006</option> <option value="2007" class="text-uppercase">2007</option> <option value="2008" class="text-uppercase">2008</option> <option value="2009" class="text-uppercase">2009</option> <option value="2010" class="text-uppercase">2010</option> <option value="2011" class="text-uppercase">2011</option> <option value="2012" class="text-uppercase">2012</option> <option value="2013" class="text-uppercase">2013</option> <option value="2014" class="text-uppercase">2014</option> <option value="2015" class="text-uppercase">2015</option> <option value="2016" class="text-uppercase">2016</option> <option value="2017" class="text-uppercase">2017</option> <option value="2018" class="text-uppercase">2018</option> <option value="2019" class="text-uppercase">2019</option> <option value="2020" class="text-uppercase">2020</option> </select> </div> </div> <div class="row"> <div class="col-xs-6"> <b><span data-ts="pvgis.simulator.forms.mounting_type">Mounting type</span><span class="text-danger">*</span></b> </div> </div> <div class="row"> <div class="col-xs-6 label-select mobile-100"> <input type="radio" aria-label="fixed" name="trackingtype" id="fixed" value="0" checked /> <label for="fixed" data-ts="pvgis.simulator.forms.fixed">Fixed</label> </div> <div class="col-xs-6 label-select mobile-100"> <input type="radio" aria-label="vertical" name="trackingtype" id="vertical" value="3" /> <label for="vertical" data-ts="pvgis.simulator.forms.vertical_axis">Vertical axis</label> </div> <div class="col-xs-6 label-select mobile-100"> <input type="radio" aria-label="inclined" name="trackingtype" id="inclined" value="5" /> <label for="inclined" data-ts="pvgis.simulator.forms.inclined_axis">Inclined axis</label> </div> <div class="col-xs-6 label-select mobile-100"> <input type="radio" aria-label="two" name="trackingtype" id="two" value="2" /> <label for="two" data-ts="pvgis.simulator.forms.two_axis">Two axis</label> </div> </div> <p></p> <div class="row"> <div class="col-xs-3 label-select mobile-65"> <span><span data-ts="pvgis.simulator.forms.slope">Slope</span> [°]</span> </div> <div class="col-xs-3 mobile-35"> <input type="number" aria-label="hourlyangle" min="0" max="90" class="form-control" name="hourlyangle" id="hourlyangle" placeholder="(0-90)" required /> </div> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="hourlyoptimalinclination" class="hourlyoptimal" name="hourlyoptimalinclination" id="hourlyoptimalinclination" value="1" /> <label for="hourlyoptimalinclination" data-ts="pvgis.simulator.forms.optimize_slope">Optimize slope</label> </div> </div> <div class="row"> <span id="slope-error-3" style="color: red; display: none;margin-left:145px" data-ts="pvgis.slope_validation_error">Please enter a value between 0 and 90.</span> </div> <p></p> <div class="row"> <div class="col-xs-3 label-select mobile-65"> <span><span data-ts="pvgis.simulator.forms.azimuth">Azimuth</span> [°]</span> </div> <div class="col-xs-3 mobile-35"> <input type="number" class="form-control" name="hourlyaspect" id="hourlyaspect" placeholder="(-180-180)" required /> </div> <div class="col-xs-6 label-select"> <input type="checkbox" aria-label="hourlyoptimalangles" class="hourlyoptimal" name="hourlyoptimalangles" id="hourlyoptimalangles" value="1" /> <label for="hourlyoptimalangles" data-ts="pvgis.simulator.forms.optimize_slope_and_azimuth">Optimize slope and azimuth</label> </div> </div> <div class="row"> <span id="azimuth-error-3" style="color: red; display: none;margin-left:145px" data-ts="pvgis.simulator.forms.azimuth-error">Value must be between -180 and 180.</span> </div> <p></p> <div class="row"> <div class="col-xs-6"> <input type="checkbox" aria-label="pvcalculation" class="checkboxSimulator" name="pvcalculation" id="pvwpvcalculation" value="1" /> <label for="pvwpvcalculation" data-ts="pvgis.simulator.forms.pv_power">PV power</label> </div> </div> <div class="row select"> <div class="col-xs-6 label-select"> <span data-ts="pvgis.simulator.forms.pv_technology">PV technology</span> </div> <div class="col-xs-6"> <select aria-label="pvtechchoice" name="pvtechchoice" id="pvwpvtechchoice" class="form-control text-uppercase"> <option value="crystSi" class="text-uppercase" data-ts="pvgis.simulator.forms.crystalline_silicon"> crystalline sillicon </option> <option value="CIS" class="text-uppercase">cis</option> <option value="CdTe" class="text-uppercase">cdte</option> <option data-ts="pvgis.simulator.forms.unknown" value="Unknown" class="text-uppercase">unknown</option> </select> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <span><span data-ts="pvgis.simulator.forms.peak_pv_power">Installed peak PV power</span> [kWp]</span> </div> <div class="col-xs-3"> <input type="number" aria-label="peakpower" min="0" class="form-control text-right" id="pvwpeakpower" name="peakpower" value="1" /> </div> </div> <div class="row select"> <div class="col-xs-9 label-select"> <span><span data-ts="pvgis.simulator.forms.peak_pv_power">System loss</span> [%]</span> </div> <div class="col-xs-3"> <input type="number" aria-label="loss" min="0" class="form-control text-right" id="pvwloss" name="loss" value="14" /> </div> </div> <p></p> <div class="row"> <div class="col-xs-6"> <input type="checkbox" aria-label="components" class="checkboxSimulator" id="components" name="components" value="1" /> <label for="components" data-ts="pvgis.simulator.forms.radiation_components">Radiation components</label> </div> </div> </form> </div></div> </div> <div id="tmy-tab" class="tab-pane fade"> <div class="data-content"> <div class="t_tmy-content"> <span class="text-white"><i class="fab fa-docker fa-lg"></i></span> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.typical_meteorological_year">typical meteorological year</span> </h4> <span class="text-white" role="button" data-toggle="modal" data-target="#tmyTooltip" aria-label="tmyTooltip"><i class="fas fa-question-circle fa-lg"></i></span> <div class="modal fade" id="tmyTooltip" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="modal-title text-uppercase" data-ts="pvgis.simulator.forms.typical_meteorological_year">typical meteorological year</h4> </div> <div class="modal-body"> <p data-ts="pvgis.simulator.forms.tmy_tooltip">A typical meteorological year (TMY) is a set of meteorological data with data values for every hour in a year for a given geographical location. The data are selected from hourly data in a longer time period (normally 10 years or more). The TMY tool can be used to interactively visualise all the data or to download the data as a text file.</p> </div> </div> </div> </div> </div> <div class="form-group"> <form id="tmyForm"> <div class="row select"> <div class="col-xs-12 label-select text-center"> <span><span data-ts="pvgis.simulator.forms.select_period">Select period</span><span class="text-danger">*</span></span> </div> </div> <p></p> <div class="row"> <div class="col-xs-0 col-sm-3 col-md-3"></div> <div class="col-xs-12 col-sm-6 col-md-7"> <select aria-label="selectdbtmy" name="db" id="selectdbtmy" class="form-control text-uppercase"> <option value="1" class="text-uppercase"> pvgis-sarah2: 2005 - 2020 </option> <option value="2" class="text-uppercase"> pvgis-sarah: 2005 - 2016 </option> <option value="3" class="text-uppercase"> pvgis-era: 2005 - 2020 </option> </select> </div> <div class="col-xs-0 col-sm-3 col-md-2"></div> </div> </form> </div></div> </div> </div> </div> </div> <div class="coordinate box-shadow" id="buttonContainer"></div> </div> </div> </div> <div class="coordinate box-shadow tab-content" id="visualize-result"> <div class="visualize-result collapse" id="grid-connected-result"> <div> <p style="visibility: hidden;display:none;">dummy filler</p> <div class="loadingVisualizeResults" style="height: 100px;"></div> <div class="visualize-result-content"> <div class="t_tool-content"> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.grid_connected_perf_pv">performance of grid-connected pv</span>: <span data-ts="pvgis.simulator.results">Results</span> </h4> <span class="text-white tool-btns-container"> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#grid-connected-pv-output-tab"><i class="fas fa-eye"></i> PV output</span> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#grid-connected-radiation-tab"><i class="fas fa-eye"></i> Radiation</span> <span class="btn btn-xs btn-primary" role="button" data-toggle="modal" data-target="#grid-connected-info"><i class="fas fa-question-circle"></i> Info</span> <span class="btn btn-xs btn-primary" onclick="newDownloadPdfGridConnected()"><i class="fas fa-print"></i> PDF</span> </span> <div class="modal fade" id="grid-connected-info" role="dialog"> <div class="modal-dialog info"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="moda-title text-uppercase" data-ts="pvgis.result_of_grid_connected_pv_system"></h4> </div> <div class="modal-body"> <p data-ts="pvgis_result_of_grid_connected_p_1"></p> <p data-ts="pvgis_result_of_grid_connected_p_1"></p> </div> </div> </div> </div> </div> <br> <div class="summary-results"> <div class="summary-results-first"> <div class="graph tab-content"> <div id="grid-connected-pv-output-tab" class="tab-pane fade in active"> <div id="chart-gcContainer" class="chartResult"></div> </div> <div id="grid-connected-radiation-tab" class="tab-pane fade"> <div id="chart-gcContainer-rad" class="chartResult"></div> </div> </div> </div> <div class="summary-results-second"> <div class="summary" id="gcSummaryContainer"> <h4><span data-ts="pvgis.summary">Summary</span></h4> <div style="text-align: right; width: 89.5%;"> <div> <a href="#" class="btn-summary" onclick="downloadSummary('gcSummaryContainer', 'gridconnected_summary')"></a> </div> </div> <table class="gcInputSummary table table-results" id="gcInputSummary"> <tbody></tbody> </table> <table class="gcOutputSummary table table-results" id="gcOutputSummary"> <tbody></tbody> </table> </div> </div> <div class="summary-results-third"> <div class="horizon"> <div id="chart-gc-horizon-profile-container"></div> </div> </div> </div> </div></div> </div> <div class="visualize-result collapse" id="tracking-pv-result"> <div> <p style="visibility: hidden; display:none;">dummy filler</p> <div class="loadingVisualizeResults" style="height: 100px;"></div> <div class="visualize-result-content"> <div class="t_tool-content"> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.performance_of_tracking_pv"> performance of tracking pv </span>: <span data-ts="pvgis.simulator.results">Results</span> </h4> <span class="text-white tool-btns-container"> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#tracking-pv-output-tab"><i class="fas fa-eye"></i> PV output</span> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#tracking-radiation-tab"><i class="fas fa-eye"></i> Radiation</span> <span class="btn btn-xs btn-primary" role="button" data-toggle="modal" data-target="#tracking-pv-info"><i class="fas fa-question-circle"></i> Info</span> <span class="btn btn-xs btn-primary" onclick="newDownloadPdfTracking()"><i class="fas fa-print"></i> PDF</span> </span> <div class="modal fade" id="tracking-pv-info" role="dialog"> <div class="modal-dialog info"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="moda-title text-uppercase" data-ts="pvgis.result_of_tracking_pv_system"></h4> </div> <div class="modal-body"> <p data-ts="pvgis_tracking_pv_p_1"></p> <p data-ts="pvgis_tracking_pv_p_2"></p> </div> </div> </div> </div> </div> <br> <div class="summary-results"> <div class="summary-results-first"> <div class="graph tab-content"> <div id="tracking-pv-output-tab" class="tab-pane fade active in"> <div id="chart-trContainer" class="chartResult"></div> </div> <div id="tracking-radiation-tab" class="tab-pane fade"> <div id="chart-trContainer-rad" class="chartResult"></div> </div> </div> </div> <div class="summary-results-second"> <div class="summary" id="trackingSummaryContainer"> <h4 data-ts="pvgis.simulator.summary.summary_label">Summary</h4> <div style="text-align: right; width: 89.5%;"> <div> <a href="#" class="btn-summary" onclick="downloadSummary('trackingSummaryContainer', 'tracking_summary')"></a> </div> </div> <div id="trackingSummary"></div> </div> </div> <div class="summary-results-third"> <div class="horizon"> <div id="chart-tr-horizon-profile-container"></div> </div> </div> </div> </div></div> </div> <div class="visualize-result collapse" id="off-grid-result"> <div> <p style="visibility: hidden;display:none;">dummy filler</p> <div class="loadingVisualizeResults" style="height: 100px;"></div> <div class="visualize-result-content"> <div class="t_tool-content"> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.performance_offgrid_pv_systems">performance of off-grid pv systems</span>: <span data-ts="pvgis.simulator.results">Results</span> </h4> <span class="text-white tool-btns-container"> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#offgrid-pv-output-tab"><i class="fas fa-eye"></i> PV output</span> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#offgrid-radiation-tab"><i class="fas fa-eye"></i> Performance</span> <span class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#offgrid-battery-tab"><i class="fas fa-eye"></i> Battery state</span> <span class="btn btn-xs btn-primary" role="button" data-toggle="modal" data-target="#off-grid-pv-info"><i class="fas fa-question-circle"></i> Info</span> <span class="btn btn-xs btn-primary" onclick="newDownloadPdfOffgrid()"><i class="fas fa-print"></i> PDF</span> </span> <div class="modal fade" id="off-grid-pv-info" role="dialog"> <div class="modal-dialog info"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="moda-title text-uppercase" data-ts="pvgis.result_of_off_grid_pv_system"></h4> </div> <div class="modal-body"> <p data-ts="pvgis.result_of_off_grid_pv_info"></p> <ul> <li data-ts="pvgis.result_of_off_grid_pv_info_1"></li> <li data-ts="pvgis.result_of_off_grid_pv_info_2"></li> <li data-ts="pvgis.result_of_off_grid_pv_info_3"></li> </ul> </div> </div> </div> </div> </div> <br> <div class="summary-results"> <div class="summary-results-first"> <div class="graph tab-content"> <div id="offgrid-pv-output-tab" class="tab-pane fade in active"> <div id="chart-offgird-container-output" class="chartResult"></div> </div> <div id="offgrid-radiation-tab" class="tab-pane fade"> <div id="chart-offgird-container-performance" class="chartResult"></div> </div> <div id="offgrid-battery-tab" class="tab-pane fade"> <div id="chart-offgird-container-battery-state" class="chartResult"></div> </div> </div> </div> <div class="summary-results-second"> <div class="summary" id="offgridSummaryContainer"> <h4 data-ts="pvgis.simulator.summary.summary_label">Summary</h4> <div style="text-align: right; width: 89.5%;"> <div> <a href="#" class="btn-summary" onclick="downloadSummary('offgridSummaryContainer', 'offgrid_summary')"></a> </div> </div> <table class="table table-results" id="offgridInputSummary"> <tbody></tbody> </table> <table class="table table-results" id="offgridOutputSummary"> <tbody></tbody> </table> </div> </div> <div class="summary-results-third"> <div class="horizon"> <div id="chart-offgird-horizon-profile-container"></div> </div> </div> </div> </div></div> </div> <div class="visualize-result collapse" id="monthly-result"> <div> <p style="visibility: hidden;display:none;">dummy filler</p> <div class="loadingVisualizeResults" style="height: 100px;"></div> <div class="visualize-result-content"> <div class="t_data-content"> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.monthly_irradiation_data">monthly irradiation data</span>: <span data-ts="pvgis.simulator.results">Results</span> </h4> <span class="text-white tool-btns-container"> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#monthly-radiation-tab"><i class="fas fa-eye"></i> Radiation</span> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#monthly-diffuse-tab" id="monthlydiffuse"><i class="fas fa-eye"></i> Diffuse/Global</span> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#monthly-temperature-tab" id="monthlytemp"><i class="fas fa-eye"></i> Temperature</span> <span class="btn btn-xs btn-primary" role="button" data-toggle="modal" data-target="#monthly-data-info"><i class="fas fa-question-circle"></i> Info</span> <span class="btn btn-xs btn-primary" onclick="newDownloadPdfMonthly()"> <i class="fas fa-print"></i> PDF </span> </span> <div class="modal fade" id="monthly-data-info" role="dialog"> <div class="modal-dialog info"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="moda-title text-uppercase" data-ts="pvgis.result_of_monthly_data_info"></h4> </div> <div class="modal-body"> <p data-ts="pvgis.monthly_data_info_p"></p> </div> </div> </div> </div> </div> <br> <div class="summary-results"> <div class="summary-results-first"> <div class="graph tab-content"> <div id="monthly-radiation-tab" class="tab-pane fade in active"> <p class="text-center"> <strong>You must check one of irradiation and reclick visualize results to view this result</strong> </p> </div> <div id="monthly-diffuse-tab" class="tab-pane fade"> <p class="text-center"> <strong>You must check Diffuse/global ratio and reclick visualize results to view this result</strong> </p> </div> <div id="monthly-temperature-tab" class="tab-pane fade"> <p class="text-center"> <strong>You must check Average temperature and reclick visualize results to view this result</strong> </p> </div> </div> </div> <div class="summary-results-second"> <div class="summary" id="monthlySummaryContainer"> <h4 data-ts="pvgis.simulator.summary.summary_label">Summary</h4> <div style="text-align: right; width: 89.5%;"> <div> <a href="#" class="btn-summary" onclick="downloadSummary('monthlySummaryContainer', 'monthly_summary')"></a> </div> </div> <table class="table table-results" id="monthlySummary"> <tbody></tbody> </table> </div> </div> <div class="summary-results-third"> <div class="horizon"> <div id="monthlyhorizonProfileContainer"></div> </div> </div> </div></div></div><script> horirrad.addEventListener("change", function() { if ( horirrad.checked || mr_dni.checked || optrad.checked || selectrad.checked ) { $("#monthly-radiation-tab").html( '<div id="monthlyRadiationChartContainer" class="chartResult"></div>' ); } else { $("#monthly-radiation-tab").html( '<p class="text-center"><strong>You must check one of irradiation and reclick visualize results to view this result</strong></p>' ); } }); mr_dni.addEventListener("change", function() { if ( horirrad.checked || mr_dni.checked || optrad.checked || selectrad.checked ) { $("#monthly-radiation-tab").html( '<div id="monthlyRadiationChartContainer" class="chartResult"></div>' ); } else { $("#monthly-radiation-tab").html( '<p class="text-center"><strong>You must check one of irradiation and reclick visualize results to view this result</strong></p>' ); } }); optrad.addEventListener("change", function() { if ( horirrad.checked || mr_dni.checked || optrad.checked || selectrad.checked ) { $("#monthly-radiation-tab").html( '<div id="monthlyRadiationChartContainer" class="chartResult"></div>' ); } else { $("#monthly-radiation-tab").html( '<p class="text-center"><strong>You must check one of irradiation and reclick visualize results to view this result</strong></p>' ); } }); selectrad.addEventListener("change", function() { if ( horirrad.checked || mr_dni.checked || optrad.checked || selectrad.checked ) { $("#monthly-radiation-tab").html( '<div id="monthlyRadiationChartContainer" class="chartResult"></div>' ); } else { $("#monthly-radiation-tab").html( '<p class="text-center"><strong>You must check one of irradiation and reclick visualize results to view this result</strong></p>' ); } }); d2g.addEventListener("change", function() { if (d2g.checked) { $("#monthly-diffuse-tab").html( '<div id="monthlyDiffuseRatioChartContainer" class="chartResult"></div>' ); } else { $("#monthly-diffuse-tab").html( '<p class="text-center"><strong>You must check Diffuse/global ratio and reclick visualize results to view this result</strong></p>' ); } }); avtemp.addEventListener("change", function() { if (avtemp.checked) { $("#monthly-temperature-tab").html( '<div id="monthlyTemperatureChartContainer" class="chartResult"></div>' ); } else { $("#monthly-temperature-tab").html( '<p class="text-center"><strong>You must check Average temperature and reclick visualize results to view this result</strong></p>' ); } });</script> </div> <div class="visualize-result collapse" id="daily-result"> <div> <p style="visibility: hidden;display:none;">dummy filler</p> <div class="loadingVisualizeResults" style="height: 100px;"></div> <div class="visualize-result-content"> <div class="t_data-content"> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.average_daily_irradiance_data">average daily irradiance data</span>: <span data-ts="pvgis.simulator.results">Results</span> </h4> <span class="text-white tool-btns-container"> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#daily-fixed-plane-tab"><i class="fas fa-eye"></i> Fixed-plane</span> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#daily-tracking-tab"><i class="fas fa-eye"></i> Tracking</span> <span role="button" class="btn btn-xs btn-primary tab-option" data-toggle="tab" href="#daily-temperature-tab"><i class="fas fa-eye"></i> Temperature</span> <span class="btn btn-xs btn-primary" role="button" data-toggle="modal" data-target="#daily-data-info"><i class="fas fa-question-circle"></i> Info</span> <span class="btn btn-xs btn-primary" onclick="newDownloadPdfDaily()"> <i class="fas fa-print"></i> PDF </span> </span> <div class="modal fade" id="daily-data-info" role="dialog"> <div class="modal-dialog info"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="moda-title text-uppercase" data-ts="pvgis.result_of_daily_data_info"></h4> </div> <div class="modal-body"> <p data-ts="pvgis.daily_data_info_p_1"></p> <p data-ts="pvgis.daily_data_info_p_2"></p> </div> </div> </div> </div> </div> <br> <div class="summary-results"> <div class="summary-results-first"> <div class="graph tab-content"> <div id="daily-fixed-plane-tab" class="tab-pane fade in active"> <p class="text-center"> <strong>You must check one of fixed plane and reclick visualize results to view this result</strong> </p> </div> <div id="daily-tracking-tab" class="tab-pane fade"> <p class="text-center"> <strong>You must check one of sun-tracking plane and reclick visualize results to view this result</strong> </p> </div> <div id="daily-temperature-tab" class="tab-pane fade"> <p class="text-center"> <strong>You must check Daily temperature profile and reclick visualize results to view this result</strong> </p> </div> </div> </div> <div class="summary-results-second"> <div class="summary" id="dailySummaryContainer"> <h4 data-ts="pvgis.simulator.summary.summary_label">Summary</h4> <div class="row" style="text-align: right"> <div class="col-md-12"> <a href="#" class="btn-summary" onclick="downloadSummary('dailySummaryContainer', 'daily_summary')"></a> </div> </div> <table class="table table-results" id="dailySummary"> <tbody></tbody> </table> </div> </div> <div class="summary-results-third"> <div class="horizon"> <div id="dailyhorizonProfileContainer"></div> </div> </div> </div> </div></div><script> ofpglobal.addEventListener("change", function() { if (ofpglobal.checked || ofpclearsky.checked) { $("#daily-fixed-plane-tab").html( '<div id="dailyRadiationChartContainer" class="chartResult"></div>' ); } else { $("#daily-fixed-plane-tab").html( '<p class="text-center"><strong>You must check one of fixed plane and reclick visualize results to view this result</strong></p>' ); } }); ofpclearsky.addEventListener("change", function() { if (ofpglobal.checked || ofpclearsky.checked) { $("#daily-fixed-plane-tab").html( '<div id="dailyRadiationChartContainer" class="chartResult"></div>' ); } else { $("#daily-fixed-plane-tab").html( '<p class="text-center"><strong>You must check one of fixed plane and reclick visualize results to view this result</strong></p>' ); } }); glob_2axis.addEventListener("change", function() { if (glob_2axis.checked || clearsky_2axis.checked) { $("#daily-tracking-tab").html( '<div id="dailyTrackingChartContainer" class="chartResult"></div>' ); } else { $("#daily-tracking-tab").html( '<p class="text-center"><strong>You must check one of sun-tracking plane and reclick visualize results to view this result</strong></p>' ); } }); clearsky_2axis.addEventListener("change", function() { if (glob_2axis.checked || clearsky_2axis.checked) { $("#daily-tracking-tab").html( '<div id="dailyTrackingChartContainer" class="chartResult"></div>' ); } else { $("#daily-tracking-tab").html( '<p class="text-center"><strong>You must check one of sun-tracking plane and reclick visualize results to view this result</strong></p>' ); } }); showtemperatures.addEventListener("change", function() { if (showtemperatures.checked) { $("#daily-temperature-tab").html( '<div id="dailyTemperatureChartContainer" class="chartResult"></div>' ); } else { $("#daily-temperature-tab").html( '<p class="text-center"><strong>You must check Daily temperature profile and reclick visualize results to view this result</strong></p>' ); } });</script> </div> <div class="visualize-result collapse" id="tmy-result"> <div> <p style="visibility: hidden;display:none;">dummy filler</p> <div class="loadingVisualizeResults" style="height: 100px;"></div> <div class="visualize-result-content"> <div class="t_tmy-content"> <h4 class="text-uppercase text-white font-bold"> <span data-ts="pvgis.simulator.forms.typical_meteorological_year">typical meteorological year</span>: <span data-ts="pvgis.simulator.results">Results</span> </h4> <span class="btn btn-xs btn-primary" role="button" data-toggle="modal" data-target="#tmy-info"><i class="fas fa-question-circle"></i> Info</span> <div class="modal fade" id="tmy-info" role="dialog"> <div class="modal-dialog info"> <div class="modal-content"> <div class="modal-header"> <span role="button" class="close" data-dismiss="modal">×</span> <h4 class="moda-title text-uppercase" data-ts="pvgis.result_of_tmy_info"></h4> </div> <div class="modal-body"> <p data-ts="pvgis.result_of_tmy_info_p"></p> </div> </div> </div> </div> </div> <br> <div class="summary-results"> <div class="summary-results-first"> <div class="graph tab-content"> <div id="tmyChartContainer" class="chartResult"></div> </div> </div> <div class="summary-results-second"> <div class="summary" id="tmySummaryContainer"> <h4 data-ts="pvgis.simulator.summary.summary_label">Summary</h4> <div style="text-align: right; width: 89.5%;"> <div > <a href="#" class="btn-summary" onclick="downloadSummary('tmySummaryContainer', 'tmy_summary')"></a> </div> </div> <table class="table table-results" id="tmyInputSummary"> <tbody></tbody> </table> <table class="table table-results" id="tmyOutputSummary"> <tbody></tbody> </table> </div> </div> <div class="summary-results-third"> <div class="horizon"> <div id="tmyhorizonProfileContainer"></div> </div> </div> </div> </div></div> </div> </div> </div> </div> <div class="logToPdfModal" id="log-to-download-modal" role="dialog"> <div class="logToPdfModal-dialog"> <div class="logToPdfModal-content"> <div class="logToPdfModal-header"> <img src="https://cdn.pvgis.com/images/pvgis24/info-icon.png?v=18102024" alt="" srcset=""> <h5 class="modal-title"><span data-ts="pvgis.need_log_to_download"></span></h5> <span onclick="hideLogForPdfModal()" class="logToPdfModal-close">×</span> </div> <div class="logToPdfModal-footer"> <button id="logToPdfModal-login-button" data-ts="pvgis.header.account_menu.login">Login</button> <span data-ts="pvgis.ou_or">or</span> <button id="logToPdfModal-register-button" data-ts="pvgis.header.account_menu.subscribe">Register</button> </div> </div> </div></div> <div id="auth-form-modal" class="form-modal"> <div class="auth-form-modal-dialog"> <div class="login-content"> <div class="log-header"> <span class="log-header-title">Login</span> <span class="close-button" onclick="hideFormModal('login')">×</span> </div> <div class="container-fluid"> <div class="bg-login"></div> <div class="login-container"> <div class="create-account"> <p><span data-ts="pvgis.login.no_account_question">Pas encore de compte? </span> <a href="/register" id="switch-to-register"> <span data-ts="pvgis.login.create_an_account">Créer un compte</span></a></p> <!-- <p><a href="/"> <span data-ts="pvgis.login.back_to_pvgis_dot_com">Retour vers PVGIS.COM</span></a></p> --> </div> <!-- <div class="row"> <div class="col-md-8 "> --> <div class="login-forms-container"> <div class="box"> <form id="login-form" action="handleLogin" method="POST"> <input type="hidden" name="redirectLink" value=""> <div class="message-container"> <div class="error-message"> </div> <div class="success-message"> </div> </div> <div class="form-group-container"> <div class="form-group"> <label for="email_login" data-ts="pvgis.login.pseudo_or_email">Pseudo ou Email</label> <input name="email" type="text" class="form-control to-validate text-input" id="email_login" placeholder="robert.dupont@gmail.com" required> <div class="error-form-message" data-ts="pvgis.form.required">This field is required.</div> </div> <div class="form-group"> <label for="password_login" data-ts="pvgis.login.password">Mot de passe</label> <div class="pwd-input"> <input name="password" type="password" class="form-control to-validate text-input" id="password_login" data-tstype="placeholder" data-ts="pvgis.login.password" required> <span class="password-toggle" onclick="toggleLoginPasswordVisibility()"><i id="eye-icon" class="bi bi-eye"></i></span> </div> <div class="error-form-message" data-ts="pvgis.form.required">This field is required.</div> <a href="/forgot-password" data-ts="pvgis.forgot_password">Mot de passe oublié</a> </div> </div> <div class="action-container"> <button type="button" id="cancel-button" class="btn cancel-button" onclick="cancelLogin()"> <span data-ts="pvgis.cancel">Annuler</span> </button> <button type="submit" class="btn btn-primary login-button"> <i class="fas fa-spinner"></i> <span data-ts="pvgis.login.login">JE ME CONNECTE</span> </button> </div> </form> </div> <div class="tiers-registration-container"> <h3 data-ts="pvgis.registration.signin">Inscrivez-vous</h3> <h3 class="uppercase" data-ts="pvgis.registration.quickly">RAPIDEMENT</h3> <p data-ts="pvgis.registration.with_your_account">avec votre compte GOOGLE, <br> créer votre compte en 2 clics</p> <div class="button-container"> <button type="button" id="google-login-button" class="btn g-btn"><img src="https://cdn.pvgis.com/images/pvgis24/google.jpg" alt="S'inscrire a PVGIS avec Google"> <span data-ts="pvgis.registration.google_sign_in">S'inscrire avec Google</span></button> <!-- TODO temporary hide facebook action --> <!-- <div class="divider"> <span data-ts="pvgis.registration.or">ou</span> </div> <button type="button" class="btn fb-btn"><img src="https://cdn.pvgis.com/images/pvgis24/facebook.jpg" alt="S'inscrire a PVGIS avec Facebook"> <span data-ts="pvgis.registration.fb_sign_in">S'inscrire avec Facebook</span></button> --> </div> </div> </div> </div></div><script> var userData = null; const errorMessage = ''; // const redirectToPdf = true // const emailValidate = 'Email verified successfully' const emailValidate = ''; const redirectToPdf = 0</script><!-- how to run this tag first --><script src="https://pvgis.com/public/assets/min-js/account/login.js?v=220120251321"></script> <script> const googleButton = document.querySelector('#google-login-button'); let loginGoogleUrl = 'https://api.pvgis.com/auth/login/google' googleButton.addEventListener('click', async (e) => { console.log(window.userCountryCode) loginGoogleUrl += "?country_code=" + window.userCountryCode; loginGoogleUrl += "&lang=" + window.userLanguage; try { if (typeof injectedLogin !== 'undefined') { const url = `${env.UI_BASE_URL}/login` await fetch(url, { method: 'POST', body: JSON.stringify({ redirectToPdf: 1 }) }) } const response = await fetch(loginGoogleUrl); const data = await response.json(); window.open(data?.authorization_url, '_blank'); } catch (error) { console.error('Error:', error); } }); // const facebookButton = document.querySelector('.fb-btn'); // const loginFacebookUrl = 'https://api.pvgis.com/auth/login/facebook' // facebookButton.addEventListener('click', async (e) => { // try { // const response = await fetch(loginFacebookUrl); // const data = await response.json(); // window.open(data?.authorization_url, '_blank'); // } catch (error) { // console.error('Error:', error); // } // });</script> </div> <div class="register-content"> <div class="log-header"> <span class="log-header-title">Registration</span> <span class="close-button" onclick="hideFormModal('register')">×</span> </div> <div class="container-fluid"> <div class="bg-login"></div> <div class="registration-container"> <div class="row"> <div class="col-md-8 page-title"> <h1 data-ts="pvgis.registration.title">Registration page</h1> <p class="to-login" data-ts="pvgis.registration.have_account"> Déjà un compte ?<a id="switch-to-login"><span>Je me connecte</span></a> </p> </div> </div> <div class="row"> <div class="col-md-8 "> <form id="registration-form" action="https://api.pvgis.com/auth/register"> <div class="message-container"> <div class="error-message-register"> </div> </div> <div class="row radio-account-type"> <div class="col-sm-4"> <input type="radio" name="type" id="professional" class="radio-pvgis"> <label for="professional" class="font-bold-condensed" data-ts="pvgis.registration.pro">Profesionnel</label><br> <label for="professional"><span class="description-radio" data-ts="pvgis.registration.pro_description"> Les projets de mes clients</span></label> </div> <div class="col-sm-4"> <input type="radio" name="type" id="school" class="radio-pvgis"> <label for="school" class="font-bold-condensed" data-ts="pvgis.registration.school">École</label><br> <label for="school"><span class="description-radio" data-ts="pvgis.registration.school_description">Les projets scolaires</span></label> </div> <div class="col-sm-4"> <input type="radio" name="type" id="personnal" checked class="radio-pvgis"> <label for="personnal" class="font-bold-condensed" data-ts="pvgis.registration.perso">Particulier</label><br> <label for="personnal"><span class="description-radio" data-ts="pvgis.registration.perso_description">Un projet personnel</span></label> </div> </div> <div class="row"> <div class="col-md-6"> <div class="form-group nickname-container hidden"> <label for="pseudo"><span data-ts="pvgis.registration.pseudo">Pseudo</span></label> <input style="width: 95%;" type="text" class="form-control to-send" id="pseudo" name="pseudo"> <div class="error-message"> <span class="pseudo-required"></span> <!-- <span class="pseudo-required" data-ts="pvgis.registration.error.required">This field is required.</span> --> <span class="pseudo-already-used" data-ts="pvgis.registration.error.pseudo_already_used">Pseudo is already taken.</span> </div> </div> <div class="form-group school-container"> <label for="school-name"><span data-ts="pvgis.registration.school">École</span></label> <input style="width: 95%;" type="text" class="form-control to-validate" id="school-name" name="school-name"> </div> <div class="form-group company-container"> <label for="company-name"><span data-ts="pvgis.registration.company"></span></label> <input style="width: 95%;" type="text" class="form-control to-validate" id="company-name" name="company-name"> </div> <div class="form-group"> <label for="last-name"><span data-ts="pvgis.registration.name">Nom</span><span class="required">*</span></label> <input style="width: 95%;" type="text" class="form-control to-validate" id="last-name" name="last-name"> <div class="error-message" data-ts="pvgis.registration.error.required">This field is required.</div> </div> <div class="form-group"> <label for="first-name"><span data-ts="pvgis.registration.first_name">First Name</span><span class="required">*</span></label> <input style="width: 95%;" type="text" class="form-control to-validate" id="first-name" name="first-name"> <div class="error-message" data-ts="pvgis.registration.error.required">This field is required.</div> </div> <div class="form-group"> <div class="dropdown-select-container" id="countryDropdownContainer"> <label for="country"><span data-ts="pvgis.registration.country">Country</span><span class="required">*</span></label> <div class="dropdown-select-button" id="countryDropdownButton"> <span id="selectedCountry"></span> </div> <ol class="dropdown-select-list" id="countryDropdownList"> <input type="text" class="search-input" id="countrySearchInput" data-tstype="placeholder" data-ts="pvgis.search"> <div class="error-message" data-ts="pvgis.registration.error.required">This field is required.</div> <div class="item-list-container" id="countryListContainer"> </div> </ol> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="email"><span data-ts="pvgis.registration.email">Email</span><span class="required">*</span></label> <input type="email" class="form-control to-validate" id="email" name="email"> <div class="error-message"> <!-- <span class="email-invalid" data-ts="pvgis.registration.error.email">Please enter a valid email address.</span> <span class="email-already-used" data-ts="pvgis.registration.error.email_already_used">User with the this email already exists or has an account, please use another email to continue.</span> <span class="email-not-exist" data-ts="pvgis.registration.error.email_not_exist">The email address you entered does not exist.</span> --> </div> </div> <div class="form-group"> <label for="password"><span data-ts="pvgis.registration.password">Password</span><span class="required">*</span></label> <div class="password-container"> <div class="eye-toogler"><i id="toggle-password" class="bi bi-eye"></i></div> <input type="text" class="form-control to-validate" id="password" name="password"> </div> <div class="error-message" data-ts="pvgis.registration.error.password">Password must contain at least 8 caracters with uppercase, lowercase and number.</div> </div> <div class="form-group password-container"> <label for="confirm-password"><span data-ts="pvgis.registration.confirm_password">Confirm Password</span><span class="required">*</span></label> <div class="password-container"> <div class="eye-toogler"><i id="toggle-password-confirm" class="bi bi-eye"></i></div> <input type="text" class="form-control to-validate" id="confirm-password" name="confirm-password"> </div> <div class="error-message" data-ts="pvgis.registration.error.password_not_match">Passwords do not match.</div> </div> <div class="form-group check-container"> <input type="checkbox" name="accept-cgu" class="checkbox-pvgis" id="accept-cgu"> <label class="no-wrap" for="accept-cgu"><span data-ts="pvgis.i_accept_general"> </span> <a href="/register" id="viewTermAndConditionAction" data-ts="pvgis.terms_and_conditions"> </a> <span data-ts="pvgis.of_use"></span></label> </div> </div> </div> <input type="hidden" id="language" name="language" value="en"> <div class="btn-container"> <a id="cancel-button" class="btn cancel-button"><span data-ts="pvgis.registration.cancel">Annuler</span></a> <button type="submit" id="submit-button" class="btn btn-submit disabled" disabled><i class="fas fa-spinner"></i> <span data-ts="pvgis.registration.register"></span></button> </div> </form> </div> <div class="col-md-4"> <div class="tiers-registration-container"> <h3 data-ts="pvgis.registration.signup">Inscrivez-vous</h3> <h3 class="uppercase" data-ts="pvgis.registration.quickly">RAPIDEMENT</h3> <p data-ts="pvgis.registration.two_click">avec votre compte GOOGLE, <br> créer votre compte en 2 clics</p> <button type="button" id="google-registration-button" class="btn g-btn"><img src="https://cdn.pvgis.com/images/pvgis24/google.jpg" alt="S'inscrire a PVGIS avec Google"> <span data-ts="pvgis.registration.google_sign">S'inscrire avec Google</span></button> <!-- TODO temporary hide facebook action --> <!-- <div class="divider"> <span data-ts="pvgis.registration.or">ou</span> </div> <button type="button" class="btn fb-btn"><img src="https://cdn.pvgis.com/images/pvgis24/facebook.jpg" alt="S'inscrire a PVGIS avec Facebook"> <span data-ts="pvgis.registration.fb_sign">S'inscrire avec Facebook</span></button> --> </div> </div> </div> </div><script> $cartReference = null;</script><script src="https://pvgis.com/public/assets/min-js/account/registration.js?v=220120251321"></script> <script> const googleButtonRegister = document.querySelector('#google-registration-button'); googleButtonRegister.addEventListener('click', async (e) => { try { if (typeof injectedRegister !== 'undefined') { const url = `${env.UI_BASE_URL}/register` await fetch(url, { method: 'POST', body: JSON.stringify({ redirectToPdf: 1 }) }) } const currentLanguage = window.userLanguage || getCurrentLanguage(); let registrationGoogleUrl = 'https://api.pvgis.com/auth/google' registrationGoogleUrl += "?lang=" + currentLanguage; registrationGoogleUrl += "&country_code=" + window.userCountryCode; console.log(registrationGoogleUrl); const response = await fetch(registrationGoogleUrl); const data = await response.json(); window.open(data?.authorization_url, '_blank'); } catch (error) { console.error('Error:', error); } }); // const facebookButton = document.querySelector('.fb-btn'); // const registrationFacebookUrl = 'https://api.pvgis.com/auth/facebook' // facebookButton.addEventListener('click', async (e) => { // try { // const currentLanguage = getCurrentLanguage(); // const response = await fetch(registrationFacebookUrl + "?lang=" + currentLanguage); // const data = await response.json(); // window.open(data?.authorization_url, '_blank'); // } catch (error) { // console.error('Error:', error); // } // });</script><script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script><script src="https://pvgis.com/public/assets/min-js/utils.js?v=220120251321"></script><script> toastr.options = { "closeButton": false, "debug": false, "newestOnTop": false, "progressBar": false, "positionClass": "toast-bottom-right", "preventDuplicates": false, "onclick": null, "showDuration": "300", "hideDuration": "1000", "timeOut": "30000", "extendedTimeOut": "1500", "showEasing": "swing", "hideEasing": "linear", "showMethod": "fadeIn", "hideMethod": "fadeOut" }</script> </div> </div> </div> </div> <div class="modal-extranet confirm-mail-modal"> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-8"> <div class="popup-container"> <div class="row modal-extranet-content"> <p class="mail-confirm-content"> <span data-ts="pvgis.mail.confirm_text">Un mail de validation vient de vous être envoyé à :</span><br> <span id="mail-to" class="font-condensed-oblique"></span><br> <span data-ts="pvgis.mail.thanks">Merci de cliquer sur le lien pour confirmer votre inscription.</span> </p> </div> <div class="btn-container"> <a href="/login" class="save-btn" data-ts="pvgis.mail.ok">OK</a> </div> </div> </div> </div> </div></div> <script src="https://pvgis.com/public/assets/min-js/jquery.js?v=220120251321"></script> <script type="module" src="https://pvgis.com/public/assets/min-js/cookieconsent.umd.js?v=220120251321"></script> <script type="module" src="https://pvgis.com/public/assets/min-js/cookieconsent-config.js?v=220120251321"></script> <script> const _SESSION = {}; window.customerSavedLanguage = "en"; let pdfData = 0; </script> <script src="https://pvgis.com/public/assets/min-js/links.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/cache.js?v=220120251321"></script> <!-- <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.4/js.cookie.min.js" integrity="sha512-Nonc2AqL1+VEN+97F3n4YxucBOAL5BgqNwEVc2uUjdKOWAmzwj5ChdJQvN2KldAxkCxE4OenuJ/RL18bWxGGzA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/js/all.min.js"></script> <script src="https://pvgis.com/public/assets/min-js/bootstrap.min.js" defer></script> <script src="https://pvgis.com/public/assets/min-js/global.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/google-analytics.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/loader.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/translation/index.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/modal/index.js?v=220120251321"></script> <script src="https://cdn.socket.io/4.5.0/socket.io.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script> <script src="https://pvgis.com/public/assets/min-js/socket-config.js?v=220120251321"></script> <script> removeIndesirableTag(); </script> <script> $(document).ready(async function() { // getCountries() lazyLoadImage() $('.stepsTitle').click(function() { $('.panel-collapse').not($(this).parent().attr('href')).collapse('hide') }) $('#tablist a').on('click', function(e) { e.preventDefault(); var targetTab = $(this).attr('href'); $('#tablist2 a[href="' + targetTab + '"]').tab('show'); }); $('#tablist2 a').on('click', function(e) { e.preventDefault(); var targetTab = $(this).attr('href'); $('#tablist a[href="' + targetTab + '"]').tab('show'); }); $("#pays").on("input", function() { loadAddress() }); $("#ville").on("input", function() { loadAddress() }); $("#rue").on("input", function() { loadAddress() }); $("#numrue").on("input", function() { loadAddress() }); allCountries = [] if (allCountries?.length === 0) { $("#pays").one('change', async () => { allCountries = await new Promise(success => { $.getJSON(`${window.env.CDN_URL}/assets/json/world-countries.json`, function(data) { success(data) }) }) getCountries(); allCities = await new Promise(success => { $.getJSON(`/public/assets/json/world-cities.json`, function(data) { success(data) }) }) }) } function getCountries() { var data = allCountries.sort((a, b) => a.name.common.localeCompare(b.name.common)); var dropdownContent = document.getElementById("dropdownContent"); data.forEach(country => { var countryName = country.name.common; var countryCode = country.cca2; var option = document.createElement("a"); option.href = "#"; option.textContent = countryName; option.onclick = function() { selectOption(countryName, event, countryCode); }; dropdownContent.appendChild(option); }); } function getCities(countryCode) { var cities = allCities.filter(city => city.country === countryCode) var dropdownCity = document.getElementById("dropdownCity") dropdownCity.innerHTML = ""; if (cities.length > 1000) { cities = cities.slice(0, 1573) } cities.forEach(city => { var cityName = city.name var option = document.createElement("a") option.href = "#" option.textContent = cityName option.onclick = function() { selectCity(cityName, event) } dropdownCity.appendChild(option) }) } function selectOption(value, event, countryCode) { var input = document.getElementById("customSelect").querySelector("input"); input.value = value; var inputCity = document.getElementById("customCity").querySelector("input"); inputCity.value = ""; inputCity.focus(); localStorage.setItem('cc', countryCode) document.getElementById("dropdownContent").style.display = "none"; document.getElementById("dropdownCity").style.display = "block"; getCities(countryCode) loadAddress() // $("#dropdownContent").hide(); event.preventDefault(); event.stopPropagation(); } function selectCity(value, event) { var input = document.getElementById("customCity").querySelector("input"); input.value = value; document.getElementById("rue").focus() document.getElementById("dropdownCity").style.display = "none"; loadAddress() // $("#dropdownContent").hide(); event.preventDefault(); event.stopPropagation(); } $("#customSelect").click(function() { document.getElementById("dropdownContent").style.display = "block"; // $("#dropdownContent").show(); }); $("#customSelect input").keyup(function(e) { if (e.keyCode == 13) { document.getElementById("dropdownContent").style.display = "none"; $("#customCity input").focus() document.getElementById("dropdownCity").style.display = "block"; } }) $(document).click(function(event) { var customSelect = document.getElementById("customSelect"); if (event.target !== customSelect && !customSelect.contains(event.target)) { document.getElementById("dropdownContent").style.display = "none"; } }); $("#customCity").click(function() { document.getElementById("dropdownCity").style.display = "block"; // $("#dropdownContent").show(); }); $("#customCity input").keyup(function(e) { if (e.keyCode == 13) { document.getElementById("dropdownCity").style.display = "none"; $("#rue").focus() } }) $("#rue").keyup(function(e) { if (e.keyCode == 13) { $("#numrue").focus() } }) $(document).click(function(event) { var customSelect = document.getElementById("customCity"); if (event.target !== customSelect && !customSelect.contains(event.target)) { document.getElementById("dropdownCity").style.display = "none"; } }); getCountries(); filterOptions() filterCity() }) var allCities = [] const loadAddress = () => { const pays = $("#pays").val(); const ville = $("#ville").val(); const rue = $("#rue").val(); const numrue = $("#numrue").val(); const addressArr = []; if (pays) addressArr.push(pays); if (ville) addressArr.push(ville); if (rue) addressArr.push(rue); if (numrue) addressArr.push(numrue); $("#address").val(addressArr.join(', ')); } function filterOptions() { var input = document.getElementById("customSelect").querySelector("input"); var filter = input.value.toLowerCase(); var options = document.getElementById("dropdownContent").getElementsByTagName("a"); for (var i = 0; i < options.length; i++) { var textValue = options[i].innerText.toLowerCase(); if (textValue.indexOf(filter) > -1) { options[i].style.display = ""; } else { options[i].style.display = "none"; } } } function filterCity() { var input = document.getElementById("customCity").querySelector("input"); var filter = input.value.toLowerCase(); var options = document.getElementById("dropdownCity"); options.innerHTML = ""; var tempCities = allCities.filter(city => city.country === localStorage.getItem('cc')) var cities = tempCities.filter(city => { var cityNameLower = city.name.toLowerCase() return cityNameLower.indexOf(filter) > -1 }) if (cities.length > 100) { cities = cities.slice(0, 100) } cities.forEach(city => { var li = document.createElement("a") li.href = "#" li.textContent = city.name li.onclick = function() { selectNewCity(city.name, event) } options.appendChild(li) }) for (var i = 0; i < options.length; i++) { var textValue = options[i].innerText.toLowerCase(); if (textValue.indexOf(filter) > -1) { options[i].style.display = ""; } else { options[i].style.display = "none"; } } loadAddress() } function selectNewCity(value, event) { var input = document.getElementById("customCity").querySelector("input"); input.value = value; document.getElementById("rue").focus() document.getElementById("dropdownCity").style.display = "none"; loadAddress() // $("#dropdownContent").hide(); event.preventDefault(); event.stopPropagation(); } </script> <!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBGwuAzneXJqwq8ZQ4oJFb9-crInpddy2E&language=en" async defer></script> --> <!-- <script src="https://pvgis.com/public/assets/min-js/utils/google_maps.js?v=220120251321"></script> --> <script src="https://pvgis.com/public/assets/min-js/countries-area-data.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/utils/simple_hash.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/custom-countries-extent.js?v=220120251321"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highstock/4.2.5/highstock.js"></script> <script src="https://unpkg.com/highcharts@4.2.5/highcharts-more.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/highstock/modules/exporting.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/highstock/modules/exporting.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/graph/chart-drawer.js?v=220120251321"></script> --> <!-- <script src="https://cdn.pvgis.com/assets/js/graph/chart-drawer.js"></script> --> <script src="https://pvgis.com/public/assets/min-js/graph/chart-drawer.js?v=220120251321"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/summary/tracking-summary-table.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/summary/tracking-summary-table.js?"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/graph/grid-connected-and-tracking-pv-system.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/graph/grid-connected-and-tracking-pv-system.js?v=220120251321"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/graph/offgrid-pv-system.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/graph/offgrid-pv-system.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/horizon-profile/horizon-profile.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/horizon-profile/horizon-profile.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/file-input.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/file-download.js?v=220120251321"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/pdf/pdf-download.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/pdf/pdf-download.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/pdf/daily-pdf.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/pdf/daily-pdf.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/pdf/monthly-pdf.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/pdf/monthly-pdf.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/pdf/grid-connected.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/pdf/grid-connected.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/pdf/tracking.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/pdf/tracking.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/pdf/offgrid.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/pdf/offgrid.js"></script> <script src="https://pvgis.com/public/assets/min-js/ol.min.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/utils.js?v=220120251321"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/summary/summary-table.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/summary/summary-table.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/graph/daily.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/graph/daily.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/graph/monthly.js?v=220120251321"></script> --> <script src="https://cdn.pvgis.com/assets/js/graph/monthly.js"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/graph/tmy.js?v=220120251321"></script> --> <script src="https://pvgis.com/public/assets/min-js/graph/tmy.js"></script> <script src="https://pvgis.com/public/assets/min-js/getDataMap.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/logPDFModal.js?v=220120251321"></script> <script src="https://pvgis.com/public/assets/min-js/carousel-banner.js?v=220120251321"></script> <!-- <script src="https://pvgis.com/public/assets/min-js/simulator-by-google-maps.js?v=220120251321"></script> --> <script src="https://pvgis.com/public/assets/min-js/extranet/dropdown-select.js?v=220120251321" defer></script> <script src="https://cdn.pvgis.com/assets/libs/pdf.js/2.12.313/pdf.min.js"></script> <script src="https://cdn.pvgis.com/assets/libs/pdf-lib/1.17.1/pdf-lib.min.js"></script> <script src="https://cdn.pvgis.com/assets/libs/sortable/1.14.0/sortable.min.js"></script> <script src="https://pvgis.com/public/assets/min-js/extranet/pdf-editor.js?v=220120251321" defer></script> <script> const inSimulator = true $(document).ready(function() { $(".banner a").attr('title', `Visit solardropshipping.com`); lazyLoadImage() getDataMap() if (pdfData) { setSimulatorData(pdfData) } $('#modalSteps').on('show.bs.modal', function(event) { $(this).find('.modal-content').append($('#steps-content')) $('.stepsIcon').html('<i class="fas fa-times"></i>') }) $('#modalSteps').on('hidden.bs.modal', function(event) { $('#steps').append($('#steps-content')) $('.stepsIcon').html('<i class="fas fa-bars"></i>') }) $('#tablist a[data-toggle="tab"]').on('shown.bs.tab', function(event) { let tabActif = $(event.target).attr('href') $(tabActif + ' .checkboxSimulator').prop('checked', false) }) }); </script> </div> <div class="modal-backdrop" id="modal-backdrop-pdf"> <div id='pdf-modal' class="modal modal-box-shadow"> <div id="loading"></div> <div class="pdf-editor"> <div id="editor-1"> <div style="width: 100%;"> <div class="modal-info"> <div class="modal-title"> <div class="left-title"> <h4 id="title">PDF EDITOR COMPONENT</h4> <!-- Titre visible par défaut --> <input type="text" id="name" name="name" required minlength="4" size="50" value="PDF EDITOR COMPONENT" style="display: none; width: 100%; padding: 5px;" /> <!-- Input caché par défaut, largeur automatique et padding ajouté --> <span id="edit-icon" class="zoom-button" title="Modifier"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pencil"> <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" /> <path d="m15 5 4 4" /> </svg> </span> <span style="display: none;" id="close-icon" class="zoom-button" title="Sauvegarder"> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-save"> <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" /> <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7" /> <path d="M7 3v4a1 1 0 0 0 1 1h7" /> </svg> </span> </div> <div class="zoom-container"> <H4 data-ts="pvgis.organis_download" class="organise">Organiser et telecharger</H4> <div class="zoom-left"> <span id="zoom-in" class="zoom-button" title="Zoom +"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zoom-in"> <circle cx="11" cy="11" r="8" /> <line x1="21" x2="16.65" y1="21" y2="16.65" /> <line x1="11" x2="11" y1="8" y2="14" /> <line x1="8" x2="14" y1="11" y2="11" /> </svg> </span> <span id="zoom-out" class="zoom-button" title="Zoom -"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zoom-out"> <circle cx="11" cy="11" r="8" /> <line x1="21" x2="16.65" y1="21" y2="16.65" /> <line x1="8" x2="14" y1="11" y2="11" /> </svg> </span> <span id="zoom-reset" class="zoom-button" title="Réinitialiser"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw"> <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /> <path d="M3 3v5h5" /> </svg> </span> <span id="download" class="zoom-button" title="download"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download"> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> <polyline points="7 10 12 15 17 10" /> <line x1="12" x2="12" y1="15" y2="3" /> </svg> </span> </div> <span onclick="closePdfEditorModal('editor-1')" title="Fermer" class="zoom-button"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x"> <path d="M18 6 6 18" /> <path d="m6 6 12 12" /> </svg></span> </div> </div> <div class="preview-container"> <div class="thumbnail-wrapper"> <div class="thumbnail-container"> </div> </div> <div class="page-container"> </div> </div> </div> </div> </div> </div> </div></div> <div class="loading-modal" id="pdf-loading-modal"> <div> <div class="loader"></div> <div class="message-container"> <div class="message"></div> <span class="loading-dots" style="display: none;"> <span>.</span> <span>.</span> <span>.</span> </span> </div> </div></div> </div> <script> ready(() => { // document.body.style.display = "unset"; // document.body.style.overflow = "auto"; setTimeout(() => { // console.log("bla"); // document.querySelector(".map-address-container .loadingMapAndSimulato").style.display = 'block'; }, 1000) setTimeout(() => { // const originalLocation = window.location; // window.watch('location', function( attr ,_ , target){ // if(target.indexOf('unwanted url') !== -1)return '#'; // }); // document.querySelectorAll('*').forEach(element => { // // delete element.href // // Check if the element is not an <a> tag with an href attribute // if (!(element.tagName.toLowerCase() === 'a' && element.hasAttribute('href'))) { // try { // element.click(); // Programmatically click the element // } catch (err) { // console.warn('Cannot click element:', element, err); // } // } // }); }, 2000) }) </script> <footer id="footer"> <div class="container footer-content"> <p>© <span data-ts="pvgis.footer.copyright">COPYRIGHT 2024</span></p> </div> <div class="side-web-menu"> <ul class="side-menu-container"> </ul> </div></footer> <script> $(document).ready(function() { //generation menu generateSideMenu(); generateNavigationMenu(); fetchSeletedLang(); getSelectedNav(); //Show or hide change language $(".side-menu-item-lang").on("click", (event) => { event.stopPropagation(); $(document).one("click.langPopover", (event) => { if (!$(event.target).closest('.lang-popover, .more-languages').length) { $(".lang-popover").css('display', 'none'); } $(document).off("click.langPopover"); }); }); // "More Languages" option $(".side-menu-item-lang").on("click", ".more-languages", (event) => { event.stopPropagation(); $(".lang-popover").css('display', 'none'); $(".more-lang-popover").css('display', 'grid'); generateMoreLanguages(); }); $(".side-menu-item-lang").on("click", ".lang-label, .back-lang", (event) => { $(".more-lang-popover").css('display', 'none'); if ($(".lang-popover").css('display') === 'grid') { $(".lang-popover").css('display', 'none'); } else { generateLanguage(); $(".lang-popover").css('display', 'grid'); }; }); // Show account menu const accountMenuToggler = document.querySelector(".account-menu-toggler") if(accountMenuToggler){ accountMenuToggler.addEventListener("click", (e) => { e.stopPropagation() const menu = document.querySelector('.account-menu') if (menu.classList.contains('visible')) { menu.classList.remove('visible') } else { menu.classList.add('visible') } }); } // Hide the account menu when clicking outside of it $(document).click(function(event) { if (!$(event.target).closest(".account-menu").length && !$(event.target).is(".account-menu-toggler") || $(event.target).is(".account-menu-container .account-menu div a")) { $(".account-menu").removeClass('visible'); } }); // Close .more-lang-popover when clicking outside of it $(document).on("click", function(event) { if (!$(event.target).closest(".more-lang-popover").length && !$(event.target).is(".more-languages")) { $(".more-lang-popover").css('display', 'none'); } }); // Change language on click $(".side-menu-item-lang").on("click", ".lang-option", function() { const selectedLanguage = $(this).data('language'); const selectedLabel = $(this).closest('.lang-option').find('.label-lang').text(); if (selectedLanguage) { changeLanguage(selectedLanguage, selectedLabel); $(".lang-popover").css('display', 'none'); $(".more-lang-popover").css('display', 'none'); } }); $(".menu-btn").on("click", () => { showMenu(); }) //hide menu $(".menu-mobile").on("click", (event) => { if (!$(event.target).closest('.menu-mobile-container').length) { hideMenu(); } }); $(".menu-m-header button").on("click", () => { hideMenu(); }) //clickable div for account menu document.querySelectorAll('.clickable-div').forEach(div => { div.addEventListener('click', function() { const link = this.querySelector('a'); if (link) { window.location.href = link.href; } }); }); }); </script> <script> document.addEventListener('DOMContentLoaded', function() { const masqueDiv = () => { let largeurFenetre = window.innerWidth; let footer = document.getElementById('footer') let divAMasquer = document.getElementById('stepsButton'); let positionScroll = window.scrollY; let positionBasDePage = document.documentElement.scrollHeight - window.innerHeight; if (positionBasDePage - positionScroll <= 150 && largeurFenetre < 992) { footer.style.marginBottom = "50px" } else { footer.style.marginBottom = "0" } } window.addEventListener('scroll', function() { masqueDiv() }); }); $(document).ready(function() { $(".banner a").attr('title', `Visit solardropshipping.com`); $(".banner a").attr('href', `${env.SOLAR_DROP_SHIPPING}`); }) </script></body></html>
