diff --git a/.env b/.env index 3647169..175790b 100644 --- a/.env +++ b/.env @@ -1 +1,4 @@ -VUE_APP_DMX2WS_SERVER_URL=127.0.0.1:5214 \ No newline at end of file +VITE_APP_DMX2WS_SERVER_URL="127.0.0.1:5214" +VITE_DEV_SERVER_URL="http://localhost:5173" +VITE_STATIC_URL="" +WSC_VERSION="2.2.0-rc.6" diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..c6ac737 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,38 @@ +module.exports = { + extends: [ + 'airbnb-base', + 'eslint:recommended', + 'plugin:vue/vue3-recommended', + ], + env: { + browser: true, + node: true, + es2021: true, + }, + parserOptions: { + ecmaVersion: 'latest', + }, + rules: { + 'vue/no-mutating-props': ['error', { + shallowOnly: true, + }], + 'no-plusplus': 'off', + 'no-underscore-dangle': 'off', + 'max-classes-per-file': 'off', + 'no-constructor-return': 'off', + 'no-param-reassign': 'off', + 'no-await-in-loop': 'off', + camelcase: 'off', + }, + settings: { + 'import/resolver': { + alias: { + map: [ + ['@', './src'], + ['@root', './'], + ], + extensions: ['.js', '.vue'], + }, + }, + }, +}; diff --git a/.github/workflows/deploy.app.yaml b/.github/workflows/deploy.app.yaml new file mode 100644 index 0000000..0fd60ea --- /dev/null +++ b/.github/workflows/deploy.app.yaml @@ -0,0 +1,36 @@ +name: Deploy + +on: + push: + branches: [staging] + +permissions: + contents: read # for checkout + +jobs: + build: + runs-on: ubuntu-latest + + # This is due to change for different envs but + # as of today we only have one deployment endpoint (demo) + if: github.ref == 'refs/heads/staging' + steps: + - uses: actions/checkout@v3 + - name: Install Node.js + uses: actions/setup-node@v3 + with: + node-version: '16.x' + - name: Install npm dependencies + run: npm install + - name: Run build task + run: npm run build --if-present + - name: Deploy to Server + uses: easingthemes/ssh-deploy@main + with: + SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_PRIVATE_KEY }} + ARGS: '-rlgoDzvc -i --delete' + SOURCE: 'dist/' + REMOTE_HOST: ${{ secrets.SERVER_REMOTE_HOST }} + REMOTE_USER: ${{ secrets.SERVER_REMOTE_USER }} + TARGET: ${{ secrets.STUDIO_APP_SERVER_REMOTE_TARGET }} + EXCLUDE: '/dist/, /node_modules/' diff --git a/.github/workflows/deploy.docs.yaml b/.github/workflows/deploy.docs.yaml new file mode 100644 index 0000000..7c2b4fd --- /dev/null +++ b/.github/workflows/deploy.docs.yaml @@ -0,0 +1,36 @@ +name: Deploy + +on: + push: + branches: [master, staging] + +permissions: + contents: read # for checkout + +jobs: + build: + runs-on: ubuntu-latest + + # This is due to change for different envs but + # as of today we only have one deployment endpoint (demo) + if: github.ref == 'refs/heads/staging' + steps: + - uses: actions/checkout@v3 + - name: Install Node.js + uses: actions/setup-node@v3 + with: + node-version: '16.x' + - name: Install npm dependencies + run: npm run docs:manual:build + - name: Run build task + run: npm run build --if-present + - name: Deploy to Server + uses: easingthemes/ssh-deploy@main + with: + SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }} + ARGS: '-rlgoDzvc -i --delete' + SOURCE: './docs/manual/.vitepress/dist/' + REMOTE_HOST: ${{ secrets.REMOTE_HOST }} + REMOTE_USER: ${{ secrets.REMOTE_USER }} + TARGET: ${{ secrets.REMOTE_TARGET }} + EXCLUDE: '/dist/, /node_modules/' diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml new file mode 100644 index 0000000..93bd122 --- /dev/null +++ b/.github/workflows/release.yaml @@ -0,0 +1,29 @@ +name: Release + +on: + push: + branches: [ master, staging ] + +permissions: + contents: read # for checkout + +jobs: + release: + name: Release + runs-on: ubuntu-latest + permissions: + contents: write # to be able to publish a GitHub release + id-token: write # to enable use of OIDC for npm provenance + steps: + - name: Checkout + uses: actions/checkout@v3 + with: + fetch-depth: 0 + - name: Setup Node.js + uses: actions/setup-node@v3 + with: + node-version: "lts/*" + - name: Release + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: npx semantic-release diff --git a/.gitignore b/.gitignore index 9306b29..837eaa7 100644 --- a/.gitignore +++ b/.gitignore @@ -21,5 +21,13 @@ yarn-error.log* *.sln *.sw? +# Electron output +/out + #Electron-builder output -/dist_electron \ No newline at end of file +/dist_electron + +# Vitepress +**/.vitepress/cache + +**/bin/ diff --git a/README.md b/README.md index 0b3b148..8ed423b 100644 --- a/README.md +++ b/README.md @@ -1,86 +1,88 @@ -[![MadeWithVueJs.com shield](https://madewithvuejs.com/storage/repo-shields/4381-shield.svg)](https://madewithvuejs.com/p/asls-studio/shield-link) -# What is ASLS Studio +

