Commit 721b228c authored by siick's avatar siick

ajout service temporaire Ko-Veed QRCode generator

parent d69546a6
Pipeline #2269 passed with stage
in 25 seconds
......@@ -124,6 +124,7 @@
<h3>Siickurl</h3>
</header>
<p>Siickurl est un service basé sur Polr 2, un raccourcisseur d'URL, minimaliste et open source.</p>
<p><b><span class="icon solid fa-exclamation-triangle"></span> L'ancien service <a href="https://link.siick.fr" target="_blank">Link.Siick</a> fermera en Août 2020 <span class="icon solid fa-exclamation-triangle"></span></b></p>
<ul class="actions">
<li><a href="https://url.siick.fr/" target="_blank" class="button">Siickurl</a></li>
</ul>
......
body {
font-family: sans-serif;
}
html,
.fullscreen {
display: flex;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.container {
margin: auto;
text-align: center;
}
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<title>TousAntiCovid</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Protégeons nos proches, protégeons-nous et protégeons les autres. Avec TousAntiCovid, participez à la lutte contre l’épidémie en limitant les risques de transmission" />
<meta property="og:title" content="TousAntiCovid">
<meta property="og:description" content="Protégeons nos proches, protégeons-nous et protégeons les autres. Avec TousAntiCovid, participez à la lutte contre l’épidémie en limitant les risques de transmission">
<meta property="og:image" content="https://koveed.fb-graphiklab.com/thumbnail.png">
<meta property="og:url" content="https://koveed.fb-graphiklab.com/">
<meta name="twitter:title" content="TousAntiCovid ">
<meta name="twitter:description" content=" Protégeons nos proches, protégeons-nous et protégeons les autres. Avec TousAntiCovid, participez à la lutte contre l’épidémie en limitant les risques de transmission">
<meta name="twitter:image" content=" https://koveed.fb-graphiklab.com/thumbnail.png">
<meta name="twitter:card" content="summary_large_image">
<link rel="shortcut icon" href="favicon-32x32.png">
<link rel="icon" type="image/x-icon" href="favicon-32x32.png">
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/favicon-96x96.png" sizes="96x96">
<link rel="apple-touch-icon" href="images/favicon-120x120.png"> <!-- 120px -->
<link rel="apple-touch-icon" sizes="152x152" href="images/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="images/favicon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/favicon-180x180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Ko-Veed">
<meta name="msapplication-TileImage" content="images/favicon-152x152.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<link rel="stylesheet" href="css/style.css">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="white"/>
</head>
<body class="fullscreen">
<div id="content_QRCode"></div>
<!-- TODO choix du motif -->
<div id="container"></div>
<p id="liste">
<button id="button_achats">achats</button>
<button id="button_sport_animaux">sport/animaux</button>
<button id="button_travail">travail</button>
</p>
<script src="js/qrcode-svg/dist/qrcode.min.js"></script>
<script>
// Gestion des boutons
var choice = "achats"; // choix de base
var content = null;
var btnAchats = document.getElementById("button_achats");
var btnSportAnimaux = document.getElementById("button_sport_animaux");
var btnTravail = document.getElementById("button_travail");
btnAchats.onclick = function() {
choice = "achats";
content = createContent(choice);
makeQRCode(content);
}
btnSportAnimaux.onclick = function() {
choice = "sport_animaux";
content = createContent(choice);
makeQRCode(content);
}
btnTravail.onclick = function() {
choice = "travail";
content = createContent(choice);
makeQRCode(content);
}
</script>
<script>
var content = createContent(choice);
makeQRCode(content);
function createContent(choice) {
// Inititalisation des données
// Récupération de la date et l'heure à l'instant T
var todayDate = new Date();
var strDate = todayDate.getDate() + '/' + (todayDate.getMonth() + 1) + '/' + todayDate.getFullYear();
var strTime = todayDate.getHours() + ":" + todayDate.getMinutes();
// Définition de l'heure de création du document 20 minutes avant
var todayDate20minBefore = todayDate;
todayDate20minBefore.setMinutes(todayDate.getMinutes() - 20 );
var strCreatedTime = todayDate20minBefore.getHours() + ":" + todayDate20minBefore.getMinutes();
// Contenu QR-Code
var creationDate = "Cree le: " + strDate + " " + strCreatedTime + ";\r\n";
var nom = "Nom: Brandin;\r\n";
var prenom = "Prénom: François;\r\n";
var naissance = "21/02/1977 a Le Mans;\r\n";
var adresse = "6 place de la Mairie 42370 Saint André d Apchon;\r\n"
var sortie = "Sortie: " + strDate + " a " + strTime + ";\r\n";
var motif = "Motifs: " + choice;
content = creationDate + nom + prenom + naissance + adresse + sortie + motif;
return content;
}
function makeQRCode (content) {
// Création du QR-Code
var qrcode = new QRCode({
content: content,
padding: 4, // white space padding, 4 modules by default, 0 for no border
width: 512,
height: 512,
color: "#000096",
background: "#ffffff",
container: "svg-viewbox", // Responsive use
join: true, // Crisp rendering and 4-5x reduced file size
ecl: "H" // Error correction level: L, M, H, Q
});
var svg = qrcode.svg();
document.getElementById("container").innerHTML = "";
document.getElementById("container").innerHTML = svg;
// document.getElementById("content_QRCode").innerHTML = "";
// document.getElementById("content_QRCode").innerHTML = content;
}
</script>
<script src="js/main.js"></script>
</body>
</html>
<!--
Cree le: 31/10/2020 a 12h12;
Nom: Ducon;
Prenom: Jean;
Naissance: 12/05/1985 a MonCul;
Adresse: 55 rue des Bouloux 69000 Lyon;
Sortie: 31/10/2020 a 14:00;
Motifs: sport_animaux
-->
\ No newline at end of file
window.onload = () => {
'use strict';
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('./sw.js');
}
}
\ No newline at end of file
# Test
samples/
# Logs
logs
*.log
npm-debug.log*
# Runtime data
pids
*.pid
*.seed
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directory
node_modules
# npm
package-lock.json
# Optional npm cache directory
.npm
# Optional REPL history
.node_repl_history
The MIT License (MIT)
Copyright (c) 2016 papnkukn
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
## Introduction
This library has been written to generate a SVG image of QR Code in Node.js, goals:
* pure JavaScript
* no browser requirement
* no external dependencies
* generate SVG output
## Getting Started
Install the package:
```bash
npm install qrcode-svg
```
Inline example:
```javascript
var QRCode = require("qrcode-svg");
var svg = new QRCode("Hello World!").svg();
```
More options:
```javascript
var qrcode = new QRCode({
content: "http://github.com/",
padding: 4,
width: 256,
height: 256,
color: "#000000",
background: "#ffffff",
ecl: "M",
});
qrcode.save("sample.svg", function(error) {
if (error) throw error;
console.log("Done!");
});
```
## Options
**List of options:**
* **content** - QR Code content, the only **required** parameter
* **padding** - white space padding, `4` modules by default, `0` for no border
* **width** - QR Code width in pixels
* **height** - QR Code height in pixels
* **color** - color of modules (squares), color name or hex string, e.g. `#000000`
* **background** - color of background, color name or hex string, e.g. `white`
* **ecl** - error correction level: `L`, `M`, `H`, `Q`
* **join** - join modules (squares) into one shape, into the SVG `path` element, **recommended** for web and responsive use, default: `false`
* **predefined** - to create a squares as pattern, then populate the canvas, default: `false`, see the output examples below
* **pretty** - apply indents and new lines, default: `true`
* **swap** - swap X and Y modules, only if you have issues with some QR readers, default: `false`
* **xmlDeclaration** - prepend XML declaration to the SVG document, i.e. `<?xml version="1.0" standalone="yes"?>`, default: `true`
* **container** - wrapping element, default: `svg`, see below
**Container options:**
* **svg** - populate squares in a SVG document with `width` and `height` attriute, recommended for converting to raster images or PDF where QR Code is being static (exact size)
* **svg-viewbox** - populate squares in a SVG document with `viewBox` attriute, **recommended** for responsive web pages
* **g** - put squares in `g` element, useful when you need to put multiple QR Codes in a single SVG document
* **none** - no wrapper
## SVG output
### Editable squares
This mode is useful for designers to manipulate with particular squares.
Thus, one can open the QR Code in an editor, select particular modules, move around, change color, etc.
However, some old SVG viewers may generate minor gaps between the squares - the side effect when rendering an image at certain zoom level.
Default options
```javascript
var qrcode = new QRCode({
content: "Pretty Fox",
join: false,
predefined: false
});
```
Output with `rect` elements
```xml
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256">
<rect x="0" y="0" width="256" height="256" style="fill:#ffffff;shape-rendering:crispEdges;"/>
<rect x="16" y="16" width="8" height="8" style="fill:#000000;shape-rendering:crispEdges;"/>
<rect x="24" y="16" width="8" height="8" style="fill:#000000;shape-rendering:crispEdges;"/>
<rect x="32" y="16" width="8" height="8" style="fill:#000000;shape-rendering:crispEdges;"/>
...
</svg>
```
### Responsive web page
Squares joined into one `path` shape produce a compact file size, i.e. 4-5x reduced compared with `rect` elements.
A single `path` element will result in an optimized rendering, thus not producing any minor gaps between the squares.
Also using the container with `viewBox` attribute may contribute to the responsive scaling on the web.
Set `join` to `true`
```javascript
var qrcode = new QRCode({
content: "Pretty Fox",
join: true,
container: "svg-viewbox" //Useful but not required
});
```
Output with `path` element
```xml
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
<rect x="0" y="0" width="256" height="256" style="fill:beige;shape-rendering:crispEdges;"/>
<path x="0" y="0" style="fill:blue;shape-rendering:crispEdges;" d="M35.31,35.31 V44.14 H44.14 V35.31 H35.31 Z..." />
</svg>
```
### Predefined pattern
Algorithm defines the square pattern once before populating a canvas. Useful if you want to generate QR Code with candies.
However, some SVG software and converters do not support `defs` or `use` elements.
Set `predefined` to `true`
```javascript
var qrcode = new QRCode({
content: "Pretty Fox",
predefined: true
});
```
Output with `defs` and `use` elements
```xml
<?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="256" height="256">
<defs><path id="qrmodule" d="M0 0 h8.827586206896552 v8.827586206896552 H0 z" style="fill:maroon;shape-rendering:crispEdges;" /></defs>
<rect x="0" y="0" width="256" height="256" style="fill:beige;shape-rendering:crispEdges;"/>
<use x="35.310344827586206" y="35.310344827586206" href="#qrmodule" />
<use x="44.13793103448276" y="35.310344827586206" href="#qrmodule" />
<use x="52.96551724137931" y="35.310344827586206" href="#qrmodule" />
<use x="61.79310344827586" y="35.310344827586206" href="#qrmodule" />
<use x="70.62068965517241" y="35.310344827586206" href="#qrmodule" />
...
</svg>
```
## Command Line
```
Usage:
qrcode-svg [options] <content>
Options:
--help Print this message
--version, -v Print version number
--padding , -p [value] Offset in number of modules
--width, -w [px] Image width in pixels
--height, -h [px] Image height in pixels
--color, -fg [color] Foreground color, hex or name
--background [color] Background color, hex or name
--ecl [value] Error correction level: L, M, H, Q
--join Join modules into one SVG path, i.e. for crisp rendering
--predefined Use 'defs' and 'use' elements in SVG, i.e. for compact output
--no-prettify Avoid indenting and new lines in SVG, i.e. for compact output
--viewbox Use 'viewBox' instead of 'width' and 'height' attributes
--swap-fix Swap X and Y modules to fix issues with some QR readers
--output, -o [file] Output file name
--force, -f Force overwrite
Examples:
qrcode-svg http://github.com
qrcode-svg -f -o hello.svg "Hello World"
qrcode-svg -p 4 -w 256 -h 256 --join --viewbox "Responsive..."
qrcode-svg --padding 2 --width 120 --height 120 "Little fox..."
qrcode-svg --color blue --background #ececec "...jumps over"
```
## Usage Scenarios
### Convert to other formats
Using [html-pdf](https://www.npmjs.com/package/html-pdf) to convert SVG to PDF (or PNG or JPEG)
```javascript
var QRCode = require('qrcode-svg');
var svg = new QRCode('hello').svg();
...
var pdf = require('html-pdf');
pdf.create(svg, { border: 0, type: 'pdf' }).toFile('output.pdf', function(err, res) {
...
});
```
### ASCII modules
QR Code in ASCII to output in a shell
```javascript
var QRCode = require('qrcode-svg');
var hello = new QRCode("Hello World!");
var modules = hello.qrcode.modules;
var ascii = '';
var length = modules.length;
for (var y = 0; y < length; y++) {
for (var x = 0; x < length; x++) {
var module = modules[x][y];
ascii += (module ? 'x' : ' ');
}
ascii += '\r\n';
}
console.log(ascii);
```
```
xxxxxxx xx x x xxxxxxx
x x xxxx x x x x
x xxx x xx xx x x xxx x
x xxx x xx x xxx x
x xxx x x x x x xxx x
x x x xx xx x x
xxxxxxx x x x x x xxxxxxx
xx xx
x x xx x x xx x x
x x xx x xx x xx x
x x xx x x x xx xx
x xx xxx xx x x x x x
xx xxxx xxxx x
x x x xx x xx xx x xx xx
x xx xxxx xxxx
xx xx x x x x xx x
xxxx xxxx xxxxxx x
x x x
xxxxxxx x xxx x x x x
x x xxx x xx x x
x xxx x xxxxxxxxxx
x xxx x xxxxxxxxx x xx
x xxx x xxx xx x x x
x x x x x
xxxxxxx xxx xxx x x x
```
### Web browser
Use on a HTML page with JavaScript
```html
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="dist/qrcode.min.js"></script>
<script>
var qrcode = new QRCode({
content: "Hello World!",
container: "svg-viewbox", //Responsive use
join: true //Crisp rendering and 4-5x reduced file size
});
var svg = qrcode.svg();
document.getElementById("container").innerHTML = svg;
</script>
</body>
</html>
```
## Thanks
Thanks to [davidshimjs](https://github.com/davidshimjs/qrcodejs) for the base library.
Thanks to [Kazuhiko Arase](http://www.d-project.com/) for the original QR Code in JavaScript algorithm.
Thanks to all contributors on the GitHub.
## Legal notice
```
Licensed under the MIT license:
http://www.opensource.org/licenses/mit-license.php
The word "QR Code" is registered trademark of DENSO WAVE INCORPORATED
http://www.denso-wave.com/qrcode/faqpatent-e.html
```
\ No newline at end of file
var os = require('os');
var fs = require('fs');
var path = require('path');
var QRCode = require("./lib/qrcode.js");
//Default configuration
var config = {
verbose: process.env.NODE_VERBOSE == "true" || process.env.NODE_VERBOSE == "1"
};
//Command line interface
var args = process.argv.slice(2);
for (var i = 0; i < args.length; i++) {
switch (args[i]) {
case "--help":
help();
process.exit(0);
break;
//Padding in number of modules
case "-p":
case "--padding":
config.padding = parseFloat(args[++i]);
break;
//Width in pixels
case "-w":
case "--width":
config.width = parseFloat(args[++i]);
break;
//Height in pixels
case "-h":
case "--height":
config.height = parseFloat(args[++i]);
break;
//Foreground color
case "-fg":
case "--color":
config.color = args[++i];
break;
//Background color
case "-bg":
case "--background":
config.background = args[++i];
break;
case "--ecl":
config.ecl = args[++i];
break;
case "--join":
config.join = true;
break;
case "--predefined":
config.predefined = true;
break;
case "--viewbox":
config.container = "svg-viewbox";
break;
case "--no-prettify":
config.pretty = false;
break;