New btns

git-svn-id: https://redmine.imt-atlantique.fr/svn/xaal/code/Python/trunk@2226 b32b6428-25c9-4566-ad07-03861ab6144f

apps/dashboard/xaal/dashboard/static/css/btns.css

+.onoffswitch {
+    position: relative; width: 60px;
+    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block; overflow: hidden; cursor: pointer;
+    border: 1px solid #999999; border-radius: 20px;
+}
+.onoffswitch-inner {
+    display: block; width: 200%; margin-left: -100%;
+    transition: margin 0.1s ease-in 0s;
+}
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+    display: block; float: left; width: 50%; height: 20px; padding: 0; line-height: 20px;
+    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
+    box-sizing: border-box;
+}
+.onoffswitch-inner:before {
+    content: "";
+    padding-left: 10px;
+    background-color: #ED054E; color: #FFFFFF;
+}
+.onoffswitch-inner:after {
+    content: "";
+    padding-right: 10px;
+    background-color: #00bbd7; color: #DEDEDE;
+    text-align: right;
+}
+.onoffswitch-switch {
+    display: block; width: 16px; margin: 2px;
+    background: #FFFFFF;
+    position: absolute; top: 0; bottom: 0;
+    right: 36px;
+    border: 1px solid #999999; border-radius: 20px;
+    transition: all 0.1s ease-in 0s; 
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-left: 0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+    right: 0px; 
+}

apps/dashboard/xaal/dashboard/static/css/site.css

@@ -153,7 +153,7 @@ ul.menu li a:hover {
 
 .grid-background {
     /* background-image: url("https://wallpaperscraft.com/image/spruce_shadow_dark_background_branch_68089_1920x1200.jpg"); */
-    background-image: url("/static/imgs/bg1.jpg");
+    background-image: url("/static/imgs/bg3.jpg");
     min-height: 900px;
     padding: 0.5em;
 }
@@ -164,7 +164,7 @@ ul.menu li a:hover {
 	border-radius: 3px;
 	padding: 8px;
 	font-size: 120%;
-    height: 200px;
+    height: 250px;
     border: 1px solid var(--color2);
 
     /* display: flex; */

apps/dashboard/xaal/dashboard/static/tags/powerrelay.tag

 <powerrelay>
 
-<div class="powerrelay">
-<div class="{stateClass}">{ power }</div>
-  <button class="button ripple" name="btn_on" onclick={ btn }>ON</button>
-  <button class="button ripple" name="btn_off" onclick={ btn }>OFF</button>
+<div class="onoffswitch">
+  <input type="checkbox" class="onoffswitch-checkbox" id={ tag_id } onchange={ chk } checked={checked}>
+    <label class="onoffswitch-label" for={ tag_id }>
+        <span class="onoffswitch-inner"></span>
+        <span class="onoffswitch-switch"></span>
+    </label>
 </div>
 
 <script>
   this.addr = opts.xaal_addr
-  this.power = '__';
-  this.stateClass = 'state-unknow';
+  this.tag_id = 'btn_'+Math.random();
     
   receive(data) {
     state = data['attributes']['power']
     if (state == true) {
-      this.power = 'ON'
-      this.stateClass = 'state-on'
+      this.checked = true
     }
     else {
-      this.power = 'OFF'
-      this.stateClass = 'state-off'
+      this.checked = false
     }
     this.update()
  }
 
-  btn(e) {
-    if (e.target.name =='btn_on')
+  chk(e) {
+    if (e.target.checked == true)
       sio_send_request(this.addr,'on',{})
-    if (e.target.name =='btn_off')
+    else
       sio_send_request(this.addr,'off',{})
   }
+    
 </script>
 
 <style>
  .powerrelay {
  }
 
- .state-on {
-     color:  var(--color3);
-     font-weight: bold;
-     padding: 8px;
- }
-
- .state-unknow, .state-off {
-     color:  var(--color1);
-     font-weight: bold;
-     padding: 8px;
- }
-
 </style>
 </powerrelay>