essaye de remplacer : background-image: url("core/img/plan/c8003eb330b2f68b19ab702a4038d0d7f2781db5.jpg");
par : background-image: url("core/img/plan/c8003eb330b2f68b19ab702a4038d0d7f2781db5.jpg") !important;
J'ai pleins de trucs qui ne passait pas avec ça c'est bon. En tout cas ton code fonctionne chez moi sur RPI2, verifie peut-être le lien de l'image.
Sinon voici ma contribution :
Le dashboard :
- Dashboard custom nomaro
- jeedom dashboard.png (987.4 Kio) Consulté 2056 fois
Menu Squeezebox (exemple de p=panel) :
- Dashboard Custom nomaro
- jeedom_musique.png (990.34 Kio) Consulté 2056 fois
Vue personalisé :
- Dashboard Custom nomaro
- jeedom_vue.png (652.1 Kio) Consulté 2056 fois
J'ai pas tout à fait fini mais je suis content car j'arrive enfin à faire ce que je voulais depuis mon passage à Jeedom... Je m'étais acharné avec le mode design et le plugin theme sans avoir le résultat escompté, mais avec cette méthode, c'est l'idéal. J'ai du mettre mon nez dans le javascript que je ne connaissais pas, mais ça commence à ressembler à ce que je veux.
Comme on le voit je suis reparti sur une refonte complète de la barre de navigation. La liste des pièces est récupéré en javascript donc elle évolue automatiquement quand je la modifie. Pour ce qui est des liens à droites, ils renvoient vers des vue ou des "panels" (la page des squeezebox par exemple). La petite clé en haut à droite me renvoie au menu "configuration" ce qui me permet d'avoir accès à tout le reste des configs car les autres pages ne sont pas traités en JS.
Grace au custom, j'ai un dashboard super simple accessible à n'importe quel néophyte. Il est accessible sur PC ou tablette car la barre de navigation s'adapte au format de l'écran.
Les points à améliorer :
- le menu "Pièces" à un hyperlien dont je n'arrive pas a me débarrasser et du coup ça me relance le dashboard sur mobile (car pas de survol, click uniquement)
- on voit le menu original avant le traitement par JS, c'est un peu dommage. Il faudrait réussir à masquer le traitement et le moyen le plus simple que je vois est d'attaquer le CSS d'origine avec un "visibility:hidden" que je transforme à la fin de l’exécution du script JS.
- masquer les objets vides, j'ai essayer de bricoler un script mais il y a un soucis.
Pour ceux que ça intéresse, voici le code de ma custom, par contre, les liens correspondent à mes vues, etc... donc ça doit être adapté à chacun.
Egalement, j'ai passé le Profil > Thème en "Slate"
Code JS
Code : Tout sélectionner
$( document ).ready(function() {
if((window.location.href.indexOf("p=dashboard") > -1) || (window.location.href.indexOf("p=view") > -1) || (window.location.href.indexOf("p=panel") > -1)) {
//modifications de la barre de navigation
var navbar = document.getElementsByClassName('nav navbar-nav');
if (navbar) {
//récupération de la liste des pièces
var recuproom = document.getElementById('bt_gotoDashboard');
recuproom.removeAttribute('href');
recuproom.className += 'dropdown-toggle';
var lirooms = recuproom.parentNode;
lirooms.removeAttribute('class');
lirooms.className += 'dropdown cursor';
lirooms.id = 'rooms';
//modification du titre tu menu déroulant
recuproom.innerHTML = '<i class="fa fa-home"></i> Pièces <b class="caret"></b>';
//insertion des catégories et insertion du code
navbar[0].innerHTML = '';
navbar[0].appendChild(lirooms);
//ajout des lien dans la barre de notification
var config = document.getElementById('horloge');
if (config) {
//suppression des éléments de la barre de notification
var config0 = config.parentNode.parentNode.parentNode
config0.innerHTML = '';
//création de l'horloge
var lihorloge = document.createElement('li');
lihorloge.innerHTML = '<a href="#"><span id="horloge"></span></a>';
//création du lien config
var liconfig = document.createElement('li');
liconfig.id = 'config';
liconfig.innerHTML = '<a href="index.php?v=d&p=administration"><i class="fa fa-wrench"></i></a>';
//création du lien cameras
var licamera = document.createElement('li');
licamera.id = 'camera';
licamera.innerHTML = '<a href="index.php?v=d&p=dashboard&object_id=&category=security"><i class="fa fa-video-camera"></i></a>';
//création du lien Températures
var litemperature = document.createElement('li');
litemperature.id = 'temperature';
litemperature.innerHTML = '<a href="index.php?v=d&p=view&view_id=1"><i class="icon divers-thermometer31"></i></a>';
//création du lien Agenda
var liagenda = document.createElement('li');
liagenda.id = 'agenda';
liagenda.innerHTML = '<a href="index.php?v=d&p=view&view_id=2"><i class="icon divers-calendar2"></i></a>';
//création du lien Média
var limusique = document.createElement('li');
limusique.id = 'musique';
limusique.innerHTML = '<a href="index.php?v=d&m=squeezeboxcontrol&p=panel"><i class="icon loisir-musical7"></i> Musique</a>';
var litvsalon = document.createElement('li');
litvsalon.id = 'musique';
litvsalon.innerHTML = '<a href="index.php?v=d&m=squeezeboxcontrol&p=panel"><i class="fa fa-television"></i> TV Salon</a>';
var ulmedia = document.createElement('ul');
ulmedia.className += 'dropdown-menu';
ulmedia.appendChild(limusique);
ulmedia.appendChild(litvsalon);
var limedia = document.createElement('li');
limedia.className += 'dropdown';
limedia.id = 'media';
limedia.innerHTML = '<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><i class="fa fa-power-off"></i><span class="caret"></span></a>';
limedia.appendChild(ulmedia);
//intégration des éléments
config0.appendChild(limedia);
config0.appendChild(liagenda);
config0.appendChild(litemperature);
config0.appendChild(licamera);
config0.appendChild(lihorloge);
config0.appendChild(liconfig);
};
//masquage des menus inutiles
var tooltips = document.getElementsByClassName('tooltips');
tooltips[0].id = 'hidden';
if(window.location.href.indexOf("p=dashboard") > -1){tooltips[1].id = 'hidden';}
//Remplacement Logo
var logo = document.getElementsByClassName('navbar-brand');
logo[0].innerHTML = '<img src="http://192.168.0.11/sitewebjeedom/test1/style/images/logo.png" height="30" style="position: relative; top:-5px;">';
};
//fond
var divbg = document.body.appendChild(document.createElement('div'));
divbg.id = 'backstretch';
divbg.innerHTML = '<img src="http://192.168.0.11/sitewebjeedom/test1/style/images/bg/1.jpg">';
//Masquer les objets vides
// var displayEquipement = document.getElementsByClassName('div_displayEquipement');
// var displayEquipement = document.getElementById('div_ob2');
// if (displayEquipement.innerHTML = "") {
// displayEquipement.parentNode.id = 'hidden';
// }
}
});
CSS :
Code : Tout sélectionner
.eqLogic-widget {
margin: 5px 5px 0px 0px !important;
border-radius: 0px !important;
background: rgba(0, 0, 0, 0.44) !important;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.44) !important;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.44) !important;
padding: 20px;
padding-bottom: 0;
position: relative;
overflow: hidden;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.widget-name a,.widget-name span {
font-family: Arial !important;
font-size:1em !important;
font-weight:bold !important;
}
legend {
border-bottom: 0px !important;
background: rgba(0, 0, 0, 0.44) !important;
-webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.44) !important;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.44) !important;
padding: 5px 20px 5px 10px;
position: relative;
overflow: hidden;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 12px;
vertical-align:middle;
color: #ffffff !important;
}
#backstretch {
left: 0px;
top: 0px;
position: fixed;
overflow: hidden;
z-index: -999999;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
#backstretch img {
position: absolute;
margin: 0px;
padding: 0px;
border: none;
z-index: -999999;
max-width: none;
width: 100%;
height: 100%;
top: 0px;
}
#ul_object .nav-header, #ul_object .filter, #hidden {
display: none;
}
header {
background: rgba(0, 0, 0, 0.33) !important;
margin-bottom: 40px;
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.09);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.09);
box-shadow: 0 1px 0 rgba(0,0,0,0.55), inset 0 -1px 0 rgba(255,255,255,0.09);
position: relative;
z-index: 101;
}
.navbar-nav {
background: rgba(0, 0, 0, 0) !important;
}