444 lines
13 KiB
Vue
444 lines
13 KiB
Vue
<!-- eslint-disable no-console
|
|
|
|
THIS FILE IS NOT WORKING
|
|
|
|
-->
|
|
<script>
|
|
import { mapActions, mapState } from 'pinia'
|
|
import { useAudioStore } from '@/stores/audio'
|
|
export default {
|
|
name: 'AdaptiveSoundscape',
|
|
components: {},
|
|
props: {},
|
|
data () {
|
|
return {
|
|
title: 'Adaptive Soundscape'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(useAudioStore, ['microphone', 'acusticCheckResult']),
|
|
audioStore () {
|
|
return useAudioStore()
|
|
}
|
|
},
|
|
watch: {},
|
|
mounted () {
|
|
this.StartButtonPressed()
|
|
},
|
|
methods: {
|
|
...mapActions(useAudioStore, ['initializeAudioContext', 'resetAudioContext']),
|
|
data: () => ({
|
|
// This object holds all state of the app
|
|
|
|
// meineReaktiveVariable: "Leon",
|
|
AlteSeite: 0,
|
|
NeueSeite: 0,
|
|
pdf: 0,
|
|
valid: true,
|
|
Vorname: '',
|
|
Nachname: '',
|
|
nameRules: [
|
|
v => !!v || 'Feld muss ausgefüllt sein'
|
|
],
|
|
Anrede: '',
|
|
Mail: '',
|
|
emailRules: [
|
|
v => !!v || 'Feld muss ausgefüllt sein',
|
|
v => /.+@.+\..+/.test(v) || 'Eingabe ungültig'
|
|
],
|
|
Firma: '',
|
|
Raum: '',
|
|
Zusatzinfos: '',
|
|
|
|
date: {},
|
|
time: {},
|
|
|
|
Timeframe: 250,
|
|
UpperPercentile: 0.9,
|
|
LowerPercentile: 0.1,
|
|
LimitA: 2.5,
|
|
LimitB: 10.0,
|
|
|
|
audioCtx: {},
|
|
source: {},
|
|
audiodevices: {},
|
|
|
|
Gain: {},
|
|
HPF: {},
|
|
LPF: {},
|
|
analyser: {},
|
|
LevelAnalyser: {},
|
|
LevelBuffer: {},
|
|
|
|
AnimationID: {},
|
|
id: {},
|
|
|
|
bufferLength: {},
|
|
dataArray: {},
|
|
RecentRMS: 0,
|
|
ByteToDecimal: 0,
|
|
RecentLevelValue: 0,
|
|
|
|
ArrayCounter: 0,
|
|
LevelValues: [],
|
|
CummulatedLevelValues: 0,
|
|
SortedArray: [],
|
|
IndexMax: {},
|
|
IndexMin: {},
|
|
PercentileValue: {},
|
|
|
|
height: 0,
|
|
value: 1,
|
|
secondsDown: 25,
|
|
|
|
Result: {},
|
|
ResultABC: {},
|
|
|
|
MicError: 0
|
|
|
|
}),
|
|
|
|
computed: {
|
|
// Computed properties (state derived from data properties)
|
|
},
|
|
methods: {
|
|
// Write your own functions that mutate data via `this.`
|
|
|
|
goto (refName) {
|
|
const element = this.$refs[refName]
|
|
const top = element.offsetTop
|
|
|
|
window.scrollTo(0, top)
|
|
},
|
|
|
|
nextPage () {
|
|
// this.seite = (this.seite + 1) % 3;
|
|
this.AlteSeite = this.NeueSeite
|
|
this.NeueSeite = (this.NeueSeite + 1)
|
|
},
|
|
firstPage () {
|
|
this.AlteSeite = this.NeueSeite
|
|
this.NeueSeite = 0
|
|
},
|
|
previousPage () {
|
|
this.NeueSeite = this.AlteSeite
|
|
this.AlteSeite = (this.AlteSeite - 1)
|
|
this.pdf = 0
|
|
},
|
|
|
|
pdfForm () {
|
|
this.pdf = 1
|
|
},
|
|
|
|
about () {
|
|
this.AlteSeite = this.NeueSeite
|
|
this.NeueSeite = 10
|
|
},
|
|
|
|
hyperImprint () {
|
|
// window.open("https://dsi.informationssicherheit.fraunhofer.de/de/impressum/www.akustik-check.de/full","_blank");
|
|
this.AlteSeite = this.NeueSeite
|
|
this.NeueSeite = 11
|
|
},
|
|
|
|
hyperDataprotection () {
|
|
// window.open("https://dsi.informationssicherheit.fraunhofer.de/de/dsi/www.akustik-check.de/full","_blank");
|
|
this.AlteSeite = this.NeueSeite
|
|
this.NeueSeite = 12
|
|
},
|
|
|
|
hyperBueroinfos () {
|
|
window.open('https://www.youtube.com/watch?v=yAY1Gr5tcpw', '_blank')
|
|
},
|
|
|
|
hyperBI () {
|
|
window.open('http://www.buero-initiative.de/', '_blank')
|
|
},
|
|
|
|
ResetLevelValues () {
|
|
this.ArrayCounter = 0
|
|
this.LevelValues = []
|
|
},
|
|
|
|
RMStoDBFS (InputArray) {
|
|
for (let i = 0; i < InputArray.length; i++) {
|
|
InputArray[i] = 20 * Math.log10(InputArray[i])
|
|
}
|
|
},
|
|
|
|
numSort (a, b) {
|
|
return (a - b)
|
|
},
|
|
|
|
Percentile (InputArray) {
|
|
this.SortedArray = InputArray.sort(vm.numSort)
|
|
vm.RMStoDBFS(this.SortedArray)
|
|
// useNuxtApp().$logger.log('Sortiertes Array DBFS: ' + SortedArray);
|
|
|
|
this.IndexMax = Math.round(this.SortedArray.length * this.UpperPercentile)
|
|
this.IndexMin = Math.round(this.SortedArray.length * this.LowerPercentile)
|
|
this.PercentileValue = this.SortedArray[this.IndexMax] - this.SortedArray[this.IndexMin]
|
|
this.PercentileValue = this.PercentileValue.toFixed(2) // nach zwei Dazimalstellen abbrechen
|
|
// useNuxtApp().$logger.log('percentile Value = ' + this.PercentileValue)
|
|
|
|
if (this.PercentileValue < this.LimitA) {
|
|
this.Result = 1
|
|
this.ResultABC = 'A'
|
|
this.acusticCheckResult = 1
|
|
} else if (this.PercentileValue < this.LimitB) {
|
|
this.Result = 2
|
|
this.ResultABC = 'B'
|
|
this.acusticCheckResult = 2
|
|
} else {
|
|
this.Result = 3
|
|
this.ResultABC = 'C'
|
|
this.acusticCheckResult = 3
|
|
}
|
|
// useNuxtApp().$logger.log('seite = ' + this.seite);
|
|
|
|
this.NeueSeite = 4
|
|
vm.ResetLevelValues()
|
|
},
|
|
|
|
stopAudioStream () {
|
|
audiotracks.forEach((track) => {
|
|
track.stop()
|
|
})
|
|
// useNuxtApp().$logger.log('Audiostream stopped.')
|
|
},
|
|
|
|
stopmeasurement () {
|
|
window.cancelAnimationFrame(this.AnimationID)
|
|
clearInterval(this.id)
|
|
// useNuxtApp().$logger.log('Measurement stopped.')
|
|
|
|
// stream.getTracks().forEach(function(track) {
|
|
// rack.stop();
|
|
// });
|
|
|
|
this.height = 0
|
|
this.secondsDown = 25
|
|
this.CummulatedLevelValues = 0
|
|
|
|
if (this.MicError === 0) {
|
|
vm.stopAudioStream()
|
|
}
|
|
},
|
|
|
|
frame () {
|
|
if (this.height === 100) {
|
|
vm.stopmeasurement()
|
|
vm.Percentile(this.LevelValues)
|
|
} else {
|
|
this.height++
|
|
this.value = this.height + 2
|
|
// useNuxtApp().$logger.log(this.height);
|
|
if (this.height % 4 === 0) {
|
|
this.secondsDown = 25 - (this.height / 4)
|
|
}
|
|
}
|
|
},
|
|
|
|
startmeasurement () {
|
|
// vm.visualize();
|
|
vm.ResetLevelValues()
|
|
|
|
const today = new Date()
|
|
this.date = today.getDate() + '.' + (today.getMonth() + 1) + '.' + today.getFullYear()
|
|
this.time = today.getHours() + ':' + (today.getMinutes() < 10 ? '0' : '') + today.getMinutes()
|
|
// requestAnimationFrame(vm.RecentLevel);
|
|
this.height = 0
|
|
requestAnimationFrame(vm.RecentLevel)
|
|
this.id = setInterval(vm.frame, this.Timeframe)
|
|
// vm.frame();
|
|
},
|
|
|
|
CancleMeasurement () {
|
|
vm.previousPage()
|
|
this.MicError = 0
|
|
},
|
|
|
|
// RMS Value
|
|
RecentLevel () {
|
|
self.LevelAnalyser.getByteTimeDomainData(self.LevelBuffer)
|
|
|
|
for (let i = 0; i < 512; i++) {
|
|
this.ByteToDecimal = (self.LevelBuffer[i] - 128) / 128
|
|
// useNuxtApp().$logger.log("LevelBuffer i = "+ self.LevelBuffer[i]);
|
|
this.RecentRMS += this.ByteToDecimal * this.ByteToDecimal
|
|
};
|
|
this.RecentRMS /= 512
|
|
this.RecentLevelValue = Math.sqrt(this.RecentRMS)
|
|
|
|
this.LevelValues[this.ArrayCounter] = this.RecentLevelValue
|
|
|
|
this.CummulatedLevelValues = this.CummulatedLevelValues + this.RecentLevelValue * 1000
|
|
|
|
if (this.ArrayCounter > 200 && this.CummulatedLevelValues < 50) {
|
|
this.MicError = 1
|
|
// clearInterval(this.id);
|
|
vm.stopmeasurement()
|
|
} else if (Object.isNaN(this.RecentLevelValue)) {
|
|
this.MicError = 1
|
|
// clearInterval(this.id);
|
|
vm.stopmeasurement()
|
|
} else if (this.RecentLevelValue > 0.7) {
|
|
this.MicError = 2
|
|
// clearInterval(this.id);
|
|
vm.stopmeasurement()
|
|
} else {
|
|
++this.ArrayCounter
|
|
this.AnimationID = requestAnimationFrame(vm.RecentLevel)
|
|
}
|
|
},
|
|
|
|
savePDF () {
|
|
// eslint-disable-next-line new-cap
|
|
const doc = new jspdf.jsPDF()
|
|
let Perzentil = '0'
|
|
if (this.PercentileValue > 3) {
|
|
Perzentil = ((this.PercentileValue - 3).toFixed(2)).toString()
|
|
};
|
|
|
|
const img1 = new Image()
|
|
img1.src = 'img/ibp.925e79d4.png'
|
|
doc.addImage(img1, 'png', 20, 10, 50, 15)
|
|
|
|
doc.setFontSize(24)
|
|
doc.setTextColor('#1f82c0')
|
|
doc.textWithLink('Büro-Akustik Check', 20, 45, { url: 'https://www.youtube.com/watch?v=yAY1Gr5tcpw' })
|
|
|
|
doc.setFontSize(16)
|
|
doc.setTextColor('gray')
|
|
doc.text('Auswertung der Messung am ' + this.date + ' um ' + this.time + ' Uhr:', 20, 60)
|
|
|
|
const img2 = new Image()
|
|
img2.src = 'img/Result_' + this.ResultABC + '.png'
|
|
doc.addImage(img2, 'png', 20, 70, 170, 80)
|
|
|
|
doc.setLineWidth(0.5)
|
|
doc.setDrawColor('gray')
|
|
doc.line(20, 170, 190, 170)
|
|
|
|
doc.setFontSize(11)
|
|
doc.text('Gemessene akustische Qualität (kontaktieren Sie uns für weitere Informationen über diesen Wert):', 20, 180)
|
|
doc.text('Messung durchgeführt von:', 20, 195)
|
|
doc.text('Mailadresse:', 20, 210)
|
|
doc.text('Firma:', 20, 225)
|
|
doc.text('Raumbezeichnung:', 20, 240)
|
|
doc.text('Zusatzinfos:', 20, 255)
|
|
|
|
doc.setTextColor('black')
|
|
doc.text(Perzentil, 20, 185)
|
|
doc.text(this.Anrede + this.Vorname + ' ' + this.Nachname, 20, 200)
|
|
doc.text(this.Mail, 20, 215)
|
|
doc.text(this.Firma, 20, 230)
|
|
doc.text(this.Raum, 20, 245)
|
|
|
|
if (this.Zusatzinfos === '') {
|
|
doc.text('-', 20, 260)
|
|
} else { doc.text(this.Zusatzinfos, 20, 260) };
|
|
|
|
doc.text('Sie sind unzufrieden mit der Akustik an Ihrem Arbeitsplatz? Wir optimieren Ihr Büro menschzentriert.', 20, 275)
|
|
doc.setTextColor('#1f82c0')
|
|
doc.textWithLink('Kontaktieren Sie uns unter kognitive-ergonomie@ibp.fraunhofer.de', 20, 280, { url: 'mailto:kognitive-ergonomie@ibp.fraunhofer.de' })
|
|
|
|
// Speicherung lokal für User
|
|
doc.save('Auswertung_Bueroumgebung.pdf')
|
|
|
|
// PDF an Server
|
|
const blob = doc.output('blob')
|
|
const formData = new FormData()
|
|
formData.append('pdf', blob)
|
|
$.ajax('/upload.php',
|
|
{
|
|
method: 'POST',
|
|
data: formData,
|
|
processData: false,
|
|
contentType: false,
|
|
success: function (data) { useNuxtApp().$logger.log(data) },
|
|
error: function (data) { useNuxtApp().$logger.log(data) }
|
|
})
|
|
|
|
//
|
|
|
|
// location.reload();
|
|
},
|
|
|
|
audioSettings () {
|
|
navigator.mediaDevices.enumerateDevices().then((devices) => {
|
|
this.audiodevices = new Set()
|
|
devices.forEach((device) => {
|
|
// useNuxtApp().$logger.log(`${device.kind}: ${device.label} id = ${device.deviceId}`);
|
|
if (device.kind === 'audioinput') {
|
|
this.audiodevices.add(device)
|
|
};
|
|
})
|
|
|
|
// this.audiodevices.forEach((value) => {
|
|
// useNuxtApp().$logger.log(value);
|
|
// })
|
|
// useNuxtApp().$logger.log('Verfügbare Audiodevices: ', this.audiodevices)
|
|
})
|
|
|
|
this.settings = 1
|
|
},
|
|
|
|
StartButtonPressed () {
|
|
function getMedia () {
|
|
let stream = null
|
|
|
|
try {
|
|
stream = this.microphone.microphoneStream
|
|
// useNuxtApp().$logger.log('Audiostream started.')
|
|
audiotracks = stream.getTracks()
|
|
|
|
// this.audioCtx = new (window.AudioContext || window.webkitAudioContext)()
|
|
this.audioCtx = this.getContext()
|
|
// this.stream = navigator.mediaDevices.getUserMedia(constraints);
|
|
this.Gain = this.audioCtx.createGain()
|
|
this.Gain.gain.setValueAtTime(2.0, this.audioCtx.currentTime)
|
|
|
|
this.HPF = this.audioCtx.createBiquadFilter()
|
|
this.HPF.type = 'highpass'
|
|
this.HPF.frequency.value = 450
|
|
|
|
this.LPF = this.audioCtx.createBiquadFilter()
|
|
this.LPF.type = 'lowpass'
|
|
this.LPF.frequency.value = 10000
|
|
|
|
this.analyser = this.audioCtx.createAnalyser()
|
|
this.analyser.fftSize = 256
|
|
this.analyser.minDecibels = -90
|
|
this.analyser.maxDecibels = -10
|
|
this.analyser.smoothingTimeConstant = 0.9
|
|
|
|
this.LevelAnalyser = this.audioCtx.createAnalyser()
|
|
this.LevelAnalyser.fftSize = 512
|
|
this.LevelAnalyser.minDecibels = -100
|
|
this.LevelAnalyser.maxDecibels = -1
|
|
this.LevelAnalyser.smoothingTimeConstant = 0.95
|
|
this.LevelBuffer = new Uint8Array(512)
|
|
|
|
this.source = this.audioCtx.createMediaStreamSource(stream)
|
|
this.source.connect(this.Gain)
|
|
this.Gain.connect(this.HPF)
|
|
this.HPF.connect(this.LPF)
|
|
this.LPF.connect(this.analyser)
|
|
this.LPF.connect(this.LevelAnalyser)
|
|
|
|
this.FirstStart = false
|
|
|
|
setTimeout(vm.startmeasurement, 800) // short break to avoid zeros at beginning of measurement
|
|
} catch (err) {
|
|
// useNuxtApp().$logger.log('The following gUM error occured: ' + err)
|
|
}
|
|
}
|
|
getMedia(constraints)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
~/stores/audio
|