A color picker / slider widget for HADashboard

tjntomas · April 8, 2019, 7:48am

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"

karldonteljames · April 8, 2019, 8:01am

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.

tjntomas · April 8, 2019, 8:25am

Did you try clearing the cache?

karldonteljames · April 8, 2019, 9:23am

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.

karldonteljames · April 9, 2019, 10:46am

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.

tjntomas · April 9, 2019, 11:07am

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?

karldonteljames · April 9, 2019, 11:54am

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.

thundergreen · April 28, 2019, 2:25pm

@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

karldonteljames · May 2, 2019, 8:23pm

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

tjntomas · May 2, 2019, 9:01pm

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?

karldonteljames · May 2, 2019, 9:04pm

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.

tjntomas · May 2, 2019, 9:18pm

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.

karldonteljames · May 2, 2019, 9:19pm

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

tjntomas · May 2, 2019, 9:24pm

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.

karldonteljames · May 2, 2019, 9:27pm

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?

karldonteljames · May 2, 2019, 9:34pm

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

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

not sure if they are relevant or not…

tjntomas · May 2, 2019, 9:35pm

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>
</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>

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

karldonteljames · May 2, 2019, 9:39pm

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

tjntomas · May 2, 2019, 9:45pm

And replace swipe_light.yaml file with:

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

tjntomas · May 2, 2019, 9:48pm

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)
        }
        else
        {
            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.