{"id":434,"date":"2024-01-07T06:32:20","date_gmt":"2024-01-07T06:32:20","guid":{"rendered":"https:\/\/slyquatics.com\/?page_id=434"},"modified":"2024-01-07T20:31:08","modified_gmt":"2024-01-07T20:31:08","slug":"434-2","status":"publish","type":"page","link":"https:\/\/slyquatics.com\/?page_id=434","title":{"rendered":"Filament Tracking"},"content":{"rendered":"\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><\/div>\n<\/div>\n\n\n\n<html>\n<head>\n<script>\n\/\/ This function creates a new item and adds it to the list\nfunction addItem() {\n  \/\/ Get the item name and value from the input fields\n  var itemName = document.getElementById(\"item-name\").value;\n  var itemValue = document.getElementById(\"item-value\").value;\n  \/\/ Create a new list item element\n  var li = document.createElement(\"li\");\n  \/\/ Set the text content of the list item to the item name and value\n  li.textContent = itemName + \": \" + itemValue + \"g\";\n  \/\/ Append the list item to the list element\n  var list = document.getElementById(\"item-list\");\n  list.appendChild(li);\n  \/\/ Clear the input fields\n  document.getElementById(\"item-name\").value = \"\";\n  document.getElementById(\"item-value\").value = \"\";\n\/\/ Loop through each list item\n\n  for (var a = 0; a < list.children.length; a++) {\n    \/\/ Get the current list item\n    var item = list.children[a];\n    \/\/ Check if the list item already has a button element\n    if (item.querySelector(\"button\") === null) {\n      \/\/ Create a button element\n      var button = document.createElement(\"button\");\n      \/\/ Set the button text to \"Delete\"\n      button.innerHTML = \"<span style='font-size:8'>Delete<\/span>\"\n      \/\/ Add a click event listener to the button\n      button.addEventListener(\"click\", function() {\n        \/\/ Remove the parent list item from the list\n        list.removeChild(this.parentNode);\n      });\n      \/\/ Append the button to the list item\n      item.appendChild(button);\n    }\n  }\n\n}\n\n\/\/ This function saves the list of items to a text file\n\nfunction saveToFile() {\n  \/\/ Get the list element and its children\n  var list = document.getElementById(\"item-list\");\n  var items = list.children;\n  \/\/ Create an empty string to store the data\n  var data = \"\";\n  \/\/ Loop through the items and append their text content to the data string\n  for (var i = 0; i < items.length; i++) {\n    data += items[i].textContent + \"\\n\";\n   data = data.replace(\"Delete\",\"\");\n  }\n  \/\/ Create a blob object from the data string\n  var blob = new Blob([data], {type: \"text\/plain\"});\n  \/\/ Create a URL for the blob object\n  var url = URL.createObjectURL(blob);\n  \/\/ Create a link element\n  var link = document.createElement(\"a\");\n  \/\/ Set the href attribute of the link to the blob URL\n  link.href = url;\n  \/\/ Set the download attribute of the link to the file name\n  link.download = \"Filaments.txt\";\n  \/\/ Append the link to the document body\n  document.body.appendChild(link);\n  \/\/ Click the link to download the file\n  link.click();\n  \/\/ Remove the link from the document body\n  document.body.removeChild(link);\n\n}\n\n\/\/ This function loads the list of items from a text file\nfunction loadFromFile() {\n  \/\/ Create a file input element\n  var input = document.createElement(\"input\");\n  \/\/ Set the type attribute of the input to file\n  input.type = \"file\";\n  \/\/ Set the onchange attribute of the input to a function that handles the file selection\n  input.onchange = function() {\n    \/\/ Get the selected file\n    var file = this.files[0];\n    \/\/ Create a file reader object\n    var reader = new FileReader();\n    \/\/ Set the onload attribute of the reader to a function that handles the file reading\n    reader.onload = function() {\n      \/\/ Get the result of the reader as a string\n      var data = this.result;\n      \/\/ Split the data string by newline characters\n      var lines = data.split(\"\\n\");\n      \/\/ Clear the list element\n      var list = document.getElementById(\"item-list\");\n      list.innerHTML = \"\";\n      \/\/ Loop through the lines and create list items for each line\n      for (var i = 0; i < lines.length; i++) {\n        \/\/ Skip empty lines\n        if (lines[i] == \"\") continue;\n        \/\/ Create a new list item element\n        var li = document.createElement(\"li\");\n        \/\/ Set the text content of the list item to the line\n        li.textContent = lines[i];\n        \/\/ Append the list item to the list element\n        list.appendChild(li);\n\/\/ Loop through each list item\n\n  for (var a = 0; a < list.children.length; a++) {\n    \/\/ Get the current list item\n    var item = list.children[a];\n    \/\/ Check if the list item already has a button element\n    if (item.querySelector(\"button\") === null) {\n      \/\/ Create a button element\n      var button = document.createElement(\"button\");\n      \/\/ Set the button text to \"Delete\"\n      button.innerHTML = \"<span style='font-size:8'>Delete<\/span>\"\n      \/\/ Add a click event listener to the button\n      button.addEventListener(\"click\", function() {\n        \/\/ Remove the parent list item from the list\n        list.removeChild(this.parentNode);\n      });\n      \/\/ Append the button to the list item\n      item.appendChild(button);\n    }\n  }\n\n      }\n    };\n    \/\/ Read the file as a text\n    reader.readAsText(file);\n  };\n  \/\/ Click the input to open the file dialog\n  input.click();\n}\n\n\/\/ This function subtracts an amount from the value of a selected item\nfunction subtractValue() {\n  \/\/ Get the amount to subtract from the input field\n  var amount = document.getElementById(\"amount\").value;\n  \/\/ Get the list element and its children\n  var list = document.getElementById(\"item-list\");\n  var items = list.children;\n  \/\/ Loop through the items and check if any of them is selected\n  for (var i = 0; i < items.length; i++) {\n    \/\/ Get the current item\n    var item = items[i];\n    \/\/ Check if the item has the selected class\n    if (item.classList.contains(\"selected\")) {\n      \/\/ Get the text content of the item\n      var text = item.textContent;\n      \/\/ Split the text by colon\n      var text= text.replace(\"g\",\"\");\n      var text= text.replace(\"Delete\",\"\");\t\n      var parts = text.split(\":\");\n      \/\/ Get the item name and value\n      var itemName = parts[0];\n      var itemValue = parts[1];\n      \/\/ Parse the item value as a number\n      var value = Number(itemValue);\n      \/\/ Subtract the amount from the value\n      value -= amount;\n      \/\/ Set the new text content of the item to the item name and the new value\n      item.textContent = itemName + \": \" + value + \"g\";\n      \/\/ Remove the selected class from the item\n      item.classList.remove(\"selected\");\n\/\/ Loop through each list item\n\n  for (var a = 0; a < list.children.length; a++) {\n    \/\/ Get the current list item\n    var item = list.children[a];\n    \/\/ Check if the list item already has a button element\n    if (item.querySelector(\"button\") === null) {\n      \/\/ Create a button element\n      var button = document.createElement(\"button\");\n      \/\/ Set the button text to \"Delete\"\n      button.innerHTML = \"<span style='font-size:8; padding: 0px 0px;''>Delete<\/span>\"\n      \/\/ Add a click event listener to the button\n      button.addEventListener(\"click\", function() {\n        \/\/ Remove the parent list item from the list\n        list.removeChild(this.parentNode);\n      });\n      \/\/ Append the button to the list item\n      item.appendChild(button);\n    }\n  }\n\n      \/\/ Break the loop\n      break;\n\n\n    }\n  }\n  \/\/ Clear the input field\n  document.getElementById(\"amount\").value = \"\";\n}\n\n\/\/ This function selects an item from the list when clicked\nfunction selectItem(event) {\n  \/\/ Get the list element and its children\n  var list = document.getElementById(\"item-list\");\n\n  var items = list.children;\n  \/\/ Loop through the items and remove the selected class from all of them\n  for (var i = 0; i < items.length; i++) {\n    items[i].classList.remove(\"selected\");\n  }\n  \/\/ Get the target element of the event\n  var target = event.target;\n  \/\/ Add the selected class to the target element\n  target.classList.add(\"selected\");\n\/\/ Loop through each list item\n\n  for (var a = 0; a < list.children.length; a++) {\n    \/\/ Get the current list item\n    var item = list.children[a];\n    \/\/ Check if the list item already has a button element\n    if (item.querySelector(\"button\") === null) {\n      \/\/ Create a button element\n      var button = document.createElement(\"button\");\n      \/\/ Set the button text to \"Delete\"\n      button.innerHTML = \"<span style='font-size:8'>Delete<\/span>\"\n      \/\/ Add a click event listener to the button\n      button.addEventListener(\"click\", function() {\n        \/\/ Remove the parent list item from the list\n        list.removeChild(this.parentNode);\n      });\n      \/\/ Append the button to the list item\n      item.appendChild(button);\n    }\n  }\n\n}\n\n<\/script>\n<style>\n\/* This style defines the appearance of the selected item *\/\n.selected {\n  background-color:  #3f4248;\n  color: White;\n}\n\ninput {\nborder-radius: 4px;\n  width: 25%;\n  color: #80848e;\n  border: none;\n  border-bottom: 1px solid grey-light;\n  outline: none;\n  font-size: 20px;\n  margin-bottom: 1.25rem;\npadding: 15px 15px;\n \n  background-color: #383a40;\n}\nbutton {\nborder-radius: 4px;\nbackground-color: #04AA6D; \/* Green *\/\nborder: none;\ncolor: white;\n\ntext-align: center;\ntext-decoration: none;\ndisplay: inline-block;\nfont-size: 16px;\nmargin-left: 1%;\n}\n\np\n{\nfont-size: 20px;\nfont-weight: bold;\nfont-family: Sans-serif;\n\n}\nul\n{\ndisplay: inline;\nfont-family: Sans-serif;\nfont-weight: bold;\nfont-size: 20px;\nlist-style-type: none\n}\ninput[type=file] {\n  font-size:14px;\n}\ninput[type=file]::file-selector-button {\n font-size:10px;\n  border: none;\n  background:#04AA6D;\n  border-radius: 10px;\n  color: #fff;\n  cursor: pointer;\n \n}\n<\/style>\n<\/head>\n<body>\n\n\n<div style='width: 70%; padding 10px; border-radius: 4px; border: 5px solid #80848e; background-color: #2b2d31; color: #80848e; margin: auto; text-align: center;'>\n<div style='text-align: left; margin-left:10%'>\n<p>Enter a Filament and its initial weight in grams.<\/p>\n\n\n<input type=\"text\" style='padding: 4px; margin-right: 10px;'id=\"item-name\" placeholder=\"Filament\">\n<input type=\"number\" style='padding: 4px; ' id=\"item-value\" placeholder=\"Weight\">\n<button style='padding: 10px 15px;' onclick=\"addItem()\">Add Filament<\/button>\n\n\n\n\n<p>Enter the weight of your print or Select a GCode File.<\/p>\n\n<input type=\"text\" style='padding: 4px' id=\"amount\" placeholder=\"Amount\"><button style='margin-left:13px;padding: 10px 15px;' onclick=\"subtractValue()\">Print Amount<\/button <form action=\"\/action_page.php\" method=\"post\" enctype=\"multipart\/form-data\">\n  <label for=\"gcode\"><\/label>\n  <input type=\"file\" id=\"gcode\" name=\"gcode\" accept=\".gcode\" style=\"margin-left:8px\">\n<\/form>\n<script>\n  \/\/ Get the file input element\n  var fileInput = document.getElementById(\"gcode\");\n  \/\/ Add a change event listener\n  fileInput.addEventListener(\"change\", function() {\n    \/\/ Get the selected file\n    var gfile = fileInput.files[0];\n    \/\/ Create a new FileReader object\n    var greader = new FileReader();\n    \/\/ Add a load event listener\n    greader.addEventListener(\"load\", function() {\n      \/\/ Get the file content as a string\n      var text = greader.result;\n      \/\/ Find the string \";Filament Weight:\"\n      var index = text.indexOf(\";Filament Weight:\");\n      \/\/ If found, extract the value after it\n      if (index !== -1) {\n        var weight = text.substring(index + 17).trim();\n\tweight = weight.split(\";\")[0];\n  \n       var amountinput = document.getElementById(\"amount\");\n\tamountinput.value = weight;\n\tamountinput.innerText = weight;\n      }\n    });\n    \/\/ Read the file as a text file\n    greader.readAsText(gfile);\n  });\n<\/script>\n\n<br \/>\n<p>Select the Filament you wish to print to:<ul id=\"item-list\" onclick=\"selectItem(event)\"><\/ul><\/p>\n\n\n<p style=\"text-align:right;padding-right:10%;\">\n<button style='padding: 10px 15px;' onclick=\"saveToFile()\">Save List<\/button> <button style='padding: 10px 15px;'onclick=\"loadFromFile()\">Load List<\/button><\/p>\n\n<script>\n\/\/ Serialize the ul element into a JSON string\nvar ulString = JSON.stringify(item-list);\n\n\/\/ Set the cookie with the name \"myUL\", the value of the ul string, and an expiration date of 3 hours from now\nvar date = new Date();\ndate.setTime(date.getTime() + 3 * 60 * 60 * 1000); \/\/ 3 hours in milliseconds\nvar expires = \"expires=\" + date.toUTCString();\ndocument.cookie = \"myUL=\" + ulString + \"; \" + expires;\n\n\/\/ Get the cookie with the name \"myUL\"\nvar cname = \"myUL=\";\nvar cookies = document.cookie.split(\";\");\nfor (var i = 0; i < cookies.length; i++) {\n  var cookie = cookies[i];\n  while (cookie.charAt(0) == \" \") {\n    cookie = cookie.substring(1);\n  }\n  if (cookie.indexOf(cname) == 0) {\n    var ulString = cookie.substring(cname.length, cookie.length);\n    break;\n  }\n}\n\n\/\/ Parse the ul string into an element\nvar ul = JSON.parse(ulString);\n\n\/\/ Append the ul element to the document body\ndocument.body.appendChild(ul);\n<\/script>\n<\/p>\n<\/div>\n<\/div>\n<\/body>\n<\/html>\n<\/style>\n<\/head>\n","protected":false},"excerpt":{"rendered":"<p>Enter a Filament and its initial weight in grams. Add Filament Enter the weight of your print or Select a GCode File. Print Amount<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-434","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/slyquatics.com\/index.php?rest_route=\/wp\/v2\/pages\/434","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/slyquatics.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/slyquatics.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/slyquatics.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/slyquatics.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=434"}],"version-history":[{"count":8,"href":"https:\/\/slyquatics.com\/index.php?rest_route=\/wp\/v2\/pages\/434\/revisions"}],"predecessor-version":[{"id":559,"href":"https:\/\/slyquatics.com\/index.php?rest_route=\/wp\/v2\/pages\/434\/revisions\/559"}],"wp:attachment":[{"href":"https:\/\/slyquatics.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}