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": { "dependencies": {
"es6-promise": "^4.1.1", "es6-promise": "^4.1.1",
"isomorphic-fetch": "^2.2.1", "isomorphic-fetch": "^2.2.1",
"quagga": "^0.12.1",
"vue": "^2.4.4", "vue": "^2.4.4",
"vue-router": "^2.7.0", "vue-router": "^2.7.0",
"vuetify": "^0.15.7", "vuetify": "^0.15.7",
"vuex": "^2.4.0" "vuex": "^2.4.0",
"webrtc-adapter": "^5.0.4"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^7.1.2", "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.', 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}.', licenseDescription: 'It is available under a {MITLicense} and source code is hosted by {Github}. Please report any bugs {there}.',
MITLicense: 'MIT license', 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', OpenDatabaseLicense: 'Open Database License',
CreativeCommonsBYSALicense: 'CC BY SA',
}, },
misc: { misc: {
loading: 'Loading…', loading: 'Loading…',

View File

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

View File

@ -11,8 +11,11 @@
<i18n path="about.OpenFoodFactsDescription" tag="p"> <i18n path="about.OpenFoodFactsDescription" tag="p">
<a href="https://world.openfoodfacts.org/" place="OpenFoodFacts">OpenFoodFacts</a> <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="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> </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> </v-container>
</template> </template>

View File

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

View File

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