Uploaded files

soilwater · Jan 30, 2021 · a2b9a4d · a2b9a4d
1 parent 79e6b78
commit a2b9a4d
Show file tree

Hide file tree

Showing 12 changed files with 866 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.md b/README.md
@@ -1 +1,33 @@
-# quadrat
+# Quadrat
+
+Quadrat is a digital and interactive version of the common quadrats, grids, or wire frames used in the field for 
+quantifying the abundance and cover of plant communities. Typically multiple quadrats are required in field conditions. The Quadrat web application is aimed at simplifying (when possible) field work by analyzing digital images. The digiral quadrat provides some advantages:
+
+- Images collected in the field can be re-analyzed at any time
+- Labeled images and the associated metadata (e.g. grid size, label descriptions, postion of each label, etc.) can be saved and become part of the project's documentation.
+- The interactive quadrat allows for fast labeling and erasing.
+- Set up custom grids to better fit different individuals and communities.
+- The web application does not require any software download or sign in.
+- Ensures user privacy by working with and saving files to your hard drive. Nothing is shared with or sent to an external server.
+- Once loaded in your browser, Quadrat will also work offline and in mobile devices.
+
+We recognize that a digital quadrat cannot replace field research since images represent a static view of the system under study and some organisms are difficult to identify from still images. Quadrat also resizes the image to fit in the screen so that the user does not need to scroll while labeling. This conveninet feature can result in the loss of some detail.
+
+## Instructions
+
+**Step 1**: Load an image
+
+**Step 2**: Create a rectangular grid ranging anywhere from 9 cells (3 by 3 grid) to 625 cells (25 by 25 grid). The grid can also accept any combination of rows and columns, meaning that rectangular cells are possible in either direction. Changing the grid will result in erasing all the information associated with the current grid, so be careful.
+
+**Step 3**: Add as many labels as you want. Each label accepts a custom color and a description. The custom color will aensure proper contrast with the background image.
+
+**Step 4**: Label the image using the mouse cursor. Colors have a transparency to see what is underneath the label (at least to some extent). Cell labels are mutually exclusive, meaning that each cell can only accept one label.
+
+**Step 5**: Download the labeled canvas, a spreadsheet with the labels for each cell. We also provide the option of downloading a [JSON](https://www.wikiwand.com/en/JSON) file with all the information including label names, descriptions, colors, etc.
+
+
+For feedback or ideas, please contact [email protected]. We are interesting on how you are suign this tool for research and teaching.
+
+
+
+This tool was built using two awesome libraries: [Materialize](https://materializecss.com/) and [p5](https://p5js.org/)
diff --git a/index.html b/index.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-126565767-3"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'UA-126565767-3');
+    </script>
+
+    <meta charset="utf-8">
+    <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
+    <meta content="quadrat, grid, frame, ecology, plant community, counting species, labeling, field, cover, abundance" name="keywords">
+    <meta content="An interactive quadrat for environmental research" name="description">
+    <title>Quadrat</title>
+    <link rel="stylesheet" href="public/css/quadrat.css">
+    <link rel="stylesheet" href="public/css/materialize.min.css">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+
+    <script src="p5/p5.min.js"></script>
+  </head>
+
+  <body>
+
+    <div class="container">
+
+      <!-- Banner -->
+      <div>
+        <h1 class="title" style="margin-bottom: 0px;">Quadrat</h1>
+        <h6 class="subtitle col m9" style="margin-top: 0px;">An interactive frame for environmental research</h6>
+      </div>
+
+      <!-- Main tool area -->
+      <div class="row" style="margin-top: 40px;">
+
+        <!-- Left control panel -->
+        <div class="col s3">
+
+          <label class="btn-flat col s12 m12 white" id="uploadImageBtn" style="margin-bottom: 10px; padding:0px; color: black; font-weight:bolder;"><span class="bullet">1.</span>Load Image</label>
+          <label class="btn-flat col s12 m12 white modal-trigger" id="createGridBtn" href="#modal-create-grid" style="margin-bottom:10px;padding:0px; color: black; font-weight:bolder;"><span class="bullet">2.</span>Generate Grid</label>
+          <label class="btn-flat col s12 m12 white modal-trigger" id="createLabelBtn" href="#modal-create-label" style="margin-bottom:10px;padding:0px; color: black; font-weight:bolder;"><span class="bullet">3.</span>Add Label</label>
+
+          <!-- Mode selection -->
+          <div style=" margin-top: 80px !important">
+            <label style="padding-right: 25px;">
+              <input class="with-gap radio-blue-grey" name="modeControls" id="highlightGrid" value="highlightGrid" type="radio" checked />
+              <span style="padding-left: 25px;">Highlight</span>
+            </label>
+            <label>
+              <input class="with-gap" name="modeControls" id="eraseGrid"  value="eraseGrid" type="radio" />
+              <span style="padding-left: 25px;">Erase</span>
+            </label>
+          </div>
+
+
+          <!-- User defined labels-->
+          <table class="col s12 m12 l12" id="table-labels" style="display: none; margin-top: 50px;">
+            <colgroup>
+              <col span="1" style="width: 5%;">
+              <col span="1" style="width: 40%;">
+              <col span="1" style="width: 40%;">
+              <col span="1" style="width: 15%;">
+            </colgroup>
+
+            <thead width='100%'>
+              <tr>
+                  <th class="left-align"></th>
+                  <th class="left-align">Label</th>
+                  <th class="center-align">Cover <span class="hide-on-small-only">%</span></th>
+                  <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+
+        </div>
+
+        <!-- Right image panel -->
+        <div class="col s9">
+          <div id="canvas" oncontextmenu="return false;"></div>
+
+          <div class="col m12 right-align" id="downloadControls" style="margin-top: 10px; display: none;">
+            <a class="btn col s12 m2 offset-m6 white" id="downloadImageBtn" style="margin-bottom: 10px; padding:0px; color: black; font-weight:bolder;">Canvas</a>
+            <a class="btn col s12 m2 white" id="downloadTableBtn" style="margin-bottom: 10px; padding:0px; color: black; font-weight:bolder;">Table</a>
+            <a class="btn col s12 m2 white" id="downloadJSONBtn" style="margin-bottom: 10px; padding:0px; color: black; font-weight:bolder;">JSON</a>  
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <hr style="width: 75%; margin-top: 50px;">
+    <footer style="margin-bottom: 10px;">
+      <div class="footer-copyright">
+        <div class="container">
+        © 2020 Copyright Andres Patrignani
+        <a class="right" style="color: #651fff" href="https://github.com/andres-patrignani/quadrat" target="_blank">Github</a>
+        </div>
+      </div>
+    </footer>
+
+    <!-- Modal Grid -->
+    <div id="modal-create-grid" class="modal col s6 m6">
+      <div class="modal-content container">
+
+        <h4>Create new grid</h4>
+        <table id="table-create-grid">
+          <colgroup>
+            <col span="1" style="width: 50%;">
+            <col span="1" style="width: 50%;">
+          </colgroup>
+          <tr>
+            <td style="padding-right: 15px !important;">
+              <label>Rows</label>
+              <input value="10" id="gridRows" type="number" min="3" max="25" onkeydown="return false">
+            </td>
+            <td style="padding-left: 15px !important;">
+              <label>Columns</label>
+              <input value="10" id="gridColumns" type="number" min="3" max="25" onkeydown="return false">
+            </td>
+          </tr>
+          <tr>
+            <td colspan="2">
+              <label>Quadrat description</label>
+              <input id="quadratDescription" type="text">
+            </td>
+          </tr>
+        </table>
+
+      </div>
+      <div class="modal-footer">
+        <a class="modal-close btn green darken-6 col s6" id="addGridBtn">Create grid</a>
+      </div>
+    </div>
+
+      <!-- Modal Labels -->
+      <div id="modal-create-label" class="modal col s6 m6">
+        <div class="modal-content container">
+
+          <h4>Create new label</h4>
+
+          <table id="table-create-label">
+            <colgroup>
+              <col span="1" style="width: 80%;">
+              <col span="1" style="width: 20%;">
+           </colgroup>
+            <tr>
+              <td style="padding-right: 10px;">
+                <label>Label name</label>
+                <input placeholder="Dandelions" id="labelName" type="text" maxlength="12" required>
+              </td>
+              <td>
+                <label>Label color</label>
+                <input type="color" value="#ff3d00" id="labelColor" style="width: 100%; height: 50px">
+              </td>
+            </tr>
+            <tr>
+              <td colspan="2">
+                <label>Label description</label>
+                <input id="labelDescription" type="text">
+              </td>
+            </tr>
+          </table>
+        </div>
+        <div class="modal-footer">
+          <a class="modal-close btn green darken-6 col s6" id="addLabelBtn">Add label</a>
+        </div>
+      </div>
+
+
+  <script src="public/js/materialize.min.js"></script>
+  <script src="public/js/quadrat.js"></script>
+  <script>  
+
+    //Sidenav
+    document.addEventListener('DOMContentLoaded', function() {
+      var elems = document.querySelectorAll('.sidenav');
+      var instances = M.Sidenav.init(elems, {'edge':'right'});
+    });
+
+    document.addEventListener('DOMContentLoaded', function() {
+      var elems = document.querySelectorAll('select');
+      var instances = M.FormSelect.init(elems);
+    });
+
+    document.addEventListener('DOMContentLoaded', function() {
+      var elems = document.querySelectorAll('.modal');
+      var instances = M.Modal.init(elems);
+    });
+
+  </script>
+
+  </body>
+</html>
diff --git a/p5/README.txt b/p5/README.txt
@@ -0,0 +1,66 @@
+# Welcome to p5.js
+
+You have downloaded the complete p5.js library ZIP file, yay!
+
+# Contents of the p5 folder
+
+* p5.js file
+* p5.min.js file
+* addons folder
+  * p5.sound.js
+  * p5.sound.min.js
+* empty-example folder
+  * index.html
+  * p5.js
+  * p5.sound.js
+  * sketch.js
+
+## p5.js
+
+This file stores the complete p5.js library. It is easy to read by humans, so feel free to open it and explore its contents. It also has a friendly error system, which helps new programmers with common user errors.
+
+## p5.min.js
+
+This file is a minified version of the p5.js file. It is a lighter version, with the same functionalities, but smaller file size. This minified version is harder to read for humans, and does not include the friendly error system.
+
+## addons folder
+
+The addons folder includes additional p5.js related libraries, in both original versions and minified versions.
+
+### p5.sound.js, p5.sound.min.js
+
+p5.sound extends p5.js with Web Audio functionality including audio input, playback, analysis, and synthesis.
+
+## empty-example folder
+
+This is an empty example of a website. The folder includes the file for the website, index.html, the p5.js library, other related p5.js libraries, and a template starting point for your p5.js sketch, called sketch.js.
+
+### index.html
+
+index.html is a template for an HTML file. This index.html first imports the libraries included in the folder (p5.js, p5.sound.js) then loads and executes the file sketch.js which is where you can write your own code.
+
+### sketch.js
+
+The sketch.js is a template for the p5.js sketch, with the functions setup() and draw() that you can complete.
+
+## README.txt
+
+This README file formatted with Markdown :)
+
+# What's next?
+
+If you need more information to help get you started, please refer to our website:  
+https://p5js.org/get-started/ and https://p5js.org/learn/
+
+An online reference to the p5.js library is available here:  
+https://p5js.org/reference/
+
+In order to run your website (including the empty-example), you need to enable a local server, please see this tutorial in our wiki:  
+https://github.com/processing/p5.js/wiki/Local-server
+
+p5.js is a community and p5.js is built by contributions. If you want to learn more about us, visit:  
+https://p5js.org/community/
+
+# License
+
+The p5.js library is free software; you can redistribute it and/or modify it under the terms of the GNU Lesser General Public License as published by the Free Software Foundation, version 2.1.
diff --git a/p5/p5.min.js b/p5/p5.min.js
diff --git a/public/css/Aldrich/Aldrich-Regular.ttf b/public/css/Aldrich/Aldrich-Regular.ttf
diff --git a/public/css/Aldrich/OFL.txt b/public/css/Aldrich/OFL.txt
@@ -0,0 +1,93 @@
+Copyright (c) 2011, Matthew Desmond (http://www.madtype.com | [email protected]),with Reserved Font Name Aldrich.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.