Gepland onderhoud: Elke nacht worden tussen ... 05.00 - 05.45 uur automatisch backups gemaakt en kunnen de Website en ook dit Domoticz Forum even offline zijn !

DomoticzFan Fromtpage maken Stap voor stap (1)

Stap voor stap handleiding voor het maken van dit ontwerp. (resolutie 1920x1080)
Gebruikersavatar
Domoticzfan
Site Admin
Site Admin
Berichten: 427
Lid geworden op: za mar 14, 2020 2:43 pm
Locatie: Hardenberg

DomoticzFan Fromtpage maken Stap voor stap (1)

Bericht door Domoticzfan »

--------------------------------------------------------------------------------------------------------------------------------------------
NIEUWE VERSIE BESCHIKBAAR
-

-
Dit is een eerder gebouwde versie van DomoticzFan Frontpage !
-
Inmiddels ben ik druk bezig om dit ontwerp opnieuw op te bouwen... ZIE VERSIE V3 !
-
Hoe je stap voor stap je eigen toutch screen scherm kunt maken kun je daar volgen......
-



--------------------------------------------------------------------------------------------------------------------------------------------

LET OP !
Om alle benodigde bestanden te kunnen downloaden moet je ingelogd zijn !

-
Als je een frontpage wilt maken zoals b.v. in onderstaand plaatje, volg dan eerst de informatie van Domoticz frontpage in het forum !
-
Afbeelding
-
Na de daar opgedane kennis kunnen we verder om bovenstaande te maken.
-
Het ontwerp is gemaakt voor de resolutie 1920x1080 px (HD)
-
Het meeste wat er op de pagina te zien is , is niets meer of minder dan gewoon html.
Daarover later , maar we gaan eerst even kijken naar het aangepaste blok rechts in beeld waarmee de bediening werkt.
Dit blok en ook de blokken op andere van mijn pagina`s zijn eigenlijk niets meer dan het voorbeeld van domoticz frontpage waarvan de cellen naar eigen idee zijn aangepast. Dat blok noem ik hier voor het gemak maar even 15x naar het aantal cellen.
In mijn ontwerp heeft het de naam t1-blokhome15xschakel (.html) gekregen
Zie hieronder.
-
Afbeelding
-
De file met dat blok kun je hieronder downloaden.
-
t1-blokhome15xschakel.zip
-

----------------------------------------------------------------------------------
Aanvulling.....
Om het blok goed te tonen heeft deze file een style sheet nodig waar naar verwezen wordt in de file hierboven. Deze css file die je nodig hebt vind je hieronder. Pak de file uit en plaats de file 15.css in de map CSS in Domoticz.
-
15CSS.zip
----------------------------------------------------------------------------------

-
Pak de zipfile uit en je hebt het eerste blok die je voorzichtig ! onderaan in de file met een editor kunt bewerken. Zelf gebruik ik altijd dreamweaver maar het kan ook goed met b.v. wordpad++ wat je gratis kunt downloaden.
Let op ! Als je de file nog op de computer hebt staan kan het zijn dat de blok nog niet goed getoond wordt. Dit komt omdat het script in deze file werwijst naar delen in het domoticz programma zelf. Wil je hem testen dan moet de file in de www map staan en je kunt hem dan vanuit de browsen aanroepen met b.v. (http://) jouwipnummer:8080/t1-blokhome-15xschakel.html
Als je de instellingen zoals roomplan0 , je ip adres , poortnummer hebt aangepast , kun je de ID`s van je apparaten in domoticz opzoeken en voorzichtig gaan plaatsen in de file onderaan bij de instellingen. Doe dit stap voor stap en controleer of het werkt. Als je alles ineens aanpast en het blijkt niet te werken is het veel moeilijker om te achterhalen waar de fout zit. Als alles goed is gegaan dan kun je jouw schakelaars nu bedienen via de pagina als je hem in je www mapje geplaatst hebt in de domoticz map. Je kunt nu al een beetje gaan spelen. :-)
Laat de rest van de file voorlopig zoals het is, en ook de naam van de file en de zwarte achtergrond van de pagina.
We gaan later dit blok op de juiste positie neerzetten op onze eigen homepage.

-
Die homepage waar we straks het blok in willen plaatsen gaan we nu maken.
-
Om je wat sneller op weg te helpen krijg je nu 2 zip files .

