Fullscreen issue with an iPad

[TroisSix]

Hi guys,
First, thanks a lot to the developpers for the great work to have a wonderful dashboard with Dashticz, I love it ^^

I have a fully functionning dashticz on my pc (with firefox) and quite weird for my iPad (safari, Kiosk, ...)

I use a dashboard with 3 screens:
- first one: buttons, graphs, meteo, cameras, blinds, temperatures, agenda, google maps for the traffic: all great
- second one with my cameras
- third one with a frame displaying my floorplan of Domoticz

On my computer, when loading the dashticz: it displays the first page, I can switch to the others pages without any issue, and I can see my flooplan on the page 3. Great.

On my old iPad 2:
- with Safari: the first page and the second one are displayed ok, but the third page which should display my floorplan is not working at all (see screenshot safari_page3_floorplan-nok.jpg)
- if I want the fullscreen:
- with Safari, I create a favorite on my welcome screen: when it loads, it jumps directly on the page 3 to display my floorplan in fullscreen, but I can't see the pages 1 and 2,
- if I use Kiosk Mode for iPad, it displays the pages 1 and 2, but the page 3 is empty, it doesn't display my fllorplan

My config:
- Domoticz stable 2020.2
- Dashticz stable 3.7

For my config.js, for my fllorplan, I have:

Code: Select all

// Frames
frames.floorplan = {
    frameurl: 'https://192.168.1.100:443/#/Floorplans',
    height: 695,
    width:12
}
...
//COLUMNS: Page 3
columns[71] = {}
columns[71]['blocks'] = [frames.floorplan]
columns[71]['width'] = 12;
...
//SCREEN: Page 3
screens['tablet'][3] = {}
screens['tablet'][3]['columns'] = [71]

If you have any suggestion to help me understand:
1/ why safari in fullscreen (shortcut on my home like an app) goes directly to the page 3 to display the floorplan in fullscreen without any possibility to switch on the pages 1 which should be displayed by default?
2/ why I have no floorplan of Domoticz in Kiosk? (same behaviour with other apps)

Thanks for your help

[Lokonli]

Can you post all your screen definitions?
You do something with screens['tablet'] what might cause that screen 1 and 2 are not displayed correctly.

[TroisSix]

Sure, this is my config.js:

Code: Select all

// https://dashticz.readthedocs.io/en/master/dashticzconfiguration.html
var config = {}
config['hide_topbar'] = 1;
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/bg9.jpg';
config['standby_after'] = 5;  //Enter standby mode after 5 minutes
config['start_page'] = '1';
config['enable_swiper'] = '2';
config['vertical_scroll'] = '2';
//config['auto_swipe_back_to'] = '1';
//config['auto_swipe_back_after'] = '0';
//config['auto_slide_pages'] = '0';
config['slide_effect'] = 'slide';
config['disable_googleanalytics'] = true;

config['garbage_company'] = 'xxx';
config['garbage_icalurl'] = '';
config['google_api_key'] = '';
config['garbage_calendar_id'] = '';
config['garbage_zipcode'] = 'xxxxx';
config['garbage_street'] = 'xxxxxx';
config['garbage_housenumber'] = 'xx';
config['garbage_housenumberadd'] = '';
config['garbage_maxitems'] = '3';
config['garbage_width'] = '12';

config['setpoint_min'] = '6';
config['setpoint_max'] = '30';
config['loginEnabled'] = 0;
config['disable_update_check'] = 0;
config['no_rgb'] = 1;
config['auto_positioning'] = 0;
config['use_favorites'] = 0;
config['disable_googleanalytics'] = 1;
config['last_update'] = 0;
config['security_button_icons'] = 0;
config['edit_mode'] = 0;
config['hide_seconds'] = 1;
config['hide_seconds_stationclock'] = 0;
config['owm_days'] = 1;
config['owm_min'] = 1;
config['use_fahrenheit'] = 0;
config['use_beaufort'] = 0;
config['translate_windspeed'] = 0;
config['hide_mediaplayer'] = 0;
config['garbage_hideicon'] = 0;
config['garbage_icon_use_colors'] = 0;
config['garbage_use_colors'] = 0;
config['garbage_use_names'] = 1;
config['garbage_use_cors_prefix'] = 1;

//Language
config['language'] = 'fr_FR';
config['speak_lang'] = 'fr_FR';
config['timeformat'] = 'DD/MM HH:mm'
config['calendarlanguage'] = 'fr';
config['calendarformat'] = 'dd D.MM HH:mm' //default: dd DD.MM HH:mm

