DISCUSSION

One - MoBro Legacy Theme

posted by
epicX
in Themes .
13 people are following

Hello Everyone! 

I am epicX. Today I released my first theme for MoBro. I hope you guys will like that.

Ui is fairly customizable and responsive as well.

If you love this theme then give me a star at least :D.

Repo -  Here

Link - Download Now

Screenshots

71c3d159-3e0c-4ff4-9c7a-89c1772597e4.png
96c5be72-7a19-446d-9412-f73cb566efde.png
ee3ea424-da2b-4e0f-a7d5-1e5a7eb04a24.png
Replies 21 - 40 (48)

@Zillomab Check latest release I added time tile into the theme. Enjoy :)

Here's my fork on the latest version using the time tile on a RPi 800x480
1: made adjustments on the script so it hides the tiles not wanted
2: changed the padding and the collumn grid width
3: hide the settings button
4: changed the clock to 24h format
5: hide the pills that are not being used, turning opacity to 0

a9604882-6e80-4457-81c8-82b15264cd58.png
bc9c2665-2203-4736-aace-44befbbd671c.ee851716.jpg

@magnificent3 Great :)) Give the link to your fork. I will add link of that into the post.

@epicX new to github but here it goes. Not sure if the script.js was correctly edited. https://github.com/magnificent3/mobros_legacy_one/tree/rpi

@magnificent3 I saw your repo. There are some issues. You can't able to source control with that changes. Because you replaced script.js and style.css from the complied ones. 

One way to solve this issue is that. Clone my repo. Then go to the directory and npm install. After that do changes into style.scss and script.js which is in src folder.

To compile the scss to css there is a vscode plugin called live sass compiler. You can use that to compile scss to css.

 

After that use npm run build. It will create dist folder. Use that for releases. But don't put codes from dist to src. Otherwise, if I made some changes in the original repo you can't cherry-pick those changes.

Just D'loaded the update. FPS was not working, not sure what it needs. It was long in the display. But it is a touchscreen and that works. Just remove what I don't need in settings and 1 screen display. Like the Clock addition. 

Would be nice to be able to adjust sizes of each display area, but that seems like a lot of extra programming on your end. Unless you really like to tweak the thing. :)

 

@Mike13F For FPS you have to install AIDA64 + Rivatuner Server. You can't change the size of the tiles. The maximum no of tiles you can show on the display is 6 (Excluding Header). You can choose the top 6 tiles from settings and hide others.

Hello,

First of all, very nice theme.

Is it possible to modify the theme configuration without using the configuration gear?

I have no mouse accessibility on my device setup and no touch screen. I can only modify files from my main computer and send them to the pi using Modbros…

Regards.

Hi again @epicX ,

Well I thought I could make some changes to adapt to my 800x480 screen and here is the end result:

04d7f799-63a2-4e0c-86fd-db0e90dcb9d6.png

Pretty happy with the end result! Thank you so much for your design and groundworks!

 

 

magnificent3

Hi again epicX,

Well I thought I could make some changes to adapt to my 800x480 screen and here is the end result:

04d7f799-63a2-4e0c-86fd-db0e90dcb9d6.png

Pretty happy with the end result! Thank you so much for your design and groundworks!

 

Struggling to download this from your fork, Would look awesome on my Pi screen.  Installing it just kills my modbro

 

Nah scratch that, as awesome as this theme is I don't think I'll get away with it my 480x320 3.5" screen. 

magnificent3

Hi Campblor

I've just tweaked it a bit. Just unzip and put the folder into:
\Users\<youruser>\AppData\Local\MoBro_Local\public\theme

Here goes a 480x320 version: https://tl53b3.s.cld.pt

7e0a500a-e1ff-4e7c-abb1-77a0cf0e35e8.png

Here goes a 800x480 version: https://zy0mbl.s.cld.pt

93f54261-a2a1-4425-848b-6817b26a58c6.png
 

You're awesome! It's showing great on my Pi. Minor issues I am trying to learn the coding behind Modbro themes to sort.

  1. CPU temp keeps going to 3 decimal places and breaking free of the pill (happens on oneui by EpicX too)
  2. Changing the Datasource to Aida64. 

Try changing the CPU temperature to Open Hardware.

The Data Sources you change in the Sensor Data Section of the Settings in your MoBro desktop app.

I am not good with web design stuff, I'm an infrastructure guy but I like picking things apart.

I managed to get past the issue where with this theme I couldn't change CPU fan away from mainboard. Aida64 shows that as a CPU value in Modbro. I added an _1 to the themefanspeedcpu value in the json and updated that in the script.js. I'm sure you'll know why that fixed it better than I would.

How would I go about replacing the FPS counter with the same RAM usage the OG One theme displays? 

Awesome! I should be able to compare the two and figure out how to get this perfect for my set up. I appreciate the tweaks. 

Crash course in theme making is needed. 

I've probably butchered it but I need a hand on the last hurdle

What I aim to achieve is RAM in the bottom left, in yellow showing percentage used as you've done for me and then the value in GB used in a Pill like with MHZ and RPM. Also in Yellow. the Icon's I can tweak I know how to do that now. With an icon too like the “ri-gamepad-fill” class

https://wetransfer.com/downloads/13c5807c28afe55c27dbc7610b1bbd9d20220111191202/9b8f3560c148915ef84dcc605775611d20220111191202/0c64c7

2718fc0d-eeca-4dfd-a6ee-a03ef76611f0.jpg

It took some doing but I got it how I wanted it. 

Big thanks to magnificent3 for the initial tweak of the already awesome theme. 

 

8ba3616b-69b7-4bda-8a5b-0c8b7b8c5ec6.ee851716.png

Campblor

 

You're awesome! It's showing great on my Pi. Minor issues I am trying to learn the coding behind Modbro themes to sort.

  1. CPU temp keeps going to 3 decimal places and breaking free of the pill (happens on oneui by EpicX too)
  2. Changing the Datasource to Aida64.

Hi Campblor,

I am also running a 480*320 display and had the 3 decimal places problem. I was able to fix it by limiting the number of decimal points displayed,

in script.js, change

'l.CPU.temperature.current.value'

into

‘(Math.round(l.CPU.temperature.current.value * 10) / 10)’

will solve the issue. This simply limits the decimal point to 1. Hope that helps

 

Campblor

2718fc0d-eeca-4dfd-a6ee-a03ef76611f0.jpg

It took some doing but I got it how I wanted it. 

Big thanks to magnificent3 for the initial tweak of the already awesome theme. 

 

Well @Campblor  that looks pretty cool  ? Would you share that RAM tweak? ?

 

@AstRayNine that is a clever solution ?

Login to comment

Login
Like most websites, we also use cookies. But don't worry, we only use them for your login and statistics.