Domoticz

Open source Home Automation System
https://forum.domoticz.com/

Dashticz IP Cameras - Features, Fixes & Updates

https://forum.domoticz.com/viewtopic.php?t=31607

Page 8 of 10

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Monday 20 July 2020 22:29
by heggink
Yes, brilliant! Cheers!!

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Monday 20 July 2020 23:54
by clinkadink
heggink wrote: ↑Monday 20 July 2020 22:29 Yes, brilliant! Cheers!!
Great, glad its working now :D

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Tuesday 21 July 2020 12:10
by webrazor
clinkadink wrote: ↑Monday 20 July 2020 11:09 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.

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Saturday 25 July 2020 8:35
by 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

Image

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]

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Saturday 25 July 2020 10:27
by EdwinK
Your OWM api is visible. Now others can use up your data.

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Saturday 25 July 2020 12:17
by madpatrick
EdwinK wrote: ↑Saturday 25 July 2020 10:27 Your OWM api is visible. Now others can use up your data.
Thanks. Looks like somebody adjusted it already for me.

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Thursday 13 August 2020 1:13
by 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.

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Friday 14 August 2020 16:09
by 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?

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Monday 17 August 2020 22:37
by 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.)

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Tuesday 18 August 2020 17:19
by Brutus
buck wrote: ↑Thursday 02 July 2020 21:00 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.

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Tuesday 18 August 2020 20:14
by Lokonli
Brutus wrote: ↑Tuesday 18 August 2020 17:19
buck wrote: ↑Thursday 02 July 2020 21:00 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?

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Tuesday 18 August 2020 20:25
by Brutus
@Lokonli,

You solved it! Thanks for the quick solution!

Greetings

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Tuesday 01 September 2020 15:38
by 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
Configuration
1.png (11.42 KiB) Viewed 2508 times
Poor performance v3.5 master and v3.5.2 beta
Poor performance
Poor performance
2.png (94.45 KiB) Viewed 2508 times
Good performance v3.4.9.1 beta
Good performance
Good performance
3.png (90.05 KiB) Viewed 2508 times


Thanks in advance!

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Tuesday 20 October 2020 21:26
by 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.

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Wednesday 21 October 2020 5:52
by lzwfkv
sailmich wrote: ↑Tuesday 20 October 2020 21:26 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 */
}

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Wednesday 21 October 2020 7:52
by 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
Bildschirmfoto vom 2020-10-21 07-40-14.png (99.02 KiB) Viewed 2249 times

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Wednesday 21 October 2020 10:10
by 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 */
}

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Wednesday 21 October 2020 23:12
by 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.

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Friday 23 October 2020 20:23
by Lokonli
sailmich wrote: ↑Wednesday 21 October 2020 23:12
.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.

Re: Dashticz IP Cameras - Features, Fixes & Updates

Posted: Friday 23 October 2020 21:57
by sailmich
Thx a lot! Now it's working 😃
All times are UTC+01:00
Page 8 of 10

Powered by phpBB® Forum Software © phpBB Limited