NEW frontpage.html - request comments

[racquemis]

Awesome racquemis, works like a charm on my milight bulb and strips.
There seems to be a big lag now and then, but I can live with that!

Glad I could be of service
About the lag, I've only noticed it myself when the wifi connection is bad or when WMM QoS is enabled in modem (Kpn Xperiabox) The javascript itself shouldn't slow it down.

[G3rard]

HMTL Slider controls for RGBW lights (Mi-Light + Others)

Thanks for the slider controls. It's working great

Only thing I noticed with my Hue strip is that when I change the dim level, the colour always returns to white after 4 changes.
This is caused by

Code: Select all

c = 0;

in the startCountToWhite function.
If I change that to

Code: Select all

count = 0;

then it's only turning to white after pressing on the slider for some seconds.
Before that change the color returns to white after 4 clicks on the dim level.

In the function ChangeHue I changed

Code: Select all

newheu=newheu-360;

to

Code: Select all

newhue=newhue-360;

[racquemis]

Thanks for the bug fixes. i've edited the code in the post accordingly

[Dingetje2004]

PLaying with this sometime, but only get ?? in a cell if I get any.
Looking at he frontpage.html and the code it seems to be different in page.arry, but not sure

Edit: lamp switching works now, explanantion was not completely clear to me

Edit2: Scenes toegevoegd, maar dit door die hele riedel te kopieren en een extra pagearray aan te maken, kan dit evt. ook slimmer?

And btw, looks great so far

Gr8 Frontpage, got it all setup, but unfortunately I cannot toggle my switches, tried to look into different frontpage samples, but cannot find the answer. @Jannl; looked like you had the same issue at start. Plz can someone help me out?

Edit: downloaded latest frontpage, its in the www folder, set domoticz for local entry without password, floorplan is "0", picksup al statusses,

[stlaha2007]

It displayes the status of your switches, thats ok. But whats happening/not happening when turning one on or off? Is it protected (return as message!). Or just plain nothing?

Also have you looked at the switchtypes? You need to set them accordingly, see remark/comment above your list of devices switches...

Sent from my K00C using Tapatalk

[Dingetje2004]

Just nothing happens, no message at all. I Tried to set them accordingly. For example my switch to set the Livingroom lights:
['36', 'Status', 'cell7', 'Woonkamerverlichting', '1', '8'],
Or do I have to change something in the first lines? Thanks 4 ur help!

Code: Select all

<!-- Change the text for on/off switches -->
var icon_on = '<img src=icons/on.png>';
var icon_off = '<img src=icons/off.png>';
var txt_on = 'Aan';
var txt_off = 'Uit';
var txt_zonon = 'Uit'; <!-- Dicht -->
var txt_zonoff = 'In'; <!-- Open -->
var txt_zonstopped = 'Gestopt';
var txt_zonstop = '| |';
<!-- var txt_dim_plus = ' + '; -->
<!-- var txt_dim_min = ' - '; -->

<!-- Change the text displayed in PopUps -->
var txt_switch_protected = '\'Schakelaar is beveiligd\'';
var txt_switch_on = '\'Inschakelen\'';
var txt_switch_off = '\'Uitschakelen\'';
var txt_blind_up = '\'Zonnescherm uit\'';
var txt_blind_down = '\'Zonnescherm in\'';
var txt_blind_stop = '\'Zonnescherm stoppen\'';

var vplusmin_type_presence = 7;
var txt_presence_home = 'Thuis';
var txt_presence_away = 'Weg';

var vplusmin_type_contact = 8;
var txt_contact_open = 'Open';
var txt_contact_closed = 'Dicht';

<!-- Change the timeout of the PopUp -->
var switch_protected_timeout = '1500';
var switch_on_timeout = '1500';
var switch_off_timeout = '1500';
var camera_doorbell_timeout = '15400';

<!-- Value for ZWave dimmer when on-->
var idx_zdimmer = '171';
var z_dimmer = '';
var z_whichdimmer = '';
//var o_dimmer = '80'; //value 80 is for light in garden
//var o_whichdimmer = '';

<!-- Set values so colors can change -->
var temp_freeze = '0';
var temp_freeze_color = ';color:#0090ff;';
var humidity_max = '70';
var humidity_max_color = ';color:#0090ff;';
var color_on = ';color:#1B9772;';
var color_off = ';color:#E24E2A;';
var show_sonos_volume = true; <!-- show Sonos volume in desc text -->