De eerste zip bevat alle plaatjes die je nodig hebt voor mijn frontpage.
Download de pics zipfile hieronder en pak de zipfile uit. Je hebt nu een mapje met de naam pics en daarin zitten de plaatjes.
Zet de complete map in de www map die in je domoticz map staat.
-
pics.zip
-
De tweede zipfile bevat de html pagina met daarin het kader waarin we alles gaan plaatsen en het knoppenmenu aan de linkerkant.
Download de t1-home file en pak de zip uit. Plaats de t1-home.html in de www map van domoticz.
-
t1-home.zip
-
Als je nu naar je file t1-home.html pagina gaat met de browser zie je vervolgens onderstaand venster.
-
Afbeelding
-
Dit is je nieuwe homepage die voornamelijk is opgebouwd met html, en waarin we stap voor stap de blokken gaan plaatsen die we willen gaan gebruiken. Je kunt met je editer b.v. Notepad++ een kijkje nemen in het script waarin we gaan werken, maar verander nog niets , anders zal wat we verder in deze tutorial gaan leren niet meer werken.
De reden dat de ik de t1 vermelding gebruik in al mijn pagina`s is om eventuele verschillende thema`s te kunnen bouwen en ik op die manier overzicht wil houden in mijn www map
Verander dit niet zomaar als je niet precies weet wat je aan het doen bent anders kloppen de paden niet meer van de pagina`s die onderling naar elkaar toelinken !!!

Je kunt de html pagina met de browser openen , maar de knoppen met tekst zullen nog niet werken, omdat deze pagina`s NU nog niet bestaan.

Om verder te gaan ga naar het forum......

DomoticzFan Fromtpage maken Stap voor stap (2)

Daar gaan we verder met de html pagina en gaan we de inhoud plaatsen. :-)



-
Je hebt niet voldoende permissies om de bijlagen van dit bericht te bekijken.
M.v.g. DomoticzFan.
Je moet ingelogd zijn om alle afbeeldingen te kunnen zien en files te kunnen downloaden !

Pi 3B+ met Domoticz 2020.2 ,
Z-wave ,RFXcom ,KAKU ,P1 ,
Homebridge ,Google Home ,
Google Nest Hub ,

Capady
1 bericht
1 bericht
Berichten: 1
Lid geworden op: za jun 06, 2020 10:03 pm
Locatie: Rotterdam

Re: DomoticzFan Fromtpage maken Stap voor stap (1)

Bericht door Capady »

In het bestand "t1-blokhome15xschakel" wordt er verwezen naar het bestand "15.css".
Na alles gedownload te hebben kan ik dit css-bestand niet vinden. Zie ik iets over het hoofd ?

m.v.g.

John

Gebruikersavatar
Domoticzfan
Site Admin
Site Admin
Berichten: 427
Lid geworden op: za mar 14, 2020 2:43 pm
Locatie: Hardenberg

Re: DomoticzFan Fromtpage maken Stap voor stap (1)

Bericht door Domoticzfan »

Ik kijk het even voor je na
M.v.g. DomoticzFan.
Je moet ingelogd zijn om alle afbeeldingen te kunnen zien en files te kunnen downloaden !

Pi 3B+ met Domoticz 2020.2 ,
Z-wave ,RFXcom ,KAKU ,P1 ,
Homebridge ,Google Home ,
Google Nest Hub ,

Gebruikersavatar
Domoticzfan
Site Admin
Site Admin
Berichten: 427
Lid geworden op: za mar 14, 2020 2:43 pm
Locatie: Hardenberg

Re: DomoticzFan Fromtpage maken Stap voor stap (1)

Bericht door Domoticzfan »

Bedankt voor de tip. Je hebt gelijk.

Alle andere blokken die je tegen komt hebben hun eigen css style boven in de pagina staan.
Het eerste blok waar alles mee begon had echter de css apart staan en stond er inderdaad niet bij in de instructies.
-
Hier de ontbrekende css file die je in de css map in Domoticz moet plaatsen. (Eerst uitpakken natuurlijk).
-
15.zip
- -
ik ga het ook aanpassen en bijplaatsen in de instructies.
Je hebt niet voldoende permissies om de bijlagen van dit bericht te bekijken.
M.v.g. DomoticzFan.
Je moet ingelogd zijn om alle afbeeldingen te kunnen zien en files te kunnen downloaden !

Pi 3B+ met Domoticz 2020.2 ,
Z-wave ,RFXcom ,KAKU ,P1 ,
Homebridge ,Google Home ,
Google Nest Hub ,

Terug naar “DomoticzFan-frontpage maken versie 1”