//Domoticz
config['domoticz_ip'] = 'http://192.168.1.100:8080';
config['user_name'] = 'xxxxxx';
config['pass_word'] = 'xxxxxx';
config['app_title'] = 'Home';
config['room_plan'] = 'xx';
config['domoticz_refresh'] = '5';  //every 5 seconds
config['dashticz_refresh'] = '60'; //every 60 minutes






//Definition of blocks, buttons and frames
// https://dashticz.readthedocs.io/en/master/blocks/domoticzblocks.html

var blocks = {}
var buttons = {}
var frames = {}



blocks['separation'] = {
  type: 'blocktitle',
  title: ''
}




////////////////////   COLONNE 1 ////////////////////

//----------------------    Caméras    ----------------------
//https://dashticz.readthedocs.io/en/master/blocks/specials/cameras.html
blocks['Cams_RDC'] = {
    ...
}
blocks['cameras3'] = {
    type: "camera",
    cameras: [
        {
            //title: 'xxx',
            imageUrl: 'xxx',
            videoUrl: 'xxx'
        },
        {
            //title: 'xxx',
            imageUrl: 'xxx',
            videoUrl: 'xxx'
        },
        {
            //title: 'xxx',
            imageUrl: 'xxx',
            videoUrl: 'xxx'
        }
    ],
    width: 4,
    height: 70,
    refresh: 0.5,
    traytimeout: 3,
    slidedelay: 0, // 3 by default
    forcerefresh: 0
};
blocks['cameras4'] = {
    type: "camera",
    cameras: [
        {
            //title: 'xxx',
            imageUrl: 'xxx',
            videoUrl: 'xxx'
        },
        {
            //title: 'xxx',
            imageUrl: 'xxx',
            videoUrl: 'xxx'
        },
        {
            //title: 'xxx',
            imageUrl: 'xxx',
            videoUrl: 'xxx'
        },
        {
            //title: 'xxx',
            imageUrl: 'xxx',
            videoUrl: 'xxx'
        }    ],
    width: 6,
    height: 300,
    refresh: 0.5,
    traytimeout: 3,
    slidedelay: 0, // 3 by default
    forcerefresh: 0
};


//----------------------    Infos trafic Google Maps    ----------------------

config['gm_api'] = 'xxxxxxxxxxxx';
var maps = {}
//maps.location = { height:300, width:12, latitude:xxxx, longitude:xxxxx, zoom:11 } // north


//Trajet vers Boulot 
//https://www.domoticz.com/forum/viewtopic.php?f=61&t=11450
//https://maps.googleapis.com/maps/api/directions/json?origin=xxx,xxx&destination=xxx,xxx&key=xxx

blocks['Trajet_Boulot'] = {
    ...
}



//Compteur_Teleinfo
//https://dashticz.readthedocs.io/en/master/blocks/graphs.html#custom-graph
blocks['Graph_Teleinfo'] = {
    title: 'Téléinfo',
    devices: ['xxx'],
    width: 12,
    height: '200px'
}
blocks['Graph_Teleinfo_complet'] = {
    title: 'Téléinfo',
    devices: ['xxx'],
    custom : {
        "dernières heures": {
            range: 'day',
            filter: '6 hours',
            data: { compteur: 'd.v_xxx' }
        },
        "aujourd'hui": {
            range: 'day',
            filter: '24 hours',
            data: { compteur: 'd.v_xxx' }
        },
        "6 derniers mois": {
            range: 'year',
            filter: '6 months',
            data: { compteur: 'd.v_xxx' }
        }
    },
    width: 12,
    height: '200px'
}
blocks['Graph_Teleinfo_lite'] = {
    title: 'Téléinfo',
    devices: ['xxx'],
    graph: 'bar',
    custom : {
        "": {
            range: 'day',
            filter: '6 hours',
            data: { compteur: 'd.v_xxx' }
        }
    },
    datasetColors: ['yellow'],
    width: 12,
    height: '130px'
}
blocks['Graph_Teleinfo_2'] = {
    title: 'Téléinfo3',
    devices: ['xxx'],
    graph: 'bar',
    toolTipStyle: true,
    datasetColors: ['yellow', 'blue'],
    graph: 'line',
    /*legend: {
      'te_xxx' : 'Température',
      'hu_xxx' : 'Humidité'
    }*/
}
/*blocks['Graph_Teleinfo'] = {
    title: 'Téléinfo',
    devices: ['xxx'],
    width: 12,
    height: '200px',
    //graph: 'line',
    //aggregate: 'avg',
    legend: {
       'eu_xxx' : 'Consommation'
    }
}*/




