🔢 Widget Clavier virtuel pour Dashboard

fgtoul · Novembre 22, 2024, 9:53

Bonjour à tous,

avec l’arrivée des objets « Access Control » sur IPX800 V5, vous avez maintenant la possibilité d’utiliser un clavier digital sur X-Display, mais cela nécessite d’être sur place.

Voici donc un widget HTML pour ceux qui veulent un clavier sur le dashboard.
L’ipx800 doit impérativement être en version 5.5.8

Avec ce widget vous pourrez donc lancer tout type d’action par lien ou scénario.
Si au clavier vous entrez un code valide, la sortie de l’objet Access Control s’active momentanément (impulsion 1 seconde environ).

Sur IPX800 V5, il suffit de créer une variable type STR32 et la sélectionner dans la définition de l’objet « Access Control » (champ ContenuStr).
Définissez ensuite les 6 codes valides dans la configuration de l’objet « Access Control »

Dans le code HTML ci-dessous, remplacez l’id 524320 par l’id de votre variable :

Voici le code :

<style>
.container {
background-color: #fff;
padding: 3px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 100%;
height:100%;
text-align: center;
}
.button {
width: 60px;
height: 60px;
margin: 5px;
font-size: 18px;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #007bff;
color: #fff;
}
.button:hover {
background-color: #0056b3;
}
</style>
<html>
<div class="container">
<input type="hidden" id="codeInput" readonly>
<div>
<button class="button" onclick="appendNumber(1)">1</button>
<button class="button" onclick="appendNumber(2)">2</button>
<button class="button" onclick="appendNumber(3)">3</button>
</div>
<div>
<button class="button" onclick="appendNumber(4)">4</button>
<button class="button" onclick="appendNumber(5)">5</button>
<button class="button" onclick="appendNumber(6)">6</button>
</div>
<div>
<button class="button" onclick="appendNumber(7)">7</button>
<button class="button" onclick="appendNumber(8)">8</button>
<button class="button" onclick="appendNumber(9)">9</button>
</div>
<div>
<button class="button" onclick="deleteLast()">Suppr</button>
<button class="button" onclick="appendNumber(0)">0</button>
<button class="button" onclick="submitCode()">Entrée</button>
</div>
</div>

<script>
window.GCE_Refresh.push(function(data) { 
switch (data['_id'])
{
case 524320:
document.getElementById('codeInput').value=data.value;
break;
}
})
function appendNumber(number) {
const input = document.getElementById('codeInput');
input.value += number;
}
function deleteLast() {
const input = document.getElementById('codeInput');
input.value = input.value.slice(0, -1);
}
function submitCode() {
const code = document.getElementById('codeInput').value;
GCE_API.put('/api/core/str/524320', { value: code });
document.getElementById('codeInput').value="";
}
</script>
</html>

Le fonctionnement du clavier est identique à celui qui est sur le X-Display.
La touche Suppr supprime le dernier chiffre entré, la touche Entrée valide la saisie et l’envoie à l’IPX800 pour contrôle.
Bonne journée

grocrabe · Novembre 22, 2024, 10:50

Bonjour fgtoul,

merci pour ce partage

Avec les valeurs par défaut, j’obtiens ceci :

Pour un affichage correct j’ai utilisé pour les Button :

width: 45px;
height: 45px;
margin: 5px;
font-size: 15px;

et j’obtiens ceci :

et en allant un peu plus loin :
width: 60px;
height: 48px;
margin: 3px;
font-size: 15px;

ce qui donne :

Bonne journée

fgtoul · Novembre 22, 2024, 11:42

il faut effectivement adapter à la résolution écran
Vous pouvez aussi personnaliser les couleurs

fgtoul · Novembre 23, 2024, 10:10

Sur la bonne suggestion de @grocrabe, j’ai ajouté deux voyants, chacun correspondant aux IO « Door State » et « Alarm State » de l’objet Access Control.

Voici le code, vous devrez remplacer les 3 id :

