Pro-interfaces van controlesystemen "Smart Home. Systeem "Smart Home"

Server slimme woning - Dit is een "hersenen" -beheersysteem. Het implementeert en ondersteunt het werk van het hele netwerk. Genereert en verzendt de nodige signalen naar controllers die verantwoordelijk zijn voor het besturen van sensoren, alarm, klimaatregeling, andere functies en modi ingebed in software.

Servertypen

Het beheren van een slim huis wordt uitgevoerd vanaf de server. Het kan gecentraliseerd zijn (stationair) en gedecentraliseerd (kan op afstand werken).

Basisvereisten voor de server:

  • Stabiel werk.
  • Verplichte gegevensredundantie.
  • Controle versies van software.
  • De mogelijkheid om het functionele bij te werken en te verfijnen.
  • Snelle aanpassing in geval van falen.

De stationaire server die wordt geleverd met een slim huis is stabiel en heeft een brede functionaliteit, maar heeft ook enkele nadelen. Dit zijn de kosten en de noodzaak om een \u200b\u200bdupliceerapparaat te installeren, in geval van falen van het hoofdinstrument. Het belangrijkste nadeel kan worden beschouwd als de onmogelijkheid om het systeem op een afstand te beheersen.

Server en Web Server Smart Home Mid-object

Met de komst van tablet-pc's en smartphones werd het mogelijk om verschillende apparaten op afstand te beheersen, wat het leven sterk vereenvoudigt. Als het installeren van management slimme woning Op de database van de server met externe toegang is de interactie met het systeem een \u200b\u200borde van grootte efficiënter.

Raspberry PI 2-platform voor het bouwen van een Smart Home Web Server

Webserver voor Smart Home is een micro-, tabletcomputer of smartphone. Platform voor het kan elk apparaat zijn met een groot volume werkgeheugen (Raspberry PI 2 of Raspberry PI 3, AC500-ECO, ARDUINO), een krachtige processor en de mogelijkheid om toegang te krijgen tot het internet. Webserver Als onderdeel van het systeem biedt de Smart Home Visualisatie van het management via de browser.

Webserver voor Smart Home werkt op eenvoudig principe. Het mobiele apparaat werkt als de belangrijkste kernel, op afstand verzendt commando's. Software die onafhankelijk kan worden gekocht of voorgeschreven, wordt Android, Linux of Windows-apparaten In het dispatcherstation interactie met WiFi-controllers. De voordelen van het Web Block Smart Home is dat het niet alleen mogelijk is om systemen in het huis te beheren, maar ook om elke bewerking van buitenaf te produceren. Het is ook mogelijk om de afstand en opslag van gegevens op de cloud te configureren.

Smart Home Management-interface

Systeem functioneren is niet mogelijk zonder interface ( universele middelen controle). Het principe van zijn werk is gebaseerd op de mogelijkheid om toegang te krijgen tot het internet, dat wil zeggen, dit is een softwareplatform waarmee u alle binnenlandse huishoudelijk kunt beheren geautomatiseerde systemen. Ook biedt de interface van de Smart Home informatie-interactie en ondersteuning voor de werkende staat. Een dergelijk systeem is compatibel met elke pc of smartphone met verschillende platforms.

De interface van het Smart Home wordt individueel voor elke gebruiker gemaakt

IN modern systeem De Smart Home Web-interface maakt modulaire architectuur, gebouwd op PHP, CSS en JavaScript. Gespecificeerd in UI-plug-ins als HTML of CSS in de DLL-bronnen. Ze kunnen naar eigen goeddunken worden toegevoegd of gewijzigd. De geschatte interface-structuur ziet er als volgt uit:

  • Startpagina op het bureaublad. Hierop worden alle bedieningselementen weergegeven in de vorm van pictogrammen.
  • Plug-ins bevatten partities die zijn verdeeld in het systeem (om met de instellingen te werken) en op maat (voor directe controle van functies).

Een onafhankelijke creatie van een webinterface voor het beheren van een slimme huis wordt uitgevoerd met behulp van speciale online ontwerpers met een kant-en-klare data-pakket.

Hoe maak je een server voor een slim huis

Zelf maak de server eenvoudig genoeg. In de behuizing ongebruikte computer (Het is wenselijk om het model van 2006 vrij te geven) gemonteerd in volgorde van prioriteit:

  • power Unit;
  • koeler met verminderde ruisproductie;
  • moederbord met een moderne processor;
  • rAM, voldoen aan de vereisten van de processor;
  • sommige harde schijven (bij voorkeur NAS-systeem) en SATA-controller;
  • netwerkkaart met ondersteuning van de hostmodus;
  • wIFI-module.

Apparatuur kan worden gewijzigd afhankelijk van de vereisten. Vervolgens moet u de server configureren met behulp van full-featured services (het Linux-systeem is geschikt) en het installeren van software.

Onafhankelijke serverassemblage voor Smart Home genaamd Avrobot

Om een \u200b\u200bwebserver voor een slim huis te maken, is het genoeg om de juiste software te installeren die met gecontroleerde systemen communiceert (sensoren die verantwoordelijk zijn voor het werk van het controle-klimaat, het licht, enz.) Op een pc of smartphone.

27 maart 2015 om 15:18

Mijn slimme huis is op PLC en met een webinterface. DEEL 1. INLEIDING

  • Html,
  • SCADA.

Invoering

Er zijn veel artikelen over projecten over Habré slimme huizenmaar bijna allemaal waren er aan zelfgemaakte apparatuur en Chinese velgen. In mijn artikel wilde ik vertellen over een andere aanpak die laat zien hoe gemakkelijker projecten uitvoeren klaar oplossingen World Fabrikanten ( en het ziet er solide uit), evenals toont de mogelijkheid om apparatuur niet alleen in industriële faciliteiten te gebruiken, maar in de privé-bol. Het bleek symbiose van technologieën en automatisering. Aan de ene kant, met behulp van de PLC, die voornamelijk is ontworpen voor de behoeften van de industrie, waardoor taken van elke complexiteit mogelijk is, zonder beperkingen van harde algoritmen afgewerkte apparaten Smart Homes (bijvoorbeeld het gebruik van KNX-technologie) met HTML / JavaScript-webtechnologie biedt onbeperkte fantasievlucht om projecten uit te breiden.

Huidige kosten - 170 duizend roebel (oude euro).

Laten we beginnen.

Wat ik was bedacht

Verlichting en voeding beheren
- In principe wordt de besturing gedaan om aan / uit te schakelen, het dimmen wil niet en niet nodig;
- Ik wil beheren met verschillende zitplaatsenIk ging bijvoorbeeld naar de slaapkamer - ik heb de kroonluchter ingeschakeld, lag op het bed - ik heb gedrukt om de kroonluchter uit te schakelen. Als je vergeten bent het licht in de hal (of in het toilet ...) uit te schakelen, druk ik op de knop 'Draai het licht uit'. Handig;
- Klik bij het verlaten van het appartement op één knop - het wordt uitgeschakeld in het volledige appartementlicht, enz.;
- Lees de aflezing van de elektrische meter;
- ononderbroken voeding van appartementenbeheer en veiligheidssystemen;
- Zonder uitzondering moeten alle verlichtingsgroepen worden beheerd van PLC. In geval van brand moeten de socketgroepen worden losgekoppeld van de PLC in de machine - om de voeding in het appartement in noodgevallen uit te schakelen;
- Elke verlichtingsgroep moet naar het schild komen en door de dichtstbijzijnde schakelaar doorgeven naar het vermogen om de verlichtingscontrole in het gebruikelijke schema te rempen (als ik een appartement verkoop, zal ik alles nemen);
- in de gang, het verschaffen van een menselijke bewegingssensor om de verlichting + vast te leggen beveiligings alarm;
- Warme verdieping op het balkon, in het toilet, de badkamer, in de gang - met de mogelijkheid van controle, afhankelijk van de straattemperatuur, in de tijd.

