Logic Machine Forum
Combo box on visualization - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Visualization (https://forum.logicmachine.net/forumdisplay.php?fid=9)
+--- Thread: Combo box on visualization (/showthread.php?tid=1340)

Combo box on visualization - gdimaria - 17.04.2018

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

RE: Combo box on visualization - admin - 17.04.2018

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

RE: Combo box on visualization - gdimaria - 17.04.2018

(17.04.2018, 10:04)admin Wrote: 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?

RE: Combo box on visualization - Daniel - 17.04.2018

(17.04.2018, 10:37)gdimaria Wrote:
(17.04.2018, 10:04)admin Wrote: 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?


RE: Combo box on visualization - gdimaria - 17.04.2018

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

RE: Combo box on visualization - admin - 17.04.2018

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

RE: Combo box on visualization - gdimaria - 17.04.2018

(17.04.2018, 13:04)admin Wrote: 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

RE: Combo box on visualization - admin - 18.04.2018

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.

RE: Combo box on visualization - gdimaria - 18.04.2018

Great!

Thank you so much.

Peppe

RE: Combo box on visualization - gdimaria - 20.04.2018

(18.04.2018, 08:35)admin Wrote: 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?

RE: Combo box on visualization - Erwin van der Zwart - 20.04.2018

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

RE: Combo box on visualization - gdimaria - 23.04.2018

(20.04.2018, 12:30)Erwin van der Zwart Wrote: 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! Wink

RE: Combo box on visualization - xxyzz - 31.07.2024

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).

RE: Combo box on visualization - admin - 31.07.2024

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.

RE: Combo box on visualization - xxyzz - 02.08.2024

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

RE: Combo box on visualization - admin - 05.08.2024

CSS looks good.

RE: Combo box on visualization - khalil - 05.08.2024

(17.04.2018, 13:04)admin Wrote: 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?

RE: Combo box on visualization - admin - 06.08.2024

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.