Skip to content

Commit 560079e

Browse files
wttdotmwttdotm
committed
basics
1 parent 4331102 commit 560079e

File tree

3 files changed

+255
-0
lines changed

3 files changed

+255
-0
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
# solLewittQRCodes
2+
3+
A small proof of concept for making Sol LeWitt-esque written instructions for any QR code under 8 characters

‎numberInput.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<meta charset="UTF-8">
4+
<title>Page Title</title>
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<link rel="stylesheet" href="">
7+
<style>
8+
body {
9+
font-family: 'Source Code Pro', monospace;
10+
}
11+
@import url('https://web.archive.org/web/20230512043741cs_/https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
12+
</style>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
14+
15+
<body>
16+
<p>Input the QR code you want to make (max 8 characters)</p>
17+
<form id="qrForm">
18+
<h1>input</h1>
19+
<input type="text" id="qrSource" class="form-control" placeholder="max 8 characters">
20+
<button type="submit">Submit</button>
21+
</form>
22+
<script>
23+
let qrForm = document.getElementById("qrForm");
24+
console.log(qrForm)
25+
qrForm.addEventListener("submit", (e) => {
26+
e.preventDefault();
27+
28+
let qrSource = document.getElementById("qrSource");
29+
30+
if (qrSource.value == "") {
31+
alert('lol u forgot to enter something')
32+
return
33+
} else if (qrSource.length > 8) {
34+
alert('too long plz choose dif input')
35+
return
36+
} else {
37+
window.location.href = `./qrTesting.html?qrCode=${qrSource.value}`;
38+
}
39+
return
40+
});
41+
</script>
42+
</body>
43+
</html>

‎qrTesting.html

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<meta charset="UTF-8">
4+
<title>Page Title</title>
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<link rel="stylesheet" href="">
7+
<style>
8+
body {
9+
font-family: 'Source Code Pro', monospace;
10+
}
11+
@import url('https://web.archive.org/web/20230512043741cs_/https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
12+
</style>
13+
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
14+
<body>
15+
16+
<!-- <img src="img_la.jpg" alt="LA" style="width:100%"> -->
17+
18+
<div id="qrcode"></div>
19+
<div id="instructions">
20+
<p>Make a 21x21 square grid</p>
21+
22+
<p>Divide it into nine squares of 7x7 units each</p>
23+
24+
Within the upper left, upper right, and bottom left squares, make the same shape, a square with:<br/>
25+
An internal black border one unit thick<br/>
26+
A white border one unit thick within that black border<br/>
27+
A black 3x3 square within that white border<br/></div>
28+
<script type="text/javascript">
29+
const searchParams = new URLSearchParams(window.location.search);
30+
31+
const qrText = searchParams.get('qrCode')
32+
var qrcode = new QRCode(document.getElementById("qrcode"), {
33+
text: qrText || "69",
34+
width: 128,
35+
height: 128,
36+
colorDark : "#000000",
37+
colorLight : "#ffffff",
38+
correctLevel : QRCode.CorrectLevel.Q
39+
});
40+
console.log(qrcode)
41+
42+
43+
let qrAsTFArray = qrcode._oQRCode.modules
44+
45+
if (qrAsTFArray.length > 21) alert('2 big')
46+
47+
console.log(qrcode._oQRCode.modules)
48+
49+
let positionToWordArr = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'final']
50+
51+
function moreBlack (arr) {
52+
let totalBlack = 0
53+
let totalWhite = 0
54+
arr.forEach(el => {
55+
if (el) totalBlack++
56+
else totalWhite++
57+
})
58+
return totalBlack > totalWhite ? true : false
59+
}
60+
61+
function colToArr (arr, col) {
62+
let colArr = []
63+
arr.forEach(el => {
64+
colArr.push(el[col])
65+
})
66+
return colArr
67+
}
68+
69+
70+
function describeArr (arr) {
71+
let isMoreBlack = moreBlack(arr)
72+
73+
//this .find method is a bad way to do this but oh well
74+
//row is all black
75+
if (isMoreBlack && arr.find(el => el !== isMoreBlack) === undefined) return "black"
76+
//row is all white
77+
if (!isMoreBlack && arr.find(el => el !== isMoreBlack) === undefined) return "white"
78+
79+
//find all instances of minorityCells
80+
let minorityCells = []
81+
arr.forEach((cell, ind) => {
82+
if (isMoreBlack && !cell) minorityCells.push(ind)
83+
if (!isMoreBlack && cell) minorityCells.push(ind)
84+
})
85+
86+
87+
//cases (ironically the oxford comma makes this annoying):
88+
switch (minorityCells.length) {
89+
//1 min cell (__)
90+
case 1:
91+
return `${isMoreBlack ? 'black' : 'white'}, except the ${positionToWordArr[minorityCells[0]]} cell, which should be ${!isMoreBlack ? 'black' : 'white'}`
92+
break
93+
//2 min cells (_ and _)
94+
case 2:
95+
return `${isMoreBlack ? 'black' : 'white'}, except the ${positionToWordArr[minorityCells[0]]} and ${positionToWordArr[minorityCells[1]]} cells, which should be ${!isMoreBlack ? 'black' : 'white'}`
96+
break
97+
//3 min cells (_, __, and )
98+
case 3:
99+
return `${isMoreBlack ? 'black' : 'white'}, except the ${positionToWordArr[minorityCells[0]]}, ${positionToWordArr[minorityCells[1]]}, and ${positionToWordArr[minorityCells[2]]} cells, which should be ${!isMoreBlack ? 'black' : 'white'}`
100+
}
101+
102+
}
103+
104+
function describeColumn (arr, col) {
105+
let colAsArr = colToArr(arr, col)
106+
let secondHalf = describeArr(colAsArr)
107+
let returnedString = `Fill in the ${positionToWordArr[col]} column with ${secondHalf}`
108+
document.getElementById("instructions").innerHTML += returnedString + '<br>';
109+
console.log(returnedString)
110+
}
111+
112+
function describeRow (arr, ind) {
113+
let secondHalf = describeArr(arr)
114+
let returnedString = `Fill in the ${positionToWordArr[ind]} row with ${secondHalf}`
115+
document.getElementById("instructions").innerHTML += returnedString + '<br>';
116+
console.log(returnedString)
117+
}
118+
119+
120+
// array splitting tedium
121+
let topMiddleArr = []
122+
for (let i = 0; i < 7; i++) {
123+
let arrToPush = []
124+
for (let j = 7; j < 14; j++) {
125+
arrToPush.push(qrAsTFArray[i][j])
126+
}
127+
topMiddleArr.push(arrToPush)
128+
}
129+
130+
let centerLeftArr = []
131+
for (let i = 7; i < 14; i++) {
132+
let arrToPush = []
133+
for (let j = 0; j < 7; j++) {
134+
arrToPush.push(qrAsTFArray[i][j])
135+
}
136+
centerLeftArr.push(arrToPush)
137+
}
138+
139+
let centerMiddleArr = []
140+
for (let i = 7; i < 14; i++) {
141+
let arrToPush = []
142+
for (let j = 7; j < 14; j++) {
143+
arrToPush.push(qrAsTFArray[i][j])
144+
}
145+
centerMiddleArr.push(arrToPush)
146+
}
147+
148+
let centerRightArr = []
149+
for (let i = 7; i < 14; i++) {
150+
let arrToPush = []
151+
for (let j = 14; j < 21; j++) {
152+
arrToPush.push(qrAsTFArray[i][j])
153+
}
154+
centerRightArr.push(arrToPush)
155+
}
156+
157+
let bottomMiddleArr = []
158+
for (let i = 14; i < 21; i++) {
159+
let arrToPush = []
160+
for (let j = 7; j < 14; j++) {
161+
arrToPush.push(qrAsTFArray[i][j])
162+
}
163+
bottomMiddleArr.push(arrToPush)
164+
}
165+
166+
let bottomRightArr = []
167+
for (let i = 14; i < 21; i++) {
168+
let arrToPush = []
169+
for (let j = 14; j < 21; j++) {
170+
arrToPush.push(qrAsTFArray[i][j])
171+
}
172+
bottomRightArr.push(arrToPush)
173+
}
174+
175+
// row-based ones:
176+
// centerLeftArr, centerRightArr, centerMiddleArr (either but easier to keep a row for middle consistency)
177+
178+
// col-based ones:
179+
// topMiddleArr, bottomMiddleArr, bottomRightArr
180+
181+
function processColBasedArr (arr, pos) {
182+
console.log(`For the ${pos} square, fill it in as follows:`)
183+
document.getElementById("instructions").innerHTML += `<br/> For the ${pos} square, fill it in as follows: <br/>`;
184+
// not using a forEach here bc we are technically not iterating thru the parent arr
185+
for (let i = 0; i < arr.length; i++) {
186+
describeColumn(arr, i)
187+
}
188+
}
189+
190+
function processRowBasedArr (arr, pos) {
191+
console.log(`For the ${pos} square, fill it in as follows:`)
192+
document.getElementById("instructions").innerHTML += `<br/> For the ${pos} square, fill it in as follows: <br/>`;
193+
arr.forEach((el, ind) => describeRow(el, ind))
194+
}
195+
196+
//do these in order, top to bottom, ltr
197+
processColBasedArr(topMiddleArr, 'upper middle')
198+
processRowBasedArr(centerLeftArr, 'center left')
199+
processRowBasedArr(centerMiddleArr, 'center')
200+
processRowBasedArr(centerRightArr, 'center right')
201+
processColBasedArr(bottomMiddleArr, 'lower middle')
202+
processColBasedArr(bottomRightArr, 'lower right')
203+
204+
205+
206+
207+
</script>
208+
209+
</body>
210+
</html>

0 commit comments

Comments
 (0)