A color picker / slider widget for HADashboard

No, the custom_css entries are neccesary. You need to copy the default skin from here https://github.com/home-assistant/appdaemon/tree/dev/appdaemon/assets/css/default and put in a folder in the custom_css directory. You then need to add the following to the variables.yaml file

swipe_light_title_style: $style_title
swipe_light_title2_style: $style_title2
swipe_light_widget_style: $background_style
swipe_light_level_style: "font-size: 15px;"
swipe_light_unit_style: "font-size: 10px;"
swipe_light_button_style: ""
swipe_light_slider_style: "background: rgba(100,100,100,0.5)"
swipe_light_icon_on: mdi-lightbulb
swipe_light_icon_off: mdi-lightbulb
swipe_light_icon_style_active: "font-size: 250%!important; $style_active"
swipe_light_icon_style_inactive: "font-size: 250%!important; $style_inactive"

I got that sorted thank you. I’ve got an issue where iOS9 and ie11 are not rendering the “widgets” but chrome is working fine. I’m really stumped on this now.

Did you try clearing the cache?

I have. I’ve cleared the cache, both locally on each of tablets, and cleared out the compiled folder. I removed the appdaemon docker from my unpraid install and re-added it too.

It turned out to be the custom widget, it looks like it isn’t compatible with older versions of iOS, works fine on my android panels but not my older iPad. ;( makes me a little sad great colour picker btw! I’d be happy to try and help debug it if you were interested, but I have very little css/js knowledge.

Ok, sounds a bit strange. The widget is written in pure js without any libararies etc, so it should work in older versions also. What version of iOS is your iPad running?

Thanks for getting back to me. I tested it on a couple of iPads and ie11. It worked fine in ios12 but not ios9. It also wouldn’t work in ie11.

@tjntomas I just found your awesome color picker swipe_light … I was just wondering if it would be possible to add light_effects somehow? then it would be absolutely complete :slight_smile:

@tjntomas - I’d love to start using this, how would I go about debugging for ios9? - can you help with this, or just point me in the right direction if possible, please.

Many Thanks.

I guess you would need to be able to access the javascript console of the Safari browser for your iPad to see what errors you get. I think it’s possible by connecting it to a mac laptop via cable. Have a look here: https://mattvanderpol.com/2013/08/14/how-to-debug-javascript-or-css-on-ios/.

Have you tried installing Chrome on your iPad to see if it works there?

I did try chrome yes, and it does the same thing.
It makes no difference if I have a “widget” setup as “swipe_light” or not, as soon as I put the folder “baseswipe_light” and “swipe_light.yaml” in the custom widgets all icons just go blank. it’s really odd, as it isn’t affecting android or windows devices. - just connecting my ipad to a mac now.

Good. I guess you have tried clearing the safari cache on the iPad? The widgets have a tendency to go blank of something is wrong or missing in the skin and the css can not be mapped correctly to the widgets. We could try hardcoding some of the css instead of mapping from the skin.

Thats correct, I did try clearing the cache. I’m using a 2012 mac mini, so it’s crazy slow!

Ok, since all widgets go blank, it should be a css mapping problem. Since its only 4 mappings used, we could try harcoding these in the baseswipe_light.html file. Then it would no longer depend on the skin css mappings.

I have this in my custom vairables.yaml:

swipe_light_title_style: $style_title
swipe_light_title2_style: $style_title2
swipe_light_widget_style: $background_style
swipe_light_level_style: “font-size: 15px;”
swipe_light_unit_style: “font-size: 10px;”
swipe_light_button_style: “”
swipe_light_slider_style: “background: rgba(100,100,100,0.5)”
swipe_light_icon_on: mdi-lightbulb
swipe_light_icon_off: mdi-lightbulb
swipe_light_icon_style_active: “font-size: 250%!important; $style_active”
swipe_light_icon_style_inactive: “font-size: 250%!important; $style_inactive”

should i have something in my custom css too?

in the debug console, i’m getting two errors:

https://mysite.co.uk/css/materialdesignicons.min.css.map and

not sure if they are relevant or not…

Try replacing the baseswipe_light.html with this:

<div class="bg"></div><h1 class="title">Title</h1>
<div class="click_area" id="click_area"></div>
<h1 class="cp" id="cp"></h1>
<div class="w3-modal" id="modal">
        <canvas id="picker" class="picker"></canvas>
        <div id="frame" class="frame"></div>
<h2 id="icon" class="mdi mdi-home"></i></h2>

<div id="center" class="center"></div>

<div id="swipezone" class="swipezone">
    <div id="line" class="line" >
        <div id="circle" class="circle"></div>

<div id="info"  class="info"><h1 id="text" class="text"></h1></div>

with that, iget two other errors:

syntaxerror: unexpected keyword ‘function’
(anonymous function) - application.js3899
ReferenceError: Can’t find variable: baseweather
(anonymous function) - jquery-3.1.1.min.js:2:31643

And replace swipe_light.yaml file with:

widget_type: baseswipe_light
entity: {{entity}}
    service: input_number/set_value
    entity_id: {{entity}}
    service: light/turn_on
    entity_id: {{entity}}
    service: light/turn_off
    entity_id: {{entity}}
    service: light/toggle
    entity_id: {{entity}}
  level: ""
  icon_style: ""
  icon: ""
icons: []
css: []
static_icons: []
  widget_style: ""

and, in the baseswipe_ligght.js file, find the set_view function

function set_view(self)
    return 0
        if (self.state == "on"){
            self.set_icon(self, "icon", self.icons.icon_on)
            self.set_field(self, "icon_style", self.css.icon_style_active)
            self.set_icon(self, "icon", self.icons.icon_off)
            self.set_field(self, "icon_style", self.css.icon_style_inactive)


and add the return 0 after the opening curly bracket as per above. Also comment out all swipe_light enries in your skin with a # in front of each line.
Then clear the cache and try again.