r/hugvey
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add configuration on story for 5 light fade presets, for #62

Browse source
This commit is contained in:
Ruben van de Ven 2019-07-03 18:33:31 +02:00
parent 18147c8bad
commit cd87c7a442
4 changed files with 170 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
www/css/styles.css
View file

@ -144,6 +144,8 @@ img.icon {
top: 5px; top: 5px;
left: 5px; left: 5px;
white-space: nowrap; } white-space: nowrap; }
#story #controls.hidden {
display: none; }
#story svg#graph { #story svg#graph {
width: 100%; width: 100%;
height: 100%; height: 100%;

2
www/index.html
View file

@ -74,7 +74,7 @@
</div> </div>
</div> </div>
<div id='story'> <div id='story'>
<div id="controls"> <div id="controls" :class="[{'hidden': selectedLang === null}]">
<span id="current_hv">{{selectedId}}</span> <span id="current_hv">{{selectedId}}</span>
<span id="current_lang"></span> <span id="current_lang"></span>
<div id="btn-save" class="btn">Save</div> <div id="btn-save" class="btn">Save</div>

164
www/js/hugvey_console.js
View file

@ -16,6 +16,7 @@ class Panopticon {
selectedId: null, selectedId: null,
logbook: "", logbook: "",
logbookId: null, logbookId: null,
selectedLang: null,
}, },
methods: { methods: {
time_passed: function( hugvey, property ) { time_passed: function( hugvey, property ) {
@ -214,6 +215,8 @@ class Panopticon {
} }
} }
} }
this.hugveys.selectedLang = code;
let req = new XMLHttpRequest(); let req = new XMLHttpRequest();
let graph = this.graph; let graph = this.graph;
req.addEventListener( "load", function( e ) { req.addEventListener( "load", function( e ) {
@ -1009,6 +1012,167 @@ class Graph {
}, },
'value': this.configuration.hasOwnProperty('nothing_text') ? this.configuration.nothing_text : "nothing" 'value': this.configuration.hasOwnProperty('nothing_text') ? this.configuration.nothing_text : "nothing"
}) })
),
crel('hr'),
crel('h2', 'Light setting #0'),
crel(
'label',
"Light intensity: ",
crel('input', {
'type': 'number',
'min': 0,
'max': 255,
'on': {
'change': function(e){
panopticon.graph.configuration['light0_intensity'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light0_intensity') ? this.configuration.light1_intensity : 0
})
),
crel(
'label',
"Fade time: ",
crel('input', {
'type': 'number',
'min': 1,
'max': 5,
'step': .1,
'on': {
'change': function(e){
panopticon.graph.configuration['light0_fade'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light0_fade') ? this.configuration.light0_fade: 30
})
),
crel('h2', 'Light setting #1'),
crel(
'label',
"Light intensity: ",
crel('input', {
'type': 'number',
'min': 0,
'max': 255,
'on': {
'change': function(e){
panopticon.graph.configuration['light1_intensity'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light1_intensity') ? this.configuration.light1_intensity : 150
})
),
crel(
'label',
"Fade time: ",
crel('input', {
'type': 'number',
'min': 1,
'max': 5,
'step': .1,
'on': {
'change': function(e){
panopticon.graph.configuration['light1_fade'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light1_fade') ? this.configuration.light1_fade: 10
})
),
crel('h2', 'Light setting #2'),
crel(
'label',
"Light intensity: ",
crel('input', {
'type': 'number',
'min': 0,
'max': 255,
'on': {
'change': function(e){
panopticon.graph.configuration['light2_intensity'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light2_intensity') ? this.configuration.light2_intensity : 75
})
),
crel(
'label',
"Fade time: ",
crel('input', {
'type': 'number',
'min': 1,
'max': 5,
'step': .1,
'on': {
'change': function(e){
panopticon.graph.configuration['light2_fade'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light2_fade') ? this.configuration.light2_fade: 10
})
),
crel('h2', 'Light setting #3'),
crel(
'label',
"Light intensity: ",
crel('input', {
'type': 'number',
'min': 0,
'max': 255,
'on': {
'change': function(e){
panopticon.graph.configuration['light3_intensity'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light3_intensity') ? this.configuration.light3_intensity : 150
})
),
crel(
'label',
"Fade time: ",
crel('input', {
'type': 'number',
'min': 1,
'max': 5,
'step': .1,
'on': {
'change': function(e){
panopticon.graph.configuration['light3_fade'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light3_fade') ? this.configuration.light3_fade: 10
})
),
crel('h2', 'Light setting #4'),
crel(
'label',
"Light intensity: ",
crel('input', {
'type': 'number',
'min': 0,
'max': 255,
'on': {
'change': function(e){
panopticon.graph.configuration['light4_intensity'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light4_intensity') ? this.configuration.light4_intensity : 150
})
),
crel(
'label',
"Fade time: ",
crel('input', {
'type': 'number',
'min': 1,
'max': 5,
'step': .1,
'on': {
'change': function(e){
panopticon.graph.configuration['light4_fade'] = e.target.value
}
},
'value': this.configuration.hasOwnProperty('light4_fade') ? this.configuration.light4_fade: 10
})
) )
); );

3
www/scss/styles.scss
View file

@ -239,6 +239,9 @@ img.icon{
top: 5px; top: 5px;
left: 5px; left: 5px;
white-space: nowrap; white-space: nowrap;
&.hidden{
display:none;
}
} }
svg#graph{ svg#graph{
width: 100%; width: 100%;