config.js
Code: Select all
/* Configuratie */
var config = {}
config['language'] = 'nl_NL';
config['domoticz_ip'] = 'http://ip.ip:port';
config['app_title'] = 'Huis bediening';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.nu.nl/';
config['news_scroll_after'] = '15';
config['standby_after'] = 1;
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = '600';
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide'; /*slide' or 'fade' or 'cube' or 'coverflow' or 'flip' */
config['standard_graph'] = 'month';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = 'https://basic.ics';
config['idx_moonpicture'] = 0;
config['switch_horizon'] = 0;
config['selector_instead_of_buttons'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 1;
config['last_update'] = 1;
config['hide_topbar'] = 1;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 1;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['logo'] = '';
config['last_update'] = 0;
config['gm_api'] = '';
config['boss_stationclock'] = 'RedBoss';
config['hide_seconds_stationclock'] = 0;
/*OpenWeather */
config['owm_api'] = 'key';
config['owm_city'] = 'somewhere';
config['owm_name'] = '';
config['owm_country'] = 'nl';
config['static_weathericons'] = 1;
/*Vuilnis Module */
config['garbage_company'] = 'curry';
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = '';
config['garbage_street'] = '';
config['garbage_housenumber'] = '';
config['garbage_maxitems'] = '12';
config['garbage_width'] = '12';
config['garbage_hideicon'] = 0;
config['garbage_use_names'] = true;
config['garbage_use_colors'] = true;
config['garbage_icon_use_colors'] = true;
config['garbage_use_cors_prefix'] = true;
config['garbage'] = {
gft: {kliko: 'green', code: '#FF8C00', name: 'GFT', icon: 'img/garbage/kliko_brown.png'},
pmd: {kliko: 'orange', code: '#db5518', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
rest: {kliko: 'grey', code: '#7CFC00', name: 'Restafval', icon: 'img/garbage/kliko_green.png'},
papier: {kliko: 'blue', code: '#00BFFF', name: 'Papier', icon: 'img/garbage/kliko_blue.png'},
kca: {kliko: 'red', code: '#b21807', name: 'Chemisch afval', icon: 'img/garbage/kliko_red.png'},
brown: {kliko: 'brown', code: '#7c3607', name: 'Bruin', icon: 'img/garbage/kliko_brown.png'},
black: {kliko: 'black', code: '#000000', name: 'Zwart', icon: 'img/garbage/kliko_black.png'},
milieu: {kliko: 'yellow', code: '#f9e231', name: 'Geel', icon: 'img/garbage/kliko_yellow.png'},
kerstboom: {kliko: 'green', code: '#375b23', name: 'Kerstboom', icon: 'img/garbage/tree.png'},}
config['lineColors'] = ['#f1c40f', '#40e0d0', '#eee'];
/*iFrames aanmaken */
/*
var frames = {}
frames.weather = {refreshiframe:10000,height:230,frameurl:"//forecast.io/embed/#lat=00.0000&lon=0.0000&name=Somewhere&country=NL&lang=nl&color=#00aaff&font=Helvetica&fontcolor=#ffffff&units=si",width:12}
*/
/* MAPS VAN GOOGLE */
/*
var maps = {}
maps.location = { height: 256, width:12, latitude: 00.00000, longitude: 0.00000, zoom:10 }
*/
/*Kalender var aanmaken */
var calendars = {}
calendars.private = { fontsize:28, image:'/icons/calendar.png', maxitems: 10, icalurl: 'https://cors-anywhere.herokuapp.com/https://basic.ics' }
/*De internet radio speler */
var _STREAMPLAYER_TRACKS = [
{"track":1,"name":"NPO Radio 2","file":"http://icecast.omroep.nl/radio2-bb-mp3"},
{"track":2,"name":"Radio Rijnmond","file":"http://d2e9xgjjdd9cr5.cloudfront.net/icecast/rijnmond/radio-mp3"},
{"track":3,"name":"Sublime FM","file":"http://Stream.sublimefm.nl/SublimeFM_mp3 "},
{"track":4,"name":"Slam! NonStop","file":"http://stream.radiocorp.nl/web10_mp3"},
{"track":5,"name":"100%NL","file":"http://stream.100p.nl/100pctnl.mp3"},
{"track":6,"name":"Omroep Brabant","file":"http://streaming.omroepbrabant.nl/mp3"},];
/*Knoppen var aanamken */
var buttons = {}
buttons.buienradar = { key: 'buienradar' , width:12, isimage:true, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256'}
buttons.ipcam1 = {key: 'cam1' , width:12, isimage:true, image: 'http://ip:poort/cgi-bin/CGIProxy.fcgi?cmd=snapPicture2&usr=username&pwd=password'}
buttons.ipcam2 = {key: 'cam2' , width:12, isimage:true, image: ' https://spacetrack.eu/iss/globe.php?114126457&'}
buttons.domoticz = {key:'log' , width:12, icon:'fa-microchip', title: 'Domoticz Log', log:true, level: 2}
buttons.school = {key: 'school' , width:12, image:'img/icons/school.png', title: 'School site, met handige informatie', url:'https://www.eenofandereschoolsite.nl/'}
buttons.vakantie = {key: 'vakantie' , width:12, image:'img/icons/vakantie3.png', title: 'School Vakanties voor alle regios', url: 'https://opendata.rijksoverheid.nl/v1/sources/rijksoverheid/infotypes/schoolholidays/schoolyear/2018-2019?output=html'}
buttons.energie = {key: 'EnergiePag', width:12, image: 'img/icons/huisenergie.png', title: 'Ga naar Energie' ,slide:2 }
buttons.home = {key: 'Homepag' , width:12, image: 'img/icons/thuispag.png', title: 'Ga naar Thuis Scherm' ,slide:1 }
buttons.bedien = {key: 'Bedinepag' , width:12, image: 'img/icons/bediening1.png', title: 'Ga naar Huis Besturing' ,slide:3 }
/*buttons.verkeer = { width:12, isimage:true, image:'https://www.anwb.nl/verkeer/verkeerstool.js', url: 'https://www.anwb.nl/verkeer/'}*/
/*buttons.wind1 = { width: 4, height: 10, isimage:true, image: 'https://www.windfinder.com/widget/forecast/js/Somewhere?unit_wave=m&unit_rain=mm&unit_temperature=c&unit_wind=m_s&days=2&show_day=0&show_pressure=0&show_temperature=0'}*/
/*buttons.moon = {key: 'moon'width:12, isimage:true, refreshimage:60000, image: 'moon'}*/
/*buttons.radio = {width:12, image: 'img/radio_on.png', title: 'Radio', url: 'http://nederland.fm'}*/
buttons.honeywell = {key: 'honeywell', width:12, isimage:true, image:'img/icons/HoneywellThermostaat.png', title: 'Honeywell Thermostaat' }
/*
var blocks = {}
/* Standaard blokken met config benaming */
blocks['news_1'] = {}
blocks['news_1']['feed'] = 'https://cors-anywhere.herokuapp.com/http://www.nu.nl/rss/Algemeen';
blocks['news_1']['maxheight'] = 350;
/*Blokken met [IDX] nummer vanuit Domoticz */
/* Xiaomi Gateway Kleuren */
blocks[1] = {}
blocks[1]['width'] = 6;
/* Xiaomi Ringtone Selector */
blocks[3] = {}
blocks[3]['width'] = 6;
/* Xiaomi Deursensor */
blocks[99] = {}
blocks[99]['title'] = 'Deur Sensor'
blocks[99]['width'] = 6;
/* Xiaomi Raam Sensor */
blocks[100] = {}
blocks[100]['title'] = 'Raam Sensor'
blocks[100]['width'] = 6;
/*Metingen onboard sensoren Server PC */
/* Ssyteem Temp */
blocks[101] = {}
blocks[101]['width'] = 6;
/* CPU temp */
blocks[105] = {}
blocks[105]['width'] = 6;
/*P1 Smartmeter Elektr */
/* KWh verbruik actueel */
blocks['94_1'] = {}
blocks['94_1']['title'] = 'Energie Actueel';
blocks['94_1']['width'] = 6;
blocks['94_1']['switch'] = true;
/* Verbruik KWh Vandaag */
blocks['94_2'] = {}
blocks['94_2']['title'] = 'Energie vandaag';
blocks['94_2']['width'] = 4;
blocks['94_2']['switch'] = true;
/* Totale KWh verbruik */
blocks['94_3'] = {}
blocks['94_3']['title'] = 'Energie Totaal';
blocks['94_3']['width'] = 4;
blocks['94_3']['switch'] = true;
blocks['94_3']['image'] = 'current48.png';
/* Binnenkomend Voltage */
blocks[95] = {}
blocks[95]['width'] = 4;
blocks[95]['title'] = 'Inkomend Voltage';
blocks[95]['switch'] = true;
blocks[95]['image'] = 'current48.png';
/* Gas meter verbruik vandaag */
blocks['96_1'] = {}
blocks['96_1']['width'] = 4;
blocks['96_1']['title'] = 'Gas Vandaag';
blocks['96_1']['switch'] = true;
blocks['96_1']['image'] = 'gas48.png'
/* Gasmeter verbruik totaal */
blocks['96_2'] = {}
blocks['96_2']['width'] = 4;
blocks['96_2']['title'] = 'Gas Totaal';
blocks['96_2']['switch'] = true;
/*Kosten Energie*/
/*Elektra vandaag*/
blocks['134'] = {}
blocks['134']['width'] = 4;
blocks['134']['title'] = 'Elektra Kosten Vandaag';
blocks['134']['switch'] = true;
/*Gas vandaag */
blocks['135'] = {}
blocks['135']['width'] = 4;
blocks['135']['title'] = 'Gas Kosten Vandaag';
blocks['135']['switch'] = true;
/*Elektra totaal*/
blocks['136'] = {}
blocks['136']['width'] = 4;
blocks['136']['title'] = 'Elektra Kosten Totaal';
blocks['136']['switch'] = true;
/*Gas totaal */
blocks['137'] = {}
blocks['137']['width'] = 4;
blocks['137']['title'] = 'Gas Kosten Totaal';
blocks['137']['switch'] = true;
/*Weer en metingen van buiten */
/* Buiten temperatuur */
blocks['123_1'] = {}
blocks['123_1']['title'] = 'Temperatuur'
blocks['123_1']['width'] = 4;
/* Luchtvochtigheid */
blocks['123_2'] = {}
blocks['123_2']['title'] = 'Vochtigheid'
blocks['123_2']['width'] = 4;
/* Lucht druk */
blocks['123_3'] = {}
blocks['123_3']['title'] = 'Luchtdruk'
blocks['123_3']['width'] = 4;
/* Windkracht */
blocks[124] = {}
blocks[124]['title'] = 'Windkracht'
blocks[124]['width'] = 4;
/* UV-index */
blocks[52] = {}
blocks[52]['title'] = 'UV Index'
blocks[52]['width'] = 4;
/* mm Regen */
blocks[127] = {}
blocks[127]['title'] = 'Regen'
blocks[127]['width'] = 4;
/* Zicht*/
blocks[125] = {}
blocks[125]['width'] = 4;
/* Gevoels temperatuur, Windchill */
blocks[121] = {}
blocks[121]['title'] = '';
blocks[121]['image'] = '/icons/windchill.png'
blocks[121]['width'] = 12;
/* Kamer Thermostaat */
/*Huiskamer Temperatuur */
blocks[128] = {}
blocks[128]['title'] = 'Huiskamer Temperatuur';
/* blocks[128]['image'] = '/icons/thermostemp.png'*/
blocks[128]['width'] = 12;
/*Buiten Tempratuur Via Thermostaat */
blocks[129] = {}
blocks[129]['title'] = 'Temperatuur Buiten Huis';
/* blocks[129]['image'] = '/icons/thermobuiten.png'*/
blocks[129]['width'] = 12;
/*CV aan of uit */
blocks[130] = {}
blocks[130]['width'] = 12;
blocks[130]['title'] = 'Programma Kachel';
/* blocks[130]['image'] = '/icons/windchill.png'*/
/*Ingestelde Huiskamer Temperatuur*/
blocks[131] = {}
blocks[131]['title'] = 'Ingestelde Temperatuur';
/* blocks[131]['image'] = '/icons/HoneywellThermostaat.png';*/
blocks[131]['width'] = 12;
*/
blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Gas en Elektra Verbruik'
blocks['blocktitle_1']['width'] = 12 ;
blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Kamer Thermostaat'
blocks['blocktitle_2']['width'] = 12 ;
blocks['blocktitle_2']['image'] = 'icons/calendar.png';
blocks['blocktitle_3'] = {}
blocks['blocktitle_3']['type'] = 'blocktitle';
blocks['blocktitle_3']['title'] = 'Bediening Lampen'
blocks['blocktitle_3']['width'] = 12 ;
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Agenda / Kalender'
blocks['blocktitle_4']['icon'] = 'fa-calendar' /*Laatste wijziging, waarom werkt dit niet ?*/
blocks['blocktitle_4']['width'] = 12 ;
blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['icon'] = 'fa-calendar' /*Laatste wijziging, waarom werkt dit niet ?*/
blocks['blocktitle_5']['title'] = 'Nieuws / Files / Weer'
blocks['blocktitle_5']['width'] = 12 ;
blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = 'Oranje = Hoog tarief / Blauw = Laag tarief'
blocks['blocktitle_6']['width'] = 12 ;
blocks['camtitle_1'] = {}
blocks['camtitle_1']['type'] = 'blocktitle';
blocks['camtitle_1']['title'] = 'Camera'
blocks['camtitle_1']['width'] = 12 ;
/*Hier worden de colommen voor op het scherm gemaakt */
var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','settings']
columns[1] = {}
columns[1]['blocks'] = ['currentweather_big_owm',buttons.ipcam1, buttons.ipcam2] //remark: idx 144 produces 2 blocks, so you can use: '144_1' and '144_2' (or just 144 if you want one)
columns[1]['width'] = 3;
columns[2] = {}
columns[2]['blocks'] = [calendars.private, buttons.school, buttons.vakantie, 'garbage', 'streamplayer']
columns[2]['width'] = 3;
columns[3] = {}
columns[3]['blocks'] = ['news_1','traffic',121,'123_1','123_2','123_3',124,52,127,125]
columns[3]['width'] = 4;
columns[4] = {}
columns[4]['blocks'] = ['clock','stationclock','sunrise',buttons.buienradar,buttons.energie]
columns[4]['width'] = 2;
columns[5] = {}
columns[5]['width'] = 3;
columns[5]['blocks'] = ['blocktitle_2',131,130,128,129]
columns[6] = {}
columns[6]['blocks']=['96_1','96_2',95,'graph_96',135,137,buttons.home]
columns[6]['width'] = 4;
columns[7] = {}
columns[7]['blocks'] = ['94_1','94_2','94_3','graph_94',134,136,buttons.bedien]
columns[7]['width'] = 4;
columns[8] = {}
columns[8]['blocks'] = ['clock']
columns[8]['width'] = 1;
columns[9] = {}
columns[9]['blocks'] = ['blocktitle_3',buttons.domoticz,1,99,100,]
columns[9]['width'] = 4;
columns[10] = {}
columns[10]['blocks'] = ['blocktitle_3']
columns[10]['width'] = 4;
columns[11] = {}
columns[11]['blocks'] = [buttons.home,buttons.energie]
columns[11]['width'] = 4;
/*Standby modus configuratie */
var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['weather_owm','clock','94_1','123_1',128] //specify blocks for the standby mode
columns_standby[1]['width'] = 36;
/*Hier worden de verschillende schermen gemaakt welke je kunt swipen */
var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 1920;
screens['default']['maxheight'] = 1080;
screens['default'][1] = {}
screens['default'][1]['background'] = 'bg27.png';
screens['default'][1]['columns'] = [1,2,3,4]
screens['default'][2] = {}
screens['default'][2]['background'] = 'bg27.png';
screens['default'][2]['columns'] = [5,6,7,8]
screens['default'][3] = {}
screens['default'][3]['background'] = 'bg27.png';
screens['default'][3]['columns'] = [8,9,10,11]
custom.css
Code: Select all
/*
CUSTOM CSS FILE
*/
@font-face{
font-family:'digital-clock-font';
src: url('../img/font/digital-7.ttf');
}
/* Title of tile */
.title {font-size:15px;}
/* News block: Hide icon and change margins of text to fill block */
#rss-styled_news {
margin-right: -20px;
margin-left: -20px;}
.fas.fa-newspaper-o {opacity: 50;}
/* Blocktitles?*/
div.mh.transbg.block_graph_94 {Height:150px;}
div.mh.titlegroups {
height: 38px !important; /* default height=75px */
padding-top: 0px; /* center text for new height */
color: white;
background-color: rgba(0,0,0,0.02);}
/* Modifications to the fa en wi font family*/
.sunrise { font-size: auto; font-size: 1vw; color: yellow;}
.wi-sunrise:before { color: yellow; font-size: 25px; font-size: 1vw;}
.sunset { font-size: 25px; font-size: 1vw; color: orange;}
.wi-sunset:before { color: orange; font-size: 25px; font-size: 1vw;}
.wi-humidity:before {color: gray;}
.wi-barometer:before {color: aqua;}
.wi-wind-direction:before {color: lightcyan;}
.fas.fa-mobile.on.icon {font-size: 30px !; color: green;}
.fas.fa-mobile.off.icon {font-size: 30px !important;}
/*Alle iconen verkleuren*/
.fas.fa-lightbulb-o.on {color: yellow}
.fas.fa-fire {color: orange}
.fas.fa-bolt {color: yellow}
.fas.fa-plug {color:yellowgreen}
.fas.fa-thermometer-half {color:pink}
.fas.fa-newspaper-o {color:springgreen}
.fas.fa-calendar {color:purple}
.fas.fa-certificate {color:orange}
.fas.fa-sun-o {color:orange}
.fas.fa-tint {color: MediumSlateBlue }
.fas.fa-eye {color: LightGoldenRodYellow}
.fas.fa-radio {color:red}
.fas.fa-play {color:aqua; font-weight:bold;}
.fas.staticon {color:red}
.fas.fa-chevron-left {color:orange; font-weight:bold;}
.fas.fa-chevron-right {color:orange; font-weight:bold;}
.col-xs-6 transbg imgblock {
margin-left: auto;
margin-right: auto }
.wi.wi-day-sunny:before { color: #FFFF00; font-size: 40px;}
.wi.wi-night-clear:before { color: #FAFAD2; font-size: 40px; }
.wi.wi-day-cloudy:before { color: #FFFF00; font-size: 40px;}
.wi.wi-night-cloudy:before { color: #FAFAD2; font-size: 40px; }
.wi.wi-cloud:before { color: #F8F8FF; font-size: 40px; }
.wi.wi-cloudy:before { color: #DCDCDC; font-size: 40px;}
.wi.wi-showers:before { color: #00FFFF; font-size: 40px; }
.wi.wi-day-rain:before { color: #AFEEEE; font-size: 40px; }
.wi.wi-night-rain:before { color: #4169E1; font-size: 40px; }
.wi.wi-day-thunderstorm:before { color: #FFD700; font-size: 40px;}
.wi.wi-night-thunderstorm:before { color: #DAA520; font-size: 40px; }
.wi.wi-snow:before { color: #FFFAFA; font-size: 40px;}
.wi.wi-day-fog:before { color: #F5F5F5; font-size: 40px; }
.wi.wi-night-fog:before { color: #D3D3D3; font-size: 40px; }
div.mh.transbg.block_131.col-xs-12 {
background-image: url("../img/icons/honeywellthermostaat1.png");
/*background-clip:content-box;*/
background-repeat: no-repeat;
/* background-attachment: fixed;*/
height:260px;
background-position: 110px;
text-align:center;
line-height: 60px;
text-align: center;
}
/*
.input-groupBtn .btn-number {
opacity: 0.5;
color: white;
background-color: rgb(34, 34, 34);
border-radius: 0px;
padding: 6px 10px 6px 10px;
line-height: 0px;
border-radius:180px;
}
*/
section.wrapper {
min-width: 400px; /* Minimum width of your wrapper element */
overflow: hidden;
display: inline-block;
}
.btn-number.plus{
border-bottom:0px;
padding-bottom:7px;
display:inline-block;
color:red;
position: relative;
left: -110px;
top: 95px;
}
.btn-number.min{
border-bottom:0px;
padding-bottom:7px;
color:blue;
position: relative;
right: 652%;
top: 35px;
}
.stateheating {
color:black;
display:inline-block;
width:100%;
height:100%;
vertical-align:0px;
position: relative;
left: 0%;
bottom:70px;
}
.title-input {
font-family: 'digital-clock-font';
font-size:28px;
display:inline-block;
/*width:100%;
Height:100%;*/
color:black;
position: relative;
Top: 75px;
}
/*
div.mh.transbg.block_131.col-xs-12 div.col-data{
text-align:left;
*/
/* OWM Weather */
.col-xs-12.big .weatherdegrees, .big .weatherloc {
display: inline-block;
margin-top: -2px;
font-size: 18px;
font-weight: bold;
margin-right: 4px;
float: right;
text-align:right;
color:orange;}
.weatherfull > div div.temp {
font-size: 28px;
font-weight: 400;
color: orange;
margin-top: 10px;
margin-left:100px;
text-align: left;
padding: 0px 4px;}
.weatherfull > div div.day {
margin-top: 0px;
font-weight: 300;
font-size: 20px;
color:aqua;}
.block_currentweather_owm
{margin-left: 0px;}
.transbg.col-xs-2.temp .av-temp {text-align:left;}
.transbg.col-xs-2.temp .rain {text-align:right;}
.col-xs-4 transbg hover text-center btnPrev {color:red;}
/* Fontsize buttons Blinds */
.fa,.wi {font-size:auto !important;}
/* Block Title */
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
margin: 0px;
margin-left: 15px;
font-weight: 100;
font-size: 140%;
/* color: white;*/
text-shadow: 2px 2px black;
text-align: center;}
.smalltitle h3 {font-size: 15px !important;margin-left: 6px;color: pink; font-weight:bold;}
/* Buienradar */
.block_117 {height: 100% !important;}
.fas.fa-umbrella {font-size: 32px !important;font-weight: bold !important;}
.fas.fa-umbrella.on {color:#3399ff !important;}
/* Standby screen */
.standby .clock {font-size:60px !important;}
.standby .weekday,.standby .date {font-size:40px !important;}
.standby .fas.fa-thermometer-half {color:pink}
.standby .swiper-slide {background:rgba(0,0,0,0.0)}
/* Swiper bullet */
.swiper-pagination-bullet {width: 30px;height: 30px;background: white;}
/* Up-Down arrow Blinds */
.input-groupBtn li {
position:sticky;
z-index: 9999;
right: 1px;
border-radius: 0px; /* Round corners */}
/*Default buttons*/
.btn.btn-default {
background-color: black;
color: white;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
border: none;}
.btn.btn-default:hover {
background-color: black; /* Green */
color: lime;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
border: none;}
/* BLOCKS */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {padding-top:15px; padding-bottom:15px; border: 3px solid rgba(0,0,0,0); background: rgba(0,0,0,0.02); background-clip: padding-box; border-radius: 0px; height:auto}
.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover {padding-top:15px; padding-bottom:15px; border: 3px solid rgba(0,0,0,0); background: rgba(100,100,100,0.3); background-clip: padding-box; border-radius: 0px; cursor:pointer; height:auto}
/*Thermostaat Image*/
.transbg.col-xs-12.imgblock{
text-align:center;}
creative.css line 459 tot 524:
Code: Select all
/*
.input-groupBtn .btn-number {
opacity: 0.5;
color: white;
background-color: rgb(34, 34, 34);
border-radius: 0px;
padding: 6px 10px 6px 10px;
line-height: 20px;
}
.input-groupBtn.input-chevron .btn-number {
padding: 5px 10px 5px 10px
}
.input-groupBtn .btn-number.plus{
border-bottom:0px;
padding-bottom:7px;
}
.input-groupBtn li {
position: -webkit-sticky;
position: sticky;
z-index:9997;
right:1px;
}
.input-groupBtn li.down {
top:35px;
}
.input-groupBtn .stop {
z-index:9997;
-ms-transform: rotate(45deg); /* IE 9 */
/* -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
/*
transform: rotate(45deg);
top: 0;
width: 71px;
height: 33px;
position: absolute;
right: 0;
margin-right: -27px;
margin-top: 0px;
}
.input-groupBtn.input-chevron {
right:27px;
}
.input-groupBtn.input-chevron.hidestop {
right:-5px;
}
*/
.input-groupBtn .btn-number:active,.btn-number:hover {
color: black;
background: rgba(255, 255, 255, 0.3) none repeat scroll 0 0 padding-box;
}
/*
.input-groupBtn .fa-thermostat {
vertical-align: top;
font-size: 20px !important;
}
.title-input {
font-size: 20px !important;
margin-top:-2px;
display: inline-block;
}
*/
graphs.js bar begins at line 222:
Code: Select all
function getGraphs(device, popup) {
var sensor = 'counter';
var txtUnit = '?';
var currentValue = device['Data'];
var decimals = 2;
switch (device['Type']) {
case 'Rain':
sensor = 'rain';
txtUnit = 'mm';
decimals = 1;
break;
case 'Lux':
sensor = 'counter';
txtUnit = 'Lux';
decimals = 0;
break;
case 'Wind':
sensor = 'wind';
if (config['use_beaufort']) {
currentValue = Beaufort(device['Speed']);
decimals = 0;
txtUnit = 'Bft';
} else {
currentValue = device['Speed'];
decimals = 1;
txtUnit = 'm/s';
}
break;
case 'Temp':
case 'Temp + Humidity':
case 'Temp + Humidity + Baro':
sensor = 'temp';
txtUnit = '°C';
currentValue = device['Temp'];
decimals = 1;
break;
case 'Humidity':
sensor = 'temp';
txtUnit = '%';
decimals = 1;
break;
}
switch (device['SubType']) {
case 'Percentage':
sensor = 'Percentage';
txtUnit = '%';
decimals = 1;
break;
case 'Custom Sensor':
sensor = 'Percentage';
txtUnit = device['SensorUnit'];
decimals = 1;
break;
case 'Gas':
txtUnit = 'm3';
break;
case 'Energy':
case 'kWh':
case 'YouLess counter':
txtUnit = 'kWh';
currentValue = device['CounterToday'];
break;
case 'Visibility':
txtUnit = 'km';
break;
case 'Radiation':
case 'Solar Radiation':
txtUnit = 'Watt/m2';
decimals = 0;
break;
case 'Pressure':
txtUnit = 'Bar';
break;
case 'Soil Moisture':
txtUnit = 'cb';
break;
case 'Leaf Wetness':
txtUnit = 'Range';
break;
case 'Voltage':
case 'A/D':
txtUnit = 'mV';
break;
case 'VoltageGeneral':
txtUnit = 'V';
break;
case 'DistanceGeneral':
case 'Distance':
txtUnit = 'cm';
break;
case 'Sound Level':
txtUnit = 'dB';
break;
case 'CurrentGeneral':
case 'Current':
txtUnit = 'A';
break;
case 'Weight':
txtUnit = 'kg';
break;
case 'Waterflow':
sensor = 'Percentage';
txtUnit = 'l/min';
break;
case 'Counter Incremental':
txtUnit = device['CounterToday'].split(' ')[1];
currentValue = device['CounterToday'].split(' ')[0];
break;
}
currentValue = number_format(currentValue, decimals);
showGraph(device['idx'], device['Name'], txtUnit, 'initial', currentValue, false, sensor, popup);
}
function getGraphByIDX(idx) {
getGraphs(alldevices[idx], true);
}
function getButtonGraphs(device) {
if ($('#opengraph' + device['idx']).length === 0) {
var html = '<div class="modal fade opengraph' + device['idx'] + '" data-idx="' + device['idx'] + '" id="opengraph' + device['idx'] + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content">';
html += '<div class="modal-header">';
html += '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';
html += '</div>';
html += '<div class="modal-body block_graphpopup_' + device['idx'] + '">' + language.misc.loading;
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
$('body').append(html);
$('#opengraph' + device['idx']).on('shown.bs.modal', function () {
getGraphByIDX($(this).data('idx'));
});
}
}
function showGraph(idx, title, label, range, current, forced, sensor, popup) {
if (typeof(popup) === 'undefined') forced = false;
if (typeof(forced) === 'undefined') forced = false;
if (typeof(_GRAPHS_LOADED[idx]) === 'undefined' || _GRAPHS_LOADED[idx] < (time() - (parseFloat(_GRAPHREFRESH) * 60))) {
forced = true;
}
if ($('.graphcurrent' + idx).length > 0) {
$('.graphcurrent' + idx).html(current + ' ' + label);
}
if (forced || popup) {
_GRAPHS_LOADED[idx] = time();
//Check settings for standard graph
if (range === 'initial') {
switch (settings['standard_graph']) {
case 'hours':
range = 'last';
break;
case 'day':
range = 'day';
break;
case 'month':
range = 'month';
break;
}
}
realrange = range;
if (range === 'last') realrange = 'day';
$.ajax({
url: settings['domoticz_ip'] + '/json.htm?username=' + usrEnc + '&password=' + pwdEnc + '&type=graph&sensor=' + sensor + '&idx=' + idx + '&range=' + realrange + '&time=' + new Date().getTime() + '&jsoncallback=?',
type: 'GET', async: true, contentType: "application/json", dataType: 'jsonp',
success: function (data) {
if (data.status === 'ERR') {
alert('Could not load graph!');
return;
}
var buttons = createButtons(idx, title, label, range, current, sensor, popup);
title = '<h4>' + title;
if (typeof(current) !== 'undefined' && current !== 'undefined') title += ': <B class="graphcurrent' + idx + '">' + current + ' ' + label + '</B>';
title += '</h4>';
var html = '<div class="graph' + (popup ? 'popup' : '') + '" id="graph' + idx + '">';
html += '<div class="transbg col-xs-12">';
html += title + '<br /><div style="margin-left:15px;">' + buttons + '</div><br /><div id="graphoutput' + idx + '"></div>';
html += '</div>';
html += '</div>';
if ($('#graph' + idx + '.graph').length > 0) {
$('#graph' + idx + '.graph').replaceWith(html);
}
$('.block_graph' + (popup ? 'popup' : '') + '_' + idx).html(html);
var graphProperties = getGraphProperties(data.result[0], label);
graphProperties.dateFormat = settings['shorttime'];
if (range === 'month' || range === 'year') {
graphProperties.dateFormat = settings['shortdate'];
}
if (range === 'last') {
var fourHoursAgo = moment().subtract(4, 'hours').format('YYYY-MM-DD HH:mm');
data.result = data.result.filter(function (element) {
return element.d > fourHoursAgo;
});
}
graphProperties.data = data.result.filter(function (element) {
return element.hasOwnProperty(graphProperties.keys[0]);
});
if ($('#graphoutput' + idx).length > 0) {
makeMorrisGraph(idx, graphProperties);
}
}
});
}
}
function makeMorrisGraph(idx, graphProperties) {
Morris.Bar({
parseTime: false,
element: 'graphoutput' + idx,
data: graphProperties.data,
fillOpacity: 0.2,
gridTextColor: '#c3f6fe',
lineWidth: 1,
stacked: true,
xkey: ['d'],
ykeys: graphProperties.keys,
labels: graphProperties.labels,
xLabelFormat: function (x) { return moment(x.src.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat); },
lineColors: settings['lineColors'],
barColors: settings['lineColors'],
pointFillColors: ['none'],
pointSize: 1,
hideHover: 'auto',
resize: true,
hoverCallback: function (index, options, content, row) {
var datePoint = moment(row.d, 'YYYY-MM-DD HH:mm').locale(settings['calendarlanguage']).format(graphProperties.dateFormat);
var text = datePoint + ": ";
graphProperties.keys.forEach(function (element, index) {
text += (index > 0 ? ' / ' : '') + number_format(row[element], 2) + ' ' + graphProperties.labels[index];
});
return text;
}
});
}
function createButtons(idx, title, label, range, current, sensor, popup) {
var buttons = '<div class="btn-group" role="group" aria-label="Basic example">';
buttons += '<button type="button" class="btn btn-default ';
if (range === 'last') buttons += 'active';
buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'last\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_hours + '</button> ';
buttons += '<button type="button" class="btn btn-default ';
if (range === 'day') buttons += 'active';
buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'day\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.today + '</button> ';
buttons += '<button type="button" class="btn btn-default ';
if (range === 'month') buttons += 'active';
buttons += '" onclick="showGraph(' + idx + ',\'' + title + '\',\'' + label + '\',\'month\',\'' + current + '\',true,\'' + sensor + '\',' + popup + ');">' + language.graph.last_month + '</button>';
buttons += '</div>';
return buttons;
}
function getGraphProperties(result, label) {
var graphProperties = {};
if (result.hasOwnProperty('uvi')) {
graphProperties = {
keys: ['uvi'],
labels: [label],
};
} else if (result.hasOwnProperty('lux')) {
graphProperties = {
keys: ['lux'],
labels: ['Lux'],
};
} else if (result.hasOwnProperty('lux_avg')) {
graphProperties = {
keys: ['lux_avg', 'lux_min', 'lux_max'],
labels: ['Lux average', 'Minimum', 'Maximum'],
};
} else if (result.hasOwnProperty('gu') && result.hasOwnProperty('sp')) {
graphProperties = {
keys: ['gu', 'sp'],
labels: ['m/s', 'm/s'],
};
} else if (result.hasOwnProperty('ba') && result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
graphProperties = {
keys: ['ba', 'hu', 'te'],
labels: ['hPa', '%', _TEMP_SYMBOL],
};
} else if (result.hasOwnProperty('hu') && result.hasOwnProperty('te')) {
graphProperties = {
keys: ['hu', 'te'],
labels: ['%', _TEMP_SYMBOL],
};
} else if (result.hasOwnProperty('te')) {
graphProperties = {
keys: ['te'],
labels: [_TEMP_SYMBOL],
};
} else if (result.hasOwnProperty('hu')) {
graphProperties = {
keys: ['hu'],
labels: ['%'],
};
} else if (result.hasOwnProperty('mm')) {
graphProperties = {
keys: ['mm'],
labels: ['mm'],
};
} else if (result.hasOwnProperty('v_max')) {
graphProperties = {
keys: ['v_max'],
labels: [label],
};
} else if (result.hasOwnProperty('v2')) {
graphProperties = {
keys: ['v2', 'v'],
labels: [label, label],
};
if (label === 'kWh' && realrange === 'day') {
graphProperties.labels = ['Watt', 'Watt'];
}
} else if (result.hasOwnProperty('v')) {
if (label === 'kWh' && realrange === 'day') {
label = 'Wh';
}
if (data.method === 1) {
graphProperties = {
keys: ['eu'],
labels: [label],
};
} else {
graphProperties = {
keys: ['v'],
labels: [label],
};
}
} else if (result.hasOwnProperty('eu')) {
graphProperties = {
keys: ['eu'],
labels: [label],
};
} else if (result.hasOwnProperty('u')) {
graphProperties = {
keys: ['u'],
labels: [label],
};
} else if (result.hasOwnProperty('u_max')) {
graphProperties = {
keys: ['u_max', 'u_min'],
labels: ['?', '?'],
};
}
return graphProperties;
}
settings.js line for color of bars or line 569:
Code: Select all
if (typeof(settings['lineColors']) === 'undefined') settings['lineColors'] = ['#eee', '#eee', '#eee'];
Succes