Skip to content

Commit

Permalink
desktop v0.6.18 removed old color rotation logic
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Nov 21, 2023
1 parent 11e9f7a commit 21db5dd
Show file tree
Hide file tree
Showing 3 changed files with 141 additions and 59 deletions.
112 changes: 112 additions & 0 deletions src/app/system-apps/desktop/colorutil/colors.ts
View file
Original file line number Diff line number Diff line change
@@ -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);

}
86 changes: 28 additions & 58 deletions src/app/system-apps/desktop/desktop.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,15 @@
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';
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',
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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,
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/app/system-apps/filemanager/filemanager.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
}
Expand Down

0 comments on commit 21db5dd

Please sign in to comment.