Can generate GIF's now!

Hi friends,

I was able to generate a GIF programmatically its not the best approach yet but its something. This is a simple script but it gives me momentum to keep up with the concept of the project. Many times projects are stopped or get on hold while the perfect solution magically happens, I believe that once you are able to achieve something or solve a small problem you will be further in the timeline and close to fix the next problem that for sure will arise.

The problem started as the simple possible approach, download or grab the live image from a webcam. Store it and then later make sure to generate a GIF. Sure thing I'm still way too far from being able to generate an activity alert or report once an anormal activity is found, but its something and way more than most will get. Keep adding few features, code, lines, validations and you will end up with something that will be robust and usable.

The logic behind the GIF generation was to grab all the images that match a search criteria so basically I used the following format to save each image: object/name-YearMonthDayHourMinutes so that will get me something like: poas-20191028 and that's exactly how I'm retrieving which images to take for the GIF generation script. Certainly a friend of my pointed out the possibility of running out of space but my answer was, that my friend will surely be a problem in the future but that will be a problem to solve next.

Focus on a problem and make sure to fix it or solve it with the minimum effort possible and keep up with momentum. Is the project over? Nah, each time something is added there are way more stuff that gets added to the backlog so make sure to take a look at the script and then things that are next to be implemented.

const GIFEncoder = require('gifencoder')
const { createCanvas, Image } = require('canvas')
const fs = require('fs')
const glob = require('glob')

const width = parseInt(process.env.WIDTH) || 854
const height = parseInt(process.env.HEIGHT) || 480
const match = process.env.MATCH
const when = new Date()
const format = `${when.getFullYear()}${when.getMonth() + 1}${when.getDate()}${when.getHours()}${when.getMinutes()}`

console.log(`W: ${width} H: ${height} M:${match}`)

const encoder = new GIFEncoder(width, height)
const pics = glob.sync(`images/${match}*.jpg`)
const canvas = createCanvas(width, height)
const ctx = canvas.getContext('2d')

encoder.createReadStream().pipe(fs.createWriteStream(`gifs/${match}${format}.gif`))

encoder.start()
encoder.setRepeat(0)
encoder.setDelay(500)
encoder.setQuality(10)

for (let i = 0; i < pics.length; i++) {
  console.log(`Image: ${pics[i]}`)
  const data = fs.readFileSync(__dirname + `/${pics[i]}`)
  const img = new Image()
  img.src = data
  ctx.drawImage(img, 0, 0, width, height)
  encoder.addFrame(ctx)
}
encoder.finish()

TODO

• Verify when an image has been successfully downloaded or not (attempt to download it again?)
• Exclude corrupted images from GIF generation
• Clean up images once a day? Make sure that images that were used to generate a GIF are then removed or archived.
• Start creating baseline image for future image analysis
• Want to detect anormal activity and automatically generate a post
• Grab weather conditions from page
• Track seismic activity
• Analyze weather conditions and seismic activity when there has been an anormal activity detected
• Steem post creation

---

Previous posts that belong to this project:

• Volcano project
• First pull request
• GIF creation not as simple as it seems

---

@raserrano - Developer

---