Dahsticz - change thermostat block

[bryan241]

Hi All,

I want to change the thermostat block. Now it only reacts on + and -
When pressing the heating icon nothing happens.
I've tried to change it using custom.js, but I can't seem to get it working.
What I want to achieve is the following:
when pressing the heating icon I want to set the temperature to 18 degrees if it was set to 10.
If the heating was set to anything other than 10 degrees, I want to set the heating to 10 degrees.

The plus and minus icons should still work (and that is where the problem arrises).
I can add a click event to the whole block, but not to the heating icon itself.
I followed the sample to set a click event to the block, but how can I set a click event only on the part next to the + and - icons?

Code: Select all

function getBlock_233(block){            //change 233 to the idx of your device!
  var idx = block.idx;                   //the Dashticz id
  var device = block.device;             //The Domoticz device info
  var $mountPoint = block.$mountPoint    // The DOM entry point for this block

    $mountPoint.find('.mh')                               //Find the correct block
       .off('click')                                                         //remove any previous click handler
       .click(function() {                                        //install new click handler
          switchDevice(block, 'toggle', false);     //switch the device on click
       })
       .addClass('hover');                                             //and add the predefined hover css class

Regards,
Bryan

[bryan241]

The problem I have is (I think) with the mountpoint. I can't seem to understand that part.
I can activate the onclick event for the block, but then the onclick event for the + and - buttons are ignored.

Code: Select all

function getBlock_5857(block){            
  var idx = block.idx;                   
  var device = block.device;            
  var $mountPoint = block.$mountPoint    // The DOM entry point for this block

   var html='';
   html+='<div data-id="5857" class="mh transbg block_5857 col-xs-3 off timeout">';
   html+='<div class="col-button1">';
   html+='    <div class="up">';
   html+='        <a href="javascript:void(0)" class="btn btn-number plus" data-type="plus"';
   html+='            data-field="quant[5857]" onclick="this.blur();">';
   html+='            <em class="fas fa-plus fa-small fa-thermostat"></em>';
   html+='        </a>';
   html+='    </div>';
   html+='    <div class="down">';
   html+='        <a href="javascript:void(0)" class="btn btn-number min" data-type="minus"';
   html+='            data-field="quant[5857]" onclick="this.blur();">';
   html+='            <em class="fas fa-minus fa-small fa-thermostat"></em>';
   html+='        </a>';
   html+='    </div>';
   html+='</div>';
   html+='<div class="verwarming">';
   html+='    <div class="col-xs-2 col-icon">';
   if (device.SetPoint != '10.0'){
       html+='        <img src="img/heating.png" class="on icon">';
   } else {
       html+='        <img src="img/heating.png" class="off icon">';
   }
   html+='    </div>';
   html+='    <div class="col-xs-8 col-data right1col">';
   html+='        <strong class="title"></strong>';
   html+='        <br />';
   html+='        <span class="state">'+device.SetPoint+'°C</span>';
   html+='        <br />';
   html+='    </div>';
   html+='</div>';
   html+='</div>';
  $mountPoint.html(html);
  $mountPoint.find('.mh')                               //Find the correct block
  .addClass('hover');                                             //and add the predefined hover css class
  $mountPoint.find('.btn-number').on('click', function () {
    var type = $(this).attr('data-type');
    var input = titleAndValueSwitch(block)
      ? $mountPoint.find('.title')
      : $mountPoint.find('.state');
    var currentVal = input.text().split('°');
    currentVal = parseFloat(currentVal[0].replace(',', '.'));
    if (!isNaN(currentVal)) {
      var newValue = type === 'minus' ? currentVal - 0.5 : currentVal + 0.5;
      alert(block.min);
      if (newValue >= block.min && newValue <= block.max) {
        input.text(number_format(newValue, 1) + _TEMP_SYMBOL).trigger('change');
        switchThermostat(block, newValue);
      }
      if (newValue <= block.min) {
        $(this).attr('disabled', true);
      }
      if (newValue >= block.max) {
        $(this).attr('disabled', true);
      }
    } else {
      input.text(0);
    }
  });
  $mountPoint.find('.input-number').on('focusin', function () {
    $(this).data('oldValue', $(this).text());
  });

  $mountPoint.find('.input-number').on('change', function () {
    var minValue = block.min;
    var maxValue = block.max;
    var valueCurrent = parseFloat($(this).text());

    if (valueCurrent >= minValue) {
      $mountPoint.find(".btn-number[data-type='minus']").removeAttr('disabled');
    } else {
      $(this).val($(this).data('oldValue'));
    }
    if (valueCurrent <= maxValue) {
      $mountPoint.find(".btn-number[data-type='plus']").removeAttr('disabled');
    } else {
      $(this).val($(this).data('oldValue'));
    }
  });
  $mountPoint.find('.verwarming').click(function () {
    if (device.SetPoint != '10.0'){
        switchThermostat(block,"10");
    } else {
        switchThermostat(block,"18");
    }
  });
   return html;

}

[Lokonli]

Some nice hacking!

Can it be that the verwarming block is in front of the buttons?
In that case the onclick handler of the block will be called instead of the onclick handler of the buttons.

You may have to increase the z-index of the buttons (for instance in custom.css)

[bryan241]

I don't know what caused it, but at least I got it working

Code: Select all

function getBlock_5857(block){            //change 233 to the idx of your device!
  block.min = parseFloat(block.min || settings['setpoint_min'] || 10);
  block.max = parseFloat(block.max || settings['setpoint_max'] || 30);

  var idx = block.idx;                   //the Dashticz id
  var device = block.device;             //The Domoticz device info
  var $mountPoint = block.$mountPoint    // The DOM entry point for this block

   var html='';
   html+='<div data-id="5857" class="mh transbg block_5857 col-xs-3 off timeout">';
   html+='<div class="col-button1">';
   html+='    <div class="up">';
   html+='        <a href="javascript:void(0)" class="btn btn-number plus" data-type="plus"';
   html+='            data-field="quant[5857]" onclick="this.blur();">';
   html+='            <em class="fas fa-plus fa-small fa-thermostat"></em>';
   html+='        </a>';
   html+='    </div>';
   html+='    <div class="down">';
   html+='        <a href="javascript:void(0)" class="btn btn-number min" data-type="minus"';
   html+='            data-field="quant[5857]" onclick="this.blur();">';
   html+='            <em class="fas fa-minus fa-small fa-thermostat"></em>';
   html+='        </a>';
   html+='    </div>';
   html+='</div>';
   html+='<div class="verwarming">';
   html+='    <div class="col-xs-2 col-icon">';
   if (device.SetPoint != '10.0'){
       html+='        <img src="img/heating.png" class="on icon">';
   } else {
       html+='        <img src="img/heating.png" class="off icon">';
   }
   html+='    </div>';
   html+='    <div class="col-xs-8 col-data right1col">';
   html+='        <strong class="title"></strong>';
   html+='        <br />';
   html+='        <span class="state">'+device.SetPoint+'°C</span>';
   html+='        <br />';
   html+='    </div>';
   html+='</div>';
   html+='</div>';
  $mountPoint.html(html);
  $mountPoint.find('.mh')                               //Find the correct block
  .addClass('hover');                                             //and add the predefined hover css class
  $mountPoint.find('.btn-number').on('click', function () {
    var type = $(this).attr('data-type');
    var input = titleAndValueSwitch(block)
      ? $mountPoint.find('.title')
      : $mountPoint.find('.state');
    var currentVal = input.text().split('°');
    currentVal = parseFloat(currentVal[0].replace(',', '.'));
    if (!isNaN(currentVal)) {
      var newValue = type === 'minus' ? currentVal - 0.5 : currentVal + 0.5;
      if (newValue >= block.min && newValue <= block.max) {
        input.text(number_format(newValue, 1) + _TEMP_SYMBOL).trigger('change');
        switchThermostat(block, newValue);
      }
      if (newValue <= block.min) {
        $(this).attr('disabled', true);
      }
      if (newValue >= block.max) {
        $(this).attr('disabled', true);
      }
    } else {
      input.text(0);
    }
  });
  $mountPoint.find('.input-number').on('focusin', function () {
    $(this).data('oldValue', $(this).text());
  });

  $mountPoint.find('.input-number').on('change', function () {
    var minValue = block.min;
    var maxValue = block.max;
    var valueCurrent = parseFloat($(this).text());

    if (valueCurrent >= minValue) {
      $mountPoint.find(".btn-number[data-type='minus']").removeAttr('disabled');
    } else {
      $(this).val($(this).data('oldValue'));
    }
    if (valueCurrent <= maxValue) {
      $mountPoint.find(".btn-number[data-type='plus']").removeAttr('disabled');
    } else {
      $(this).val($(this).data('oldValue'));
    }
  });
  $mountPoint.find('.verwarming').click(function () {
    if (device.SetPoint != '10.0'){
        switchThermostat(block,"10");
    } else {
        switchThermostat(block,"18");
    }
  });
   return html;
}