Dashboard Enhancement : Devices grouping by Roomplans

sebitop · Post by **sebitop** » Sunday 28 December 2025 20:38

Hi All

Just for those interested I just developped a custom.js script based on DarkTheme that allows you to group your favorite devices by Rooms in the dashboard instead of having to select a room in the combo box (I wanted all displayed on my phone dashboard)

idea is to have different types of devices mixed in Rooms (or places) sections to make it easier to manage.

For this you just need to add your favorite devices into different Roomplans then the script extracts both rooms and devices to create the groups
Order is defined as per your room order and devices order inside each room (the drag and drop is no longer available)

is there is no room associated to a device, a section others will be created at the end of the dashboard to show them.

here is the result and as you can see the scripts took my rooms General, Energy and lighting to group devices in (including scenes)

: 2025-12-28 17_28_53-.jpg (184.92 KiB) Viewed 78 times

the custom.js is as follow :

Code: Select all

(function() {
    const VERSION = "V146";
    const AUTHOR = "sebitop";
    const ESPACE_VERTICAL = -2;    
    const ESPACE_HORIZONTAL = 15;  
    const MARGE_SECTION = 40;      

    console.log(`%c[RoomDevices] ${VERSION}`, "color: #ffffff; font-weight: bold; border: 1px solid #ffa500; padding: 2px 5px;");

    async function genererVueAccueil() {
        const hash = window.location.hash;
        const estSurDashboard = hash === "" || hash.includes("#/Dashboard") || hash === "#";
        const mainView = document.getElementById('main-view') || document.querySelector('.container');
        let customDashboard = document.getElementById('rd-custom-dashboard');

        if (!estSurDashboard) {
            if (mainView) mainView.style.display = "block";
            if (customDashboard) customDashboard.style.display = "none";
            return; 
        }

        try {
            // 1. Récupérer les favoris globaux
            const rFav = await fetch('/json.htm?type=command&param=getdevices&filter=all&used=true&favorite=1');
            const dFav = await rFav.json();
            const favorisGlobaux = dFav.result || [];
            
            // On prépare un Set pour suivre les IDs déjà affichés
            let idsAffiches = new Set();

            // 2. Récupérer la liste des plans (Rooms)
            const rPlans = await fetch('/json.htm?type=command&param=getplans');
            const dPlans = await rPlans.json();
            if (!dPlans.result) return;

            if (!mainView) return;
            if (!customDashboard) {
                customDashboard = document.createElement('div');
                customDashboard.id = 'rd-custom-dashboard';
                customDashboard.style = "width:100%; min-height:100vh; padding:10px; box-sizing:border-box; position:relative;";
                mainView.parentNode.insertBefore(customDashboard, mainView);
            }

            customDashboard.innerHTML = `<div style="position:absolute; top:8px; right:15px; font-size:10px; color:#888; font-family:sans-serif; opacity:0.7; pointer-events:none;">RoomDevices ${VERSION}</div>`;
            customDashboard.style.display = "block";
            mainView.style.display = "none";

            const plansTries = dPlans.result.sort((a, b) => (parseInt(a.Order) || 0) - (parseInt(b.Order) || 0));

            // Boucle sur les plans
            for (let plan of plansTries) {
                if (plan.Name.startsWith('_')) continue;

                const rDevs = await fetch(`/json.htm?type=command&param=getplandevices&idx=${plan.idx}`);
                const dDevs = await rDevs.json();
                if (!dDevs.result) continue;

                const devicesAffiches = dDevs.result.filter(pd => 
                    favorisGlobaux.some(fg => fg.idx.toString() === pd.devidx.toString())
                );

                if (devicesAffiches.length > 0) {
                    renderSection(plan.Name.toUpperCase(), devicesAffiches, customDashboard, true);
                    // Marquer comme affichés
                    devicesAffiches.forEach(d => idsAffiches.add(d.devidx.toString()));
                }
            }

            // 3. Section OTHERS : Favoris qui ne sont dans aucun plan affiché
            const favorisRestants = favorisGlobaux.filter(f => !idsAffiches.has(f.idx.toString()));
            
            if (favorisRestants.length > 0) {
                // On formate les données pour correspondre à la structure attendue par renderSection
                const dataOthers = favorisRestants.map(f => ({ devidx: f.idx, order: 0 }));
                renderSection("OTHERS", dataOthers, customDashboard, false);
            }

        } catch (e) { console.error("Erreur RoomDevices:", e); }
    }

    // Fonction de rendu mutualisée pour éviter la duplication de code
    function renderSection(titre, devices, container, trier) {
        let section = document.createElement('div');
        section.style = `margin-bottom:${MARGE_SECTION}px; clear:both; width:100%;`;
        section.innerHTML = `<h2 style="background:#333; color:#ffffff; padding:2px 12px; border-left:4px solid #ffa500; margin-bottom:8px; font-family:sans-serif; text-transform:uppercase; font-size:13px; font-weight:bold; line-height:1.2; box-sizing:border-box;">${titre}</h2>`;

        let flexBox = document.createElement('div');
        flexBox.style = `display:flex; flex-wrap:wrap; gap:0px ${ESPACE_HORIZONTAL}px; width:100%; box-sizing:border-box;`;

        if (trier) {
            devices.sort((a, b) => (parseInt(a.order) || 0) - (parseInt(b.order) || 0));
        }

        devices.forEach(dev => {
            let originalWidget = document.getElementById('device_' + dev.devidx) || document.querySelector(`[id*="_${dev.devidx}"]`);
            if (originalWidget) {
                let clone = originalWidget.cloneNode(true);
                clone.style = `display:block; float:none; margin-left:0px; margin-right:0px; margin-bottom:${ESPACE_VERTICAL}px; padding-bottom:0px;`;
                const inner = clone.querySelector('.inner');
                if (inner) {
                    inner.style.marginBottom = "0px";
                    inner.style.paddingBottom = "5px";
                }
                flexBox.appendChild(clone);
            }
        });

        section.appendChild(flexBox);
        container.appendChild(section);
    }

    setTimeout(genererVueAccueil, 1500);
    window.addEventListener('hashchange', () => setTimeout(genererVueAccueil, 100));
})();