<!-- Change idx of special items -->
var idx_FibaroWP = '1100';
var idx_Alarm = '11109';
var idx_BewegingF = '145';
var idx_ZonV = '110';
var idx_ZonA = '111';
var idx_Pi = '218';
var idx_PC = '216';
var idx_TV = '240';

var idx_water_meter = '1100';
var idx_doorbell = '204';

var IsNight = false;
var pageRefreshTime = 8000;

<!-- Text for vdesc -->
var desc_alarm_off = 'Alarm uit';
var desc_alarm_home = 'Alarm aan (thuis)';
var desc_alarm_away = 'Alarm aan (weg)';
var desc_sunrise = 'Zon op';
var desc_sunset = 'Zon onder';
var desc_showsunboth = ''; // used to show sunrise and sunset in vdesc
var txt_sunboth='';
var txt_sunset='Zon onder';
var txt_sunrise='Zon op';
var var_sunrise='';
var var_sunset='';
var desc_protected = '<img src=icons/lock-closed_w.png align=right style="margin:1.5px 3px 0px -10px">'; //shows lock picture if device is protected or when plusmin is 4

<!-- This triggers the camera PopUp when the doorbell is pressed -->
<!-- Text could be 'On', 'Group On' or 'Chime' -->
var doorbell_status = 'On';
var idx_doorbell = '204'; //dummy switch which goes on when doorbell rings, goes off after 10 seconds
var doorbell_cmd = "lightbox_open('camera1', 15400);"

// ############################################################################################################
// #### vvvvv   USER VALUES below vvvvv   #######
// ############################################################################################################

