Dashticz v3.2.0 beta

[madradrakie]

What was your previous version?

The previous version was 3.1.2. It looks like the graphs shows a value which is given by Domoticz every 5 minutes. But the x-axes shows a value every minute. In the previous version the graph only showed a value every 5 minutes and that is probably why the bars appeared bigger?

I think that is the reason indeed. It might be a side effect of the latest version of the chart.js module that is being used.

You can modify the x-axis behavior by adding the following to the block definition:

Code: Select all

    options: {
        scales: {
            xAxes: [{
                    distribution: 'series'
            }]
        },
    }

Probably I'll will make this default in the next beta release.

problem solved, thanks again!

[Lokonli]

and another question. After updating to the new version two of my buttons (which i use for hyperlinks to another slide) are very big. I can not find the problem.

Knipsel.JPG

This is the part of the code i always used.

Code: Select all

buttons.p1 = {key: 'Scenes', width:3, icon: 'fas fa-home', title: 'Home',slide:1 }
buttons.p2 = {key: 'Beneden', width:2, btnimage: 'img/favicon/largetile.png', title: 'P.2',slide:2 }
buttons.p3 = {key: 'Boven', width:2, btnimage: 'img/favicon/largetile.png', title: 'P.3',slide:3 }
buttons.p4 = {key: 'Energie', width:3, icon: 'fas fa-bolt', title: 'Power',slide:4 }
buttons.p5 = {key: 'Water', width:3, icon: 'fas fa-shower', title: 'Water',slide:5 }
buttons.p6 = {key: 'Muziek', width:2, btnimage: 'img/favicon/largetile.png', title: 'P.6',slide:6 }

Which buttons are bigger? What do you mean with very big?
In beta v3.2.0 the default size of button titles was changed. You can change it via custom.css. Probably:

Code: Select all

.dt_title {
	font-size: 100%;
}

your solution worked but the buttons have a different height than for example my scenes or light buttons (see image). Also the text is shown right from the icon instead of beneath. Is it possible to adjust these things in for example the css file? Do you know how? I have searched the forum but could not find the solution yet.

For all special blocks that are using the new template the title is rendered right of the icon by default.

If you want to render the title below the icon you can add the following to custom.css:

Code: Select all

.button {
    flex-direction: column;
    min-height: 85px;
}

A Domoticz device block normally has a height of 85 pixels (small devices: 75 pixels). With the min-height parameter you set the minimal height, In the previous example the button minimal height is set to the size of the domoticz blocks.

If you only want to change the rendering for a specific button you have to add the key parameter to your button definition, and use the following in custom.css:

Code: Select all

[data-id='mykey'].button {
    flex-direction: column;
}

[unclekoen]

I only get the dashticz v3 is loading thingy, then everything went black

Update: I'ts working again. Needs to do some changes though.

Having the same problem with my tablets. Still using v3.1.2 Master. What did you do? See also: https://www.domoticz.com/forum/viewtopi ... 00#p229200

[EdwinK]

I just rebooted the device Dashticz is running on (A synology nas).

[pvklink]

Is there a way to get the buttons (off, smoke, beweging....) right of the title?

Naamloos.png (21.52 KiB) Viewed 1369 times

[HansieNL]

Is there a way to get the buttons (off, smoke, beweging....) right of the title?

Naamloos.png

Not sure if there’s a hard break, but otherwise you can try:

Code: Select all

block_438 br:nth-child(2) {
   display: none
}

If you size your block

Code: Select all

height: 100%

than everything will fit in the block.

[madradrakie]

Sorry, but I think I've found some more bugs in 3.2.0 beta that were working fine in 3.1.0

When I try to create a menu as per https://dashticz.readthedocs.io/en/beta ... ide-button:
The documentation says, "If you use a button to slide to specific screen (menu button), then the background colour of that button will change if that specific screen is active" - Unfortunately, the colour of the button does not change in this version - also, adding this in the custom.css file does nothing:

Code: Select all

.selectedbutton {
  background-color: #cba !important;
} 

For the setting:

Code: Select all