espace vertical and espace horizontal sets the distance between tiles
marge section is the space before the section bar

custom.css is also modified as follow :

Code: Select all

@import url("../../css/legacy.css"); /* Don't remove this line! */
@import url("base.css"); /* Don't remove this line! */

/*
  --== Dark th3me by G3rard ==--
  Based on Sverto's Dark Theme for Domoticz
  v 28-08-2017
*/
@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  src: url('fonts/Ubuntu.ttf');
  src: local('Ubuntu'), url('fonts/Ubuntu.ttf') format('truetype');
}

/* Style des titres de pièces */
.room-header {
    display: block !important;
    background-color: #34495e !important; /* Couleur sombre du DarkTheme */
    color: #ffffff !important;
    padding: 8px 15px;
    margin: 20px 0 10px 0 !important;
    border-radius: 4px;
    border-left: 6px solid #3498db;
    clear: both;
}

/* Conteneur pour aligner les widgets proprement */
.room-items-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 50px;
}

/* Ajustement des items pour le flex */
.room-items-grid .item {
    float: none !important;
    margin: 0 !important;
}


/* Font Ubuntu everywhere */
html * {
  font-family: Ubuntu;
  font-weight: normal;
  border-radius: 0 !important;
}
.navbar-inverse .navbar-inner {
  background-color: rgba(51, 51, 51, 0.8);
  height: 50px !important;
  border-color: transparent;
}
.brand h1 {
  margin-left: 40px;
  margin-top: -45px;
  font-size: 18px;
  font-weight: 500 !important;
  color: #FFF;
  text-transform: uppercase;

}
.brand h2 {
  float: left;
  margin-left: 40px;
  margin-top: -20px;
  text-decoration: none;
  text-transform: none;
  font-size: 0.6em;
  font-style: normal;
  color: #FFF;
}
#appversion:after {
  content: "";
}
li {
  line-height: normal;
}
.navbar .nav .current_page_item > a:hover {
  background-color: #48b;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#48b), color-stop(100%, #25a));
  background-image: -webkit-linear-gradient(top, #48b, #25a);
  background-image: -moz-linear-gradient(top, #48b, #25a);
  background-image: -ms-linear-gradient(top, #48b, #25a);
  background-image: -o-linear-gradient(top, #48b, #25a);
  background-image: linear-gradient(top, #48b, #25a);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#48b, endColorstr=#25a);
}
.navbar .nav .current_page_item > a {
  background-color: #49d;
}
.navbar .nav li a {
  background-color: #454545;
  background-image: none;
  border: none;
}

#holder > .container-fluid {
  padding-top: 51px;
}

body {
  background: #7d7e7d;
}

/*only show special background when screen is min 1000px width, so tablets show normal background*/
@media (min-width: 1025px) {
  body {
    background: #7d7e7d url(images/domoticz.jpg) center fixed;
    color: #ffffff;
  }
}
/* Dashboard tekst */
body table#itemtablesmall tr td:first-child,
body table#itemtablesmalldoubleicon  tr td:first-child,
body table#itemtablesmalltrippleicon  tr td:first-child {
  font-size: 100%;
  border: none;
  background-color: #444;
  color: #fff;
  border-radius: 0;
}
/* Dashboard status */
body table#itemtablesmall tr td:first-child + td,
body table#itemtablesmalldoubleicon tr td:first-child + td,
body table#itemtablesmalltrippleicon tr td:first-child + td {
  color: #eee;
  margin: -24px 4px 0px 0px;
  font-weight: normal;
  font-size: 110% !important;
  border-radius: 0;
  text-transform: uppercase !important;
}
h1 {
  text-transform: uppercase;
}
h2 {
  color: #d0d0d0;
  margin-top: 10px;
  margin-bottom: 5px;
  font-size: 14px;
  text-transform: uppercase;
}
.chart h2 {
  margin-top: 0px;
  font-size: 1em;
}
body table#itemtablenostatus tbody tr {
  color: #eee;
  background-color: #353535;
  overflow: hidden;
}
/* switches page text */
body table#itemtablenostatus tr td:first-child,
td#name {
  font-size: 120% !important;
  color: #fff;
  background-color: #444;
  border: none;
  margin-top: -4px !important;
  margin-bottom: 8px !important;
}
/* switches page status*/
body table#itemtablenostatus tr td:first-child + td,
td#bigtext {
  color: #FFBB3F !important;
  /*margin: -25px 4px 0px 0px;
  font-weight: 600 !important;
  font-size: 130% !important;*/
  margin: -23px 6px 0px 0px !important;
  font-size: 16px !important;
  text-transform: uppercase !important;
}
body table#itemtablenotype tbody tr,
body table#itemtable tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmalltrippleicon tbody tr {
  color: #eee;
  background-color: #353535;
  overflow: hidden;
}
body table#itemtablenostatus tbody tr:hover,
body table#itemtablenotype tbody tr:hover,
body table#itemtable tbody tr:hover,
body table#itemtablesmall tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtablesmalltrippleicon tbody tr:hover,
body table#itemtabledoubleicon tbody tr:hover,
body table#itemtabletrippleicon tbody tr:hover {
  border-color: inherit;
  background-color: #3a3a3a;
}
/*background of switches transparent*/
body table#itemtablenostatus tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtable tbody tr,
body table#itemtablesmall tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmalltrippleicon tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtabletrippleicon tbody tr {
  background: rgba(51, 51, 51, 0.7) !important;
  overflow: hidden !important;
}
body table#itemtablenostatus tbody tr:hover,
body table#itemtablenotype tbody tr:hover,
body table#itemtable tbody tr:hover,
body table#itemtablesmall tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtablesmalltrippleicon tbody tr:hover,
body table#itemtabledoubleicon tbody tr:hover,
body table#itemtabletrippleicon tbody tr:hover {
  border-color: inherit;
  background-color: #3a3a3a;
  background: rgba(53, 53, 53, 0.5) !important;
}
/*background of switches transparent end*/
#copyright {
  border: 0;
  font-size: 12px;
}
#copyright p {
  color: #bebebe;
  margin-top: 10px;
}
#copyright a {
  /* color: #ddddff; */
}
#copyright p:before {
  content: "";
}
#copyright p:after {
  content: " | Dark th3me";
}
div#utilitycontent {
  margin-bottom: 15px;
}
.navbar .nav .dropdown-menu {
  padding: 1px;
  background-color: #777;
  background-image: initial;
}
.navbar .nav li a:hover {
  background-color: #454545;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#646464), color-stop(100%, #222));
  background-image: -webkit-linear-gradient(top, #646464, #222);
  background-image: -moz-linear-gradient(top, #646464, #222);
  background-image: -ms-linear-gradient(top, #646464, #222);
  background-image: -o-linear-gradient(top, #646464, #222);
  background-image: linear-gradient(top, #646464, #222);
}
.dropdown-menu > li > a {
  line-height: 20px;
}
.sub-tabs > li > a {
  color: #fff;
  background-color: #555;
  border: none;
}
.sub-tabs > .active > a {
  color: #fff;
  background-color: #457595;
  border: none;
}
.ui-corner-all {
  -webkit-border-radius: .3125em;
  border-radius: .3125em;
}
.ui-button-text { /* button for selector switch */
  height: 10px;
  margin: -1px -1px 2px -3px;
  font-size: 0.9em;
  text-transform: uppercase;
}
.ui-buttonset { /* row for selector switch */
  height: 11px;
  margin: 4px;
}
.ui-selectmenu-button,
.ui-corner-top {
  height: 16px;
  margin-top: 4px;
  color: green !important;
}
.ui-state-active,
#comboroom.combobox {
  color: #FFBB3F !important;
  background: #333333 !important;
}
.ui-state-active:hover {
  color: yellow !important;
  /*background: #555555 !important;*/
  /*button for dimslider*/
  background: url('/images/handle.png') no-repeat 50% 50% !important;
}
.ui-button-text-only:hover {
  color: yellow !important;
  background: #555555 !important;
  border-color: #555555 !important;
}
/*selector switch pulldown*/
.ui-menu-item {
  color: #FFBB3F !important;
  background: #353535 !important;
  border-color: #353535 !important;
  text-transform: uppercase;
}
.ui-menu-item:hover {
  color: yellow !important;
  background: #555555 !important;
  border-color: #555555 !important;
  text-transform: uppercase;
}
.ui-selectmenu-button {
  color: #FFBB3F !important;
  background: #353535 !important;
  text-transform: uppercase;
  border-color: #353535 !important;
  padding: 0 0 4px 0;
  margin: 0 0 2px 0;
  text-shadow: none !important;
}

/*dashboard status row*/
body table#itemtablesmall td,
body table#itemtablesmalldoubleicon td,
body table#itemtablesmalltrippleicon td {
  margin: 0px 0px 0px -6px;
}
td#type{ /* type of switch row*/
  color: grey;
  font-size: 9px !important;
  margin: 0px 0px 0px 0px !important;
}
.nav-tabs > li > a {
  -webkit-border-radius: 4px 4px 4px 4px;
  -moz-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
}
.nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus {
  border: 0;
}
.navbar .nav li a:hover {
  border: 0;
}
.page-header-small {
  border-bottom: 1px solid #888;
}
.nav > li > a:hover, .nav > li > a:focus {
  color: #111;
}
body table#itemtablesmall tr td:first-child + td + td + td,
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td,
body table#itemtablesmalltrippleicon  tr td:first-child + td + td + td + td + td{
  line-height: 1.1em;
 }
td#status {
  color: #AACBFF;
}

