Browse Source

add page to take a picture and upload to an image server

kb/add-usage-guide
Trent Larson 9 months ago
parent
commit
c696de33f3
  1. 6
      package-lock.json
  2. 1
      package.json
  3. 3
      project.task.yaml
  4. 12
      src/components/GiftedDialog.vue
  5. 4
      src/main.ts
  6. 6
      src/router/index.ts
  7. 89
      src/views/GiftedPhoto.vue

6
package-lock.json

@ -53,6 +53,7 @@
"readable-stream": "^4.4.2",
"reflect-metadata": "^0.1.13",
"register-service-worker": "^1.7.2",
"simple-vue-camera": "^1.1.3",
"three": "^0.156.1",
"ua-parser-js": "^1.0.37",
"util": "^0.12.5",
@ -25432,6 +25433,11 @@
"node": ">= 5.10.0"
}
},
"node_modules/simple-vue-camera": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/simple-vue-camera/-/simple-vue-camera-1.1.3.tgz",
"integrity": "sha512-GVAYq1BMI9cHt+h24tu2dfIFFvhjVQ1M8IkK5LmrKcYoBA8FZlLNlhrHC2NnTPbMAXIvJn1Bqx8X6Q31+Y2+jA=="
},
"node_modules/sirv": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",

1
package.json

@ -53,6 +53,7 @@
"readable-stream": "^4.4.2",
"reflect-metadata": "^0.1.13",
"register-service-worker": "^1.7.2",
"simple-vue-camera": "^1.1.3",
"three": "^0.156.1",
"ua-parser-js": "^1.0.37",
"util": "^0.12.5",

3
project.task.yaml

@ -20,7 +20,7 @@ tasks :
- 32 image on give :
- Show a camera to take a picture
- Scale the image to a reasonable size
- Upload to a public readable place
- Upload to a public readable place - restrict size, catch all errors, multiple file types
- check the rate limits
- use CID (hash?)
- put the image URL in the claim
@ -40,6 +40,7 @@ tasks :
- show previous on "Your" screen
- checkboxes - randomize vs show in order, show non-person-oriented messages, show only contacts, show only projects
- .5 add a notice on the front page if their notifications are off
- 08 allow user to add a time when they want their daily notification
- .5 prompt for the name directly when they visit the QR scan page

12
src/components/GiftedDialog.vue

@ -36,8 +36,16 @@
<fa icon="chevron-right" />
</div>
</div>
<div class="mt-2 text-right">
<span v-if="showGivenToUser" class="mr-16">
<div class="mt-2 flex justify-between">
<span>
<router-link
:to="{ name: 'gifted-photo' }"
class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
>
<fa icon="camera" class="fa-fw" />
</router-link>
</span>
<span v-if="showGivenToUser">
<input type="checkbox" class="mr-2" v-model="givenToUser" />
<label class="text-sm">Given to you</label>
</span>

4
src/main.ts

@ -18,6 +18,7 @@ import {
faBitcoinSign,
faBurst,
faCalendar,
faCamera,
faChevronLeft,
faChevronRight,
faCircle,
@ -76,6 +77,7 @@ library.add(
faBitcoinSign,
faBurst,
faCalendar,
faCamera,
faChevronLeft,
faChevronRight,
faCircle,
@ -127,9 +129,11 @@ library.add(
);
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import Camera from "simple-vue-camera";
createApp(App)
.component("fa", FontAwesomeIcon)
.component("camera", Camera)
.use(createPinia())
.use(VueAxios, axios)
.use(router)

6
src/router/index.ts

@ -84,6 +84,12 @@ const routes: Array<RouteRecordRaw> = [
component: () =>
import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
},
{
path: "/gifted-photo",
name: "gifted-photo",
component: () =>
import(/* webpackChunkName: "gifted-photo" */ "../views/GiftedPhoto.vue"),
},
{
path: "/help",
name: "help",

89
src/views/GiftedPhoto.vue

@ -0,0 +1,89 @@
<template>
<!-- CONTENT -->
<section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
<!-- Breadcrumb -->
<div class="mb-8">
<!-- Back -->
<div class="text-lg text-center font-light relative px-7">
<h1
class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
@click="$router.back()"
>
<fa icon="chevron-left" class="fa-fw"></fa>
</h1>
</div>
<!-- Heading -->
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4">
Photo
</h1>
</div>
<div v-if="localImageUrl">
Dude, you got an image! Dude, you got an image!
</div>
<div v-else>
<camera
:resolution="{ width: 375, height: 812 }"
facingMode="user"
autoplay
ref="camera"
>
<button @click="storeImage">I'm on top of the video</button>
</camera>
</div>
</section>
</template>
<script lang="ts">
import axios from "axios";
import Camera from "simple-vue-camera";
import { Component, Vue } from "vue-facing-decorator";
interface Notification {
group: string;
type: string;
title: string;
text: string;
}
@Component({ components: { Camera } })
export default class GiftedPhoto extends Vue {
$notify!: (notification: Notification, timeout?: number) => void;
localImageUrl: string | null = null;
async storeImage(/* payload: MouseEvent */) {
const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
const blob = await cameraComponent?.snapshot();
if (!blob) {
this.$notify(
{
group: "alert",
type: "danger",
title: "Error",
text: "There was an error taking the picture. Please try again.",
},
-1,
);
return;
}
//this.localImageUrl = URL.createObjectURL(blob);
console.log("Got an image:", blob?.size);
const formData = new FormData();
formData.append("image", blob, "snapshot.jpg");
try {
const response = await axios.post(
"http://localhost:3000/image",
formData,
);
console.log("Upload successful", response.data);
} catch (error) {
console.error("Error uploading the image", error);
}
}
}
</script>
Loading…
Cancel
Save