Skip to content

Commit dc0ad3f

Browse files
myonaramyonara
authored
Redesign and Test of new mudwindow width and heigths
2 parents 076d94b + 9e1abb1 commit dc0ad3f

11 files changed

Lines changed: 130 additions & 39 deletions

‎README.md‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ In this early stages (Versions < 0.1.0) it's not for production.
1414
10. Version 0.0.13: polyfill for IE11,10,9.
1515
11. Version 0.0.14: Bugfixes favicon,title,config
1616
12. Version 0.0.15: invert foreground, if forground is identical to background color. shorten input-line. on enter return on output (input_to-issue)
17-
13. Version 0.0.16: dynamic height of mud window, fixed montype size fixing ie+edge, fewer logs
17+
13. Version 0.0.16: dynamic height of mud window, fixed monotype size fixing ie+edge, fewer logs
1818

1919
## Installation in the Development environment
2020
### One time prerequisites:
@@ -23,9 +23,6 @@ In this early stages (Versions < 0.1.0) it's not for production.
2323
3. Install nodemon:> `npm install nodemon -g`
2424
4. download webmud3 and extract to a working directory.
2525

26-
### Preparing storage
27-
currently not used, implemented for future use.
28-
2926
### Preparing backend
3027
1. change directory to backend directory
3128
2. execute:> `npm install`

‎UI/package-lock.json‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎UI/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
"core-js": "^2.5.4",
3333
"hammerjs": "^2.0.8",
3434
"ngx-auto-scroll": "^1.1.0",
35+
"ngx-device-detector": "^1.3.3",
3536
"rxjs": "^6.2.0",
3637
"socket.io": "^2.1.1",
3738
"to": "^0.2.9",

‎UI/src/app/app.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
33
import { FormsModule } from '@angular/forms';
44
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
55
import {MatTabsModule} from '@angular/material';
6+
import { DeviceDetectorModule } from 'ngx-device-detector';
67