config['slide_effect'] = 'flip'; //(or 'slide' or 'fade', etc)

only slide seems to work now.

Thanks for all your hard work.

is the fade function already fixed?

[Lokonli]

Sorry, but I think I've found some more bugs in 3.2.0 beta that were working fine in 3.1.0

When I try to create a menu as per https://dashticz.readthedocs.io/en/beta ... ide-button:
The documentation says, "If you use a button to slide to specific screen (menu button), then the background colour of that button will change if that specific screen is active" - Unfortunately, the colour of the button does not change in this version - also, adding this in the custom.css file does nothing:

Code: Select all

.selectedbutton {
  background-color: #cba !important;
} 

For the setting:

Code: Select all

config['slide_effect'] = 'flip'; //(or 'slide' or 'fade', etc)

only slide seems to work now.

Thanks for all your hard work.

is the fade function already fixed?

Yes! Fixed in latest beta

[madradrakie]

i can confirm that the fade function is working again!
Thanks again!

[pvklink]

hi,

i added a original rpi 7inch touch screen(800*480) to my network and i like to use dashticz on it.
Dashticz works more then perfect on my pc.

Problems i have:
- no swiper
- second page is not shown
(for this test i only have two dummy switches 1, 2)

I did add config params for swiper

custum.css

Code: Select all

/* png met paint 3d gemaakt
  https://fontawesome.com/icons?d=gallery&m=free
  https://htmlcolorcodes.com/ maroon navy
  met f12 kan je in het tabblad network disable cache aanvinken zodat de nieuwe image wordt geladen...daarna weer aanzetten
  https://www.rapidtables.com/web/color/html-color-codes.html
  https://dashticz-v2.readthedocs.io/en/latest/customcss/customcss.html#block-titles
  https://www.w3schools.com/
*/

.fa-chromecast.on {color: gold;}
.fa-chromecast.off {color: lightgrey;}

.fa-cloud-showers-heavy.on {color: blue !important;}
.fa-cloud-showers-heavy.off {color: lightgrey !important;}

.fa-cloud-sun-rain {color: lightgrey !important;}

.fa-shower.on {color: blue !important;}
.fa-shower.off {color: lightgrey !important;}

.fa-snowflake.on {color: blue;}
.fa-snowflake.off {color: lightgrey;}

.fa-users.on {color: gold !important;} 
.fa-users.off {color: lightgrey !important;}

.fa-sun.on {color: gold !important;} 
.fa-sun.off {color: gold !important;}

.fa-moon.on {color: gold !important;} 
.fa-moon.off {color: gold !important;}

.fa-user-clock.on {color: gold !important;} 
.fa-user-clock.off {color: lightgrey !important;}

.fa-lightbulb.on {color: gold;}
.fa-lightbulb.off {color: lightgrey;}

.fa-tasks.on {color: gold;} 
.fa-tasks.off {color: lightgrey;}

.fa-history.on {color: gold;} 
.fa-history.off {color: lightgrey;}

.fa-glass-cheers.on {color: gold;} 
.fa-glass-cheers.off {color: lightgrey;}

.fa-bed.on {color: gold;} 
.fa-bed.off {color: lightgrey;}

.fa-toggle-on.on {color: gold;} 
.fa-toggle-on.off {color: lightgrey;}

.fa-redo-alt.on {color: gold;} 
.fa-redo-alt.off {color: lightgrey;}

.fa-utensils.on {color: gold;} 
.fa-utensils.off {color: lightgrey;}

.fa-dove.on {color: gold;} 
.fa-dove.off {color: lightgrey;}

.fa-newspaper {color: lightgrey;} 
.fa-video {color: lightgrey;}
.fa-microchip {color: lightgrey;}

.fa-trash.on {color: gold;} 
.fa-trash.off {color: lightgrey;}

.fa-tree.on {color: gold;} 
.fa-tree.off {color: lightgrey;}

.fa-fire.on {color: lightgrey !important;} 
.fa-fire.off {color: lightgrey !important;}

