This commit is contained in:
Lucas Verney 2017-09-27 02:24:51 +02:00
parent 6f363a3329
commit b8936ef6fc
7 changed files with 89 additions and 72 deletions

View File

@ -16,10 +16,12 @@
"dependencies": {
"es6-promise": "^4.1.1",
"isomorphic-fetch": "^2.2.1",
"quagga": "^0.12.1",
"vue": "^2.4.4",
"vue-router": "^2.7.0",
"vuetify": "^0.15.7",
"vuex": "^2.4.0"
"vuex": "^2.4.0",
"webrtc-adapter": "^5.0.4"
},
"devDependencies": {
"autoprefixer": "^7.1.2",

View File

@ -0,0 +1,20 @@
<template>
<v-layout row>
<v-flex xs7>
<v-list-tile-title>{{ name }}</v-list-tile-title>
</v-flex>
<v-flex xs5 class="text-xs-right">
<v-icon v-if="icon">{{ icon }}</v-icon>
<slot v-else />
</v-flex>
</v-layout>
</template>
<script>
export default {
props: {
name: String,
icon: String,
},
};
</script>

View File

@ -3,8 +3,9 @@ export default {
appDescription: 'InFood is your grocery companion app, to help you scan quickly facts about products you are about to buy.',
licenseDescription: 'It is available under a {MITLicense} and source code is hosted by {Github}. Please report any bugs {there}.',
MITLicense: 'MIT license',
OpenFoodFactsDescription: 'Products data is provided by {OpenFoodFacts} under {OpenDatabaseLicense}.',
OpenFoodFactsDescription: '{OpenFoodFacts} provides products data under {OpenDatabaseLicense} and illustrations under {CreativeCommonsBYSALicense}.',
OpenDatabaseLicense: 'Open Database License',
CreativeCommonsBYSALicense: 'CC BY SA',
},
misc: {
loading: 'Loading…',

View File

@ -6,7 +6,7 @@ import Home from '@/views/Home';
import ManualBarcode from '@/views/ManualBarcode';
import Product from '@/views/Product';
import Preferences from '@/views/Preferences';
import Scan from '@/views/Scan';
import Scan from '@/views/ScanQuagga';
Vue.use(Router);

View File

@ -11,8 +11,11 @@
<i18n path="about.OpenFoodFactsDescription" tag="p">
<a href="https://world.openfoodfacts.org/" place="OpenFoodFacts">OpenFoodFacts</a>
<a href="http://opendatacommons.org/licenses/odbl/1.0/" place="OpenDatabaseLicense">{{ $t('about.OpenDatabaseLicense') }}</a>
<a href="https://creativecommons.org/licenses/by-sa/3.0/deed.en" place="CreativeCommonsBYSALicense">{{ $t('about.CreativeCommonsBYSALicense') }}</a>
</i18n>
<p class="text-xs-center"><img src="/static/openfoodfacts.svg"/></p>
<p class="text-xs-center">
<a href="http://openfoodfacts.org/"><img src="/static/openfoodfacts.svg"/></a>
</p>
</v-container>
</template>

View File

@ -1,46 +1,42 @@
<template>
<div>
<Loading v-if="isLoading"/>
<v-container fluid v-else>
<v-layout row align-baseline>
<v-flex xs3 class="text-xs-center">
<v-container fluid grid-list-lg v-else>
<v-layout row wrap align-baseline>
<v-flex xs12>
<v-card>
<v-container fluid grid-list-lg>
<v-layout row mb-3>
<v-flex xs5>
<v-avatar size="100%">
<img :src="this.product.icon" :alt="product.name">
<img class="icon" :src="this.product.icon" />
</v-avatar>
</v-flex>
<v-flex xs7 class="text-xs-center">
<div>
<div class="headline">Herta</div>
<h2 class="title">{{ product.name }}</h2>
</div>
</v-flex>
</v-layout>
<v-layout row>
<v-tabs centered>
<v-tabs-items>
<v-tabs-content id="tab-overview">
<v-card flat>
<v-card-text>
</v-card-text>
<ProductOverviewItem name="Diet" icon="check_circle" />
<ProductOverviewItem name="Allergens" icon="clear" />
<ProductOverviewItem name="Nutriscore">
<span>A</span>
</ProductOverviewItem>
<ProductOverviewItem name="Labels">
<span>A</span>
</ProductOverviewItem>
<ProductOverviewItem name="Made">
<span>300km away</span>
</ProductOverviewItem>
</v-container>
</v-card>
</v-tabs-content>
<v-tabs-content id="tab-nutrition">
<v-card flat>
<v-card-text>
<v-data-table
hide-actions
>
<template slot="items" scope="props">
<td>{{ props.item.name }}</td>
</template>
</v-data-table>
</v-card-text>
</v-card>
</v-tabs-content>
<v-tabs-content id="tab-labels">
<v-card flat>
<v-card-text>Bidule</v-card-text>
</v-card>
</v-tabs-content>
</v-tabs-items>
</v-tabs>
</v-flex>
</v-layout>
</v-container>
<v-bottom-nav v-if="!isLoading" absolute :value="true" class="transparent">
<v-bottom-nav v-if="!isLoading" :value="true" class="white">
<v-btn flat class="teal--text" value="recent">
<span>Overview</span>
<v-icon>view_list</v-icon>
@ -50,8 +46,8 @@
<v-icon>info_outline</v-icon>
</v-btn>
<v-btn flat class="teal--text" value="recent">
<span>Labels</span>
<v-icon>info_outline</v-icon>
<span>Alerts</span>
<v-icon>warning</v-icon>
</v-btn>
</v-bottom-nav>
</div>
@ -59,10 +55,12 @@
<script>
import Loading from '@/views/Loading';
import ProductOverviewItem from '@/components/ProductOverviewItem';
export default {
components: {
Loading,
ProductOverviewItem,
},
created() {
this.$store.dispatch('setTitle', { title: '' });
@ -90,11 +88,10 @@ export default {
</script>
<style scoped>
.product-icon {
background-color: white;
border-radius: 100%;
}
.product-icon >>> img {
vertical-align: middle;
.icon {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%;
}
</style>

View File

@ -3,7 +3,7 @@
<h2>Let's scan something!</h2>
<h2>Found: {{ barcode }}</h2>
<div ref="video"></div>
<div id="interactive" class="viewport"></div>
<p v-if="!playing && error">{{ error }}</p>
</div>
</template>
@ -26,48 +26,42 @@ export default {
},
},
mounted() {
const videoElement = this.$refs.video;
const barcodeHandler = this.handleBarcode;
Quagga.init({
inputStream: {
name: 'Scan',
type: 'LiveStream',
constraints: {
width: { min: 640 },
height: { min: 480 },
facingMode: 'environment',
aspectRatio: { min: 1, max: 2 },
},
target: videoElement,
},
/* locator: {
patchSize: 'medium',
halfSample: true,
},
frequency: 10,
decoder: {
readers: [
'ean_reader',
],
debug: {
drawBoundingBox: true,
showFrequency: true,
drawScanline: true,
showPattern: true,
},
},
locate: true, */
}, (err) => {
if (err) {
this.error = err.toString();
return;
// return;
}
Quagga.start();
Quagga.onDetected(barcodeHandler);
// Quagga.start();
});
/* Quagga.onProcessed((result) => {
console.log(result);
}); */
},
beforeDestroy() {
Quagga.offDetected(this.handleBarcode);
Quagga.stop();
// Quagga.offDetected(this.handleBarcode);
// Quagga.stop();
},
};
</script>
<style>
/*canvas.drawingBuffer {
display: none;
}*/
</style>