Smart home met webinterface en applicaties. Mijn webinterface voor het beheren van een slim appartement. Wat ik in gedachten heb

De interface is wat de gebruiker “ slimme woning»Je moet elke dag zien en aanraken. Daarom wordt een begrijpelijke en goed doordachte interface toegewezen belangrijke plek in een intelligent systeem. Hij moet weerspiegelen de belangrijkste doelstellingen en niet overladen met onnodige functies en componenten. Een hoogwaardige smart home-interface is een onmisbaar onderdeel van het systeem, het staat garant voor een gemakkelijke en doeltreffend management een intelligent huis waarmee de gebruiker eenvoudig en gemakkelijk kan werken.

Wat is interface

Deze definitie wordt opgevat als een methode van wederzijdse acties tussen de gebruiker en het systeem via een specifiek apparaat, en in dit weloverwogen geval is het Touchpad.

Om comfort en plezier te krijgen van de interactie ermee, is het noodzakelijk om de belangrijkste vragen van de interface op te lossen: hoe zal het scherm eruit zien? Welke knoppen moeten erop worden weergegeven? Zal het gemakkelijk zijn om de functies die er al zijn te veranderen? Hoe kan ik het gemakkelijker maken om de gewenste parameters te vinden?

Wat de interface bevat

Als we het in een bredere interpretatie beschouwen, dan vertegenwoordigt het de basis waarop verschillende manieren gebruikerscontact met het "smart home"-systeem. "Communicatie" met haar wordt bereikt met behulp van verschillende apparaten.

Bijvoorbeeld:

• aanraakpaneel;
• afstandsbediening;
• drukknoppanelen, schakelaars en panelen;
• mobiele telefoon via gsm-oproepen en sms-berichten;
• een bedieningsapparaat via internet (computer, tablet, smartphone);
• spraakbesturing.

Wat het zou moeten zijn

Het Smart House systeem is een complexe constructieve samenstelling. De intrinsieke complexiteit moet echter niet zo complex zijn als je kunt gebruiken, maar zo eenvoudig mogelijk. Waar moet u op letten bij het kiezen van een interface.

Dit zijn de belangrijkste principes:

• Eenvoud en gemak... Het beheren van scripts en functies zou niet tijdrovend moeten zijn, maar moet met eenmalige klikken gebeuren. De interface moet duidelijk en eenvoudig zijn voor zowel familieleden als kinderen. Maar alleen Nodige informatie moet naar het scherm komen en de pictogrammen moeten zo zijn dat ze gemakkelijk kunnen worden herkend. Een duidelijk en logisch besturingsalgoritme.
• Veiligheid... De interface moet de mogelijkheid bieden om sommige functies te blokkeren om het starten van een ongewenste functie te voorkomen onbekenden of kinderen. Afzonderlijke pagina's moeten met een wachtwoord worden beveiligd.
• Harmonisch ontwerp. Intelligent huis moet in alles mooi zijn. En de interface is geen uitzondering, want elk apparaat, of het nu een controller of een sensor is, is een integraal onderdeel van het interieur en moet harmonieus in het ontwerp worden geïntegreerd. Zelfs ingebouwde panelen mogen er niet uit opvallen, maar het gezicht van het interieur zijn. Gelukkig zijn er veel kleurschakeringen, omslag grafische thema's en iconen om een ​​uniforme stijl te creëren.

Aan al deze eisen wordt volledig voldaan, bijvoorbeeld door de webinterface van een smart home van een blokkolomorganisatie. Het eerste blok of een groep ervan wordt bijvoorbeeld gebruikt op bewakingscamera's om informatie weer te geven, het tweede - op het verwarmingssysteem, het derde - op energieapparaten om de status van apparaten of energieverbruik aan te geven.

Eindelijk

Normale systeemwerking kan niet worden bereikt zonder een interface. Werkingsprincipe universele remedie beheer is voornamelijk gebaseerd op de mogelijkheid om toegang te krijgen tot internet, dat wil zeggen op het platform dat het mogelijk maakt om complexe automatiseringssystemen te besturen. Bovendien is de interface intelligent systeem smart home staat garant voor contactinformatie en functionaliteitsondersteuning.

Het systeem moet compatibel zijn met elke persoonlijke computer of mobiele apparaten op verschillende platforms.

Net zoals gemeenschappelijke interfaces, het systeem omvat: lokale fondsen functioneel beheer. De meeste van hen zijn vertegenwoordigd verschillende soorten schakelaars, aanraak- en toetsenpanelen met beperkte functionaliteit.

