Change Theme as scheduled

General
1

I created a nice dashboard and showing it 24/7 on a old tablet.

However during the evening night when their is less ambient light the dashboard is to bright.

I know I can change the Style in side node-red admin dashboard.

I just want to have a simple ui button to switch between "Light and "Dark" theme.
Preferable with a configurable schedule aka "big timer".

So the actual question is is their a node which allows regarding the payload switch the Node-RED Dashboard Style to "Light" or "Black".

Or should I figure out a code which harshly injects changes in the Node-Red settings?

Thank you for your advice

2

see Dynamic style change between Light and Dark and onwards

3

@dceejay Thank you for your quick reply, appreciated !

So the not simple manner would be injecting directly into flows.json

image
image.png3451×1460 305 KB

4

@Leroxy, agree it would be nice to be able to change themes or attributes on the fly.

Where did you find the information in your screen shot? It would be a great starting point for "variations on a theme."

5

@drmibell
Well actually what I did was copying my current flow.json file then changing the settings and compare it to the now active flow.json

Just need to figure out how to parse or swap out pieces in the json file

6

Currently I am tinkering with python to change the json flow file.

From what I could tell (noob) correct me if I am wrong the flow.json file doesnt have identifiers or its all contained under the same key.

Opening the file in notepad json viewer does generate object keys but isn't useful as every flow.json differs.

So I am this far to extract the part I need to change with the following

Note in order to get this python script working the python module json needs to be installed.

pip install simplejson

''' JavaScript Object Notation '''
import json

with open('flows.json') as f:
 data = json.load(f)
#print (data)


for i in data:
    if i['type'] == 'ui_base':
        #print(i['theme'])
        with open('new_flows.json', 'w') as f:
		json.dump(i, f, indent=2)
        break

Basically it loads the contains json of the file transforms it the python object then it loops through until it finds the type which equals ui_base then dumps/transforms the python object into json file new_flows.json

Please note that it is dangerous to take your live flow.json file I just copied it to a other directory.

file:new_flow.json

 {
  "theme": {
    "name": "theme-dark", 
    "angularTheme": {
      "warn": "red", 
      "accents": "blue", 
      "primary": "indigo", 
      "background": "grey"
    }, 
    "lightTheme": {
      "default": "#0094CE", 
      "baseColor": "#0094CE", 
      "edited": true, 
      "reset": false, 
      "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
    }, 
    "customTheme": {
      "default": "#4B7930", 
      "baseColor": "#4B7930", 
      "name": "Untitled Theme 1", 
      "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
    }, 
    "themeState": {
      "page-titlebar-backgroundColor": {
        "edited": false, 
        "value": "#097479"
      }, 
      "page-backgroundColor": {
        "edited": false, 
        "value": "#111111"
      }, 
      "widget-backgroundColor": {
        "edited": false, 
        "value": "#097479"
      }, 
      "page-sidebar-backgroundColor": {
        "edited": false, 
        "value": "#000000"
      }, 
      "widget-textColor": {
        "edited": false, 
        "value": "#eeeeee"
      }, 
      "group-backgroundColor": {
        "edited": false, 
        "value": "#333333"
      }, 
      "base-font": {
        "value": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
      }, 
      "group-textColor": {
        "edited": false, 
        "value": "#0eb8c0"
      }, 
      "widget-borderColor": {
        "edited": false, 
        "value": "#333333"
      }, 
      "group-borderColor": {
        "edited": false, 
        "value": "#555555"
      }, 
      "base-color": {
        "default": "#097479", 
        "edited": false, 
        "value": "#097479"
      }
    }, 
    "darkTheme": {
      "default": "#097479", 
      "baseColor": "#097479", 
      "edited": true, 
      "reset": false, 
      "baseFont": "-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"
    }
  }, 
  "type": "ui_base", 
  "id": "d66d61f0.03bbc", 
  "site": {
    "lockMenu": "false", 
    "name": "Node-RED Dashboard", 
    "dateFormat": "DD/MM/YYYY", 
    "sizes": {
      "sy": 48, 
      "sx": 48, 
      "px": 0, 
      "py": 0, 
      "gy": 6, 
      "gx": 6, 
      "cy": 6, 
      "cx": 6
    }, 
    "hideToolbar": "false", 
    "allowTempTheme": "true", 
    "allowSwipe": "true"
  }
}

Now I just need to figure out a method to change the data and inject it back...

7

If you have a python version higher than Python 2.5 you won’t need simplejson, there’s a builtin json module functioning just as well, with the same API. The JSON module got added in 2.6. I’m not sure if I would advice this approach in the first place, but if you do simplejson is very likely not needed.

8

@afelix :blush: I wouldn't know which version I got I have installed jessie on a pi2 then with peter scargill's script installed node-red

9

Python 2.7, the successor of 2.6, will be EOL from January 1st next year onwards. I think you can safely assume you have something higher if it's a pi2. Jessie comes out of the box with 2.7 and 3.4 iirc, but it's been a while since I ran Jessie. Both have a json module in the standard library.