+ ASLS Studio logo +

Open source, web-based, show control software and visualizer

+

-[ASLS Studio](https://studio.asls.timekadel.com) is an open-source, web-based, DMX lighting control software and visualizer. +

+ + MadeWithVueJs.com shield + + + License + + + + Version + +

-> **Warning:** -The current distribution of ASLS Studio is in alpha status. Listed features are provided as-is, without any guarantee. Please report any issue over the project's repository. +## Overview +ASLS Studio is currently in beta version and available for download through its GitHub repository. This guide will help you set up ASLS Studio on your machine. -## Motivation +> **Warning**: ASLS Studio is in early beta phase. Features are provided as-is, without guarantees. Please report any issues on the project's repository. -Part of ASLS (Autonomous Stage Lighting Systems) development, it was originally created to offer ways to program ASLS DMX nodes on the fly through a simple web-browser. Following the end of the project, it was decided to release the project as an open-source, free to use platform for anyone to enjoy. +Full software documentation is available at [studio.asls.io](https://studio.asls.timekadel.com). -## Features +## System Requirements -ASLS Studio comes with standard DMX lighting control software features such as Universe patching, Fixture grouping, Scene generation, Effect engines, Show Emulation and much more. The following manual aims to guide you through each individual feature. - - -# Installation - -The alpha version of ASLS Studio is presently available to download through it's [repository](https://github.com/ASLS-org/studio.git). An executable version of the software should be released during beta state. -This section will help you download and setup ASLS Studio on your machine. +### Hardware +- RAM: 4GB minimum (8GB or more recommended) +- Graphics: Integrated graphics with WebGL 1.0 / WebGL 2.0 support (Dedicated GPU recommended) -> **Warning:** -The current distribution of ASLS Studio is in alpha status. Listed features are provided as-is, without any guarantee. Please report any issue over the project's repository. +### Software +- Operating System: Any OS supporting the required software +- Node.js: v16.15.1 or higher +- Browser: Latest version of Chrome, Firefox, or Opera -## Requirements +## Installation Process -> **Info:** -As of today, there is no **"user-friendly"** installation script available to download. It is recommended to users that might not be familiar with [Git](https://git-scm.com/)/[GitHub](https://github.com/) and [Node.js](https://nodejs.org/en/) to read a bit about these tools before proceeding with the next steps. +1. **Clone the Repository** -In order for ASLS Studio to run on your machine, please make sure that you meet the following minimum system specifications: + Open a terminal and navigate to your desired installation directory. Then run: -### Hardware + ``` + git clone https://github.com/ASLS-org/studio + ``` -- 4GB of RAM (8GB or more recommended) -- Integrated graphics with WebGL 1.0 / WebGL 2.0 support (A dedicated GPU is recommended) +2. **Navigate to Project Directory** -### Software -- [Node.js](https://nodejs.org/en/) v16.15.1 or upper -- Latest version of one of the following browsers: [Chrome](https://www.google.com/chrome/), [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Opera](https://www.opera.com/download) - + ``` + cd studio + ``` -## Download and install +3. **Install Dependencies** -Browse to the path of your choice and run the following command from a terminal: + ``` + npm install + ``` -``` -$ git clone https://github.com/ASLS-org/studio.git -``` +## Running ASLS Studio -Get to the project's root. -``` -$ cd studio -``` +### Local Development Server -Install package dependencies. -``` -$ npm install -``` +To start ASLS Studio on a local development server: -## Start Environment locally +1. Run the following command: -Serve ASLS Studio in the local server. -``` -$ npm run serve -``` + ``` + npm start + ``` -ASLS Studio will start a server at http://localhost:4515. Simply browse to the following URL using your favorite browser to be prompted with ASLS Studio's user interface. +2. Open your browser and navigate to [http://localhost:5173](http://localhost:5173) -## Build For Production +### Production Build -Build ASLS Studio from source. +To create a production build: -``` -$ npm run build -``` +1. Run the build command: -Built files will be located over the local `./dist` folder located at project root. + ``` + npm run build + ``` -# Getting Started +2. Locate the built files in the `./dist` folder at the project root. -Please refer to [ASLS Studio's manual](https://studio.asls.timekadel.com) for an in-depth guide on how to use this tool. +## Troubleshooting -> **Warning:** -Please note that this is an early alpha version. Documentation is still in progress. It will be updated following the next releases. +If you encounter any issues during installation or usage, please report them on the [ASLS Studio GitHub repository](https://github.com/ASLS-org/studio/issues). diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index e955840..0000000 --- a/babel.config.js +++ /dev/null @@ -1,5 +0,0 @@ -module.exports = { - presets: [ - '@vue/cli-plugin-babel/preset' - ] -} diff --git a/docs/developer/ui/.storybook/main.js b/docs/developer/ui/.storybook/main.js index 5f16435..86b4b87 100644 --- a/docs/developer/ui/.storybook/main.js +++ b/docs/developer/ui/.storybook/main.js @@ -1,4 +1,4 @@ -const path = require('path'); +import * as path from 'path' module.exports = { "addons": [ diff --git a/docs/developer/ui/.storybook/preview.js b/docs/developer/ui/.storybook/preview.js index 91f5b5a..d5180dd 100644 --- a/docs/developer/ui/.storybook/preview.js +++ b/docs/developer/ui/.storybook/preview.js @@ -5,7 +5,7 @@ import uikit from '@/views/components/uikit/' import {storiesOf} from '@storybook/vue'; import { action } from '@storybook/addon-actions' import theme from './theme.asls.js' -const { parse } = require('comment-parser/lib') +import { parse } from 'comment-parser/lib' /** diff --git a/docs/manual/.vitepress/config.js b/docs/manual/.vitepress/config.js index 6af64db..51497a1 100644 --- a/docs/manual/.vitepress/config.js +++ b/docs/manual/.vitepress/config.js @@ -2,16 +2,17 @@ export default { title: "ASLS Studio", description: "Open-source, web-based DMX lighting control software.", head:[ - ['link', { rel: "icon", type: "image/png", sizes: "32x32", href: "/asls-logo.png"}], + ['link', { rel: "icon", type: "image/png", sizes: "32x32", href: "/studio_standalone_logo.png"}], ], themeConfig: { siteTitle: "ASLS Studio", - algolia: { - apiKey: '535c62495650c876ca7413debb4491ff', - indexName: 'ASLS', - appId: '1L7RJIJ77A' + search:{ + provider: 'local', }, - logo: '/asls-logo.png', + socialLinks: [ + { icon: 'github', link: 'https://github.com/asls-org/studio' }, + ], + logo: '/studio_standalone_logo.png', nav: [{ text: 'User Manual', link: '/introduction/' @@ -101,11 +102,11 @@ export default { }, footer: { message: "ASLS Studio - Released under the GPLv3 License", - copyright: "Copyright (C) 2021-present Timé Kadel." + copyright: `Copyright (©) 2021-${new Date().getFullYear()} Timé Kadel.` }, markdown: { // theme: 'material-palenight' toc: "every" } } -} \ No newline at end of file +} diff --git a/docs/manual/.vitepress/theme/custom.css b/docs/manual/.vitepress/theme/custom.css index 698b2b8..1a974c5 100644 --- a/docs/manual/.vitepress/theme/custom.css +++ b/docs/manual/.vitepress/theme/custom.css @@ -1,51 +1,15 @@ :root { - --vp-c-brand: #646cff; - --vp-c-brand-light: #747bff; - --vp-c-brand-lighter: #8b91ff; - --vp-c-brand-dark: #646cff; - --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe, #41d1ff); - --primary-dark: #0C0E0A; - --primary-dark-alt: #131510; - --primary-light: #161913; - --primary-light-alt: #1c1f18; - --primary-lighter: #2e302b4d; - --primary-lighter-alt: #22251f; - - - --test: #343434; - - --some: #0b0b0b52; - - --secondary-lighter: #FFFFFFB3; - --secondary-light: #FFFFFF33; - --secondary-dark: #FFFFFF1A; - --secondary-darker: #FFFFFF0D; - - --accent-red: #B4475B; - --accent-yellow: #B2B447; - --accent-green: #49B447; - --accent-blue: #4786B4; -} - -[data-theme="light"] { - --primary-dark: #a8a7a7; - --primary-dark-alt: #eceaef; - --primary-light: #e9e6ec; - --primary-light-alt: #e3e0e7; - --primary-lighter: #d1cfd44d; - --primary-lighter-alt: var(--primary-light); - - - --some: #f4f4f452; - - --secondary-lighter: #000000B3; - --secondary-light: #00000033; - --secondary-dark: #0000001A; - --secondary-darker: #0000001D; + --vp-home-hero-image-background-image: linear-gradient(-45deg, #A45BC9 50%, #5A71D3 50%); + --vp-home-hero-image-filter: blur(90px); + --vp-home-hero-name-background: linear-gradient(-45deg, #A45BC9, #5A71D3); + --vp-home-hero-name-color: transparent; + --vp-c-brand-1:hsl(229, 58%, 59%);/*#8F5BC9;*/ + --vp-c-brand-2:#A45BC9;/*#7760B6*/ + --vp-c-brand-3:hwb(229 35% 17%); } @media (min-width: 960px) { -div.VPHome div.VPHomeHero div.VPHero.has-image div.container div.image div.image-container img.image-src{ - max-width: 450px!important; + div.VPHome div.VPHomeHero div.VPHero.has-image div.container div.image div.image-container img.image-src{ + max-width: 450px!important; + } } -} \ No newline at end of file diff --git a/docs/manual/.vitepress/theme/global.css b/docs/manual/.vitepress/theme/global.css index 9b05e2d..c953b68 100644 --- a/docs/manual/.vitepress/theme/global.css +++ b/docs/manual/.vitepress/theme/global.css @@ -15,7 +15,7 @@ --primary-light-alt: #1c1f18; --primary-lighter: #2e302b4d; --primary-lighter-alt: #22251f; - + --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%); /** * @colorTheme dark * @swatch Secondary diff --git a/docs/manual/.vitepress/theme/index.js b/docs/manual/.vitepress/theme/index.js index a9d997c..9e8392b 100644 --- a/docs/manual/.vitepress/theme/index.js +++ b/docs/manual/.vitepress/theme/index.js @@ -1,16 +1,24 @@ import DefaultTheme from 'vitepress/theme' -// import './fonts.css' -// import './global.css' import './custom.css' +import uikit from '../../../../src/views/components/uikit'; +// TODO: find a way to prevent css overrides. (import ui-kit build ?) +// import '../../../../src/assets/styles/global.css'; +// import '../../../../src/assets/styles/fonts.css'; -const components = import.meta.globEager('./components/**/*.vue') - +function registerComponents(components, app) { + Object.keys(components).forEach((componentKey) => { + const component = components[componentKey]; + if (component.name) { + app.component(component.name, component); + } else { + registerComponents(component, app); + } + }); +} export default { ...DefaultTheme, enhanceApp({ app }) { - Object.entries(components).forEach(([_, definition]) => { - app.component(definition.default.name, definition.default) - }) + registerComponents(uikit, app); } -} \ No newline at end of file +} diff --git a/docs/manual/index.md b/docs/manual/index.md index 8566604..ce8c03b 100644 --- a/docs/manual/index.md +++ b/docs/manual/index.md @@ -5,14 +5,16 @@ hero: text: Open-source, web-based DMX lighting control software. tagline: Learn how to use ASLS studio today ! image: - src: /hero.png + dark: /studio_standalone_logo.png + light: /studio_standalone_logo_dark.png + alt: ASLS Studio actions: - theme: brand text: User Manual link: /introduction/ - theme: alt - text: Developer Resources - link: "https://dev.studio.asls.timekadel.com" + text: View on GitHub + link: "https://github.com/asls-org/studio" features: - icon: 🌎 title: One show file to rule them all @@ -24,3 +26,5 @@ features: title: Visualize details: Get a preview of the show you're programming thanks to ASLS's WebGL based light-rendering engine. --- + + diff --git a/docs/manual/introduction/index.md b/docs/manual/introduction/index.md index 26cef18..f1aabe0 100644 --- a/docs/manual/introduction/index.md +++ b/docs/manual/introduction/index.md @@ -1,17 +1,30 @@ # What is ASLS Studio -[ASLS Studio](https://demo.studio.asls.timekadel.com) is an open-source, web-based, DMX lighting control software and visualizer. +[ASLS Studio](https://asls.io/studio) is a powerful open-source, web-based, DMX lighting control software and visualizer. It comes with standard DMX lighting control software features such as Universe patching, Fixture grouping, Scene generation, Effect engines and much more. -