Een apparaat dat bijvoorbeeld in een ruimte op een van de muren is geïnstalleerd, kan verlichting en klimaat regelen. Door op de toetsen te drukken, definieert u de noodzakelijke bewerkingen - doe een zwak licht aan, verhoog de temperatuur in de kamer, enz. U kunt een aantal scriptfuncties opnemen.

Een hoogwaardige Smart Home-interface is altijd gebaseerd op een krachtige softwareplatform... Op basis hiervan maakt de integrator visualisaties voor een specifiek project. De eerste is een tool, de tweede is een product dat is gemaakt met zijn hulp (net als het AutoCAD-programma en een tekening, tekstverwerker en tekst).

Er zijn twee benaderingen voor het kiezen van een platform: 1. het gebruik van "native" software die wordt geleverd door de fabrikant van het onderdeel, en 2. het implementeren van een softwareproduct van derden.

Native applicatie

Zoals we in het artikel vermeldden, zijn er veel domotica-protocollen en zelfs meer hardwarefabrikanten. Bedrijven als Crestron, AMX, Vantage, RTI, HDL, ABB, Gira, Jung, Schneider-Electric, Vimar bieden oplossingen voor mobiele toestellen compleet met aanraakbedieningspanelen of gespecialiseerde visualisatieservers.

• De softwarelicentie wordt niet apart aangeschaft, maar het touchpad zelf of de server is vrij duur.
• De graphics en structuur van zo'n interface zijn gemaakt door de ontwikkelaars. Dit legt echter bepaalde beperkingen op: aanpassing aan een specifiek project is alleen mogelijk binnen strak gedefinieerde kaders.
• De editors zijn vrij eenvoudig te gebruiken en het is handig voor de programmeur om ermee te werken.
• Er zijn interessante propriëtaire plug-ins beschikbaar (klok en wekker, vooraf geïnstalleerde scripts).
• De functionaliteit is vooraf gedefinieerd en er is geen manier om specifieke problemen op te lossen.
• Alleen compatibel met de automatiseringsstandaard waarvoor de apparatuur is bedoeld.
• Integratie met andere apparatuur is alleen mogelijk als deze door de fabrikant wordt geleverd. Zo zijn bijvoorbeeld bijna alle applicaties compatibel met de populaire Sonos audiosystemen, maar zal het bijvoorbeeld niet lukken om er verbinding mee te maken.

Gebruik "native" softwareproducten fabrikanten is het naar onze mening in meerdere gevallen aan te raden.

Aanvankelijk als u een homogeen systeem heeft waarop u geen apparatuur wilt aansluiten die andere protocollen ondersteunt.
ten tweede als u van plan bent om aanraakgevoelige wandpanelen te installeren.
Ten derde als uw project specifiek is ontworpen voor: domotica- beheer van het comfort van een huisje of appartement.

Als u niet van plan bent om touchpads te kopen, heeft de tweede optie wellicht de voorkeur.

Toepassing van derden

Er zijn meerdere software systemen ontworpen om "Smart Home" vanaf mobiele apparaten te bedienen. Naar onze mening zijn de meest interessante iRidium en Evika. Ze bieden vergelijkbare mogelijkheden, we gebruiken iRidium vaak, dus laten we erover praten.

Het iRidium-complex is gepositioneerd als besturingssysteem voor een smart home, wat het ook is. Het wordt gebruikt voor particuliere, commerciële, industriële faciliteiten.

• Om Iridium in een project te gebruiken, moet u een licentie aanschaffen bij de ontwikkelaar. Er zijn verschillende soorten licenties, die verschillen in het aantal aangesloten mobiele apparaten en de lijst met compatibele apparatuur.
• De applicatie is compatibel met alle belangrijke automatiseringsprotocollen en kan tegelijkertijd verschillende fysiek niet-gerelateerde subsystemen besturen. Voor de gebruiker vindt alle besturing plaats vanuit één interface.
• Het grafische gedeelte is in hoge mate aanpasbaar. U kunt standaard of individueel ontworpen sjablonen gebruiken, elke structuur en elke klantwens implementeren.
• Kan op elk apparaat worden geïnstalleerd optionele uitrusting(server of processor) is niet vereist.
• Het opzetten en tekenen van de interface is een nogal arbeidsintensief proces.

We geven de voorkeur aan de tweede optie als:

• De ingelijste iPad wordt gebruikt als aan de muur gemonteerde aanraakpanelen;
• het systeem is samengesteld en u moet de besturing van verschillende apparatuur in één interface opnemen;
• u wilt een gepersonaliseerd en passend ontwerp voor uw project;
• het is noodzakelijk om automatisering te integreren met software van derden, bijvoorbeeld

Artdirector Lev Eidinov deelde met de redactie van de site een verhaal over het concept van SmartShell - een applicatie voor een "slim" huis, waarin hij augmented reality gebruikte.

Ik bestudeer al heel lang het vakgebied Internet of Things en 'slimme' elektronica. Naar mijn mening is dit de toekomst, waar geen ontkomen aan is. "Slimme" telefoons en tv's, horloges en auto's - nu zal je hier niemand mee verrassen. En in de toekomst zal het aantal dingen met het voorvoegsel "smart" gestaag groeien. Dit is een onderwerp voor een apart gesprek, maar vandaag wil ik het hebben over het onderwerp van het "slimme" huis, en meer specifiek, de interface.

Ondanks het feit dat smart home-systemen zijn ontworpen om het leven van mensen gemakkelijker te maken, zien de interfaces van besturingssystemen er ingewikkeld, overbelast en onlogisch uit. De meeste zijn een onbegrijpelijke, grafisch luidruchtige puinhoop.

Ik ben het volledig eens met het paradigma " beste interface- dit is de afwezigheid van een interface ", daarom heb ik geprobeerd de interactie van de gebruiker met het ecosysteem van het "slimme" huis zoveel mogelijk te vereenvoudigen. Ik wil graag het concept van SmartShell onder uw aandacht brengen - een slimme thuisinterface in augmented reality.

Sensoren en actuatoren (apparaten die commando's uitvoeren: schakelaars, stopcontacten, waterkleppen) zijn de hoofdrolspelers in het smart home-ecosysteem. In SmartShell heeft elke actuator een virtueel display waarmee de gebruiker het apparaat bestuurt.

Door de smartphonecamera op het gebied van de kamer te richten, ziet een persoon direct de aangesloten apparaten. Dit maakt het beheer eenvoudig en gemakkelijk. De interface is gebouwd op standaard iOS-elementen- hierdoor kunt u de tijd die u aan training besteedt tot een minimum beperken.

Door de smartphone over het gebied van de kamer te richten, kan de gebruiker de aangesloten apparaten zien en bedienen. Maar voor eenvoudige interface technische, interne moeilijkheden liggen. De grootste is positionering.

Meestal gebruiken smart home-applicaties positioneringssystemen voor smartphones (GPS, GLONASS, signaal van communicatietorens), die niet de vereiste nauwkeurigheid bieden en binnenshuis niet altijd correct werken. Om dit probleem op te lossen, wordt voorgesteld om synergetische positionering te gebruiken op basis van gezamenlijke analyse van gegevens verkregen uit verschillende bronnen:

Met behulp van de interactie van de bovenstaande systemen is het mogelijk om een ​​positioneringsnauwkeurigheid van 20 cm te verkrijgen, wat acceptabel is voor dit concept.

Dus bij het starten van de applicatie wordt de gebruiker naar het hoofdscherm geleid. In het midden bevindt zich het cameravenster, dat de aangesloten apparaten weergeeft.

In deze modus kan de interface in liggende stand werken.

Elk apparaat komt overeen met een speciaal gebied in augmented reality ("actuatorprojectie"), naast het pictogram van de overeenkomstige sectie. Totaal aantal partities weergegeven op hoofdscherm, vijf: "Klimaat", "Media", "Licht", "Beveiliging" en "Apparaten". Ze bevinden zich onderaan het scherm en zijn standaard ingeschakeld.

Wanneer de regelaar in de modus "Indeling" wordt geschakeld, worden de aangesloten apparaten weergegeven op de ruimtelay-out. Dit is handig wanneer u apparaten uit het zicht moet gebruiken. De temperatuur wordt aangegeven in het centrale deel van de kamer. De schaal wordt aangepast met een standaard vingerspreiding.

Wanneer u op de sectieknop onderaan het scherm klikt, worden de bijbehorende apparaten niet meer weergegeven. Als u er nogmaals op drukt, wordt het display opnieuw geactiveerd. De onderstaande schermen bevatten de secties Media en Licht in de modi Camera en Lay-out. Apparaten van andere partities worden niet weergegeven.

Door op het gemarkeerde gebied te klikken, wordt de gebruiker naar de bedieningspagina van de actuator geleid. Elk apparaat heeft zijn eigen parameters die kunnen worden aangepast.

Apparaatnamen kunnen worden bewerkt. Dit helpt de gebruiker om sneller te navigeren en apparaten te onthouden. De aan / uit-knop bevindt zich helemaal bovenaan om onbedoeld indrukken te voorkomen. Aan de andere kant is de toegang tot de instellingen vereenvoudigd.

Zoals eerder vermeld, is elk apparaat uitgerust met een Bluetooth-baken dat helpt bij het positioneren en ook informatie over de temperatuur van het apparaat verzendt.

Het systeem maakt onderscheid tussen commando's die in tegenspraak zijn met het automatiseringsscenario. Een licht in het midden van de kamer (eerste scherm hierboven) kan bijvoorbeeld op elk moment worden ingeschakeld, hoewel de aan-timer is ingesteld op specifieke uren. De keukenvloer (tweede scherm hierboven) is ingesteld om aan te gaan bij temperaturen onder de 20 ˚C. Inschakelen voor meer hoge temperatuur zal de instellingen kloppen en de gebruiker ziet een waarschuwing:

Controle. Door op het hamburgermenu aan de linkerkant van het hoofdscherm te klikken, wordt de gebruiker naar de controlepagina geleid.

De structuur van het "Bedieningspaneel" omvat secties van apparaten (met de toegevoegde sectie "Loodgieterswerk"), tellers en statistieken, beheer van componenten, huisconfiguratie, enzovoort.

Om de navigatie te vergemakkelijken, is het eerste niveau van het menu ontworpen als een glijdende lijst. In de secties met apparaten op dit niveau kunt u het type apparaat selecteren.

Op het tweede niveau kunt u kiezen: specifiek apparaat van de lijst. Er is ook algemene instelling apparaat groepen. Met zijn hulp kunt u bijvoorbeeld op alle airconditioners dezelfde temperatuur instellen of alle lichten uitschakelen.

Het derde niveau van het menu opent de instellingen, diagnostiek en beheer van een specifiek apparaat.

Vertelling met korte technische uitweidingen.

Hoe het allemaal begon

Dit verhaal begon bijna anderhalf jaar geleden. Een klant kwam bij ons met een “droomproject”.
Het bevel klonk kort en eenvoudig: herontwerp de gebruikersinterface huidige systeem slimme woning.
Als je naar het systeem kijkt, zie je een typische vertegenwoordiger van een smart home, waarvan er nu veel zijn, hier is het in het oude ontwerp.
Namelijk: saaie iconen van het web, slecht doordachte schermlogica, niet-ergonomisch gebruik van ruimte met een kleine resolutie, glamoureuze verloopknoppen en sensoren op de plattegrond gemaakt zoals de programmeur deed.

Maar de architectuur van het project was een behoorlijk slimme oplossing. Er was een server voor sensorbeheer en gegevensanalyse, een klein kastje waarmee je op drie manieren verbinding kon maken:

• MET thuis computer via een browser (zoals een router) naar de administratieve interface - om alles en iedereen te configureren
• MET touchpad bij de ingang van het huis - om alarmen, scenario's, camera's en sensoren te bedienen (we werden gevraagd om ermee te beginnen)
• Vanaf mobiele apparaten - om het huis overal te bedienen (in de eerste optie, via hetzelfde beheerderspaneel)

Na overleg met de klant is besloten om de interface in Windows-stijl 8, hoewel het zelf nog niet was uitgekomen, waren er alleen talloze screenshots op het net. We zullen de details van een dergelijk besluit weglaten, ik wil alleen zeggen dat het unaniem is aangenomen en dat we aan de slag zijn gegaan.
Het is vermeldenswaard dat we tegen die tijd enige ervaring hadden met het ontwerpen van interfaces die qua geest vergelijkbaar waren: het jachtbedieningspaneel (ze zijn afzonderlijke artikelen waard, maar de NDA is daar rigide), boordcomputer auto en hiel touchscreen kiosken.

Idee

Het onderwerp van het ontwerpen van een smart home-systeem heeft al lang mijn verbeeldingskracht geprikkeld. De oplossingen die er op de markt zijn, komen niet in de buurt van wat ik "Smart" kan noemen.

Laten we een voorbeeld bekijken

Het is donker geworden. Je moet het licht in de kamer aandoen. Je acties?
Hoe het meestal gaat- je staat op en doet het licht aan.
Volgens veel ontwikkelaars van automatiseringssystemen- je pakt de afstandsbediening en doet het licht aan.
Vaak zien ze hier geen alledaagse problemen. Ten eerste is de afstandsbediening misschien niet in de buurt, je moet nog steeds opstaan ​​om hem te vinden, en ten tweede, vergeet niet dat de meeste van deze apparaten nu met touch screen, dit betekent dat de afstandsbediening ook ingeschakeld moet zijn. Nieuwe mode- maak een afstandsbediening vanaf een tablet of telefoon ( aparte applicatie), wat de taak nog ingewikkelder maakt:
Sta op en zoek apparaat -> Scherm inschakelen of ontgrendelen -> App starten -> Zoeken gewenste sensor-> Winst.
Is het niet makkelijker om op te staan ​​en de schakelaar aan te zetten?
Smart home naar mijn idee- moet zelf het licht aandoen wanneer je het nodig hebt, rekening houdend met of je wakker bent of rust, de tijd van het jaar, het aantal mensen in de kamer, je locatie in de kamer en een heleboel factoren op basis van je eerdere beslissingen in soortgelijke situaties anticiperen op uw wensen. Anders is dit huis nauwelijks "slim" te noemen.
De afstandsbediening mag alleen in speciale gevallen worden gebruikt en mag niet het hoofdelement van de huisbediening zijn. In feite hoeft het "slimme" huis "helemaal niet te worden bestuurd - het zal alles zelf doen.

Maar dergelijke systemen zijn nog ver weg, we kunnen zeggen dat het vandaag onmogelijk is om dit te implementeren, dus we zullen verbeteren wat we kunnen, namelijk dezelfde afstandsbediening.

Het is gemakkelijker om het hoofdprobleem van deze oplossingen te laten zien met een bekende afbeelding:

Ja, bijna al dergelijke systemen zijn bedieningspanelen voor kernreactoren, die soms zelfs voor een gevorderde gebruiker moeilijk te begrijpen zijn.
Om de een of andere reden proberen ontwikkelaars zoveel mogelijk elementen op het scherm te passen, zoveel mogelijk mogelijkheden en daardoor zoveel mogelijk UX-problemen.

Dus wat is het idee?

Haal alles wat overbodig is uit het zicht, echt alles.
Als ik alleen het slaapkamerlicht wil uitschakelen, waarom zou ik dan de waterklepbedieningen in de keuken zien?
Als ik alle ramen in huis wil sluiten, dan wil ik dat met één knop doen en niet in elke sensor apart prikken.
Als ik het huis op alarm zet en er is niemand in huis, dan betekent dit dat overal de lichten uit moeten, de temperatuur omlaag, de ramen dicht, videobewaking aan. En dit alles moet gebeuren zonder mijn deelname!

Eén ring om ze allemaal te regeren. Eén knop - "Doe het goed".

De beste interface is degene die je niet ziet, waar je tijdens het werken geen aandacht aan besteedt, die alles voor je doet, of die je op onbewust niveau bestuurt, omdat:
a) je bent er zo aan gewend
b) het is duidelijk
Let jij op waar de Play-knop zit op Youtube? Waar is de knop om het browservenster te sluiten? Of waar is het Google-zoekvak?
Zullen honderden sensoren op één scherm van een smart home-systeem je in verdoving brengen?
Dat klopt, het enige dat eigenlijk van dergelijke systemen wordt vereist, is het oplossen van een soort van: specifieke taak(zoals Afspelen in de speler of Zoeken in de zoekopdracht). Daarom heeft het geen zin om alles weer te geven mogelijke controle op het scherm.