Beheer verwarming en ventilatie
- Verwarmingsregeling - Een klep met een schijf is op elke batterij geïnstalleerd (voor temperatuurregeling, het is duidelijk om de temperatuur van de kamer te meten, het is noodzakelijk om temperatuursensoren te verschaffen);
- voorzien in de controle van airconditioners op het IR-kanaal (de huidige taakoplossing is nog niet gevonden, we nemen een VITU-paar interne blok Condeya aanvullend);
- Temperatuursensoren Street Temperature (Solar en niet zonnige kant);
- In winter Veel vaak zijn er twee problemen - het is koud en niets om te ademen. Oplossing om het toeleveringssysteem vast te stellen. Naast het beheer inlaatsysteem (Temperatuur in het kanaal, straatsensor temperaturen, drie verwarmingsstappen, ventilator);
- Management uitlaatfans (San knoop, badkamer).

Beschermalarm
De signalering van de invoerdeurstaat (archivering van de deurstatus - opening / sluitingstijd);
Inschakelen door de webinterface of via de lichtregelaar.

CCTV
Opnemen van de inlaatdeur van de camera, parkeerplaats op straat;
Archiveringsrecords op een externe server.

Uitrusting

- Aangezien ik aan de PLC van ABB gewend ben, werd het AC500-Eco-model (PM554-eth CPU met Ethernet CPU) geselecteerd als een hersenen;
- Dan ben ik al begonnen met het tellen van geld en ... het was noodzakelijk om de informatieweergaveomgeving te kiezen, met de mogelijkheid om informatie over het huis te geven. Er zijn veel opties, maar meestal is alles gebaseerd op niet-cross-platformoplossingen, wat niet geschikt is voor mij. Dat alles met de woorden SCADA en Web waren bij een scheepshriter. Ik moest een beetje onderhandelen, als gevolg daarvan werd besloten om het SCADA-systeem te gebruiken, maar een raamwerk met een groot functioneel voor HTML5. Kwam naar CSWORKS. Dit freemwork maakt het mogelijk om gratis te gebruiken met de beperking van 999 variabelen, 1 cliënt. Dat ik volledig tevreden was.
- Jung, Serie A werd gekozen als schakelaars en stopcontacten (lichte controle). Vanuit de plussen - kunnen ze maximaal 4 knoppen op één knop plaatsen (schakelaar zonder fixatie), ook is er een indicatie-LED's met een spanning 24V (deze spanning is standaard industriële automatiseringssysteemspanning). Deze functies hebben geen van de fabrikanten van elektrische installaties gezien (geen China tellen);

Begin van het werk

1. Werkwijze voor het plaatsen van verlichting. Elke groep komt rechtstreeks in de kast van de voeding. In de kast zijn er contactrors en relais voor controle. Reelspoelen en -schakelaars worden bestuurd vanuit PLC-signalen (DC24V). Om management te reserveren, gebruik ik contactors met handmatige bediening. De voedingsdraad maakte de schakelaar door de beker om de bedrading op het gebruikelijke schema te veranderen.

Handmatige controller zelf:

Het kabinet is geassembleerd en gemonteerd:

Terwijl ik hierboven schreef, kozen de schakelaars zonder fixaties met LED-indicatoren. Maximaal 4 knoppen, het is mogelijk om deze knoppen tot 8 groepen te tellen (zie de documentatie voor de schakelaar

Vertelling met korte technische afwijkingen.

Hoe het allemaal begon

Dit verhaal begon bijna anderhalf jaar geleden. We kwamen bij de klant met het "droomproject".
De bestelling klonk kort en eenvoudig: verander het ontwerp UI huidige systeem Slimme woning.
Kijkend naar het systeem, het was een typische vertegenwoordiger van het slimme huis, wat velen nu zijn, hier is het in het oude ontwerp.
Namelijk: doffe pictogrammen die uit het netwerk zijn afgenomen, de slecht bedachte logica van schermen, niet ergonomisch gebruik van kleine oplossingsruimte, glamoureuze gradiëntknoppen, en de sensoren op het plattegrond gemaakt als het de programmeur bleek.


Maar de projectarchitectuur vertegenwoordigde een redelijk bevoegde oplossing. Er was een Data Control Server en Data Analysis-server, die een klein doos nastreeft waar het mogelijk was om op drie manieren verbinding te maken:

  • VAN thuis computer via de browser (zowel naar de router) naar de administratieve interface - om alles en alles te configureren
  • Vanaf het touchpaneel bij de ingang van het huis - om het alarm, de scripts, camera's en sensoren (van het te regelen, waren en stelden om te beginnen)
  • VAN mobiele toestellen - Om het huis te beheren vanaf elke plaats (in de eerste versie via de strakkere beheerder)

Onderhandelen met de klant, het werd besloten om een \u200b\u200binterface in de stijl van Windows 8 te maken, hoewel ze zichzelf nog niet is uitgekomen, waren er slechts talloze screenshots op het netwerk. We verlagen de details van een dergelijk besluit, ik zal alleen zeggen dat het unaniem is goedgekeurd en we zijn aan het werk gestart.
Het is de moeite waard om te vermelden dat tegen de tijd dat we een ervaring hadden in het ontwerpen van interfaces in de geest in de geest - het bedieningspaneel van de jacht (ze zijn individuele artikelen waardig, maar er is een harde NDA), boordcomputer auto en hielen van sensorische kiosken.

Idee

Het onderwerp van het ontwerp van het Smart Home System heeft mijn verbeelding al lang in het slot. Oplossingen die op de markt bestaan, en komen niet dicht bij wat ik "Smart" kan bellen "

Overweeg voorbeeld

Hummer. Je moet het licht in de kamer inzetten. Je acties?
Hoe is dit meestal - Je staat op en zet het licht aan.
Volgens vele ontwikkelaars van automatiseringssystemen - Je neemt de afstandsbediening en zet het licht in.
Vaak zien ze geen banale problemen. Ten eerste is de console in de buurt niet, het is noodzakelijk om op te staan \u200b\u200bom het te vinden, ten tweede, vergeet niet dat de meeste van deze apparaten nu zijn touch screenDit betekent dat de afstandsbediening ook moet worden opgenomen. Nieuwe mode - Maak een afstandsbediening van een tablet of telefoon (aparte toepassing), die de taak verder compliceert:
Ga staan \u200b\u200ben vind het apparaat -\u003e Schakel het scherm in of ontgrendelen -\u003e Voer de toepassing uit -\u003e Zoek de gewenste sensor -\u003e Winst.
Is het gemakkelijk om op te staan \u200b\u200ben de schakelaar in te schakelen?
Slim huis in mijn begrip - Het moet het licht zelf opnemen wanneer u het nodig hebt, terwijl u rekening moet houden met de wake u of ontspan, de tijd van het jaar, het aantal mensen in de kamer, uw locatie in de kamer en een aantal factoren, gebaseerd Over uw vorige oplossingen in dergelijke situaties, die uw verlangens voorspellen. Anders is dit huis moeilijk om "Smart" te bellen "
De console moet alleen in bepaalde gevallen worden gebruikt en mag niet het hoofdelement van thuisbeheer zijn. Een echt, "slimme" huis "hoeft niet te beheren - hij zal alles zelf doen.

Maar het is nog steeds ver aan dergelijke systemen, het kan worden gezegd dat het onmogelijk is om dit vandaag te implementeren, dus we zullen verbeteren wat we kunnen, namelijk dat dezelfde console.

Het grootste probleem van deze beslissingen is gemakkelijker om de vertrouwde Habru-foto te tonen:

Ja, bijna al dergelijke systemen zijn de bedieningspanelen van een nucleaire reactor, waarin het moeilijk is om zelfs een geavanceerde gebruiker te begrijpen.
Ontwikkelaars proberen om een \u200b\u200bof andere reden zoveel mogelijk elementen zoveel mogelijk te plaatsen meer mogelijkheden En als gevolg daarvan, zoveel mogelijk problemen UX.

Dus wat is het idee?

Verwijder het oog helemaal onnodig, absoluut alles.
Als ik gewoon het licht in de slaapkamer wil uitschakelen, waarom zou ik de controlesensoren van waterkleppen in de keuken zien?
Als ik alle ramen in het huis wil sluiten, wil ik het met één knop doen en niet afzonderlijk in elke sensor porren.
Als ik een huis op het alarm zet en er is niemand in het huis - het betekent dat het licht overal moet worden terugbetaald, de temperatuur wordt verlaagd, de ramen zijn gesloten, videowacht wordt ingeschakeld. En dit alles zou moeten gebeuren zonder mijn deelname!

Eén ring om alle One-knop te bewerken - "doe goed".

De beste interface is dat je niet ziet waaraan je niet oplet tijdens het werken, wat alles voor je doet, of je beheert het op onderbewust niveau, omdat:
A) Je bent gewend
b) het is duidelijk
Let je op waar een play-knop op YouTube is? Waar is de sluitknop van het browservenster? Of waar is het veld Google-zoekveld?
Zal het u voorstellen aan een sturger van de sensoren op één scherm van het Smart Home-systeem?
TRUE, ALLES DIE DUDIGE WELKELIJK VEREIST VAN DIE SYSTEMEN IS OM EEN ANDERE SPECIFICEERDE TAAK (AS PLAY IN PLAYER OF TE ZOEKEN OP TE ZOEKEN). Daarom is het niet logisch om alle mogelijke bedieningselementen op het scherm uit te voeren.