/* GZ added to hide lastseen and status */
body table#itemtablesmall tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtabledoubleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtabletrippleicon tbody tr td:first-child + td + td + td + td + td + td:before,
body table#itemtable tbody tr td:first-child + td + td + td + td + td:before ,
body table#itemtablenotype tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablenostatus tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablesmalldoubleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablesmalltrippleicon tbody tr td:first-child + td + td + td + td + td + td:before,
body table#mobileitem tbody tr td:first-child + td + td + td + td + td:before{
 content: "" !important;
}

body table#itemtablesmall tbody tr td:first-child + td + td + td + td:before,
body table#itemtabledoubleicon tbody tr td:first-child + td + td + td + td:before,
body table#itemtable tbody tr td:first-child + td + td + td + td:before ,
body table#itemtablenotype tbody tr td:first-child + td + td + td + td:before,
body table#itemtablenostatus tbody tr td:first-child + td + td + td + td:before,
body table#itemtabletrippleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablesmalldoubleicon tbody tr td:first-child + td + td + td + td:before,
body table#itemtablesmalltrippleicon tbody tr td:first-child + td + td + td + td:before,
body table#mobileitem tbody tr td:first-child + td + td + td + td:before{
 content: "";
}

body table#itemtablesmall tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtabledoubleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtable tbody tr td:first-child + td + td + td + td + td:before ,
body table#itemtablenotype tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablenostatus tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtabletrippleicon tbody tr td:first-child + td + td + td + td + td + td:before,
body table#itemtablesmalldoubleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablesmalltrippleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#mobileitem tbody tr td:first-child + td + td + td + td + td:before{
 content: "";
}
/* GZ added to hide lastseen and status */
/* remove Type for group */
body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td + td:before{
	content: "";
}
body table#itemtablesmall tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtabletrippleicon tbody tr {
  color: #eee;
  background-color: #353535;
  overflow: hidden;
}
body table#itemtablesmall tr:hover td:first-child,
body table#itemtablesmalldoubleicon tr:hover td:first-child,
body table#itemtablesmalltrippleicon tr:hover td:first-child,
body table#itemtablenostatus tr:hover td:first-child,
body table#itemtablenotype tr:hover td:first-child,
body table#itemtabledoubleicon tr:hover td:first-child,
body table#itemtabletrippleicon tr:hover td:first-child {
  color: inherit;
}

body table#itemtablenotype tr td:first-child,
body table#itemtable tr td:first-child,
body table#itemtabledoubleicon tr td:first-child,
body table#itemtabletrippleicon tr td:first-child {
  color: #ffffff;
  border: 0;
}
body table#itemtable tr:hover td:first-child {
  color: #ffffff;
  border: 0;
}
body table#itemtablenotype tr td:first-child + td ,
body table#itemtable tr td:first-child + td,
body table#itemtabledoubleicon tr td:first-child + td,
body table#itemtabletrippleicon tr td:first-child + td {
  margin: -22px 6px 0px 0px;
  font-size: 130%;
  font-weight: normal;
  color: #fff;
}
#timesun {
  text-align: left;
  color: #ccc;
}

#utilitycontent > center #timesun {
  height: 35px;
}
body table#itemtablenostatus tr td:first-child + td + td + td + td + td {
  margin-top: 2px;
}
body table#itemtable tr td:first-child + td + td + td + td,
body table#itemtablenotype tr td:first-child + td + td + td + td,
body table#itemtablenostatus tr td:first-child + td + td + td + td ,
body table#itemtablesmall tr td:first-child + td + td + td + td {
  line-height: 1.6em;
}
body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td,
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td + td ,
body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td + td + td,
body table#itemtabletrippleicon tr td:first-child + td + td + td + td + td + td {
  line-height: 1.6em;
}
table#itemtablesmall td#name,
table#itemtablesmalldoubleicon td#name,
body table#itemtablesmalltrippleicon td#name,
table#itemtablenotype td#name,
table#itemtable td#name,
table#itemtabledoubleicon td#name,
table#itemtabletrippleicon td#name {
  margin-left: -26px !important;
}
select {
  background-color: #f5f5f5;
}
.ui-widget-content {
  /* background: #000 url(images/ui-bg_inset-soft_25_000000_1x100.png) 50% bottom repeat-x; */
  background: #f5f5f5;
  color: #000;
}
div.log {
  /* GZ */
  /* background-color: #000000; */
  color: black;
}
.lognorm {
  /* GZ */
  /* color: #efefef; */
}
.logerror {
  color: #FA1515;
}
.dropdown-menu .divider {
  height: 0px;
  margin: 0px 0px;
  overflow: hidden;
  background-color: #353535;
  border-bottom: 0px solid #676D79;
}
td#name {
  /* Workaround-CSS-Hack for ugly coloured name tags without losing the state color */
  /* GZ */
  font-size: 120% !important;
  width: 9px !important;
  height: 18px !important;
  overflow: visible;
  margin-left: -26px !important;
  text-indent: 21px;
  /* margin-bottom: 1.2em !important; */
  margin-top: -5px !important;
  /* border-radius: 0 !important; */
}
ul#noty_topRight_layout_container {
  top: 45px !important;
}
.warning-text {
  color: #FB0;
}

.btnstyle, .btnstylerev { /* buttons on switches tab */
  padding: 0px 6px 0px 6px !important;
}
.btnstyle:hover, .btnstylerev:hover { /* buttons on switches tab */
  background: #353535;
  color: yellow !important;
  padding: 0px 6px 0px 6px !important;
}
#comboroom.combobox { /* dropdown menu */
  margin: 0px 6px 0px 0px;
  text-transform: uppercase;
}
.btnstylerev {
  margin-top: 0;
}
/* Flat style for 'Apply settings' button at Settings page */
.sub-tabs-apply {
  border: 1px solid transparent !important;
}
#bannav,
#scenecontent > table{
  margin-top: 10px;
  margin-bottom: 10px;
}
#bannav > tbody > tr > td:nth-child(2) > a:nth-child(1) {
  margin-left: 10px;
}
@media (max-width: 979px) {
  .navbar-fixed-top {
      margin-bottom: 10px;
  }
}
/* GZ changed to show history.txt in normal way */
/*
div.log {
  color: #FFF;
}
.logerror {
  color: #FA1515;
}
*/
.progress-label {
  color: #CD3D3D;
}
tr.even {
  background-color: rgb(92, 92, 92) !important;
  color: #FFF;
}
tr.odd,
.sorting_1 {
  background-color: #545454 !important;
  color: #FFF;
}
nav, section {
  overflow: hidden;
}
#hardwaretable_wrapper table.display td {
  padding: 10px 5px;
}
#fileupload,
#uservariablestable_filter {
  border-radius: 0;
  background: initial;
  border: 0;
  color: #fff;
}
input {
  background-color: #eee;
}
input[type="search"] {
  border-radius: 3px;
  border: 0;
  margin-left: 3px;
}
.dimslider {
  position: relative;
  right: -58px;
  width: calc(98% - 120px) !important;
  background-color: #555555 !important;
  border-radius: 0px !important;
  height: 10px;
  margin-top: 7px !important;
  margin-left: 56px !important;
  box-shadow: initial;
}
.btnsmall,
.btnsmall-dis {
  margin-top: 2px;
  margin-bottom: 1px;
  margin-left: -16px;
  margin-right: 12px;
  background: transparent;
  color: #d0d0d0;
  text-transform: uppercase;
}
.btnsmall-sel {
  margin-top: 1px;
  margin-left: -16px;
  margin-right: 12px;
  background: #333333;
  color: #FFBB3F;
  text-transform: uppercase;
}
.btnsmall:hover,
.btnsmall-sel:hover,
.btnsmall-dis:hover {
  margin-top: 1px;
  margin-bottom: 1px;
  margin-left: -16px;
  margin-right: 12px;
  color: yellow !important;
  background: #353535 !important;
}
.btnstyle3,
.btnstyle3-dis,
.btn.btn-info,
.btnstyle,
.btnstylerev,
.label.label-info.lcursor {
  margin-bottom: 3px;
  background: #3c3e40;
  color: #d0d0d0;
  text-transform: uppercase;
}
/*buttons database backup*/

/* Bootstrap Buttons */

/*border on button and text before button*/
.btnstyle3:before,
.btnstyle3-dis:before,
.btnstyle3-sel:before,
.btn.btn-info:before,
.btnstyle:before,
.btnstylerev:before,
.label.label-info.lcursor:before,
.btn-danger:before,
.nav-tabs  > li > a:before,
.btn-small:before,
.btn-success:before {
}
.btnstyle3,
.btnstyle3:disabled,
.btnstyle3-dis,
.btnstyle3-sel,
.btnstyle,
.btnstylerev,
.label.label-info.lcursor {
  border: 1px !important;
  border-color: rgba(51, 51, 51, 0.51) !important;
  border-style: solid !important;
  color: #d0d0d0 !important;
}

.btnstyle3-sel {
  margin-bottom: 3px;
  color: #FFBB3F;
  background: #353535;
  text-transform: uppercase;
}
.btnstyle3:hover,
.btnstyle3-sel:hover {
  margin-bottom: 3px;
  color: yellow !important;
  background: #353535;
}
.btnstyle3:disabled {
  opacity: 0.35;
  background: #3c3e40;
  text-transform: uppercase;
}

.btn {
  border: 1px solid rgba(51, 51, 51, 0.51);
  padding: 4px 16px;
  text-transform: uppercase;
  text-shadow: none;
  color: #d0d0d0;
}

.btn.active {
  color: yellow;
}

.btn:hover,
.btn:focus {
  color: yellow;
  cursor: pointer;
}

.btn:disabled {
  cursor: default;
  color: #d0d0d0;
  opacity: 0.35;
}

.btn-default {
  background: #3c3e40;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.active {
  background: #353535;
}

.btn-primary {
  background: #375a7f;
}

.btn-primary:hover,
.btn-primary:focus {
  background: #2b4764;
}

.btn-primary:disabled {
  background: #375a7f;
  opacity: 0.65;
}

.btn-danger {
  background: #B94A48;
  color: #d0d0d0;
}

.btn-danger:hover,
.btn-danger:focus {
  background: #B94A48;
}

.btn-warning,
.btn-warning:focus {
  background: #f89406;
}

.btn-link {
  border-color: transparent;
}

.label.label-info.lcursor:hover {
  color: yellow !important;
  background: #353535 !important;
}
/*buttons in settings page - start*/
.nav-tabs  > li > a {
  margin: -1px;
  margin-bottom: 3px;
  background: #444141;
  color: #d0d0d0;
  border: 2px;
  border-style: solid;
  border-color: #444141;
  position: relative;
  bottom: 0;
  padding: 7px 10px !important;
  text-transform: uppercase !important;
}
.nav-tabs  > li > a:hover,
.sub-tabs > .active > a:hover {
  background-image: none;
  background-color: #353535 !important;
  color: yellow !important;
  border: 2px;
  border-style: solid;
  border-color: #444141;
  position: relative;
  bottom: 0;
  padding: 7px 11px 7px 11px !important;
  text-transform: uppercase !important;
  cursor: pointer;
}
.sub-tabs > .active > a {
  background-image: none !important;
  background-color: #353535 !important;
  color: #FFBB3F !important;
  border: 2px;
  border-style: solid;
  border-color: #444141;
  position: relative;
  bottom: 0;
  padding: 7px 11px 7px 11px !important;
  text-transform: uppercase !important;
}
/*buttons in settings page - end*/

#type br {
  display: none;
}
#slider > div {
  background-color: grey;
  /*background: -webkit-linear-gradient(top, #444141 0%,#444141 100%);*/
  background: -webkit-linear-gradient(top, grey 0%,grey 100%);
  background: grey;
}
/* top buttons closer for iPhone */
#cDashboard, #cLightSwitches, #cScenes, #cTemperature, #cWeather, #cUtility,.dropdown-toggle.lcursor {
  margin: 0px -4px 0px 0px;
  text-transform: uppercase !important;
  color: #d0d0d0;
}
/*top buttons 2 on the right, with important, if important in code above, then hover in yellow is not working anymore*/
.dropdown-toggle.lcursor {
  color: #d0d0d0 !important;
}
#version {
  margin: 4px 0px 0px -10px;
}
/*location favorite star*/
body table#itemtable tr td:first-child+td+td+td+td+td+td img,
body table#itemtabledoubleicon tr td:first-child+td+td+td+td+td+td+td img,
body table#itemtabletrippleicon tr td:first-child+td+td+td+td+td+td+td+td img,
body table#itemtablenostatus tr td:first-child+td+td+td+td+td+td img,
body table#itemtablenotype tr td:first-child+td+td+td+td+td img {
  float: left;
  right: 0px;
  margin: 5px 8px 0px 0px;
  /*right: 12px;
  bottom: 20px;
  position: absolute;*/
}
/*next pages in table overview*/
#notificationtable_paginate,
#devices_paginate {
  margin: 0px 0px 0px 0px;
}

/*bar color behind buttons*/
body table#itemtable tr td:first-child + td + td + td + td + td + td,
body table#itemtablenotype tr td:first-child + td + td + td + td + td,
body table#itemtabledoubleicon tr td:first-child + td + td + td + td + td + td + td,
body table#itemtabletrippleicon tr td:first-child + td + td + td + td + td + td + td + td,
body table#itemtablenostatus tr td:first-child + td + td + td + td + td + td {
  background: #3e3e3e;
  overflow: auto;
  padding: 0 5px;
  margin-top: 0px;
  margin-right: 2px;
}
/*buttons on top*/
.navbar .nav li a,
.navbar .nav .current_page_item > a {
  background-image: none;
  border-radius: 0;
  border: none;
  position: relative;
  bottom: 0;
  padding: 10px 4px 10px 4px !important;
  text-align: left;
  text-transform: uppercase !important;
}
.navbar .nav li a:hover,
.navbar .nav .current_page_item > a:hover {
  background-image: none;
  background-color: #353535 !important;
  color: yellow !important;
  border: 1px;
  border-style: solid;
  border-color: #444141;
  position: relative;
  bottom: 0;
  padding: 9px 3px 9px 3px !important;
  text-transform: uppercase !important;
}
.navbar .nav .current_page_item > a {
  background-image: none !important;
  background-color: #353535 !important;
  color: #FFBB3F !important;
  border: 1px;
  border-style: solid;
  border-color: #444141;
  position: relative;
  bottom: 0;
  padding: 9px 3px 9px 3px !important;
  text-transform: uppercase !important;
}

.navbar .nav {
  margin-top: 7px;
}
.dropdown-menu.pull-right {
  /*border: 1px !important;*/
}
/*notification after pressing button*/
#notification{
  background: #353535 !important;
  border: 2px;
  border-style: solid;
  border-color: #444141;
}
#notification p{
  font-size: 18px;
  color: #FFBB3F;
  margin: 11px;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  font-weight: bold;
  text-transform: uppercase !important;
}
/*Devices table*/
.DataTables_sort_wrapper {
  text-transform: uppercase;
  padding: 0;
  font-size: 0.9em;
}
.sorting,
.sorting_asc,
.sorting_disabled {
  background: #444;
  border-color: #444;
}
/*Devices toolbar*/
.fg-toolbar,
.ui-dialog-titlebar {
  background: rgba(51, 51, 51, 0.7);
  text-transform: uppercase;
  font-size: 0.9em;
  margin-bottom: 15px;
}
.dataTables_paginate {
  margin: 0px 0px 10px 0px;
}
.btn.dropdown-toggle,
.btn.btn-success {
  text-transform: uppercase;
}
.btn.btn-success:hover {
  color: yellow;
}

/*Layout of color-picker*/
#rgbw_popup {
  padding-right: 40px;
}
.colpick {
  margin-top: 30px;
  margin-bottom: 20px;
  margin-left: 50px;
  margin-right: 20px;
}
.jQWCP-wWheel.jQWCP-wHueWheel,
.jQWCP-wWheel.jQWCP-wHueWheel > .jQWCP-wWheelOverlay {
  border-radius: 50% !important;
}
/*apply settings button in settings page*/
.btn-danger.sub-tabs-apply {
  background: #B94A48 !important;
  color: #d0d0d0 !important;
}

.label-important {
  background-color: #b94a48;
  text-transform: uppercase;
}
.label-important:hover {
  background-color: #b94a48;
  text-transform: uppercase;
  color: yellow !important;
}

.ace_editor * {
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace !important;
}

/* buttons for selector switch */
.btn-small {
  height: 23px;
  margin: -2px -2px 2px -2px;
  font-size: 10px !important;
  text-transform: uppercase !important;
  background: #353535 !important;
  color: #FFBB3F !important;
  text-shadow: none !important;
}
.btn-small:hover {
  background: #555555 !important;
  color: yellow !important;
}
.dropdown-menu .divider {
    border-bottom: 1px solid #676D79;
}
.dropdown-submenu > a:after {
    margin-right: 0px;
}

.page-header {
    margin: 12px 0;
}

.events-editor {
  top: 64px;
  bottom: 32px;
}

.events-editor__search {
  margin-left: 0 !important;
}

.events-editor__menu {
  border: 1px solid #616261;
  background-color: #777;
  background-image: initial;
}

.events-editor__menu-item {
  color: white !important;
  padding: 8px !important;
  text-align: left;
  text-transform: uppercase;
}

.events-editor__menu-item:hover {
  color: yellow !important;
  background: #353535 !important;
}

.events-editor__splitter {
  background-color: rgba(0, 0, 0, 0.1);
}

.events-editor__splitter:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

.events-editor-file__content-table {
  background-color: #606060;
}

.battery {
  background-color: #FFF;
}

.battery:before, .battery:after {
  border-color: #FFF;
}

.modal {
  background-color: #303030;
  border: 1px solid #444;
  border-radius: 2px !important;
  box-shadow: none;
}

.modal-dialog {
  border-radius: 2px !important;
}

.modal-header {
  border-bottom-color: #444;
}

.modal-footer {
  background-color: inherit;
  border-top-color: #444;
  box-shadow: none;
}

.modal-title,
.bootbox-body {
  color: inherit;
}

.modal .form-control {
  line-height: 1.5;
  color: #444;
  background-color: #fff;
  padding: 0.125rem 0.25rem;
  border: 1px solid transparent;
}

.list-group-item {
  background-color: #303030;
  border-color: #444;
}

.list-group-item.active {
  color: #fff;
  background-color: #375a7f;
  border-color: #375a7f;
}

.list-group-item-action {
  color: #444;
}

I hope it will helps some of you and if you have any idea to improve it or any bugs feel free to let me know I will try to help!

cheers
seb

sebitop · Post by **sebitop** » Sunday 28 December 2025 21:17

new version V150 including time and date top left

Code: Select all

(function() {
    const VERSION = "V150";
    const AUTHOR = "sebitop";
    const ESPACE_VERTICAL = -2;    
    const ESPACE_HORIZONTAL = 15;  
    const MARGE_SECTION = 40;      

    console.log(`%c[RoomDevices] ${VERSION}`, "color: #ffffff; font-weight: bold; border: 1px solid #ffa500; padding: 2px 5px;");

    function obtenirDateHeure() {
        const maintenant = new Date();
        const optionsDate = { day: '2-digit', month: '2-digit', year: 'numeric' };
        const dateStr = maintenant.toLocaleDateString('fr-FR', optionsDate);
        const heureStr = maintenant.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
        return `${dateStr} - ${heureStr}`;
    }

    function actualiserHorloge() {
        const clockEl = document.getElementById('rd-clock');
        if (clockEl) {
            clockEl.textContent = obtenirDateHeure();
        }
    }

    async function genererVueAccueil() {
        const hash = window.location.hash;
        const estSurDashboard = hash === "" || hash.includes("#/Dashboard") || hash === "#";
        const mainView = document.getElementById('main-view') || document.querySelector('.container');
        let customDashboard = document.getElementById('rd-custom-dashboard');

        if (!estSurDashboard) {
            if (mainView) mainView.style.display = "block";
            if (customDashboard) customDashboard.style.display = "none";
            return; 
        }

        try {
            const rFav = await fetch('/json.htm?type=command&param=getdevices&filter=all&used=true&favorite=1');
            const dFav = await rFav.json();
            const favorisGlobaux = dFav.result || [];
            let idsAffiches = new Set();

            const rPlans = await fetch('/json.htm?type=command&param=getplans');
            const dPlans = await rPlans.json();
            if (!dPlans.result) return;

            if (!mainView) return;
            if (!customDashboard) {
                customDashboard = document.createElement('div');
                customDashboard.id = 'rd-custom-dashboard';
                // PADDING RÉDUIT A 20PX
                customDashboard.style = "width:100%; min-height:100vh; padding:20px 10px 10px 10px; box-sizing:border-box; position:relative;";
                mainView.parentNode.insertBefore(customDashboard, mainView);
            }

            customDashboard.innerHTML = `
                <div id="rd-clock" style="position:absolute; top:3px; left:15px; font-size:13px; color:#ffffff; font-family:sans-serif; opacity:0.9;">${obtenirDateHeure()}</div>
                <div style="position:absolute; top:6px; right:15px; font-size:10px; color:#888; font-family:sans-serif; opacity:0.7; pointer-events:none;">RoomDevices ${VERSION}</div>
            `;
            customDashboard.style.display = "block";
            mainView.style.display = "none";

            const plansTries = dPlans.result.sort((a, b) => (parseInt(a.Order) || 0) - (parseInt(b.Order) || 0));

            for (let plan of plansTries) {
                if (plan.Name.startsWith('_')) continue;

                const rDevs = await fetch(`/json.htm?type=command&param=getplandevices&idx=${plan.idx}`);
                const dDevs = await rDevs.json();
                if (!dDevs.result) continue;

                const devicesAffiches = dDevs.result.filter(pd => 
                    favorisGlobaux.some(fg => fg.idx.toString() === pd.devidx.toString())
                );

                if (devicesAffiches.length > 0) {
                    renderSection(plan.Name.toUpperCase(), devicesAffiches, customDashboard, true);
                    devicesAffiches.forEach(d => idsAffiches.add(d.devidx.toString()));
                }
            }

            const favorisRestants = favorisGlobaux.filter(f => !idsAffiches.has(f.idx.toString()));
            if (favorisRestants.length > 0) {
                const dataOthers = favorisRestants.map(f => ({ devidx: f.idx, order: 0 }));
                renderSection("OTHERS", dataOthers, customDashboard, false);
            }

        } catch (e) { console.error("Erreur RoomDevices:", e); }
    }

    function renderSection(titre, devices, container, trier) {
        let section = document.createElement('div');
        section.style = `margin-bottom:${MARGE_SECTION}px; clear:both; width:100%;`;
        section.innerHTML = `<h2 style="background:#333; color:#ffffff; padding:2px 12px; border-left:4px solid #ffa500; margin-bottom:8px; font-family:sans-serif; text-transform:uppercase; font-size:13px; font-weight:bold; line-height:1.2; box-sizing:border-box;">${titre}</h2>`;

        let flexBox = document.createElement('div');
        flexBox.style = `display:flex; flex-wrap:wrap; gap:0px ${ESPACE_HORIZONTAL}px; width:100%; box-sizing:border-box;`;

        if (trier) {
            devices.sort((a, b) => (parseInt(a.order) || 0) - (parseInt(b.order) || 0));
        }

        devices.forEach(dev => {
            let originalWidget = document.getElementById('device_' + dev.devidx) || document.querySelector(`[id*="_${dev.devidx}"]`);
            if (originalWidget) {
                let clone = originalWidget.cloneNode(true);
                clone.style = `display:block; float:none; margin-left:0px; margin-right:0px; margin-bottom:${ESPACE_VERTICAL}px; padding-bottom:0px;`;
                const inner = clone.querySelector('.inner');
                if (inner) {
                    inner.style.marginBottom = "0px";
                    inner.style.paddingBottom = "5px";
                }
                flexBox.appendChild(clone);
            }
        });

        section.appendChild(flexBox);
        container.appendChild(section);
    }

    setTimeout(genererVueAccueil, 1500);
    window.addEventListener('hashchange', () => setTimeout(genererVueAccueil, 100));
    setInterval(actualiserHorloge, 1000);
})();

sebitop · Post by **sebitop** » Monday 29 December 2025 16:20

V189
- avoid conflit with others customs pages
- minor bug solved in retrieveing devices
- section title in bold
- extend or collapse sections capability added

Code: Select all