Niet zo eenvoudige taak in feite.

Eerste prototype.

Van de klant kregen we zijn visie ongeveer als volgt:

We hebben gekeken, nagedacht en het enige dat van de materialen is gebruikt, zijn de specificaties van sensoren en commando's (gebruikersscenario's)
We werden door verschillende punten in een frame gedreven:

• Het touchpad had geen MultiTouch-ondersteuning en had een resolutie van 1024 * 768 en 1024 * 600
• Metro-interface was nieuw en er was geen manier om het op tablets te voelen (8 was nog niet uit). We hadden echter een WP7-telefoon, wat enig inzicht gaf.
• De klant kon sommige punten in het systeem niet veranderen (ijzerbeperkingen, stijging van de kosten van het systeem, persoonlijke wensen, enz.)

Over het algemeen was het geen probleem om schermen te ontwerpen als: het hoofdmenu, videobewaking en intercom, weer overboord, systeemmeldingen en dergelijke, en het is niet nodig om erover te praten, het was de 1e versie, het zal verder interessanter zijn.
Alleen het hoofdscherm van de sensorbediening was problematisch. Ik zal over hem schrijven.

huisplan

Hier is een afbeelding van een typisch sensorbedieningsscherm met een huisplan van internet:

Vertel me, hoeveel van jullie begrijpen wat er op dit plan staat?
Begrijpt uw ​​kind dit plan? En je oma? En een vriend die de meeuwen is komen bekijken, gaat zich oriënteren?
Ik denk dat het probleem duidelijk is.

