floorplan里设置门旋转的动画

killadm

咸味土豆 发表于 2018-3-22 11:09
底图风格不错，喜欢，谢谢了。

可以看看这个
https://github.com/CCOSTAN/Home-AssistantConfig

咸味土豆

killadm 发表于 2018-3-22 18:19
可以看看这个
https://github.com/CCOSTAN/Home-AssistantConfig

我还没这么进阶啊，先弄个不花哨的界面出来，今天折腾了一天，还在重新布局。
以前的不好看，现在有了个思路（也是借鉴你们这些默默在玩的高人），多谢给我的启发和指导。

咸味土豆

killadm 发表于 2018-3-13 01:01
floorplan.yaml
[code]  - name: Doors
    entities:

你好，还得请教一下，我想实现一个图标原地闪动的效果，能告诉我怎么写么？

killadm

咸味土豆 发表于 2018-3-23 15:39
你好，还得请教一下，我想实现一个图标原地闪动的效果，能告诉我怎么写么？ ...

我弄的还没你弄的完整
试试这个

@-webkit-keyframes twinkling {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

.on {
  -webkit-animation: twinkling 1s infinite ease-in-out;
}

复制代码

opacity：透明度
twinkling 1s：闪烁的间隔时间
ease-in-out：闪烁的方式：

ease    规定慢速开始，然后变快，然后慢速结束的过渡效果。   
ease-in    规定以慢速开始的过渡效果。   
ease-out    规定以慢速结束的过渡效果。   
ease-in-out    规定以慢速开始和结束的过渡效果。   

                    
                                    


、

咸味土豆

killadm 发表于 2018-3-23 19:36
我弄的还没你弄的完整
试试这个

我想的比较多，结果发现很多简单的东西又要去学，css又是门学问，你写的那些应该是更进阶的。

感觉这个Floorplan其实利用率不高，但是又很喜欢这个直观的界面，appdaemon实在是欣赏不起，太丑了。

您说得这个回头我再试一试，目前简单的红外探测的显示都遇到难题了，先研究一下怎么解决，实在不行就将就了。

谢谢，

killadm

咸味土豆 发表于 2018-3-23 20:01
我想的比较多，结果发现很多简单的东西又要去学，css又是门学问，你写的那些应该是更进阶的。

感觉这个F ...

看到老外都是用kindle fire 7平板放门口做中控面板，不过kindle fire性能太弱，据说显示这些CSS动画都会特别卡，我还没找到合适的平板，所以暂时弃坑。
运动传感器跟其他的是一样的，我没做闪烁，只是有个状态切换逐渐显隐的效果。

floorplan.yaml

  - name: motionsensors
    entities:
       - binary_sensor.motion_sensor_1
       - binary_sensor.motion_sensor_2
       - binary_sensor.motion_sensor_3
    states:
      - state: 'on'
        class: 'motion-on'
      - state: 'off'
        class: 'motion-off'
    state_transitions:
      - name: On to off
        from_state: 'on'
        to_state: 'off'
        duration: 2
      - name: Off to on
        from_state: 'off'
        to_state: 'on'
        duration: 1

复制代码

floorplan.css

.motion-off {
  fill: #5b5b5b !important;
 }
.motion-on {
  fill: #bdf271 !important;
}

复制代码

你做闪烁可以删掉 state_transitions:后边的部分
修改css为（没在家，未测试）

@-webkit-keyframes twinkling {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

.motion-on {
  fill: #bdf271 !important;
  -webkit-animation: twinkling 1s infinite ease-in-out;
}

.motion-off {
  fill: #5b5b5b !important;
 }

复制代码

咸味土豆

killadm 发表于 2018-3-23 20:39
看到老外都是用kindle fire 7平板放门口做中控面板，不过kindle fire性能太弱，据说显示这些CSS动画都会 ...

，感谢。
现在ios和android，都有自己的优势和缺陷，android的tasker能实现的目前ios应该是搞不定的，floorplan
就不用说了，但是a连个简单的地理位置上报都不行，还是期待官方开发人员发力吧。
andriod的那个第三方客户端也太难用了，只好用浏览器。

pigcais

killadm 发表于 2018-3-12 21:42
用chrome试试，没准门飞了

你的svg文件好漂亮哈 能否共享下

pigcais

killadm 发表于 2018-3-13 01:01
floorplan.yaml
[code]  - name: Doors
    entities:

@keyframes rotate45 {
    100% {
        transform: rotate(45deg);
                transform-origin:0% 0%;
    }
}

@keyframes rotateReset45 {
    0% {
        transform: rotate(45deg);
                transform-origin:0% 0%;
    }
    100% {
        transform: none;
    }
}

我这里是增加了 transform-origin:0% 0%; 后显示就正常了

602293544

killadm 发表于 2018-3-12 21:42
用chrome试试，没准门飞了

哈哈  我的风扇也飞出网页了