Skip to content

Commit d957007

Browse files
pulbytepulbyte
committed
Simply Working
1 parent a5f8a87 commit d957007

17 files changed

+150
-34
lines changed

‎android/app/capacitor.build.gradle

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
1111
dependencies {
1212
implementation project(':capacitor-community-camera-preview')
1313
implementation "androidx.exifinterface:exifinterface:1.2.0"
14+
implementation "androidx.legacy:legacy-support-v4:1.0.0"
1415
}
1516

1617

‎android/app/src/main/res/xml/config.xml

+4
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,9 @@
77
<param name="onload" value="true"/>
88
</feature>
99

10+
<feature name="SocialSharing">
11+
<param name="android-package" value="nl.xservices.plugins.SocialSharing"/>
12+
</feature>
13+
1014

1115
</widget>

‎package-lock.json

+23
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+4
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,14 @@
2424
"@capacitor/core": "2.4.5",
2525
"@ionic-native/camera-preview": "^5.30.0",
2626
"@ionic-native/core": "^5.0.0",
27+
"@ionic-native/social-sharing": "^5.30.0",
2728
"@ionic-native/splash-screen": "^5.0.0",
2829
"@ionic-native/status-bar": "^5.0.0",
2930
"@ionic/angular": "^5.0.0",
31+
"@ionic/pwa-elements": "^3.0.2",
3032
"cordova-plugin-camera-preview": "^0.12.1",
33+
"cordova-plugin-x-socialsharing": "^6.0.2",
34+
"es6-promise-plugin": "^4.2.2",
3135
"rxjs": "~6.5.5",
3236
"tslib": "^2.0.0",
3337
"zone.js": "~0.10.3"

