Skip to content

Commit

Permalink
Ar component buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@heini208
heini208 authored Mar 16, 2024
2 parents e5510c2 + 19d9f39 commit 1574b58
Show file tree
Hide file tree
Showing 3 changed files with 154 additions and 38 deletions.
49 changes: 46 additions & 3 deletions frontend-vue/src/components/ar-component/ArComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,55 @@ window.addEventListener(
},
{ signal: resizeController.signal }
);
//Buttons
const toggleHand = () => {
handDisplay.toggleDisplay();
console.log('toggled hand');
};
const setHandSpacing = (spacing) => {
if (spacing.value) {
handDisplay.setSpacing(spacing.value / 100);
} else {
handDisplay.setSpacing(0.2);
}
console.log('hand spacing set to ', spacing, '%');
};
const setCardSize = (size) => {
var baseScaleX = 6.4 / 5;
var baseScaleY = 8.9 / 5;
if (size.value) {
for (const card of cardmarkers) {
card.imageElement.object3D.scale.set(
baseScaleX * (size.value / 100),
baseScaleY * (size.value / 100),
1
);
}
} else {
for (const card of cardmarkers) {
card.imageElement.object3D.scale.set(baseScaleX, baseScaleY, 1);
}
}
console.log('set card size to ', size, '%');
};
defineExpose({
toggleHand,
setHandSpacing,
setCardSize
});
//start
AFRAME.scenes.forEach((scene) => scene.removeFullScreenStyles());
// AFRAME.AScene.removeFullScreenStyles();
/**
* @type {CardMarker[]}
*/
var foundCardMarkers = [];
/**
* @type {CardMarker[]}
*/
var cardmarkers = [];
/**
* @type {Zone}
*/
Expand Down Expand Up @@ -78,7 +121,6 @@ props.conService.onConnection(() => {
}
});
generateMarkers(sceneEl);
//handDisplay.enabled = true;
}
});
}
Expand Down Expand Up @@ -173,6 +215,7 @@ function generateMarkers(sceneEl) {
if (debug) {
card.toggleDebugNumber();
}
cardmarkers.push(card);
}
}
Expand Down Expand Up @@ -248,7 +291,7 @@ onUnmounted(() => {
xr-mode-ui="enabled: false"
color-space="sRGB"
renderer="gammaOutput: true"
arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 5x5_BCH_22_7_7; debugUIEnabled: false; sourceWidth: 1280; sourceHeight: 720;"
arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 5x5_BCH_22_7_7; debugUIEnabled: false; sourceWidth:1920; sourceHeight:1080;"
>
<a-entity id="userCamera" camera> </a-entity>
</a-scene>
Expand Down
9 changes: 8 additions & 1 deletion frontend-vue/src/components/ar-component/CardDisplay.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export class CardDisplay {
* @param {number} [centerX=0] - The starting x-coordinate.
* @param {number} [startY=-0.4] - The starting y-coordinate.
* @param {Object} [scale={ x: 0.3 * 0.64, y: 0.3, z: 1 }] - The scale of the image elements.
* @param {number} [cardSpacing=0.04] - The spacing between cards.
* @param {number} [cardSpacing=0.2] - The spacing between cards.
*/
constructor(
name,
Expand All @@ -31,6 +31,13 @@ export class CardDisplay {
this.enabled = false;
}

setSpacing(spacing) {
this.cardSpacing = spacing;
if (this.enabled) {
this.refreshDisplay();
}
}

toggleDisplay() {
if (this.enabled) {
this.enabled = false;
Expand Down
134 changes: 100 additions & 34 deletions frontend-vue/src/views/GameView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,40 @@ import { ref, onUnmounted } from 'vue';
var showMenu = ref(false);
var showUsers = ref(false);
var showSettings = ref(false);
let handSpacing = ref<number | null>(null);
let cardSize = ref<number | null>(null);
let resolution = ref();
let conService = new ConnectionService();
let cardService = new CardService(conService);
const arComponentViewRef = ref();
function toggleHand() {
arComponentViewRef.value.toggleHand();
}
function setHandSpacing() {
arComponentViewRef.value.setHandSpacing(handSpacing);
}
function setCardSize() {
arComponentViewRef.value.setCardSize(cardSize);
}
function setResolution(){
arComponentViewRef.value.setResolution(resolution);
}
onUnmounted(() => {
conService.killConnection();
});
</script>

<template>
<ArComponent :card-service="cardService" :con-service="conService"></ArComponent>
<ArComponent
ref="arComponentViewRef"
:card-service="cardService"
:con-service="conService"
></ArComponent>
<div class="game-overlay">
<div id="fixed-overlay-content">
<div class="quick-info-container">
Expand All @@ -30,25 +53,44 @@ onUnmounted(() => {
</div>
<div class="preAndButtonsRow">
<div class="buttons">
<button type="button" @click="showMenu = !showMenu">
<font-awesome-icon :icon="['fas', 'bars']" />

<button type="button" @click="toggleHand" v-if="showMenu">
<font-awesome-icon :icon="['fas', 'hand']" />
</button>
<button type="button" @click="showUsers = !showUsers" v-if="showMenu">
<font-awesome-icon :icon="['fas', 'users']" />
</button>
<button type="button" v-if="showMenu">
<font-awesome-icon :icon="['fas', 'comments']" />
</button>
<button type="button" v-if="showMenu">
<font-awesome-icon :icon="['fas', 'dice-d20']" />
<button type="button" @click="showMenu = !showMenu">
<font-awesome-icon :icon="['fas', 'bars']" />
</button>
<div class="spacer" v-if="showMenu"></div>


<button type="button" @click="showSettings = !showSettings" v-if="showMenu">
<font-awesome-icon :icon="['fas', 'gear']" />
</button>
<button type="button" @click="$router.go(-1)" v-if="showMenu">
<font-awesome-icon :icon="['fas', 'arrow-right-to-bracket']" />
</button>
</div>
</div>
</div>
<div id="number-input" v-if="showSettings && showMenu">
<p>
<button class="settingsButton" @click="setCardSize">
<font-awesome-icon :icon="['fas', 'check']" />
</button>
<input type="number" v-model="cardSize" placeholder=100 ></input>
card size
</p>
<p>
<button class="settingsButton" @click="setHandSpacing">
<font-awesome-icon :icon="['fas', 'check']" />
</button>
<input type="number" v-model="handSpacing" placeholder=20></input>
hand card spacing
</p>
</div>
</div>
</template>

Expand Down Expand Up @@ -83,27 +125,16 @@ onUnmounted(() => {
display: flex;
flex-direction: row;
}
.buttons {
display: flex;
flex-direction: column;
height: 100%;
// gap: 1rem;
.spacer {
flex-grow: 2;
height: 100%;
}
}
button {
aspect-ratio: 1;
justify-content: center;
align-items: center;
border: none;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
filter: none;
padding: 0;
margin: 0;
aspect-ratio: 1;
justify-content: center;
align-items: center;
border: none;
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
filter: none;
padding: 0;
margin: 0;
svg {
padding: 8px;
font-size: 32px;
Expand All @@ -115,19 +146,54 @@ onUnmounted(() => {
}
}
}
#number-input {
input,
select{
aspect-ratio: 8;
border: none;
background-color: rgba(200, 200, 200, 0.5);
padding: 0;
margin: 0;
font-size: 16px;
margin-top: 0%;
float: right;
}
p {
}
input {
width: 20%;
border: 1px inset #ccc;
}
select {
width: 45%;
}
button {
border: none;
background-color: rgba(255, 255, 255, 0.2);
padding: 0;
margin: 0;
float: right;
cursor: pointer;
svg {
padding: 3px;
font-size: 13px;
width: 13px;
height: 13px;
}
margin-left: 2%;
}
}
}
body {
overflow: hidden;
}
video {
// position: absolute;
// left: 0;
// top: 0;
// width: 100% !important;
// height: 100% !important;
// margin: 0 !important;
border-radius: 0;
object-fit: cover;
}
Expand Down

0 comments on commit 1574b58

Please sign in to comment.