mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
Merge pull request #416 from VILLASframework/branding-opalrt
Add OPAL-RT Branding
This commit is contained in:
commit
08a394e61b
16 changed files with 917 additions and 416 deletions
|
@ -24,26 +24,16 @@ build.slew:
|
|||
DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
|
||||
extends: build
|
||||
|
||||
deploy.latest:
|
||||
stage: deploy
|
||||
build.opalrt:
|
||||
variables:
|
||||
DOCKER_TAG: latest
|
||||
before_script:
|
||||
- docker login -u ${CI_REGISTRY_USER} -p ${CI_REGISTRY_PASSWORD} ${CI_REGISTRY}
|
||||
script:
|
||||
- docker push ${DOCKER_IMAGE}:${DOCKER_TAG}
|
||||
only:
|
||||
refs:
|
||||
- master
|
||||
tags:
|
||||
- docker
|
||||
dependencies:
|
||||
- build
|
||||
BRANDING: opalrt
|
||||
DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
|
||||
extends: build
|
||||
|
||||
deploy.slew:
|
||||
deploy:
|
||||
stage: deploy
|
||||
variables:
|
||||
BRANDING: slew
|
||||
BRANDING: villasweb
|
||||
DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
|
||||
before_script:
|
||||
- docker login -u ${CI_REGISTRY_USER} -p ${CI_REGISTRY_PASSWORD} ${CI_REGISTRY}
|
||||
|
@ -52,4 +42,24 @@ deploy.slew:
|
|||
tags:
|
||||
- docker
|
||||
dependencies:
|
||||
- build.slew
|
||||
- build
|
||||
|
||||
deploy.slew:
|
||||
extends: deploy
|
||||
variables:
|
||||
BRANDING: slew
|
||||
DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
|
||||
|
||||
deploy.opalrt:
|
||||
extends: deploy
|
||||
variables:
|
||||
BRANDING: opalrt
|
||||
DOCKER_TAG: ${CI_COMMIT_BRANCH}-${BRANDING}
|
||||
|
||||
deploy.latest:
|
||||
extends: deploy
|
||||
variables:
|
||||
DOCKER_TAG: latest
|
||||
only:
|
||||
refs:
|
||||
- master
|
||||
|
|
|
@ -21,253 +21,196 @@ import villasweb_values from './villasweb/villasweb-values';
|
|||
import { slew_home, slew_welcome } from './slew/slew-functions';
|
||||
import slew_values from './slew/slew-values';
|
||||
|
||||
import { opalrt_home, opalrt_welcome } from './opalrt/opalrt-functions';
|
||||
import opalrt_values from './opalrt/opalrt-values';
|
||||
|
||||
import { template_welcome, template_home, template_footer } from './template/template-functions';
|
||||
import template_values from './template/template-values';
|
||||
|
||||
class Branding {
|
||||
constructor(chosenbrand) {
|
||||
this.brand = chosenbrand;
|
||||
this.setValues();
|
||||
this.checkValues();
|
||||
this.applyStyle();
|
||||
constructor(brand) {
|
||||
this.brand = brand;
|
||||
|
||||
Branding.branding = this;
|
||||
this.setValues();
|
||||
this.checkValues();
|
||||
this.applyStyle();
|
||||
|
||||
Branding.branding = this;
|
||||
}
|
||||
|
||||
setValues() {
|
||||
switch (this.brand) {
|
||||
case 'villasweb':
|
||||
this.values = villasweb_values;
|
||||
break;
|
||||
case 'slew':
|
||||
this.values = slew_values;
|
||||
break;
|
||||
case 'opalrt':
|
||||
this.values = opalrt_values;
|
||||
break;
|
||||
case 'template':
|
||||
this.values = template_values;
|
||||
break;
|
||||
default:
|
||||
console.error("Branding '" + this.brand + "' not available, will use 'villasweb' branding");
|
||||
this.brand = 'villasweb';
|
||||
this.values = villasweb_values;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
getHome(username = '', userid = '', role = '') {
|
||||
var homepage = '';
|
||||
switch (this.brand) {
|
||||
case 'villasweb':
|
||||
homepage = villasweb_home(this.getTitle(), username, userid, role);
|
||||
break;
|
||||
case 'slew':
|
||||
homepage = slew_home();
|
||||
break;
|
||||
case 'opalrt':
|
||||
homepage = opalrt_home();
|
||||
break;
|
||||
case 'template':
|
||||
homepage = template_home();
|
||||
break;
|
||||
default:
|
||||
homepage = villasweb_home(this.getTitle(), username, userid, role);
|
||||
break;
|
||||
}
|
||||
return homepage;
|
||||
}
|
||||
|
||||
getFooter() {
|
||||
var footer = '';
|
||||
switch (this.brand) {
|
||||
case 'template':
|
||||
footer = template_footer();
|
||||
break;
|
||||
default:
|
||||
footer = villasweb_footer();
|
||||
break;
|
||||
}
|
||||
return footer;
|
||||
}
|
||||
|
||||
getWelcome() {
|
||||
var welcome = '';
|
||||
switch (this.brand) {
|
||||
case 'villasweb':
|
||||
welcome = villasweb_welcome();
|
||||
break;
|
||||
case 'slew':
|
||||
welcome = slew_welcome();
|
||||
break;
|
||||
case 'opalrt':
|
||||
welcome = opalrt_welcome();
|
||||
break;
|
||||
case 'template':
|
||||
welcome = template_welcome();
|
||||
break;
|
||||
default:
|
||||
welcome = this.defaultWelcome();
|
||||
break;
|
||||
}
|
||||
return welcome;
|
||||
}
|
||||
|
||||
defaultWelcome() {
|
||||
return (<div><h1>Welcome!</h1><p>This is the welcome page and you are very welcome here.</p></div>);
|
||||
}
|
||||
|
||||
// if icon cannot be found, the default favicon will be used
|
||||
changeHead() {
|
||||
// set title of document
|
||||
let title = this.getTitle();
|
||||
if (this.getSubtitle()) {
|
||||
title += " " + this.getSubtitle();
|
||||
}
|
||||
document.title = title;
|
||||
|
||||
// set document icon
|
||||
if (!this.values.icon) {
|
||||
return;
|
||||
}
|
||||
var oldlink = document.getElementById('dynamic-favicon');
|
||||
|
||||
var link = document.createElement('link');
|
||||
link.id = 'dynamic-favicon';
|
||||
link.rel = 'shortcut icon'
|
||||
link.href = '/' + this.values.icon;
|
||||
|
||||
if (oldlink) {
|
||||
document.head.removeChild(oldlink);
|
||||
}
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
checkValues() {
|
||||
if (!this.values.hasOwnProperty('pages')) {
|
||||
let pages = {};
|
||||
pages.home = true;
|
||||
pages.scenarios = true;
|
||||
pages.infrastructure = true;
|
||||
pages.users = true;
|
||||
pages.account = true;
|
||||
pages.api = true;
|
||||
|
||||
this.values.pages = pages;
|
||||
} else {
|
||||
if (!this.values.pages.hasOwnProperty('home')) {
|
||||
this.values.pages['home'] = false;
|
||||
}
|
||||
if (!this.values.pages.hasOwnProperty('scenarios')) {
|
||||
this.values.pages['scenarios'] = false;
|
||||
}
|
||||
if (!this.values.pages.hasOwnProperty('infrastructure')) {
|
||||
this.values.pages['infrastructure'] = false;
|
||||
}
|
||||
if (!this.values.pages.hasOwnProperty('users')) {
|
||||
this.values.pages['users'] = false;
|
||||
}
|
||||
if (!this.values.pages.hasOwnProperty('account')) {
|
||||
this.values.pages['account'] = false;
|
||||
}
|
||||
if (!this.values.pages.hasOwnProperty('api')) {
|
||||
this.values.pages['api'] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
applyStyle() {
|
||||
this.changeHead();
|
||||
|
||||
const rootEl = document.querySelector(':root');
|
||||
|
||||
for (const [key, value] of Object.entries(this.values.style)) {
|
||||
rootEl.style.setProperty('--' + key, value);
|
||||
}
|
||||
}
|
||||
|
||||
getLogo(style) {
|
||||
let image = null;
|
||||
|
||||
try {
|
||||
image = <img style={style} src={require('./' + this.brand + '/img/' + this.values.logo).default} alt={'Logo ' + this.values.title} />
|
||||
} catch (err) {
|
||||
console.error("cannot find './" + this.brand + '/img/' + this.values.logo + "'");
|
||||
}
|
||||
|
||||
setValues() {
|
||||
switch (this.brand) {
|
||||
case 'villasweb':
|
||||
this.values = villasweb_values;
|
||||
break;
|
||||
case 'slew':
|
||||
this.values = slew_values;
|
||||
break;
|
||||
case 'template':
|
||||
this.values = template_values;
|
||||
break;
|
||||
default:
|
||||
console.error("Branding '" + this.brand + "' not available, will use 'villasweb' branding");
|
||||
this.brand = 'villasweb';
|
||||
this.values = villasweb_values;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return image;
|
||||
}
|
||||
|
||||
getHome(username = '', userid = '', role = '') {
|
||||
var homepage = '';
|
||||
switch (this.brand) {
|
||||
case 'villasweb':
|
||||
homepage = villasweb_home(this.getTitle(), username, userid, role);
|
||||
break;
|
||||
case 'slew':
|
||||
homepage = slew_home();
|
||||
break;
|
||||
case 'template':
|
||||
homepage = template_home();
|
||||
break;
|
||||
default:
|
||||
homepage = villasweb_home(this.getTitle(), username, userid, role);
|
||||
break;
|
||||
}
|
||||
return homepage;
|
||||
}
|
||||
getTitle() {
|
||||
return this.values.title ? this.values.title : "No Title!";
|
||||
}
|
||||
|
||||
getFooter() {
|
||||
var footer = '';
|
||||
switch(this.brand) {
|
||||
case 'template':
|
||||
footer = template_footer();
|
||||
break;
|
||||
default:
|
||||
footer = villasweb_footer();
|
||||
break;
|
||||
}
|
||||
return footer;
|
||||
}
|
||||
|
||||
getWelcome() {
|
||||
var welcome = '';
|
||||
switch (this.brand) {
|
||||
case 'villasweb':
|
||||
welcome = villasweb_welcome();
|
||||
break;
|
||||
case 'slew':
|
||||
welcome = slew_welcome();
|
||||
break;
|
||||
case 'template':
|
||||
welcome = template_welcome();
|
||||
break;
|
||||
default:
|
||||
welcome = this.defaultWelcome();
|
||||
break;
|
||||
}
|
||||
return welcome;
|
||||
}
|
||||
|
||||
defaultWelcome() {
|
||||
return (<div><h1>Welcome!</h1><p>This is the welcome page and you are very welcome here.</p></div>);
|
||||
}
|
||||
|
||||
// if icon cannot be found, the default favicon will be used
|
||||
changeHead() {
|
||||
// set title of document
|
||||
let title = this.getTitle();
|
||||
if (this.getSubtitle()) {
|
||||
title += " " + this.getSubtitle();
|
||||
}
|
||||
document.title = title;
|
||||
|
||||
// set document icon
|
||||
if (!this.values.icon) {
|
||||
return;
|
||||
}
|
||||
var oldlink = document.getElementById('dynamic-favicon');
|
||||
|
||||
var link = document.createElement('link');
|
||||
link.id = 'dynamic-favicon';
|
||||
link.rel = 'shortcut icon'
|
||||
link.href = '/' + this.values.icon;
|
||||
|
||||
if (oldlink) {
|
||||
document.head.removeChild(oldlink);
|
||||
}
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
checkValues() {
|
||||
if (!this.values.hasOwnProperty('pages')) {
|
||||
let pages = {};
|
||||
pages.home = true;
|
||||
pages.scenarios = true;
|
||||
pages.infrastructure = true;
|
||||
pages.users = true;
|
||||
pages.account = true;
|
||||
pages.api = true;
|
||||
|
||||
this.values.pages = pages;
|
||||
} else {
|
||||
if (!this.values.pages.hasOwnProperty('home')) {
|
||||
this.values.pages['home'] = false;
|
||||
}
|
||||
if (!this.values.pages.hasOwnProperty('scenarios')) {
|
||||
this.values.pages['scenarios'] = false;
|
||||
}
|
||||
if (!this.values.pages.hasOwnProperty('infrastructure')) {
|
||||
this.values.pages['infrastructure'] = false;
|
||||
}
|
||||
if (!this.values.pages.hasOwnProperty('users')) {
|
||||
this.values.pages['users'] = false;
|
||||
}
|
||||
if (!this.values.pages.hasOwnProperty('account')) {
|
||||
this.values.pages['account'] = false;
|
||||
}
|
||||
if (!this.values.pages.hasOwnProperty('api')) {
|
||||
this.values.pages['api'] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
applyStyle() {
|
||||
this.changeHead();
|
||||
|
||||
const rootEl = document.querySelector(':root');
|
||||
|
||||
let background = this.getBackgroundColor();
|
||||
if (background) {
|
||||
rootEl.style.setProperty('--bg', background);
|
||||
} else {
|
||||
console.log(document.body.style.backgroundColor)
|
||||
}
|
||||
|
||||
let maincolor = this.getMainColor();
|
||||
if (maincolor) {
|
||||
rootEl.style.setProperty('--maincolor', maincolor);
|
||||
}
|
||||
|
||||
let highlight = this.getHighlightColor();
|
||||
if (highlight) {
|
||||
rootEl.style.setProperty('--highlights', highlight);
|
||||
}
|
||||
|
||||
let secondary = this.getSecondaryTextColor();
|
||||
if (secondary) {
|
||||
rootEl.style.setProperty('--secondarytext', secondary);
|
||||
}
|
||||
|
||||
let font = this.getFont();
|
||||
if (font) {
|
||||
rootEl.style.setProperty('--mainfont', font);
|
||||
}
|
||||
|
||||
let borderradius = this.getBorderRadius();
|
||||
if (borderradius) {
|
||||
rootEl.style.setProperty('--borderradius', borderradius);
|
||||
}
|
||||
}
|
||||
|
||||
getLogo(style) {
|
||||
let image = null;
|
||||
|
||||
try {
|
||||
image = <img style={style} src={require('./' + this.brand + '/img/' + this.values.logo).default} alt={'Logo ' + this.values.title} />
|
||||
} catch (err) {
|
||||
console.error("cannot find './" + this.brand + '/img/' + this.values.logo + "'");
|
||||
}
|
||||
|
||||
return image;
|
||||
}
|
||||
|
||||
getBackgroundColor() {
|
||||
if (this.values.style && this.values.style.background) {
|
||||
return this.values.style.background;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getMainColor() {
|
||||
if (this.values.style && this.values.style.maincolor) {
|
||||
return this.values.style.maincolor;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getHighlightColor() {
|
||||
if (this.values.style && this.values.style.highlights) {
|
||||
return this.values.style.highlights;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getSecondaryTextColor() {
|
||||
if (this.values.style && this.values.style.secondarytext) {
|
||||
return this.values.style.secondarytext;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getFont() {
|
||||
if (this.values.style && this.values.style.font) {
|
||||
return this.values.style.secondarytext;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getBorderRadius() {
|
||||
if (this.values.style && this.values.style.borderradius) {
|
||||
return this.values.style.borderradius;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
getTitle() {
|
||||
return this.values.title ? this.values.title : "No Title!";
|
||||
}
|
||||
|
||||
getSubtitle() {
|
||||
return this.values.subtitle ? this.values.subtitle : null;
|
||||
}
|
||||
getSubtitle() {
|
||||
return this.values.subtitle ? this.values.subtitle : null;
|
||||
}
|
||||
};
|
||||
|
||||
var branding = new Branding(process.env.REACT_APP_BRAND);
|
||||
|
||||
export default branding;
|
||||
export default branding;
|
||||
|
|
BIN
src/branding/opalrt/img/datamodel.png
Normal file
BIN
src/branding/opalrt/img/datamodel.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 192 KiB |
152
src/branding/opalrt/img/eonerc_rwth.svg
Normal file
152
src/branding/opalrt/img/eonerc_rwth.svg
Normal file
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 27 KiB |
128
src/branding/opalrt/img/opal-rt-logo-color.svg
Normal file
128
src/branding/opalrt/img/opal-rt-logo-color.svg
Normal file
|
@ -0,0 +1,128 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
width="701.40002"
|
||||
height="130.14667"
|
||||
viewBox="0 0 701.40002 130.14667"
|
||||
sodipodi:docname="Logo_OPAL-RT_Horizontal_Color.eps"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs6" />
|
||||
<sodipodi:namedview
|
||||
id="namedview4"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1" />
|
||||
<g
|
||||
id="g8"
|
||||
inkscape:groupmode="layer"
|
||||
inkscape:label="ink_ext_XXXXXX"
|
||||
transform="matrix(1.3333333,0,0,-1.3333333,0,130.14667)">
|
||||
<g
|
||||
id="g10"
|
||||
transform="scale(0.1)">
|
||||
<path
|
||||
d="M 900.691,359.191 0,200.41 v -67.051 l 935.426,164.922 c -10.84,20.754 -22.336,41.114 -34.735,60.91"
|
||||
style="fill:#193050;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path12" />
|
||||
<path
|
||||
d="M 951.465,266.32 0,98.5469 V 0 h 1029.37 c -11.92,94.2383 -38.722,183.594 -77.905,266.32"
|
||||
style="fill:#193050;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path14" />
|
||||
<path
|
||||
d="M 0,819.387 V 235.195 L 880.18,390.391 C 695.293,660.117 366.098,831.508 0,819.387"
|
||||
style="fill:#193050;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path16" />
|
||||
<path
|
||||
d="M 0,976.094 V 907.367 C 400.563,906.703 748.902,701.539 929.246,399.043 l 90.414,15.937 c -3.72,6.719 -7.36,13.477 -11.25,20.051 l 250.52,4.785 -213.73,-73.195 c -2.76,5.567 -5.65,11.035 -8.53,16.594 l -89.529,-15.832 c 10.996,-20.137 21.332,-40.664 30.839,-61.59 l 88.41,15.566 c -2.76,6.289 -5.35,12.657 -8.23,18.836 l 244.41,4.715 -215.77,-73.933 c -2.28,6.035 -4.68,11.964 -7.04,17.949 L 992.051,273.457 C 1027.26,187.434 1049.78,95.6172 1057.38,0 H 1342.7 V 976.098 L 0,976.094"
|
||||
style="fill:#193050;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path18" />
|
||||
<path
|
||||
d="M 1698.06,775.063 V 515.137 h 315.06 v 259.926 z m -95.6,-23.696 c 0,37.317 7.02,62.813 21.01,76.559 13.98,13.633 40.95,20.594 80.82,20.594 h 302.17 c 39.92,0 66.83,-6.961 80.81,-20.594 14,-13.746 21.02,-39.242 21.02,-76.559 V 535.078 c 0,-37.644 -7.02,-63.16 -21.02,-76.785 -13.98,-13.566 -40.89,-20.391 -80.81,-20.391 h -302.17 c -39.87,0 -66.84,6.825 -80.82,20.391 -13.99,13.625 -21.01,39.141 -21.01,76.785 v 216.289"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path20" />
|
||||
<path
|
||||
d="M 2577.42,777.484 H 2362.58 V 668.66 h 214.84 c 16.62,0 27.87,2.379 33.98,7.106 6.1,4.8 9.1,13.445 9.1,25.449 v 43.961 c 0,11.949 -3,20.258 -9.1,25.027 -6.11,4.86 -17.36,7.281 -33.98,7.281 M 2268.66,437.902 V 848.52 h 351.08 c 32.67,0 56.3,-6.262 70.9,-18.797 14.68,-12.7 21.99,-32.95 21.99,-60.852 v -91.785 c 0,-27.672 -7.31,-47.711 -21.99,-60.231 -14.6,-12.601 -38.23,-18.953 -70.9,-18.953 h -257.16 v -160 h -93.92"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path22" />
|
||||
<path
|
||||
d="m 2937.16,601.777 h 179.78 l -88.46,167.094 z M 2753.37,437.902 2985.69,848.52 h 92.09 l 235.39,-410.618 h -107.18 l -49.33,89.735 h -260.28 l -47.82,-89.735 h -95.19"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path24" />
|
||||
<path
|
||||
d="M 3462.22,437.902 V 848.52 h 95.5 V 515.137 h 308.1 v -77.235 h -403.6"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path26" />
|
||||
<path
|
||||
d="m 3936.79,690.836 v -81.984 h 126.71 v 81.984 h -126.71"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path28" />
|
||||
<path
|
||||
d="m 4529.14,777.484 h -214.8 V 663.313 h 214.8 c 16.69,0 27.93,2.375 34.06,7.101 6.07,4.742 9.17,13.242 9.17,25.41 v 49.352 c 0,11.949 -3.1,20.258 -9.17,25.027 -6.13,4.86 -17.37,7.281 -34.06,7.281 M 4220.37,437.902 V 848.52 h 351.16 c 32.63,0 56.33,-6.262 70.96,-18.797 14.56,-12.746 21.89,-33.004 21.89,-60.852 v -96.32 c 0,-27.746 -7.33,-47.832 -21.89,-60.621 -14.63,-12.676 -38.33,-19.028 -70.96,-19.028 h -53.66 l 189.67,-155 h -137.23 l -165.41,155 h -90.56 v -155 h -93.97"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path30" />
|
||||
<path
|
||||
d="M 5071.43,775.137 V 437.902 h -95.66 v 337.235 h -188.42 v 73.383 h 473.15 v -73.383 h -189.07"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path32" />
|
||||
<path
|
||||
d="m 1745.33,284.016 v -168.43 h -47.67 v 168.43 h -94.15 v 36.543 h 236.36 v -36.543 h -94.54"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path34" />
|
||||
<path
|
||||
d="m 1898.26,115.586 v 204.973 h 209.75 v -34.954 h -162.07 v -45.683 h 94.54 v -34.961 h -94.54 V 154.113 H 2110 v -38.527 h -211.74"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path36" />
|
||||
<path
|
||||
d="M 2370.19,284.016 H 2241.48 V 154.113 h 128.71 v 44.102 l 47.67,-9.934 v -24.226 c 0,-19.075 -3.57,-31.926 -10.72,-38.535 -7.15,-6.633 -20.53,-9.934 -40.12,-9.934 h -122.36 c -19.6,0 -32.97,3.301 -40.12,9.934 -7.15,6.609 -10.73,19.46 -10.73,38.535 V 272.09 c 0,19.07 3.58,31.926 10.73,38.535 7.15,6.633 20.52,9.934 40.12,9.934 h 122.36 c 19.59,0 32.97,-3.301 40.12,-9.934 7.15,-6.609 10.72,-19.465 10.72,-38.535 v -19.461 l -47.67,-7.539 v 38.926"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path38" />
|
||||
<path
|
||||
d="m 2516.38,115.586 v 204.973 h 47.67 v -79.446 h 148.97 v 79.446 h 48.06 V 115.586 h -48.06 v 88.184 h -148.97 v -88.184 h -47.67"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path40" />
|
||||
<path
|
||||
d="m 2865.56,115.586 v 204.973 h 32.57 l 144.21,-120.762 c 10.33,-8.742 18.13,-16.152 23.44,-22.246 -1.34,19.07 -2,30.847 -2,35.359 v 107.649 h 42.89 V 115.586 h -32.57 l -150.54,126.719 c -6.37,5.293 -12.06,10.859 -17.08,16.691 1.3,-13.254 1.98,-24.101 1.98,-32.59 v -110.82 h -42.9"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path42" />
|
||||
<path
|
||||
d="m 3254.45,154.113 h 157.33 v 129.903 h -157.33 z m -47.66,117.977 c 0,19.07 3.57,31.926 10.73,38.535 7.15,6.633 20.52,9.934 40.13,9.934 h 150.95 c 19.59,0 32.96,-3.301 40.11,-9.934 7.15,-6.609 10.73,-19.465 10.73,-38.535 V 164.055 c 0,-19.075 -3.58,-31.926 -10.73,-38.535 -7.15,-6.633 -20.52,-9.934 -40.11,-9.934 h -150.95 c -19.61,0 -32.98,3.301 -40.13,9.934 -7.16,6.609 -10.73,19.46 -10.73,38.535 V 272.09"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path44" />
|
||||
<path
|
||||
d="m 3559.95,115.586 v 204.973 h 47.67 V 154.113 h 153.72 v -38.527 h -201.39"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path46" />
|
||||
<path
|
||||
d="m 3874.56,154.113 h 157.32 v 129.903 h -157.32 z m -47.67,117.977 c 0,19.07 3.59,31.926 10.74,38.535 7.15,6.633 20.51,9.934 40.12,9.934 h 150.96 c 19.59,0 32.96,-3.301 40.11,-9.934 7.15,-6.609 10.73,-19.465 10.73,-38.535 V 164.055 c 0,-19.075 -3.58,-31.926 -10.73,-38.535 -7.15,-6.633 -20.52,-9.934 -40.11,-9.934 h -150.96 c -19.61,0 -32.97,3.301 -40.12,9.934 -7.15,6.609 -10.74,19.46 -10.74,38.535 V 272.09"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path48" />
|
||||
<path
|
||||
d="M 4372.31,284.016 H 4223.34 V 154.113 h 148.97 v 45.684 h -77.85 v 34.969 h 124.33 v -70.711 c 0,-19.075 -3.57,-31.926 -10.71,-38.535 -7.15,-6.633 -20.54,-9.934 -40.13,-9.934 h -141.42 c -19.61,0 -32.98,3.301 -40.12,9.934 -7.15,6.609 -10.74,19.46 -10.74,38.535 V 272.09 c 0,19.07 3.59,31.926 10.74,38.535 7.14,6.633 20.51,9.934 40.12,9.934 h 141.42 c 19.07,0 32.31,-3.243 39.72,-9.731 7.41,-6.5 11.12,-18.738 11.12,-36.746 v -4.754 l -46.48,-8.359 v 23.047"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path50" />
|
||||
<path
|
||||
d="m 4519.7,115.586 v 204.973 h 47.67 V 115.586 h -47.67"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path52" />
|
||||
<path
|
||||
d="m 4672.24,115.586 v 204.973 h 209.74 V 285.605 H 4719.9 v -45.683 h 94.54 v -34.961 h -94.54 v -50.848 h 164.07 v -38.527 h -211.73"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path54" />
|
||||
<path
|
||||
d="m 5149.72,284.816 h -134.67 v -44.101 h 128.19 c 19.64,0 33.12,-3.313 40.41,-9.922 7.31,-6.633 10.95,-19.484 10.95,-38.535 v -28.203 c 0,-19.075 -3.64,-31.926 -10.92,-38.535 -7.28,-6.633 -20.72,-9.934 -40.32,-9.934 h -126.72 c -19.61,0 -33.06,3.301 -40.33,9.934 -7.29,6.609 -10.92,19.46 -10.92,38.535 v 5.547 l 42.11,8.75 v -24.239 h 145 v 46.875 h -127.93 c -19.59,0 -32.96,3.309 -40.11,9.93 -7.16,6.613 -10.73,19.465 -10.73,38.535 v 22.637 c 0,19.07 3.57,31.926 10.73,38.535 7.15,6.633 20.52,9.934 40.11,9.934 h 116.4 c 18.81,0 31.98,-3.176 39.53,-9.524 7.55,-6.355 11.33,-18.144 11.33,-35.359 v -4.367 l -42.11,-9.93 v 23.437"
|
||||
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
|
||||
id="path56" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 9.3 KiB |
158
src/branding/opalrt/img/villas_web.svg
Normal file
158
src/branding/opalrt/img/villas_web.svg
Normal file
|
@ -0,0 +1,158 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="149.71165mm"
|
||||
height="149.71165mm"
|
||||
viewBox="0 0 149.71165 149.71165"
|
||||
version="1.1"
|
||||
id="svg8"
|
||||
inkscape:version="0.92.1 r"
|
||||
sodipodi:docname="villasweb.svg"
|
||||
inkscape:export-filename="/home/markus/Development/Projects/VILLASweb/doc/villasweb.svg.png"
|
||||
inkscape:export-xdpi="21.299999"
|
||||
inkscape:export-ydpi="21.299999">
|
||||
<defs
|
||||
id="defs2">
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
id="linearGradient4611">
|
||||
<stop
|
||||
style="stop-color:#00a2b0;stop-opacity:1"
|
||||
offset="0"
|
||||
id="stop4607" />
|
||||
<stop
|
||||
style="stop-color:#6ec5b0;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop4609" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient4611"
|
||||
id="linearGradient4613"
|
||||
x1="65.497406"
|
||||
y1="153.88686"
|
||||
x2="65.497406"
|
||||
y2="13.88037"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="1.0941748"
|
||||
inkscape:cx="96.131516"
|
||||
inkscape:cy="285.10587"
|
||||
inkscape:document-units="mm"
|
||||
inkscape:current-layer="g5005"
|
||||
showgrid="false"
|
||||
inkscape:snap-smooth-nodes="true"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:snap-bbox-edge-midpoints="true"
|
||||
inkscape:bbox-nodes="true"
|
||||
inkscape:object-paths="true"
|
||||
inkscape:snap-intersection-paths="false"
|
||||
inkscape:bbox-paths="false"
|
||||
inkscape:snap-midpoints="true"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="951"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="27"
|
||||
inkscape:window-maximized="1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0"
|
||||
inkscape:measure-start="37.9039,424.38"
|
||||
inkscape:measure-end="101.386,461.031"
|
||||
inkscape:snap-global="true" />
|
||||
<metadata
|
||||
id="metadata5">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Ebene 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(9.2667999,-9.6854979)">
|
||||
<g
|
||||
id="g5005"
|
||||
transform="matrix(0.9623191,0,0,0.9623191,2.7484651,3.9385684)">
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4329"
|
||||
d="M 65.519531,7.6875 C 30.952342,7.2288821 -1.7559504,32.928216 -9.0985572,66.77029 c -8.9441948,34.36253 9.91032274,73.19316 42.4331002,87.43912 31.90533,15.5955 73.697367,4.8306 94.125297,-24.21303 C 149.0773,101.82081 146.84579,58.724642 122.42805,32.933531 108.17012,16.922072 86.915542,7.695183 65.519531,7.6875 Z"
|
||||
style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-width:3.70000005;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:none;stroke:url(#linearGradient4613);stroke-width:20.38569832;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path4572"
|
||||
sodipodi:sides="6"
|
||||
sodipodi:cx="65.497406"
|
||||
sodipodi:cy="83.983902"
|
||||
sodipodi:r1="58.333843"
|
||||
sodipodi:r2="50.518589"
|
||||
sodipodi:arg1="-0.52359878"
|
||||
sodipodi:arg2="-4.4017012e-09"
|
||||
inkscape:flatsided="true"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="m 116.016,54.81698 0,58.33384 -50.518594,29.16693 -50.51859,-29.16693 0,-58.333839 50.51859,-29.166922 z"
|
||||
transform="matrix(0.83725065,0,0,0.85461295,10.659664,12.436674)" />
|
||||
<path
|
||||
sodipodi:type="star"
|
||||
style="fill:#007da9;fill-opacity:1;stroke:none;stroke-width:17.67682076;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path4576-3"
|
||||
sodipodi:sides="3"
|
||||
sodipodi:cx="-80.89846"
|
||||
sodipodi:cy="-21.019157"
|
||||
sodipodi:r1="15.401051"
|
||||
sodipodi:r2="7.7005253"
|
||||
sodipodi:arg1="2.0943951"
|
||||
sodipodi:arg2="3.1415927"
|
||||
inkscape:flatsided="true"
|
||||
inkscape:rounded="0"
|
||||
inkscape:randomized="0"
|
||||
d="m -88.598986,-7.6814564 0,-26.6754016 23.101576,13.337701 z"
|
||||
transform="matrix(-1,0,0,-1.0094199,3.7691891,-0.07235845)"
|
||||
inkscape:transform-center-x="3.7051813" />
|
||||
<path
|
||||
d="m 42.395834,161.35432 0,-26.6754 23.101576,13.3377 z"
|
||||
inkscape:randomized="0"
|
||||
inkscape:rounded="0"
|
||||
inkscape:flatsided="true"
|
||||
sodipodi:arg2="3.1415927"
|
||||
sodipodi:arg1="2.0943951"
|
||||
sodipodi:r2="7.7005253"
|
||||
sodipodi:r1="15.401051"
|
||||
sodipodi:cy="148.01662"
|
||||
sodipodi:cx="50.096359"
|
||||
sodipodi:sides="3"
|
||||
id="path4593"
|
||||
style="fill:#007da9;fill-opacity:1;stroke:none;stroke-width:17.67682076;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||
sodipodi:type="star"
|
||||
inkscape:transform-center-x="-3.7051807"
|
||||
transform="matrix(1,0,0,1.0094199,-4.2717477,-1.5199394)"
|
||||
inkscape:transform-center-y="1.8921547e-06" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 5.8 KiB |
69
src/branding/opalrt/opalrt-functions.js
Normal file
69
src/branding/opalrt/opalrt-functions.js
Normal file
|
@ -0,0 +1,69 @@
|
|||
/**
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
import React from 'react';
|
||||
import { Button } from 'react-bootstrap';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
export function opalrt_welcome() {
|
||||
let url = 'https://villas.fein-aachen.org/doc/web.html';
|
||||
return (
|
||||
<div >
|
||||
<h1>Welcome!</h1>
|
||||
<p>VILLASweb is a tool to configure real-time co-simulations and display simulation real-time data.
|
||||
It enables the management and monitoring of simulators, models and simulations.</p>
|
||||
<span className='solid-button'>
|
||||
<Button key="learnmore" onClick={e => window.location = url}>Learn more</Button>
|
||||
</span>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export function opalrt_home(title, username, userid, role) {
|
||||
return (
|
||||
<div className="home-container">
|
||||
<img style={{ height: 120, float: 'right' }} src={require('./img/villas_web.svg').default} alt="Logo VILLASweb" />
|
||||
<h1>Home</h1>
|
||||
<p>
|
||||
Welcome to <b>{title}</b>!
|
||||
</p>
|
||||
<p>
|
||||
You are logged in as user <b>{username}</b> with <b>ID {userid}</b> and role <b>{role}</b>.
|
||||
</p>
|
||||
<h3>Credits</h3>
|
||||
<p>VILLASweb is an open source project developed by the <a href="http://acs.eonerc.rwth-aachen.de">Institute for Automation of Complex Power Systems</a> at <a href="https;//www.rwth-aachen.de">RWTH Aachen University</a>.</p>
|
||||
<img height={60} src={require('./img/eonerc_rwth.svg').default} alt="Logo ACS" />
|
||||
<ul>
|
||||
<li><a href="mailto:steffen.vogel@opal-rt.com">Steffen Vogel</a></li>
|
||||
<li><a href="mailto:ikoester@eonerc.rwth-aachen.de">Iris Köster</a></li>
|
||||
</ul>
|
||||
<h3>Links</h3>
|
||||
<ul>
|
||||
<li><NavLink to="/api">VILLASweb API browser</NavLink></li>
|
||||
<li><a href="http://fein-aachen.org/projects/villas-framework/">FEIN Aachen e.V. project page of VILLASframework</a></li>
|
||||
<li><a href="https://villas.fein-aachen.org/docs/web">Documentation of VILLASweb</a></li>
|
||||
<li><a href="https://git.rwth-aachen.de/acs/public/villas/web">Source Code of VILLASweb frontend</a></li>
|
||||
<li><a href="https://git.rwth-aachen.de/acs/public/villas/web-backend-go">Source Code of VILLASweb backend</a></li>
|
||||
</ul>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export function opalrt_footer() {
|
||||
return (
|
||||
<footer className="app-footer">
|
||||
Copyright © {new Date().getFullYear()} - <a href="https://www.acs.eonerc.rwth-aachen.de">Institute for Automation of Complex Power Systems</a> - <a href="https://www.rwth-aachen.de">RWTH Aachen University</a>
|
||||
</footer>
|
||||
);
|
||||
}
|
40
src/branding/opalrt/opalrt-values.js
Normal file
40
src/branding/opalrt/opalrt-values.js
Normal file
|
@ -0,0 +1,40 @@
|
|||
/**
|
||||
* This file is part of VILLASweb.
|
||||
*
|
||||
* VILLASweb is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* VILLASweb is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
const villasweb_values = {
|
||||
title: 'OPAL-RT VILLASweb',
|
||||
// subtitle: 'OPAL-RT Web Dashboards',
|
||||
logo: 'villas_web.svg',
|
||||
pages: {
|
||||
home: true,
|
||||
scenarios: true,
|
||||
infrastructure: true,
|
||||
account: true,
|
||||
api: true,
|
||||
},
|
||||
style: {
|
||||
background: '#f0f4f7',
|
||||
backgroundText: '#000000',
|
||||
highlights: '#1158a2',
|
||||
main: '#092f56',
|
||||
secondaryText: '#c4c4c4',
|
||||
fontFamily: 'Open Sans',
|
||||
// borderRadius: ''
|
||||
}
|
||||
}
|
||||
|
||||
export default villasweb_values;
|
|
@ -19,48 +19,48 @@ import './slew.css'
|
|||
|
||||
|
||||
export function slew_home() {
|
||||
return (
|
||||
<div className="home-container">
|
||||
<h1>Home</h1>
|
||||
<p>
|
||||
Welcome to <b>SLEW</b>!
|
||||
</p>
|
||||
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
|
||||
The platform enables interaction with the experiments in real time and performing analysis on the experimental results.</p>
|
||||
return (
|
||||
<div className="home-container">
|
||||
<h1>Home</h1>
|
||||
<p>
|
||||
Welcome to <b>SLEW</b>!
|
||||
</p>
|
||||
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
|
||||
The platform enables interaction with the experiments in real time and performing analysis on the experimental results.</p>
|
||||
|
||||
<p>The motivation behind SLEW is the ongoing transformation of the energy system, which is making the system more and more complex.
|
||||
Hence, understanding new phenomena and underlying interactions is getting more challenging, also because real experimental
|
||||
activities for obtaining a better understanding are not possible for obvious reasons of security and safety.</p>
|
||||
<p>The motivation behind SLEW is the ongoing transformation of the energy system, which is making the system more and more complex.
|
||||
Hence, understanding new phenomena and underlying interactions is getting more challenging, also because real experimental
|
||||
activities for obtaining a better understanding are not possible for obvious reasons of security and safety.</p>
|
||||
|
||||
<p>The SLEW platform gives the possibility to perform experiments in a virtual infrastructure and to learn from the execution
|
||||
of complex models. It provides a virtual power engineering world where complex phenomena take place while users can interact
|
||||
with the system in real time.</p>
|
||||
<p>The SLEW platform gives the possibility to perform experiments in a virtual infrastructure and to learn from the execution
|
||||
of complex models. It provides a virtual power engineering world where complex phenomena take place while users can interact
|
||||
with the system in real time.</p>
|
||||
|
||||
<p>The platform is based on the real-time simulation tool DPsim developed in RWTH,
|
||||
which is available as open-source software project to the power engineering community. Besides, it integrates the interactive
|
||||
computing environment Jupyter for further analysis of experimental results.</p>
|
||||
<p>The platform is based on the real-time simulation tool DPsim developed in RWTH,
|
||||
which is available as open-source software project to the power engineering community. Besides, it integrates the interactive
|
||||
computing environment Jupyter for further analysis of experimental results.</p>
|
||||
|
||||
<h3>Contacts</h3>
|
||||
<ul>
|
||||
<li><a href="mailto:jdinkelbach@eonerc.rwth-aachen.de">Jan Dinkelbach</a></li>
|
||||
<li><a href="mailto:ikoester@eonerc.rwth-aachen.de">Iris Köster</a></li>
|
||||
<li><a href="mailto:post@steffenvogel.de">Steffen Vogel</a></li>
|
||||
</ul>
|
||||
<h3>Contacts</h3>
|
||||
<ul>
|
||||
<li><a href="mailto:jdinkelbach@eonerc.rwth-aachen.de">Jan Dinkelbach</a></li>
|
||||
<li><a href="mailto:ikoester@eonerc.rwth-aachen.de">Iris Köster</a></li>
|
||||
<li><a href="mailto:post@steffenvogel.de">Steffen Vogel</a></li>
|
||||
</ul>
|
||||
|
||||
<h3>Credits</h3>
|
||||
<div>
|
||||
<img id="images" height={70} src={require('./img/eonerc_rwth.svg').default} alt="Logo EONERC"/>
|
||||
<img id="images" height={70} src={require('./img/erigrid2.png').default} alt="Logo Erigrid"/>
|
||||
<img id="images" height={70} src={require('./img/european_commission.svg').default} alt="Logo EU"/>
|
||||
</div>
|
||||
</div>)
|
||||
<h3>Credits</h3>
|
||||
<div>
|
||||
<img id="images" height={70} src={require('./img/eonerc_rwth.svg').default} alt="Logo EONERC" />
|
||||
<img id="images" height={70} src={require('./img/erigrid2.png').default} alt="Logo Erigrid" />
|
||||
<img id="images" height={70} src={require('./img/european_commission.svg').default} alt="Logo EU" />
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export function slew_welcome() {
|
||||
return (
|
||||
<div >
|
||||
<h1>Welcome!</h1>
|
||||
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
|
||||
The platform enables to interact with the experiments in real time and perform analyses on the experimental results.</p>
|
||||
</div>)
|
||||
<div >
|
||||
<h1>Welcome!</h1>
|
||||
<p>SLEW is a learning platform for running experiments in a virtual power engineering world.
|
||||
The platform enables to interact with the experiments in real time and perform analyses on the experimental results.</p>
|
||||
</div>)
|
||||
}
|
||||
|
|
|
@ -16,29 +16,29 @@
|
|||
******************************************************************************/
|
||||
|
||||
const slew_values = {
|
||||
title: 'SLEW',
|
||||
subtitle: 'Second Life for Energiewende',
|
||||
icon: "slew_blue.png",
|
||||
logo: "slew_logo.png",
|
||||
pages: {
|
||||
home: true,
|
||||
scenarios: true,
|
||||
infrastructure: false,
|
||||
account: false,
|
||||
api: false
|
||||
},
|
||||
links: {
|
||||
"DPsim Simulator": "https://dpsim.fein-aachen.org",
|
||||
"VILLASframework": "https://villas.fein-aachen.org/doc"
|
||||
},
|
||||
style: {
|
||||
background: 'rgba(207,209,210, 1)',
|
||||
highlights: 'rgba(0,84,159, 0.75)',
|
||||
maincolor: 'rgba(80,80,80, 1)',
|
||||
secondarytext: 'rgba(80,80,80, 0.9)',
|
||||
font: "16px Roboto, sans-serif",
|
||||
borderradius: "10px"
|
||||
}
|
||||
title: 'SLEW',
|
||||
subtitle: 'Second Life for Energiewende',
|
||||
icon: "slew_blue.png",
|
||||
logo: "slew_logo.png",
|
||||
pages: {
|
||||
home: true,
|
||||
scenarios: true,
|
||||
infrastructure: false,
|
||||
account: false,
|
||||
api: false
|
||||
},
|
||||
links: {
|
||||
"DPsim Simulator": "https://dpsim.fein-aachen.org",
|
||||
"VILLASframework": "https://villas.fein-aachen.org/doc"
|
||||
},
|
||||
style: {
|
||||
background: 'rgba(207,209,210, 1)',
|
||||
highlights: 'rgba(0,84,159, 0.75)',
|
||||
main: 'rgba(80,80,80, 1)',
|
||||
secondaryText: 'rgba(80,80,80, 0.9)',
|
||||
fontFamily: "Roboto, sans-serif",
|
||||
borderRadius: "10px"
|
||||
}
|
||||
}
|
||||
|
||||
export default slew_values;
|
||||
export default slew_values;
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
#images {
|
||||
margin-left: 2em;
|
||||
margin-right: 2em
|
||||
}
|
||||
}
|
||||
|
|
|
@ -14,39 +14,39 @@
|
|||
* You should have received a copy of the GNU General Public License
|
||||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
import React from 'react';
|
||||
import React from 'react';
|
||||
|
||||
|
||||
export function template_home() {
|
||||
return (
|
||||
<div className="home-container">
|
||||
<img style={{ height: 120, float: 'right' }} src={require('./img/template_logo.svg').default} alt="Template Logo" />
|
||||
<h1>Home</h1>
|
||||
<p>
|
||||
Welcome to <b>BRAND</b>!
|
||||
</p>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
|
||||
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export function template_welcome() {
|
||||
return (
|
||||
<div >
|
||||
<h1>Welcome!</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export function template_footer() {
|
||||
return (
|
||||
<footer className="app-footer">
|
||||
<p>HELLO WORLD, THIS IS MY FOOTER!</p>
|
||||
</footer>)
|
||||
}
|
||||
export function template_home() {
|
||||
return (
|
||||
<div className="home-container">
|
||||
<img style={{ height: 120, float: 'right' }} src={require('./img/template_logo.svg').default} alt="Template Logo" />
|
||||
<h1>Home</h1>
|
||||
<p>
|
||||
Welcome to <b>BRAND</b>!
|
||||
</p>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
|
||||
et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export function template_welcome() {
|
||||
return (
|
||||
<div >
|
||||
<h1>Welcome!</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
||||
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export function template_footer() {
|
||||
return (
|
||||
<footer className="app-footer">
|
||||
<p>HELLO WORLD, THIS IS MY FOOTER!</p>
|
||||
</footer>)
|
||||
}
|
||||
|
|
|
@ -15,30 +15,30 @@
|
|||
* along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
|
||||
******************************************************************************/
|
||||
|
||||
const template_values = {
|
||||
title: 'Template',
|
||||
subtitle: 'change me!',
|
||||
icon: "template_logo.svg",
|
||||
pages: {
|
||||
home: true,
|
||||
scenarios: true,
|
||||
infrastructure: true,
|
||||
users: true,
|
||||
account: true,
|
||||
api: true
|
||||
},
|
||||
links: {
|
||||
"Google": "https://www.google.com/",
|
||||
"StackOverFlow": "https://stackoverflow.com/"
|
||||
},
|
||||
style: {
|
||||
background: 'rgba(50,30,90, 0.6)',
|
||||
highlights: 'rgba(0,230,5, 0.75)',
|
||||
maincolor: 'rgba(255,0,0, 1)',
|
||||
secondarytext: 'rgba(0,0,100, 0.8)',
|
||||
font: "16px Comic Sans, sans-serif",
|
||||
borderradius: "60px"
|
||||
}
|
||||
}
|
||||
|
||||
export default template_values;
|
||||
const template_values = {
|
||||
title: 'Template',
|
||||
subtitle: 'change me!',
|
||||
icon: "template_logo.svg",
|
||||
pages: {
|
||||
home: true,
|
||||
scenarios: true,
|
||||
infrastructure: true,
|
||||
users: true,
|
||||
account: true,
|
||||
api: true
|
||||
},
|
||||
links: {
|
||||
"Google": "https://www.google.com/",
|
||||
"StackOverFlow": "https://stackoverflow.com/"
|
||||
},
|
||||
style: {
|
||||
background: 'rgba(50,30,90, 0.6)',
|
||||
highlights: 'rgba(0,230,5, 0.75)',
|
||||
main: 'rgba(255,0,0, 1)',
|
||||
secondaryText: 'rgba(0,0,100, 0.8)',
|
||||
fontFamily: "Comic Sans, sans-serif",
|
||||
borderRadius: "60px"
|
||||
}
|
||||
}
|
||||
|
||||
export default template_values;
|
||||
|
|
|
@ -22,14 +22,14 @@ import { NavLink } from 'react-router-dom';
|
|||
export function villasweb_welcome() {
|
||||
let url = 'https://villas.fein-aachen.org/doc/web.html';
|
||||
return (
|
||||
<div >
|
||||
<h1>Welcome!</h1>
|
||||
<p>VILLASweb is a tool to configure real-time co-simulations and display simulation real-time data.
|
||||
It enables the management and monitoring of simulators, models and simulations.</p>
|
||||
<span className='solid-button'>
|
||||
<Button key="learnmore" onClick={e => window.location = url }>Learn more</Button>
|
||||
</span>
|
||||
</div>)
|
||||
<div >
|
||||
<h1>Welcome!</h1>
|
||||
<p>VILLASweb is a tool to configure real-time co-simulations and display simulation real-time data.
|
||||
It enables the management and monitoring of simulators, models and simulations.</p>
|
||||
<span className='solid-button'>
|
||||
<Button key="learnmore" onClick={e => window.location = url}>Learn more</Button>
|
||||
</span>
|
||||
</div>)
|
||||
}
|
||||
|
||||
export function villasweb_home(title, username, userid, role) {
|
||||
|
|
|
@ -16,22 +16,22 @@
|
|||
******************************************************************************/
|
||||
|
||||
const villasweb_values = {
|
||||
title: 'VILLASweb',
|
||||
subtitle: 'ACS',
|
||||
logo: 'villas_web.svg',
|
||||
pages: {
|
||||
home: true,
|
||||
scenarios: true,
|
||||
infrastructure: true,
|
||||
account: true,
|
||||
api: true,
|
||||
},
|
||||
style: {
|
||||
background: '#6EA2B0',
|
||||
highlights: '#527984',
|
||||
maincolor: '#4d4d4d',
|
||||
secondarytext: '#818181',
|
||||
}
|
||||
title: 'VILLASweb',
|
||||
subtitle: 'ACS',
|
||||
logo: 'villas_web.svg',
|
||||
pages: {
|
||||
home: true,
|
||||
scenarios: true,
|
||||
infrastructure: true,
|
||||
account: true,
|
||||
api: true,
|
||||
},
|
||||
style: {
|
||||
background: '#6EA2B0',
|
||||
highlights: '#527984',
|
||||
main: '#4d4d4d',
|
||||
secondaryText: '#818181',
|
||||
}
|
||||
}
|
||||
|
||||
export default villasweb_values;
|
||||
export default villasweb_values;
|
||||
|
|
|
@ -20,30 +20,31 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
--bg: #eceded;
|
||||
--main: #4d4d4d;
|
||||
--background: #eceded;
|
||||
--highlights: #527984;
|
||||
--secondarytext: #818181;
|
||||
--borderradius: 0px;
|
||||
--mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--maincolor: #4d4d4d;
|
||||
--bgtext:#fff;
|
||||
--secondaryText: #818181;
|
||||
--borderRadius: 0px;
|
||||
--fontFamily: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
--backgroundText:#fff;
|
||||
}
|
||||
|
||||
* {
|
||||
color: var(--maincolor);
|
||||
color: var(--main);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg) !important;
|
||||
background-color: var(--background) !important;
|
||||
font-family: var(--fontFamily) !important;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100vh;
|
||||
color: var(--maincolor);
|
||||
border-radius: var(--borderradius);
|
||||
color: var(--main);
|
||||
border-radius: var(--borderRadius);
|
||||
|
||||
|
||||
font: var(--mainfont);
|
||||
font: 16px;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
|
@ -91,13 +92,13 @@ a:active {
|
|||
|
||||
margin-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
color: var(--bgtext);
|
||||
color: var(--backgroundText);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-footer a {
|
||||
text-decoration: underline;
|
||||
color: var(--bgtext);
|
||||
color: var(--backgroundText);
|
||||
}
|
||||
|
||||
.app-body-spacing {
|
||||
|
@ -110,7 +111,7 @@ a:active {
|
|||
|
||||
.app-content {
|
||||
padding: 15px 20px 20px 20px;
|
||||
border-radius: var(--borderradius);
|
||||
border-radius: var(--borderRadius);
|
||||
|
||||
|
||||
width: auto;
|
||||
|
@ -145,7 +146,7 @@ a:active {
|
|||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 160px;
|
||||
border-radius: var(--borderradius);
|
||||
border-radius: var(--borderRadius);
|
||||
|
||||
|
||||
background-color: #fff;
|
||||
|
@ -159,7 +160,7 @@ a:active {
|
|||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
width: 160px;
|
||||
border-radius: var(--borderradius);
|
||||
border-radius: var(--borderRadius);
|
||||
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
|
||||
|
|
Loading…
Add table
Reference in a new issue