From b40d7c481f43a2fdc5a0010d52dd46e02e76db69 Mon Sep 17 00:00:00 2001 From: Henning Jacobs Date: Sat, 24 Dec 2016 13:31:37 +0100 Subject: [PATCH] #51 support different themes --- app/src/app.js | 130 ++++++++++++++++++++++++------------------- app/src/bars.js | 6 +- app/src/cluster.js | 6 +- app/src/colors.js | 4 -- app/src/node.js | 7 +-- app/src/pod.js | 4 +- app/src/selectbox.js | 23 ++++---- app/src/themes.js | 99 ++++++++++++++++++++++++++++++++ app/src/tooltip.js | 6 +- 9 files changed, 196 insertions(+), 89 deletions(-) delete mode 100644 app/src/colors.js create mode 100644 app/src/themes.js diff --git a/app/src/app.js b/app/src/app.js index 3d199ec..da850bc 100644 --- a/app/src/app.js +++ b/app/src/app.js @@ -2,7 +2,7 @@ import Tooltip from './tooltip.js' import Cluster from './cluster.js' import {Pod, ALL_PODS, sortByName, sortByMemory, sortByCPU, sortByAge} from './pod.js' import SelectBox from './selectbox' -import { PRIMARY_COLOR, SECONDARY_COLOR } from './colors.js' +import { Theme} from './themes.js' import { DESATURATION_FILTER } from './filters.js' const PIXI = require('pixi.js') @@ -19,6 +19,7 @@ export default class App { } this.seenPods = new Set() this.sorterFn = '' + this.theme = Theme.get(localStorage.getItem('theme')) } filter() { @@ -58,6 +59,8 @@ export default class App { } initialize() { + App.current = this + //Create the renderer const renderer = PIXI.autoDetectRenderer(256, 256, {resolution: 2}) renderer.view.style.position = 'absolute' @@ -67,63 +70,10 @@ export default class App { //Add the canvas to the HTML document document.body.appendChild(renderer.view) + this.renderer = renderer //Create a container object called the `stage` - const stage = new PIXI.Container() - - const menuBar = new PIXI.Graphics() - menuBar.beginFill(SECONDARY_COLOR, 0.8) - menuBar.drawRect(0, 0, window.innerWidth, 28) - menuBar.lineStyle(2, SECONDARY_COLOR, 0.8) - menuBar.moveTo(0, 28) - menuBar.lineTo(window.innerWidth, 28) - menuBar.lineStyle(1, PRIMARY_COLOR, 1) - menuBar.drawRect(20, 3, 200, 22) - stage.addChild(menuBar) - - const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 14, fill: PRIMARY_COLOR}) - searchPrompt.x = 26 - searchPrompt.y = 8 - PIXI.ticker.shared.add(function (_) { - var v = Math.sin((PIXI.ticker.shared.lastTime % 2000) / 2000. * Math.PI) - searchPrompt.alpha = v - }) - stage.addChild(searchPrompt) - - const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 14, fill: PRIMARY_COLOR}) - searchText.x = 40 - searchText.y = 8 - stage.addChild(searchText) - - const items = [ - { - text: 'SORT: NAME', sorterFn: sortByName - }, - { - text: 'SORT: AGE', sorterFn: sortByAge - }, - { - text: 'SORT: MEMORY', sorterFn: sortByMemory - }, - { - text: 'SORT: CPU', sorterFn: sortByCPU - } - ] - //setting default sort - App.sorterFn = items[0].sorterFn - const selectBox = new SelectBox(items) - selectBox.x = 265 - selectBox.y = 3 - menuBar.addChild(selectBox.draw()) - - const viewContainer = new PIXI.Container() - viewContainer.x = 20 - viewContainer.y = 40 - stage.addChild(viewContainer) - - const tooltip = new Tooltip() - tooltip.draw() - stage.addChild(tooltip) + this.stage = new PIXI.Container() function downHandler(event) { if (event.key && event.key.length == 1 && !event.ctrlKey && !event.metaKey) { @@ -141,9 +91,66 @@ export default class App { addEventListener( 'keydown', downHandler.bind(this), false ) + } + + draw() { + this.stage.removeChildren() + this.theme.apply(this.stage) + + const menuBar = new PIXI.Graphics() + menuBar.beginFill(this.theme.secondaryColor, 0.8) + menuBar.drawRect(0, 0, window.innerWidth, 28) + menuBar.lineStyle(2, this.theme.secondaryColor, 0.8) + menuBar.moveTo(0, 28) + menuBar.lineTo(window.innerWidth, 28) + menuBar.lineStyle(1, this.theme.primaryColor, 1) + menuBar.drawRect(20, 3, 200, 22) + this.stage.addChild(menuBar) + + const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 14, fill: this.theme.primaryColor}) + searchPrompt.x = 26 + searchPrompt.y = 8 + PIXI.ticker.shared.add(function (_) { + var v = Math.sin((PIXI.ticker.shared.lastTime % 2000) / 2000. * Math.PI) + searchPrompt.alpha = v + }) + this.stage.addChild(searchPrompt) + + const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 14, fill: this.theme.primaryColor}) + searchText.x = 40 + searchText.y = 8 + this.stage.addChild(searchText) + + const items = [ + { + text: 'SORT: NAME', sorterFn: sortByName + }, + { + text: 'SORT: AGE', sorterFn: sortByAge + }, + { + text: 'SORT: MEMORY', sorterFn: sortByMemory + }, + { + text: 'SORT: CPU', sorterFn: sortByCPU + } + ] + //setting default sort + this.sorterFn = items[0].sorterFn + const selectBox = new SelectBox(items) + selectBox.x = 265 + selectBox.y = 3 + menuBar.addChild(selectBox.draw()) + + const viewContainer = new PIXI.Container() + viewContainer.x = 20 + viewContainer.y = 40 + this.stage.addChild(viewContainer) + + const tooltip = new Tooltip() + tooltip.draw() + this.stage.addChild(tooltip) - this.renderer = renderer - this.stage = stage this.searchText = searchText this.viewContainer = viewContainer this.tooltip = tooltip @@ -293,8 +300,15 @@ export default class App { this.renderer.render(this.stage) } + switchTheme(newTheme) { + this.theme = Theme.get(newTheme) + this.draw() + localStorage.setItem('theme', newTheme) + } + run() { this.initialize() + this.draw() const that = this diff --git a/app/src/bars.js b/app/src/bars.js index f834a4c..9b42484 100644 --- a/app/src/bars.js +++ b/app/src/bars.js @@ -1,5 +1,5 @@ import {FACTORS, getBarColor} from './utils' -import {PRIMARY_COLOR} from './colors' +import App from './app' const PIXI = require('pixi.js') @@ -16,7 +16,7 @@ export default class Bars extends PIXI.Graphics { const barHeight = 92 - bars.beginFill(PRIMARY_COLOR, 0.1) + bars.beginFill(App.current.theme.primaryColor, 0.1) bars.drawRect(5, 110 - barHeight, 15, barHeight) bars.endFill() @@ -39,7 +39,7 @@ export default class Bars extends PIXI.Graphics { bars.drawRect(16.5, 110 - bars.resources.memory.used / scale, 2.5, bars.resources.memory.used / scale) bars.endFill() - bars.lineStyle(1, PRIMARY_COLOR, 1) + bars.lineStyle(1, App.current.theme.primaryColor, 1) for (var i = 0; i < bars.resources.cpu.capacity; i++) { bars.drawRect(5, 110 - (i + 1) * cpuHeight, 5, cpuHeight) } diff --git a/app/src/cluster.js b/app/src/cluster.js index b1b1526..987f620 100644 --- a/app/src/cluster.js +++ b/app/src/cluster.js @@ -1,6 +1,6 @@ import Node from './node.js' import { Pod } from './pod.js' -import { PRIMARY_COLOR } from './colors.js' +import App from './app.js' const PIXI = require('pixi.js') export default class Cluster extends PIXI.Graphics { @@ -38,12 +38,12 @@ export default class Cluster extends PIXI.Graphics { rows[0] += 20 } - this.lineStyle(2, PRIMARY_COLOR, 1) + this.lineStyle(2, App.current.theme.primaryColor, 1) const width = Math.max(rows[0], rows[1]) this.drawRect(0, 0, width, nodeBox.height * 2 + 30) var topHandle = new PIXI.Graphics() - topHandle.beginFill(PRIMARY_COLOR, 1) + topHandle.beginFill(App.current.theme.primaryColor, 1) topHandle.drawRect(0, 0, width, 15) topHandle.endFill() var text = new PIXI.Text(this.cluster.api_server_url, {fontFamily: 'ShareTechMono', fontSize: 10, fill: 0x000000}) diff --git a/app/src/colors.js b/app/src/colors.js deleted file mode 100644 index 7e03ec9..0000000 --- a/app/src/colors.js +++ /dev/null @@ -1,4 +0,0 @@ -const PRIMARY_COLOR = 0xaaaaff -const SECONDARY_COLOR = 0x222233 - -export { PRIMARY_COLOR, SECONDARY_COLOR } diff --git a/app/src/node.js b/app/src/node.js index 07419d7..a36c9d6 100644 --- a/app/src/node.js +++ b/app/src/node.js @@ -1,7 +1,6 @@ import {Pod} from './pod.js' import Bars from './bars.js' import {parseResource} from './utils.js' -import {PRIMARY_COLOR, SECONDARY_COLOR} from './colors.js' import App from './app' const PIXI = require('pixi.js') @@ -48,7 +47,7 @@ export default class Node extends PIXI.Graphics { draw() { const nodeBox = this const topHandle = new PIXI.Graphics() - topHandle.beginFill(PRIMARY_COLOR, 1) + topHandle.beginFill(App.current.theme.primaryColor, 1) topHandle.drawRect(0, 0, 105, 15) topHandle.endFill() const ellipsizedNodeName = this.node.name.length > 17 ? this.node.name.substring(0, 17).concat('…') : this.node.name @@ -57,8 +56,8 @@ export default class Node extends PIXI.Graphics { text.y = 2 topHandle.addChild(text) nodeBox.addChild(topHandle) - nodeBox.lineStyle(2, PRIMARY_COLOR, 1) - nodeBox.beginFill(SECONDARY_COLOR, 1) + nodeBox.lineStyle(2, App.current.theme.primaryColor, 1) + nodeBox.beginFill(App.current.theme.secondaryColor, 1) nodeBox.drawRect(0, 0, 105, 115) nodeBox.endFill() nodeBox.lineStyle(2, 0xaaaaaa, 1) diff --git a/app/src/pod.js b/app/src/pod.js index f864d64..4129341 100644 --- a/app/src/pod.js +++ b/app/src/pod.js @@ -1,5 +1,5 @@ const PIXI = require('pixi.js') -import {PRIMARY_COLOR} from './colors.js' +import App from './app.js' import {FACTORS, getBarColor, podResource} from './utils.js' import {BRIGHTNESS_FILTER} from './filters.js' @@ -201,7 +201,7 @@ export class Pod extends PIXI.Graphics { podBox.filters = [] this.tooltip.visible = false }) - podBox.lineStyle(1, PRIMARY_COLOR, 1) + podBox.lineStyle(1, App.current.theme.primaryColor, 1) let i = 0 const w = 10 / this.pod.containers.length for (const container of this.pod.containers) { diff --git a/app/src/selectbox.js b/app/src/selectbox.js index d9067c1..b345f8d 100644 --- a/app/src/selectbox.js +++ b/app/src/selectbox.js @@ -1,4 +1,3 @@ -import { PRIMARY_COLOR, SECONDARY_COLOR } from './colors.js' import App from './app' const PIXI = require('pixi.js') @@ -11,7 +10,7 @@ export default class SelectBox extends PIXI.Graphics { this.text = new PIXI.Text(this.items[this.count].text, { fontFamily: 'ShareTechMono', fontSize: 14, - fill: PRIMARY_COLOR, + fill: App.current.theme.primaryColor, align: 'center' }) this.text.x = 10 @@ -26,7 +25,7 @@ export default class SelectBox extends PIXI.Graphics { selectBox.count = 0 } selectBox.text.text = selectBox.items[selectBox.count].text - App.sorterFn = selectBox.items[selectBox.count].sorterFn + App.current.sorterFn = selectBox.items[selectBox.count].sorterFn } onBackPressed() { @@ -36,7 +35,7 @@ export default class SelectBox extends PIXI.Graphics { selectBox.count = selectBox.items.length - 1 } selectBox.text.text = selectBox.items[selectBox.count].text - App.sorterFn = selectBox.items[selectBox.count].sorterFn + App.current.sorterFn = selectBox.items[selectBox.count].sorterFn } draw() { @@ -51,10 +50,10 @@ export default class SelectBox extends PIXI.Graphics { const arrowBoxWidth = 18 // draw a triangle - backArrow.beginFill(SECONDARY_COLOR, 1) + backArrow.beginFill(App.current.theme.secondaryColor, 1) backArrow.drawRect(-18, 0, arrowBoxWidth, 22) - backArrow.lineStyle(1, PRIMARY_COLOR, 1) - backArrow.beginFill(SECONDARY_COLOR, 1) + backArrow.lineStyle(1, App.current.theme.primaryColor, 1) + backArrow.beginFill(App.current.theme.secondaryColor, 1) backArrow.moveTo(-4, 5) backArrow.lineTo(-15, 11) backArrow.lineTo(-4, 17) @@ -62,15 +61,15 @@ export default class SelectBox extends PIXI.Graphics { backArrow.endFill() selectBox.addChild(backArrow) - selectBox.lineStyle(1, PRIMARY_COLOR, 1) - selectBox.beginFill(SECONDARY_COLOR, 0.5) + selectBox.lineStyle(1, App.current.theme.primaryColor, 1) + selectBox.beginFill(App.current.theme.secondaryColor, 0.5) selectBox.drawRect(4, 0, 100, 22) selectBox.endFill() - forwardArrow.beginFill(SECONDARY_COLOR, 1) + forwardArrow.beginFill(App.current.theme.secondaryColor, 1) forwardArrow.drawRect(108, 0, arrowBoxWidth, 22) - forwardArrow.lineStyle(1, PRIMARY_COLOR, 1) - forwardArrow.beginFill(SECONDARY_COLOR, 1) + forwardArrow.lineStyle(1, App.current.theme.primaryColor, 1) + forwardArrow.beginFill(App.current.theme.secondaryColor, 1) forwardArrow.moveTo(111, 5) forwardArrow.lineTo(122, 11) forwardArrow.lineTo(111, 17) diff --git a/app/src/themes.js b/app/src/themes.js new file mode 100644 index 0000000..ee9978c --- /dev/null +++ b/app/src/themes.js @@ -0,0 +1,99 @@ +const PIXI = require('pixi.js') + +export class Theme { + constructor() { + } + + static get(name) { + switch (name) { + case 'default': + return new DefaultTheme() + case 'green': + return new GreenTheme() + case 'grey': + return new GreyTheme() + case 'black-and-white': + return new BlackAndWhiteTheme() + case 'sepia': + return new SepiaTheme() + case 'polaroid': + return new PolaroidTheme() + case 'high-contrast': + return new HighContrastTheme() + default: + return new DefaultTheme() + } + } +} + +class DefaultTheme { + constructor() { + this.primaryColor = 0xaaaaff + this.secondaryColor = 0x222233 + } + apply(stage) { + stage.filters = [] + } +} + +class GreenTheme extends DefaultTheme { + constructor() { + super() + this.primaryColor = 0xaaffaa + this.secondaryColor = 0x223322 + } +} + +class GreyTheme extends DefaultTheme { + constructor() { + super() + this.primaryColor = 0xeeeeee + this.secondaryColor = 0x333333 + } +} + +class BlackAndWhiteTheme extends DefaultTheme { + constructor() { + super() + } + apply(stage) { + const filter = new PIXI.filters.ColorMatrixFilter() + filter.blackAndWhite() + stage.filters = [filter] + } +} + +class SepiaTheme extends DefaultTheme { + constructor() { + super() + } + apply(stage) { + const filter = new PIXI.filters.ColorMatrixFilter() + filter.sepia() + stage.filters = [filter] + } +} + +class PolaroidTheme extends DefaultTheme { + constructor() { + super() + } + apply(stage) { + const filter = new PIXI.filters.ColorMatrixFilter() + filter.polaroid() + stage.filters = [filter] + } +} + +class HighContrastTheme extends DefaultTheme { + constructor() { + super() + this.primaryColor = 0xffffff + this.secondaryColor = 0x000000 + } + apply(stage) { + const filter = new PIXI.filters.ColorMatrixFilter() + filter.saturate(3) + stage.filters = [filter] + } +} diff --git a/app/src/tooltip.js b/app/src/tooltip.js index 7c7b8b5..7cd7468 100644 --- a/app/src/tooltip.js +++ b/app/src/tooltip.js @@ -1,4 +1,4 @@ -import {SECONDARY_COLOR} from './colors.js' +import App from './app.js' const PIXI = require('pixi.js') @@ -19,8 +19,8 @@ export default class Tooltip extends PIXI.Graphics { draw () { this.clear() - this.lineStyle(2, SECONDARY_COLOR, 0.8) - this.beginFill(SECONDARY_COLOR, 0.8) + this.lineStyle(2, App.current.theme.secondaryColor, 0.8) + this.beginFill(App.current.theme.secondaryColor, 0.8) this.drawRect(0, 0, this.text.width + 8, this.text.height + 8) this.endFill() }