////////////////////   COLONNE 2   ////////////////////

//----------------------    Météo    ----------------------
//https://dashticz.readthedocs.io/en/master/blocks/specials/html.html
blocks['weatherwidget_io'] = {
    htmlfile: 'weatherwidget.html'
}

//OpenWeather
config['owm_api'] ='xxx';
config['owm_city'] = 'xxx';
config['owm_name'] = 'xxx';
config['owm_country'] = 'fr';
config['static_weathericons'] = 1;
config['owm_days'] = 1;
config['owm_lang'] = 'fr';
config['owm_min'] = 1;
config['owm_cnt'] = '5';
config['owm_min'] = true;
config['owm_days'] = true;

//----------------------    Températures intérieures    ----------------------
//https://dashticz.readthedocs.io/en/master/blocks/specials/dial.html
blocks['Temp_Sejour'] = {
    idx: 'xxx_1',
    title: 'Séjour',
    image : 'perso/living_room2.png',
    width: 4,
    popup: 'Temp_Sejour_popup'
}
blocks['Temp_Sejour_popup'] = {
    title: 'Température du séjour',
    devices: ['xxx'],
    toolTipStyle: true,
    datasetColors: ['yellow', 'blue'],
    graph: 'line',
    legend: {
      'te_xxx' : 'Température',
      'hu_xxx' : 'Humidité'
    }
}
blocks['Temp_Mezza'] = {
    ...
}
blocks['Temp_Parents'] = {
    idx: 'xxx_1',
    title: 'Parents',
    image : 'perso/bedroom1.png',
    last_update: false,
    width: 4
}
blocks['Temp_MyBoy'] = {
    ...
}
blocks['Temp_MyGirl'] = {
    ...
}
blocks['Temp_Bureau'] = {
    ...
}



//----------------------    Volets    ----------------------
blocks['Fav_Matin_Maison'] = {
    ...
}
blocks['Fav_Matin_4'] = {
    ...
}
blocks['Volets_MAISON'] = {
    ...
}
blocks['Volets_Sejour'] = {
    idx: xx,
    title: 'Séjour',
    imageOn : 'perso/volets_ouverts.png',
    imageOff : 'perso/volets_fermes.png',
    width: 4
}
blocks['Volet_Parents'] = {
    xxx
}
blocks['Volet_SDJeux'] = {
    xxx
}
blocks['Volet_MyBoy'] = {
    xxx
}
blocks['Volet_MyGirl'] = {
    xxx
}
blocks['Volet_terrasse'] = {
    xxx
}
blocks['Volet_cote'] = {
    xxx
}
blocks['Volet_rue'] = {
    xxx
}




////////////////////   COLONNE 3   ////////////////////

//----------------------    Google calendar     ----------------------
blocks['calendrier_Google'] = {
    type: 'calendar',
    layout: 1,
    maxitems: 5,
    color: 'blue',
    emptytext: '-',
    //url: 'https://calendar.google.com/calendar/embed?src=_REDACTED_&ctz=Europe%2FParis',
    icalurl: 'https://calendar.google.com/calendar/ical/xxxxx%40gmail.com/private-xxx/basic.ics',
    holidayurl: 'https://cache.media.education.gouv.fr/ics/Calendrier_Scolaire_Zone_A.ics',
    icon: '',
    dateFormat: 'dd D.MM',
    startonly: true,
    lastweek: false,
    isoweek: true,
    width: 12
}



//----------------------    Garage    ----------------------
//Garage: 'Telco_garage','Porte_garage'
blocks['Telco_garage'] = {
    xxx
}
blocks['Porte_garage'] = {
    xxx
}

var tvguide = {}
    tvguide.npo = { key:'tvnpo', image: '../custom/img/tv.png', width:12, channels: [1,2,3,6], maxitems: 5 }




//Domoticz
//The first button will open a popup window with the Domoticz floorplan.
//The second button will slide to the second screen.
//The second screen contains the Domoticz floorplan in a frame.
buttons.floorplan = {
  width:3,
  title:'Floor plan',
  url: 'https://192.168.1.100:443/#Floorplans'
}
buttons.switchToFlooplan = {
  width: 2,
  title:"Dz",
  slide:3
}
// Frames
frames.floorplan = {
    frameurl: 'https://192.168.1.100:443/#/Floorplans',
    height: 695,
    width:12
}


//Definition of columns and screens
var columns = {}
var screens = {}

