mirror of
https://github.com/overte-org/overte.git
synced 2025-04-10 17:22:25 +02:00
Wizard complete.
This commit is contained in:
Kalila L
parent
3e8387a866
commit
6c298063c0
9 changed files with 389 additions and 206 deletions
1
scripts/system/configWizard/.gitignore
vendored
1
scripts/system/configWizard/.gitignore
vendored
|
|
@ -1,6 +1,5 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
|
|
|
|||
BIN
scripts/system/configWizard/public/assets/1920_bar.png
Normal file
BIN
scripts/system/configWizard/public/assets/1920_bar.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
|
|
@ -8,6 +8,16 @@
|
|||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.theme--dark.v-application {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
|
|
|||
|
|
@ -1,60 +1,88 @@
|
|||
<!--
|
||||
//
|
||||
// App.vue
|
||||
//
|
||||
// Created by Kalila L. on Feb 3 2021
|
||||
// Copyright 2021 Vircadia contributors.
|
||||
//
|
||||
// Distributed under the Apache License, Version 2.0.
|
||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
//
|
||||
-->
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-app>
|
||||
<v-app-bar
|
||||
app
|
||||
color="primary"
|
||||
dark
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<v-img
|
||||
alt="Vuetify Logo"
|
||||
class="shrink mr-2"
|
||||
contain
|
||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
|
||||
transition="scale-transition"
|
||||
width="40"
|
||||
/>
|
||||
|
||||
<v-img
|
||||
alt="Vuetify Name"
|
||||
class="shrink mt-1 hidden-sm-and-down"
|
||||
contain
|
||||
min-width="100"
|
||||
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
|
||||
width="100"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<v-btn
|
||||
href="https://github.com/vuetifyjs/vuetify/releases/latest"
|
||||
target="_blank"
|
||||
text
|
||||
>
|
||||
<span class="mr-2">Latest Release</span>
|
||||
<v-icon>mdi-open-in-new</v-icon>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
<v-main>
|
||||
<HelloWorld/>
|
||||
</v-main>
|
||||
</v-app>
|
||||
<v-app>
|
||||
<v-main>
|
||||
<FirstRunWizard @send-message-to-script="sendMessageToScriptFromChild"></FirstRunWizard>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld';
|
||||
import FirstRunWizard from './components/FirstRunWizard';
|
||||
|
||||
var vue_this;
|
||||
|
||||
function browserDevelopment() {
|
||||
if (typeof EventBridge !== 'undefined') {
|
||||
return false; // We are in Vircadia.
|
||||
} else {
|
||||
return true; // We are in the browser, probably for development purposes.
|
||||
}
|
||||
}
|
||||
|
||||
if (!browserDevelopment()) {
|
||||
// eslint-disable-next-line
|
||||
EventBridge.scriptEventReceived.connect(function(receivedCommand) {
|
||||
receivedCommand = JSON.parse(receivedCommand);
|
||||
|
||||
// We route the data based on the command given.
|
||||
if (receivedCommand.command === 'command-goes-here') {
|
||||
// vue_this.method(receivedCommand.data);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
name: 'App',
|
||||
|
||||
components: {
|
||||
FirstRunWizard
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
useDarkTheme: true,
|
||||
themeColors: {}
|
||||
}),
|
||||
|
||||
methods: {
|
||||
sendMessageToScriptFromChild: function (commandAndData) {
|
||||
this.sendMessageToScript(commandAndData.command, commandAndData.data);
|
||||
},
|
||||
sendMessageToScript: function (command, data) {
|
||||
var JSONtoSend = {
|
||||
"command": command,
|
||||
"data": data
|
||||
};
|
||||
|
||||
if (!browserDevelopment()) {
|
||||
// eslint-disable-next-line
|
||||
EventBridge.emitWebEvent(JSON.stringify(JSONtoSend));
|
||||
} else {
|
||||
alert(JSON.stringify(JSONtoSend));
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
created: function () {
|
||||
vue_this = this;
|
||||
|
||||
components: {
|
||||
HelloWorld,
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
//
|
||||
}),
|
||||
this.$vuetify.theme.dark = this.useDarkTheme;
|
||||
this.sendMessageToScript('ready', '');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
275
scripts/system/configWizard/src/components/FirstRunWizard.vue
Normal file
275
scripts/system/configWizard/src/components/FirstRunWizard.vue
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
<!--
|
||||
//
|
||||
// FirstRunWizard.vue
|
||||
//
|
||||
// Created by Kalila L. on Feb 3 2021
|
||||
// Copyright 2021 Vircadia contributors.
|
||||
//
|
||||
// Distributed under the Apache License, Version 2.0.
|
||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
//
|
||||
-->
|
||||
|
||||
<template>
|
||||
<v-stepper v-model="stepperModel">
|
||||
<v-stepper-header>
|
||||
<v-stepper-step
|
||||
:complete="stepperModel > 1"
|
||||
step="1"
|
||||
>
|
||||
Welcome!
|
||||
</v-stepper-step>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-stepper-step
|
||||
:complete="stepperModel > 2"
|
||||
step="2"
|
||||
>
|
||||
Quality
|
||||
</v-stepper-step>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-stepper-step
|
||||
:complete="stepperModel > 3"
|
||||
step="3"
|
||||
>
|
||||
Performance
|
||||
</v-stepper-step>
|
||||
|
||||
<v-divider></v-divider>
|
||||
|
||||
<v-stepper-step
|
||||
:complete="stepperModel > 4"
|
||||
step="4"
|
||||
>
|
||||
Ready!
|
||||
</v-stepper-step>
|
||||
</v-stepper-header>
|
||||
|
||||
<v-stepper-items>
|
||||
<v-stepper-content step="1">
|
||||
<v-card>
|
||||
<v-img
|
||||
height="80px"
|
||||
src="/assets/1920_bar.png"
|
||||
>
|
||||
<v-card-title
|
||||
class="text-h3 font-weight-light"
|
||||
>
|
||||
Welcome to Vircadia!
|
||||
</v-card-title>
|
||||
</v-img>
|
||||
|
||||
<v-card-subtitle
|
||||
class="text-h5 font-weight-light"
|
||||
>
|
||||
Let's get you setup to experience the virtual world. <br/>
|
||||
First, we need to select some performance and graphics quality options. <br/><br/>
|
||||
Press <b style="color: white;">Continue</b> when you are ready.
|
||||
</v-card-subtitle>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="stepperModel++"
|
||||
x-large
|
||||
>
|
||||
Continue
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-stepper-content>
|
||||
|
||||
<v-stepper-content step="2">
|
||||
<v-card>
|
||||
<v-img
|
||||
height="80px"
|
||||
src="/assets/1920_bar.png"
|
||||
>
|
||||
<v-card-title
|
||||
class="text-h3 font-weight-light"
|
||||
>
|
||||
Quality
|
||||
</v-card-title>
|
||||
</v-img>
|
||||
|
||||
<v-card-text>
|
||||
<v-radio-group v-model="performancePreset">
|
||||
<template v-slot:label>
|
||||
<div class="text-h5 font-weight-light mb-5">
|
||||
What level of visual quality do you want?<br/>
|
||||
<b>Remember! If you do not have a powerful computer, you may want to set this to low or medium at most.</b>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<v-radio>
|
||||
<template v-slot:label>
|
||||
<div class="text-h5"><strong class="green--text">Low Quality</strong>; Average Laptop / Slow Computer</div>
|
||||
</template>
|
||||
</v-radio>
|
||||
<v-radio>
|
||||
<template v-slot:label>
|
||||
<div class="text-h5"><strong class="blue--text">Medium Quality</strong> Average Computer</div>
|
||||
</template>
|
||||
</v-radio>
|
||||
<v-radio>
|
||||
<template v-slot:label>
|
||||
<div class="text-h5"><strong class="red--text">High Quality</strong>; Gaming Computer</div>
|
||||
</template>
|
||||
</v-radio>
|
||||
</v-radio-group>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="stepperModel--"
|
||||
x-large
|
||||
>
|
||||
Back
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="stepperModel++"
|
||||
x-large
|
||||
>
|
||||
Continue
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-stepper-content>
|
||||
|
||||
<v-stepper-content step="3">
|
||||
<v-card>
|
||||
<v-img
|
||||
height="80px"
|
||||
src="/assets/1920_bar.png"
|
||||
>
|
||||
<v-card-title
|
||||
class="text-h3 font-weight-light"
|
||||
>
|
||||
Performance
|
||||
</v-card-title>
|
||||
</v-img>
|
||||
|
||||
<v-card-text>
|
||||
<v-radio-group v-model="refreshRateProfile">
|
||||
<template v-slot:label>
|
||||
<div class="text-h5 font-weight-light mb-5">
|
||||
Do you want a smooth experience or do you want to conserve power and resources on your computer?
|
||||
</div>
|
||||
</template>
|
||||
<v-radio>
|
||||
<template v-slot:label>
|
||||
<div class="text-h5"><strong class="green--text">Not Smooth</strong> Conserve Power</div>
|
||||
</template>
|
||||
</v-radio>
|
||||
<v-radio>
|
||||
<template v-slot:label>
|
||||
<div class="text-h5"><strong class="blue--text">Smooth</strong> Use Average Resources</div>
|
||||
</template>
|
||||
</v-radio>
|
||||
<v-radio>
|
||||
<template v-slot:label>
|
||||
<div class="text-h5"><strong class="red--text">Very Smooth</strong> Use Maximum Resources</div>
|
||||
</template>
|
||||
</v-radio>
|
||||
</v-radio-group>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="stepperModel--"
|
||||
x-large
|
||||
>
|
||||
Back
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="stepperModel++"
|
||||
x-large
|
||||
>
|
||||
Continue
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-stepper-content>
|
||||
|
||||
<v-stepper-content step="4">
|
||||
<v-card>
|
||||
<v-img
|
||||
height="80px"
|
||||
src="/assets/1920_bar.png"
|
||||
>
|
||||
<v-card-title
|
||||
class="text-h3 font-weight-light"
|
||||
>
|
||||
All done!
|
||||
</v-card-title>
|
||||
</v-img>
|
||||
|
||||
<v-card-subtitle
|
||||
class="text-h5 font-weight-light"
|
||||
>
|
||||
Now you're ready to go!<br/>
|
||||
Take a look at the controls reference after completing this wizard.<br/>
|
||||
Press <b style="color: white;">Complete</b> when you are ready.
|
||||
</v-card-subtitle>
|
||||
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="stepperModel--"
|
||||
x-large
|
||||
>
|
||||
Back
|
||||
</v-btn>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
color="green"
|
||||
@click="completeWizard"
|
||||
x-large
|
||||
>
|
||||
Complete
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-stepper-content>
|
||||
</v-stepper-items>
|
||||
</v-stepper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'FirstRunWizard',
|
||||
|
||||
methods: {
|
||||
completeWizard: function () {
|
||||
var objectToSend = {
|
||||
'command': 'complete-wizard',
|
||||
'data': {
|
||||
'performancePreset': this.performancePreset,
|
||||
'refreshRateProfile': this.refreshRateProfile
|
||||
}
|
||||
}
|
||||
|
||||
this.sendMessageToScript(objectToSend);
|
||||
},
|
||||
sendMessageToScript: function (commandAndData) {
|
||||
this.$emit('send-message-to-script', commandAndData);
|
||||
}
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
stepperModel: 1,
|
||||
performancePreset: 0,
|
||||
refreshRateProfile: 0
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,151 +0,0 @@
|
|||
<template>
|
||||
<v-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
<v-img
|
||||
:src="require('../assets/logo.svg')"
|
||||
class="my-3"
|
||||
contain
|
||||
height="200"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col class="mb-4">
|
||||
<h1 class="display-2 font-weight-bold mb-3">
|
||||
Welcome to Vuetify
|
||||
</h1>
|
||||
|
||||
<p class="subheading font-weight-regular">
|
||||
For help and collaboration with other Vuetify developers,
|
||||
<br>please join our online
|
||||
<a
|
||||
href="https://community.vuetifyjs.com"
|
||||
target="_blank"
|
||||
>Discord Community</a>
|
||||
</p>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
What's next?
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(next, i) in whatsNext"
|
||||
:key="i"
|
||||
:href="next.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ next.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Important Links
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(link, i) in importantLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="mb-5"
|
||||
cols="12"
|
||||
>
|
||||
<h2 class="headline font-weight-bold mb-3">
|
||||
Ecosystem
|
||||
</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
v-for="(eco, i) in ecosystem"
|
||||
:key="i"
|
||||
:href="eco.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
>
|
||||
{{ eco.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
|
||||
data: () => ({
|
||||
ecosystem: [
|
||||
{
|
||||
text: 'vuetify-loader',
|
||||
href: 'https://github.com/vuetifyjs/vuetify-loader',
|
||||
},
|
||||
{
|
||||
text: 'github',
|
||||
href: 'https://github.com/vuetifyjs/vuetify',
|
||||
},
|
||||
{
|
||||
text: 'awesome-vuetify',
|
||||
href: 'https://github.com/vuetifyjs/awesome-vuetify',
|
||||
},
|
||||
],
|
||||
importantLinks: [
|
||||
{
|
||||
text: 'Documentation',
|
||||
href: 'https://vuetifyjs.com',
|
||||
},
|
||||
{
|
||||
text: 'Chat',
|
||||
href: 'https://community.vuetifyjs.com',
|
||||
},
|
||||
{
|
||||
text: 'Made with Vuetify',
|
||||
href: 'https://madewithvuejs.com/vuetify',
|
||||
},
|
||||
{
|
||||
text: 'Twitter',
|
||||
href: 'https://twitter.com/vuetifyjs',
|
||||
},
|
||||
{
|
||||
text: 'Articles',
|
||||
href: 'https://medium.com/vuetify',
|
||||
},
|
||||
],
|
||||
whatsNext: [
|
||||
{
|
||||
text: 'Explore components',
|
||||
href: 'https://vuetifyjs.com/components/api-explorer',
|
||||
},
|
||||
{
|
||||
text: 'Select a layout',
|
||||
href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
|
||||
},
|
||||
{
|
||||
text: 'Frequently Asked Questions',
|
||||
href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,3 +1,13 @@
|
|||
//
|
||||
// main.js
|
||||
//
|
||||
// Created by Kalila L. on Feb 3 2021
|
||||
// Copyright 2021 Vircadia contributors.
|
||||
//
|
||||
// Distributed under the Apache License, Version 2.0.
|
||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
//
|
||||
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import vuetify from './plugins/vuetify';
|
||||
|
|
|
|||
|
|
@ -1,3 +1,13 @@
|
|||
//
|
||||
// vuetify.js
|
||||
//
|
||||
// Created by Kalila L. on Feb 3 2021
|
||||
// Copyright 2021 Vircadia contributors.
|
||||
//
|
||||
// Distributed under the Apache License, Version 2.0.
|
||||
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
||||
//
|
||||
|
||||
import Vue from 'vue';
|
||||
import Vuetify from 'vuetify/lib/framework';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
module.exports = {
|
||||
transpileDependencies: [
|
||||
'vuetify'
|
||||
]
|
||||
publicPath: "./",
|
||||
assetsDir: "./",
|
||||
transpileDependencies: [
|
||||
'vuetify'
|
||||
]
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue