Can't edit a theme...

Hey @narkotic,

adding channels in the json file won't lead to additional widgets in the theme. You can hover change the values if you receive wrong values. If you wish to display completely different values than the theme currently does, you will have to adapt the code of the theme itself.

We are currently working on a draft for customizable themes. For these you could then add widgets on your won with an editor, but this feature won't be finished so soon since it's rather complex.

Now I'm even more confused, sorry.

In my post I had a link to your blog post showing how to edit the theme, and what file to edit. When I cleared that file out, I was expecting everything to leave my dashboard but nothing happened.

Are you saying that the blog post was wrong, and it's not possible currently to show / remove additional items?

Ok I'll try to rewrite the blog a little to make it more understandable. But to clarify the channels.json that you tried to clear is for the app itself, not the themes. When you add widgets in your app they will be added to the channels.json. The only exception are the general_<hardwaretype>_<sensortype> channels, which are the default channels also used by a theme for general values usually available on every machine.

The theme can add channels at runtime via the theme-config.json inside the folder of the theme but they won't show up in the channels.json. 

If you want to edit font sizes and so on you will have to edit the code of the theme (HTML, CSS). If you don't want your changes to the theme to be lost after an update, make sure to copy the theme files that you are using to Mobro_Local\public\theme\<themename> and adapt the code there.

Does that clarify it a little bit?

I meant to say I edited the file " "C:\Users\Administrator\AppData\Local\MoBro_Local\public\theme\dubbadhar_custom\theme-config.json". I cleared it out and saw no changes to both the RBP and the web page running this theme.  

Ok, I figured it out. A few hours later I'm now a .JS / .CSS / .HTML expert.

Kidding Aside - I've been able to figure out:

1. How to modify sensor values with stuff from HWinfo
2. How to change sensors
3. How to shift things around / adjust fonts (.CSS stuff)
4. Verified X11 / Chromium is starting with the right resolution (1024x100 - yes you read that right).
5. Shifted things from center justified to left

I'm running this on a 1024x100 LCD display (1"x18" or so) suitable for a 1U rack mount facia. What I can't seem to get past, is adding a 6th sensor reading to the theme dubbadhar. Everything past #5 gets knocked off the screen. Any pointers? I think it's .CSS related but I can't seem to figure it out from reverse engineering / hacking around. I would say it's cutting off at half the display length, so 50% / 512 pixels. Is that because it's designed for a 7" display with rows of stuff stacked above / below? 

Hey there @narkotic 

So if you already get the data in a channel and create a new graph with JS - CSS might be the issue. 

I've used lot's of media queries to get the theme working on most screens and make it centered everywhere so you might need to remove them. 

I've also used display: grid (here is a guide to that) to create the Grid for the Graphs. Two Graphs are always together in 1 box and there are 2 boxes per row and 2 rows. So you might be able to just adjust the grid-template-columns or the grid-template-rows and add some more “boxes” (more <div>'s inside the <div class="grid"> container). 

For debugging the edited theme i'd recommend using chrome and the chrome dev-tools in the browser (open it inside the MoBro App in the Connected Devices Tab) and just take a look at the elements if they are really off the screen to figure out if its that CSS problem.

Hope that helps,

~ Mike

Thanks for the pointers I'll give it a shot.

I can say though that running it inside a browser (chrome) it definitely stacks them on top of each other. I killed the grid entirely and changed it from being centered to left.  I'll take some photos / screenshots soon and throw them on imgr to show and tell. 

This forum is buggy. If I leave this window open and my login expires, it allows me to “post a comment” but it goes to dev > nul as my login has expired. My long comment is now gone forever and I have to log in and re-type it. Most forums will prompt one to log in and then it posts the comment. 

Anyway - what I said was, I have changed the grid to a cont, which seems to work better for my super wide display. Don't need things on top / bottom of eachother, just side by side. I now show 8 sensors reliably (albeit HWinfo keeps crashing on my Dell server, not your issue but a major hurdle since it shows much more useful data…sigh). 

One oddity is that when I was setting this up, since I am having difficulty understanding how to get sensors through your app to show up (custom ones) due to my own ignorance, I'm just “copying” sensors to fill in empty spaces for testing the display but cloned sensors show now data, is that just how CSS works? Like, I cloned the CPU fan data but the cloned container shows no doughnuts of data, just the labels. 

@narkotic sorry that your text was deleted, but your login session will expire after i think two hours if you don't do anything on the page due to security reasons. That's not a bug, but actually a feature. Whats not a feature currently is that we store your text locally, that's something that we might want to add in the future.

Great to hear that the layout now works out!

