Dashticz - [BETA] Function - Sortable blocks

[robgeerts]

BETA BETA BETA

It would be a lot easier to move the blocks around on your screen to configure your ideal dashboard!
Thats why I started creating this new function, download the beta from Github and add the following variable on top of CONFIG.js:

Code: Select all

var _EDIT_MODE = true;

Then, reload Dashticz, wait 2 seconds and move the blocks with your mouse...

[Trigun]

Great work Rob, dashticz is truly amazing! It would be a nice feature for domoticz to add to the install package as being the standard dashboard for it.


Sent from my iPhone using Tapatalk

[klaasnicolaas]

I think that a lot of people loves this function Makes it much easier to organise your own dashboard.

Great work Rob!

[robgeerts]

Thanks!
Next step is to open a window to add new blocks wich you didnt have already on your dashboard...

[EdwinK]

Looks like you did a lot of changes today.

[Jonb]

Very very nice work! Finaly it’s there a lot of work !

[EdwinK]

When trying to do this, the following code shows, where some settings are changed to 'UNKNOWN', including the calendar

Code: Select all

var columns = {}

columns[bar] = {};
columns[bar]['blocks'] = ['clock','sunrise','settings'];

columns[1] = {};
columns[1]['blocks'] = ['weather',113,140,128,'180_2','139_3',129,141,'177_1','175_1','176_1','178_1'];
columns[1]['blocks'] = 5;

columns[2] = {};
columns[2]['blocks'] = [167,51,99,125,52,53,55,56,57];
columns[2]['blocks'] = 5;

columns[3] = {};
columns[3]['blocks'] = [185,buttons.UNKNOWN,buttons.UNKNOWN,'garbage'];
columns[3]['blocks'] = 2;

columns[bar] = {};
columns[bar]['blocks'] = ['clock','sunrise','settings'];

columns[4] = {};
columns[4]['blocks'] = [buttons.UNKNOWN];
columns[4]['blocks'] = 6;

columns[5] = {};
columns[5]['blocks'] = ['',buttons.UNKNOWN];
columns[5]['blocks'] = 6;

columns[bar] = {};
columns[bar]['blocks'] = ['clock','sunrise','settings'];

columns[6] = {};
columns[6]['blocks'] = ['UNKNOWN',48,49,'UNKNOWN',130,131];
columns[6]['blocks'] = 5;

columns[7] = {};
columns[7]['blocks'] = ['s2'];
columns[7]['blocks'] = 2;

columns[8] = {};
columns[8]['blocks'] = ['UNKNOWN',134,136,137,138,132,133,135];
columns[8]['blocks'] = 5;

columns[bar] = {};
columns[bar]['blocks'] = ['clock','sunrise','settings'];

columns[9] = {};
columns[9]['blocks'] = [143,144];
columns[9]['blocks'] = 6;

columns[10] = {};
columns[10]['blocks'] = ];
columns[10]['blocks'] = 6;

[robgeerts]

Make sure you have 'key' defined:

Code: Select all

buttons.nos = {key: 'nos',  width:12, icon: 'fa-newspaper-o', title: 'Nos', url: 'http://www.nos.nl'}

In this case its 'nos', its always the same as the word after buttons. (buttons.nos).

[EdwinK]

So no more buttons.webcam, just webcam?

[robgeerts]

No, still use buttons.webcam but add key:'webcam' lik in my example.

What are the UNKNOWN-devices in column 6 and 8?

[robgeerts]

Already a new BETA version with some small fixes.
Instead of opening the popup (with new code) immediately after a change, you have to push the save-button on the bottom right of your screen.

[EdwinK]

O, 6 and 8 are blocktitles.

[robgeerts]

Fixed in latest beta!

[EdwinK]

I just removed all the blocktitles.

Still can't get the UNKNOWN to go away. I do believe I've got everything as you said.

[robgeerts]

Whats you current config? (complete file)

[vgr2]

save changes is not working on my side

[EdwinK]

Whats you current config? (complete file)

Code: Select all

var _EDIT_MODE = true;

