config.js in JSON format

[Serge]

@lavolp3 said in config.js in JSON format:

I think I understand (and like!) what you are trying to do, but the downside is that you’re going to create one hell of a file. The module configs are in a lot of cases much bigger than what the module creator suggests users to change. The clock you’ve shown is a very good example.

All other modules have + - the same number of parameters. config.js looks good and readable.
Changes of module parameters do not affect functionality. They change appearence so if all parameters are inputed correctly (e.g. numbers to numbers, strings to strings) - everything will work fine.

I would very much like to see the web interface to be limited to layers with a drop-down function
First layer: all installed modules.
Click on a module -> open dropdown with all config parameters for this module.

I have some draft of the interface and it looks similar to those you have described. However, I drop off the idea of dropdowns - due to the huge amount of settings for each module. I have made a left side menu with buttons for each module: e.g. clock, calendar, weather, etc. Some current screenshot is attached.

Screenshot from mobile phone:

Is there somethin on github that I can have a look at already?

Not yet. Its a local development at this stage.

@sdetweil said in config.js in JSON format:

I have created modules using this capability.

do you have your development available somewhere to look over?

[Serge]

This post is deleted!

[sdetweil]

@Serge remember, this is not MagicMirror…
here is the mirror code
https://github.com/evancohen/smart-mirror

here is a module (plugin) for smart-mirror
https://github.com/sdetweil/backgroundImage

here is a sample plugin
https://github.com/sdetweil/samplePlugin

in the base mirror code, YOU have to edit the index.html to add
the appropriate lines to enable your plugin

[Serge]

@sdetweil said in config.js in JSON format:

@Serge remember, this is not MagicMirror…

I have looked throught all the code. For simplicity I will call “SmartMirror” as SM and MagicMirror as MM further.

1. config.schema.json files in SM contain plugins’ parameters and these files have JSON format. Example is a calendar config file smart-mirror/plugins/calendar/config.schema.json

{
    "schema": {
        "calendar": {
            "type": "object",
            "title": "Calendar Settings",
            "properties": {
                "icals": {
                    "type": "array",
                    "title": "iCal URLs",
                    "items": {
                        "type": "string"
                    }
                },
                "maxResults": {
                    "type": "integer",
                    "title": "Max Number of Events for all iCals",
                    "default": 9

2. config.js in MagicMirror is not made in JSON format so it is not easy to make changes there as compared to SM’s config.schema.json

var config = {
	address: "localhost", 
	port: 8080,
	ipWhitelist: [],
	language: "en",
	timeFormat: 24,
	units: "metric",
	modules: [
		{
			module: "newsfeed",
			position: "bottom_bar",
			config: {
				feeds: [
					{
						title: "New York Times",
						url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					}
				],
				showSourceTitle: true,
				showPublishDate: true,
				broadcastNewsFeeds: true,
				broadcastNewsUpdates: true
	}, },	], };

Maybe I think wrong, please correct me if so.

[sdetweil]

@Serge maybe javascript-stringify npm module would help.

Load config.js
Json stringify
Apply schemas
Capture json on save
Convert to js

this little script seems to work

var jjs=require('javascript-stringify')
var cfg=require('../MagicMirror/config/config.js')
var js=require('json-stringify')


var js_config = JSON.stringify(cfg.config)

console.log(cfg)
jjs_config=jjs.stringify(cfg,null,'\t')
console.log("var config="+jjs_config)

[A Former User]

JSON converting may lose some js specific features like callback function, dynamic values by condition, etc. I doubt the benefit of strict json format.
And the user would still make mistakes to write strict JSON format.
I can’t agree JSON is the only or better way to make user-friendly configurable web UI.

[sdetweil]

@Sean do you have some examples of these kinds of data elements? I’d be interested to pass them thru this simple converter to see the fidelity

[A Former User]

@sdetweil

1. callback function as value;
   Many of my modules use the callback functions to make user command or user-customizable dynamic features instead to modify the source itself. (eg. filter, sort, transform, …)
   Here is the the sameple of MMM-NotificationTrigger;

{
  module: "MMM-NotificationTrigger",
  config: {
    triggers:[
      {
        trigger: "SOME_NOTIFICATION",
        fires: [
          {
            fire:"SHOW_ALERT",
            payload: (payload) => {
              return {
                type:"notification",
                title:"Notification comming",
                message: payload.someOption
              }
            },
          }
        ]
      },
    ]
  }
},

2. dynamic values;
   I manage several different configurations in one config.js for my convenience. like this;

(simplified concept)

const mode = "testA"
const someValue = {
  "testA" : "testA",
  "testB" : "testB",
  "debug" : "debug",
  "release" : "release",
  ...
}
...

{
  module: "MMM-SOMEMODULE",
  config: {
    someField: ((mode == "testA") ? true : false),
    someField2: someValue[mode],
   ...
  }
},

The real usage is more complex but you can catch my approach.

[sdetweil]

@Sean thanks… the 1st, with callbacks was preserved… the 2nd, with the algorithmic values, produced the results of the algorithm… the node runtime does the algorithmic replacement on load of the file… the converter would not know. (unless it processed the text)

                {
                        module: 'MMM-SOMEMODULE',
                        config: {
                                someField: true,
                                someField2: 'testA'
                        }
                }

[Serge]

@lavolp3
@sdetweil
@Sean
here is a short video of what is done at the moment.
https://youtu.be/6w6Uovy9hbE

So what I have:

1. Webserver which is based on the asws webserver. Updated version for MagicMirror is here. Changes made to cmd/asws.go file only.
   Download git

2. build docker container from it (go to asws directory and run " docker build -t asws_new ."

3. Clone to home/pi/www sample web-interface for MagicMirror clock module settings. It is bases on free SB Admin 2 bootstrap template.
   Git includes js/settings.js which is necessary for make everything works. Git is here: https://github.com/sergge1/www

4. Run with a folloing command a docker container build in point 2 above: sudo docker run -d --restart unless-stopped -e DEBUG=true -p 80:80 -v $(pwd)/www:/www asws_new

Sample config.js from video is located at www/config.js

screenshot below: