Whose turn is it anyway? Augmented reality board games.

Board games are great, but who has time to keep track of what's going on when you just want to have fun? In the spirit of over-engineering we'll look at PitchCar -- probably one of the simplest games in the world -- and see how far we can go with web tech, image processing, and a bunch of math. Expect to see plenty of code, some surprising problems and solutions, and of course: A live demo.

Transcript

22. <vue-webcam ref='webcam'></vue-webcam> <button type="button" @click="take_photo">Take Photo</button> <img :src="photo">
23. this.photo methods: { take_photo () { this.photo = this.$refs.webcam.getPhoto(); } }
28. <img src="data:image/png;base64,iVBORw0K...">
29. ✔
33. import ActionCable from 'actioncable' const cable = ActionCable.createConsumer('wss://' + process.env.RAILS_URL.replace(/.*?:\/\//g, '') + '/cable') Vue.prototype.$cable = cable
34. created () { this.videoChannel = this.$cable.subscriptions.create( { channel: 'VideoChannel' }, ...
35. this.videoChannel.send({ image: uriEncodedImage }) class VideoChannel < ApplicationCable::Channel def receive(data) uri_encoded_image = data['image'] end end
36. +-----------------------+ | | | +--------------+ | action +----------+ | | | | cable | | | | <element> | +------------> | Rails | | | | | | | | | </element> | <------------+ | server | | | | | | | | +--------------+ | +----------+ | | +-----------------------+
37. methods: { take_photo () { this.photo = this.$refs.webcam.getPhoto() this.videoChannel.send({image: this.photo}) } }
40. ✔ ✔
46. class VideoChannel < ApplicationCable::Channel def receive(data) uri = URI::Data.new data['image_uri'] data = uri.data # aka after the comma File.open('image.jpg', 'wb') do |f| f.write data end image = IplImage.load 'image.jpg'
47. image = IplImage.load 'image.jpg'
51. ✔ ✔ ✔
52. image = IplImage.load 'image.jpg'
54. blue = CvScalar.new 0x00, 0x80, 0xFF mask = image.eq blue
56. mask.save_image 'tmp/output.png' mask_data = File.open('tmp/output.png', 'rb').read mask_base64 = Base64.strict_encode64 mask_data mask_uri = "data:image/png;base64,#{mask_base64}"
57. <img src="data:image/png;base64,iVBORw0K...">
60. min max min max
61. mask = image.in_range min, max ... mask_uri = "data:image/png;base64,#{mask_base64}" ColorChannel.broadcast_to 'blue' mask_uri: mask_uri
62. this.channel = this.$cable.subscriptions.create( { channel: 'ColorChannel' }, { received (data) { this.mask_uri = data.mask_uri <img :src="mask_uri">
63. min max ✔ min max
64. <input v-model="range.red.min" @change="setHSV" /> <input v-model="range.red.max" @change="setHSV" /> <input v-model="range.green.min" @change="setHSV" /> <input v-model="range.green.max" @change="setHSV" /> <input v-model="range.blue.min" @change="setHSV" /> <input v-model="range.blue.max" @change="setHSV" /> methods: { setHSV: function () { this.channel.perform('set_hsv_range', { range: this.range })
65. class VideoChannel < ApplicationCable::Channel def set_hsv_range(data) range = JSON.parse data['range'] min = CvScalar.new range['red']['min'], # ... max = CvScalar.new range['red']['max'], # ... # .... mask = image.in_range min, max end end
69. circles = mask.hough_circles # ... car = circles.first if car CarChannel.broadcast_to 'blue', x: car.x, y: car.y else CarChannel.broadcast_to 'blue', missing: true end
71. ✔ ✔ ✔ ✔
79. ✔
86. ✔ ✔ ✔ ✔ ✔