Het plan moet voor iedereen in één keer leesbaar zijn. Om dit te doen, moet je huis erop zichtbaar zijn, met je muurkleur en basismeubilair:

Idealiter moet het plan altijd ten opzichte van de windstreken worden geplaatst.
Een dergelijke oplossing is duurder en het herschikken van het meubilair zal het plan onnauwkeurig maken, maar hier is in ieder geval een compromis. Niets verhindert echter om elk plan in het project op te nemen, of zelfs zonder (we hebben ook zo'n oplossing ontworpen).
Trouwens, in de eerste versies voor de premiumklasse wilden ze een plan in 3D maken, maar de oplossing is veel duurder en het is overbodig, de vooruitzichten zijn voldoende.

Sensoren

Het meest een groot probleem - visuele presentatie De controlesensoren op het plan waren sneller dan verwacht opgelost. Zoals ik me nu herinner, zaten de ontwerper en ik en tekenden WireFrames op papier toekomstig systeem, en de oplossing kwam vanzelf:

Hieronder heb ik een video bijgevoegd die laat zien hoe het werkt.

Een knop

"Nou, waar is hier één knop?"- je vraagt.
En hier is waar:
"Eén knop" is een conventie, waarmee ik één functie bedoel - de belangrijkste en naar voren gebracht.
Onze resolutie is klein, het is een slecht idee om een ​​kleurrijk plan te tonen en je daaraan te houden met sensoren "ik wil echt niet".
Het is de moeite waard eraan te denken dat ik nu de creatie van een stationaire versie van de afstandsbediening beschrijf (dat wil zeggen, dit is een aan de muur gemonteerde monitor).
De belangrijkste scenario's voor typisch gebruik van dit paneel zijn als volgt:

• De persoon opent de voordeur -> het paneel is geactiveerd en waarschuwt ons dat het nodig is om het alarm uit te schakelen -> het wachtwoord is ingevoerd -> de scripts die voor dit huis zijn ingesteld, worden geactiveerd.
• hetzelfde bij het verlaten van het huis - zet de wekker
• Als er iemand aanbelt - we kijken wie, via de intercom, die over elk scherm wordt weergegeven als we vanaf de straat bellen en openen de deur.
• Activering van aangepaste scenario's - bijvoorbeeld de "Nacht"-modus, wanneer deuren en ramen zijn vergrendeld, videobewaking is ingeschakeld, de temperatuur daalt, enz.

Het bedienen van individuele sensoren vanaf dit paneel is niet erg handig (wel, oordeel zelf, ga je de helderheid van het licht in de slaapkamer aanpassen terwijl je in de gang bent?)
Bediening is mogelijk als de panelen door het hele huis zijn ingebouwd.
Maar volgens de klant is deze functie daar nodig, je moet het doen.

Oplossing

Bij het betreden van het scherm ziet de gebruiker alleen de plattegrond van het huis. De sensoren zijn zichtbaar als hele kleine puntjes (om te weten waar ze zijn).
Naast de mogelijkheid om van verdieping te wisselen, heeft de gebruiker slechts 2 opties:
1) Activeer het optiepaneel, waarmee u bijvoorbeeld alle thermostaten in huis naar het plan kunt brengen en de temperatuur kunt aanpassen zoals niet voorzien in de scenario's, of bijvoorbeeld de stopcontacten in de garage activeert.

