first commit

johnsorrentino · Feb 3, 2023 · 2bbc5f2 · 2bbc5f2
1 parent 0468c0e
commit 2bbc5f2
Show file tree

Hide file tree

Showing 34 changed files with 1,746 additions and 3,247 deletions.
diff --git a/README.md b/README.md
@@ -1,82 +1,25 @@
-# Favicon.js
+# guitartuner.js
 
 Favicon.js is a lightweight library that allows you to create ICO and PNG formatted favicons from a canvas element.
 
-## Examples
+## Demo
 
 ```
 yarn install
-yarn examples
+yarn watch
+yarn demo
 ```
 
-### Generate ICO
+## NPM
 
-Generate an ICO file from a `<canvas>` element. Initialize a `Favicon.Ico` object with a canvas element. The canvas should be square for best results. Pass the generate method an array of sizes that the (layered) ICO file should contain.
+Local package testing.
 
-```JavaScript
-const favicon = new FaviconJS(canvas);
-const dataurl = favicon.ico([16, 32, 48]);
 ```
-
-### Generate PNG
-
-Generate a PNG file from a `canvas` element. Initialize a `Favicon.Png` object with a canvas element. The canvas should be square for best results. Pass the generate method the size that should be generated.
-
-```JavaScript
-const favicon = new FaviconJS(canvas);
-const dataurl = favicon.png(32);
+npm install ../guitartuner.js
 ```
 
-### Generate Bundle
-
-Generate multiple favicon format based on current best practices.
+This is in a private NPM repo.
 
-```JavaScript
-const favicon = new FaviconJS(canvas);
-const package = favicon.bundle();
 ```
-
-The bundle will contain the follow keys which map to common favicon formats.
-
-- `ico` - favicon.ico
-- `png16` - favicon-16x16.png
-- `png32` - favicon-32x32.png
-- `png180` - apple-touch-icon.png
-- `png192` - android-chrome-192x192.png
-- `png512` - android-chrome-512x512.png
-
-### Example
-
-The example below will generate an ICO formatted favicon that includes 3 sizes: 16x16, 32x32, and 48x48 pixels. The full example can be found [here](./examples/ico.html).
-
-![Preview](./examples/preview.png)
-
-```JavaScript
-// Setup canvas
-const canvas = document.getElementById("canvas");
-canvas.width = 128;
-canvas.height = 128;
-const context = canvas.getContext("2d");
-
-// Draw background
-context.fillStyle = "#d85537";
-context.fillRect(0, 0, canvas.width, canvas.height);
-
-// Draw text
-context.fillStyle = "#FFFFFF";
-context.font = "100px Helvetica";
-context.textBaseline = "middle";
-context.textAlign = "center";
-const x = canvas.width / 2;
-const y = canvas.height / 2;
-context.fillText("F", x, y);
-
-// Create favicon.ico dataurl
-const favicon = new FaviconJS(canvas);
-const dataurl = favicon.ico([16, 32, 48]);
-
-// Activate the download button
-const download = document.getElementById("download");
-download.href = dataurl;
-download.setAttribute("download", "favicon.ico");
+npm publish
 ```
diff --git a/demo/index.css b/demo/index.css
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="./index.css" />
+    <script type="module" src="./index.js"></script>
+    <title>GuitarTunerJS</title>
+  </head>
+  <body>
+    <button id="start">Start</button>
+    <button id="stop">Stop</button>
+  </body>
+</html>
diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,14 @@
+import GuitarTuner from "../dist/guitartuner.mjs";
+
+const guitarTuner = new GuitarTuner();
+const startButton = document.getElementById("start");
+const stopButton = document.getElementById("stop");
+startButton.addEventListener("click", () => {
+  guitarTuner.start();
+});
+stopButton.addEventListener("click", () => {
+  guitarTuner.stop();
+});
+guitarTuner.setCallback(function (frequency, note) {
+  console.log(frequency, note);
+});