Niet zo eenvoudige taak werkelijk.

Het eerste prototype.

Van de klant hebben we zijn visie zoiets als dit:

We keken, dachten, en het enige dat van zijn materialen werd gebruikt, is de specificatie van sensoren en opdrachten (gebruikersscenario's)
We werden voor verschillende punten in het frame gedreven:

  • In het aanraakscherm was er geen steun voor multitouch en ze had een resolutie van 1024 * 768 en 1024 * 600
  • Metro-interface was nieuw en er was geen mogelijkheid om het op de tabletten te voelen (de 8e is nog niet uitgekomen). Hoewel we een telefoon hadden op WP7, die een idee gaf.
  • Klant enkele momenten in het systeem kon niet veranderen (ijzeren beperkingen, stijgingsonderzoek, persoonlijke wil en TP)

Maak in het algemeen het ontwerp van dergelijke schermen als: het hoofdmenu, videobewaking en intercom, het weer overboord, meldingen van het systeem en dergelijke - compileerden geen problemen, en het was niet nodig om erover te vertellen, het was het 1e versie, dan zou het interessanter zijn.
Het enige hoofdsensorbesturingsscherm was problematisch. Over hem en schrijf.

Plan van het huis

Hier is een typisch schermbesturingsscherm met een huisplan van internet:

Vertel me, doe velen van jullie begrijpen wat getrokken is van dit plan?
Begrijpt dit plan uw kind? En je grootmoeder? En een vriend die op de kapers heeft getoond, is georiënteerd?
Ik denk dat het probleem begrijpelijk is.

Het plan moet door iedereen worden gelezen en onmiddellijk. Om dit te doen, moet het zichtbaar zijn voor uw huis, met uw kleurenwanden en hoofdmeubilair:

En idealiter moet het plan nog steeds altijd worden gepositioneerd ten opzichte van de partijen van de wereld.
Deze oplossing is duurder en de herschikking van meubels maakt een plan niet nauwkeurig, maar hier in ieder geval - een compromis. Niets voorkomt echter het opnemen van een plan in het project, of zonder deze zonder het (een dergelijke oplossing is ook ontworpen).
Trouwens, in de eerste versies voor de premiumklasse, wilden ze een plan in 3D maken, maar de oplossing is erg duur, en dit is overbodig, de vooruitzichten zijn voldoende.

Sensoren

Sami een groot probleem - De visuele weergave van controlesoren op het plan besloot sneller dan verwacht. Zoals ik nog herinner, zaten we en schilderde de ontwerper op papier de draadframes van het toekomstige systeem, en de beslissing kwam vanzelf:

Hieronder heb ik een video bijgevoegd waar het ziet hoe het werkt.

Één knop

"Wel, waar is er één knop hier?" - je vraagt.
Maar waar:
"Eén knop" is een conventie, onder dit begrijp ik dat één functie de belangrijkste en impedantie op de voorkant is.
De resolutie is klein, om het kleurrijke plan op te tonen en schudde het met de sensoren "Ik wil niet hetzelfde" - een slecht idee.
Het is de moeite waard om te onthouden dat ik nu de oprichting van de stationaire versie van de console beschrijf (d.w.z. het is een monitor gemonteerd in de muur).
De hoofdscenario's van het typische gebruik van dit paneel zijn als volgt:

  • Man opent toegangsdeur -\u003e Het paneel is geactiveerd en waarschuwt ons dat u het alarm wilt uitschakelen -\u003e Wachtwoord is ingevoerd -\u003e De scenario's die voor dit huis zijn geactiveerd.
  • hetzelfde bij het verlaten van het huis - op het alarm
  • Als iemand de deur opdringt - kijken we naar wie, via de intercom, die op elk scherm wordt getoond bij het bellen van de straat en de deur openen.
  • Activering van aangepaste scenario's - bijvoorbeeld de "Night" -modus, wanneer de deuren en vensters zijn vergrendeld, wordt de videobewaking ingeschakeld, de temperatuur wordt verminderd, enz.

Het besturen van individuele sensoren uit dit paneel is niet erg handig (nou, weet je, je zult de helderheid van het licht in de slaapkamer in de gang aanpassen?)
Controle is mogelijk als de panelen in het hele huis zijn gebouwd.
Maar volgens de klant is deze functie daar nodig, u moet doen.

Besluit

Bij het invoeren van het scherm ziet de gebruiker alleen het plan van het huis. Sensoren zijn zichtbaar in de vorm van zeer kleine punten (om te weten waar ze zijn).
Naast de mogelijkheid om vloer naar de gebruiker te schakelen, slechts 2 opties:
1) Activeer het paneel Opties, dat bijvoorbeeld alle thermostaten in het huis op het plan toelaat en de temperatuur instelt die niet wordt verstrekt door scenario's, of bijvoorbeeld contactdozen in de garage.

2) Vergroot het plan. Hoe meer toenemen - hoe meer de sensoren een klein punt in volledige controlecontrole blijken, de sensoren verschijnen afhankelijk van de prioriteit. Daardoor zonder de ruimte te rommelen.

Die. De gebruiker ziet altijd alleen wat hij nodig heeft.

Integratie

Het besluit van de klant was op WPF en de integratie van het ontwerp in XAML, dit is mijn belangrijkste specialisatie. Daarom zijn we niet alleen "fotograferen", maar ook in de praktijk geïmplementeerd ontwerp.
Over hoe we de controle hebben en hun xaml, dit alles was geanimeerd en vastgebonden aan het plan van het huis, je kunt een apart groot artikel schrijven, maar hoe minder concurrenten weten, hoe waardevoller we zijn als specialisten. Ja, en er is geen bijzonder zin om de beslissing van de stationaire console te beschrijven, omdat Dan bespreken we de tabletversie.

Wie is er niet alleen interessant in het scherm Sensorbeheer, maar al het andere kan het eindresultaat op de foto's zien
Of op video:

In de hoeveelheid ontwerp, ontwerp en de implementatie ervan in de demo, de toepassing, die in de toekomst de programmeurs van de klant al rechtstreeks rechtstreeks verliet om ijzer en logica te binden, gingen we ongeveer 5 maanden.
En, zoals gewoonlijk gebeurt het, het maken van het project - je wilt het altijd remake, omdat je al ziet hoe je het beter kunt maken, zijn tekortkomingen en zwakheden en zwakke plaatsen Er was veel.

Terwijl ik XAML aan het doen was, werd Windows Developer Preview uitgebracht, en ik haastte me meteen om haar op het bureaublad en op mijn tablet te raken (Aser Iconia W500). De officiële richtlijnen kwamen uit, waardoor het mogelijk maakte om op een nieuwe manier naar Metro UI te kijken.

Deel 2.

Alles wat we deden - afval

De klant was zeer tevreden, vooral toen we een werkende demk presenteerden. Het kan gezegd worden, gelukkig was er geen limiet. Ik heb de tekortkomingen van het project gezien, maar tegelijkertijd wist ik dat het mogelijk was om het aan het ideaal te brengen dat er alleen maar veel tijd aan het bezig was met een team van goede programmeurs, maar het maakte in dit stadium niet uit van productontwikkeling.
Klant, zoals ik, leek al nieuwe Windows 8, en we geloofden allebei dat ze erg goed was. Daarom, op mijn voorstel: "en laten we een versie maken voor een tablet?", Reageerde zeer positief. Ik stelde voor om het systeem niet in de muur te veranderen, omdat Ze steunde geen multitouch, legde de acht er niet logisch. Het herontwerp van de beste tijd naar de beste tijd, gericht op de toepassing Metro / Windows Store (het was metro, omdat het de demo op de markt kan verdelen om klanten aan te trekken).
Helaas was het budget van de klant niet rubber, maar ik was het er in wezen overeen dat we een versie voor Windows 8 presenteerden. Mede was het noodzakelijk, we hadden een heel goed gedaan In de portefeuille vóór de release van de acht.

Het tweede prototype.

Na een paar weken gaf mijn ontwerper me zijn visie op de tabletversie van het product:


De volledige versie van het ontwerp kan

Ik was een beetje overstuur, het ontwerp was verre van wat nodig was, ik probeerde de fouten uit te leggen, maar je kunt niet leren zwemmen zonder in het water te klimmen, de ontwerper kon me niet geven wat ik ook wilde Weinig ervaring met Windows 8.

Daarom werd besloten om alles opnieuw te doen, maar om samen met mij aan het ontwerp te werken, alles in een keer in XAML te maken.
Dit zal het probleem van het gebrek aan vaardigheden op de richtlijnen van de ontwerper oplossen, en ik, als ontwikkelaar, zal de foto niet vernietigen.

Ontwerp V2 en gelijktijdige integratie

Eerlijk gezegd, het was verdomd moeilijk. Ik was klaar om de mengers 5 ontwikkelaars te doden, omdat het in vergelijking met de 4e versie een buggy was, een onbruikbaar, constant vertrek monster. Nu is de situatie beter, maar sommige momenten ontbreken.
Ik heb versus 2012 opgeslagen, het was gedeeltelijk opgenomen in de functionele van het mengsel om stijlen te regelen.
De nieuwe XAML is een onderwerp van een apart gesprek, de helft van de oude klassen, geen standaardstijlen zijn niet geschikt, de triggers werden verwijderd - die geen visuele staten verlieten. We moesten ook het project helemaal opnieuw herschrijven wanneer WIN 8 is bijgewerkt om een \u200b\u200bvoorbeeld te versterken, maar die veranderingen waren ten goede.

Nieuw concept

Een nieuw apparaat is een nieuwe aanpak. Ik moest het idee van het startscherm herzien, nu was het niet nodig en alle navigatie werd naar de top-appbar gehaald.
Down met alle knoppen van het scherm: Zoom - Gebaar, hebben we een volledige multitouch, alle bedieningssensoren in de lagere appbar.
Nu begint de applicatie onmiddellijk van de show van het huisplan (idealiter, het moet bijhouden welke kamer een gebruiker en het onmiddellijk verhoogt door in het midden te positioneren).

Open de toepassing:

Zoomgebaar (of muis Ctrl + Kolivesiko) maken):

Of krijg appbar:

Besturingselementen

Sensorcontroles moesten opnieuw herschrijven en ze inheems maken met normale ondersteuning voor Windows 8-gebaren.
Er werd in aanmerking genomen dat we nu controle hebben op 2 manieren, vingers en muis.
Het werd ook gelikt uiterlijk Sensoren, het werd meer stijlvol:


Vooral vocht hij de snelheid van de applicatie. Prestaties in Windows8-toepassingen tot bestellingen boven WPF. Ik was bang dat de tablet het systeem niet beheerst, maar alles vliegt. Microsoft overschreed zichzelf, maakt nu niet uit hoe moeilijk XAML is, alles zal snel werken. Als de WPF zelf-optische schermen cachingalgoritmen moest maken voor snelle animatie, denk dan aan de complexiteit van de vertakking van XAML, optimaliseer het aantal elementen in de controleboom, dan in acht, het maakt gewoon niet uit, de animatie van Elke complexiteit en een aantal objecten is altijd soepel.

Optie zonder een plan


Hier hadden ze geen sensoren nodig met ondersteuning voor gebaren, het was niet nodig om ruimte te besparen. Het bleek natuurlijk niet zo indrukwekkend, maar goed.

Scenario's

Het beheersen van sensoren, het is zeker goed, maar zoals ik al heb geschreven, de basisoperaties met hen beter automaten.
Om dit te doen, zijn er in de administratieve interface basisvoorinstellingen van de scenario's en het vermogen om hun eigen te creëren.

Op de tablet ziet het er als volgt uit:

Één knop

Uit dit concept gingen we niet vanaf het allereerste begin.
De vraag wordt vaak gevraagd: "En waar is het werk hier voor een half jaar?"
En ik zie het als lof. Dit betekent dat ik iets bereikte dat ik wilde. De gebruiker ziet eenvoudig niet dat de functionaliteit van de toepassing vrij groot is, omdat alleen wat nodig is dit moment. De gegevens en de benodigde schermen zelf worden aan de gebruiker getoond en niet op zoek naar ze. De interface is duidelijk uit de eerste minuten die de knoppen niet bang maken met een overvloed en tegelijkertijd wordt elke actie uitgevoerd op "eenmaal - twee - drie".
Op de oprichting van alleen de versie onder Windows 8 Geslaagde 3 maanden (in gedachten van de workflow in de eerste versie, zou het meer helemaal opnieuw zijn).

Trouwens. Je merkte dat overal in Windows, zo'n element als pop-up altijd alleen is? Zodat we niet openen, is het pop-upformulier altijd alleen als u de andere opent - de vorige sluit. Ik had problemen in mijn interface: de sensor na activering was gesloten een bepaalde tijd Zelf, maar als je er een activeert, en dan een ander onmiddellijk - ze waren beide open, het ziet er niet erg esthetisch en begrijpelijk uit. Dank aan mijn tweede ontwerper voor deze fytbeck. Hij nam geen directe deelname aan het project, maar sommige dingen worden dankzij zijn tips geïmplementeerd.
Ik vocht voor een week over de oplossing van dit probleem.
En ik besloot haar ...
Één regel code.
Moraal: soms het meest eenvoudige oplossingen Veel werk verbergen.

Fitbecks van Microsoft.