2) Vergroot de plattegrond. Hoe meer we verhogen, hoe meer sensoren van een klein punt veranderen in een volwaardige besturing van besturing, sensoren verschijnen afhankelijk van de prioriteit. Dus zonder de ruimte te vervuilen.

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

integratie

De oplossing van de klant lag in WPF, en het integreren van design in XAML is mijn belangrijkste specialisatie. Daarom hebben we niet alleen "afbeeldingen" gemaakt, maar het ontwerp ook in de praktijk gebracht.
Hoe we de besturing en hun XAML hebben gemaakt, geanimeerd en dit alles gekoppeld aan het plan van het huis, je kunt een apart schrijven groot artikel, maar hoe minder concurrenten weten, hoe waardevoller wij als specialisten zijn. En het heeft geen zin om de oplossing van een stationaire console te beschrijven, aangezien verder zullen we ons concentreren op de tabletversie.

Wie niet alleen geïnteresseerd is in het sensorbedieningsscherm, maar ook in al het andere, kan het eindresultaat in foto's zien
Of op het filmpje:

In totaal kostte het ons ongeveer 5 maanden om het te ontwerpen, ontwerpen en implementeren in een demo-applicatie, die later rechtstreeks naar de programmeurs van de klant ging om hardware en logica te binden.
En, zoals gewoonlijk gebeurt, wil je, als je een project hebt gemaakt, het altijd opnieuw maken, omdat je al ziet hoe je het beter kunt maken, zijn tekortkomingen en zwakheden, en zwakke punten er waren veel.

Terwijl ik XAML aan het doen was, verscheen er een preview van een Windows-ontwikkelaar, en ik haastte me onmiddellijk om het aan te raken op mijn desktop en op mijn tablet (Aser Iconia W500). Er werden ook officiële richtlijnen vrijgegeven, waardoor de gebruikersinterface van Metro op een nieuwe manier kon worden bekeken.

Deel 2.