(function() {
    const VERSION = "V189";
    const AUTHOR = "sebitop";
    const ESPACE_VERTICAL = -2;    
    const ESPACE_HORIZONTAL = 15;  
    const MARGE_SECTION = 40;      

    console.log(`%c[RoomDevices] ${VERSION}`, "color: #ffffff; font-weight: bold; border: 1px solid #00adef; padding: 2px 5px;");

    function obtenirDateHeure() {
        const maintenant = new Date();
        return maintenant.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' }) + " - " + maintenant.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
    }

    async function piloterVue() {
        const hash = window.location.hash;
        const estSurDashboard = hash === "" || hash === "#" || hash.includes("#/Dashboard");
        
        if (!estSurDashboard || hash.includes("#/Custom")) {
            const mv = document.getElementById('main-view') || document.querySelector('.container');
            const cd = document.getElementById('rd-custom-dashboard');
            if (mv) mv.style.display = "block";
            if (cd) cd.style.display = "none";
            return;
        }

        await executerLogique(true); 
    }

    async function executerLogique(uniquementFavoris) {
        try {
            let urlDev = '/json.htm?type=command&param=getdevices&filter=all&used=true&favorite=1';
            const rRef = await fetch(urlDev + '&_=' + Date.now());
            const dRef = await rRef.json();
            const devicesRef = dRef.result || [];
            let idsAffiches = new Set();

            const rPlans = await fetch('/json.htm?type=command&param=getplans');
            const dPlans = await rPlans.json();
            if (!dPlans.result) return;

            const mainView = document.getElementById('main-view') || document.querySelector('.container');
            let customDashboard = document.getElementById('rd-custom-dashboard');
            if (!customDashboard) {
                customDashboard = document.createElement('div');
                customDashboard.id = 'rd-custom-dashboard';
                customDashboard.style = "width:100%; min-height:100vh; padding:20px 10px 10px 10px; box-sizing:border-box; position:relative;";
                mainView.parentNode.insertBefore(customDashboard, mainView);
            }

            customDashboard.innerHTML = `
                <div id="rd-clock" style="position:absolute; top:3px; left:15px; font-size:13px; color:#ffffff; font-family:sans-serif; opacity:0.9;">${obtenirDateHeure()}</div>
                <div style="position:absolute; top:6px; right:15px; font-size:10px; color:#888; font-family:sans-serif; opacity:0.7;">RoomDevices ${VERSION}</div>
            `;
            customDashboard.style.display = "block";
            mainView.style.display = "none";

            const plansTries = dPlans.result.sort((a, b) => (parseInt(a.Order) || 0) - (parseInt(b.Order) || 0));
            for (let plan of plansTries) {
                if (plan.Name.startsWith('_')) continue;
                const rRoom = await fetch(`/json.htm?type=command&param=getplandevices&idx=${plan.idx}`);
                const dRoom = await rRoom.json();
                if (!dRoom.result) continue;

                const devicesAffiches = dRoom.result.filter(pd => devicesRef.some(dr => dr.idx.toString() === pd.devidx.toString()));
                if (devicesAffiches.length > 0) {
                    renderSection(plan.Name.toUpperCase(), devicesAffiches, customDashboard, idsAffiches, true);
                    devicesAffiches.forEach(d => idsAffiches.add(d.devidx.toString()));
                }
            }

            const restants = devicesRef.filter(f => !idsAffiches.has(f.idx.toString()));
            if (restants.length > 0) {
                renderSection("AUTRES", restants.map(f => ({ devidx: f.idx, order: 0 })), customDashboard, idsAffiches, false);
            }
        } catch (e) { console.error("Erreur RoomDevices:", e); }
    }

    function renderSection(titre, devices, container, idsSet, trier) {
        let section = document.createElement('div');
        section.style = `margin-bottom:${MARGE_SECTION}px; clear:both; width:100%;`;
        
        let h2 = document.createElement('h2');
        h2.style = `background:#333; color:#ffffff; padding:2px 12px; border-left:4px solid #ffa500; 
                    margin-bottom:8px; font-family:sans-serif; text-transform:uppercase; font-size:14px; 
                    font-weight:bold !important; letter-spacing:1.2px !important; 
                    text-shadow: 0.6px 0 0 #fff, -0.2px 0 0 #fff; cursor:pointer; 
                    display:flex; justify-content:space-between; align-items:center;`;
        
        h2.innerHTML = `<span>${titre}</span><span class="rd-arrow" style="font-size:10px; opacity:0.6;">▼</span>`;
        
        let flex = document.createElement('div');
        flex.style = `display:flex; flex-wrap:wrap; gap:0px ${ESPACE_HORIZONTAL}px; width:100%;`;

        h2.onclick = function() {
            const isHidden = flex.style.display === "none";
            flex.style.display = isHidden ? "flex" : "none";
            h2.querySelector('.rd-arrow').textContent = isHidden ? "▼" : "▲";
        };

        if (trier) devices.sort((a, b) => (parseInt(a.order) || 0) - (parseInt(b.order) || 0));

        devices.forEach(dev => {
            let idx = dev.devidx.toString();
            let original = document.getElementById('device_' + idx) || document.querySelector(`div[id$="_${idx}"]`);
            if (original) {
                let clone = original.cloneNode(true);
                clone.style.display = "block";
                clone.style.float = "none";
                clone.style.margin = `0 0 ${ESPACE_VERTICAL}px 0`;
                clone.style.paddingBottom = "0px";
                flex.appendChild(clone);
                idsSet.add(idx);
            }
        });

        if (flex.children.length > 0) {
            section.appendChild(h2);
            section.appendChild(flex);
            container.appendChild(section);
        }
    }

    setTimeout(piloterVue, 1500);
    window.addEventListener('hashchange', () => {
        const mv = document.getElementById('main-view') || document.querySelector('.container');
        if (mv) mv.style.display = "block";
        setTimeout(piloterVue, 100);
    });
    setInterval(() => {
        const clk = document.getElementById('rd-clock');
        if (clk) clk.textContent = obtenirDateHeure();
    }, 1000);
})();

Dashboard Enhancement : Devices grouping by Roomplans

Dashboard Enhancement : Devices grouping by Roomplans

Re: Dashboard Enhancement : Devices grouping by Roomplans

Re: Dashboard Enhancement : Devices grouping by Roomplans

Who is online