$(document).ready(function() {
    $.roomplan = 0; // define roomplan in Domoticz and create items below, don't use roomplan = 0, it will get all your devices, which might slow down domoticz.
    $.domoticzurl = "http://192.168.178.33:8080";

    // format: idx, value, label, description,
    // lastseen(1 when lastseen is wanted, 2 is only time),
    // plusmin button or protected (0 for empty, 1 for buttons, 2 for volume of Sonos, 4 for protected, 5 for zwave dimmer, 6 for protected when on, 7 for presence, 8 for open/closed),
    // [override css], [alarm value]
    $.PageArray = [
        ['0', 'Desc',               'cell1',    'Temp Binnen', '0', '0'], //Desc means show the sub cells
        ['7', 'Temp',             'cell1a',   'Binnen', '1', '0'], //Lastseen only from cell_a possible
        ['0', 'Humidity',         'cell1b',   'binnen', '0', '0'],
        ['0', 'Desc',               'cell2',    'Temp Twins', '0', '0'],
        ['141', 'Temp',             'cell2a',   'Temp Twins', '1', '0'],
        ['141', 'Humidity',         'cell2b',   'Temp Twins', '0', '0'],
        ['0', 'ForecastStr',       'cell3',    'webcam voordeur', '0', '0'],
        ['0', 'Desc',               'cell4',    'Temp Buiten', '0', '0'],
        ['25', 'Temp',             'cell4a',   'Temp Buiten', '1', '0'],
        ['25', 'Humidity',         'cell4b',   'Temp Buiten', '0', '0'],
        ['0', 'Desc',               'cell5',    'Boven','0', '0'],
        ['1143', 'Temp',             'cell5a',   'Boven','1', '0'],
        ['1143', 'Humidity',         'cell5b',   'Boven','0', '0'],

        ['37', 'Status',          'cell6',    'Keukenverlichting', '0', '8'],
        ['36', 'Status',           'cell7',    'Woonkamerverlichting', '1', '8'],
        ['447', 'Temp',             'cell8',    'Woonkamer', '1', '0'],
        ['319', 'Status',           'cell9',    'Verlichting Rechts','1','1'],
        ['372', 'Status',           'cell10',   'AppleTV 3','1','1'], //6 is protected when on

        ['33', 'Status',           'cell11',   'Voordeur','1', '4'],
        ['39', 'Status',          'cell12',   'Achterdeur','1', '4'],
        ['94', 'Status',           'cell13',   'Slaapkamer raam','1', '0'],
        ['95', 'Status',           'cell14',   'badkamer raam','1', '0'],
        //Level using for ZWave dimmer, vplusmin = 5 to start with level from z_dimmer
        //['177', 'Status',         'cell15',   'Tuin','1','0'],
        ['1012', 'Status',           'cell15',   'TV', 1, 1],

        ['11', 'CounterToday',     'cell16',   'Vandaag','1','0'],
        ['11', 'Usage',            'cell17',   'Electr. gebruik Nu','1','0'],
        //['0', 'Desc',             'cell18',   'Windrichting','0','0'],
        ['13', 'DirectionStr',      'cell18',   'Electriciteit vandaag','0','0'],
        //['13', 'DirectionStr',    'cell18b',  'Windrichting','0','0'],
        //['10', 'Status',          'cell18',   'iPhone 5s','1','4'],
        ['1299', 'Usage',            'cell19',   'Windmolen nu','1','0'],
        ['12', 'Data',     'cell20',   'Gas Verbruik vandaag','1','0'],

        ['204', 'status',          'cell21',   'Voordeurbel','1', '0'],
        ['0', 'Tijd',               'cell22',   'Tijd','0','0'],
        ['1003', 'Status',          'cell223',   'Buitenverlichting','1','1'],

        ['0', 'Temp',               'cell25',   'Temperatuur buiten (C)','0','0'],

        ['0', 'SunBoth',            'cell26',   'Dummy cel voor bepaling zon op en zon onder','0','0'],

        ['37', 'Status',            'cell00',   'IsDonker','0','0'],

        // Page 2
        ['0', 'Desc',               'cell2_1',  'Zon','0','0'],
        ['0', 'SunRise',            'cell2_1a', 'Zon op','1','0'],
        ['0', 'SunSet',             'cell2_1b', 'Zon onder','0','0'],
        ['0', 'Desc',               'cell2_2',  'Windrichting','0','0'],
        ['100', 'Data',             'cell2_2a', 'Windrichting','1','0'],
        ['101', 'Data',             'cell2_2b', 'Windsnelheid','0','0'],
        //['49','ForecastStr',      'cell2_3',  'Weersvoorspelling','0','0'],
        ['185', 'ForecastStr',        'cell2_3',  'Weersvoorspelling','0','0'],
        ['0', 'Desc',               'cell2_4',  'NAS CPU + HDD','0','0'],
        //['17','Data',             'cell2_4a', 'CPU','1','0'],
        //['13','Data',             'cell2_4b', 'HDD','0','0'],
        ['0', 'Desc',               'cell2_5',  'Temp + Lux F','1','0'],
        ['154', 'Data',             'cell2_5a', 'Temperatuur Fibaro','1','0'],
        ['147', 'Data',             'cell2_5b', 'Temperatuur Fibaro','1','0'],

        ['935', 'Status',               'cell2_6',  'RPi Zolder', 1 , 0],
        ['936', 'Status',            'cell2_7',  'RPi Meterkast', 1, 0], //vplusmin_type_contact],
        //['145','Data',            'cell2_8',  'Bewegingssensor F','1','4'],
        ['8', 'Data',               'cell2_8',  'HDD /','1','0', '', 20],
        ['10', 'Data',              'cell2_9',  'CPU Usage','1','0', 'border: 1px;', 10],
        ['33', 'Status',            'cell2_10', 'Led zolder','1','0'],

        ['12', 'Barometer',         'cell2_11', 'Barometer','1','0'],
        ['13', 'Speed',             'cell2_12', 'Windsnelheid','1','0'],
        ['902', 'Visibility',       'cell2_13', 'Zicht','1','0'],
        ['446', 'Data',             'cell2_14', 'Lux','1','0'],
        ['0', 'SunBoth',            'cell2_15', 'SunBoth','1','4'],

        ['616', 'Data',             'cell2_16', 'Verbruik - huidig','1','0'],
        ['139', 'Status',           'cell2_17', 'Droger','1','0'],
        ['218', 'Status',           'cell2_18', 'Raspberry Pi','1','4'],
        ['141', 'Status',           'cell2_19', 'IJskast','1','0'],
        ['142', 'Data',             'cell2_20', 'IJskast - huidig','1','0'],

        ['182', 'Data',             'cell2_21', 'Droger - totaal','1','0'], //CounterToday, Usage
        ['0', 'Tijd',               'cell2_22', 'Tijd','0','0'],
        ['181', 'Data',             'cell2_23', 'IJskast - totaal','1','0'],
        ['0', 'ForecastStr',        'cell2_25', 'Weersvoorspelling (FC)','0','0'],
    ];
    $.PageArray_Scenes = [
    //['5','Status',        'cell9',    'Lampen kamer','1','0'],
    // ['7','Status',        'cell13',   'Lamp achtertuin','1','0'],
    ];

// ############################################################################################################
// #### ^^^^^   USER VALUES above ^^^^^   #######
// ############################################################################################################

    RefreshData();
});

