Skip to content

Commit

Permalink
New film exif metadata and editable exif
Browse files Browse the repository at this point in the history
  • Loading branch information
@mczachurski
mczachurski committed Aug 25, 2024
1 parent 414286b commit 02fe006
Show file tree
Hide file tree
Showing 8 changed files with 171 additions and 46 deletions.
111 changes: 86 additions & 25 deletions src/app/components/widgets/upload-photo/upload-photo.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,29 +64,90 @@
</mat-select>
</mat-form-field>

<div *ngIf="photo.make || photo.model || photo.lens || photo.createDate || photo.focalLenIn35mmFilm || photo.fNumber || photo.exposureTime || photo.photographicSensitivity" class="text-muted">Exif metadata</div>
<mat-checkbox *ngIf="photo.make" [name]="'make' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showMake">
<span class="text-muted">Manufacturer:</span> {{ photo.make }}
</mat-checkbox>
<mat-checkbox *ngIf="photo.model" [name]="'model' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showModel">
<span class="text-muted">Model:</span> {{ photo.model }}
</mat-checkbox>
<mat-checkbox *ngIf="photo.lens" [name]="'lens' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showLens">
<span class="text-muted">Lens:</span> {{ photo.lens }}
</mat-checkbox>
<mat-checkbox *ngIf="photo.createDate" [name]="'createDate' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showCreateDate">
<span class="text-muted">Create date:</span> {{ photo.createDate }}
</mat-checkbox>
<mat-checkbox *ngIf="photo.focalLenIn35mmFilm" [name]="'focalLenIn35mmFilm' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showFocalLenIn35mmFilm">
<span class="text-muted">Focal length:</span> {{ photo.focalLenIn35mmFilm }}
</mat-checkbox>
<mat-checkbox *ngIf="photo.fNumber" [name]="'fNumber' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showFNumber">
<span class="text-muted">Aperture:</span> {{ photo.fNumber }}
</mat-checkbox>
<mat-checkbox *ngIf="photo.exposureTime" [name]="'exposureTime' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showExposureTime">
<span class="text-muted">Exposure time:</span> {{ photo.exposureTime }}
</mat-checkbox>
<mat-checkbox *ngIf="photo.photographicSensitivity" [name]="'photographicSensitivity' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showPhotographicSensitivity">
<span class="text-muted">ISO:</span> {{ photo.photographicSensitivity }}
</mat-checkbox>
<div class="text-muted">Exif metadata</div>
<div class="exif-values">
<div class="flex-row flex-responsive flex-stretch gap-16 small-text-input margin-bottom-10">
<mat-checkbox class="exif-label" [name]="'make' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showMake">
<span class="text-muted">Manufacturer:</span>
</mat-checkbox>
<mat-form-field appearance="outline" class="flex-grow-2">
<input matInput [name]="'inputMake' + index" [(ngModel)]="photo.make" [disabled]="!photo.showMake" aria-label="Manufacturer" />
</mat-form-field>
</div>

<div class="flex-row flex-responsive flex-stretch gap-16 small-text-input margin-bottom-10">
<mat-checkbox class="exif-label" [name]="'model' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showModel">
<span class="text-muted">Model:</span>
</mat-checkbox>
<mat-form-field appearance="outline" class="flex-grow-2">
<input matInput [name]="'inputModel' + index" [(ngModel)]="photo.model" [disabled]="!photo.showModel" aria-label="Model" />
</mat-form-field>
</div>

<div class="flex-row flex-responsive flex-stretch gap-16 small-text-input margin-bottom-10">
<mat-checkbox class="exif-label" [name]="'lens' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showLens">
<span class="text-muted">Lens:</span>
</mat-checkbox>
<mat-form-field appearance="outline" class="flex-grow-2">
<input matInput [name]="'inputLens' + index" [(ngModel)]="photo.lens" [disabled]="!photo.showLens" aria-label="Lens" />
</mat-form-field>
</div>

<div class="flex-row flex-responsive flex-stretch gap-16 small-text-input margin-bottom-10">
<mat-checkbox class="exif-label" [name]="'focalLenIn35mmFilm' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showFocalLenIn35mmFilm">
<span class="text-muted">Focal length:</span>
</mat-checkbox>
<mat-form-field appearance="outline" class="flex-grow-2">
<input matInput [name]="'inputFocalLenIn35mmFilm' + index" [(ngModel)]="photo.focalLenIn35mmFilm" [disabled]="!photo.showFocalLenIn35mmFilm" aria-label="Focal length" />
<span class="text-muted" matSuffix>mm&nbsp;&nbsp;</span>
</mat-form-field>
</div>