Het enige wat we deden is bullshit

De klant was zeer tevreden, zeker toen we een werkende demo presenteerden. We kunnen zeggen dat er geen limiet was aan zijn geluk. Ik zag de tekortkomingen van het project, maar tegelijkertijd wist ik dat het alleen mogelijk was om het tot perfectie te brengen door er samen met het team veel tijd aan te besteden. goede programmeurs maar het maakte niet uit dit stadium product ontwikkeling.
De klant heeft net als ik al gekeken nieuwe ramen 8, en we vonden haar allebei erg goed. Daarom reageerde hij op mijn suggestie: “Laten we een versie voor de tablet maken?” zeer positief. Ik stelde voor om het in de muur ingebouwde systeem niet te veranderen. het ondersteunde MultiTouch niet, het had geen zin om daar een acht te plaatsen. Het herontwerp werd overgelaten tot betere tijden, met de nadruk op Metro / Windows. winkel app(precies Metro, omdat hierdoor de demo op de markt kan worden verspreid om klanten aan te trekken).
Helaas bleek het budget van de klant niet rubberachtig te zijn, maar ik was het ermee eens dat we een versie voor Windows 8 presenteerden. Dit was deels nodig, we hadden een heel goed gedaan in de portefeuille zelfs vóór de release van de acht.

Tweede prototype.

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

De volledige versie van het ontwerp kan zijn:

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 het water in te gaan, de ontwerper kon me niet geven wat ik wilde, want dan had hij te weinig ervaring met Windows8

Daarom werd besloten om alles opnieuw te doen, maar om samen met mij aan het ontwerp te werken, alles tegelijk in XAML.
Dit zal het probleem van het gebrek aan Guidlines-vaardigheden van de ontwerper oplossen, en het zal mij, als ontwikkelaar, het beeld niet laten bederven.

V2-ontwerp en gelijktijdige integratie

Om eerlijk te zijn, het was verdomd moeilijk. Ik was klaar om de ontwikkelaars van Blend 5 te vermoorden, want vergeleken met versie 4 was het een buggy, niet-werkend, constant vliegend monster. Nu is de situatie beter, maar er ontbreken enkele punten.
VS 2012 heeft me gered, het bevatte gedeeltelijk de mengfunctionaliteit voor het beheren van stijlen.
De nieuwe XAML is een onderwerp voor een apart gesprek, de helft van de oude klassen is verdwenen, de standaardstijlen zijn nutteloos, de triggers zijn verwijderd - waardoor alleen de onaangename visuele toestanden overblijven. Ik moest het project ook helemaal opnieuw schrijven toen Win 8 werd bijgewerkt naar Relize Preview, maar die veranderingen waren ten goede.

Nieuw concept

Nieuw apparaat - nieuwe aanpak... Ik moest het idee van het startscherm heroverwegen, nu was het niet nodig en werd alle navigatie naar de bovenste AppBar gebracht.
Beneden met alle knoppen van het scherm: Zoom - met een gebaar hebben we een volwaardige MultiTouch, alle sensorbedieningen - in de onderste AppBar.
Nu begint de applicatie onmiddellijk met het tonen van het huisplan (idealiter zou het moeten volgen in welke kamer de gebruiker zich bevindt en het onmiddellijk iets vergroten, in het midden positioneren).

Open de applicatie:

We maken een Zoom-gebaar (of met de muis CTRL + wiel):

Of we krijgen de AppBar:

Bediening

De sensorbediening moest helemaal opnieuw worden geschreven en native gemaakt met normale Windows 8-bewegingsondersteuning.
Er werd rekening mee gehouden dat we nu op 2 manieren controle hebben, met vingers en een muis.
Werd ook gelikt verschijning sensoren, het is stijlvoller geworden:

Ik was vooral onder de indruk van de snelheid van de applicatie. De prestaties in Windows8-toepassingen zijn orden van grootte hoger dan die van WPF. Ik was bang dat de tablet het systeem niet zou beheersen, maar alles vliegt gewoon. Microsoft heeft zichzelf overtroffen, nu hoe complex de XAML ook is, alles werkt snel. Als je in WPF zelfgemaakte algoritmen moest maken voor het cachen van schermen voor snelle animatie, nadenken over de complexiteit van XAML-vertakkingen, het aantal elementen in de controleboom optimaliseren, dan maakt het in de acht niet uit, animatie van elke complexiteit en een willekeurig aantal objecten is altijd soepel.

Optie zonder abonnement

Er was geen behoefte aan sensoren met gebarenondersteuning, er was geen noodzaak om ruimte te besparen. Het bleek natuurlijk niet zo indrukwekkend, maar goed.

Scripts