Laatste lente heeft Microsoft een actie uitgevoerd waarbij alle ontwikkelaars gratis aanbevelingen zouden kunnen ontvangen voor het verbeteren van de UI / UX hun producten. En we zijn erin geslaagd deze distributie te hebben.
Om eerlijk te zijn, was ik bang dat we alles in de pluis en stof zullen splitsen, het was mijn eerste ervaring met de acht. Maar alles ging soepel, volgens de klant, werd Microsoft zeer zeer zeer zeer op prijs gesteld de kwaliteit van de applicatie. We hebben verschillende kleine aanbevelingen ontvangen voor het verbeteren van de bruikbaarheid (door het woord zeer competent) bijvoorbeeld, het is:


Zeer trouwe opmerking, neem nota. Als we een object markeren en dan zijn acties mogelijk met het - Appbar moet openen! De gebruiker met deze mogelijke acties tonen.
In het algemeen is het probleem veel breder, stem dus - voor de hand liggende acties moeten alleen worden uitgevoerd, niet nodig om op de gebruiker te wachten.

Ik heb alle amendementen minder dan een dag gedaan. En de ziel was warm en kalm.

TOTAAL

Op dit moment is het systeem in ontwikkeling, de klant is niet zo goed als ik zou willen. Daarom schrijf ik post na bijna een jaar, de releasedatum is onbekend en nu.
De applicatie kan van de Windows-winkel worden aangeraakt naar degenen die Windows 8 hebben, maar voordat u een Turkse locale in de instellingen moet plaatsen:
Bedieningspaneel-\u003e Tijd, taal en regio -\u003e Regio -\u003e Locatie wijzigen -\u003e Turkije (Vergeet dan niet om terug te keren, anders wordt de markt getoond door Turks)
Maar nu in de winkel opslaan, demonstreren van de belangrijkste kenmerken. Op een dag zal het systeem worden voltooid en sinds we de oude herwerkten - de waarschijnlijkheid hiervan is geweldig. Ik hoop dat het geval van de klant bergop zal gaan en we zullen blijven werken aan het project. En er zijn nog steeds veel werk: webversie, site, vormstijl (We hebben alleen het logo en het idee ontwikkeld, maar wat je nodig hebt om te ontwikkelen), versie onder iOS, Android, WP8. Ja, en de versie van Windows 8, zou ik hebben een beetje op dit moment verbouwd, we haar eindigde afgelopen zomer, sinds die tijd in Windows is er veel veranderd, en mijn vaardigheden op dit gebied zijn gegroeid.

Nou, ten slotte gaat de video over versie op Windows 8 (Kijk HD)

Er zijn nog steeds video van de klant, maar het is zeer slechte kwaliteit.

Ps. Fout in het artikel Schrijf in PM.

We waren in staat om ons Smart Home-systeem te leren om te herkennen wat we hadden gezegd en synthetiseren van stemweergave met Google.
Vandaag wil ik zien hoe ik de toegang tot ons systeem via de webinterface kunnen organiseren.

Technologieën

Hoe weet je, we schrijven naar onze "Smart Home" in de taal perl. Hedendaags informatie Systeem Bijna ondenkbaar zonder database. We blijven ook niet opzij en voor de opslag van onze gegevens zullen de DBMS gebruiken MySQL. Om de webserver uit te voeren, heb ik besloten om niet geavanceerde software, en de perl module - Http :: server :: eenvoudig, vooral - Http :: server :: simpel :: CGI. Waarom deed ik het? In het grootste deel, ter wille van belang;) Maar in theorie, kunt u toegang tot de low-level verwerking van HTTP-queries / reacties zonder de toevoeging van de Apache / mod_perl complex. In het algemeen, niets voorkomt dat het project aan de Apache rails, als je een verlangen en genoeg tijd.

Database

De eerste stap is om MySQL-database installeren en een database met tabellen uit db.sql. Hier is een lijst:

Maak een database-ion te maken; Gebruik ionen; # # Tafelstructuur voor tafel "kalender" # druppel tafel als de kalender bestaat; Maak Table `Calendar` (id` Int (15) not null AUTO_INCREMENT,` date` DateTime Niet Null, `Message` tekst` nextTimeplay` DateTime Niet Null, `Expired` DateTime Niet Null,` Type` Int (1) Default , primaire sleutel ( `id`)) Motor \u003d MyISAM Default charset \u003d Latin1; # # Tabelstructuur voor tabel "commandoSlog" # druppel tafel indien aanwezige commandoSlog; Maak Table `Commandslog` (id` Int (15) not null AUTO_INCREMENT,` date` DateTime Niet Null, `Cmd` \u003d latin1; # # Tabelstructuur voor tafel "log" # druppel tafel als het logboek bestaat; CREATE TABLE `log` (id` Int (15) not null AUTO_INCREMENT,` date` DateTime Niet Null, `Message` Varchar (255) Niet Null,` Level` Int (1) Default Null, primaire sleutel ( `id`) ) MOTOR \u003d MyISAM Auto_increment \u003d 1 standaard charset \u003d Latin1;

Voer de nodige acties uit:

[E-mail beveiligd]: ~ $ SUDO APT-GET INSTALLATE MYSQL-Server
[E-mail beveiligd]: ~ $ MYSQL -UROOT -PPASSWORD< db.sql

Code wijzigen

Nu moeten we mappen maken lib, hTML. en config (Naast de map gegevens.). In de map lib We plaatsen de module die verantwoordelijk is voor de implementatie van een webserver en het verwerken van onze HTTP-verzoeken.

We moeten een klein script oplossen srv.pl. Voeg toe aan het incidenteenheid:

Onze% CFG \u003d ReadCFG ("Common.CFG"); Onze $ dbh \u003d dbconnect ($ CFG ( "DBName"), $ CFG ( "dbuser"), $ CFG ( "DBPASS"));
Voeg rijen aan die verantwoordelijk zijn voor het starten van de HTTP-server onder de initialisatie-eenheid:

## Het starten van een HTTP server ################################ MY $ PID \u003d LIB :: http-\u003e new $ CFG ("httpport")) -\u003e Achtergrond (); Print "HTTP PID: $ PID \\ N"; LogSystem ( "HTTP-service - PID: $ PID, port: $ CFG (" httpport "), host: $ CFG (" httphost ")", 0); ################################
En voeg nu ontbrekende functies toe aan het einde van het bestand:

Sub readcfg (mijn $-bestand \u003d verschuiving; mijn% CFG; open (CFG, " ; Foreach My $ Line (@CFG) (volgende als $ Line \u003d ~ / ^ \\ # /; if ($ line \u003d ~ /(.*?) \\ \u003d \\ "(. *?) \\" \\; /) (Chomp $ 2, $ CFG ($ 1) \u003d $ 2;)) vouwen (CFG); Return% CFG; ) ######################################## sub dbconnect (MY ($ DB, $ gebruiker, $ pas) \u003d \u200b\u200b@_; Return $ dbh \u003d DBI-\u003e Connect ( "DBI: MySQL: $ db", $ user, $ pas) || DIE "Kon niet verbinden met database: $ DBI :: ErrStr"; ) ######################################## sub logSystem (my ($ tekst, $ Level) \u003d @_; My% CFG \u003d READCFG ( "Common.cfg"); dbconnect ($ CFG ( "DBName"), $ CFG ( "dbuser"), $ CFG ( "DBPASS")); $ dbh-\u003e Doe ("inloggen in log (datum, bericht, niveau) -waarden (nu ()," $ tekst ", $ niveau)");

Zoals u kunt zien aan de namen van de functies, dbConnect () - is verantwoordelijk voor de verbinding met onze database, logSystem () - voor het loggen, readCfg () - voor het downloaden van configuratie. Laten we er in meer detail erbij wonen. De configuratie is een eenvoudig tekstbestand in de configuratiemap. In ons geval, wordt het genoemd cOMMON.CFG.. Het ziet er zo uit:

## daemonmode \u003d "undef" -instellingen; Logsystem \u003d "1"; Loguser \u003d "1"; dbname \u003d "ion"; dbuser \u003d "root"; Dbpass \u003d "wachtwoord"; CAMNUMBER \u003d "4"; Campotiondetect \u003d "1"; httpport \u003d "16100"; htphost \u003d "localhost"; telnetport \u003d "16000"; telnethost \u003d "localhost"; Micthreads \u003d "5";

Sommige regels daarin worden later gebruikt. We zijn nog steeds geïnteresseerd in alleen rijen beginnend met het voorvoegsel dB. Zoals we zien zijn de instellingen voor de verbinding met onze database.

Nu zal ik u vertellen hoe u de meervoudige uitvoering van het team te overwinnen. DUUR DE FUNCTIE checkCMD ():

Subcontrole (My $ Text \u003d Shift; Chomp $ Text; $ Text \u003d ~ S / $ // G; Print "+ OK - Gekozen opdracht \\" $ Text \\ "(lengte:" .Lengte ($ Text). ") \\ n "; if ($ text \u003d ~ / system /) (################################### ############## MY $ STH \u003d $ dbh-\u003e bereiden ( "Select CMD uit Commandslog WAAR DATE_SUB (NOW (), Interval 4 Second)<= date LIMIT 0, 1"); $sth->uitvoeren (); Mijn $ result \u003d $ sth-\u003e fetchrow_hashref (); if ($ resultaat -\u003e (cmd) ne "") (return;) $ dbh-\u003e do ("invoegen in opdrachtlog (datum, cmd) -waarden (nu ()," $ tekst ")"); ################################################# als . ($ text \u003d ~ / cheques /) (mijn $ up \u003d `uptime`; $ up \u003d ~ / omhoog (*), /; sayText ( "server Hours - $ 1 Aantal belangrijkste proces - $ ouder ..") .?;) if ($ text \u003d ~ / tijd /) (mijn $ Up \u003d `uptime`;? $ Up \u003d ~ /(.*) Up /; Saytext ( "nu $ 1");) if ($ text \u003d ~ / Handy / || $ tekst \u003d ~ / complete /) (SayText ( "complete werk Total Good.!"); System ( "killall Motion"); System ( "Rom ./data/*.flac && rm. / data / * .wav "); System (" killall Perl "); EXIT (0);) if ($ text \u003d ~ / weer /) (mijn ($ Addit, $ mod), mijn% WH \u003d lib :: http :: checkweather (); $ wh ( "Voorwaarde") \u003d coderen :: decode_utf8 ($ wh ( "Voorwaarde"), $ Encode :: fb_default); $ wh ( "Hum") \u003d coderen :: decode_utf8 ($ wh ( "Hum "), $ Encode :: fb_default); $ wh (" wind ") \u003d coderen :: decode_utf8 ($ WH (" wind "), $ Encode :: fb_default); if ($ wh (" temp")< 0) { $mod = "ниже нуля"; } if($wh{"temp"} > 0) ($ mod \u003d "boven nul";) $ wh ("wind") \u003d ~ s /: b / oost /; $ wh ("wind") \u003d ~ s /: s, / west /; $ wh ("wind") \u003d ~ s /: yu, / zuidelijk /; $ wh ("wind") \u003d ~ s /: c, / noord /; $ wh ("wind") \u003d ~ s /: sv, / noordoosten /; $ wh ("wind") \u003d ~ s /: sz, / noord-west /; $ wh ("wind") \u003d ~ s /: zij, / zuidoosten /; $ wh ("wind") \u003d ~ s /: yuz, / zuidwest /; Saytext ( "Nu $ WH (" Voorwaarde "), $ wh (" temp ") graden $ mod $ wh (." Hum ") $ wh (." Wind ")"); if ($ wh ("temp")<= 18) { $addit = sayText("Одевайтесь теплее, на улице холодно!"); } if ($wh{"temp"} >\u003d 28) ($ addit \u003d SayText ("draagbare airconditioner voorkomen niet!");))) #SayText ("Uw team is $ Text"); Terugkeer; )
We kiezen voor het laatst uitgevoerde commando in het interval van de vier seconden en als deze overeenkomt met de stroom - afslag van de functie. Zoals u kunt merken, voegde ik enkele opdrachten toe in vergelijking met de beschreven functie in het laatste artikel. Het meest interessante is het weer. Implementatie van gegevensverwerving voor het - net hieronder.

Module Http.pm.

Laten we teruggaan naar de implementatie van de ingebouwde HTTP-server. Maak een bestand Http.pm. in directories lib. Schrijf de volgende code daar:

Pakket lib :: http; Gebruik http :: server :: simpel :: CGI; Gebruik LWP :: Useragent; Gebruik URI :: Escape; Gebruik basis qw (http :: server :: simpel :: cgi); Gebruik sjabloon; ######################################### ######### ################################ ONZE% BERICHT \u003d ( "/" \u003d\u003e \\ & goindex, "/ index" \u003d\u003e \\ & goindex, "/ Camers" \u003d\u003e \\ & gocamers,); Onze $ TT \u003d sjabloon-\u003e nieuw (); ############################################################# ######### ####################################### subhendel_Request (mijn $ zelf \u003d verschuiving; mijn $ CGI \u003d Shift; My $ Path .? \u003d $ Computerbeeld\u003e PATH_INFO (); Mijn $ Handler \u003d $ Dispatch ($ Path); if ($ Path \u003d ~ QR (^ / (* \\ (: PNG | GIF | JPG | CSS | XML | SWF)) )) (My $ url \u003d $ 1; print "hTTP / 1.0 200 ok \\ n"; print "content-type: text / css \\ r \\ n \\ n" if $ url \u003d ~ / css /; Print "Content Type : image / jpeg \\ r \\ n \\ n "if $ url \u003d ~ / jpg /; print" content-type: image / png \\ r \\ n \\ n "Als $ url \u003d ~ / png /; Print" content-Type : Image / GIF \\ N \\ N \\ N "IF $ URL \u003d ~ / GIF /; PRINT" INHOUD-TYPE: TEKST / XML \\ R \\ N \\ N \\ N "Als $ URL \u003d ~ / XML /; PRINT" Inhoud - Type: application / x-shockwave-flash \\ r \\ n \\ n "IF $ url \u003d ~ / SWF /; OPEN (DTA,"<$url") || die "ERROR: $! - $url"; binmode DTA if $url =~ /jpg|gif|png|swf/; my @dtast = ; Foreach My $ Line (@Dtast) (Print $ Line;) Sluiten (DTA); Terugkeer; ) Indien (Ref ($ Handler) EQ "-code") (afdrukken "HTTP / 1,0 200 OK \\ R \\ N"; $ handler -\u003e ($ CGI);) else (print "HTTP / 1.0 404 niet gevonden \\ r \\ n "; Print $ Computerbeeld\u003e Header, $ Computerbeeld\u003e START_HTML (" niet gevonden "), $ Computerbeeld\u003e h1 (" niet gevonden "), $ Computerbeeld\u003e h2 ($ Computerbeeld\u003e PATH_INFO ()); $ Computerbeeld\u003e END_HTML;)) ## Processing aanvraag / ###################################### ## SUB GOODEX (MY $ CGI \u003d SHIFT; # CGI.PM Object Return If! Ref $ CGI; My% W \u003d Checkweather (); mijn $ cmd; mijn $ dbh \u003d ion :: dbConnect ($ ion :: CFG ( "dbname"), $ ion :: cfg ( "dbuser"), $ ion :: cfg ( "DBPASS")); Mijn $ STH \u003d $ DBH-\u003e Bereid ( "Select Cmd van Commandslog WHERE ID\u003e 0 Sorteren op ID Desc beperken 0, 1 "); $ sth-\u003e uitvoeren (); mijn $ resultaat \u003d $ sth-\u003e fetchrow_hashref (); als ($ resultaat -\u003e (cmd) ne" ") ($ cmd \u003d $ resultaat -\u003e ( cmd);) anders ($ cmd \u003d "geen opdracht ...";) Afdrukken "Inhoudstype: tekst / html; charset \u003d UTF-8 \\ N \\ N"; mijn $ uptime \u003d `uptime`; $ uptime \u003d ~ / Up (*?), /; $ uptime \u003d $ 1; Mijn $ videosys \u003d `PS Aux | Grep Motion`; if ($ videosys \u003d ~ / Motion-C /) ($ videosys \u003d" werken";) Anders ($ video's \u003d" werkt niet";) Mijn $ Micsys \u003d` PS AUX | GREP MIC`; if ($ micsys \u003d ~ / perl mic \\ .pl /) ($ micsys \u003d" werken";) Anders ($ MICSYS \u003d" werkt niet";) Mijn $ VARS \u003d (whicon \u003d\u003e $ w (" pictogram "), Whcond \u003d\u003e $ W (" Conditie "), WHDEMP \u003d\u003e $ W (" TEMP "), WHUM \u003d\u003e $ W (" Hum " ), WHWIND \u003d\u003e $ w ( "Wind"), cmd \u003d\u003e $ cmd, uptime \u003d\u003e $ uptime, video \u003d\u003e $ videosys, microfoon \u003d\u003e $ micsys, draden \u003d\u003e $ ion :: CFG ( "MICTHREADS") ,); Mijn $ output; $ tt-\u003e -proces ("HTML / index", $ VARS, $ OUTPUT) || Print $ TT-\u003e FOUT (), "\\ N";) ## Verzoek verwerking / camer ## ######################################## Sub gocamers (My $ CGI \u003d Shift; # CGI. PM Object Return If! Ref $ CGI; My% W \u003d Checkweather (); mijn $ cmd; mijn $ dbh \u003d ion :: dbConnect ($ ion :: CFG ("dbname"), $ ION :: CFG (" dbuser"), $ ion :: cfg ( "DBPASS")); Mijn $ STH \u003d $ DBH-\u003e Bereid ( "Select CMD uit Commandslog WHERE ID\u003e 0 Sorteren op ID Desc Limit 0, 1"); $ STH-\u003e UITVOEREN (); Mijn $ result \u003d $ sth-\u003e fetchrow_hashref (); if ($ resultaat -\u003e (cmd) ne "") ($ cmd \u003d $ Result -\u003e (CMD);) ELSE ($ CMD \u003d "Geen Command ... ";) if ($ Computerbeeld\u003e PARAM (" tekst ") Ne" ") (My $ TXT \u003d $ Computerbeeld\u003e PARAM (" tekst "); vereisen coderen; $ TXT \u003d coderen :: Decode_UTF8 ($ TXT, $ Encode :: FB_DEFAULT); Ion :: Saytext ( $ Txt); ) Afdrukken "Content-Type: text / html; charset \u003d UTF-8 \\ n \\ n"; Mijn $ Vars \u003d (Camera1 \u003d\u003e "Video-0 / Camera.jpg", Camera2 \u003d\u003e "Video-1 / Camera.jpg", Camera3 \u003d\u003e "Video-2 / Camera.jpg", Camera4 \u003d\u003e "Video- 3 / Camera.jpg "Whicon \u003d\u003e $ w (" icoon "), whcond \u003d\u003e $ w (" Voorwaarde "), whdemp \u003d\u003e $ w (" temp "), whhum \u003d\u003e $ w (" Hum ") , WHWIND \u003d\u003e $ W ("wind"), cmd \u003d\u003e $ cmd,); Mijn $ uitgang; $ TT-\u003e Process ( "HTML / camers", $ Vars, $ Output) || Print $ TT-\u003e FOUT (), "\\ N"; ) ## Weer ######################################## sub checkWeather (mijn% wh ; mijn $ UA \u003d LWP :: UserAgent-\u003e Nieuw (Agent \u003d\u003e Mozilla / 5.0 (Windows NT 5.1; RU-RU) AppleWebKit / 535,2 (KHTML, zoals Gecko) Chrome / 15.0.872.0 Safari / 535,2 "); mijn $ Inhoud \u003d $ UA-\u003e Krijg ("http://www.google.com/ig/api?hl\u003dru&weather\u003d" .uri_escape ("St. Petersburg"); $ Inhoud-\u003e Inhoud \u003d ~ / (.*?)<\/current_conditions>/ g; Mijn $ cond \u003d $ 1; $ Cond \u003d ~ /

We zullen de inhoud in meer detail analyseren. In hash % Verzending We definiëren de naleving van de URL en de gebelde functie. Alle andere URL's niet beschreven in deze hash zullen een pagina uitgeven 404 .
We zullen een krachtige en flexibele bibliotheek uitvoeren met een templateizer. Sjabloon Toolkit.. We initialiseren het met een tekenreeks:

Onze $ TT \u003d sjabloon-\u003e nieuw ();
Overbelastingfunctie handvat_request () Ouderklasse, we ontvangen managementverwerking naar de HTTP-server. Om de statische contentbrowser te retourneren (PNG, GIF, JPG, CSS, XML, SWF), wordt een blok gebruikt:

If ($ PATH \u003d ~ QR (^ / (. * \\. (?: PNG | GIF | JPG | CSS | XML | SWF))) (My $ URL \u003d $ 1; Print "HTTP / 1.0 200 OK \\ N "; Afdrukken" Inhoud Type: Tekst / CSS \\ R \\ N \\ N "IF $ URL \u003d ~ / CSS /; PRINT" INHOUD-TYPE: BEELD / JPEG \\ R \\ N \\ N "IF $ URL \u003d ~ / JPG /; Afdrukken "Inhoud-type: afbeelding / png \\ r \\ n \\ n" als $ URL \u003d ~ / PNG /; PRINT "INHOUD-TYPE: BEELD / GIF \\ R \\ N" IF $ URL \u003d ~ / GIF /; Afdrukken "Inhoudstype: Tekst / XML \\ R \\ N \\ N" IF $ URL \u003d ~ / XML /; PRINT "Inhoudtype: Toepassing / X-ShockWave-Flash \\ R \\ N \\ N" Als $ URL \u003d ~ / Swf /; open (dta, "<$url") || die "ERROR: $! - $url"; binmode DTA if $url =~ /jpg|gif|png|swf/; my @dtast = ; Foreach My $ Line (@Dtast) (Print $ Line;) Sluiten (DTA); Terugkeer; )
Sinds Mime-type kreeg ik een beetje, ik heb ze een beetje opgenomen in de Hydund;)
Verdere functies die verantwoordelijk zijn voor het genereren van de inhoud van een specifieke URL. Hoewel er slechts twee van hen zijn - een index en een pagina met camera's.
Op de index kunnen we zien of dergelijke subsystemen werken als video- en audio-opname. Een aparte regel gaat:

Mijn% W \u003d Checkweather ();
Deze functie retourneert hash met huidige weergegevens in de stad die op onze pagina moet worden weergegeven. Zo'n klein aangenaam broodje;)
Op dezelfde plaats zullen we het nieuwste ontvangen en herkende team voor een slim huis intrekken.

Volgende functie gocamers () Voert dezelfde functies uit als de index, alleen in plaats van informatie in te trekken over subsystemen, toont een afbeelding van onze camera's en het is mogelijk om elke tekst te schrijven die wordt gesynthetiseerd en ingezet door onze Smart Home.

Alle pagina's zijn gebouwd op basis van sjablonen die in de map liggen. hTML.. Het vermelden van de aanbieding hier zal niet comfortabel zijn, dus ik zal een link naar het archief geven -

Installatie van "Smart Home" -systemen, multifunctionele en thuisbioscoop Kymera toverstaf.

In 2011 werden onze experts voltooid gewerkt aan de besturingsinterface voor sensorische panelen en het AMX-bedieningspaneel, de belangrijkste elementen van het "Smart Home" -systeem.

In dit voorbeeld wordt de bedieningsinterface geïmplementeerd voor twee soorten apparaten:

  1. AMX MVP-5200I-sensorpaneel met een resolutie van 800 per 480 pixels.
  2. De AMX MIO-R4-afstandsbediening met een schermresolutie 240 tot 320 pixels.

In dit geval hebben beide implementaties van interfaces absoluut identieke functionaliteit.

Sensorisch bedieningspaneel AMX MVP-5200I en de AMX MIO-R4-console hebben een andere resolutie, met behoud van dezelfde functionaliteit.

De gebruikerscontrole-interface is ontworpen voor de 4e generatie AMX touch-panelen en het AMX-bedieningspaneel, rekening houdend met alle grafische en functionaliteit van deze apparaten.

Deel 1. Specifieke aanpak

In de foto 1 zien we het hoofdmenu waarin de gebruiker de mogelijkheid krijgt om het engineeringsysteem te kiezen, dat het kan controleren.

Foto 1.




En deze interface lijkt op de AMX MIO-R4-console, die een resolutie heeft van 240x320 pixels

Aan de bovenkant van de kamer wordt geplaatst, waarvan de controle wordt uitgevoerd. De gebruiker kan doorgaan met de besturing door elk engineeringsysteem door op het pictogram te klikken met de afbeelding van dit systeem. De momenteel actieve systemen worden gemarkeerd met een groen frame. Met de grote rode knop "Uitschakelen" kunt u alle systemen tegelijk in de geselecteerde kamer uitschakelen. Onderaan de pagina is er altijd een veld van hulpinformatie waarbij de tijd en datum worden weergegeven. De knop "Uitvoer" zal ons leiden naar het huis van het algemene plan van het huis (zie foto 2).

Foto 2.


Op de pagina Algemene plan hebben we al geen deal met één kamer, maar met het hele huis. Vanaf hier kunnen we naar elke kamer gaan of het hele huis onmiddellijk beheren ("Global Management", zoals we het noemen). Aan de linkerkant zijn de bladwijzers van de keuze van het engineeringsysteem, waarvan de toestand wordt weerspiegeld in het algemene plan.

Als het geselecteerde systeem actief is in de kamer - de knop Kamer is oranje, zo niet - blauw.

De knop "Uitschakelen" in dit geval zal het systeem al in een aparte ruimte niet uitschakelen, maar in het hele huis onmiddellijk. Als u op de knop Kamer drukt, leidt ons naar de hoofdpagina van deze kamer en de knop "Afsluiten" op de kamerpagina (zie foto 1).

Laten we ons wenden tot de pagina's van het interface gewijd aan het beheer van specifieke technische systemen.

Foto 3 presenteert de lichtregelinterface in de kamer.

Foto 3.



Het pictogram met gloeilamp toont de werkelijke status van de lichtzone. Door op de gloeilamp te drukken, leidt of schakelt u de lichtbron uit. Met de pijlknoppen kunt u de helderheid van het licht besturen (deze functie is alleen beschikbaar als er een dimmer is). Het is mogelijk om de huidige status van lichtzones (lichtscènes) te onthouden met behulp van de knoppen met de scène selecteren onderaan de pagina. De opgeslagen scène kan later snel worden ingeschakeld met één klik op de knop. De OFF-knop in dit geval regelt alle lichtbronnen in deze kamer.

In Foto 4 beheren we het klimaat in de kamer.

Photo 4.




De klimaatregelingsinterface is ook verkrijgbaar bij de AMX-console.

De actuator in dit geval is het klimaatsysteem Daikin. De klimaatregelingsinterface is het meest en zichtbaar mogelijk. Door op de overeenkomstige knop te drukken, verandert de modus "Cooling-heating ventilatie", de snelheid van de werking van de ventilator en de gewenste temperatuur is ingesteld.

Foto 5 presenteert de interface van het mediabesturingsapparaat.

Foto 5.




Op deze interfacepagina kunt u een bron van audio of video selecteren om te spelen. De actieve bron is gemarkeerd in een groen frame. Bij het kiezen van een bron, gaan we de beheerspagina van deze bron in (in dit artikel worden deze pagina's niet gepresenteerd). De knop "Instellingen" leidt ons naar het tv-instellingenmenu.

Hier kunt u ook het volumeniveau van de audio- of videobron bedienen en het venster Equalizer openen (zie foto 6).

Foto 6.




Deel 2. De hoofdbenadering

Hier geven we de basisprincipes aan die werden gebruikt bij de ontwikkeling van de hierboven getoonde interfaces.

1) visualiteit - gebruik van grafische afbeeldingen van objecten die hun functionaliteit weerspiegelen. Dit principe vereenvoudigt het werken met de interface, waardoor het intuïtief begrijpelijker wordt (zie foto 1). Op dit voorbeeld heeft elk systeem een \u200b\u200beigen pictogram en wordt de systeemactiviteit weerspiegeld door het genererend frame van groen.

2) structuur - duidelijke hechting aan de structuur bij het bouwen van complex veel niveausinterfaces. In dit voorbeeld zijn er 4 managementniveaus: het hele huis, kamer, systeem, subsysteem (zie foto 2). Het huis heeft 11 kamers en 3 systemen beschikbaar voor controle (licht, klimaat, media).

Met de ontwikkelde interface kunt u systemen op alle niveaus beheren, evenals snel en eenvoudig het systeem en de kamer als een object van controle te wijzigen. Op de juiste manier geconstrueerde structuur vereenvoudigt de navigatie aanzienlijk via de interfacepagina's.

3) Multimassalism - Combineren in één interface van lokale en wereldwijde besturingsfuncties. Dat wil zeggen, met de hulp van één paneel, kan de gebruiker beheren als een apart systeem in een aparte ruimte en alle systemen in het hele huis onmiddellijk. Dus in foto 3 presenteert het interface van controlelampje in één kamer en in foto 2 beheren we al het licht in het hele huis.

4) Polemie - de aanwezigheid van verschillende besturingsopties in hetzelfde object. In deze interface is de volumeregeling in de kamer bijvoorbeeld mogelijk (zie foto 4) zowel vanuit het aanraakscherm als van de externe bedieningselementen (roterend wiel voor het MVP-5200i-paneel of de buitenste "VOL" -knop voor de Mio- R4-afstandsbedieningen).

5) universaliteit - de mogelijkheid om de bedieningsinterface op verschillende panelen met verschillende schermresolutie te implementeren.

Dus in dit voorbeeld wordt de bedieningsinterface geïmplementeerd voor twee soorten apparaten: AMX MVP-5200I aanraakpaneel (resolutie 800x480) en AMX MIO-R4-afstandsbediening (resolutie 240x320). In dit geval hebben beide implementaties van de interface absoluut identieke functionaliteit (zie de eerste foto).

Over esthetiek

Bij het ontwikkelen van de interface hebben we ook verschillende grafische technieken toegepast die de perceptie en uiterlijk verbeteren. Voor deze, doorschijnend velden en krantenkoppen, stijlvolle achtergrondtekeningen, het veranderen van de kleur Gamma, afhankelijk van het geselecteerde systeem, pop-upvensters, surround pictogrammen met schaduwen, volumetrische knoppen met kleurindicatie van staat, activiteit, enz.

Kortom, we hebben geprobeerd de controle-interface te maken om de technische capaciteiten van de AMX-besturingsapparaten te gebruiken, overeenkomend met hun stijl en ontwerp waarvoor het is ontworpen en was ook handig voor de gebruiker.