////////////////////////    browser    ////////////////////////
// 1936 x 1066 (outer window size) and 1920 x 948 (inner window size)
screens['default'] = {}
screens['default']['maxwidth'] = 1936;
screens['default']['maxheight'] = 1066;
//COLUMNS: Page 1
columns[11] = {}
columns[11]['blocks'] = ['cameras3',   maps.location,   'Graph_Teleinfo_lite']
columns[11]['width'] = 4;
columns[12] = {}
columns[12]['blocks'] = ['weatherwidget_io',   'Temp_Sejour','Temp_Mezza','Temp_Parents','Temp_MyBoy','Temp_MyGirl','Temp_Bureau',   'Volets_Sejour','Volet_Parents','Volet_SDJeux','Volet_MyBoy','Volet_MyGirl', 'separation','Volet_terrasse','Volet_cote','Volet_rue']
columns[12]['width'] = 4;
columns[13] = {}
columns[13]['blocks'] = ['clock','sunrise',   'calendrier_Google',   'Trajet_Boulot','Porte_garage',   'Cams_RDC','Telco_garage',   'Fav_Matin_4','Volets_MAISON',   buttons.switchToFlooplan]
columns[13]['width'] = 4;
//COLUMNS: Page 2
columns[21] = {}
columns[21]['blocks'] = ['cameras4']
columns[21]['width'] = 12;
//COLUMNS: Page 2
columns[31] = {}
columns[31]['blocks'] = [frames.floorplan]
columns[31]['width'] = 12;

//SCREEN: Page 1
screens['default'][1] = {}
screens['default'][1]['background'] = 'bg9.jpg';
screens['default'][1]['columns'] = [11,12,13]
//SCREEN: Page 2
screens['default'][2] = {}
screens['default'][2]['columns'] = [21]
//SCREEN: Page 3
screens['default'][3] = {}
screens['default'][3]['columns'] = [31]


////////////////////////    iPad    ////////////////////////
screens['tablet'] = {}
screens['tablet']['maxwidth'] = 1024;
screens['tablet']['maxheight'] = 768;
//COLUMNS: Page 1
columns[51] = {}
columns[51]['blocks'] = ['cameras3',   maps.location,   'Graph_Teleinfo_lite','Graph_Teleinfo_2']
columns[51]['width'] = 4;
columns[52] = {}
columns[52]['blocks'] = ['weatherwidget_io',   'Temp_Sejour','Temp_Mezza','Temp_Parents','Temp_MyBoy','Temp_MyGirl','Temp_Bureau',   'Volets_Sejour','Volet_Parents','Volet_SDJeux','Volet_MyBoy','Volet_MyGirl', 'separation','Volet_terrasse','Volet_cote','Volet_rue']
columns[52]['width'] = 4;
columns[53] = {}
columns[53]['blocks'] = ['clock','sunrise',   'calendrier_Google',   'Trajet_Boulot','Porte_garage',   'Cams_RDC','Telco_garage',   'Fav_Matin_4','Volets_MAISON',   buttons.switchToFlooplan]
columns[53]['width'] = 4;
//COLUMNS: Page 2
columns[61] = {}
columns[61]['blocks'] = ['cameras4']
columns[61]['width'] = 12;
//COLUMNS: Page 3
columns[71] = {}
columns[71]['blocks'] = [frames.floorplan]
columns[71]['width'] = 12;

//SCREEN: Page 1
screens['tablet'][1] = {}
screens['tablet'][1]['columns'] = [51,52,53]
//SCREEN: Page 2
screens['tablet'][2] = {}
screens['tablet'][2]['columns'] = [61]
//SCREEN: Page 3
screens['tablet'][3] = {}
screens['tablet'][3]['columns'] = [71]



////////////////////////    Standby    ////////////////////////
var columns_standby = {}

columns_standby[1] = {}
columns_standby[1]['blocks'] = ['clock','weather_owm']
columns_standby[1]['width'] = 12;

[HansieNL]

You use https (port 443) for your floorplan. Have you tried if it works with http (port 8080)?

[TroisSix]

Yes, good point @HansieNL

I tried it and yes I can now see the flooplan within Safari or Safari as an app (shortcut on the home page)
Why is it working with http and not https?

But I have a - domoticz offline - with Kiosk Browser, Kiosk Pro or CK Free (I am searching for a fullscreen app working with Dashticz + Domoticz)

[TroisSix]

I upgraded to the latest beta, and he bug is resolved, it is working fine now either in Safari or Kiosk

I still have my question: is there a way to secure dashticz with https and domoticz with a https instead of http?