var config = {}
config['domoticz_ip'] = 'http://192.168.0.10:8084';
config['app_title'] = 'ControlCenter';
config['domoticz_refresh'] = '15';
config['dashticz_refresh'] = '60';
config['default_news_url'] = 'http://www.nu.nl/rss/algemeen';
config['news_scroll_after'] = '7';
config['standby_after'] = 'false';
config['auto_swipe_back_to'] = 1;
config['auto_swipe_back_after'] = 0;
config['auto_slide_pages'] = 0;
config['slide_effect'] = 'slide';
config['standard_graph'] = 'day';
config['language'] = 'en_US';
config['timeformat'] = 'YY-MM-DD HH:mm';
config['calendarformat'] = 'dd DD.MM HH:mm';
config['calendarlanguage'] = 'nl_NL';
config['calendarurl'] = 0;
config['boss_stationclock'] = 'RedBoss';
config['gm_api'] = '*****';
config['gm_zoomlevel'] = '11';
config['gm_latitude'] = '51.860067';
config['gm_longitude'] = '4.412692';
config['wu_api'] = '17318c1fc1678195';
config['wu_city'] = 'Rhoon';
config['wu_name'] = 0;
config['wu_country'] = 'NL';
config['idx_moonpicture'] = 1;
config['switch_horizon'] = 0;
config['host_nzbget'] = 0;
config['spot_clientid'] = '*****–';
config['garbage_company'] = 'recyclemanager';
config['garbage_icalurl'] = 0;
config['garbage_zipcode'] = '';
config['garbage_street'] = '';
config['garbage_housenumber'] = '27';
config['garbage_maxitems'] = '4';
config['garbage_width'] = '12';
config['selector_instead_of_buttons'] = 1;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['last_update'] = 0;
config['hide_topbar'] = 0;
config['hide_seconds'] = 0;
config['hide_seconds_stationclock'] = 0;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 1;
config['translate_windspeed'] = 0;
config['static_weathericons'] = 0;
config['hide_mediaplayer'] = 0;
config['garbage_hideicon'] = 0;

var _USE_DUTCH_TRAFFICINFO		= false;
var _USE_DUTCH_TRAININFO		= false;
var _BACKGROUND_IMAGE			= 'background.jpg';
//var tvguide = {}
//tvguide.dutch = { key:'dutch', icon: 'fa-television', width:12, channels:[1,2,3,4,31,46,92], maxitems: 10 }

// Afvalwijzer
var trashnames = {}
trashnames['Gft']			= 			'GFT';
trashnames['Pmd']			= 			'Plastic';
var trashcolors 			= {}
trashcolors['Gft'] 			= 			'Green';
trashcolors['Pmd'] 			= 			'Orange';
trashcolors['Papier'] 		= 			'Blue';
trashcolors['Restafval'] 	=			'Red';
var _DO_NOT_USE_COLORED_TRASHCAN = false

// Calendar 
var calendars = {}
calendars.business = { url: 'https://calendar.google.com/calendar/', icon:'fa-calendar', maxitems: 5, color:'red',icalurl: 'https://*****/basic.ics' }
calendars.private = { icon: 'fa-calendar', maxitems: 5, color:'green',icon:'fa-calendar', color:'green', icalurl: 'https://*****/basic.ics' }

calendars.combined = {}
calendars.combined.maxitems = 10 ;
calendars.combined.    calendars = [
   { color:'white',calendar:calendars.business }, 
   { color:'green',calendar:calendars.private }
]
calendars.combined.url = 'https://calendar.google.com/calendar';

/*
// OV
var publictransport = {}
publictransport.metro= { station: 'rhoon/metrostation-rhoon', show_lastupdate:true, provider: '9292-metro', icon: 'subway', results: 5 };
publictransport.train= { station: 'station-rotterdam-centraal',show_lastupdate:true, provider: '9292-train', icon: 'train', results: 5 };
publictransport.tb= { station: 'station-rotterdam-centraal', show_lastupdate:true, provider: '9292-tram-bus', icon: 'train', results: 5 };
*/