Well CSS is just about styling (So colors and moving the HTML markup around). If you want to manipulate the data you would need to create or edit some logic in the JS. 

So if you want to add a Custom sensor value (like described in our blog-entry you mentioned) you would fist need to add it to the theme-config.json. Adding a sensor there will tell the MoBro Windows application to create another data channel for the theme. After that you would actually need to read that data channel in the JS and then also display that data. 
So for example in the dubbadhar theme you first initialize the MoBroSDK and after that you can create a Channel Listener for your custom channel or use the existing one's that we can guarantee to be there. After that you would need to modify the HTML or create a graph via JS. Just take a look at the code here:

• adding a new data channel:
  https://github.com/ModBros/mobro-theme-dubbadhar/blob/master/theme-config.json#L49
• initializing MoBro if not already initialized:
  https://github.com/ModBros/mobro-theme-dubbadhar/blob/master/src/js/script.js#L46
• creating a listener that gets called every time the data changes:
  https://github.com/ModBros/mobro-theme-dubbadhar/blob/master/src/js/script.js#L175

Hope that helps 

Yes, that helps - in fact I figured most of that out on my own yesterday by just hacking / reverse engineering (basically trying to break then fix it). This is nice to affirm I was doing things at least right!

Where I'm currently stuck is adding a sensor from HWinfo. For now what I've been doing is I add it to the app itself on Windows, where it then updates the channels file with a bunch of cryptic data, i.e. where the sensor is, where the data comes from, like this:

{
	"default":false,
	"sources":["hwinfo"],
	"name":"custom_processor_temperature_1alpfjan8kax6eaqn",
	"extractor":"Id",
	"extractorConfig":{
		"hardwaretype":"Processor",
		"sensortype":"Temperature",
		"id":"8"
	},				
	"_id":"9e3bc97c451c4478bbe8f381f31f6242"
}

Is that the only way to get the raw sensor data from something like HWinfo? Add it to the app in Windows as a widget and then pull the data from the channels file? Can I then remove it from the windows app (modbros) after I'm done adding it?

Like - could you give me an example of how to migrate that data into what would go into the theme-config file? That would be ultra helpful. 

@narkotic if you head over to http://localhost:42001/api/sensors/data in your browser you can see what sensors our app reads and what you have access to. I'd suggest to get a browser extension that prettifies that json. (For Chrome i suggest JSON Viewer)

In order to create a new data channel for a theme you do NOT have to add it as a widget in the Windows MoBro app. In fact you don't need to do anything in the application itself (since we do not have theme customization in the app yet), only in the themes folder. 

All you need to do is override the theme-config.json of the theme you want to add the data to.

So for example if you want to edit the  the dubbadhar theme (add channels, change the css or anything at all) you would need to go to C:\Users\<USERNAME>\AppData\Local\MoBro_Local\public\theme and create a new folder with the same name as the folder of the theme you want to edit. For all available themes on your system go to C:\Users\<USERNAME>\AppData\Local\MoBro\app-1.0.0-beta2\resources\resources\public\theme. This path is obviously for the app with version 1.0.0-beta2. If you update that path will change.

So to go back to our example you would need to create the dubbadhar folder in C:\Users\<USERNAME>\AppData\Local\MoBro_Local\public\theme. If you don't do that and edit the files directly in the installed path they will be lost after an update!
Now in order to change anything in this theme would need to copy the files you want to edit with the same folder structure to the themes' folder! It's really important that you have the same names and structure here. 

So to add another data channel in the dubbadhar theme you would need to copy the theme-config.json over from C:\Users\<USERNAME>\AppData\Local\MoBro\app-1.0.0-beta2\resources\resources\public\theme\dubbadhar to C:\Users\<USERNAME>\AppData\Local\MoBro_Local\public\theme\dubbadhar.
Now you can edit the file and add a new object in the channels array to create your own channel like so:

{
  "name": "theme_vram_total",
  "sources": "all",
  "hardwaretype": "Graphics",
  "sensortype": "Data",
  "fallbackToFirstValue": false,
  "extract": [{
      "byLabel": [ {
        "includes": "Memory Total"
      }
    ]
  }]
}

The name is just a name of your choosing that will be used in the JS to access the data. In sources you can define if you want to select “HWiNFO”, “OpenHardwareMonitor” or “LibreHardwareMonitor”, but I'd just leave it at “all”. For the hardwaretype and sensortype just take a look at whats available on your system here and choose what you want to select: http://localhost:42001/api/sensors/data
For selecting the right value you need to search for the label that matches the hardwaretype and sensortype on your system (They can be very different from system to system). 
You can either use includes and make multiple includes, or an excludes if you want to exclude a label. I'd suggest taking a look at the theme-config.json of the dubbadhar theme. And that's it!

