diff --git a/README.MD b/README.MD
index c01c799..4db93a0 100644
--- a/README.MD
+++ b/README.MD
@@ -12,23 +12,24 @@ This project contains the code for the UVL playground, a small website that uses
Compile a new UVLS executable for Linux from [source](https://github.com/Universal-Variability-Language/uvl-lsp) and replace `uvl-playground/WebSocketLanguageServer/lib/uvls`
-### Locale Development
+### Local Development
-Install a recent version of node and npm, change in the `WebSocketLanguageServer` directory and execute `npm run start:dev`.
+Install a recent version of node and npm, change in the `WebSocketLanguageServer` directory and execute `npm install` and `npm run start:dev`.
### Deploying
-When your changes are added to the master branch, a github action takes care of the deployment.
+When your changes are added to the master or dev branch, a github action takes care of the deployment.
## Website
-### Locale Development
+### Local Development
-Install a recent version of node and npm, change to the `WebSocketClient` directory and execute `npm run dev`.
+Install a recent version of node and npm, change to the `WebSocketClient` directory and execute `npm install` and `npm run dev`.
+Hint: npm run dev includes running a shell script that only works under linux. However, this only copies style files to workaround a strange error in development mode of vite. Alternatively, you can run `npm run build` to build the website and then serve the content of `./WebSocketClient/dist` with a webserver of your choice.
### Deploying
-When your changes are added to the master branch, a github action takes care of the deployment.
+When your changes are added to the master or dev branch, a github action takes care of the deployment.
## Hosting on a different machine
@@ -40,7 +41,7 @@ To change the machine on which the playground is hosted, you need to take the fo
- change the `SSH_PRIVATE_KEY` github secret to the new private key
- change the variables for hostname, username, email and working directory on the server at the beginning of the workflow files under `.github/workflows`
-# Hosting your own uvl playground
+## Hosting your own uvl playground
- To host your own uvl playground setup a machine with docker
- Clone the repository
@@ -52,6 +53,60 @@ To change the machine on which the playground is hosted, you need to take the fo
- run `docker compose up --build -d`
- This will run the uvl playground behind a reverse proxy with letsencrypt certificates
-# Hosting your own uvl playground without reverse proxy
-
-- Remove everything treafik related from the docker compose file
+## Hosting your own uvl playground (locally) without letsencrypt
+
+- run `docker compose -f docker-compose-http.yaml up --build -d`
+
+# Directory structure
+
+## WebSocketClient
+
+- contains the website of the playground
+
+```
+WebSocketClient
+├── assets //contains all relevant pictures as well as the example and tutorial feature models
+├── dark_mode_dev_env.sh //script to workaround vite dev error
+├── dist //contains the production build
+├── Dockerfile
+├── index.html
+├── node_modules
+├── package.json
+├── package-lock.json
+├── src
+│ ├── config.ts //configuration for ports etc.
+│ ├── ImportExportFiles.ts //functionality for up- and download of files in the editor
+│ ├── intro.ts //functionality for the playground tour
+│ ├── main.ts
+│ ├── util.ts //mainly for error handling
+│ ├── uvlTutorial.ts //functionality for the UVL Tutorial (content is in assets folder)
+│ └── vite-env.d.ts
+├── style
+│ ├── dropdown.css //styling for the example library drop down
+│ ├── split.css //styling for the split pane
+│ └── style.css
+└── tsconfig.json
+```
+
+## WebSocketLanguageServer
+
+- contains the wrapper for the language server
+
+```
+WebSocketLanguageServer
+├── build //contains the minified production build
+│ ├── config.js
+│ ├── config.js.map
+│ ├── index.js
+│ └── index.js.map
+├── Dockerfile
+├── lib
+│ └── uvls //the language server executable compiled from https://github.com/Universal-Variability-Language/uvl-lsp
+├── node_modules
+├── package.json
+├── package-lock.json
+├── src
+│ ├── config.ts
+│ └── index.ts
+└── tsconfig.json
+```
diff --git a/WebSocketClient/assets/dark.svg b/WebSocketClient/assets/dark.svg
new file mode 100644
index 0000000..ecc5786
--- /dev/null
+++ b/WebSocketClient/assets/dark.svg
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
diff --git a/WebSocketClient/assets/light.svg b/WebSocketClient/assets/light.svg
new file mode 100644
index 0000000..c5ff431
--- /dev/null
+++ b/WebSocketClient/assets/light.svg
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/WebSocketClient/src/examples.ts b/WebSocketClient/assets/uvlExamples.ts
similarity index 57%
rename from WebSocketClient/src/examples.ts
rename to WebSocketClient/assets/uvlExamples.ts
index f476520..1475a13 100644
--- a/WebSocketClient/src/examples.ts
+++ b/WebSocketClient/assets/uvlExamples.ts
@@ -6,9 +6,10 @@ let globalEditor: editor.IStandaloneCodeEditor|null;
export function initExamples(editor: editor.IStandaloneCodeEditor) {
globalEditor = editor;
- loadDefaultExample();
- loadIceCreamExample();
- loadComputerExample();
+ initExample("Default", defaultExampleText);
+ initExample("Ice Cream", iceCreamExampleText);
+ initExample("Computer", computerExampleText);
+ initExample("Elevator", elevatorExampleText);
}
const defaultExampleText = `features
@@ -75,42 +76,56 @@ constraints
Dedicated => Liquid
sum(powerConsumption) > 300 => StrongPSU`
-function loadDefaultExample() {
- const button: HTMLButtonElement|null = document.querySelector("#defaultExample");
- if(button){
- button.onclick = () => {
- const opsModel = globalEditor?.getModel();
- if (opsModel) {
- const fullModelRange = opsModel.getFullModelRange();
- const operation: IIdentifiedSingleEditOperation = {text: defaultExampleText, range: fullModelRange};
- opsModel.applyEdits([operation], false);
- }
- }
- }
-}
+const elevatorExampleText = `//Example from FeatureIDE Book
+features
+ Elevator {abstract}
+ mandatory
+ Behavior {abstract}
+ mandatory
+ Modes {abstract}
+ alternative
+ Sabbath
+ FIFO
+ ShortestPath
+ optional
+ Service
+ Priorities {abstract}
+ or
+ RushHour
+ FloorPriority
+ PersonPriority
+ optional
+ VoiceOutput
+ CallButtons {abstract}
+ alternative
+ DirectedCall
+ UndirectedCall
+ Security {abstract}
+ mandatory
+ Permission {abstract}
+ or
+ FloorPermission
+ PermissionControl
+ Safety {abstract}
+ optional
+ Overloaded
-function loadIceCreamExample() {
- const button: HTMLButtonElement|null = document.querySelector("#iceCreamExample");
- if(button){
- button.onclick = () => {
- const opsModel = globalEditor?.getModel();
- if (opsModel) {
- const fullModelRange = opsModel.getFullModelRange();
- const operation: IIdentifiedSingleEditOperation = {text: iceCreamExampleText, range: fullModelRange};
- opsModel.applyEdits([operation], false);
- }
- }
- }
-}
+constraints
+ CallButtons | Sabbath
+ DirectedCall => ShortestPath
+ UndirectedCall => FIFO | ShortestPath`
-function loadComputerExample() {
- const button: HTMLButtonElement|null = document.querySelector("#computerExample");
- if(button){
+function initExample(name: string, content: string){
+ const dropdown = document.getElementById("examples-dropdown");
+ const button = document.createElement("button");
+ if(dropdown){
+ dropdown.appendChild(button);
+ button.innerText = name;
button.onclick = () => {
const opsModel = globalEditor?.getModel();
if (opsModel) {
const fullModelRange = opsModel.getFullModelRange();
- const operation: IIdentifiedSingleEditOperation = {text: computerExampleText, range: fullModelRange};
+ const operation: IIdentifiedSingleEditOperation = {text: content, range: fullModelRange};
opsModel.applyEdits([operation], false);
}
}
diff --git a/WebSocketClient/index.html b/WebSocketClient/index.html
index f4160db..a720263 100644
--- a/WebSocketClient/index.html
+++ b/WebSocketClient/index.html
@@ -1,5 +1,5 @@
-
+
{
stringPromise.then((res) => {
const lineCount = res.split('\n').length;
if(lineCount > config.MAX_NUMBER_LINES){
- displayEditorErrorAtContent(`The Editor only allows content up to ${config.MAX_NUMBER_LINES} Lines!`);
+ displayEditorErrorAtContent(`The Editor only allows content up to ${config.MAX_NUMBER_LINES} Lines! (Because of performance reasons)`);
resolve(res.split('\n').slice(0, config.MAX_NUMBER_LINES - 1).reduce((acc, curr) => acc + curr + "\n", ""));
}else{
resolve(res);
diff --git a/WebSocketClient/src/intro.ts b/WebSocketClient/src/intro.ts
index 73fd55c..86c0207 100644
--- a/WebSocketClient/src/intro.ts
+++ b/WebSocketClient/src/intro.ts
@@ -14,9 +14,13 @@ export const initIntroJS = () => {
element: "[id='1']",
intro: 'For example, click here to visualize your feature model. The feature model on the right is then automatically updated when you edit the model. Click on it again to hide it.'
}, {
- element: "#separator", intro: 'You can change the size of the editor and the visualization with your mouse.'
+ element: "#separator1", intro: 'You can change the size of the editor and the visualization with your mouse.'
}, {
element: "#uvl-tutorialButton", intro: 'If you are not familiar with UVL or need a little refresh, click here to get a quick tutorial of the language.'
+ }, {
+ element: ".dropdown-wrapper", intro: 'Click here to load an UVL example from a list of different examples.'
+ }, {
+ element: "#theme-toggle", intro: 'Click here to change between light and dark mode.'
}],
});
@@ -42,7 +46,11 @@ export const initIntroJS = () => {
const helperLayer = document.getElementsByClassName("tmpClass");
setTimeout(() => {
if(helperLayer[0] instanceof HTMLElement){
- helperLayer[0].style["box-shadow"] = "rgb(255, 255, 255) 0px 0px 1px 2px, rgba(230, 230, 230, 0.44) 0px 0px 0px 5000px";
+ if(document.documentElement.getAttribute('data-theme') === "dark"){
+ helperLayer[0].style["box-shadow"] = "rgb(255, 255, 255) 0px 0px 1px 2px, rgba(230, 230, 230, 0.44) 0px 0px 0px 5000px";
+ }else{
+ helperLayer[0].style["box-shadow"] = "rgb(0, 0, 0) 0px 0px 1px 2px, rgba(0, 0, 0, 0.8) 0px 0px 0px 5000px";
+ }
}
}, 100);
});
diff --git a/WebSocketClient/src/main.ts b/WebSocketClient/src/main.ts
index 98fe22c..f69b11c 100644
--- a/WebSocketClient/src/main.ts
+++ b/WebSocketClient/src/main.ts
@@ -29,7 +29,7 @@ import initUvlTutorial from './uvlTutorial.ts';
import {buildWorkerDefinition} from 'monaco-editor-workers';
import {initIntroJS} from "./intro.ts";
import {downloadFile, uploadFile} from "./ImportExportFiles.ts";
-import {initExamples} from "./examples.ts";
+import {initExamples} from "../assets/uvlExamples.ts";
import {aggregateCharacters, displayEditorError, displayEditorErrorAtContent} from "./util.ts";
import IIdentifiedSingleEditOperation = editor.IIdentifiedSingleEditOperation;
@@ -255,7 +255,7 @@ export const startUvlClient = async () => {
"editor.fontSize": 14,
"workbench.colorTheme": "Default Dark Modern",
theme: "vs-dark"
- }`);
+ }`);
const fileSystemProvider = new RegisteredFileSystemProvider(false);
fileID = uuidv4();
@@ -291,14 +291,14 @@ export const startUvlClient = async () => {
} else {
vscode.commands.executeCommand("deleteLeft");
}
- displayEditorErrorAtContent(`The Editor only allows content up to ${config.MAX_NUMBER_LINES} Lines!`);
+ displayEditorErrorAtContent(`The Editor only allows content up to ${config.MAX_NUMBER_LINES} Lines! (Because of performance reasons)`);
} else if (numberCharacters > config.MAX_NUMBER_CHARACTERS) {
if (numberCharacters > config.MAX_NUMBER_CHARACTERS + 1) {
vscode.commands.executeCommand("undo");
} else {
vscode.commands.executeCommand("deleteLeft");
}
- displayEditorErrorAtContent(`The Editor only allows content up to ${config.MAX_NUMBER_CHARACTERS} Characters!`);
+ displayEditorErrorAtContent(`The Editor only allows content up to ${config.MAX_NUMBER_CHARACTERS} Characters! (Because of performance reasons)`);
}
debouncedSave();
if (updateGraph && debounceGenGraph !== undefined) {
@@ -327,7 +327,10 @@ export let globalEditor: editor.IStandaloneCodeEditor | null;
function getInitialFm() {
- let initialFm = "features\n\tfeature1\n\t\tor\n\t\t\tfeature2\n\t\t\tfeature3\n\nconstraints\n\tfeature1";
+ let initialFm = `features
+ HelloWorld
+ optional
+ Greetings`;
const storedFm = window.localStorage.getItem("fm");
if (storedFm !== null) {
initialFm = storedFm;
diff --git a/WebSocketClient/src/uvlTutorial.ts b/WebSocketClient/src/uvlTutorial.ts
index 3721644..4216ebf 100644
--- a/WebSocketClient/src/uvlTutorial.ts
+++ b/WebSocketClient/src/uvlTutorial.ts
@@ -4,6 +4,7 @@ import IStandaloneCodeEditor = editor.IStandaloneCodeEditor;
import IIdentifiedSingleEditOperation = editor.IIdentifiedSingleEditOperation;
import {editor} from "monaco-editor";
import IStandaloneDiffEditorConstructionOptions = editor.IStandaloneDiffEditorConstructionOptions;
+import { sendGenerateGraphCommand } from "./main";
export default function initUvlTutorial(editor: editor.IStandaloneCodeEditor) {
let tutorialToggle = false;
@@ -13,13 +14,22 @@ export default function initUvlTutorial(editor: editor.IStandaloneCodeEditor) {
uvlTutorialButton.addEventListener('click', function () {
let tutorialPageCounter = 0;
tutorialToggle = !tutorialToggle;
- let mainDiv = document.getElementById("main-div");
- let splitter = document.getElementById("splitter");
+ let mainDiv = document.getElementById("third");
+ const secondPane = document.getElementById("second");
+ const thirdPane = document.getElementById("third");
if (tutorialToggle) {
- splitter!.style.width = "75%";
+ if (secondPane && thirdPane) {
+ secondPane.style.width = "50%";
+ thirdPane.style.width = "50%";
+ }
setTutorialPage(mainDiv, tutorialPageCounter);
+ sendGenerateGraphCommand();
+
} else {
- splitter!.style.width = "100%";
+ if (secondPane && thirdPane) {
+ secondPane.style.width = "100%";
+ thirdPane.style.width = "0%";
+ }
let newDiv = document.getElementById("uvl-tutorial-div");
mainDiv!.removeChild(newDiv!);
}
@@ -36,7 +46,7 @@ export default function initUvlTutorial(editor: editor.IStandaloneCodeEditor) {
mainDiv.appendChild(tutorialDiv);
let modifiedCode = tutorialContent[pageNumber].codeListing;
- let originalCode = tutorialContent[pageNumber - 1].codeListing;
+ let originalCode = pageNumber !== 0 ? tutorialContent[pageNumber - 1].codeListing : undefined;
if (modifiedCode && originalCode) {
const paragraph = document.createElement("p");
paragraph.id = "hint";
diff --git a/WebSocketClient/style/dropdown.css b/WebSocketClient/style/dropdown.css
index e85c5be..1f83e2f 100644
--- a/WebSocketClient/style/dropdown.css
+++ b/WebSocketClient/style/dropdown.css
@@ -1,6 +1,18 @@
+[data-theme="dark"] {
+ --color-bg: #1e1e1e;
+ --color-fg: #ffffff;
+ --color-hover: #222;
+}
+
+[data-theme="light"] {
+ --color-bg: #ffffff;
+ --color-fg: #1e1e1e;
+ --color-hover: #a3a3a3;
+}
+
.dropbtn {
- background-color: #1e1e1e;
- color: white;
+ background-color: var(--color-bg);
+ color: var(--color-fg);
font-size: 32px;
border: none;
padding: 0;
@@ -20,7 +32,7 @@
.dropdown-wrapper {
padding: 0 20px 5px;
& span {
- color: white;
+ color: var(--color-fg);
}
}
@@ -28,7 +40,7 @@
.dropdown-content {
display: none;
position: absolute;
- background-color: #1e1e1e;
+ background-color: var(--color-bg);
box-shadow: 0 16px 32px 0 rgba(0,0,0,0.5);
justify-content: right;
z-index: 100;
@@ -37,16 +49,16 @@
/* Links inside the dropdown */
.dropdown-content button {
- background-color: #1e1e1e;
+ background-color: var(--color-bg);
border: none;
- color: darkgrey;
+ color: var(--color-fg);
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
-.dropdown-content button:hover {background-color: #222;}
+.dropdown-content button:hover {background-color: var(--color-hover);}
/* Show the dropdown menu on hover */
.dropdown-wrapper:hover .dropdown-content {
diff --git a/WebSocketClient/style/split.css b/WebSocketClient/style/split.css
index 49352fd..00591bb 100644
--- a/WebSocketClient/style/split.css
+++ b/WebSocketClient/style/split.css
@@ -5,7 +5,7 @@
}
-#separator {
+.separator {
cursor: col-resize;
background-color: #3e3e3e;
background-image: url("data:image/svg+xml;utf8,