<div class="flex-row flex-responsive flex-stretch gap-16 small-text-input margin-bottom-10">
<mat-checkbox class="exif-label" [name]="'fNumber' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showFNumber">
<span class="text-muted">Aperture:</span>
</mat-checkbox>
<mat-form-field appearance="outline" class="flex-grow-2">
<span class="text-muted" matTextPrefix>f/</span>
<input matInput [name]="'inputFNumber' + index" [(ngModel)]="photo.fNumber" [disabled]="!photo.showFNumber" aria-label="Aperture" />
</mat-form-field>
</div>

<div class="flex-row flex-responsive flex-stretch gap-16 small-text-input margin-bottom-10">
<mat-checkbox class="exif-label" [name]="'exposureTime' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showExposureTime">
<span class="text-muted">Exposure time:</span>
</mat-checkbox>
<mat-form-field appearance="outline" class="flex-grow-2">
<input matInput [name]="'inputExposureTime' + index" [(ngModel)]="photo.exposureTime" [disabled]="!photo.showExposureTime" aria-label="Exposure time" />
<span class="text-muted" matSuffix>sec&nbsp;&nbsp;</span>
</mat-form-field>
</div>

<div class="flex-row flex-responsive flex-stretch gap-16 small-text-input margin-bottom-10">
<mat-checkbox class="exif-label" [name]="'photographicSensitivity' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showPhotographicSensitivity">
<span class="text-muted">ISO:</span>
</mat-checkbox>
<mat-form-field appearance="outline" class="flex-grow-2">
<input matInput [name]="'inputPhotographicSensitivity' + index" [(ngModel)]="photo.photographicSensitivity" [disabled]="!photo.showPhotographicSensitivity" aria-label="ISO" />
</mat-form-field>
</div>

<div class="flex-row flex-responsive flex-stretch gap-16 small-text-input margin-bottom-10">
<mat-checkbox class="exif-label" [name]="'film' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showFilm">
<span class="text-muted">Film:</span>
</mat-checkbox>
<mat-form-field appearance="outline" class="flex-grow-2">
<input matInput [name]="'inputFilm' + index" [(ngModel)]="photo.film" [disabled]="!photo.showFilm" aria-label="ISO" />
</mat-form-field>
</div>

<div class="flex-row flex-responsive flex-stretch gap-16 small-text-input margin-bottom-10">
<mat-checkbox class="exif-label" [name]="'createDate' + index" color="primary" [disableRipple]="true" [(ngModel)]="photo.showCreateDate">
<span class="text-muted">Create date:</span>
</mat-checkbox>
<mat-form-field appearance="outline" class="flex-grow-2">
<input matInput type="datetime-local" [name]="'inputCreateDate' + index" [ngModel]="photo.createDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="photo.createDate = $event" [disabled]="!photo.showCreateDate" aria-label="Create date" />
</mat-form-field>
</div>
</div>
</div>
10 changes: 10 additions & 0 deletions src/app/components/widgets/upload-photo/upload-photo.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.exif-label {
width: 140px;
margin-top: 8px;
}

