Homeassistant Flair Smart Vents

Anyone else using Flair Smart Vents via Homeassistant in sharptools custom tile?

I can authorize and see all the smart vent attributes, however, the open close on tap function does not activate the vents (they stay open).
I did notice that this function acts the same in HA too, but the vents do activate when I use a 0-100 slider.

Is there a way to add a dimmer or slider to the Hero attribute?
Or
Has anyone else had success they can share?

Thanks in advance!!!

Can you share the capabilities that are reported for this device in SharpTools?

  1. Open your SharpTools.io User Page
  2. Tap the ... next to the location in question
  3. Scroll down and tap on the device in question
  4. Screenshot or copy-and-paste the Capabilities, Attributes, and Commands section

Absolutely, please see screenshot below!

Have you tried creating a Super Tile and configure the tile action to call the toggle() and toggleCoverTilt() to see if either of those do what you want?

Alternatively, you might be able to use a numeric variable and setup a rule that whenever the variable value changes, send that to the setTiltPosition() command. That way you could add the numeric variable to your dashboard directly so you would be able to change the tilt value… or create a SuperTile with several ‘presets’ where each would call the rule to set the tilt position to the relevant value.

Thanks Josh, I haven’t gotten into the variables or super tiles yet. I think I’ve got a good handle on the basics and custom tiles and themes down.
So next on my list, it appears!!!

Thanks for the input / insight.

I was also thinking of utilizing the Custom Light Dimmer by @Dinis_Carvalho and updating it with the appropriate currentTiltPosition(), setTiltPosition() commands in place of the getDimLevel(), DimLevel() commands.

Thoughts…feasible or not?

@Dinis_Carvalho - any arguments, if possible to adhere to the vent damper custom time creation?


<!-- 
README
Create a SmartThings 'Personal Access Token' with access to devices and use it
for the 'token' setting in the tile.

https://account.smartthings.com/tokens

Light dimmer created by Dinis Carvalho, inspired by Joshua's scenes tile:
https://github.com/joshualyon/custom-tile-demos/tree/main/smartthings-scenes/
-->

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{
  "schema": "0.1.0",
  "settings": [
    {"type": "STRING", "label": "Token", "name": "token"},
    {"name": "DeviceID1", "label": "Device ID 1", "type": "STRING"},
    {"name": "DeviceID2", "label": "Device ID 2", "type": "STRING"},
    {"name": "DeviceID3", "label": "Device ID 3", "type": "STRING"},
    {"name": "DeviceID4", "label": "Device ID 4", "type": "STRING"},
    {"name": "DeviceID5", "label": "Device ID 5", "type": "STRING"}
  ],
  "name": "Light Dimmer"
}
</script>
    <!-- Do not edit above -->
    
    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.css" integrity="sha512-MKxcSu/LDtbIYHBNAWUQwfB3iVoG9xeMCm32QV5hZ/9lFaQZJVaXfz9aFa0IZExWzCpm7OWvp9zq9gVip/nLMg==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <style>
    .main-content {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding-top: 10px;
    }
    .slider-wrapper {
        width: 70%;
        height: 80%;
        border-radius: 8px;
    }
    .noUi-target {
        background-color: rgb(255 255 255 / 30%);
        border: 0;
        box-shadow: none;
        backdrop-filter: blur(8px);
        border-radius: 8px;
    }
    .noUi-connect {
        background: rgb(255 255 255 / 30%);
        border-radius: 8px;
    }
    .noUi-handle {
        opacity: 0;
        width: 90px !important;
        height: 50% !important;
        margin: 0 !important;
        right: 0 !important;
    }
    
    </style>
    
    <!-- Scripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.5.1/nouislider.min.js" integrity="sha512-T5Bneq9hePRO8JR0S/0lQ7gdW+ceLThvC80UjwkMRz+8q+4DARVZ4dqKoyENC7FcYresjfJ6ubaOgIE35irf4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.sharptools.io/js/custom-tiles.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script>
    var content = document.getElementById("mainContent");
    var patToken = null;
    var devices = [];
    var baseUrl = "https://api.smartthings.com/v1/devices";
    
    function initSlider() {
        slider = document.querySelector(".slider-wrapper");
        noUiSlider.create(slider, {
            start: 0,
            connect: "lower",
            direction: 'rtl',
            orientation: 'vertical',
            range: {
                'min': 0,
                'max': 100
            }
        });  
        slider.noUiSlider.on('change', function () {  
            var value = parseInt(slider.noUiSlider.get());
                console.log("Slider changed to: " + value);
                setDimLevel(value);
        });
    }
    
    function setSlider(val) {
        slider = document.querySelector(".slider-wrapper");
        slider.noUiSlider.set(val);
    }
    
    function getDimLevel() {
        var dimLevel = 0;        
        axios.get(baseUrl + '/' + devices[0] + '/status', getAxiosConfig()).then(function(response) {
            console.log('Get dim level response status', response.status);
            if(response.data.components.main.switchLevel !== undefined) {
                dimLevel = response.data.components.main.switchLevel.level.value;
                setSlider(dimLevel);
            }
        });        
    }
        
    function setDimLevel(value) {
        var data = '{"commands": [{"component": "main", "capability": "switchLevel", "command": "setLevel", "arguments": ['+value+']}]}';
        for(var i=0; i<devices.length; i++) {
            axios.post(baseUrl + '/' + devices[i] + '/commands', data, getAxiosConfig()).then(function(response) {
                console.log('Set dim level response status', response.status);
            });
        }
    } 
    
    function getAxiosConfig(){
        return { "headers": { "Authorization": "Bearer " + patToken } }
    }
        
    stio.ready((data)=>{
        console.log("Starting Light Dimmer [shortyyy]");
        console.log("stio library is ready with token", data.settings.token);        
        if(data.settings.token == null || data.settings.DeviceID1 == null){
            console.log("Please configure the authorization token and at least 1 device");
            return;
        }
        else{            
            patToken = data.settings.token;
            for(var i=1; i<=5; i++) {
                if(data.settings["DeviceID"+i] !== null) {
                    devices.push(data.settings["DeviceID"+i]);
                }
            }
            console.log("device IDs", devices);
        }
    
        initSlider();
        getDimLevel();
        setInterval(getDimLevel, 30000);
    });
    
    
        
    </script>
    
    <!-- HTML -->
    <div class="main-content" id="mainContent">
        <div class="slider-wrapper"></div>
    </div>

That example is using the SmartThings API which is a bit more straight-forward since it’s hosted by Samsung and served over HTTPS.

Since you’re using Home Assistant, you would need to figure out how to expose the HASS REST API over HTTPS and adapt the custom tile code for that.

The approaches I mentioned above using the Super Tile and/or Variables would be much more straightforward.

1 Like

Great, thanks so much Josh!!!