179 lines
3.4 KiB
JavaScript
179 lines
3.4 KiB
JavaScript
const scene = {
|
|
'scena 1': () => {
|
|
},
|
|
'scena 2': () => {
|
|
},
|
|
'scena 3': () => {
|
|
}
|
|
}
|
|
|
|
const parametri = [
|
|
{
|
|
napis: 'kalibriraj',
|
|
tip: 'button',
|
|
sprememba: ev => {
|
|
console.log('kalibriram')
|
|
sendAll('/ww/calibrate')
|
|
}
|
|
},
|
|
{
|
|
napis: 'fraktaliziraj',
|
|
tip: 'toggle',
|
|
sprememba: ev => {
|
|
sendAll('/ww/fraktaliziraj', [{
|
|
type: 'i',
|
|
value: ev.currentTarget.checked ? 1 : 0
|
|
}])
|
|
}
|
|
},
|
|
{
|
|
napis: 'fraktaliziraj',
|
|
tip: 'slider',
|
|
min: 100,
|
|
max: 2500,
|
|
step: 1,
|
|
value: 1200,
|
|
sprememba: ev => {
|
|
sendAll('/ww/fraktal-interval', [{
|
|
type: 'i',
|
|
value: ev.currentTarget.value
|
|
}])
|
|
}
|
|
},
|
|
{
|
|
napis: 'napihuj',
|
|
tip: 'toggle',
|
|
sprememba: ev => {
|
|
sendAll('/ww/napihuj', [{
|
|
type: 'i',
|
|
value: ev.currentTarget.checked ? 1 : 0
|
|
}])
|
|
}
|
|
},
|
|
{
|
|
napis: 'zogice',
|
|
tip: 'toggle',
|
|
sprememba: ev => {
|
|
sendAll('/ww/zogice', [{
|
|
type: 'i',
|
|
value: ev.currentTarget.checked ? 1 : 0
|
|
}])
|
|
}
|
|
},
|
|
{
|
|
napis: 'duhovi',
|
|
tip: 'toggle',
|
|
sprememba: ev => {
|
|
sendAll('/ww/kegli', [{
|
|
type: 'i',
|
|
value: ev.currentTarget.checked ? 1 : 0
|
|
}])
|
|
}
|
|
},
|
|
{
|
|
napis: 'osvezi',
|
|
tip: 'button',
|
|
sprememba: ev => {
|
|
sendAll('/ww/reload')
|
|
window.location.reload()
|
|
}
|
|
},
|
|
{
|
|
napis: 'zoom',
|
|
tip: 'slider',
|
|
min: 3,
|
|
max: 300,
|
|
value: 40,
|
|
step: 'any',
|
|
sprememba: ev => {
|
|
console.log('zoom!', ev.currentTarget.value)
|
|
sendAll('/ww/zoom', [{
|
|
type: 'f',
|
|
value: ev.currentTarget.value
|
|
}])
|
|
}
|
|
},
|
|
{
|
|
napis: 'deformiraj (po zvoku)',
|
|
tip: 'slider',
|
|
min: 0,
|
|
max: 10,
|
|
value: 0,
|
|
step: 'any',
|
|
sprememba: ev => {
|
|
sendAll('/ww/deformiraj', [{
|
|
type: 'f',
|
|
value: ev.currentTarget.value
|
|
}])
|
|
}
|
|
},
|
|
]
|
|
|
|
const Qs = s => document.querySelector(s)
|
|
const Qsa = s => document.querySelectorAll(s)
|
|
const Ce = e => document.createElement(e)
|
|
|
|
function ustvariElement(p) {
|
|
const vrstica = Ce('tr')
|
|
|
|
// Napis
|
|
const napis = Ce('td')
|
|
napis.innerHTML = p.napis
|
|
vrstica.appendChild(napis)
|
|
|
|
// Krmilnik
|
|
let krmilnik
|
|
switch (p.tip) {
|
|
|
|
case 'button':
|
|
krmilnik = Ce('button')
|
|
krmilnik.innerHTML = ' '
|
|
krmilnik.onclick = p.sprememba
|
|
break
|
|
|
|
case 'toggle':
|
|
krmilnik = Ce('input')
|
|
krmilnik.setAttribute('type', 'checkbox')
|
|
krmilnik.onchange = p.sprememba
|
|
break
|
|
|
|
case 'slider':
|
|
krmilnik = Ce('input')
|
|
krmilnik.setAttribute('type', 'range')
|
|
krmilnik.setAttribute('min', p.min)
|
|
krmilnik.setAttribute('max', p.max)
|
|
krmilnik.setAttribute('step', p.step)
|
|
krmilnik.setAttribute('value', p.value)
|
|
krmilnik.oninput = p.sprememba
|
|
break
|
|
}
|
|
|
|
const krmilnikCelica = Ce('td')
|
|
krmilnikCelica.className = "krmilnik"
|
|
krmilnikCelica.appendChild(krmilnik)
|
|
vrstica.appendChild(krmilnikCelica)
|
|
|
|
return vrstica
|
|
}
|
|
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
// Dodaj scene
|
|
const sceneTD = Qs('#scene')
|
|
Object.keys(scene).forEach(ime => {
|
|
const b = Ce('button')
|
|
b.innerHTML = ime
|
|
b.onclick = () => {
|
|
console.log('izbiram ', ime)
|
|
scene[ime]()
|
|
}
|
|
sceneTD.append(b)
|
|
})
|
|
|
|
// Dodaj gumbe
|
|
const gumbiT = Qs('#ctl')
|
|
parametri.forEach(p => {
|
|
const el = ustvariElement(p)
|
|
gumbiT.appendChild(el)
|
|
})
|
|
})
|