78
import { AppComponent } from './app.component';
89
import { ChatComponent } from './chat/chat.component';
@@ -35,6 +36,7 @@ import { ServerConfigService } from './shared/server-config.service';
3536
BrowserAnimationsModule,MudModule,
3637
NonportalModule,
3738
FormsModule,
39+
DeviceDetectorModule.forRoot(),
3840
AppRoutingModule
3941
],
4042
providers: [

‎UI/src/app/mud/mudclient/mudclient.component.css‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,26 @@ table {
44
width: 100%;
55
}
66

7+
.mud-test {
8+
font-family: "Courier New", Courier, monospace;
9+
font-size: 14px;
10+
background-color: black;
11+
color: white;
12+
padding: 0.5ex;
13+
margin-top: 0;
14+
margin-bottom: 0;
15+
display: inline-block;
16+
}
17+
718
.mud-block {
8-
max-width: 100%;
9-
width: 600px;
1019
height: 90vh;
1120
min-height: 400px;
1221
max-height: 90vh;
1322
overflow-x: auto;
1423
overflow-y: auto;
1524
flex-direction: column;
16-
font-family: monospace;
17-
font-size: 13px;
25+
font-family: "Courier New", Courier, monospace;
26+
font-size: 14px;
1827
background-color: black;
1928
color: white;
2029
padding: 0.5ex;
@@ -28,5 +37,6 @@ table {
2837
}
2938

3039
.mud-input {
31-
max-width: 600px;
40+
font-family: "Courier New", Courier, monospace;
41+
font-size: 14px;
3242
}

‎UI/src/app/mud/mudclient/mudclient.component.html‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,36 @@
1-
<div class="mud-block" #mudBlock [scrollTop]="mudBlock.scrollHeight">
1+
<div class="mud-test" #mudTest *ngIf='!sizeCalculated'>
2+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
3+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
4+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
5+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
6+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
7+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
8+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
9+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
10+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
11+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
12+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
13+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
14+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
15+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
16+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
17+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
18+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
19+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
20+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
21+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
22+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
23+
00000000011111111112222222222333333333344444444445555555555666666666677777777778<br/>
24+
12345678901234567890123456789012345678901234567890123456789012345678901234567890<br/>
25+
</div>
26+
27+
<div class="mud-block" #mudBlock *ngIf='sizeCalculated' [style.width.px]='ref_width' [scrollTop]="mudBlock.scrollHeight">
228
<div class="mud-message" display="inline" *ngFor="let a2hMudline of mudlines"><app-mudspan [ansi2html]="a2hMudline"></app-mudspan></div>
329
</div>
430
<table>
531
<tr>
632
<td>
7-
<input [(type)]="inpType" class="mud-input" #mudInput (keyup.enter)="sendMessage()" (keyup)="onKeyUp($event)" [(ngModel)]="inpmessage" />
8-
</td>
9-
<td>
10-
<app-mudlist *ngIf="freeParam" (mudselection)="onSelectMud($event)"></app-mudlist>
33+
<input [(type)]="inpType" class="mud-input" [style.width.px]='ref_width' #mudInput (keyup.enter)="sendMessage()" (keyup)="onKeyUp($event)" [(ngModel)]="inpmessage" />
1134
</td>
1235
</tr>
1336
</table>

‎UI/src/app/mud/mudclient/mudclient.component.ts‎

Lines changed: 31 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, OnInit, ViewChild, ElementRef, HostListener, OnDestroy, ChangeDetectorRef, Input } from '@angular/core';
1+
import { Component, OnInit, ViewChild, ElementRef, HostListener, OnDestroy, ChangeDetectorRef, Input, AfterViewChecked } from '@angular/core';
22
import { SocketService } from '../../shared/socket.service';
33
import { MudMessage } from '../mud-message';
44
import { DebugData } from '../debug-data';
@@ -14,19 +14,23 @@ import { ServerConfigService } from '../../shared/server-config.service';
1414
templateUrl: './mudclient.component.html',
1515
styleUrls: ['./mudclient.component.css']
1616
})
17-
export class MudclientComponent implements OnInit,OnDestroy {
17+
export class MudclientComponent implements AfterViewChecked,OnInit,OnDestroy {
1818

1919
@Input() cfg : WebmudConfig;
2020
@ViewChild('mudBlock') mudBlock : ElementRef;
2121
@ViewChild('mudInput') mudInput: ElementRef;
22+
@ViewChild('mudTest') mudTest: ElementRef;
2223

2324
private mudc_id : string;
2425
private mudName : string = 'disconnect';
2526
private connected : boolean;
26-
public freeParam : boolean = true;
27+
public sizeCalculated : boolean = false;
2728
public inpType : string = 'text';
2829
private mudc_width : number;
2930
private mudc_height : number;
31+
public ref_width : number;
32+
public ref_height: number;
33+
private ref_height_ratio:number;
3034
private obs_connect;
3135
private obs_connected;
3236
private obs_data;
@@ -117,26 +121,39 @@ export class MudclientComponent implements OnInit,OnDestroy {
117121
if (typeof this.cfg !== 'undefined' && typeof this.cfg.mudname !== 'undefined'
118122
&& this.cfg.mudname !== '') {
119123
this.mudName = this.cfg.mudname;
120-
this.freeParam = false;
121124
}
122125
}
123126

124127
calculateSizing() {
125128
var oh = this.mudBlock.nativeElement.offsetHeight;
126129
var ow = this.mudBlock.nativeElement.offsetWidth;
127-
// var elem = this.srvcfgService.getHeight(this.mudBlock.nativeElement);
128-
this.mudc_width = Math.floor(ow/7.5);
129-
this.mudc_height = Math.floor(oh/16);
130-
// console.log('MudSize: '+this.mudc_width+'x'+this.mudc_height);
130+
if (this.mudc_height != Math.floor(oh/this.ref_height_ratio)) {
131+
this.mudc_height = Math.floor(oh/this.ref_height_ratio);
132+
console.log('MudSize: '+this.mudc_width+'x'+this.mudc_height+' <= '+ow+'x'+oh);
133+
if (typeof this.mudc_id === 'undefined' && this.cfg.autoConnect) {
134+
this.connect();
135+
}
136+
}
131137
this.cfgService.setMudOutputSize(oh,ow);
138+
if (typeof this.mudc_id !== undefined) {
139+
this.socketService.setMudOutputSize(this.mudc_id,this.mudc_height,this.mudc_height);
140+
}
132141
}
133142

134-
ngAfterViewInit() {
135-
this.calculateSizing();
136-
if (!this.freeParam) {
137-
if (this.cfg.autoConnect) {
138-
this.connect();
139-
}
143+
calculateTest() {
144+
this.ref_width = this.mudTest.nativeElement.offsetWidth;
145+
this.ref_height = this.mudTest.nativeElement.offsetHeight;
146+
this.mudc_width = 80;
147+
this.ref_height_ratio = this.ref_height/25.0;
148+
}
149+
150+
ngAfterViewChecked() {
151+
var other = this;
152+
if (!this.sizeCalculated) {
153+
this.calculateTest();
154+
setTimeout(function(){other.sizeCalculated = true;},500);
155+
} else {
156+
this.calculateSizing();
140157
}
141158
}
142159

‎UI/src/app/shared/server-config.service.ts‎

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { Injectable, Inject } from '@angular/core';
22
import { WINDOW } from './WINDOW_PROVIDERS';
3+
import { DeviceDetectorService } from 'ngx-device-detector';
34

45
@Injectable({
56
providedIn: 'root'
@@ -10,6 +11,8 @@ export class ServerConfigService {
1011
'http://localhost:4200':'http://localhost:5000',
1112
'http://localhost:2018':'http://localhost:2018',
1213
};
14+
private deviceInfo = null;
15+
private browserInfo = {};
1316

1417

1518
getBackend(): string {
@@ -21,18 +24,12 @@ export class ServerConfigService {
2124
return l_origin;
2225
}
2326

24-
getHeight(elem) : string {
25-
var style = window.getComputedStyle(elem);
26-
console.log("TODO style: ",style);
27-
return '1px';
28-
}
29-
3027
getWebmudName(): string {
3128
return "Webmud3";
3229
}
3330

3431
getWebmudVersion(): string {
35-
return "v0.0.16";
32+
return "v0.0.17";
3633
}
3734

3835
getUNItopiaName() : string {
@@ -43,5 +40,36 @@ export class ServerConfigService {
4340
return 'orbit';
4441
}
4542

46-
constructor(@Inject(WINDOW) private window:Window) { }
43+
getBrowserInfo():Object {
44+
return this.browserInfo;
45+
}
46+
47+
getWidth80(width : number):number {
48+
switch(this.browserInfo["browser"].toLowerCase()) {
49+
case 'ie':
50+
case 'edge':
51+
return width * 1.162 + 1;
52+
}
53+
return width * 1.05 + 1;
54+
}
55+
56+
displayBrowser() {
57+
this.deviceInfo = this.deviceService.getDeviceInfo();
58+
const isMobile = this.deviceService.isMobile();
59+
const isTablet = this.deviceService.isTablet();
60+
const isDesktopDevice = this.deviceService.isDesktop();
61+
this.browserInfo["browser"] = this.deviceInfo.browser;
62+
this.browserInfo["browser_version"] = this.deviceInfo.browser_version;
63+
this.browserInfo["os"] = this.deviceInfo.os;
64+
this.browserInfo["os_version"] = this.deviceInfo.os_version;
65+
this.browserInfo["userAgent"] = this.deviceInfo.userAgent;
66+
this.browserInfo["isMobile"] = isMobile;
67+
this.browserInfo["isTablet"] = isTablet;
68+
this.browserInfo["isDesktop"] = isDesktopDevice;
69+
console.log('Device_info: ', this.deviceInfo);
70+
}
71+
72+
constructor(@Inject(WINDOW) private window:Window,private deviceService: DeviceDetectorService) {
73+
this.displayBrowser();
74+
}
4775
}

‎UI/src/app/shared/socket.service.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,11 @@ export class SocketService {
217217
return observable;
218218
} // mudConnect
219219

220+
221+
public setMudOutputSize(_id : string,height:number,width : number) {
222+
223+
}
224+
220225
public mudDisconnect(_id : string) : Observable<string> {
221226
let other = this;
222227
let observable = new Observable<string>(observer => {

‎dockerfiles/README‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11

22

33
# im .. folgendes ausfuehren (ggf Version anpassen)
4-
docker build -f dockerfiles/ng.dockerfile -t myonara/webmud3:v0.0.16 .
4+
docker build -f dockerfiles/ng.dockerfile -t myonara/webmud3:v0.0.17 .
55

66
# test als standalone container
7-
docker run -d -p 5000:5000 --name webmud3test myonara/webmud3:v0.0.16
7+
docker run -d -p 5000:5000 --name webmud3test myonara/webmud3:v0.0.17
88

99
# ebenso nach einem swarm init:
1010
docker stack deploy -c dockerfiles/w3_docker_compose_secret.yml webmud3a
@@ -33,6 +33,9 @@ Ohgott sagt: docker exec -ti <name> /bin/sh
3333
#cross origin:
3434
https://www.npmjs.com/package/cors
3535

36+
# reconnection issues:
37+
https://github.com/socketio/socket.io/issues/2476
38+
3639
Das siegreiche Gnomi redet zu dir: Ich hab 'modprobe ip_vs' gemacht, aber
3740
das hab ich jetzt in /etc/modules reingeschrieben, so dass es nicht
3841
mehr notwendig sein sollte. Ansonsten nur 'systemctl restart

0 commit comments

Comments
 (0)