<script>
var iddoor=65792;// à remplacer par l'id Door State
var idalarm=65793;// à remplacer par l'id de Alarm State
var idstr32=524327// à remplacer par l'ed de la string32 qui reçoit le code

  window.GCE_Refresh.push(function(data) { //IMPORTANT: binding refresh function to the WebSocket
    switch (data['_id'])
    {
 		case iddoor:  //id door state
			document.getElementById('led1').style.backgroundColor = data.on ? '#1fdb49' : '#d3d3d3';
			break;
		case idalarm:  // id alarm state
			document.getElementById('led2').style.backgroundColor = data.on ? 'red' : '#d3d3d3';
			break;
    }
  })
  
  function init1() {
    GCE_API.getIO(iddoor).then((ret) => { // ask for the actual value
      document.getElementById('led1').style.backgroundColor = ret.on ? '1fdb49' : '#d3d3d3'; 
    })
     GCE_API.getIO(idalarm).then((ret) => { // ask for the actual value
      document.getElementById('led2').style.backgroundColor = ret.on ? 'red' : '#d3d3d3';
    })
  }

function appendNumber(number) {
	const input = document.getElementById('codeInput');
	input.value += number;
}

function deleteLast() {
	const input = document.getElementById('codeInput');
	input.value = input.value.slice(0, -1);
}

function submitCode() {
	const code = document.getElementById('codeInput').value;
	GCE_API.put("/api/core/str/" + idstr32.toString(), { value: code });
	document.getElementById('codeInput').value="";
}


  init1()
</script>

<style>

.container {
	background-color: #fff;
	padding: 3px;
	border-radius: 2px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	width: 100%;
	height: 100%;
	text-align: center;
	position: relative;
	top:12px;
}
.led {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #d3d3d3;
	position: absolute;
	top: -8px;
}
#led1 {
	right: 30px;
}
#led2 {
	right: 10px;
}
.button {
	width: 60px;
	height: 40px;
	margin: 3px;
	font-size: 18px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	background-color: #007bff;
	color: #fff;
}
.button:hover {
	background-color: #0056b3;
}
</style>
<div class="container">
<div id="led1" class="led"></div>
<div id="led2" class="led"></div>
<input type="hidden" id="codeInput" readonly>
<div>
	<button class="button" onclick="appendNumber(1)">1</button>
	<button class="button" onclick="appendNumber(2)">2</button>
	<button class="button" onclick="appendNumber(3)">3</button>
</div>
<div>
	<button class="button" onclick="appendNumber(4)">4</button>
	<button class="button" onclick="appendNumber(5)">5</button>
	<button class="button" onclick="appendNumber(6)">6</button>
</div>
<div>
	<button class="button" onclick="appendNumber(7)">7</button>
	<button class="button" onclick="appendNumber(8)">8</button>
	<button class="button" onclick="appendNumber(9)">9</button>
</div>
<div>
	<button class="button" onclick="deleteLast()">Suppr</button>
	<button class="button" onclick="appendNumber(0)">0</button>
	<button class="button" onclick="submitCode()">Entrée</button>
</div>
</div>

en template 1 par défaut :
access
en template 2 par défaut :

cce66 · Novembre 23, 2024, 10:32

Bonjour @fgtoul

Ca donne même la possibilité d’ajouter un bouton connecté à une io vituelle qui pourrait
déclencher un scénario normalement non ?

fgtoul · Novembre 23, 2024, 10:35

tu peux lier l’objet access control à ce que tu veux, ça permet d’exécuter n’importe quoi par lien ou scénario à chaque fois qu’un code valide est entré.
Un wiki est en cours.

grocrabe · Novembre 23, 2024, 10:39

Bonjour fgtoul,

c’est juste parfait…

Voici ma version :

Merci et bonne journée

fgtoul · Novembre 23, 2024, 11:17

voici le même clavier avec une palette personnalisée pour le template 1 :
access3

<script>
var iddoor = 65792; // à remplacer par l'id Door State
var idalarm = 65793; // à remplacer par l'id de Alarm State
var idstr32 = 524327; // à remplacer par l'id de la string32 qui reçoit le code

window.GCE_Refresh.push(function(data) { //IMPORTANT: binding refresh function to the WebSocket
  switch (data['_id']) {
    case iddoor:  //id door state
      document.getElementById('led1').style.backgroundColor = data.on ? '#1fdb49' : '#999';
      break;
    case idalarm:  // id alarm state
      document.getElementById('led2').style.backgroundColor = data.on ? 'red' : '#999';
      break;
  }
});

function init1() {
  GCE_API.getIO(iddoor).then((ret) => { // ask for the actual value
    document.getElementById('led1').style.backgroundColor = ret.on ? '#1fdb49' : '#999';
  });
  GCE_API.getIO(idalarm).then((ret) => { // ask for the actual value
    document.getElementById('led2').style.backgroundColor = ret.on ? 'red' : '#999';
  });
}

