Signature Manuscrite dans google sheet
Bonjour
Petite question, y'a t'il une méthode ou solution pour pouvoir faire signer des personnes à partir d'une tablette (style Wacom) dans un Sheet google.
J'ai un listing de personnes, je dois les faire signer à la remise d'un pack et au lieu d'imprimer du papier...ca serait appréciable de les faire signer sur l'ordi.
(plus de 1500 personnes).
Si vous avez une idée solution...
Bonjour,
Oui possible à l'aide d'un script, par contre c'est du niveau 1.
Bonjour Pierre
Niveau 1, c'est à dire haut niveau j'imagine ?
J'ai bien trouvé un petit script ou en cliquant sur un bouton, j'ouvre une fenetre dans laquelle je signe, ca stocke dans un drive un fichier jpg.
Ca devait mettre ensuite l'image dans la cellule active.
Mais flop , ça crée le fichier image mais illisible et ca fait rien ensuite.
D'où ma demande içi.
Je l'avais fait sous Excel mais changement de suite donc je cherchais la même fonction sous google mais elle existe pas de base.
Non, c'est le niveau le plus bas
Concernant le script en lui même je bosse actuellement sur un qui fonctionne, mais la signature est au dessus d'une cellule...
Quoi le 1 c'est en bas du podium ...bon au moins je suis premier sur quelques choses
dans l'idée moi je voudrais que pour chaque bénévole, en bout de ligne je retrouve sa signature.
ca évite de sortir 50 feuilles qui finiront à la poubelle
le script itère sur la liste, la présence ou non de signature dans la colonne voulue, puis génère une liste avec uniquement les bénévoles n'ayant pas encore signé.
donc, l'user choisi son nom dans la liste, signe, valide, puis la signature s'ajoute dans la colonne en face de son nom.
Voila...
Moi j'ai réussi à faire le bouton qui ouvre le popup html...je vois la signature...
et plus rien.
le fichier image généré dans le drive illisible donc rien n'est importe ensuite dans la cellule.
D'ou mon appel à l'aide.
Pouvez-vous copier ici votre script google et html ?
le script
function signerDocument()
{
var celluleActive = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getActiveCell();
var feuilleActive = celluleActive.getSheet();
var urlImage = afficherBoiteDialogueSignature();
if (urlImage !== null) {
feuilleActive.getRange(celluleActive.getRow(), celluleActive.getColumn()).setValue(urlImage);
}
}
function afficherBoiteDialogueSignature()
{
var html = HtmlService.createHtmlOutputFromFile('FormulaireSignature') .setWidth(550) .setHeight(450);
SpreadsheetApp.getUi().showModalDialog(html, 'Signer le document');
}
function enregistrerSignature(signature)
{
var image = Utilities.newBlob(signature, 'image/jpeg', 'signature.jpg');
var dossier = DriveApp.getFolderById('ID_DU_DOSSIER_DE_STOCKAGE');
// Remplacez ID_DU_DOSSIER_DE_STOCKAGE par l'ID du dossier où vous souhaitez enregistrer les signatures
if (dossier) {
var fichier = dossier.createFile(image);
if (fichier) {
return fichier.getUrl();
} else {
return null;
} else {
return null;
}
}Et le html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<canvas id="canvas" width="200" height="100"></canvas>
<button onclick="enregistrerSignature()">Enregistrer la signature</button>
<script>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var dessiner = false;
canvas.addEventListener('mousedown', function(event) {
dessiner = true;
context.beginPath();
context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
});
canvas.addEventListener('mousemove', function(event) {
if (dessiner) {
context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
context.stroke();
}
});
canvas.addEventListener('mouseup', function() {
dessiner = false;
});
function enregistrerSignature() {
google.script.run.enregistrerSignature(canvas.toDataURL());
google.script.host.close();
}
</script>
</body>
</html>Grosso modo ça semble correct, l'image générée est illisible ?
Oui le fichier est bien créé mais illisible en ligne et en le téléchargeant.
même pas une page blanche, il me dit qu'il peut pas le lire.
à tester :
Pour générer la fenêtre :
function popupSignature() {
var htmlOutput = HtmlService.createHtmlOutputFromFile('popUpSignature')
.setWidth(450)
.setHeight(450)
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Signez ci-dessous');
}Script HTML : (à nommer : popUpSignature)
<!DOCTYPE html>
<html>
<head>
<title>Signature Popup</title>
<style>
#canvas {
border: 1px solid #000;
width: 400px;
height: 200px;
margin-bottom: 20px;
}
.actionButton {
background-color: #15d798;
color: white;
border: none;
border-radius: 5px;
padding: 10px 30px;
cursor: pointer;
margin-right: 10px;
margin-bottom: 10px;
font-size: 16px;
width: 100%;
max-width: 200px;
box-sizing: border-box;
}
.actionButton:hover {
background-color: #0fbf7c;
}
.buttonContainer {
display: flex;
flex-direction: column;
align-items: center;
}
</style>
</head>
<body>
<div class="buttonContainer">
<div id="canvasContainer">
<canvas id="canvas" width="400" height="200"></canvas>
</div>
<div class="buttonContainer">
<button class="actionButton" onclick="saveSignature()">Valider</button>
<button class="actionButton" onclick="clearSignature()">Effacer</button>
</div>
</div>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var drawing = false;
var prevX = 0;
var currX = 0;
var prevY = 0;
var currY = 0;
function draw(e) {
if (!drawing) return;
e.preventDefault();
if (e.touches && e.touches.length > 0) {
currX = e.touches[0].clientX - canvas.getBoundingClientRect().left;
currY = e.touches[0].clientY - canvas.getBoundingClientRect().top;
} else {
currX = e.clientX - canvas.getBoundingClientRect().left;
currY = e.clientY - canvas.getBoundingClientRect().top;
}
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
prevX = currX;
prevY = currY;
}
canvas.addEventListener('mousedown', function (e) {
if (!isTouchDevice()) {
drawing = true;
prevX = e.clientX - canvas.getBoundingClientRect().left;
prevY = e.clientY - canvas.getBoundingClientRect().top;
}
});
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', function () {
drawing = false;
});
canvas.addEventListener('touchstart', function (e) {
drawing = true;
prevX = e.touches[0].clientX - canvas.getBoundingClientRect().left;
prevY = e.touches[0].clientY - canvas.getBoundingClientRect().top;
});
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', function () {
drawing = false;
});
function saveSignature() {
var tempCanvas = document.createElement('canvas');
var tempCtx = tempCanvas.getContext('2d');
tempCanvas.width = 200;
tempCanvas.height = 100;
tempCtx.drawImage(canvas, 0, 0, 200, 100);
var dataURL = tempCanvas.toDataURL();
google.script.run.withSuccessHandler(closeDialog).exportImage(dataURL);
}
function closeDialog() {
google.script.host.close();
}
function clearSignature() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function isTouchDevice() {
return 'ontouchstart' in window || navigator.maxTouchPoints;
}
</script>
</body>
</html>Puis la fonction google qui récupère l'image et l'insère (dans cet exemple en A1) :
function exportImage(dataURL) {
var imageURL = dataURL.split(",");
var blob = Utilities.newBlob(Utilities.base64Decode(imageURL[1]), 'image/png');
blob.setName("TEMP_signature");
var file = DriveApp.createFile(blob);
SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().insertImage(blob, 1, 1); // 1, 1 = A1
DriveApp.getFileById(file.getId()).setTrashed(true);
}C'est top ca fonctionne bien.
Juste petite question actuellement il me pose sur A1 la signature comme une image SUR les cellules.
avec la fonction insertCellIImage, possible de modifier ton script pour qu'il insère la signature DANS la cellule ?
j'ai essayé en vain
si tu y arrives ça m'interesse.
Coucou
Bon je reviens sur le sujet.
Impossible à l'heure actuelle d'insérer une signature directement dans une cellule.
J'ai trouvé comment enregistrer par contre dans le drive, et l'idée c'est qu'avec l'url je l'affiche ensuite dans mon sheet.
Ca marche sauf que je ne vois pas l'image.
Il crée bien l'image, il me donne bien l'url si je clique dessus je file vers l'image
mais la fonction image(url) n'affiche rien.
Une idée ?
J'avais déjà tenté aussi, le lien drive ne fonctionne pas, même quand le lien est public, une solution serai d'envoyer l'image sur un service d’hébergement en ligne, via une API et de récupérer le lien généré.
Bon j'ai eu la réponse sur une autre question pour ma photo qui ne s'affichait pas.
Par contre j'ai réussi la signature DANS la cellule
J'arrive à faire signer, et enregistrer dans un dossier de mon drive la signature.
Et ensuite en récuperant l'url de l'image je l'insère dans une cellule sans problème.
y'a un peu de latence mais c'est gérable.
je te mets le script et l'html en dessous
dans mon exemple j'ai en A1 le nom d'une personne, je la fais signer, ca enregistre la signature dans le drive à son nom, et l'intègre ensuite dans la cellule.
function onOpen() {
SpreadsheetApp.getUi().createMenu('Signature').addItem('Ajouter Signature', 'showSignatureDialog').addToUi();
}
function showSignatureDialog() {
var html = HtmlService.createHtmlOutputFromFile('Index')
.setWidth(400)
.setHeight(300)
.setTitle('Ajouter Signature Manuscrite');
SpreadsheetApp.getUi().showModalDialog(html, 'Signature');
}
function saveSignature(dataURL) {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
var folderName = "Signature"; // Nom du dossier
var parentFolders = DriveApp.getRootFolder().getFoldersByName(folderName);
var folder;
// Vérifie si le dossier existe déjà
if (parentFolders.hasNext()) {
folder = parentFolders.next();
} else {
// Crée le dossier s'il n'existe pas
folder = DriveApp.getRootFolder().createFolder(folderName);
}
var name = sheet.getRange('A1').getValue();
// Convert dataURL to blob
var data = dataURL.split(',')[1];
var blob = Utilities.newBlob(Utilities.base64Decode(data), 'image/png', name + '.png');
// Enregistre l'image dans le dossier
var file = folder.createFile(blob);
var imageId = file.getId();
var imageUrl = '=IMAGE("https://drive.google.com/uc?id=' + imageId + '")';
// Insère l'URL de l'image dans la cellule D1
sheet.getRange('D1').setValue(imageUrl);
// Ferme la boîte de dialogue modale
var ui = SpreadsheetApp.getUi();
ui.alert('Signature ajoutée avec succès.');
// ui.showModalDialog(HtmlService.createHtmlOutput(''), 'Fermer');
}<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
#signatureContainer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
background-color: #fff;
padding: 20px;
}
</style>
</head>
<body>
<div id="signatureContainer">
<canvas id="canvas" style="border:1px solid black;" width="300" height="150"></canvas>
<br>
<button id="clear">Effacer</button>
<button id="save">Sauvegarder</button>
</div>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var painting = false;
// Fonction pour démarrer le dessin
function startPosition(e) {
painting = true;
draw(e);
}
// Fonction pour arrêter le dessin
function endPosition() {
painting = false;
context.beginPath();
}
// Fonction pour dessiner
function draw(e) {
if (!painting) return;
context.lineWidth = 2;
context.lineCap = 'round';
context.strokeStyle = 'black';
// Coordonnées du curseur
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left;
var y = e.clientY - rect.top;
// Dessiner
context.lineTo(x, y);
context.stroke();
context.beginPath();
context.moveTo(x, y);
}
// Événements de souris
canvas.addEventListener('mousedown', startPosition);
canvas.addEventListener('mouseup', endPosition);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseout', endPosition);
// Clear the canvas
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas.width, canvas.height);
});
// Save the signature
document.getElementById('save').addEventListener('click', function() {
var dataURL = canvas.toDataURL();
google.script.run.saveSignature(dataURL);
google.script.host.close();
});
};
</script>
</body>
</html>Super !
J'avais fais pleins de tentatives, dont certaines alambiqués mais ça n'a rien donné, je vais tester sur ma version voir si ça fonctionne bel et bien.
Penses à ouvrir le dossier signature accessible avec lien. Sinon il lit pas la photo.
Bonjour Messieurs,
Je suis tombé par hasard sur votre sujet, il est très intéressant et pourrait être utile à pas mal de personne notamment pour les formations.
Merci à vous pour l'outil, cependant je n'arrive pas une erreur sur cette ligne :
var data = dataURL.split(',')[1];Voici mon erreur :
TypeError: Cannot read properties of undefined (reading 'split')
C'est surement un truc tout bête que j'ai oublier de faire de mon coté, mais je ne vois pas comment fixer cette erreur...
Bonne journée,