Fully kiosk volume slider

[josh]

@Chris2

You said to check what my device is reporting, how do I go about doing this?

You can verify what capabilities and commands the device is reporting in SharpTools:

1. Open your SharpTools.io User Page
2. Tap the ... next to your location
3. Scroll down and tap on the device
4. Review the capabilities section (toward the top) and commands (toward the bottom)

@Chris2

I know for other actions… like clicking a button I get a message saying command sent, however, with the slider I am not seeing this message.

The Custom Tile code would have to explicitly implement that functionality which this one doesn’t.

I would recommend getting familiar with your browser’s developer tools for this kind of thing though (F12 on most modern browsers). For example, this Custom Tile logs a bunch of stuff to the console… and if there are errors, they usually show up in the console.

[just_jake]

The json payload is wrong.
This works.

{ "commands": [ { "component": "main", "capability": "audioVolume", "command": "setVolume", "arguments": [100] } ] }

[Chris2]

Thank you for the help! do you have the whole script to make it work? Im still getting a lot of errors. When I do F12 I am seeing status code 400 and
:{“code”:“ConstraintViolationError”,“message”:“The request is malformed.”,“details”:[{“code”:“PatternError”,“target”:“deviceId”,“message”:“deviceId value "RINCON_5CAAFDEF097E01400:113932966" not a properly formed GUID.”,“details”:}]}}

[Chris2]

@Chris2

<!-- 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);
            setVolLevel(value);
    });
}

function setSlider(val) {
    slider = document.querySelector(".slider-wrapper");
    slider.noUiSlider.set(val);
}

function getVolLevel() {
    var volLevel = 0;        
    axios.get(baseUrl + '/' + devices[0] + '/status', getAxiosConfig()).then(function(response) {
        console.log('Get vol level response status', response.status);
        if(response.data.components.main.volume !== undefined) {
            volLevel = response.data.components.main.volume.level.value;
            setSlider(volLevel);
        }
    });        
}
    
function setVolLevel(value) {
    var data = '{"commands": [{"component": "main", "capability": "volume", "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 vol level response status', response.status);
        });
    }
} 

function getAxiosConfig(){
    return { "headers": { "Authorization": "Bearer " + patToken } }
}
    
stio.ready((data)=>{
    console.log("Starting Volume 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();
    getVolLevel();
    setInterval(getVolLevel, 30000);
});


    
</script>

<!-- HTML -->
<div class="main-content" id="mainContent">
    <div class="slider-wrapper"></div>
</div>

So I am getting an error 401 when trying to access the smarrthings API… I have generated multiple tokens… they are all giving me the same issue… is there another step that I need to do to allow access to the API?

[just_jake]

You need to replace this.

    
    var data = '{"commands": [{"component": "main", "capability": "volume", "command": "setLevel", "arguments": ['+value+']}]}';

With this. The capability and command was wrong, and the argument was being passed as a string and not an integer.

  var data = '{ "commands": [ { "component": "main", "capability": "audioVolume", "command": "setVolume", "arguments": [+value+] } ] }';

[Chris2]

@just_jake

var data = '{ "commands": [ { "component": "main", "capability": "audioVolume", "command": "setVolume", "arguments": [+value+] } ] }';

Thank you Jake… that cleaned up some of the errors. However I am still getting the error 401 please see below:

Just to confirm… I went here (Samsung account) and generated a Token… I selected every option.

I then went here (https://graph.api.smartthings.com/) to get the Device Network Id for the sonos amp I would like to control.

Is there any step that I am missing to allow this sharptools tile to communicate with the device?

I really appreciate your help, thank you!

[josh]

The overall steps seem right, but something about your token apparently is not right. Did you double check that after you got the new token with DEVICE access, that you updated the settings within your Custom Tile instance that’s on your dashboard (eg. edited the settings of the tile that you put on a dashboard) and made sure to save them?

[Chris2]

HI Josh,
Thank you for the reply. Yes I made sure to add the new token to the Custom Tile and save it. I just generated another new token, added it to the tile, saved the tile and I am still getting the same issue. I dont know enough about all of this, but seems for whatever the reason smartthings is blocking access to the device. Is there something wrong with the way the token is being used to access the API?

[Chris2]

No its 401, so I guess something is wrong with the token?

[josh]

If you want to PM me screenshots showing how you’re creating the token and what the final token is, I can test it out.

I noticed you blacked out the renderToken, but missed redacting the token from your screenshot (which I blurred out for you), so I tried a List Devices command with that token and it’s not working which makes me think there’s something wrong with how the token is getting created or how its getting saved.

[just_jake]

How many devices are you trying to control? If it’s only 1.

In the settings remove all DeviceID settings then add back in one with the name of DeviceID.

Change the
var devices = ;
To
var deviceId = null;

Then

function getAxiosConfig(){
    return { "headers": { "Authorization": "Bearer " + patToken } }
}
    
stio.ready((data)=>{
    console.log("Starting Volume Dimmer [shortyyy]");
    console.log("stio library is ready with token", data.settings.token);        
    if(data.settings.token == null || data.settings.DeviceID == null){
        console.log("Please configure the authorization token and at least 1 device");
        return;
    }
    else{    
       deviceId = data.settings.DeviceID;
        patToken = data.settings.token;
        console.log("device ID", deviceId);
    }

    initSlider();
    getVolLevel();
    setInterval(getVolLevel, 30000);
});

[just_jake]

Can you supply the full code?

[josh]

Thanks for sending the PM. It looks like the issue is with the Device ID.

From what I can tell, the value you used looks more like a “Device Network ID” whereas we’re looking for the device ID. The device ID has the same format as the token with the dashes and everything. Personally, I find the easiest way to get it is:

1. Open your SharpTools.io User Page
2. Tap the ... next to your location
3. Scroll down and tap on your device
4. Flip the ‘Advanced’ toggle on so you can see and copy the Device ID field