‎src/app/capture/capture.page.ts

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {
2-
ResultActionPanelComponent
3-
} from './components/result-action-panel/result-action-panel.component';
2+
ResultModalComponent
3+
} from './components/result-modal/result-modal.component';
44
import {
55
ImageColorizerService
66
} from './../core/services/image-colorizer.service';
@@ -56,12 +56,15 @@ export class CapturePage implements OnInit {
5656
const imageUrl = `${base64PictureData}`;
5757
this.formData.set("image", imageUrl)
5858
await this.presentLoading().then(el => {
59-
el.present();
60-
this.ImageColorizerService.colorizeImage(this.formData).subscribe(res => {
61-
console.log(res)
62-
el.dismiss()
63-
this.presentResultModal(res['output_url'])
64-
})
59+
this.presentResultModal(`https://api.deepai.org/job-view-file/dddaa450-ddf7-4d89-b1e4-af5ef39c45ec/outputs/output.jpg`) // dummy image
60+
61+
// el.present();
62+
// this.ImageColorizerService.colorizeImage(this.formData).subscribe(res => {
63+
// console.log(res)
64+
// el.dismiss()
65+
66+
// //this.presentResultModal(res['output_url']) // 'https://api.deepai.org/job-view-file/dddaa450-ddf7-4d89-b1e4-af5ef39c45ec/outputs/output.jpg'
67+
// })
6568
})
6669

6770

@@ -87,7 +90,7 @@ formData = new FormData
8790

8891
async presentResultModal(data) {
8992
const modal = await this.modalController.create({
90-
component: ResultActionPanelComponent,
93+
component: ResultModalComponent,
9194
componentProps: {
9295
'data' : data
9396
}

‎src/app/capture/components/result-action-panel/result-action-panel.component.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11

22
<div class="container">
3-
<div class="action upload-file-bttn pointer ripple-parent ion-activatable"
4-
(click)="downloadResult()">
5-
<i class="uil uil-download-alt"></i>
6-
<ion-ripple-effect></ion-ripple-effect>
7-
</div>
3+
<a target="_blank" [href]="image" download><div class="action upload-file-bttn pointer ripple-parent ion-activatable">
4+
<i class="uil uil-download-alt"></i>
5+
<ion-ripple-effect></ion-ripple-effect>
6+
</div></a>
7+
88

99
<div class="action pointer ripple-parent ion-activatable" id="capture-bttn"
1010
(click)="shareResult()">

‎src/app/capture/components/result-action-panel/result-action-panel.component.scss

+1-3
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,7 @@
2626
i{
2727
font-size: 1.4rem;
2828
}
29-
#capture-bttn{
30-
background-color: rgb(12, 12, 12);
31-
}
29+
3230
}
3331

3432
.upload-file-bttn {

‎src/app/capture/components/result-action-panel/result-action-panel.component.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
1+
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
22

33
@Component({
44
selector: 'result-action-panel',
@@ -10,14 +10,16 @@ export class ResultActionPanelComponent implements OnInit {
1010
constructor() { }
1111

1212
ngOnInit() {
13-
console.log('Hlo - action')
13+
1414
}
1515
@Output('exit') exitComponent = new EventEmitter()
16+
@Output('share') shareImage = new EventEmitter()
17+
@Input('imageUrl') image
1618

17-
downloadResult(){
1819

19-
}
2020
shareResult(){
21+
this.shareImage.emit()
22+
2123

2224
}
2325
goBack(){

‎src/app/capture/components/result-modal/result-modal.component.html

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<ion-content>
2-
<ion-back-button defaultHref="home"></ion-back-button>
3-
<p>hhdhhhs</p>
2+
3+
<div class="output-image">
44
<img [src]="data" alt="">
5-
<!-- <result-action-panel (exit)="exitModal()"></result-action-panel> -->
6-
<p>hhdhhhs</p>
7-
</ion-content>
5+
</div>
6+
7+
8+
</ion-content>
9+
10+
<ion-footer class="transparent ion-no-border" transparent>
11+
<result-action-panel (share)="shareImage()" [imageUrl]="data" (exit)="exitModal()"></result-action-panel>
12+
13+
</ion-footer>

‎src/app/capture/components/result-modal/result-modal.component.scss

+33-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,34 @@
1-
img{
2-
object-fit: contain;
1+
2+
.output-image{
3+
width: 100%;
4+
height: 100%;
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
img{
9+
object-fit: contain;
10+
background: url('../../../../assets/images/color-fillup-gif.gif') no-repeat;
11+
}
12+
}
13+
.back-bttn{
14+
z-index: 1;
15+
position: fixed;
16+
top: .4rem;
17+
left: .56rem;
18+
width: fit-content;
19+
}
20+
21+
22+
ion-back-button{
23+
width: fit-content;
24+
margin: 0;
25+
--icon-font-size : 1.4rem;
26+
--background :transparent;
27+
--background-hover : var(--ion-color-step-200);
28+
--border-radius : 11px;
29+
$padding : .3rem;
30+
--padding-start: $padding;
31+
--padding-top: $padding;
32+
--padding-end: $padding;
33+
--padding-bottom: $padding;
334
}

‎src/app/capture/components/result-modal/result-modal.component.ts

+19-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
import { Component, EventEmitter,Output, Input, OnInit } from '@angular/core';
2+
import {
3+
Plugins
4+
} from "@capacitor/core"
5+
import { ModalController } from '@ionic/angular';
6+
import { title } from 'process';
7+
8+
const { Share } = Plugins
29

310
@Component({
411
selector: 'capture-result-modal',
@@ -7,7 +14,7 @@ import { Component, EventEmitter,Output, Input, OnInit } from '@angular/core';
714
})
815
export class ResultModalComponent implements OnInit {
916

10-
constructor() { }
17+
constructor(private modalCtrl: ModalController) { }
1118
@Input('data') data;
1219
ngOnInit() {
1320
console.log('Hlo')
@@ -16,9 +23,18 @@ export class ResultModalComponent implements OnInit {
1623

1724
@Output('exit') exitEvent = new EventEmitter
1825

19-
exitModal(){
26+
async exitModal(){
27+
2028
this.exitEvent.emit()
29+
await this.modalCtrl.dismiss();
2130
}
22-
31+
shareImage(){
32+
Share.share({
33+
title : "Colorized photo",
34+
url : this.data
35+
}
36+
37+
)
38+
}
2339

2440
}

‎src/assets/icon/favicon.png

-930 Bytes
Binary file not shown.

‎src/assets/icons/app-icon.png

11.8 KB
Loading

‎src/assets/icons/app-icon.svg

+25
Loading

‎src/assets/images/color-fillup-gif.gif

24.5 KB
Loading

‎src/index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
<head>
55
<meta charset="utf-8" />
6-
<title>Colorize Images</title>
6+
<title>Kalar - Colorize Images</title>
77

88
<base href="/" />
99

@@ -12,8 +12,8 @@
1212
<meta name="format-detection" content="telephone=no" />
1313
<meta name="msapplication-tap-highlight" content="no" />
1414

15-
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
16-
<script src="https://cdnjs.deepai.org/deepai.min.js"></script>
15+
<link rel="icon" type="image/png" href="assets/icons/app-icon.png" />
16+
1717
<!-- add to homescreen for ios -->
1818
<meta name="apple-mobile-web-app-capable" content="yes" />
1919
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

‎src/main.ts

+3
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,6 @@ if (environment.production) {
1010

1111
platformBrowserDynamic().bootstrapModule(AppModule)
1212
.catch(err => console.log(err));
13+
14+
import { defineCustomElements } from '@ionic/pwa-elements/loader'
15+
defineCustomElements(window)

0 commit comments

Comments
 (0)