Memes

README.md

@@ -1,12 +1,12 @@
 # CSE110 SP21 Lab 5
 
 ## Author(s):
-- YOUR NAME
+- Aasem Fituri
 
 ## Part 1:
 
-LINK TO YOUR PUBLISHED SITE
+https://aasemfituri.github.io/Lab5/
 
 ## Part 2:
 
-LINK TO YOUR PART 2 REPOSITORY
+https://github.com/aasemfituri/github-actions-for-ci/issues/7

script.js

@@ -1,16 +1,155 @@
 // script.js
 
 const img = new Image(); // used to load image from <input> and draw to canvas
+var reset = document.querySelector('button[type=reset]');
+var read = document.querySelector('button[type=button');
+var canvas = document.getElementById('user-image');
+var ctx = canvas.getContext('2d');
+//ctx.fillRect(0,0,canvas.width, canvas.height);
+ctx.font = '36px calibri';
+ctx.textAlign = 'center';
+var submit = document.querySelector('button[type=submit]');
+var inp = document.getElementById('image-input');
+var dim = getDimensions(canvas.width, canvas.height, img.width, img.height);
+var inp = document.getElementById('image-input');
+var syn = window.speechSynthesis;
+var voice = document.getElementById('voice-selection');
+var opt = document.querySelector('select');
+//var voices = syn.getVoices();
+//alert(voices.length);
+var voices = [];
+var topText;
+var botText;
+var volimg = document.querySelector('div img');
+var vol = document.querySelector('[type=range]');
+var talk;
+var syn = window.speechSynthesis;
+var talk = new SpeechSynthesisUtterance();
+
+/*voice.addEventListener('load', function() {
+  var syn = window.speechSynthesis;
+  voices = syn.getVoices();
+  for(let i = 0; i < voices.length; i++)
+  {
+    var op = document.createElement('option');
+    op.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+    op.setAttribute('data-lang', voices[i].lang);
+    op.setAttribute('data-name', voices[i].name);
+    opt.appendChild(op);
+  }
+});
+*/
+
+
+read.addEventListener('click', function() {
+  //syn = window.speechSynthesis;
+  talk.text = topText + botText;
+  for(let i = 0; i < voices.length; i++)
+  {
+    if(opt.selectedOptions[0].getAttribute('data-name') === voice[i].getAttribute('data-name'))
+    {
+      talk.voice = voices[i];
+      break;
+    }
+  }
+  syn.speak(talk);
+});
+
+inp.addEventListener('input', function() {
+  ctx.fillStyle = 'black';
+  ctx.fillRect(0,0,canvas.width,canvas.height);
+  //ctx.fillStyle = 'white';
+  img.src = URL.createObjectURL(inp.files[0]);
+});
 
 // Fires whenever the img object loads a new image (such as with img.src =)
 img.addEventListener('load', () => {
   // TODO
+  ctx.fillStyle = 'black';
+  var dim = getDimensions(canvas.width, canvas.height, img.width, img.height);
+  ctx.drawImage(img,dim['startX'],dim['startY'],dim.width,dim.height);
+  ctx.fillRect(0,0,canvas.width,canvas.height/10);
+  ctx.fillRect(0,canvas.height*.9,canvas.width,canvas.height/10);
+});
+
+document.getElementById('generate-meme').addEventListener('submit', function(event) {
+  //ctx.fillStyle = 'black';
+  //ctx.fillRect(0,0,canvas.width,canvas.height);
+  topText = document.getElementById('text-top').value;
+  botText = document.getElementById('text-bottom').value;
+  //ctx.fillRect(0,0,canvas.width,canvas.height/10);
+  //ctx.fillRect(0,canvas.height*.9,canvas.width,canvas.height/10);
+  ctx.fillStyle = 'white';
+  ctx.fillText(topText, canvas.width/2, canvas.height/10);
+  ctx.fillText(botText, canvas.width/2, canvas.height);
+
+  //var syn = window.speechSynthesis;
+  voices = syn.getVoices();
+  opt.textContent = '';
+  for(let i = 0; i < voices.length; i++)
+  {
+    var op = document.createElement('option');
+    op.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+    op.setAttribute('data-lang', voices[i].lang);
+    op.setAttribute('data-name', voices[i].name);
+    opt.appendChild(op);
+  }
+  event.preventDefault();
+  submit.toggleAttribute('disabled');
+  read.toggleAttribute('disabled');
+  reset.toggleAttribute('disabled');
+  voice.toggleAttribute('disabled');
+});
+
+reset.addEventListener('click', function() {
+  submit.toggleAttribute('disabled');
+  //ctx.fillStyle = 'black';
+  //ctx.fillRect(0,0,canvas.width,canvas.height);
+  //ctx.fillStyle = 'white';
+  ctx.clearRect(0,0,canvas.width,canvas.height);
+  read.toggleAttribute('disabled');
+  voice.toggleAttribute('disabled');
+  reset.toggleAttribute('disabled');
+  document.getElementById('generate-meme').reset();
+});
+
+vol.addEventListener('change', () =>{
+  //var volume = document.querySelector('[type=range]');
+  //volume.setAttribute('value',vol.childNodes[3].value);
+  talk.volume = vol.value/100;
+  if(talk.volume >= 0.67)
+  {
+    volimg.setAttribute('src','icons/volume-level-3.svg');
+  }
+  else if(talk.volume >= 0.34 && talk.volume < 0.67)
+  {
+    volimg.setAttribute('src','icons/volume-level-2.svg');
+  }
+  else if(talk.volume > 0 && talk.volume < 0.34)
+  {
+    volimg.setAttribute('src','icons/volume-level-1.svg');
+  }
+  else
+  {
+    volimg.setAttribute('src','icons/volume-level-0.svg');
+  }
+});
+
+
+
+
+
+
+//reset.addEventListener('click', function() {
+//});
+
+
 
   // Some helpful tips:
   // - Fill the whole Canvas with black first to add borders on non-square images, then draw on top
   // - Clear the form when a new image is selected
   // - If you draw the image to canvas here, it will update as soon as a new image is selected
-});
+
 
 /**
  * Takes in the dimensions of the canvas and the new image, then calculates the new
@@ -23,7 +162,7 @@ img.addEventListener('load', () => {
  * and also the starting X and starting Y coordinate to be used when you draw the new image to the
  * Canvas. These coordinates align with the top left of the image.
  */
-function getDimmensions(canvasWidth, canvasHeight, imageWidth, imageHeight) {
+function getDimensions(canvasWidth, canvasHeight, imageWidth, imageHeight) {
   let aspectRatio, height, width, startX, startY;
 
   // Get the aspect ratio, used so the picture always fits inside the canvas