Dashticz IP Cameras - Features, Fixes & Updates

[heggink]

Yes, brilliant! Cheers!!

[clinkadink]

Yes, brilliant! Cheers!!

Great, glad its working now

[webrazor]

Do you mean Dashticz or Domoticz?
Please follow guidance here: https://www.domoticz.com/forum/viewtopi ... 29#p252524

Domoticz is really slow, thats why dashticz is probably slow to.
So i disabled the cameras in domoticz and now it's working fast again.

[madpatrick]

Hi,

i've setup Dashticz with Fully Kiosk on a Samsung Tab 8", but after a few hours/dat it becomes uncontrollable.
The responce is extremly slow and i need to restart the app or the complete tablet.
What can be de cause of this ? Can it be the cameras or buienradar ?
It looks like the memery or webcache is full (or something)
When i check the setting on my Samsung it downloaded in 1 month over 419Gb of data through the Wifi

Code: Select all

var config = {}
config['domoticz_ip'] = 'https://domain.nl:9300';
config['login_timeout'] = '60';
config['user_name'] = 'xxxxxxxx';
config['pass_word'] = 'xxxxxxxx';
config['app_title'] = 'xxxxxxxx';
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'] = '7';
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/bg4.jpg';
config['standby_after'] = '0';
config['start_page'] = '1';
config['enable_swiper'] = '2';
config['vertical_scroll'] = '2';
config['auto_swipe_back_to'] = '1';
config['auto_swipe_back_after'] = '20';
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 HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = '';
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = '';
config['gm_zoomlevel'] = '';
config['gm_latitude'] = '51.8333';
config['gm_longitude'] = '4.1333';
config['speak_lang'] = 'en-US';
config['wu_api'] = '';
config['wu_city'] = 'Hellevoetsluis';
config['wu_name'] = 'Hellevoetsluis';
config['wu_country'] = 'NL';
config['owm_api'] = 'xxxxxxxxxxxxxxxxxxxxxxxx';
config['owm_city'] = 'Hellevoetsluis';
config['owm_name'] = 'Hellevoetsluis';
config['owm_country'] = 'NL';
config['owm_lang'] = 'NL';
config['owm_cnt'] = '4';
config['idx_moonpicture'] = '';
config['longfonds_zipcode'] = 'xxxxxxxx';
config['longfonds_housenumber'] = '';
config['switch_horizon'] = '';
config['host_nzbget'] = '';
config['spot_clientid'] = '';
config['sonarr_url'] = '';
config['sonarr_apikey'] = '';
config['sonarr_maxitems'] = '';
config['garbage_company'] = '';
config['garbage_icalurl'] = '';
config['google_api_key'] = '';
config['garbage_calendar_id'] = '';
config['garbage_zipcode'] = '';
config['garbage_street'] = '';
config['garbage_housenumber'] = '';
config['garbage_housenumberadd'] = '';
config['garbage_maxitems'] = '';
config['garbage_width'] = '';
config['setpoint_min'] = '5';
config['setpoint_max'] = '40';
config['evohome_boost_zone'] = '60';
config['evohome_boost_hw'] = '15';
config['loginEnabled'] = 0;
config['disable_update_check'] = 0;
config['enable_websocket'] = 1;
config['no_rgb'] = 0;
config['auto_positioning'] = 0;
config['use_favorites'] = 1;
config['disable_googleanalytics'] = 0;
config['last_update'] = 1;
config['hide_topbar'] = 1;
config['security_button_icons'] = 0;
config['security_panel_lock'] = 0;
config['edit_mode'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['owm_days'] = 1;
config['owm_min'] = 1;
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'] = 0;
config['garbage_use_names'] = 0;
config['garbage_use_cors_prefix'] = 1;

// Hidden graph setting

var p1_gas  			= 300;
var p1_gas_nu   		= '300_1';
var p1_gas_totaal 		= '300_2';
var p1_elektra_nu 		= '302_1';
var p1_elektra_vandaag 		= '302_2';
var p1_elektra_totaal		= '302_3';
var p1_grafiek_gas  		= 'graph_300';
var p1_grafiek_elektra		= 'graph_302';

var solar_graph			= 'graph_294';
var solar_day			= '294_2'
var solar_current		= '294_1'

var currentweather1		= 'currentweather_big_owm'
var sunrise1			= 'sunrise'

var calendars = {}
calendars.xxxxxxxxxx= {
    maxitems: 6,
    url: 'http://192.168.1.1:8008/caldav/',
    icalurl: 'http://xxxxxxxx:[email protected]:8008/ical',
    calFormat: 1,
    dateFormat: "dd M",
    timeFormat: "HH",
}

calendars.xxxxxxx= {
    maxitems: 6,
    url: 'http://192.168.1.1:8008/caldav/',
    icalurl: 'http://xxxxxxxx:[email protected]:8008/ical',
    calFormat: 1,
    dateFormat: "dd M",
    timeFormat: "HH",
}

calendars.f1 = {
    maxitems: 6,
    url: 'https://www.f1calendar.com/#!/timezone/Europe-Amsterdam',
    icalurl: 'http://www.f1calendar.com/download/f1-calendar_p1_p2_p3_q_gp_alarm-20.ics',
    calFormat: 1,
    dateFormat: "dd M",
    timeFormat: "HH",
}

calendars.combined = {
    calFormat: 1,
    dateFormat: "DD/MM dd",
    timeFormat: "HH:mm",
}
calendars.combined.maxitems = 15;
calendars.combined.calendars = [
	{ color:'white',calendar:calendars.xxxxxxxx}, 
	{ color:'yellow',calendar:calendars.xxxxxxxx},
	{ color:'#00adf1',calendar:calendars.f1 }
]

var buttons = {}

// Buienradar
// --------------------------------------------------------------------------------------------
buttons.buienradar = {
width:12, 
isimage:true, 
refreshimage:60, 
btnimage: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=315&h=270', 
url: 'https://gadgets.buienradar.nl/gadget/zoommap/?lat=51.83135&lng=4.12468&overname=2&zoom=6&naam=3221lw&size=3&voor=1'
}

// --------------------------------------------------------------------------------------------
// Trein informatie
// --------------------------------------------------------------------------------------------
var publictransport = {}
  publictransport.ovinfo= {
  station: 'hellevoetsluis/bushalte-provincialeweg-smitsweg',
  title:'OV Info',
  show_lastupdate:true,
  provider: '9292',
  service : '104,404',
  destination : 'Spijkenisse, Spijkenisse Metro Centrum',
  show_via: true,
  icon: 'fas fa-bus',
  results: 8,
 interval : 600,
  width:12
}


// --------------------------------- BLOCKS ---------------------------------------
var blocks = {}

blocks['blocktitle_1'] = {
key: 'blocktitle_1',
type: 'blocktitle',
title: 'Info',
width: 12,
}

blocks['blocktitle_2'] = {
key: 'blocktitle_2',
type: 'blocktitle',
title: 'Lichtschakelaars',
width: 12,
}

blocks['blocktitle_3'] = {
key: 'blocktitle_3',
type: 'blocktitle',
title: 'Weer',
width: 12,
}

blocks['blocktitle_4'] = {
key: 'blocktitle_4',
type: 'blocktitle',
title: 'OV',
width: 12,
}

blocks['blocktitle_5'] = {
key: 'blocktitle_5',
type: 'blocktitle',
title: 'Camera',
width: 12,
}

blocks['blocktitle_6'] = {
key: 'blocktitle_6',
type: 'blocktitle',
title: 'Server',
width: 12,
}

blocks['blocktitle_7'] = {
key: 'blocktitle_7',
type: 'blocktitle',
title: 'Toon',
width: 12,
}

blocks['blocktitle_8'] = {
key: 'blocktitle_8',
type: 'blocktitle',
title: 'Agenda',
width: 12,
}

blocks['blocktitle_9'] = {
key: 'blocktitle_9',
type: 'blocktitle',
title: 'Tuin',
width: 3,
}

blocks['blocktitle_10'] = {
key: 'blocktitle_10',
type: 'blocktitle',
title: 'Woonkamer',
width: 3,
}

blocks['blocktitle_11'] = {
key: 'blocktitle_11',
type: 'blocktitle',
title: 'Hal',
width: 3,
}

blocks['blocktitle_12'] = {
key: 'blocktitle_12',
type: 'blocktitle',
title: 'Ventilatie',
width: 3,
}

blocks['camera_1'] = {
type: 'camera',
title : "Voordeur",
imageUrl: 'https://xxxxxxxx.nl:9300/camsnapshot.jpg?idx=1',
refresh: 5,
width: 6,
height:200,
//forcerefresh: 1,
}


blocks['camera_2'] = {
type: 'camera',
title : "Garage",
imageUrl: 'https://xxxxxxxx.nl:9300/camsnapshot.jpg?idx=2',
refresh: 5,
width: 6,
height:200,
//forcerefresh: 1,
}

blocks['gr_tuin'] = {
idx : 's1',
  title: ' ',
  type: 'dial',
  color: '#ffff00',
  width: 3,
  last_update: false
};

blocks['gr_kamer'] = {
idx : 's2',
  title: ' ',
  type: 'dial',
  color: '#ffff00',
  width: 3,
  last_update: false
};

blocks[59] = {
  width: 6,               
  title : 'Woonkamer keuken',  
  hide_data : false,       
  last_update : false,    
};

blocks[64] = {
  width: 6,               
  title : 'Woonkamer tuin',  
  hide_data : false,       
  last_update : false,     
};

blocks[69] = {
  width: 6,               
  title : 'Erker',  
  hide_data : false,       
  last_update : false,     
};

blocks[82] = {
  width: 6,               
  title : 'Voordeur',  
  hide_data : false,       
  last_update : false,     
};

blocks[96] = {
  title : 'Garage',  
  hide_data : false,
//  type : 'dial',      
  color: '#ffffff',
  width: 4,
  last_update: false, 
};

blocks['ventilatie'] = {
  idx: 112,
  title: ' ',
  type: 'dial',
  color: '#ffffff',
  width: 3,
  last_update: false
};

blocks['dimmer_hal'] = {
  idx: 154,
  title: ' ',
  type: 'dial',
  color: '#ffff00',
  width: 3,
  last_update: false,
  setpoint: 20, // the entire outer ring will change color based on this setpoint
  shownumbers: true,  // display the numbers on the dial (default is false)
  showring: true, // display outer ring color all the time (default is false, will only display when hover over)
  showunit: true // display unit for the dial value (default is false)
};

blocks[254] = {
  width: 12,              
  title : 'Toon Scenes',  
  hide_data : false,     
  last_update : false,     
};

blocks[255] = {
  width: 12,              
  title : 'Toon Temperatuur',  
  hide_data : false,     
  last_update : false,     
};

blocks[256] = {
  width: 12,              
  title : 'Kamer Temperatuur',  
  hide_data : false,     
  last_update : false,     
};

blocks[264] = {        
//  type: 'dial',
  title : 'Tuin - lampen',  
  hide_data : false,     
  color: '#ffffff',
  width: 4,
  last_update: false
};

blocks[267] = {  
//  type: 'dial',
  title : 'Tuin - Stroom',  
  hide_data : false,     
  color: '#ffffff',
  width: 4,
  last_update: false
};


blocks[276] = {
  width: 6,              
  title : 'Openhaard',  
  hide_data : false,       
  last_update : false,   
};

blocks[355] = {
  title : 'Werkkamer',
  width : 6,
  last_update : false,
}

// ------------ Server ----------------
blocks[25] = {
  width: 4,               
  title : 'Memory',  
  hide_data : false,       
  last_update : false,    
};

blocks[29] = {
  width: 4,               
  title : 'CPU',  
  hide_data : false,       
  last_update : false,    
};

blocks[26] = {
  width: 4,               
  title : 'HDD',  
  hide_data : false,       
  last_update : false,    
};

blocks[27] = {
  width: 4,               
  title : 'Boot',  
  hide_data : false,       
  last_update : false,    
};

blocks[28] = {
  width: 4,               
  title : 'Flexshares',  
  hide_data : false,       
  last_update : false,    
};

blocks[343] = {
  width: 4,               
  title : 'Case Temp',  
  hide_data : false,       
  last_update : false,    
};

blocks[347] = {
  width: 4,               
  title : 'Camera 1',  
  hide_data : false,       
  last_update : false,    
};

blocks[348] = {
  width: 4,               
  title : 'Camera 2',  
  hide_data : false,       
  last_update : false,    
};

blocks[349] = {
  width: 4,               
  title : 'Backup',  
  hide_data : false,       
  last_update : false,    
};
// ----------------------------


blocks[solar_graph] = {
  title: 'Solaredge',
  width: 12,
  height: '120px',
  beginAtZero: true,
  graph: 'bar',
  legend: false,
  datasetColors: ['yellow'],
  custom: {
      	"Mnd": {
        "range": "month",
        "filter": "14 days",
        "data": {
        "verbruik": "d.v_294*1"}
              }
      },
}

blocks['server_status'] = {
        title: 'Server Status',
        devices: [25,29,26,27,28,347,348,349],
        groupByDevice: 'horizontal',	
        beginAtZero: true,	
	legend: false,
  height: '200px',
}

blocks[solar_day] = {
  title: 'Day',
  width: 6,
  hide_data : false,       
  last_update : false,
}

blocks[solar_current] = {
  title: 'Current',
  width: 6,
  hide_data : false,       
  last_update : false,
}


// Smartmeter Gas
blocks[p1_gas] = {}
blocks[p1_gas]['width'] = 5;
blocks[p1_gas]['show_lastupdate'] = false;
blocks[p1_gas]['protected'] = true;

blocks[p1_gas_nu] = {}
blocks[p1_gas_nu]['width'] = 6;
blocks[p1_gas_nu]['title'] = 'Gas Vandaag';
blocks[p1_gas_nu]['show_lastupdate'] = false;
blocks[p1_gas_nu]['protected'] = true;

blocks[p1_gas_totaal] = {}
blocks[p1_gas_totaal]['width'] = 6;
blocks[p1_gas_totaal]['title'] = 'Gas Totaal';
blocks[p1_gas_totaal]['show_lastupdate'] = false;
blocks[p1_gas_totaal]['protected'] = true;

// Smart Meter Elektra: _1 = Huidig Elektra, _2 = Elektra Vandaag, _3 = Elektra Totaal

// Smartmeter Elektra
blocks[p1_elektra_nu] = {}
blocks[p1_elektra_nu]['width'] = 6;
blocks[p1_elektra_nu]['title'] = 'Energie Nu';
blocks[p1_elektra_nu]['show_lastupdate'] = false;
blocks[p1_elektra_nu]['protected'] = true;

blocks[p1_elektra_vandaag] = {}
blocks[p1_elektra_vandaag]['width'] = 6;
blocks[p1_elektra_nu]['title'] = 'Energie Vandaag';
blocks[p1_elektra_vandaag]['show_lastupdate'] = false;
blocks[p1_elektra_vandaag]['protected'] = true;

blocks[currentweather1] = {}
blocks[currentweather1]['width'] = 12;
blocks[currentweather1]['title'] = 'Weer_nu';

blocks[sunrise1] = {}
blocks[sunrise1]['width'] = 12;


// --------------------------------------------------------------------------------------------
// columns 

var columns = {}
columns['bar'] = {}
columns['bar']['blocks'] = ['logo','miniclock','settings']

columns[1] = {}
columns[1]['blocks'] = ['blocktitle_3', buttons.buienradar, currentweather1,'weather_owm']
columns[1]['width'] = 4

columns[2] = {}
columns[2]['blocks'] = ['blocktitle_2','blocktitle_9','blocktitle_10','blocktitle_11','blocktitle_12','gr_tuin','gr_kamer','dimmer_hal','ventilatie','blocktitle_5','camera_1','camera_2',solar_graph]
columns[2]['width'] = 5;
					
columns[3] = {}
columns[3]['blocks'] = ['blocktitle_1','stationclock',sunrise1,'blocktitle_4',publictransport.ovinfo]
columns[3]['width'] = 3;

columns[4] = {}
columns[4]['blocks'] = ['blocktitle_2',82,276,59,64,69,355,96,264,267]
columns[4]['width'] = 4

columns[5] = {}
columns[5]['blocks'] = ['blocktitle_8',calendars.combined]
columns[5]['width'] = 8

// --------------------------------------------------------------------------------------------
// Screens

var screens = {}
screens[1] = {}
screens[1]['background'] = 'bg4.jpg';
screens[1]['columns'] = [1,2,3]

screens[2] = {}
screens[2]['background'] = 'bg4.jpg';
screens[2]['columns'] = [4,5]

[EdwinK]

Your OWM api is visible. Now others can use up your data.

[madpatrick]

Your OWM api is visible. Now others can use up your data.

Thanks. Looks like somebody adjusted it already for me.

[Brutus]

I also have the same problems as others have mentioned:

When using the internet Domoticz Camera URL's Domoticz gets extremely slow. So its works but its not workable. The advantage is you don't have to authenticate to your camera. I can't disable the camera's authentication because its also connected to the internet.

It would be nice if it was possible to give the username or password in a way. I use a Axis ML3106-LVE camera and can't find an URL to use to get the Auth parameters in the same link: http://192.168.1.2/jpg/image.jpg?size=3 (before: http://user:[email protected]/jpg/image.jpg?size=3)

Also tested the use of HTTPS that's sometimes works but not in Dashticz.

So using the Domoticz URL for Camera makes everything slow.

[Brutus]

So I manged to get this link working again: http://user:[email protected]/jpg/image.jpg?size=3

When I updated the firmware for this camera the authentication has changed from Basic to Basic and Digest. Setting is back to Basic it works again.
But in Dashticz it doesn't work in a browser on a tablet. In different browsers on the computer it works fine.

I use the Fully Kiosk Browser. They say in the FAQ:

If your webcam video requires Basic HTTP Authentication (it’s URL starts with http://user:auth@host…) and you embed this video in your page by using the <img> oder <video> tag it probably won’t work as the authentication for embedded contents is not allowed in Android Webview (as well as in Google Chrome on Android) for security reasons. For more information please read the discussion on this topic at Chromium Bugtracker. This is something Fully can’t change. The only known workaround is using the video proxy.

Anything we can do about this?

[Lokonli]

For transcoding the rtsp stream from my camera to mjpeg (for the video) and jpg (for images) I started to use Shinobi.

https://shinobi.video/

That seems to work great!

Shinobi provides URLs for the mjpeg stream and the jpg images. You can define frame rates etc.

You can enter username and password for your cam in the monitor settings as well. (I did not test authentication.)

[Brutus]

Hi,

I would like to see one camera on two different screens.
The problem is that on both screens the blocks have a height of 600 instead of one block 280px and one block of 600px. Does anyone have solution?
I got the following in my CONFIG.js:

Code: Select all

blocks['voordeur_cam'] = {
        title: 'Voordeur',
	type: 'camera',
        imageUrl: 'http://192.168.X:XX/camsnapshot.jpg?idx=X',
        refresh: 1,
	width: 12,
        height: 280, 
	forcerefresh: 1,
	key: 'voordeur_cam'
}

blocks['voordeur_cam2'] = {
	title: 'Voordeur',
        type: 'camera',
        imageUrl:'http://192.168.X:XX/camsnapshot.jpg?idx=X',
        refresh: 1,
	width: 10,
        height: 600,
	forcerefresh: 1,
	key: 'voordeur_cam2'
}

Ever solved this problem Buck?

When you use two camera's with different heights, the height of the last camera is used. As discribed above.

[Lokonli]

Hi,

I would like to see one camera on two different screens.
The problem is that on both screens the blocks have a height of 600 instead of one block 280px and one block of 600px. Does anyone have solution?
I got the following in my CONFIG.js:

Code: Select all

blocks['voordeur_cam'] = {
        title: 'Voordeur',
	type: 'camera',
        imageUrl: 'http://192.168.X:XX/camsnapshot.jpg?idx=X',
        refresh: 1,
	width: 12,
        height: 280, 
	forcerefresh: 1,
	key: 'voordeur_cam'
}

blocks['voordeur_cam2'] = {
	title: 'Voordeur',
        type: 'camera',
        imageUrl:'http://192.168.X:XX/camsnapshot.jpg?idx=X',
        refresh: 1,
	width: 10,
        height: 600,
	forcerefresh: 1,
	key: 'voordeur_cam2'
}

Ever solved this problem Buck?

When you use two camera's with different heights, the height of the last camera is used. As discribed above.

Should be fixed in latest beta (from just now). Could you test?

[Brutus]

@Lokonli,

You solved it! Thanks for the quick solution!

Greetings

[dipas0]

Can anyone help me with the following:

For transcoding the rtsp stream from my cameras to mjpeg (for the video) and jpg (for images) I'm using the app IP CAM VIEWER PRO on Android.
This works great. That means: up to Dashticz version 3.4.9.1 beta. With the Dashticz master version 3.5 and Dashticz beta version 3.5.2 I suddenly have a bad network performance with the JPG stream.

If I go back to version 3.4.9.1 beta I have no problem, if I use one of the new versions I do have a problem: the JPGs are updated very slowly on the Dashticz dashboard. And I see blocked jpgs (via F12 key of the browser)

I'am using:

Configuration

1.png (11.42 KiB) Viewed 2501 times

Poor performance v3.5 master and v3.5.2 beta

Poor performance

2.png (94.45 KiB) Viewed 2501 times

Good performance v3.4.9.1 beta

Good performance

3.png (90.05 KiB) Viewed 2501 times

Thanks in advance!

[sailmich]

I'm wondering if it's possible to get the camera button on my dashboard with round edges like the small previews in the carousel. I like round corners more than square and all my buttons are oval or round. If there are square buttons in my dashboard it ruins the design. I already tried with frames and buttons the camera image is always bigger than the button.

[lzwfkv]

I'm wondering if it's possible to get the camera button on my dashboard with round edges like the small previews in the carousel. I like round corners more than square and all my buttons are oval or round. If there are square buttons in my dashboard it ruins the design. I already tried with frames and buttons the camera image is always bigger than the button.

If i understood well what you want to achieve, then try to add this to custom.css:

Code: Select all

[data-id='ipcam'].camera { /*use the name of your Camera Block, instead of ipcam */
  padding: 0px !important; /* image frame aligned to block's box borders */
}
[data-id='ipcam'].camera img { /*use the name of your Camera Block, instead of ipcam */
  border-radius: 20px; /* Rounded corners for image; number of pixels should be the same as used for the parent Camera block */
}

[sailmich]

Thx for your answer! I tried your advice but didn't work as i want. I put my css file, camera snippet CONFIG.js and an screenshot for better understanding. I want the camera image not bigger than frame and in the same shape.

Spoiler: show

Code: Select all

transbg[class*="col-xs"] {
  border-radius: 200px;                           /* Rounded corners */
  /*background: rgba(0,0,0,0) ;*/
}
.selectedbutton {
  opacity: 0.8; background-color: #BDBDBD !important;
}
[data-id='cameras'].camera { /*use the name of your Camera Block, instead of ipcam */
  padding: 0px !important; /* image frame aligned to block's box borders */
}
[data-id='cameras'].camera img { /*use the name of your Camera Block, instead of ipcam */
  border-radius: 200px; /* Rounded corners for image; number of pixels should be the same as used for the parent Camera block */
}

Spoiler: show

Code: Select all

blocks["cameras"] = {
        type: "camera",
        cameras: [
                {
                        title: "Garage",
                        imageUrl: "http://192.xxxxxxxxx/picture/1/current/",
                        videoUrl: "http://192.xxxxxxxxx",
                },
                {
                        title: "Garten",
                        imageUrl: "http://192.xxxxxxxxxx/picture/2/current/",
                        videoUrl: "http://192.xxxxxxxxxx",
                },
        ],
        width: 6,
        height: 250,
        refresh: 0.5,
        traytimeout: 3,
        slidedelay: 3,
        forcerefresh: 1,
}

Bildschirmfoto vom 2020-10-21 07-40-14.png (99.02 KiB) Viewed 2242 times

[lzwfkv]

Well, the image size seems to be correct (not bigger than the block size): the rounded size is simply not applied as expected, because you are using grouped cameras into a single block definition and, in that case, dashticz's code creates separate blocks named with camera_0, camera_1, etc.. (data-id), instead of using the defined block's name as in the case of single camera blocks.
So, what you can do is to define the rounded size in custom.css for every blocks of type "camera", i.e. having attached a "camera" css class:

Code: Select all

.camera { /*use the name of your Camera Block, instead of ipcam */
  padding: 0px !important; /* image frame aligned to block's box borders */
}
.camera img { /*use the name of your Camera Block, instead of ipcam */
  border-radius: 200px; /* Rounded corners for image; number of pixels should be the same as used for the parent Camera block */
}

or define the rounded size attributes in custom.css for specific "camera_x" blocks if you want to apply the rounded size to them only, i.e.:

Code: Select all

[data-id='camera_0'].camera { /*use the name of your Camera Block, instead of ipcam */
  padding: 0px !important; /* image frame aligned to block's box borders */
}
[data-id='camera_1'].camera img { /*use the name of your Camera Block, instead of ipcam */
  border-radius: 200px; /* Rounded corners for image; number of pixels should be the same as used for the parent Camera block */
}
[data-id='camera_1'].camera { /*use the name of your Camera Block, instead of ipcam */
  padding: 0px !important; /* image frame aligned to block's box borders */
}
[data-id='camera_1'].camera img { /*use the name of your Camera Block, instead of ipcam */
  border-radius: 200px; /* Rounded corners for image; number of pixels should be the same as used for the parent Camera block */
}

[sailmich]

.camera { /*use the name of your Camera Block, instead of ipcam */
padding: 0px !important; /* image frame aligned to block's box borders */
}
.camera img { /*use the name of your Camera Block, instead of ipcam */
border-radius: 200px; /* Rounded corners for image; number of pixels should be the same as used for the parent Camera block */
}

I'm not sure according to my css above the block name is cameras so I used

Code: Select all

.cameras {
padding:0px !Important;
}
.cameras img {
border-radius:200px;
}

same result. Tried the same with your second solution with same result. I tried also https://www.w3schools.com/css/tryit.asp ... ze_contain without success.

[Lokonli]

.camera { /*use the name of your Camera Block, instead of ipcam */
padding: 0px !important; /* image frame aligned to block's box borders */
}
.camera img { /*use the name of your Camera Block, instead of ipcam */
border-radius: 200px; /* Rounded corners for image; number of pixels should be the same as used for the parent Camera block */
}

I'm not sure according to my css above the block name is cameras so I used

Code: Select all

.cameras {
padding:0px !Important;
}
.cameras img {
border-radius:200px;
}

same result. Tried the same with your second solution with same result. I tried also https://www.w3schools.com/css/tryit.asp ... ze_contain without success.

You have to use .camera instead of .cameras

.camera is the generic class for camera blocks. Your own block name .cameras is not applied.

[sailmich]

Thx a lot! Now it's working