.fa-hdd.on {color: gold;} 
.fa-hdd.off {color: lightgrey;}

.fa-music.on {color: lightgrey;} 
.fa-music.off {color: lightgrey;}

.fa-battery-full.on {color: gold;}
.fa-battery-full.off {color: lightgrey;}

.fa-camera.on {color: lightgrey;} 
.fa-camera.off {color: lightgrey;}

.fa-print.on {color: gold;} 
.fa-print.off {color: lightgrey;}

.fa-tint.on {color: gold;} 
.fa-tint.off {color: lightgrey;}

.fa-temperature-low.on {color: gold;}
.fa-temperature-low.off {color: lightgrey;}

.fa-power-off.on {color: lightgrey;}
.fa-power-off.off {color: gold;}

.fa-phone-volume.on {color: red;}
.fa-phone-volume.off {color:green;}

.fa-desktop.on {color: red;}  
.fa-desktop.off {color: green;}

.fa-laptop.on {color: red;}
.fa-laptop.off {color: green;}

.fa-tablet-alt.on {color: red;} 
.fa-tablet-alt.off {color: green;}

.fa-gamepad.on {color:red;} 
.fa-gamepad.off {color:green;}

.fa-tv.on {color:red;} 
.fa-tv.off {color:green;}

.fa-bell.on {color: red !important;} 
.fa-bell.off {color: green !important;}

.fa-smoking.on {color: red !important;} 
.fa-smoking.off {color: green !important;}

.fa-exclamation-triangle.on {color: red !important;} 
.fa-exclamation-triangle.off {color: green !important;}

.fa-id-card {color: green !important;} 
.fa-id-card.on {color: red !important;} 
.fa-id-card.off {color: green !important;} 

.fa-door-open.on {color: green;} 
.fa-door-closed.off {color: red;}

.fa-shield-alt.on {color: red !important;} 
.fa-shield-alt.off {color: green !important;} 

div[data-id='nu'] {height: 85px;}
div[data-id='streamplayer'] {height: 85px;}

/* opmaak blokken speciaal calenders */
div[data-id='calendars.dvpeter'] {height: 150px;}
div[data-id='calendars.dvpeter'] .items {height: 100%;overflow-y: auto;}
div[data-id='calendars.dvado'] {height: 343px;}
div[data-id='calendars.dvado'] .items {height: 100%;overflow-y: auto;}
div[data-id='calendars.dvf1'] {height: 300px;}
div[data-id='calendars.dvf1'] .items {height: 100%;overflow-y: auto;}
div[data-id='calendars.dvfam'] {height: 170px;}
div[data-id='calendars.dvfam'] .items {height: 100%;overflow-y: auto;}

/* opmaak blokken speciaal ziggo met title tvguide.dutch zetten*/
div[data-id='ziggo'] {height: 342px;}
.tvguide {height: 100%;overflow-y: auto;}

/* opmaak blokken speciaal clock, sunrise, weather */
div[data-id='clock'] {height: 150px;width:237px}
div[data-id='sunrise'] {height: 150px;width:237px}

/* opmaak blokken speciaal garbage                   div[data-id='garbage'] {background-color: rgba(87, 64, 56, 1) !important;} */
div[data-id='garbage'] {height: 120px;width: 240px;}
div[data-id='garbage'] .items {height: 100%;overflow-y: auto;}

/* opmaak blokken speciaal news are set in the corresponding block news_nualg in custom.js */
[data-id='news_nualg'].news .dt_title {height:25px} /* this only works if the block has a title in custom.js */
[data-id='news_nualg'].news .col-data {height: 100%;overflow-y: auto;} /* this only works if the block has a title in custom.js */
[data-id='news_nusp'].news .col-data {height: 100%;overflow-y: auto;} /* this only works if the block has a title in custom.js */
[data-id='news_nusp'].news .dt_title {height:25px} /* this only works if the block has a title in custom.js */

/* opmaak weather niet nodig */
/* div[data-id='currentweather_big'] {background: none !important;} */
div[data-id='currentweather_big'] {height: 85px !important;}