function appendNumber(number) {
  const input = document.getElementById('codeInput');
  input.value += number;
}

function deleteLast() {
  const input = document.getElementById('codeInput');
  input.value = input.value.slice(0, -1);
}

function submitCode() {
  const code = document.getElementById('codeInput').value;
  GCE_API.put("/api/core/str/" + idstr32.toString(), { value: code });
  document.getElementById('codeInput').value = "";
}

init1();
</script>

<style>
.container {
  background-color: #586a80;
  padding: 3px;
  border-radius: 2px;
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
  top: 12px;
}
.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #999;
  position: absolute;
  top: -8px;
}
#led1 {
  right: 30px;
}
#led2 {
  right: 10px;
}

.button {
  width: 60px;
  height: 40px;
  margin: 3px;
  font-size: 18px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background-color: #586a80;
  border: 1px solid #394b60;
  color: #fff;
}
.button:hover {
  background-color: #394b60;
}
</style>

<div class="container">
  <div id="led1" class="led"></div>
  <div id="led2" class="led"></div>
  <input type="hidden" id="codeInput" readonly>
  <div>
    <button class="button" onclick="appendNumber(1)">1</button>
    <button class="button" onclick="appendNumber(2)">2</button>
    <button class="button" onclick="appendNumber(3)">3</button>
  </div>
  <div>
    <button class="button" onclick="appendNumber(4)">4</button>
    <button class="button" onclick="appendNumber(5)">5</button>
    <button class="button" onclick="appendNumber(6)">6</button>
  </div>
  <div>
    <button class="button" onclick="appendNumber(7)">7</button>
    <button class="button" onclick="appendNumber(8)">8</button>
    <button class="button" onclick="appendNumber(9)">9</button>
  </div>
  <div>
    <button class="button" onclick="deleteLast()">Suppr</button>
    <button class="button" onclick="appendNumber(0)">0</button>
    <button class="button" onclick="submitCode()">Entrée</button>
  </div>
</div>

grocrabe · Novembre 23, 2024, 1:27

Et le voici avec la palette pour le template 2 (mon préféré ).

Le bouton 5 est survolé par la souris…

Bonne jornée

cce66 · Novembre 23, 2024, 3:32

@fgtoul @grocrabe

J’aime bien ces parties de ping-pong productives…

La prochaine…deux boutons en dessous, un pour activer une IO virtuelle pour mettre ON un scénario et l’autre pour le mettre OFF

C’est à qui d’engager déjà ?

fgtoul · Novembre 23, 2024, 4:21

comme dit plus haut, il suffit de lier la sortie de l’objet access control, par exemple à un objet télérupteur. Ce dernier fera ce que tu veux en ON et OFF.

cce66 · Novembre 23, 2024, 5:29

j’avais pas pensé au télérupteur !

grocrabe · Novembre 24, 2024, 1:23

Bonjour cce66,

si tu utilises un Télérupteur, il peut être intéressant de lier la Led1 du clavier HTML à la sortie du Télérupteur plutôt que à la sortie du Access Control.

Comme ça tu as un retour visuel de l’état du Télérupteur.

Pong

Bonne journée

fgtoul · Décembre 6, 2024, 6:35

4 messages ont été fusionnés à un sujet existant : Maison neuve, Projet filaire installation IPX v5 et tableau de principe correspondant

Francis · Décembre 7, 2024, 4:54

Bonjour

Merci pour le travail.
Par contre j’ai un problème d’affichage

fgtoul · Décembre 7, 2024, 6:05

Bonjour Francis
Le widget n’est pas fait pour le liveview.
L’API html ne fonctionnera pas.

Francis · Décembre 8, 2024, 1:17

Bonjour,

pour le Widget clavier virtuel, il suffit de créer une variable type STR32 et la sélectionner dans la définition de l’objet « Access Control » (champ ContenuStr).
Par contre il faut faire le choix entre wiegand et STR32 dans access .
Il faut créer un nouveau acces control ?

fgtoul · Décembre 8, 2024, 1:44

si le clavier virtuel exécute les mêmes actions que le wiegand, avec les mêmes codes, il est possible d’utiliser l’ID de la variable str32 du wiegand dans le widget html.