Combo box on visualization

[gdimaria]

Hi, 

I would like to put a combo box on in visualization from wich I can choose a value (taken from an array, string in that case) to update a address group.

Do you have any solution?

Thank you

Peppe

[admin]

Add Custom values to control object and set Control type to "Custom value select" in Vis. parameters

[gdimaria]

Add Custom values to control object and set Control type to "Custom value select" in Vis. parameters

Sorry, I don't understand

Can you give me an example?

[Daniel]

Add Custom values to control object and set Control type to "Custom value select" in Vis. parameters

Sorry, I don't understand

Can you give me an example?

[gdimaria]

Thank you so much!

I just need the last puzzle card: how I can do the above via script? I need to:
1) read an array of string
2) create or update the display text value for every object value with each string of the array

BR

Peppe

[admin]

Can you explain what kind of task do you have? Another solution is to create html select element via Custom JavaScript.

[gdimaria]

Can you explain what kind of task do you have? Another solution is to create html select element via Custom JavaScript.

That's my script:



------

ok I can get the playlist name to play with your hints, but... I get the playlists every time with:

playlists = http://192.168.0.107/api/v1/listplaylists

which an array. So i have to update time by time the value on '32/1/19' with the elements of the array.

---

value = event.getvalue()
address = event.dst

if value then
 
 playlist = grp.getvalue('32/1/19')
 
 
 
require('socket.http')
socket.http.TIMEOUT = 5

 socket.http.request('http://192.168.0.107/api/v1/commands/?cmd=playplaylist&name='..playlist)
 os.sleep(2)

 grp.update(address, 0)
end

[admin]

You can overwrite custom values with grp.create. You will need a scheduled script to reload playlist from time to time. You will also need to put this list into storage so you can get playlist name from numeric object value in your event script.

Code:

grp.create({
  address = '32/1/1',
  enums = {
    [0] = 'Playlist 1',
    [1] = 'Playlist 2',
    [2] = 'Playlist 3'
  },
})

This will still require visualization reload in case custom values are changed.

[gdimaria]

Great!

Thank you so much.

Peppe

[gdimaria]

You can overwrite custom values with grp.create. You will need a scheduled script to reload playlist from time to time. You will also need to put this list into storage so you can get playlist name from numeric object value in your event script.

Code:

grp.create({
 address = '32/1/1',
 enums = {
   [0] = 'Playlist 1',
   [1] = 'Playlist 2',
   [2] = 'Playlist 3'
 },
})

This will still require visualization reload in case custom values are changed.

Please, can you give me the right code to require visualization reload by button clicking?

[Erwin van der Zwart]

Hi,

Here is a JS code sample to reload visu by KNX command:

Code:

$(function(){
if (typeof grp != 'undefined') {
  grp.listen('10/1/1', function(object, state) {
    var value = object.value;
    if (state == 'value') {
      if (value == true) {
        location.reload();
      }
    }
  });
}
});

BR,

Erwin

[gdimaria]

Hi,

Here is a JS code sample to reload visu by KNX command:

Code:

$(function(){
if (typeof grp != 'undefined') {
  grp.listen('10/1/1', function(object, state) {
    var value = object.value;
    if (state == 'value') {
      if (value == true) {
        location.reload();
      }
    }
  });
}
});

BR,

Erwin

Thank you!

[xxyzz]

Hi there,

Is there a way to change the appearance of the Custom Value Select? I have seen the Parameter for the Background. But for our color scheme, it would be cool if I could change the Font Color and the Fill of the cell when selected. (the Blue in the Picture should be Grey or Dark Green/ Petrol).

[admin]

You can change this via Custom CSS. Use browser Dev tools (F12) to inspect the relevant elements. It will show which properties should be changed in CSS and which CSS selectors should be used.

[xxyzz]

Cool, Thanks

it was a little tricky to figure out. The first time I messed up and I've overwritten some values i shouldn't. But I got it going with this CSS

Code:

/*Aktives Element*/
.pcontrol-dropdown-Venti .nav .active span.a {
background: #30857f;
  color: white;
}

/*Nicht Aktives Element*/
.pcontrol-dropdown-Venti .nav span.a {
background: light-grey;
  color: #30857f;
}

/*Element bei drüber fahren*/
.pcontrol-dropdown-Venti .nav .a:hover {
box-shadow:inset 0 0 0 1px #000000;
}

By adding the Additional Class just as "dropdown-Venti" I got it working. Are there any Possible issues i might face like that?

Thanks for your help as Always!

Cheers

[admin]

CSS looks good.

[khalil]

Can you explain what kind of task do you have? Another solution is to create html select element via Custom JavaScript.

Hello admin,
could you share an example of:  html select element via Custom JavaScript.
Also, is there a way to add custom values for float datatype?

[admin]

Select example:

Code:

$(function() {
  var sel = $('<select></select>')
      .css({
        position: 'absolute',
        top: '100px',
        left: '200px',
      })
      .appendTo('#plan-1')
  
  var opts = [
      { value: 1, text: 'First' },
      { value: 2, text: 'Second' },
      { value: 3, text: 'Third' },
    ]

    for (var opt of opts) {
    $('<option>')
      .attr('value', opt.value)
      .text(opt.text)
      .appendTo(sel)
  }
  
  sel.on('change', function() {
    var value = sel.val()
    console.log('selected value', value)
  })
})

Custom values are not implemented for floating point values because they don't always have an exact value.