Het aansturen van sensoren is zeker goed, maar zoals ik al schreef is het beter om er basishandelingen mee te automatiseren.
Om dit te doen, heeft de beheerinterface basisvoorinstellingen voor scripts en de mogelijkheid om uw eigen scripts te maken.

Op een tablet ziet het er zo uit:

Een knop

We zijn niet vanaf het begin afgeweken van dit concept.
Vaak wordt de vraag gesteld: "Waar is het werk voor een half jaar hier?"
En dit beschouw ik als lof. Dit betekent dat ik heb bereikt wat ik wilde. De gebruiker ziet gewoon niet dat de functionaliteit van de applicatie vrij groot is, want alleen wat nodig is op dit moment... De gegevens en de benodigde schermen worden zelf getoond aan de gebruiker, niet aan de gebruiker die ernaar zoekt. De interface is vanaf de eerste minuten duidelijk, niet beangstigend met een overvloed aan knoppen, en tegelijkertijd wordt elke actie "één - twee - drie" uitgevoerd.
Het duurde 3 maanden om alleen de versie voor Windows 8 te maken (rekening houdend met de ontwikkelingen in de eerste versie, zou het meer vanaf het begin zijn geweest).

Trouwens. Is het je opgevallen dat overal in Windows een element als PopUp altijd hetzelfde is? Het maakt niet uit wat we openen, het pop-upformulier is altijd één, als u een ander opent, wordt de vorige gesloten. Ik had een probleem in de interface: na activering sloot de sensor na bepaalde tijd zelf, maar als je de ene activeert, en dan de andere tegelijk - ze waren allebei geopend, ziet het er niet erg esthetisch en begrijpelijk uit. Met dank aan mijn tweede ontwerper voor deze fitback. Hij was niet direct betrokken bij het project, maar dankzij zijn tips is het een en ander gerealiseerd.
Ik heb een week geworsteld om dit probleem op te lossen.
En ik heb het opgelost...
Een regel code.
Moraal: soms voor het meest eenvoudige oplossingen er zit veel werk verstopt.

Microsoft-fitbacks

Afgelopen voorjaar hield Microsoft een promotie waarbij alle ontwikkelaars konden krijgen gratis aanbevelingen om de UI / UX van hun producten te verbeteren. En we waren op tijd voor deze verdeling.
Eerlijk gezegd was ik bang dat ze alles aan diggelen zouden slaan, dit was mijn eerste ervaring met de acht. Maar alles verliep soepel, volgens de klant waardeerde Microsoft de kwaliteit van de applicatie zeer. We hebben verschillende kleine aanbevelingen ontvangen om de bruikbaarheid te verbeteren (overigens zeer competente), bijvoorbeeld:

Zeer correcte opmerking, let op. Als we een object selecteren en er verdere acties mee mogelijk zijn, zou de AppBar zichzelf moeten openen! Door de gebruiker deze zeer mogelijke acties te laten zien.
Over het algemeen is het probleem veel breder, ik zal het zo zeggen - de voor de hand liggende acties moeten zelf worden uitgevoerd, het is niet nodig om te wachten tot de gebruiker het doet.

Ik heb alle wijzigingen in minder dan een dag aangebracht. En mijn ziel voelde warm en kalm aan.

Totaal

Op dit moment is het systeem in ontwikkeling, het gaat niet zo goed met de klant als hij zou willen. Daarom schrijf ik na bijna een jaar een bericht, de releasedatum is nog onbekend.
De applicatie kan worden aangeraakt vanuit de Windows Store door degenen die Windows 8 hebben, maar daarvoor moet je de Turkse locale instellen in de instellingen:
Configuratiescherm -> Tijd, taal en regio -> Regio -> Locatie wijzigen -> Turkije (vergeet het dan niet terug te sturen, anders wordt de markt in het Turks getoond)
Maar nu in de Store is er alleen een uitgeklede versie die de belangrijkste functies demonstreert. Op een dag zal het systeem af zijn, en aangezien we de oude opnieuw aan het maken waren, is de kans hierop groot. Ik hoop dat de zaken van de klant bergopwaarts gaan en dat we aan het project blijven werken. En daar is nog veel werk: webversie, website, huisstijl (we hebben alleen het logo en het idee ontwikkeld, maar we moeten het nog ontwikkelen), versie voor iOS, Android, WP8. Ja, en de versie voor Windows 8, ik zou nu een beetje veranderen, we hebben het afgelopen zomer afgemaakt, sindsdien is er veel veranderd in WIndows en mijn vaardigheden op dit gebied zijn gegroeid.

En tot slot een video over de versie op Windows 8 (bekijk HD)

Er is ook een video van de klant, maar deze is van zeer slechte kwaliteit.

ps. Schrijf in PM over fouten in het artikel.