[G3rard]

Change

Code: Select all

['36', 'Status', 'cell7', 'Woonkamerverlichting', '1', '8'],

to

Code: Select all

['36', 'Status', 'cell7', 'Woonkamerverlichting', '1', '0'],

So the 8 into a 0. Then it should work.

[Dingetje2004]

Thanks G3rard, but unfortunately that does not help either Feel stupid now, not getting it to work. Really like your new Frontpage. Anything else I can try?

[G3rard]

What does the console (F12) in Chrome show?

And does it work when using the version from Github (I see there are some changes in the frontpage_settings.js)?

[jannl]

I think you better use g3rards. I mostly stopped developing, because it does what I want. But check the code. Chrck what g3rard says and add console log commands. I did most of the checks on a windows desktop before testing on an android tablet.

[Dingetje2004]

Thanks! Console Log says nothing.. no errors when I click on a button. Will do a fresh reinstall from Github this weekend, thanks 4 your help again. I Will let know the results and learnings!

Edit: did a fresh installation from github! It works now! Somehow I first installed an older version. Thanks 4 ur help again! Someday I hope I will be able to help others out 2!

[SwordFish]

[quote="racquemis"]HMTL Slider controls for RGBW lights (Mi-Light + Others)

Nice work. I followed your steps and have the sliders on my frontpage.
But when i slide it, it always goes back to the original state it was when i turn on the light also it won't dim or change color?
I have hue so in settings i used; ['42', 'Level', 'cell21', 'Led 1 keuken','0','100']

[teha]

I implemented the slide and color change for HUE light and it all work fine on the laptop

But I can't slide or change color on the iPad, something I missed?

[racquemis]

HTML5 sliders don't slide that well on touch devices. It should work if you just press on the position you want.
Also HTML5 sliders are implemented differently on different browsers. For example on one browser ( can't remember which) i noticed that the button press and release events were firing at the same time causing weird behaviour. If it doesn't work, the browser could be to blame.

I've tested the sliders control on the Edge browser, chrome and firefox on which they work fine.

@SwordFish it looks like javascript functions are not executed, on a pc check the network on your browsers developer tools.
Use the slider and check if it generates traffic

[SwordFish]

@SwordFish it looks like javascript functions are not executed, on a pc check the network on your browsers developer tools.
Use the slider and check if it generates traffic

I checked the consol when i used the slider. I give me a error.
Index:1 is the doctype of the index.html

Knipsel.PNG (22.93 KiB) Viewed 3565 times

[racquemis]

Looks like you copied the first part of the code in my instructions but not the second which includes all the functions.

[Heatrix12]

Nice work.

[SwordFish]

Looks like you copied the first part of the code in my instructions but not the second which includes all the functions.

I had placed the function code right under need the dimmer code. Now i moved it under the switch dimmer and it works.
Thanks for the help.

[denisj]

Hi there all,
is there possibility to use this frontpage also fron external of LAN network please ?

Thanks all
Denis

[JuanUil]

Hi there all,

I have a Foscam FI9900P camera and I am still not able to get the stream in this frontpage.
I have this code in my frontpage.html:

Code: Select all

<div id="frame">
	<div id="ls_cell3"></div>
	<div id="cell3"><img src="http://192.168.1.133:88/cgi-bin/CGIStream.cgi?cmd=snappicture&usr=User&pwd=Password"  onClick="lightbox_open('camera', 25400);" width="200px" class="camera" /></div>
	<!--  <div id="cell3"><img src="" onClick="lightbox_open('camera', 25400);" width="200px" class="camera" /></div> -->
	<div id="bcell3"></div>
	<div id="desc_cell3">Camera achter</div>
</div>

but I stil get webcam offline.
anybody any idea what I am doing wrong?

tnx for any help
Jan