Bonsoir Xeos,
De quelle url as-tu besoin ? celle vers laquelle pointe le lien "SmartZone.php" visible sur mon dernier screenshot ?
Si oui c'est celle-ci : https://secure.eedomus.com/pages/verify ... rtZone.php
En ce qui concerne le script, le voici, tel qu'il est visible dans le système de gestion des scripts :
- Code : Tout sélectionner
<?
//*************************************************************************
// Widget Thermo SmartZone
// Version 0.1
// Cree le 21/11/2019
// Modifie le 21/07/2019
//*************************************************************************
$user = getArg('user', $mandatory = false, $default = '');
$secret = getArg('secret', $mandatory = false, $default = '');
$color = getArg('color', $mandatory = false, $default = '');
$mode = getArg('mode', $mandatory = false, $default = '');
$cons = getArg('cons', $mandatory = false, $default = '');
$temp = getArg('temp', $mandatory = false, $default = '');
$etat = getArg('etat', $mandatory = false, $default = '');
$zone = getArg('zone', $mandatory = false, $default = '');
if ($zone){
$periph = getValue($zone, $value_text = false);
$value = $periph ["value"];
if ($value <> "pause"){
$valueZone = "heat";
}else{ $valueZone = "off";
}
}
if ($cons){
$periph = getValue($cons, $value_text = false);
$valueCons = $periph ["value"];
$nom = $periph ["full_name"];
}
if ($temp){
$periph = getValue($temp, $value_text = false);
$valueTemp = $periph ["value"];
}
if ($etat){
$periph = getValue($etat, $value_text = false);
$valueState = $periph ["value"];
}
if ($color == "Blanc") {
$background = "white";
$police = "black";
}else{
$background = "black";
$police = "white";
}
if ($mode == "1"){?>
<html>
<head>
<meta http-equiv="refresh" content="60" >
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
<style>
svg {
width: 7px;
height: 24px;
}
body {
background: <?echo $background ?> ;
touch-action: auto;
}
.button-up, .button-down {
position: relative;
padding: 5px;
margin: 3px 0;
width: 40px;
transition: all 0.2s linear;
}
.button-down:hover {
transform: translate3d(0, 5px, 0);
}
.button-up:hover {
transform: translate3d(0, -5px, 0);
}
.button-up::after, .button-down::after {
content: "";
position: absolute;
left: 15px;
z-index: 11;
display: block;
width: 20px;
height: 20px;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
}
.button-up::after {
top: 20px;
transform: rotate(45deg);
}
.button-down::after {
top: 10px;
transform: rotate(225deg);
}
.wrapper {
display: flex;
flex-direction: column;
font-family: Helvetica;
background : linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
height: 60px;
border-radius: 14px;
margin-top: -4px;
}
.control-wrapper {
display: flex;
justify-content: space-around;
margin-top: -3px;
}
.button-control {
display: flex;
flex-direction: column;
}
.consigne {
display: flex;
flex-direction: column;
}
.ambiante {
display: flex;
flex-direction: column;
margin-top: -7px;
}
.power-button {
display: flex;
flex-direction: column;
}
.degreesC {
margin: 0px 0 0 0px;
text-align: center;
color: white;
font-size: 36px;
font-style: bold;
display: block;
}
.name2{
margin: 0px 0 0 0px;
text-align: left;
color: <? echo $police ?>;
font-size: 14px;
font-style: italic;
font-weight: 100;
}
.power {
display: table;
cursor: pointer;
}
.power input {
display: none;
}
.power input + div {
position: relative;
overflow: hidden;
/* background: #EB2C59; */
border-radius: 50%;
padding: 4px;
transition: -webkit-transform .4s ease;
transition: transform .4s ease;
transition: transform .4s ease, -webkit-transform .4s ease;
/* -webkit-filter: drop-shadow(0 4px 6px rgba(235, 44, 89, 0.3)); */
/* filter: drop-shadow(0 4px 6px rgba(235, 44, 89, 0.3)); */
height: 33px;
width: 37px;
top: 12px;
}
.power input + div:before {
content: '';
width: 4px;
height: 15px;
border-radius: 2px;
background: #FAC026;
position: absolute;
left: 50%;
z-index: 2;
margin: 2px 0 0 -2px;
top: 2px;
opacity: 1;
-webkit-transform: scaleY(1) translate(0, 2px);
/* transform: scaleY(1) translate(0, 2px); */
transition: opacity .4s ease .1s, -webkit-transform .9s ease .4s;
transition: opacity .4s ease .1s, transform .9s ease .4s;
transition: opacity .4s ease .1s, transform .9s ease .4s, -webkit-transform .9s ease .4s;
}
.power input + div:after {
content: '';
position: absolute;
right: 0;
bottom: 0;
width: 200%;
height: 200%;
border-radius: 50%;
background: #FAC026;
-webkit-transform: translate(100%, 100%);
transform: translate(100%, 100%);
-webkit-transform-origin: right bottom;
transform-origin: right bottom;
transition: -webkit-transform .8s ease;
transition: transform .8s ease;
transition: transform .8s ease, -webkit-transform .8s ease;
}
.power input + div svg {
width: 36px;
height: 36px;
fill: none;
display: block;
stroke: #fffafa;
position: relative;
z-index: 2;
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 84;
stroke-dashoffset: 160;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: stroke-dasharray .6s ease 0s, stroke-dashoffset .7s ease .0s;
}
.power input + div:active {
-webkit-transform: scale(0.96);
transform: scale(0.96);
}
.power input:checked + div {
-webkit-filter: drop-shadow(0 4px 6px rgba(33, 231, 110, 0.3));
filter: drop-shadow(0 4px 6px rgba(33, 231, 110, 0.3));
}
.power input:checked + div svg {
stroke-dasharray: 120;
stroke-dashoffset: 133;
transition: stroke-dasharray 0.6s ease 0.45s, stroke-dashoffset 0.7s cubic-bezier(0.94, -0.1, 0.1, 1.2) 0.2s;
}
.power input:checked + div:before {
-webkit-transform: scaleY(0) translate(0, 7px);
transform: scaleY(0) translate(0, 7px);
transition: opacity .4s ease .0s, -webkit-transform .6s ease .3s;
transition: opacity .4s ease .0s, transform .6s ease .3s;
transition: opacity .4s ease .0s, transform .6s ease .3s, -webkit-transform .6s ease .3s;
}
.power input:checked + div:after {
-webkit-transform: translate(40%, 40%);
transform: translate(40%, 40%);
}
.degreesA {
display: flex;
flex-direction: column;
margin-top: -18px;
margin-left: 14px;
font-size: 12px;
color: white;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="control-wrapper">
<div class="button-control">
<div class="button-up"></div>
</div>
<div class="consigne">
<div class="degreesC" ><?echo $valueCons?>°</div>
<div class="ambiante">
<svg viewBox="0 0 15 30" width="25" height="50">
<defs>
<clipPath id="clip">
<rect
transform="translate(0 20)"
x="0"
y="3"
width="15"
height="30">
</rect>
</clipPath>
</defs>
<!-- lines on the side of the thermometer -->
<g
stroke="#272A6E"
fill="none"
stroke-width="1"
stroke-linecap="round"
transform="translate(7.5 0)">
<path
d="M 0 2.5 h 7">
</path>
<path
d="M 0 5.5 h 5">
</path>
<path
d="M 0 8.5 h 5">
</path>
<path
d="M 0 11.5 h 7">
</path>
<path
d="M 0 14.5 h 5">
</path>
<path
d="M 0 17.5 h 5">
</path>
</g>
<!-- colored line, hidden by the clipPath element -->
<g
clip-path="url(#clip)"
stroke="#FF4E2C"
fill="none"
stroke-width="1"
stroke-linecap="round"
transform="translate(7.5 0)">
<path
d="M 0 2.5 h 7">
</path>
<path
d="M 0 5.5 h 5">
</path>
<path
d="M 0 8.5 h 5">
</path>
<path
d="M 0 11.5 h 7">
</path>
<path
d="M 0 14.5 h 5">
</path>
<path
d="M 0 17.5 h 5">
</path>
</g>
<!-- thermometer -->
<g>
<path
d="M 7.5 2.5 v 20"
fill="none"
stroke="#ccc"
stroke-width="5"
stroke-linecap="round">
</path>
<circle
cx="7.5"
cy="25"
r="5"
fill="#ccc">
</circle>
</g>
<!-- line describing a shadow on the thermometer -->
<path
d="M 7.5 2.5 v 20"
fill="none"
stroke="#000"
stroke-width="2"
stroke-linecap="round"
opacity="0.2">
</path>
<!-- colored portions of the thermometer -->
<g>
<!-- line, clipped through the defined element -->
<g
clip-path="url(#clip)">
<path
d="M 7.5 2.5 v 20"
fill="none"
stroke="#FF4E2C"
stroke-width="2"
stroke-linecap="round">
</path>
</g>
<!-- circle -->
<circle
cx="7.5"
cy="25"
r="3"
fill="#FF4E2C">
</circle>
</g>
</svg>
<i class="degreesA"> <? echo $valueTemp?>°</i></div>
</div>
<div class="button-control">
<div class="button-down"></div>
</div>
<div class="power-button">
<label class="power"><input type="checkbox" data-onoff="toggle" <? if ($valueState == "heat") { echo checked;}?> >
<div>
<svg viewBox="0 0 44 44">
<path d="M22,6 C31,6 38,13 38,22 C38,31 31,38 22,38 C13,38 6,31 6,22 C6,13 13,6 22,6 L22,28" id="path"></path>
</svg>
</div>
</label>
</div>
</div>
<script src="js/lib/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
document.body.addEventListener('touchmove', function(event) {
event.preventDefault();
}, false);
function updateTarget (value) {
$.get('https://api.eedomus.com/set?api_user=<?php echo($_GET['user']); ?>&api_secret=<?php echo($_GET['secret']); ?>&action=periph.value&periph_id=<?php echo($_GET['cons']); ?>&value='+ value,
{},
function(data){
console.log('Ok');
setTimeout(function () { location.reload(true); },
5000);
});
};
function updateState (value) {
$.get('https://api.eedomus.com/set?api_user=<?php echo($_GET['user']); ?>&api_secret=<?php echo($_GET['secret']); ?>&action=periph.value&periph_id=<?php echo($_GET['etat']); ?>&value='+ value,
{},
function(data){
console.log('Ok');
setTimeout(function () { location.reload(true); },
5000);
});
};
const temperature = document.querySelector(".degreesC");
const up = document.querySelector(".button-up");
const down = document.querySelector(".button-down");
let number = <? echo $valueCons ?> ;
function hotter() {
if (number < 32) {
number ++;
temperature.innerHTML = number
updateTarget(number);
}
};
function colder() {
if (number > 7) {
number --;
temperature.innerHTML = number
updateTarget(number);
}
};
up.addEventListener("click", hotter);
down.addEventListener("click", colder);
document.querySelector("[data-onoff]")
.addEventListener("change", function(e){
e.preventDefault();
var n = (this.checked) ? "heat" : "off";
updateState(n);
});
</script>
</body>
</html>
<?}
$xml ="<SMARTZONE>";
$xml .= "<Zone>".$valueZone."</Zone>";
$xml .= "</SMARTZONE>";
echo $xml;
?>
Je te remercie pour ton aide !
|
