Projector improvements

- Moved projector configs to group "General" - Removed unused projector config related to CLOS - debounce projector data requests for many projectors - add (foreground) color - custom, modifiable CSS classes per projector to cascade dynamic styles into slides
2019-07-10 12:57:48 +02:00 · 2019-07-10 12:57:48 +02:00 · 23c704b5da
commit 23c704b5da
parent 8cb9892426
12 changed files with 279 additions and 144 deletions
--- a/client/src/app/core/core-services/projector-data.service.ts
+++ b/client/src/app/core/core-services/projector-data.service.ts
@ -1,9 +1,10 @@
 import { Injectable } from '@angular/core';

-import { Observable, BehaviorSubject } from 'rxjs';
+import { Observable, BehaviorSubject, Subject } from 'rxjs';

 import { WebsocketService } from 'app/core/core-services/websocket.service';
 import { ProjectorElement, Projector } from 'app/shared/models/core/projector';
+import { auditTime } from 'rxjs/operators';

 export interface SlideData<T = { error?: string }, P extends ProjectorElement = ProjectorElement> {
    data: T;
@ -36,12 +37,19 @@ export class ProjectorDataService {
     */
    private currentProjectorData: { [id: number]: BehaviorSubject<ProjectorData | null> } = {};

+    /**
+     * When multiple projectory are requested, debounce these requests to just issue
+     * one request, with all the needed projectors.
+     */
+    private readonly updateProjectorDataDebounceSubject = new Subject<void>();
+
    /**
     * Constructor.
     *
     * @param websocketService
     */
    public constructor(private websocketService: WebsocketService) {
+        // Dispatch projector data.
        this.websocketService.getOberservable('projector').subscribe((update: AllProjectorData) => {
            Object.keys(update).forEach(_id => {
                const id = parseInt(_id, 10);
@ -51,7 +59,16 @@ export class ProjectorDataService {
            });
        });

+        // The service need to re-register, if the websocket connection was lost.
        this.websocketService.generalConnectEvent.subscribe(() => this.updateProjectorDataSubscription());
+
+        // With a bit of debounce, update the needed projectors.
+        this.updateProjectorDataDebounceSubject.pipe(auditTime(10)).subscribe(() => {
+            const allActiveProjectorIds = Object.keys(this.openProjectorInstances)
+                .map(id => parseInt(id, 10))
+                .filter(id => this.openProjectorInstances[id] > 0);
+            this.websocketService.send('listenToProjectors', { projector_ids: allActiveProjectorIds });
+        });
    }

    /**
@ -94,13 +111,10 @@ export class ProjectorDataService {
    }

    /**
-     * Gets initial data and keeps reuesting data.
+     * Requests to update the data subscription to the server.
     */
    private updateProjectorDataSubscription(): void {
-        const allActiveProjectorIds = Object.keys(this.openProjectorInstances)
-            .map(id => parseInt(id, 10))
-            .filter(id => this.openProjectorInstances[id] > 0);
-        this.websocketService.send('listenToProjectors', { projector_ids: allActiveProjectorIds });
+        this.updateProjectorDataDebounceSubject.next();
    }

    /**
--- a/client/src/app/shared/components/projector/projector.component.html
+++ b/client/src/app/shared/components/projector/projector.component.html
@ -1,11 +1,11 @@
-<div id="container" [osResized]="resizeSubject" [ngStyle]="containerStyle" #container>
-    <div id="projector" [ngStyle]="projectorStyle">
+<div id="container" class="projector-container" [osResized]="resizeSubject" #container>
+    <div id="projector" class="projector">
        <div id="offline-indicator" *ngIf="isOffline()">
            <mat-icon>
                fiber_manual_record
            </mat-icon>
        </div>
-        <div id="header" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">
+        <div id="header" class="headerFooter" *ngIf="projector && projector.show_header_footer">
            <!-- projector logo -->
            <img *ngIf="projector.show_logo && projectorLogo" src="{{ projectorLogo }}" class="projector-logo-main" />

@ -29,7 +29,7 @@
            ></os-slide-container>
        </div>

-        <div id="footer" [ngStyle]="headerFooterStyle" *ngIf="projector && projector.show_header_footer">
+        <div id="footer" class="headerFooter" *ngIf="projector && projector.show_header_footer">
            <div class="footertext">
                <span *ngIf="eventDate"> {{ eventDate }} </span>
                <span *ngIf="eventDate && eventLocation"> | </span>
--- a/client/src/app/shared/components/projector/projector.component.scss
+++ b/client/src/app/shared/components/projector/projector.component.scss
@ -1,9 +1,3 @@
-// should be better using @host binding, but does not work
-// https://github.com/angular/angular/issues/9343
-:host-context(.os-slide-container) {
-    --header-h1-color: #000;
-}
-
 #container {
    background-color: lightgoldenrodyellow;
    position: relative;
@ -31,11 +25,6 @@
        font-size: 22px !important;
        line-height: 24px !important;

-        // shadow pierce all children of projector to overwrite the h1 color
-        ::ng-deep h1 {
-            color: var(--header-h1-color);
-        }
-
        #header {
            position: absolute;
            top: 0;
--- a/client/src/app/shared/components/projector/projector.component.ts
+++ b/client/src/app/shared/components/projector/projector.component.ts
@ -53,12 +53,12 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
            ) {
                this.updateScaling();
            }
-            this.projectorStyle['background-color'] = projector.background_color;
-            this.headerFooterStyle.color = projector.header_font_color;
-            this.headerFooterStyle['background-color'] = projector.header_background_color;
-
-            // alter the local scope css variable with the header_h1_color
-            document.documentElement.style.setProperty('--header-h1-color', this.projector.header_h1_color);
+            this.css.projector.color = projector.color;
+            this.css.projector.backgroundColor = projector.background_color;
+            this.css.projector.H1Color = this.projector.header_h1_color;
+            this.css.headerFooter.color = projector.header_font_color;
+            this.css.headerFooter.backgroundColor = projector.header_background_color;
+            this.updateCSS();
        }
    }

@ -85,33 +85,54 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
    private containerElement: ElementRef;

    /**
-     * Dynamic style attributes for the projector.
+     * The css class assigned to this projector.
     */
-    public projectorStyle: {
-        transform?: string;
-        width: string;
-        height: string;
-        'background-color': string;
+    private projectorClass: string;
+
+    /**
+     * The styleelement for setting projector-specific styles.
+     */
+    private styleElement?: HTMLStyleElement;
+
+    /**
+     * All current css rules for the projector. when updating this, call `updateCSS()` afterwards.
+     */
+    public css: {
+        container: {
+            height: string;
+        };
+        projector: {
+            transform: string;
+            width: string;
+            height: string;
+            color: string;
+            backgroundColor: string;
+            H1Color: string;
+        };
+        headerFooter: {
+            color: string;
+            backgroundColor: string;
+            backgroundImage: string;
+        };
    } = {
-        width: '0px',
-        height: '0px',
-        'background-color': 'white'
+        container: {
+            height: '0px'
+        },
+        projector: {
+            transform: 'none',
+            width: '0px',
+            height: '0px',
+            color: 'black',
+            backgroundColor: 'white',
+            H1Color: '#317796'
+        },
+        headerFooter: {
+            color: 'white',
+            backgroundColor: '#317796',
+            backgroundImage: 'none'
+        }
    };

-    /**
-     * Dynamic style attributes for the header and footer.
-     */
-    public headerFooterStyle: { 'background-image': string; 'background-color': string; color: string } = {
-        'background-image': 'none',
-        'background-color': 'blue',
-        color: 'white'
-    };
-
-    /**
-     * Dynamic style attributes for the container.
-     */
-    public containerStyle: { height?: string } = {};
-
    /**
     * All slides to show on this projector
     */
@ -161,9 +182,21 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
        private projectorDataService: ProjectorDataService,
        private projectorRepository: ProjectorRepositoryService,
        private configService: ConfigService,
-        private offlineService: OfflineService
+        private offlineService: OfflineService,
+        private elementRef: ElementRef
    ) {
        super(titleService, translate);
+
+        this.projectorClass =
+            'projector-' +
+            Math.random()
+                .toString(36)
+                .substring(4);
+        this.elementRef.nativeElement.classList.add(this.projectorClass);
+        this.styleElement = document.createElement('style');
+        this.styleElement.appendChild(document.createTextNode('')); // Hack for WebKit to trigger update
+        document.head.appendChild(this.styleElement);
+
        // projector logo / background-image
        this.configService.get<{ path?: string }>('logo_projector_main').subscribe(val => {
            if (val && val.path) {
@ -174,10 +207,11 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
        });
        this.configService.get<{ path?: string }>('logo_projector_header').subscribe(val => {
            if (val && val.path) {
-                this.headerFooterStyle['background-image'] = "url('" + val.path + "')";
+                this.css.headerFooter.backgroundImage = "url('" + val.path + "')";
            } else {
-                this.headerFooterStyle['background-image'] = 'none';
+                this.css.headerFooter.backgroundImage = 'none';
            }
+            this.updateCSS();
        });

        // event data
@ -218,10 +252,39 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
        if (isNaN(scale)) {
            return;
        }
-        this.projectorStyle.transform = 'scale(' + scale + ')';
-        this.projectorStyle.width = this.currentProjectorSize.width + 'px';
-        this.projectorStyle.height = this.currentProjectorSize.height + 'px';
-        this.containerStyle.height = Math.round(scale * this.currentProjectorSize.height) + 'px';
+        this.css.projector.transform = 'scale(' + scale + ')';
+        this.css.projector.width = this.currentProjectorSize.width + 'px';
+        this.css.projector.height = this.currentProjectorSize.height + 'px';
+        this.css.container.height = Math.round(scale * this.currentProjectorSize.height) + 'px';
+        this.updateCSS();
+    }
+
+    /**
+     * Update the css element with the current css settings in `this.css`.
+     */
+    private updateCSS(): void {
+        if (!this.styleElement) {
+            return;
+        }
+        this.styleElement.innerHTML = `
+            .${this.projectorClass} .projector-container {
+                height: ${this.css.container.height};
+            }
+            .${this.projectorClass} .projector {
+                transform: ${this.css.projector.transform};
+                width: ${this.css.projector.width};
+                height: ${this.css.projector.height};
+                background-color: ${this.css.projector.backgroundColor};
+                color: ${this.css.projector.color};
+            }
+            .${this.projectorClass} .projector h1 {
+                color: ${this.css.projector.H1Color};
+            }
+            .${this.projectorClass} .headerFooter {
+                color: ${this.css.headerFooter.color};
+                background-color: ${this.css.headerFooter.backgroundColor};
+                background-image: ${this.css.headerFooter.backgroundImage};
+            }`;
    }

    /**
@ -262,5 +325,7 @@ export class ProjectorComponent extends BaseComponent implements OnDestroy {
        if (this.projectorId > 0) {
            this.projectorDataService.projectorClosed(this.projectorId);
        }
+        document.head.removeChild(this.styleElement);
+        this.styleElement = null;
    }
 }
--- a/client/src/app/shared/models/core/projector.ts
+++ b/client/src/app/shared/models/core/projector.ts
@ -68,6 +68,7 @@ export class Projector extends BaseModel<Projector> {
    public height: number;
    public reference_projector_id: number;
    public projectiondefaults_id: number[];
+    public color: string;
    public background_color: string;
    public header_background_color: string;
    public header_font_color: string;
--- a/client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.html
+++ b/client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.html
@ -35,14 +35,14 @@
                <h3 translate>Resolution and size</h3>
                <!-- Aspect ratio field -->
                <mat-radio-group formControlName="aspectRatio" [name]="projector.id">
-                    <mat-radio-button *ngFor="let ratio of aspectRatiosKeys" [value]="ratio">
+                    <mat-radio-button *ngFor="let ratio of aspectRatiosKeys" [value]="ratio" (change)="aspectRatioChanged($event)">
                        {{ ratio }}
                    </mat-radio-button>
                </mat-radio-group>
                <div class="spacer-top-20">
                    <mat-slider
                        [thumbLabel]="true"
-                        min="800"
+                        [min]="getMinWidth()"
                        max="2000"
                        step="10"
                        value="{{ updateForm.value.width }}"
@ -60,6 +60,23 @@
                </mat-select>

                <!-- colors -->
+                <div class="color-field-wrapper">
+                    <div class="form">
+                        <mat-form-field>
+                            <span translate>Foreground color</span>
+                            <input matInput formControlName="color" type="color" />
+                            <mat-hint *ngIf="!updateForm.controls.color.valid">
+                                <span translate>Required</span>
+                            </mat-hint>
+                        </mat-form-field>
+                    </div>
+                    <div class="reset-button">
+                        <button mat-icon-button matTooltip="{{ 'Reset' | translate }}" (click)="resetField('color', '#000000')">
+                            <mat-icon>replay</mat-icon>
+                        </button>
+                    </div>
+                </div>
+
                <div class="color-field-wrapper">
                    <div class="form">
                        <mat-form-field>
--- a/client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.ts
+++ b/client/src/app/site/projector/components/projector-list-entry/projector-list-entry.component.ts
@ -15,6 +15,7 @@ import { ClockSlideService } from '../../services/clock-slide.service';
 import { OperatorService } from 'app/core/core-services/operator.service';
 import { ViewProjectionDefault } from '../../models/view-projection-default';
 import { ProjectionDefaultRepositoryService } from 'app/core/repositories/projector/projection-default-repository.service';
+import { MatRadioChange } from '@angular/material';

 /**
 * All supported aspect rations for projectors.
@ -22,9 +23,12 @@ import { ProjectionDefaultRepositoryService } from 'app/core/repositories/projec
 const aspectRatios: { [ratio: string]: number } = {
    '4:3': 4 / 3,
    '16:9': 16 / 9,
-    '16:10': 16 / 10
+    '16:10': 16 / 10,
+    '30:9': 30 / 9
 };

+const aspectRatio_30_9_MinWidth = 1150;
+
 /**
 * List for all projectors.
 */
@ -59,7 +63,16 @@ export class ProjectorListEntryComponent extends BaseViewComponent implements On
     * The projector shown by this entry.
     */
    @Input()
-    public projector: ViewProjector;
+    public set projector(value: ViewProjector) {
+        this._projector = value;
+        this.updateForm.patchValue({ width: value.width });
+    }
+
+    public get projector(): ViewProjector {
+        return this._projector;
+    }
+
+    private _projector: ViewProjector;

    /**
     * Helper to check manage permissions
@ -103,6 +116,7 @@ export class ProjectorListEntryComponent extends BaseViewComponent implements On
            width: [0, Validators.required],
            projectiondefaults_id: [[]],
            clock: [true],
+            color: ['', Validators.required],
            background_color: ['', Validators.required],
            header_background_color: ['', Validators.required],
            header_font_color: ['', Validators.required],
@ -206,6 +220,24 @@ export class ProjectorListEntryComponent extends BaseViewComponent implements On
        }
    }

+    public aspectRatioChanged(event: MatRadioChange): void {
+        let width: number;
+        if (event.value === '30:9' && this.updateForm.value.width < aspectRatio_30_9_MinWidth) {
+            width = aspectRatio_30_9_MinWidth;
+        } else {
+            width = this.updateForm.value.width;
+        }
+        this.updateProjectorDimensions(width, event.value);
+    }
+
+    public getMinWidth(): number {
+        if (this.updateForm.value.aspectRatio === '30:9') {
+            return aspectRatio_30_9_MinWidth;
+        } else {
+            return 800;
+        }
+    }
+
    /**
     * Delete the projector.
     */
@ -222,11 +254,14 @@ export class ProjectorListEntryComponent extends BaseViewComponent implements On
     * @param event The slider value
     */
    public widthSliderValueChanged(event: MatSliderChange): void {
-        const aspectRatio = this.getAspectRatioKey();
+        this.updateProjectorDimensions(event.value, this.updateForm.value.aspectRatio);
+    }
+
+    private updateProjectorDimensions(width: number, aspectRatioKey: string): void {
        const updateProjector: Partial<Projector> = {
-            width: event.value
+            width: width
        };
-        updateProjector.height = Math.round(event.value / aspectRatios[aspectRatio]);
+        updateProjector.height = Math.round(width / aspectRatios[aspectRatioKey]);
        this.repo.update(updateProjector, this.projector).then(null, this.raiseError);
    }

--- a/client/src/app/site/projector/models/view-projector.ts
+++ b/client/src/app/site/projector/models/view-projector.ts
@ -66,6 +66,10 @@ export class ViewProjector extends BaseViewModel<Projector> {
        return this.projector.reference_projector_id;
    }

+    public get color(): string {
+        return this.projector.color;
+    }
+
    public get background_color(): string {
        return this.projector.background_color;
    }
--- a/openslides/core/config_variables.py
+++ b/openslides/core/config_variables.py
@ -131,75 +131,6 @@ def get_config_variables():
        subgroup="System",
    )

-    # General export settings
-
-    yield ConfigVariable(
-        name="general_csv_separator",
-        default_value=",",
-        label="Separator used for all csv exports and examples",
-        weight=142,
-        group="General",
-        subgroup="Export",
-    )
-
-    yield ConfigVariable(
-        name="general_csv_encoding",
-        default_value="utf-8",
-        input_type="choice",
-        label="Default encoding for all csv exports",
-        choices=(
-            {"value": "utf-8", "display_name": "UTF-8"},
-            {"value": "iso-8859-15", "display_name": "ISO-8859-15"},
-        ),
-        weight=143,
-        group="General",
-        subgroup="Export",
-    )
-
-    yield ConfigVariable(
-        name="general_export_pdf_pagenumber_alignment",
-        default_value="center",
-        input_type="choice",
-        label="Page number alignment in PDF",
-        choices=(
-            {"value": "left", "display_name": "Left"},
-            {"value": "center", "display_name": "Center"},
-            {"value": "right", "display_name": "Right"},
-        ),
-        weight=144,
-        group="General",
-        subgroup="Export",
-    )
-
-    yield ConfigVariable(
-        name="general_export_pdf_fontsize",
-        default_value="10",
-        input_type="choice",
-        label="Standard font size in PDF",
-        choices=(
-            {"value": "10", "display_name": "10"},
-            {"value": "11", "display_name": "11"},
-            {"value": "12", "display_name": "12"},
-        ),
-        weight=146,
-        group="General",
-        subgroup="Export",
-    )
-
-    yield ConfigVariable(
-        name="general_export_pdf_pagesize",
-        default_value="A4",
-        input_type="choice",
-        label="Standard page size in PDF",
-        choices=(
-            {"value": "A4", "display_name": "DIN A4"},
-            {"value": "A5", "display_name": "DIN A5"},
-        ),
-        weight=147,
-        group="General",
-        subgroup="Export",
-    )
-
    # Projector

    yield ConfigVariable(
@ -218,7 +149,8 @@ def get_config_variables():
            {"value": "ru", "display_name": "русский"},
        ),
        weight=150,
-        group="Projector",
+        group="General",
+        subgroup="Projector",
    )

    yield ConfigVariable(
@ -226,21 +158,81 @@ def get_config_variables():
        default_value=60,
        input_type="integer",
        label="Predefined seconds of new countdowns",
-        weight=185,
-        group="Projector",
+        weight=152,
+        group="General",
+        subgroup="Projector",
+    )
+
+    # General export settings
+
+    yield ConfigVariable(
+        name="general_csv_separator",
+        default_value=",",
+        label="Separator used for all csv exports and examples",
+        weight=160,
+        group="General",
+        subgroup="Export",
    )

    yield ConfigVariable(
-        name="projector_currentListOfSpeakers_reference",
-        default_value=1,
-        input_type="integer",
-        label="Projector reference for list of speakers",
-        weight=201,
-        group="Projector",
-        hidden=True,
+        name="general_csv_encoding",
+        default_value="utf-8",
+        input_type="choice",
+        label="Default encoding for all csv exports",
+        choices=(
+            {"value": "utf-8", "display_name": "UTF-8"},
+            {"value": "iso-8859-15", "display_name": "ISO-8859-15"},
+        ),
+        weight=162,
+        group="General",
+        subgroup="Export",
    )

-    # Logos.
+    yield ConfigVariable(
+        name="general_export_pdf_pagenumber_alignment",
+        default_value="center",
+        input_type="choice",
+        label="Page number alignment in PDF",
+        choices=(
+            {"value": "left", "display_name": "Left"},
+            {"value": "center", "display_name": "Center"},
+            {"value": "right", "display_name": "Right"},
+        ),
+        weight=164,
+        group="General",
+        subgroup="Export",
+    )
+
+    yield ConfigVariable(
+        name="general_export_pdf_fontsize",
+        default_value="10",
+        input_type="choice",
+        label="Standard font size in PDF",
+        choices=(
+            {"value": "10", "display_name": "10"},
+            {"value": "11", "display_name": "11"},
+            {"value": "12", "display_name": "12"},
+        ),
+        weight=166,
+        group="General",
+        subgroup="Export",
+    )
+
+    yield ConfigVariable(
+        name="general_export_pdf_pagesize",
+        default_value="A4",
+        input_type="choice",
+        label="Standard page size in PDF",
+        choices=(
+            {"value": "A4", "display_name": "DIN A4"},
+            {"value": "A5", "display_name": "DIN A5"},
+        ),
+        weight=168,
+        group="General",
+        subgroup="Export",
+    )
+
+    # Logos
    yield ConfigVariable(
        name="logos_available",
        default_value=[
--- a/openslides/core/migrations/0025_projector_color.py
+++ b/openslides/core/migrations/0025_projector_color.py
@ -0,0 +1,16 @@
+# Generated by Django 2.2.3 on 2019-07-10 10:12
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [("core", "0024_auto_20190605_1105")]
+
+    operations = [
+        migrations.AddField(
+            model_name="projector",
+            name="color",
+            field=models.CharField(default="#000000", max_length=7),
+        )
+    ]
--- a/openslides/core/models.py
+++ b/openslides/core/models.py
@ -77,6 +77,7 @@ class Projector(RESTModelMixin, models.Model):
    width = models.PositiveIntegerField(default=1024)
    height = models.PositiveIntegerField(default=768)

+    color = models.CharField(max_length=7, default="#000000")
    background_color = models.CharField(max_length=7, default="#ffffff")
    header_background_color = models.CharField(max_length=7, default="#317796")
    header_font_color = models.CharField(max_length=7, default="#f5f5f5")
--- a/openslides/core/serializers.py
+++ b/openslides/core/serializers.py
@ -106,6 +106,7 @@ class ProjectorSerializer(ModelSerializer):
            "height",
            "reference_projector",
            "projectiondefaults",
+            "color",
            "background_color",
            "header_background_color",
            "header_font_color",