// buttons
var buttons = {}
buttons.moon = {width:12, isimage:true, refreshimage:60000, image: 'moon'}
buttons.buienradar = {width:6, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=285&h=256', url: 'http://www.buienalarm.nl/widget/graphic?lat=51.860067&lon=4.412692&title=RHOON&color=4395c7'}
// cam 
buttons.webcam = {width:12, isimage:true, refresh:2000, image: 'http://192.168.0.115:1024/shot.jpg', url: 'http://192.168.0.115:1024/video'}

//var _CLIENTID_SPOTIFY = '*********–';

//CUSTOM POSITIONING:

var blocks = {}

blocks['blocktitle_1'] = {}
blocks['blocktitle_1']['type'] = 'blocktitle';
blocks['blocktitle_1']['title'] = 'Schakelaars';
blocks['blocktitle_2'] = {}
blocks['blocktitle_2']['type'] = 'blocktitle';
blocks['blocktitle_2']['title'] = 'Weer';
blocks['blocktitle_4'] = {}
blocks['blocktitle_4']['type'] = 'blocktitle';
blocks['blocktitle_4']['title'] = 'Openbaar Vervoer';
blocks['blocktitle_5'] = {}
blocks['blocktitle_5']['type'] = 'blocktitle';
blocks['blocktitle_5']['title'] = 'Media - Film';
blocks['blocktitle_6'] = {}
blocks['blocktitle_6']['type'] = 'blocktitle';
blocks['blocktitle_6']['title'] = '';
blocks['blocktitle_8'] = {}
blocks['blocktitle_8']['type'] = 'blocktitle';
blocks['blocktitle_8']['title'] = 'Media - Radio';
blocks['blocktitle_9'] = {}
blocks['blocktitle_9']['type'] = 'blocktitle';
blocks['blocktitle_9']['title'] = 'Synology usage';
blocks['blocktitle_10'] = {}
blocks['blocktitle_10']['type'] = 'blocktitle';
blocks['blocktitle_10']['title'] = 'Synology Drives';
blocks['blocktitle_11'] = {}
blocks['blocktitle_11']['type'] = 'blocktitle';
blocks['blocktitle_11']['title'] = 'Agenda';

blocks[113] = {}
blocks[113]['width'] = 6;
blocks[120] = {}
blocks[120]['icon'] = 'fa-moon-o';
blocks[120]['title'] = 'Maan';
blocks[120]['switch'] = true;
blocks[123] = {}
blocks[123]['icon'] = 'fa-moon-o';
blocks[123]['title'] = 'Maan fase';
blocks[123]['width'] = 12;
blocks[123]['switch'] = true;
blocks[129] = {}
blocks[129]['switch'] = true;
blocks[132] = {}
blocks[132]['switch'] = true;
blocks[133] = {}
blocks[133]['switch'] = true;
blocks[134] = {}
blocks[134]['icon'] = 'fa-hdd-o';
blocks[134]['title'] = 'HDD 1 / backup';
blocks[134]['switch'] = true;
blocks[135] = {}
blocks[135]['title'] = 'Virt. Memory';
blocks[135]['switch'] = true;
blocks[136] = {}
blocks[136]['icon'] = 'fa-hdd-o';
blocks[136]['switch'] = true;
blocks[137] = {}
blocks[137]['icon'] = 'fa-hdd-o';
blocks[137]['switch'] = true;
blocks[138] = {}
blocks[138]['icon'] = 'fa-hdd-o';
blocks[138]['switch'] = true;
blocks['139_1'] ={}
blocks['139_1']['title'] = 'Temperatuur';
blocks['139_2'] = {}
blocks['139_2']['title'] = 'Luchtvochtigheid';
blocks['139_3'] = {}
blocks['139_3']['title'] = 'Baro';
blocks[140]= {}
blocks[140]['switch'] = true;
blocks[140]['width'] = 6;
blocks[141]= {}
blocks[141]['switch'] = true;
blocks[142] = {}
blocks[142]['width'] = 6;
blocks[142]['icon'] = 'fa-trash-o';
blocks[167] = {}
blocks[167]['width'] = 4;
blocks[167]['icon'] = 'fa-bulb';
blocks['175_1'] = {}
blocks['175_1']['title'] = 'SLK Temp';
blocks['176_1'] = {}
blocks['176_1']['title'] = 'Buiten Temp';
blocks['179_1'] = {}
blocks['179_1']['title'] = 'HSK Temp';
blocks['179_1']['width'] = 12; 
blocks['180_2'] = {}
blocks['180_2']['title'] = 'Vochtigheid';
blocks[181] = {}
blocks[181]['icon'] = 'fa-bolt';
blocks[181]['width'] = 4;
blocks[181]['switch'] = true;
blocks[184] = {}
blocks[184]['icon'] = 'fa-male';
blocks[184]['width'] = 12;
blocks[184]['title'] = 'Edwin';
blocks[184]['protected'] = true;
blocks['183_3'] = {}
blocks['183_3']['title'] = 'Barometer';
blocks[185] = {}
blocks[185]['width'] = 12;
blocks['s2'] = {}
blocks['s2']['width'] = 12;
blocks['news_1'] = {}
blocks['news_1']['feed'] = 'http://www.nu.nl/rss/Algemeen';

//defining number of columns, their contents en widths
//width can be a number 1 to 12, but total widths of all columns should always be 12
var columns = {}

//if you want to use multiple screens, use the code below:
var screens = {}
screens[1] = {}
screens[1]['background'] = 'background.jpg';
screens[1]['columns'] = [1,2,3]

screens[2] = {}
screens[2]['background'] = 'background.jpg';
screens[2]['columns'] = [4,5] //blocks can be size 12

screens[3] = {}
screens[3]['background'] = 'background.jpg';
screens[3]['columns'] = [6,7,8] 

screens[4] = {}
screens[4]['background'] = 'background.jpg';
screens[4]['columns'] = [9,10]

 // 57 - 62 reserve KaKU


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

// Screen 1
columns[1] = {}
columns[1]['blocks'] = 
['weather',113,140,128,'180_2','139_3',129,141,'177_1','175_1','176_1','178_1']
columns[1]['width'] = 5;

columns[2] = {}
columns[2]['blocks'] = [167,51,99,125,52,53,55,56,57] 
columns[2]['width'] = 5; 

columns[3] = {}
columns[3]['blocks'] = [buttons.webcam,buttons.moon,185,'garbage']
columns[3]['width'] = 2; 

// screen 2
columns[4] = {}
columns[4]['blocks'] = [buttons.webcam]
columns[4]['width'] = 6; 

columns[5] = {}
columns[5]['blocks'] = [calendars.combined,buttons.buienradar]
columns[5]['width'] = 6;   

// Screen 3
columns[6] = {}
columns[6]['blocks'] = [48,49,130,131]
columns[6]['width'] = 5;  

columns[7] = {}
columns[7]['blocks'] = ['s2']
columns[7]['width'] = 2; 

columns[8] = {}
columns[8]['blocks'] = [134,136,137,138,132,133,135]
columns[8]['width'] = 5; 

// Screen 4
columns[9] = {}
columns[9]['blocks'] = [143,144]
columns[9]['width'] = 6; 

columns[10] = {} // here I test some things
columns[10]['blocks'] = []
columns[10]['width'] = 6; 


var columns_standby = {}
columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','currentweather_big',buttons.webcam]
columns_standby[1]['width'] = 12;

[robgeerts]

did you copy the code to CONFIG.js?
If yes, could you show me that code?

[robgeerts]

Change:

Code: Select all

// buttons
var buttons = {}
buttons.moon = {width:12, isimage:true, refreshimage:60000, image: 'moon'}
buttons.buienradar = {width:6, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=285&h=256', url: 'http://www.buienalarm.nl/widget/graphic?lat=51.860067&lon=4.412692&title=RHOON&color=4395c7'}
// cam 
buttons.webcam = {width:12, isimage:true, refresh:2000, image: 'http://192.168.0.115:1024/shot.jpg', url: 'http://192.168.0.115:1024/video'}

TO

Code: Select all

// buttons
var buttons = {}
buttons.moon = {key:'moon',width:12, isimage:true, refreshimage:60000, image: 'moon'}
buttons.buienradar = {key:'buienradar',width:6, isimage:true, refreshimage:60000, image: 'http://api.buienradar.nl/image/1.0/RadarMapNL?w=285&h=256', url: 'http://www.buienalarm.nl/widget/graphic?lat=51.860067&lon=4.412692&title=RHOON&color=4395c7'}
// cam 
buttons.webcam = {key:'webcam',width:12, isimage:true, refresh:2000, image: 'http://192.168.0.115:1024/shot.jpg', url: 'http://192.168.0.115:1024/video'}

[EdwinK]

Scrolling is back now