diff --git a/src/app/system-apps/desktop/colorutil/colors.ts b/src/app/system-apps/desktop/colorutil/colors.ts new file mode 100644 index 00000000..b459b2f1 --- /dev/null +++ b/src/app/system-apps/desktop/colorutil/colors.ts @@ -0,0 +1,112 @@ + +export class Colors{ + + + changeHue(hexColor:string, degree:number) { + // Ensure the input is a valid hexadecimal color + const hexRegex = /^#(?:[0-9a-fA-F]{3}){1,2}$/; + if (!hexRegex.test(hexColor)) { + console.error('Invalid hexadecimal color code'); + return null; + } + + // Remove the hash character (#) and convert to RGB + const rgbColor = hexColor.substring(1); + const bigint = parseInt(rgbColor, 16); + const r = (bigint >> 16) & 255; + const g = (bigint >> 8) & 255; + const b = bigint & 255; + + // Convert RGB to HSL + const hslColor = this.rgbToHsl(r, g, b); + + // Shift the hue + hslColor.h += degree; + + // Ensure hue is within the valid range [0, 360) + hslColor.h = (hslColor.h + 360) % 360; + + // Convert HSL back to RGB + const finalRgbColor = this.hslToRgb(hslColor.h, hslColor.s, hslColor.l); + + // Convert RGB back to hexadecimal + const finalHexColor = this.rgbToHex(finalRgbColor.r, finalRgbColor.g, finalRgbColor.b); + + return `#${finalHexColor}`; + } + + // Convert RGB to HSL + rgbToHsl(r:number, g:number, b:number) { + r /= 255; + g /= 255; + b /= 255; + + const max = Math.max(r, g, b); + const min = Math.min(r, g, b); + // eslint-disable-next-line prefer-const + let h, s, l = (max + min) / 2; + + if (max === min) { + h = s = 0; // grayscale + } else { + const d = max - min; + s = l > 0.5 ? d / (2 - max - min) : d / (max + min); + switch (max) { + case r: h = (g - b) / d + (g < b ? 6 : 0); break; + case g: h = (b - r) / d + 2; break; + case b: h = (r - g) / d + 4; break; + } + + if(h) + h /= 6; + } + + return { h: h || 1 * 360, s: s * 100, l: l * 100 }; + } + + // Convert HSL to RGB + hslToRgb(h:number, s:number, l:number) { + h /= 360; + s /= 100; + l /= 100; + + let r, g, b; + + if (s === 0) { + r = g = b = l; // achromatic + } else { + const hue2rgb = (p:number, q:number, t:number) => { + if (t < 0) t += 1; + if (t > 1) t -= 1; + if (t < 1 / 6) return p + (q - p) * 6 * t; + if (t < 1 / 2) return q; + if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6; + return p; + }; + + const q = l < 0.5 ? l * (1 + s) : l + s - l * s; + const p = 2 * l - q; + r = hue2rgb(p, q, h + 1 / 3); + g = hue2rgb(p, q, h); + b = hue2rgb(p, q, h - 1 / 3); + } + + return { r: r * 255, g: g * 255, b: b * 255 }; + } + + // Convert RGB to Hex + rgbToHex(r:number, g:number, b:number) { + const toHex = (value:number) => { + const hex = Math.round(value).toString(16); + return hex.length === 1 ? '0' + hex : hex; + }; + + return toHex(r) + toHex(g) + toHex(b); + } + +// // Example usage: +// const originalColor = '#3498db'; +// const modifiedColor = changeHue(originalColor, 45); // Shift hue by 45 degrees +// console.log(modifiedColor); + +} \ No newline at end of file diff --git a/src/app/system-apps/desktop/desktop.component.ts b/src/app/system-apps/desktop/desktop.component.ts index e6dc706d..99e079cc 100644 --- a/src/app/system-apps/desktop/desktop.component.ts +++ b/src/app/system-apps/desktop/desktop.component.ts @@ -1,5 +1,5 @@ import { AfterViewInit, OnInit,OnDestroy, Component} from '@angular/core'; -import { Subscription, interval} from 'rxjs'; +import { Subscription} from 'rxjs'; import { ProcessIDService } from 'src/app/shared/system-service/process.id.service'; import { RunningProcessService } from 'src/app/shared/system-service/running.process.service'; import { ComponentType } from 'src/app/system-files/component.types'; @@ -7,14 +7,9 @@ import { Process } from 'src/app/system-files/process'; import { BIRDS, GLOBE, HALO, RINGS, WAVE } from './vanta-object/vanta.interfaces'; import { IconsSizes, SortBys } from './desktop.enums'; import { FileManagerService } from 'src/app/shared/system-service/file.manager.services'; +import { Colors } from './colorutil/colors'; -declare let VANTA: { - HALO: any; - BIRDS: any; - WAVES: any; - GLOBE: any; - RINGS: any; -}; +declare let VANTA: { HALO: any; BIRDS: any; WAVES: any; GLOBE: any; RINGS: any;}; @Component({ selector: 'cos-desktop', @@ -29,9 +24,6 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{ private _timerSubscription!: Subscription; private _vantaEffect: any; - private _numSequence = 0; - private _charSquence = 'a'; - private _charSquenceCount = 0; readonly largeIcons = IconsSizes.LARGE_ICONS; readonly mediumIcons = IconsSizes.MEDIUM_ICONS; @@ -70,18 +62,18 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{ globeBkgrnd:GLOBE = {el:'#vanta'} birdBkgrnd:BIRDS = {el:'#vanta'} - VANTAS:any = [ - this.waveBkgrnd, - this.ringsBkgrnd, - this.haloBkgrnd, - this.globeBkgrnd, - this.birdBkgrnd - ]; - + VANTAS:any = [this.waveBkgrnd, this.ringsBkgrnd,this.haloBkgrnd, this.globeBkgrnd, this.birdBkgrnd ]; private MIN_NUMS_OF_DESKTOPS = 0; private MAX_NUMS_OF_DESKTOPS = this.VANTAS.length - 1; private CURRENT_DESTOP_NUM = 0; + private MIN_DEG = 0; + private MAX_DEG = 360; + private CURRENT_DEG = 0; + private defaultColor = 0x274c; + private nextColor:Colors = new Colors(); + private animationId:any; + constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService,fileManagerServices:FileManagerService) { this._processIdService = processIdService; @@ -90,13 +82,13 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{ this.processId = this._processIdService.getNewProcessId() this._runningProcessService.addProcess(this.getComponentDetail()); - this._numSequence = this.getRandomInt(100, 999); + this.CURRENT_DEG = this.getRandomInt(0, 360); } ngOnInit():void{ this._vantaEffect = VANTA.WAVES({ el: '#vanta', - color:0x5588, //this._numSequence, + color:this.defaultColor, //this._numSequence, // waveHeight:20, // shininess: 50, // waveSpeed:0.5, @@ -105,52 +97,30 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{ } ngAfterViewInit():void{ - - // //interval countdown also 15 second - // this._timerSubscription = interval(15000) .subscribe(() => { + + //this.animationId = requestAnimationFrame(this.changeAnimationColor.bind(this)); + + this.hideContextMenu(); + } - // //console.log("hexColor:",this.getNextColor()); - // this._vantaEffect.setOptions({ - // color: this.getNextColor(), - // }); - // }); + changeAnimationColor():void{ + + this.CURRENT_DEG = (this.CURRENT_DEG > this.MAX_DEG) ? this.MIN_DEG : this.CURRENT_DEG + 1; - this.hideContextMenu(); + console.log('nextColor:', Number(this.nextColor.changeHue('#4f32c2',this.CURRENT_DEG)?.replace('#','0x'))) + this._vantaEffect.setOptions({ + color: Number(this.nextColor.changeHue('#4f32c2',this.CURRENT_DEG)?.replace('#','0x')), + }); + + //this.animationId = requestAnimationFrame(this.changeAnimationColor.bind(this)); } ngOnDestroy(): void { this._timerSubscription?.unsubscribe(); + cancelAnimationFrame(this.animationId); this._vantaEffect?.destroy(); } - getNextColor():number{ - const minMun = 100; - const maxNum = 999; - const charSet:string[] = ['a','b','c','d','e','f']; - let mid = this._numSequence; - let tail = this._charSquence; - let charCount = this._charSquenceCount; - - if(mid < maxNum){ - mid = mid + 1; - this._numSequence = mid; - }else if(mid >= maxNum ){ - mid = minMun - this._numSequence = minMun; - - if(tail == charSet[5]){ - this._charSquenceCount = 0; - tail = charSet[0]; - }else{ - charCount = charCount + 1; - this._charSquenceCount = charCount; - tail = charSet[charCount] - } - } - - return Number(`0x${mid}${tail}`); - } - getRandomInt(min:number, max:number):number{ min = Math.ceil(min); max = Math.floor(max); diff --git a/src/app/system-apps/filemanager/filemanager.component.ts b/src/app/system-apps/filemanager/filemanager.component.ts index 96f65749..0767c551 100644 --- a/src/app/system-apps/filemanager/filemanager.component.ts +++ b/src/app/system-apps/filemanager/filemanager.component.ts @@ -239,7 +239,7 @@ export class FilemanagerComponent implements OnInit, AfterViewInit, OnDestroy { toggleDesktopIcons(showIcons:boolean):void{ this.showDesktopIcon = showIcons; - if(this.showDesktopIcon){ + if(!this.showDesktopIcon){ this.btnStyle ={ 'display': 'none', }