/* div[data-id='weather_owm'] {height: 250px !important;} WERKT NIET */
/* inputnumber thermostat */
.input-number {font-size: 12px !important}

/* Make the background of the titleblocks less high */
.transbg.titlegroups {height: 50px;padding: 0px;font-size: 12px;}
.transbg[class*="col-xs"] {border-radius: 20px;}                             /* Rounded corners */

/* general titleblocks 
.colbar {background-color: rgb(66, 29, 25) !important; color: white !important;}*/
.titlegroups {background-color: rgb(119,110,97) !important; color: white !important;}
.blocktitle .dt_title {height: 25px;padding: 0px;font-size: 18px;color: white;}

/* Swiper
.swiper-pagination-bullet {width: 0px;height: 0px;}
.swiper-pagination-bullet {width: 35px !important;height: 35px !important;}
.swiper-pagination {text-align: right !important;} */

.far,.fas,.wi {
   font-size:30px !important;
}

config.js

Code: Select all

var config = {}
config['domoticz_ip'] = 'http://<deleted  ip:port>';
config['user_name'] = 'admin';
config['pass_word'] = 'xxxxx';
config['app_title'] = 'xxx';
config['room_plan'] = '0';
config['domoticz_refresh'] = '5';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '30';
config['default_cors_url'] = '';
config['dashticz_php_path'] = './vendor/dashticz/';
config['standby_call_url'] = '';
config['standby_call_url_on_end'] = '';
config['theme'] = 'default';
config['background_image'] = 'img/bg3.jpg';
config['standby_after'] = '0';
config['auto_swipe_back_to'] = '';
config['auto_swipe_back_after'] = '';
config['auto_slide_pages'] = '';
config['slide_effect'] = 'slide';
config['standard_graph'] = 'hours';
config['blink_color'] = '255, 255, 255, 1';
config['language'] = 'nl_NL';
config['timeformat'] = 'DD-MM-YY HH:mm';
config['calendarformat'] = 'dd DD.MM.YYYY HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = '';
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = '';
config['gm_zoomlevel'] = '';
config['gm_latitude'] = '';
config['gm_longitude'] = '';
config['speak_lang'] = 'nl-NL';
config['wu_api'] = '';
config['wu_city'] = 'Amsterdam';
config['wu_name'] = '';
config['wu_country'] = 'NL';
config['owm_api'] = 'ad2f8b7da8481b3bf02ad443947e7c21';
//config['owm_city'] = 'Rijswijk';
config['owm_city'] = 2748075;
config['owm_name'] = 'Rijswijk (zh)';
config['owm_country'] = 'nl';
config['owm_lang'] = 'nl';
config['owm_cnt'] = '5';
config['owm_days'] = 1;
config['owm_min'] = 0;
config['idx_moonpicture'] = '';
config['longfonds_zipcode'] = '';
config['longfonds_housenumber'] = '';
config['switch_horizon'] = '';
config['host_nzbget'] = '';
config['spot_clientid'] = '';
config['sonarr_url'] = '';
config['sonarr_apikey'] = '';
config['sonarr_maxitems'] = '';
config['garbage_company'] = 'avalex';
config['garbage_icalurl'] = '';
config['google_api_key'] = '';
config['garbage_calendar_id'] = '';
config['garbage_zipcode'] = '2286MA';
config['garbage_street'] = 'Cornelia Schellingerlaan';
config['garbage_housenumber'] = '11';
config['garbage_housenumberadd'] = '';
config['garbage_maxitems'] = '12';
config['garbage_width'] = '6';
config['setpoint_min'] = '5';
config['setpoint_max'] = '40';
config['loginEnabled'] = 0;
config['disable_update_check'] = 0;
config['no_rgb'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['disable_googleanalytics'] = 0;
config['last_update'] = 1;
config['hide_topbar'] = 0;
config['security_button_icons'] = 0;
config['edit_mode'] = false;
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['garbage_hideicon'] = 0;
config['garbage_icon_use_colors'] = 1;
config['garbage_use_colors'] = 1;
config['garbage_use_names'] = 1;
config['garbage_use_cors_prefix'] = 1;
config['vertical_scroll'] = 0;
config['enable_swiper'] = 2;

//Configuring the OWM parameters https://home.openweathermap.org/api_keys   locatie-id 2748075 of 76
config['garbage_mapping'] = {
    rest: ['grof', 'grey', 'rest', 'grijs','grijze'],
    gft: ['gft', 'tuin', 'refuse bin', 'green', 'groen', 'Biodégradables', 'snoei'],
    pmd: ['plastic', 'pmd', 'verpakking', 'kunststof', 'valorlux'],
    papier: ['papier', 'blauw', 'blue', 'recycling bin collection'],
    kca: ['chemisch', 'kca','kga'],
    brown: ['brown', 'verre'],
    black: ['black', 'zwart'],
    milieu: ['milieu'],
    kerstboom: ['kerst'],
};

config['garbage'] = {
    gft: {kliko: 'green', code: '#FFFFFF', name: 'GFT (groene bak)', icon: 'img/garbage/kliko_green.png'},
    pmd: {kliko: 'orange', code: '#FFFFFF', name: 'PMD', icon: 'img/garbage/kliko_orange.png'},
    rest: {kliko: 'grey', code: '#FFFFFF', name: 'Restafval', icon: 'img/garbage/kliko_grey.png'},
    papier: {kliko: 'blue', code: '#FFFFFF', name: 'Papier', icon: 'img/garbage/kliko_blue.png'},
    kca: {kliko: 'red', code: '#FFFFFF', name: 'Chemisch afval', icon: 'img/garbage/kliko_red.png'},
    brown: {kliko: 'brown', code: '#FFFFFF', name: 'Bruin', icon: 'img/garbage/kliko_brown.png'},
    black: {kliko: 'black', code: '#FFFFFF', name: 'Zwart', icon: 'img/garbage/kliko_black.png'},
    milieu: {kliko: 'yellow', code: '#FFFFFF', name: 'Geel', icon: 'img/garbage/kliko_yellow.png'},
    kerstboom: {kliko: 'green', code: '#FFFFFF', name: 'Kerstboom', icon: 'img/garbage/tree.png'},
};

var frames = {}
deleted

var calendars = {}
deleted

var tvguide = {}
	tvguide.dutch = {key:'ziggo',title:'Ziggo', icon: 'fas fa-tv', width:12, channels: [1,2,3,4,31,36,37,34,466,420], maxitems: 20 }

var buttons = {}
	buttons.nunl	= {key:'nu', width:4, icon: 'fas fa-newspaper', title: 'Nu.nl', url: 'http://www.nu.nl'}

// BLOKKEN 
var blocks = {}

blocks['news_nualg']	= {title: 'Nu.nl (algemeen)', feed: 'http://www.nu.nl/rss/algemeen', maxheight: 150}
blocks['news_nusp']	= {title: 'Nu.nl (sport)', feed: 'http://www.nu.nl/rss/sport', maxheight: 150} 

blocks[1]	= {title: 'test1', hide_data: true, width: 12}									//, speakOn: 'Lantaarn is aan', speakOff: blocks[2]	= {title: 'test2', hide_data: true, width: 12}									//, speakOn: 'Lantaarn is aan', speakOff: 
// KOLOMMEN clock

var columns = {}
columns[1] = {blocks: ['currentweather_big_owm','weather_owm'], width: 8}
columns[2] = {blocks: [1], width: 4}
columns[3] = {blocks: [2,calendars.fam,'garbage'], width: 6}
columns[4] = {blocks: ['clock','sunrise',calendars.ado,calendars.f1], width: 6}
columns[5] = {blocks: ['news_nualg','news_nusp',tvguide.dutch,1472], width: 12}

// SCHERMEN

var screens = {}
screens['default'] = {}
screens['default']['maxwidth'] = 800;
screens['default']['maxheight'] = 480;
// 720 bij 480 werkt niet en 640 bij 480 ook niet

screens['default'][1] = {}
screens['default'][1]['background'] = 'bg1.jpg';
screens['default'][1]['columns'] = [1,2]

screens['default'][2] = {}
screens['default'][2]['background'] = 'bg1.jpg';
screens['default'][2]['columns'] = [3,4]

screens['default'][3] = {}
screens['default'][3]['background'] = 'bg1.jpg';
screens['default'][3]['columns'] = [5]

[jake]

hi,

i added a original rpi 7inch touch screen(800*480) to my network and i like to use dashticz on it.
Dashticz works more then perfect on my pc.

Problems i have:
- no swiper
- second page is not shown
(for this test i only have two dummy switches 1, 2)

I did add config params for swiper

After updating last weekend from Dashticz 3.1 to 3.2 I had the same experience, even after adding the new necessary swiper enable parameter. I finally solved it by emptying the browser cache on the tablet (app settings in Android)

[pvklink]

mm, i did with f5, perhaps f5 (chrome) is not enough..

I did a more cleanuo with f12, still no pages and sliders
perhaps something wrong in my css or js

[toro]

I updated from 3.1.2 to 3.3.3
Most is fixed, changed button images to btnimage etc.
But now, I can’t get my camera image showing in a larger size.
It’s a button on screen 4, if someone is at the door is slides to this screen.
Touching it, or after 10 seconds, it slides back to screen 1.
The camera image is not a real stream, it updates every second.
I changed the size in custom.css but it is probably not the best way to do this. It was just trial and error and it worked for the older version.

CONFIG.js

Spoiler: show

Code: Select all

buttons.webcam = {width:12, isimage:true, refreshimage:2000, forcerefresh: true, image: 'http://192.168.1.150:8888/shotDoorBig.jpg?nocache=<?php echo time(); ?>',refreshurl: 2000, forcerefresh: true, slide:0}

columns[11] = {}
columns[11]['blocks'] = [buttons.webcam]
columns[11]['width'] = 12;

screens[4] = {}
screens[4]['background'] = '../dashticz/custom/img/bgZwartPaars02.jpg';
screens[4]['columns'] = [11]

F12 console of the buttons:

Spoiler: show

Code: Select all

//v3.1.2
<div id="block_41">
	<div class="col-xs-12 hover  transbg buttons-41 slide slide0" data-id="buttons.41">
		<img id="buttonimg_41" style="max-width:100%;" src="./vendor/dashticz/nocache.php?http://user:[email protected]:443/tmpfs/auto.jpg">
	</div>
</div>

//v3.3.3
<div id="block_44" div="" <="">
	<div class="transbg col-xs-12 button dt_block hover">
		<div class="dt_content">
			<div class="dt_state">
				<img style="max-width:100%;" src="./vendor/dashticz/nocache.php?http://user:[email protected]:443/tmpfs/auto.jpg">
			</div>
		</div>
	</div>
</div>

custom.css

Spoiler: show

Code: Select all

#buttonimg_41 {
	height:650px !important;
	max-width: 300% !Important;
}

Camera image big and small.jpg (27.78 KiB) Viewed 1098 times

[Lokonli]

The class definitions indeed changed a bit from 3.1.2 to 3.3.3.

The easiest way is as follows:
Add a 'key' parameter to your button definition to be able to uniquely identify your button:

Code: Select all

buttons.webcam = {width:12, isimage:true, refreshimage:2000, forcerefresh: true, image: 'http://192.168.1.150:8888/shotDoorBig.jpg?nocache=<?php echo time(); ?>',refreshurl: 2000, forcerefresh: true, slide:0,
key:'webcam'}

Then add the following to custom.css to set a fixed width:

Code: Select all

[data-id='webcam'] img {
   width: 600px;
}

Don't forget to rename image to btnimage in your CONFIG.js (Your CONFIG.js seems to be incorrect ...)

[toro]

Lokonli, thank you very much! This works like a charm.
I tried so many things and couldn’t get it to work, but you make it seem so easy
You are right about the btnimage. I already did change it, but copied the old version here by mistake.
Thanks again for your quick reply and good solution!