If the json is valid you should now be able to read that new sensor you have just created by accessing its name in the JS like so:

MobroSDK.addChannelListener('<NAME OF YOUR CHANNEL>', (data) => {
 console.log("channel data", data)
});

After reading that maybe try another go on our blog entry and see if its now easier to read with that info :)

Ok, got it now.

1. Find sensor info from the sensors webpage (thx for the chrome plugin, helped!)
2. Insert that into the channels file
3. Modify the script.js file to pull in the channel data
4. Modify the index.html file to place it on the screen

My latest challenge… Sometimes the sensors, while unique, ending up parsing the same data as I'm unable to figure out how to pull in additional information. For example, my server has two CPU's. Here is the data from the sensors file:

CPU #1 

"sensortype": "Temperature",
              "unit": "°C",
              "id": "/intelcpu/0/temperature/0",
              "label": "CPU Core #1",
              "value": 42.0,
              "min": 37.0,
              "max": 60.0,
              "avg": null

CPU #2

            "sensortype": "Temperature",
              "unit": "°C",
              "id": "/intelcpu/1/temperature/0",
              "label": "CPU Core #1",
              "value": 41.0,
              "min": 35.0,
              "max": 53.0,
              "avg": null

As you can see, the id is unique, but if I pump that into the theme-config.json file, it doesn't seem to listen:

   "name": "CPU1_temp",
    "sources": "all",
    "hardwaretype": "Processor",
    "sensortype": "Temperature",
"id": "/intelcpu/0/temperature/0",
    "fallbackToFirstValue": false,
    "extract": [{
      "byLabel": [ {
        "includes": "CPU Core #1"

Is this possible? I tried changing “byLabel” to “byid” and doing an includes with the ID in it but that didn't work. 

Yeah - can't seem to figure this one out. If there are multiple fans, hard drives, cpu's, etc - there doesn't seem to be a way to delineate between them within the theme-config.json file. In the sensors html file it's clearly delineated by “ID” and stuff like that.

I feel I'm so close here - any ideas on how to parse additional sensor data in the channels file? I've tried everything but it seems to get disregarded. Without knowing how this file is parsed I'm leading a blind horse. Does it support more granularity yet?

So I just took a look at the parsing for the themes-config.json and currently we only allow filtering the values byLabel. Internally inside the MoBro Windows app we already do it byId. 
So we are going to add parsing byId like you mentioned in your posting in the next version beta-3, that will hopefully be ready publicly sometime next week. We're going to test it with our patreons this weekend. 

Awesome! Can't wait. Yes, I noticed that by looking in the channels file after adding a widget to the windows app, it was filtering by ID as well.

I wouldn't call it “buggy” but more of a not so user friendly security measure.  I just had this happen to me too.  What ModBros needs to consider is that sometimes (in order to help the rest of the community and give the ModBros team as much info as possible) we need to do research, find workarounds when using this forum to do little things (like posting images), etc.  This could easily bleed into 2+hrs depending on the post content.  On top of that, the more time spent on a post (for formatting etc) the more upset one might get after getting a “I'm sorry, but the post you just spent 5 hrs on is now deleted” response from the forum.  As far as security, I think that's a bust because if your goal is to kill the session and all it contains after 2 hours then that does not work and is easily bypassed.

I personally found that hitting the back button a bunch of times on my browser thankfully kept my post in cache (as well as my session).  After seeing the “you have been logged out” or whatever message, I hit back like 10 times fast and it logged me back in (without actually logging in) and showed me my post draft again.  Then I just hit post and everything worked as expected.

With all the other forums I have used in the past usually they will keep your session active for at least 24 hours.  Even then, somehow can tell when you have closed the browser and then require you to log back in.

Note: This is not a gripe as much as it is feedback from a loyal community user.  ;)

Thanks @GhosTz and @Dave !

Hey @Arvo Bowen III,

Thanks for the feedback, I see it as that and not as gripe so no worries. I'll add it to my list, even though it's starting to get quite long hehe.

Cheers.

Dave

Hey @Arvo Bowen III,

Thanks for the feedback, I see it as that and not as gripe so no worries. I'll add it to my list, even though it's starting to get quite long hehe.

Cheers.

Thanks @Dave!  It's not something that breaks the system and there is a work around.  You guys are great!

Side notes: I just noticed two things.  When you edit, the quote formatting is lost.  Also, seems there is no way to delete your own post seconds after you make it.  Maybe this is the intention but if I could have then my quote formatting would have still been in tacked with that work around. ;)