add phorkie and qr code

This commit is contained in:
Jörg Thalheim 2012-10-04 19:07:15 +02:00
parent f1222bb324
commit 8f5df14a85
6 changed files with 1358 additions and 3 deletions

View File

@ -21,6 +21,11 @@ section
li
i.icon-trash
a href="http://paste.higgsboson.tk" title="encrypted pastebin" Zerobin
' or
a href="http://phork.higgsboson.tk" title="gist clone" Phorkie
li
i.icon-qrcode
a href="http://higgsboson.tk/qr" title="html5 qr-code generator" QR-Generator
li
i.icon-lock
a href="/privat.html" title="Internal pages" Privat

View File

@ -23,8 +23,8 @@ html.no-js.light lang="en"
/! Mobile viewport optimized: j.mp/bplateviewport
meta content="width=device-width,initial-scale=1" name="viewport"
== stylesheet_link_tag "site.css"
link href='https://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'
link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'
link href='//fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'
link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'
== yield_content :head
/ Respond is a polyfill for min/max-width media queries.
/ Modernizr enables HTML5 elements & feature detects;

26
source/qr/README Normal file
View File

@ -0,0 +1,26 @@
This example shows how you can create a QR Code PNG using Javascript and HTML5.
Notes:
---
This is the heart of my Tab Transmit Safari Extension.
You can downloaded it from:
http://ticklespace.com/tab-transmit-safari-extension
or
https://extensions.apple.com/
Tab Transmit is listed under Productivity.
Author:
---
Amanuel Tewolde / TickleSpace - www.ticklespace.com
Copyright (c) 2011 Amanuel Tewolde
License:
---
MIT
Other Projects:
---
QRCode.js Copyright (c) 2009 Kazuhiko Arase

64
source/qr/html5-qrcode.js Normal file
View File

@ -0,0 +1,64 @@
//---------------------------------------------------------------------
// JavaScript-HTML5 QRCode Generator
//
// Copyright (c) 2011 Amanuel Tewolde
//
// Licensed under the MIT license:
// http://www.opensource.org/licenses/mit-license.php
//
//---------------------------------------------------------------------
// Generates a QRCode of text provided.
// First QRCode is rendered to a canvas.
// The canvas is then turned to an image PNG
// before being returned as an <img> tag.
function showQRCode(text) {
var dotsize = 5; // size of box drawn on canvas
var padding = 10; // (white area around your QRCode)
var black = "rgb(0,0,0)";
var white = "rgb(255,255,255)";
var QRCodeVersion = 15; // 1-40 see http://www.denso-wave.com/qrcode/qrgene2-e.html
var canvas=document.createElement('canvas');
var qrCanvasContext = canvas.getContext('2d');
try {
// QR Code Error Correction Capability
// Higher levels improves error correction capability while decreasing the amount of data QR Code size.
// QRErrorCorrectLevel.L (5%) QRErrorCorrectLevel.M (15%) QRErrorCorrectLevel.Q (25%) QRErrorCorrectLevel.H (30%)
// eg. L can survive approx 5% damage...etc.
var qr = new QRCode(QRCodeVersion, QRErrorCorrectLevel.L);
qr.addData(text);
qr.make();
}
catch(err) {
var errorChild = document.createElement("p");
var errorMSG = document.createTextNode("QR Code FAIL! " + err);
errorChild.appendChild(errorMSG);
return errorChild;
}
var qrsize = qr.getModuleCount();
canvas.setAttribute('height',(qrsize * dotsize) + padding);
canvas.setAttribute('width',(qrsize * dotsize) + padding);
var shiftForPadding = padding/2;
if (canvas.getContext){
for (var r = 0; r < qrsize; r++) {
for (var c = 0; c < qrsize; c++) {
if (qr.isDark(r, c))
qrCanvasContext.fillStyle = black;
else
qrCanvasContext.fillStyle = white;
qrCanvasContext.fillRect ((c*dotsize) +shiftForPadding,(r*dotsize) + shiftForPadding,dotsize,dotsize); // x, y, w, h
}
}
}
var imgElement = document.createElement("img");
imgElement.src = canvas.toDataURL("image/png");
return imgElement;
}

45
source/qr/index.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="qrcode.js">
</script>
<script type="text/javascript" src="html5-qrcode.js">
</script>
<title>
QRCode Generator Example
</title>
<style type="text/css" media="screen">
body { text-align:center; }
</style>
</head>
<body>
<h1>
QRCode Generator Example
</h1>
<form name="QRform" id="QRform">
<textarea name="textField" rows="8" cols="50" onkeyup='updateQRCode(this.value)' onclick="this.focus();this.select();">I love QR Codes. Type in here and watch the QR code below update.</textarea>
</form>
<!-- This is where our QRCode will appear in. -->
<div id="qrcode"></div>
<script type="text/javascript">
function updateQRCode(text) {
var element = document.getElementById("qrcode");
var bodyElement = document.body;
if(element.lastChild)
element.replaceChild(showQRCode(text), element.lastChild);
else
element.appendChild(showQRCode(text));
}
updateQRCode('I love QR Codes. Type in here and watch the QR code below update.');
</script>
<p><a href="https://github.com/amanuel/JS-HTML5-QRCode-Generator" onmouseover="updateQRCode(this.href)">Project Homepage</a></p>
<p><a href="http://ticklespace.com" onmouseover="updateQRCode(this.href)">TickleSpace</a></p>
</body>
</html>

1215
source/qr/qrcode.js Normal file

File diff suppressed because it is too large Load Diff