I’ve officially given up.
I can get it to start to look right outside the magicmirror environment, and even with unsetting everything styled within the ValuesByNotification app, I can’t get it to duplicate within Magic Mirror.
This is with copying Main.css into a test environment, along with the other modules’ CSS files, and using the output HTML from MagicMirror.
Works great in test, but the moment I try to make it go live, it’s doing random things.
I hate CSS. I really do.
@sdetweil Ahh, ok, I thought it was completely dead. Good to know.
@sdetweil With the displays showing “HDMI-A-1” etc, it’s in Wayland, xrandr doesn’t function under that. This is part of why I suggested going back to X11.
@Babene1 Please refer to the documentation for MagicMirror. https://docs.magicmirror.builders/configuration/introduction.html#advanced-configuration-and-frequently-asked-how-to-configure-examples
You may want to also run sudo raspi-config and change back to the x11 desktop environment. there’s some unique issues with the new environment that may not be covered.
@wishmaster270 I think the problem I’m having is figuring out where to place the classes to trigger what I want. Flex to me seems a bit erratic with how to set things.
@sdetweil I’m aware of everything you said, the problem is that I can’t get the CSS to cooperate. I can get 'em all to row, all to column (Default), etc, just not anything else.
Where I’m weakest is CSS, I have a hard time wrapping my head around it.
(old) Sample data:
{"data":{"did":"001D0A71573B","ts":1716603038,"conditions":[{"lsid":434637,"data_structure_type":1,"txid":1,"temp": 56.9,"hum":72.8,"dew_point": 48.3,"wet_bulb": 51.5,"heat_index": 56.2,"wind_chill": 56.9,"thw_index": 56.2,"thsw_index":null,"wind_speed_last":2.00,"wind_dir_last":146,"wind_speed_avg_last_1_min":2.00,"wind_dir_scalar_avg_last_1_min":157,"wind_speed_avg_last_2_min":2.00,"wind_dir_scalar_avg_last_2_min":157,"wind_speed_hi_last_2_min":5.00,"wind_dir_at_hi_speed_last_2_min":169,"wind_speed_avg_last_10_min":1.31,"wind_dir_scalar_avg_last_10_min":180,"wind_speed_hi_last_10_min":5.00,"wind_dir_at_hi_speed_last_10_min":169,"rain_size":1,"rain_rate_last":0,"rain_rate_hi":0,"rainfall_last_15_min":0,"rain_rate_hi_last_15_min":0,"rainfall_last_60_min":0,"rainfall_last_24_hr":7,"rain_storm":7,"rain_storm_start_at":1716576961,"solar_rad":null,"uv_index":null,"rx_state":0,"trans_battery_flag":0,"rainfall_daily":7,"rainfall_monthly":155,"rainfall_year":3713,"rain_storm_last":40,"rain_storm_last_start_at":1716299460,"rain_storm_last_end_at":1716433260},{"lsid":434634,"data_structure_type":4,"temp_in": 83.5,"hum_in":29.5,"dew_point_in": 48.4,"heat_index_in": 81.5},{"lsid":434633,"data_structure_type":3,"bar_sea_level":29.826,"bar_trend":-0.038,"bar_absolute":29.365}]},"error":null}
of course. Or pause on the sources page. Same effect.
I’m wanting to show my values by notification differently, and it’s not cooperating with any css I’m throwing at it.
Here’s the config - commented to show how I want it to look (adjusted upon rediscovery that some values are calculated, and I’m not gonna bother with that):
{
module: "MMM-ValuesByNotification", // https://github.com/Tom-Hirschberger/MMM-ValuesByNotification
position: "bottom_right",
config: {
animationSpeed: 0,
updateInterval: 15,
reuseCount: 99,
transformerFunctions: {
degToCompass: (num) => {
val = ((num/22.5)+.5) | 0;
arr = ["N","NNE","NE","ENE","E","ESE", "SE", "SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"];
res = arr[(val % 16)];
return res;
},
toDate: (num) => {
return new Date(num * 1000).toLocaleString('en-US', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: true
});
},
},
groups: [
//groups should be on row next to each other.
// Values next to titles unless indicated.
{
classes: "row",
items: [
{
notification: "Weather",
values: [
{
valueTitle: " ",
valueUnit: "°F",
jsonpath: "data.conditions[0].temp",
valueFormat: "Number(${value}).toFixed(1)",
classes: "xlarge",
},
],
},
],
},
// Insert vertical rule here
{
classes: "row medium",
items: [
{
notification: "Weather",
values: [
{
valueTitle: "Wind:",
valueUnit: "mph",
jsonpath: "data.conditions[0].wind_speed_last",
valueFormat: "Number(${value}).toFixed(1)",
unitSpace: true,
},
// same line as previous
{
valueTitle: " ",
jsonpath: "data.conditions[0].wind_dir_last",
valueTransformers: ["degToCompass"],
},
// Insert <HR> here
{
valueTitle: "Rain:",
valueUnit: "in",
unitSpace: true,
jsonpath: "data.conditions[0].rainfall_daily",
valueFormat: "Number(${value}/100).toFixed(2)",
},
// same line as previous
{
valueTitle: "Yearly Total",
valueUnit: "in",
unitSpace: true,
jsonpath: "data.conditions[0].rainfall_year" ,
valueFormat: "Number(${value}/100).toFixed(2)",
},
],
},
],
},
// Insert Vertical Rule here
{
classes: "row medium",
items: [
{
notification: "Weather",
values: [
{
valueTitle: "Humidity:",
valueUnit: "%",
jsonpath: "data.conditions[0].hum",
valueFormat: "Number(${value}).toFixed(1)",
},
// same line as previous
{
valueTitle: "Feels like:",
valueUnit: "°F",
jsonpath: "data.conditions[0].thw_index",
valueFormat: "Number(${value}).toFixed(1)",
},
// Insert <HR> here
{
valueTitle: "Barometer",
valueUnit: "in Hg",
unitSpace: true,
jsonpath: "data.conditions[2].bar",
valueFormat: "Number(${value}).toFixed(3)",
},
],
},
],
},
// Below others.
{
classes: "bottom small",
items: [
{
notification: "Weather",
values: [
{
valueTitle: "Conditions as of:",
jsonpath: "data.ts",
valueTransformers: ["toDate"],
//classes: "",
}
]
},
],
},
],
},
},
Existing CSS modifications - and needs:
.MMM-ValuesByNotification {
border-radius: 0px;
border-style: none;
color: black;
background-color: white;
}
.MMM-ValuesByNotification .vbn .groupWrapper {
border-radius: 0px;
border-style: none;
color: black;
background-color: white;
}
/* vertical rule
.vertical-rule {
margin-top: 15px;
margin-bottom: 15px;
width: 1px;
background: #e0e4e7;
float: left;
height: 90px;
}
*/