.exif-values {
::ng-deep .mat-mdc-form-field-subscript-wrapper {
height: 0;
}
}
1 change: 1 addition & 0 deletions src/app/models/exif.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,5 @@ export class Exif {
public fNumber?: string;
public exposureTime?: string;
public photographicSensitivity?: string;
public film?: string;
}
1 change: 1 addition & 0 deletions src/app/models/temporary-attachment.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export class TemporaryAttachment {
public fNumber?: string;
public exposureTime?: string;
public photographicSensitivity?: string;
public film?: string;
public locationId?: string;
public licenseId?: string;
}
20 changes: 11 additions & 9 deletions src/app/models/upload-photo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,23 +9,25 @@ export class UploadPhoto {
public locationId?: string;
public licenseId?: string;

public showMake = true;
public showModel = true;
public showLens = true;
public showCreateDate = true;
public showFocalLenIn35mmFilm = true;
public showFNumber = true;
public showExposureTime = true;
public showPhotographicSensitivity = true;
public showMake = false;
public showModel = false;
public showLens = false;
public showCreateDate = false;
public showFocalLenIn35mmFilm = false;
public showFNumber = false;
public showExposureTime = false;
public showPhotographicSensitivity = false;
public showFilm = false;

public make?: string;
public model?: string;
public lens?: string;
public createDate?: string;
public createDate?: Date;
public focalLenIn35mmFilm?: string;
public fNumber?: string;
public exposureTime?: string;
public photographicSensitivity?: string;
public film?: string;

constructor(photoFile: Blob) {
this.photoFile = photoFile;
Expand Down
7 changes: 6 additions & 1 deletion src/app/pages/status/status.page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,7 +170,7 @@

<div *ngIf="getExif(currentIndex)?.lens" class="margin-bottom-10">
<mat-icon class="margin-right-20" inline="true" matTooltip="Lens">camera</mat-icon>
<span *ngIf="getExif(currentIndex)?.lens" class="exif-label">{{ getExif(currentIndex)?.lens }}</span>
<span class="exif-label">{{ getExif(currentIndex)?.lens }}</span>
</div>

<div *ngIf="getExif(currentIndex)?.focalLenIn35mmFilm || getExif(currentIndex)?.fNumber || getExif(currentIndex)?.exposureTime || getExif(currentIndex)?.photographicSensitivity" class="margin-bottom-10">
Expand All @@ -180,6 +180,11 @@
<span *ngIf="getExif(currentIndex)?.exposureTime" class="margin-right-15 exif-label">{{ getExif(currentIndex)?.exposureTime }}s</span>
<span *ngIf="getExif(currentIndex)?.photographicSensitivity" class="margin-right-15 exif-label">ISO {{ getExif(currentIndex)?.photographicSensitivity }}</span>
</div>

<div *ngIf="getExif(currentIndex)?.film" class="margin-bottom-10">
<mat-icon class="margin-right-20" inline="true" matTooltip="Camera roll">camera_roll</mat-icon>
<span class="exif-label">{{ getExif(currentIndex)?.film }}</span>
</div>
</div>

<!-- Status properties -->
Expand Down
63 changes: 53 additions & 10 deletions src/app/pages/upload/upload.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,15 +150,15 @@ export class UploadPage extends ResponsiveComponent implements OnInit {
}

if (photo.showCreateDate) {
temporaryAttachment.createDate = photo.createDate
temporaryAttachment.createDate = photo.createDate?.toISOString()
}

if (photo.showFocalLenIn35mmFilm) {
temporaryAttachment.focalLenIn35mmFilm = photo.focalLenIn35mmFilm
}

if (photo.fNumber) {
temporaryAttachment.fNumber = photo.fNumber
temporaryAttachment.fNumber = `f/${photo.fNumber}`
}

if (photo.exposureTime) {
Expand All @@ -169,6 +169,10 @@ export class UploadPage extends ResponsiveComponent implements OnInit {
temporaryAttachment.photographicSensitivity = photo.photographicSensitivity
}

if (photo.film) {
temporaryAttachment.film = photo.film
}

temporaryAttachment.locationId = photo.locationId;
temporaryAttachment.licenseId = photo.licenseId;

Expand Down Expand Up @@ -214,14 +218,53 @@ export class UploadPage extends ResponsiveComponent implements OnInit {
bufferReader.addEventListener('load', () => {
const tags = ExifReader.load(bufferReader.result as ArrayBuffer);

uploadPhoto.make = tags['Make']?.description.toString();
uploadPhoto.model = tags['Model']?.description.toString();
uploadPhoto.lens = tags['Lens']?.description.toString();
uploadPhoto.createDate = tags['CreateDate']?.description.toString();
uploadPhoto.focalLenIn35mmFilm = tags['FocalLengthIn35mmFilm']?.description.toString();
uploadPhoto.fNumber = tags['FNumber']?.description.toString();
uploadPhoto.exposureTime = tags['ExposureTime']?.description.toString();
uploadPhoto.photographicSensitivity = tags['ISOSpeedRatings']?.description.toString();
const make = tags['Make']?.description.toString();
if (make) {
uploadPhoto.make = make;
uploadPhoto.showMake = true;
}

const model = tags['Model']?.description.toString();
if (model) {
uploadPhoto.model = model;
uploadPhoto.showModel = true;
}

const lens = tags['Lens']?.description.toString();
if (lens) {
uploadPhoto.lens = lens;
uploadPhoto.showLens = true;
}

const focalLenIn35mmFilm = tags['FocalLengthIn35mmFilm']?.description.toString();
if (focalLenIn35mmFilm) {
uploadPhoto.focalLenIn35mmFilm = focalLenIn35mmFilm;
uploadPhoto.showFocalLenIn35mmFilm = true;
}

const exposureTime = tags['ExposureTime']?.description.toString();
if (exposureTime) {
uploadPhoto.exposureTime = exposureTime;
uploadPhoto.showExposureTime = true;
}

const photographicSensitivity = tags['ISOSpeedRatings']?.description.toString();
if (photographicSensitivity) {
uploadPhoto.photographicSensitivity = photographicSensitivity;
uploadPhoto.showPhotographicSensitivity = true;
}

const fNumber = tags['FNumber']?.description.toString();
if (fNumber) {
uploadPhoto.fNumber = fNumber?.replace('f/', '');
uploadPhoto.showFNumber = true;
}

const createDate = tags['CreateDate']?.description.toString();
if (createDate) {
uploadPhoto.createDate = new Date(createDate);
uploadPhoto.showCreateDate = true;
}
});

bufferReader.readAsArrayBuffer(uploadPhoto.photoFile);
Expand Down
4 changes: 3 additions & 1 deletion src/styles/flex-layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,4 +64,6 @@

// Grow.
.flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.flex-grow-2 { flex-grow: 2; }
.flex-grow-3 { flex-grow: 3; }
.flex-grow-4 { flex-grow: 4; }

0 comments on commit 02fe006

Please sign in to comment.