This is my first widget. Only for french users (“fil pilote” is a french system to manage electrical heating). But It could be usefull for some people.
Insipration from Ecobee widget and Jeedom for icons (I’m adding “auto”)
<style>
ul.dropdown-menu {
text-align: center;
background: transparent;
border: 0px;
box-shadow: 0px 0px 0px #aaa;
}
ul.dropdown-menu li {
font-size: 4em;
border: 1px solid black;
background: #fff;
border-collapse: separate;
border-radius: 5px;
}
.lbl_fp {
font-size : 1.5em;
}
@font-face {font-family: 'fp';src:url('/static/font/fil-pilote.woff') format('woff'); font-weight: normal; font-style: normal;}
[class^="fp-"], [class*="fp-"] { font-family: 'fp'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
.fp-pilote-auto:before {content: "\e615"; color: #9575CD;}
.fp-pilote-conf:before {content: "\e616"; color: #FF5722;}
.fp-pilote-eco:before {content: "\e617"; color: #8BC34A;}
.fp-pilote-hg:before {content: "\e618"; color: #2196F3;}
.fp-pilote-off:before {content: "\e619"; color: #F44336;}
</style>
<div>
<span class="logo_fp" style="font-size: 5em;" uib-dropdown><i class="icon fp-pilote-{{itemValue(config.mode) | lowercase}}" id="single-button" uib-dropdown-toggle></i>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem"><a ng-click="sendCmd(config.mode, 'auto')"><i class="fp-pilote-auto"></i></a></li>
<li role="menuitem"><a ng-click="sendCmd(config.mode, 'off')"><i class="fp-pilote-off"></i></a></li>
<li role="menuitem"><a ng-click="sendCmd(config.mode, 'hg')"><i class="fp-pilote-hg"></i></a></li>
<li role="menuitem"><a ng-click="sendCmd(config.mode, 'eco')"><i class="fp-pilote-eco"></i></a></li>
<li role="menuitem"><a ng-click="sendCmd(config.mode, 'conf')"><i class="fp-pilote-conf"></i></a></li>
</ul>
</span>
</div>
<div class="lbl_fp">{{config.label}}</div>
Sorry but I can’t upload woff file.