Controle vanaf mobiele apparaten. Wat zijn de webinterfaces voor het beheren van een smart home?

De interface is wat de gebruiker " slimme woning“Je moet het elke dag zien en aanraken. Daarom krijgt een duidelijke en doordachte interface prioriteit belangrijke plek in een intelligent systeem. Hij moet weerspiegelen de belangrijkste taken en niet overbelast worden met onnodige functies en componenten. Een hoogwaardige smart home-interface is een onmisbaar onderdeel van het systeem en garandeert gebruiksgemak doeltreffend management een intelligente woning die gemakkelijk en eenvoudig door de gebruiker kan worden bestuurd.

Wat is een interface

Deze definitie verwijst naar de methode van wederzijdse acties tussen de gebruiker en het systeem via een specifiek apparaat, en in dit geval is het Touchpad.

Om comfort en plezier uit de interactie ermee te halen, is het noodzakelijk om de belangrijkste interfaceproblemen op te lossen: hoe zal het scherm eruitzien? Welke knoppen moeten erop worden weergegeven? Zal het gemakkelijk zijn om de reeds bestaande functies te veranderen? Hoe kan ik het gemakkelijker maken om de parameters te vinden die ik nodig heb?

Wat houdt de interface in?

Als we het in een bredere interpretatie beschouwen, vertegenwoordigt het een basis waarop verschillende manieren gebruikerscontact met het smart home-systeem. “Communicatie” ermee gebeurt via verschillende apparaten.

Bijvoorbeeld:

  • aanraakpaneel;
  • afstandsbediening;
  • drukknoppanelen, schakelaars en panelen;
  • mobiele telefoon via GSM-oproepen en SMS-berichten;
  • besturingsapparaat via internet (computer, tablet, smartphone);
  • stembediening.

Hoe zou hij moeten zijn?

Het Smart Home-systeem is een complexe structurele samenstelling. De interne complexiteit mag echter niet zo groot zijn bij het gebruik ervan, maar moet zo eenvoudig mogelijk zijn. 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 veel tijd moeten kosten, maar zou met eenmalige klikken moeten gebeuren. De interface moet duidelijk en eenvoudig zijn voor zowel oudere familieleden als kinderen. Maar alleen Nodige informatie moeten op het scherm verschijnen en de pictogrammen moeten zodanig zijn dat ze gemakkelijk kunnen worden herkend. Duidelijk en logisch besturingsalgoritme.
  • Veiligheid. De interface moet de mogelijkheid bieden om sommige functies te blokkeren om te voorkomen dat ongewenste functies worden uitgevoerd aan vreemden of kinderen. Individuele pagina's moet met een wachtwoord beveiligd zijn.
  • Harmonieus ontwerp. Intelligent huis moet in alles mooi zijn. En de interface vormt daarop geen uitzondering, aangezien elk apparaat, of het nu een controller of een sensor is, een integraal onderdeel van het interieur is en harmonieus in het ontwerp moet worden geïntegreerd. Zelfs de inbouwpanelen mogen er niet van opvallen, maar het gezicht van het interieur zijn. Gelukkig zijn er veel kleurschakeringen, grafische thema's en pictogrammen om een ​​uniforme stijl te creëren.

Aan al deze eisen wordt bijvoorbeeld volledig voldaan door de webinterface van een smart home van een blokkolomorganisatie. Het eerste blok of de eerste groep 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 het energieverbruik aan te geven.

Eindelijk

Normaal functioneren van het systeem kan niet worden gegarandeerd zonder een interface. Werkingsprincipe universele remedie De controle is voornamelijk gebaseerd op de mogelijkheid om toegang te krijgen tot internet, dat wil zeggen op het platform dat het mogelijk maakt om automatiseringssystemen volledig te controleren. Bovendien de interface intelligent systeem smart home staat garant informatie contact en functionaliteitsondersteuning.

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

Net zoals gemeenschappelijke interfaces, opgenomen in het systeem lokale middelen functioneel beheer. Voor het grootste deel worden ze vertegenwoordigd door verschillende soorten schakelaars, aanraak- en toetspanelen met een beperkte functionaliteit.

Een apparaat dat in een kamer op een van de muren wordt geïnstalleerd, kan bijvoorbeeld de verlichting en het klimaat regelen. Door op de toetsen te drukken, bepaalt u de noodzakelijke handelingen: doe het weinige licht aan, verhoog de kamertemperatuur, enz. U kunt een aantal scriptfuncties inschakelen.

Dit is een huisbesturingssysteem op basis van scenario's. Hiermee kunt u willekeurige logica (scenario's) koppelen aan verschillende gebeurtenissen in huis (sensoractivering, het indrukken van knoppen, gebeurtenissen van externe diensten, bijvoorbeeld het ontvangen van e-mail of berichten op Twitter). Het systeem heeft een modulaire architectuur, alle functionaliteit zit in plugins. Als je iets moet toevoegen nieuw type evenementen of nieuwe “home API”-opdrachten, u hoeft hiervoor alleen maar een plug-in toe te voegen.

Wij hadden hem in februari. De eerste versie bevatte een raamwerk voor domotica: een systeem van plug-ins en infrastructuur daarvoor (zodat plug-ins hun API en evenementen kunnen beschrijven, maar ook de API kunnen gebruiken en zich kunnen abonneren op elkaars evenementen). Nu nadert de release van de tweede versie, met als belangrijkste kenmerk een nieuwe webinterface.

De gebruikersinterface is nu een modulaire applicatie met één pagina. Plug-ins kunnen hun gebruikersinterface beschrijven in de vorm van html/js/css-bestanden in DLL-bronnen. Klantdeel De gebruikersinterface is gebaseerd op backbone.js en marionette.js, modules worden geladen via require.js. Over het algemeen bleek het best handig voor plug-inauteurs - zelfs zonder diepgaande kennis Java-script Als u naar de voorbeelden kijkt, kunt u een volwaardige gebruikersinterface beschrijven die automatisch wordt verbonden met de home control-interface.


De thuisbeheerinterface bestaat uit “secties”; elke plug-in kan meerdere secties bevatten (of kan er slechts één bevatten of helemaal geen interface). Secties zijn verdeeld in 2 groepen: systeem ( verschillende instellingen, bijvoorbeeld de sectie Home-scripts) en gebruiker (secties waarmee gebruikers werken Alledaagse leven, bijvoorbeeld ‘weersvoorspelling’ en ‘wekkers’).

Er is ook een speciale pagina - "desktop" (ook bekend als " Startpagina"). Er zijn "elementen" Startpagina» - kleine panelen die weergeven bruikbare informatie, en wanneer u erop klikt, wordt een pagina geopend of wordt er een actie uitgevoerd.

Startpagina

gedeelte met wekkers (in juiste tijd speelt muziek af of start scriptuitvoering)

sectie met weersvoorspelling (gedownload van internet)

scenario-editor (in de schermafbeelding is er een scenario dat foto's maakt van bezoekers die op de deurbel drukken)

gebeurtenisabonnementspagina: de eerste vervolgkeuzelijst bestaat uit gebeurtenissen in het systeem (ze worden beschreven in de plug-ins), de tweede lijst bestaat uit scripts

Interface past zich aan kleine schermen aan mobiele toestellen.

startpagina op een klein scherm

weerpagina op een klein scherm

Zoals ik al schreef, nadert het systeem snel de release van versie 2, bron staat op github. Er is nog steeds een mogelijkheid om iets te veranderen. Ik zou heel graag opbouwende kritiek en suggesties voor verbetering willen ontvangen (en als iemand een pull-request stuurt, ben ik gewoon blij).

Als iemand het live wil proberen en zien hoe het werkt, schrijf me dan prive bericht- Ik stel een nieuwe distributie voor je samen.

PS.
Ik heb trouwens geprobeerd aan dit project te werken en het leverde verbluffende resultaten op. We zijn nu in de 8e week waarin we in deze modus werken (langste reeks 49 dagen). Gedurende deze periode heeft het project meer vooruitgang geboekt dan in de voorgaande zes maanden. Ik ben erg tevreden met het resultaat en ben van plan zo lang mogelijk in deze modus te blijven werken.

Een verhaal met korte technische uitweidingen.

Hoe het allemaal begon

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


Maar de architectuur van het project was een behoorlijk slimme oplossing. Er was een sensorbeheer- en data-analyseserver, een klein kastje waar op drie manieren verbinding mee kon worden gemaakt:

  • MET thuis computer via een browser (zoals een router) naar de administratieve interface - om van alles en nog wat te configureren
  • MET touchpad bij de ingang van het huis - om alarmen, scenario's, camera's en sensoren te bedienen (ons werd 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 werd besloten om de interface in te bouwen Windows-stijl 8, hoewel deze zelf nog niet was uitgebracht, waren er slechts talloze screenshots op internet. Laten we de details van dit besluit achterwege laten. Ik wil alleen zeggen dat het unaniem werd aangenomen en dat we aan de slag gingen.
Het is de moeite waard hier te vermelden dat we tegen die tijd enige ervaring hadden met het ontwerpen van interfaces die qua geest vergelijkbaar waren: bedieningspanelen voor jachten (ze verdienen aparte artikelen, maar er zijn strikte geheimhoudingsverklaringen), een boordcomputer voor auto's, en nog veel meer kiosken met touchscreen.

Idee

Het onderwerp van het ontwerpen van een smart home-systeem prikkelt al lang mijn verbeelding. De oplossingen die op de markt bestaan, komen niet in de buurt van wat ik ‘slim’ zou noemen.

Laten we eens kijken naar een voorbeeld

Het is donker geworden. Je moet het licht in de kamer aandoen. Je acties?
Hoe het meestal gebeurt- je staat op en doet het licht aan.
Volgens veel ontwikkelaars van automatiseringssystemen- je pakt de afstandsbediening en doet het licht aan.
Vaak worden banale problemen hier niet gezien. 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 er nu mee zijn uitgerust touch screen betekent dit dat de afstandsbediening ook ingeschakeld moet zijn. Nieuwe mode- maak een afstandsbediening vanaf een tablet of telefoon ( aparte applicatie), wat de taak nog moeilijker maakt:
Sta op en zoek het apparaat -> Schakel het scherm in of ontgrendel -> Start de applicatie -> Vind benodigde sensor-> Winst.
Zou het niet gemakkelijker zijn om op te staan ​​en de schakelaar aan te zetten?
Smart home naar mijn mening- u moet zelf het licht aandoen wanneer u het nodig heeft, waarbij u rekening houdt met of u wakker bent of aan het rusten bent, de tijd van het jaar, het aantal mensen in de kamer, uw locatie in de kamer en een heleboel andere factoren, op basis van op uw eerdere beslissingen in soortgelijke situaties, anticiperend op uw wensen. Anders is dit huis nauwelijks ‘slim’ te noemen.
De afstandsbediening mag alleen in speciale gevallen worden gebruikt en mag niet het belangrijkste onderdeel van de huisbediening zijn. In werkelijkheid hoeft een ‘slim’ huis helemaal niet beheerd te worden; het doet alles zelf.

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

Het is gemakkelijker om het belangrijkste probleem van deze oplossingen te laten zien met een bekend beeld:

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 de ontwikkelaars zoveel mogelijk ruimte op het scherm te plaatsen meer elementen, als mogelijk meer mogelijkheden en als gevolg daarvan zoveel mogelijk UX-problemen.

Dus wat is het idee?

Verwijder al het overbodige, werkelijk alles, uit het zicht.
Als ik alleen maar de lichten in de slaapkamer wil uitdoen, waarom zou ik dan sensoren nodig hebben om de waterkranen in de keuken te bedienen?
Als ik alle ramen in huis wil sluiten, dan wil ik dat met één knop doen en niet op elke sensor afzonderlijk porren.
Als ik het huisalarm zet en er is niemand in huis, betekent dit dat overal de lichten uit moeten, de temperatuur omlaag, de ramen dicht en videobewaking aan. En dit alles zou moeten 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 je op waar de Play-knop zich bevindt op YouTube? Waar is de knop om het browservenster te sluiten? Of waar is het zoekveld van Google?
Zullen honderden sensoren op één scherm van een smart home-systeem u in verwarring brengen?
Dat klopt, het enige dat feitelijk van dergelijke systemen wordt verlangd, is er een op te lossen specifieke taak(zoals Afspelen in de speler of Zoeken in de zoekopdracht). Daarom heeft het geen zin om alle mogelijke bedieningselementen op het scherm weer te geven.

Eigenlijk niet zo'n eenvoudige opgave.

Eerste prototype.

Van de klant ontvingen wij zijn visie ongeveer als volgt:

We keken, dachten na en het enige wat we uit zijn materialen gebruikten waren de specificaties van sensoren en commando’s (gebruikersscenario’s)
We werden door verschillende punten tegen grenzen aan gedreven:

  • Het aanraakpaneel ondersteunde geen MultiTouch en had een resolutie van 1024*768 en 1024*600
  • De Metro-interface was nieuw en het was niet mogelijk om deze op tablets uit te proberen (8 waren nog niet uitgekomen). Hoewel we een telefoon hadden op WP7, wat een idee gaf.
  • De klant kon sommige aspecten van het systeem niet veranderen (ijzerbeperkingen, hogere kosten van het systeem, persoonlijke wensen, enz.)

Over het algemeen was het ontwerpen van schermen als: het hoofdmenu, videobewaking en intercom, weer overboord, systeemmeldingen en dergelijke geen probleem, en het is niet nodig om erover te praten, dit was de 1e versie, het zal meer zijn later interessant.
Het enige probleem was het hoofdscherm voor sensorbeheer. Ik zal over hem schrijven.

huisplan

Hier is een afbeelding van een typisch sensorbedieningsscherm met een huisplattegrond afkomstig van internet:

Vertel me eens, hoeveel van jullie begrijpen wat er in dit plan staat?
Zal uw kind dit plan begrijpen? Hoe zit het met je grootmoeder? Zal een vriend die op de thee kwam zich oriënteren?
Ik denk dat het probleem duidelijk is.

Het plan moet voor iedereen tegelijk leesbaar zijn. Om dit te doen, moet het precies uw huis weergeven, met uw muurkleur en hoofdmeubilair:

En idealiter zou het plan altijd ten opzichte van de hoofdrichtingen moeten worden gepositioneerd.
Deze oplossing is duurder en het herschikken van het meubilair zal het plan onnauwkeurig maken, maar het is hoe dan ook een compromis. Niets belet u echter om welk plan dan ook in het project op te nemen, of helemaal niet (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 de vooruitzichten zijn voldoende;

Sensoren

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

Hieronder heb ik een filmpje bijgevoegd waarin je kunt zien hoe het werkt.

Eén knop

“Nou, waar is die ene knop?”- je vraagt.
En hier is waar:
“Eén knop” is een conventie, hiermee bedoel ik één functie: de belangrijkste en naar voren gebrachte.
Onze resolutie is klein, er een kleurrijk plan op laten zien en er sensoren op plakken “Ik wil niets” is een slecht idee.
Het is de moeite waard om te onthouden dat ik nu de creatie beschrijf van een stationaire versie van de afstandsbediening (d.w.z. het is een monitor die aan de muur is gemonteerd).
Belangrijkste scenario's typisch gebruik van dit paneel zijn:

  • Een persoon opent de voordeur -> het paneel wordt geactiveerd en waarschuwt ons dat we het alarm moeten uitschakelen -> er wordt een wachtwoord ingevoerd -> de voor dit huis gespecificeerde scenario's worden geactiveerd.
  • hetzelfde als je het huis verlaat: zet het alarm
  • Als er iemand aanbelt, kijken we via de intercom, die bij bellen vanaf de straat bovenaan elk scherm verschijnt, naar wie en doen we de deur open.
  • Activering van aangepaste scenario's - bijvoorbeeld de "Nacht" -modus, wanneer deuren en ramen zijn vergrendeld, videobewaking is ingeschakeld, de temperatuur is verlaagd, enz.

Het bedienen van individuele sensoren vanaf dit paneel is niet erg handig (oordeel zelf maar, ga je de helderheid van het licht in de slaapkamer aanpassen terwijl je in de gang bent?)
Controle is mogelijk als er door het hele huis panelen worden gebouwd.
Maar volgens de klant is deze functie daar noodzakelijk, het moet gedaan worden.

Oplossing

Bij het betreden van het scherm ziet de gebruiker alleen het huisplan. De sensoren zijn zichtbaar als hele kleine puntjes (om te weten waar ze zich bevinden).
Naast de mogelijkheid om van verdieping te wisselen, heeft de gebruiker slechts 2 opties:
1) Activeer het optiepaneel, waarmee u bijvoorbeeld alle thermostaten in het huis kunt weergeven en de temperatuur kunt instellen zoals niet voorzien in de scripts, of bijvoorbeeld stopcontacten in de garage kunt activeren.

2) Vergroot het plan. Hoe meer we toenemen, hoe meer sensoren van een klein punt veranderen in een volwaardige managementcontrole, 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 ontwerpintegratie in XAML is mijn belangrijkste specialisatie. Daarom hebben we niet alleen ‘tekeningen gemaakt’, maar het ontwerp ook in de praktijk geïmplementeerd.
Je kunt een apart groot artikel schrijven over hoe we de controles en hun XAML hebben gemaakt, dit allemaal hebben geanimeerd en aan het huisplan hebben gekoppeld, maar hoe minder onze concurrenten weten, hoe waardevoller we zijn als specialisten. En het heeft geen enkel nut om de oplossing voor een stationaire console te beschrijven, omdat... Vervolgens zullen we het hebben over de tabletversie.

Degenen die niet alleen geïnteresseerd zijn in het sensorbedieningsscherm, maar ook in al het andere, kunnen het eindresultaat in foto's zien
Of op video:

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 de hardware en logica te koppelen.
En, zoals gewoonlijk gebeurt, wil je, nadat je een project hebt voltooid, het altijd opnieuw doen, omdat je al ziet hoe je het beter kunt maken, de tekortkomingen en zwakke punten ervan, en zwakke punten er was hier veel.

Terwijl ik XAML aan het maken was, kwam er een Windows Developer Preview uit, en ik haastte me onmiddellijk om het aan te raken op het bureaublad en op mijn tablet (Acer Iconia W500). Er werden ook officiële richtlijnen uitgebracht, waardoor we op een nieuwe manier naar Metro UI konden kijken.

Deel 2.

Alles wat we hebben gedaan is onzin

De klant was erg tevreden, vooral toen we een werkende demo presenteerden. We kunnen zeggen dat zijn geluk geen grenzen kende. Ik zag de tekortkomingen van het project, maar wist tegelijkertijd dat het alleen tot in de perfectie kon worden gebracht door er samen met het team lang aan te werken goede programmeurs maar verder maakte het niet uit in dit stadium product ontwikkeling.
De klant heeft, net als ik, al gekeken nieuwe ramen 8 en we vonden haar allebei heel goed. Hij reageerde dan ook heel positief op mijn voorstel: “Laten we een versie maken voor een tablet?” Ik stelde voor om het inbouwsysteem niet te veranderen, omdat... het ondersteunde MultiTouch niet, het had geen zin om daar een acht te plaatsen. Het herontwerp werd uitgesteld tot betere tijden, met de nadruk op Metro/Windows winkel-app(namelijk Metro, omdat je hierdoor de demo op de markt kunt verspreiden om klanten aan te trekken).
Helaas bleek het budget van de klant te krap, maar ik was het ermee eens dat we de versie voor Windows 8 cadeau hadden gedaan. Deels was dit nodig, we hadden een zeer goed gedaan in de portefeuille, zelfs vóór de release van de acht.

Tweede prototype.

Een paar weken later gaf mijn ontwerper mij 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 in het water te gaan, de ontwerper kon me niet geven wat ik wilde, want toen had hij te weinig ervaring met communiceren met Windows 8.

Daarom werd besloten om alles opnieuw te doen, maar samen met mij aan het ontwerp te werken en alles in één keer in XAML te doen.
Dit zal het probleem van het gebrek aan Guidlines-vaardigheden van de ontwerper oplossen en zal voorkomen dat ik, als ontwikkelaar, het beeld bederf.

V2-ontwerp en gelijktijdige integratie

Eerlijk gezegd was het verdomd moeilijk. Ik was klaar om de ontwikkelaars van Blend 5 te vermoorden, omdat het vergeleken met de vierde versie een buggy, onbruikbaar en voortdurend crashend monster was. Nu gaat het beter, maar sommige dingen ontbreken.
VS 2012 heeft mij gered; het bevatte gedeeltelijk de mengfunctionaliteit voor het beheren van stijlen.
De nieuwe XAML is een onderwerp voor een aparte discussie, de helft van de oude klassen is verdwenen, de standaardstijlen zijn niet goed, triggers zijn verwijderd - waardoor alleen de niet Godvriendelijke visuele staten 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. We moesten het idee van het startscherm heroverwegen; nu was het niet nodig en werd alle navigatie naar de bovenste AppBar verplaatst.
Weg met alle knoppen van het scherm: Zoom - met een gebaar hebben we een volwaardige MultiTouch, alle sensorbediening - in de onderste AppBar.
Nu begint de applicatie onmiddellijk met het tonen van de plattegrond van het huis (idealiter zou deze moeten bijhouden in welke kamer de gebruiker zich bevindt en deze onmiddellijk iets vergroten, door deze in het midden te plaatsen).

Open de applicatie:

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

Of download de AppBar:

Controles

De sensorbedieningen moesten helemaal opnieuw worden geschreven en native worden gemaakt met normale ondersteuning Windows-gebaren 8.
Er werd rekening mee gehouden dat we nu op 2 manieren controle hebben: vingers en muis.
Er werd ook gelikt verschijning sensoren, is stijlvoller geworden:


Ik was vooral onder de indruk van de snelheid van de applicatie. De prestaties in Windows8-applicaties zijn ordes van grootte hoger dan die van WPF. Ik was bang dat de tablet het systeem niet onder de knie zou krijgen, maar alles vliegt gewoon. Microsoft heeft zichzelf overtroffen; nu maakt het niet uit hoe complex de XAML is, alles zal snel werken. Als je in WPF zelfgemaakte schermcache-algoritmen moest maken snelle animatie Denk na over de complexiteit van XAML-vertakkingen, optimaliseer het aantal elementen in de controleboom, en in figuur acht maakt het gewoon niet uit, animatie van elke complexiteit en elk aantal objecten is altijd vloeiend.

Optie zonder abonnement


Er waren geen sensoren met gebarenondersteuning nodig, er hoefde geen ruimte te worden bespaard. Het bleek natuurlijk niet zo indrukwekkend, maar goed.

Scenario's

Het beheren van sensoren is zeker goed, maar zoals ik al schreef: basisbewerkingen Het is beter om met hen te automatiseren.
Om dit te doen beschikt de beheerinterface over basisscriptvoorinstellingen en de mogelijkheid om uw eigen scriptvoorinstellingen te maken.

Op een tablet ziet het er zo uit:

Eén knop

Van dit concept zijn wij vanaf het begin niet afgeweken.
Vaak wordt de vraag gesteld: “Waar is er een half jaar werk?”
En ik beschouw dit als lof. Dit betekent dat ik heb bereikt wat ik wilde. De gebruiker ziet simpelweg niet dat de functionaliteit van de applicatie behoorlijk groot is, omdat alleen zichtbaar is wat nodig is. dit moment. De gegevens en benodigde schermen worden aan de gebruiker zelf getoond, in plaats van dat hij ernaar zoekt. De interface is vanaf de eerste minuten duidelijk, niet intimiderend 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 vanaf het begin langer zijn geweest).

Trouwens. Is het je opgevallen dat overal in Windows een element als PopUp altijd hetzelfde is? Wat we ook openen, er is altijd één pop-upformulier; als we een ander openen, wordt de vorige gesloten. Ik had een probleem met de interface: na activering sloot de sensor daarna bepaalde tijd zelf, maar als je de ene en dan de andere tegelijk activeert - ze waren allebei open, ziet het er niet erg esthetisch en begrijpelijk uit. Dank aan mijn tweede ontwerper voor deze feedback. Hij was niet direct betrokken bij het project, maar dankzij zijn begeleiding zijn er wel een aantal zaken gerealiseerd.
Ik kamp al een week met dit probleem.
En ik besloot het...
Eén regel code.
Moraal: soms het meest eenvoudige oplossingen er zit veel werk verborgen.

Fitbacks van Microsoft

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


Een heel juist punt, let op. Als we een object selecteren en verdere acties ermee mogelijk zijn, zou de AppBar vanzelf moeten openen! Door de gebruiker deze meest 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.

Totaal

Op dit moment is het systeem in ontwikkeling, maar de klant doet het nog niet zo goed als wij zouden willen. Daarom schrijf ik bijna een jaar later een bericht, de releasedatum is nog steeds onbekend.
De applicatie is toegankelijk via de Windows Store voor degenen die Windows 8 hebben, maar daarvoor moet je de Turkse landinstelling instellen in de instellingen:
Configuratiescherm->Tijd, taal en regio ->Regio -> Locatie wijzigen -> Turkije (vergeet dan niet terug te keren, anders wordt de markt in het Turks aan u getoond)
Maar nu is er in de Store alleen een uitgeklede versie die de belangrijkste mogelijkheden demonstreert. Op een dag zal het systeem voltooid zijn, en aangezien we het oude aan het herwerken zijn, is de kans hierop groot. Ik hoop dat het voor de klant beter zal gaan en dat we verder aan het project zullen werken. En er is nog veel werk: webversie, website, huisstijl (we hebben alleen een logo en het idee ontwikkeld, maar we moeten het nog ontwikkelen), versie voor iOS, Android, WP8. en ik zou de versie voor Windows 8 nu een beetje opnieuw doen, we hebben hem afgelopen zomer afgemaakt, er is sindsdien 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 mij alstublieft over fouten in het artikel.

Art director Lev Eidinov deelde met de redactie van de site een verhaal over het concept van SmartShell - een applicatie voor een slim huis dat gebruik maakt van augmented reality.

Ik bestudeer al heel lang het vakgebied van het internet der dingen en slimme elektronica. Naar mijn mening is dit een toekomst waaruit geen ontsnapping mogelijk is. ‘Slimme’ telefoons en tv’s, horloges en auto’s – tegenwoordig zul je niemand meer verrassen. En in de toekomst zal het aantal dingen met het voorvoegsel ‘slim’ gestaag groeien. Dit is een onderwerp voor een apart gesprek, maar vandaag wil ik ingaan op het onderwerp van een ‘slim’ huis, en meer specifiek op de interface ervan.

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

Ik ben het volledig eens met het paradigma " betere interface“is het ontbreken van een interface”, dus probeerde ik de interactie van de gebruiker met het smart home-ecosysteem zoveel mogelijk te vereenvoudigen. Ik wil graag het concept van SmartShell onder uw aandacht brengen - de interface van een “slim” huis in augmented reality.

Sensoren en actuatoren (apparaten die opdrachten uitvoeren: schakelaars, stopcontacten, waterkleppen) zijn de belangrijkste ‘actoren’ van het slimme thuisecosysteem. In het SmartShell-systeem heeft elke actuator een virtueel display waarmee de gebruiker het apparaat bestuurt.

Door de smartphonecamera op een gedeelte van de kamer te richten, ziet iemand direct de aangesloten apparaten. Dit maakt het beheer eenvoudig en gemakkelijk. De interface is gebouwd op standaard iOS-elementen - hierdoor kunt u de trainingstijd minimaliseren.

Door de smartphone op delen van de kamer te richten, ziet de gebruiker aangesloten apparaten en kan hij deze bedienen. Maar voor eenvoudige interface er zijn technische, interne problemen. De grootste is positionering.

Smart Home-toepassingen maken doorgaans gebruik van smartphone-positioneringssystemen (GPS, GLONASS, signalen 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:

Door gebruik te maken van de interactie van bovengenoemde systemen is het mogelijk een positioneringsnauwkeurigheid van 20 cm te verkrijgen, wat voor dit concept acceptabel is.

Bij het starten van de applicatie wordt de gebruiker dus naar het hoofdscherm geleid. In het midden bevindt zich het cameravenster, waarin aangesloten apparaten worden weergegeven.


In deze modus kan de interface in liggende stand werken.


Elk apparaat heeft een speciaal gebied in augmented reality (“actuatorprojectie”), met daarnaast een pictogram voor het overeenkomstige gedeelte. Totaal aantal secties uitgevoerd naar hoofdscherm, vijf: “Klimaat”, “Media”, “Licht”, “Veiligheid” en “Apparaat”. Ze bevinden zich onderaan het scherm en zijn standaard ingeschakeld.

Wanneer de controller in de modus “Schema” wordt geschakeld, worden de aangesloten apparaten weergegeven in het ruimteschema. Dit is handig als u apparaten uit het zicht moet gebruiken. De temperatuur wordt aangegeven in het centrale deel van de kamer. De schaal wordt aangepast met behulp van een standaard vingerspreiding.

Wanneer u op een sectieknop onderaan het scherm klikt, worden de bijbehorende apparaten niet langer weergegeven. Als u nogmaals op drukt, wordt het display opnieuw geactiveerd. De onderstaande schermen bevatten de secties Media en Verlichting in de camera- en lay-outmodi. 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 snel te navigeren en apparaten te onthouden. De aan/uit-knop bevindt zich helemaal bovenaan om onbedoeld indrukken te voorkomen. De toegang tot instellingen is daarentegen vereenvoudigd.

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

Het systeem onderscheidt commando's die in tegenspraak zijn met het automatiseringsscript. Zo kan het licht in het midden van de hal (eerste scherm hierboven) op ieder moment aangezet worden, ook al staat de inschakeltimer op specifieke uren. De keukenvloer (tweede scherm hierboven) is ingesteld om aan te gaan als de temperatuur onder de 20˚C komt. Inschakelen wanneer meer hoge temperatuur zal de instellingen resetten en de gebruiker zal een waarschuwing zien:

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

De structuur van het regelpaneel omvat secties voor apparaten (met een toegevoegde sectie voor loodgieterswerk), tellers en statistieken, componentbeheer, huisconfiguratie, enzovoort.

Voor een gemakkelijke navigatie is het eerste niveau van het menu ontworpen als een glijdende lijst. In de apparaatsecties op dit niveau kunt u het apparaattype selecteren.

Op het tweede niveau kun je kiezen specifiek apparaat van de lijst. Ook hier aanwezig algemene instellingen apparaatgroepen. Met behulp hiervan kunt u bijvoorbeeld op alle airconditioners dezelfde temperatuur instellen of alle lichten uitschakelen.

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

Door “Beheer” te selecteren worden we naar de reeds bekende pagina gebracht voor het beheren van een specifiek apparaat. 27 maart 2015 om 15:18 uur

Mijn “Smart Home” op PLC en met een webinterface. Deel 1. Inleiding

  • HTML-code,
  • SCADA

Invoering

Er zijn veel artikelen op Habré over smart home-projecten, maar ze waren bijna allemaal gebaseerd op zelfgemaakte apparatuur en Chinese gadgets. In mijn artikel wilde ik het hebben over een andere aanpak die laat zien hoeveel gemakkelijker het is om projecten te voltooien met behulp van kant-en-klare oplossingen mondiale fabrikanten ( en ziet er steviger uit), en demonstreert ook de mogelijkheid om apparatuur niet alleen in te gebruiken industriële voorzieningen, maar in de privésfeer. Het resultaat was een symbiose van technologieën en automatiseringsgebieden. Enerzijds met behulp van een PLC, die voornamelijk is ontworpen voor industriële behoeften, waardoor u taken van elke complexiteit kunt uitvoeren zonder de beperkingen van rigide algoritmen kant-en-klare apparaten slimme huizen (bijvoorbeeld door KNX-technologieën) met de koppeling van html/javascript-webtechnologie geeft een onbeperkte fantasie voor het uitbreiden van projecten.

De huidige kosten bedragen 170 duizend roebel (tegen de oude wisselkoers van de euro).

Laten we beginnen.

Wat ben ik van plan

Wij beheren de verlichting en de stroomvoorziening
- In principe wordt de aansturing uitgevoerd met een aan/uit signaal; ik wil of heb geen dimming nodig;
- Ik wil controle van verschillende plaatsen Ik ging bijvoorbeeld naar de slaapkamer - zette de kroonluchter aan, ging op het bed liggen - drukte op om de kroonluchter uit te zetten. Als je vergeten bent de lichten in de hal (of op het toilet...) uit te doen, druk dan op de knop 'overal lichten uitdoen'. Comfortabel;
- Als ik het appartement verlaat, druk ik op één knop - de lichten in het hele appartement gaan uit, enz.;
- Lees de stand van de elektriciteitsmeter af;
- Ononderbroken stroomvoorziening appartementcontrole- en beveiligingssystemen;
- Zonder uitzondering moeten alle lichtgroepen aangestuurd worden door een PLC. In geval van brand moeten de stopcontactgroepen worden losgekoppeld van de PLC in de machine - schakel in noodgevallen de stroomvoorziening in het appartement uit;
- Elke lichtgroep moet naar het schakelbord komen en door de dichtstbijzijnde schakelaar gaan om de lichtregeling om te kunnen zetten in een regulier circuit (als ik het appartement verkoop, neem ik alles mee);
- Voorzie in de gang een menselijke bewegingssensor om de verlichting aan te sturen + vastgebonden inbraakalarm;
- Warme vloeren op het balkon, in het toilet, de badkamer, in de gang - met de mogelijkheid om deze in de loop van de tijd afhankelijk van de buitentemperatuur te regelen.

Wij regelen de verwarming en ventilatie
- Verwarmingsregeling - op elke batterij is een klep met een aandrijving geïnstalleerd (om de temperatuur kamer voor kamer te regelen, om de kamertemperatuur te meten, is het noodzakelijk om temperatuursensoren te voorzien);
- Zorg voor bediening van airconditioners via IR-kanaal ( huidige oplossing nog geen taak gevonden, weergave gedraaid paar Ik zal nog een idee bedenken voor de binnenairconditioner);
- Temperatuur sensoren straattemperatuur (zonnige en niet zonnige kant);
- In de winter doen zich vaak twee problemen voor: het is koud en je kunt niet ademen. Het besluit om een ​​luchttoevoersysteem te installeren. Zorg vervolgens voor de controle van het toevoersysteem (temperatuur in het kanaal, buitentemperatuursensor, drie verwarmingstrappen, ventilator);
- Beheer afzuigventilatoren(sanitair, badkamer).

Beveiligings alarm
Signaleren van de status van de toegangsdeur (archivering van de deurstatus - openings-/sluitingstijd);
Inschakelen via Webinterface of via de lichtschakelaar.

CCTV
Opname vanaf de voordeurcamera, parkeerplaats op straat;
Records archiveren op een externe server.

Apparatuur

- Omdat ik al gewend was aan PLC's van ABB, werd gekozen voor het AC500-eco-model PLC (PM554-ETH CPU met Ethernet-ondersteuning) als brein voor het appartementcontrolesysteem;
- Toen begon ik het geld te tellen en... ik moest een informatieweergaveomgeving kiezen met de mogelijkheid om informatie over het huis op internet weer te geven. Er zijn veel opties, maar meestal is alles gebaseerd op niet-platformoverschrijdende oplossingen, wat niet geschikt is voor mij. Aan alles met de woorden SCADA en WEB zat een exorbitant prijskaartje. Ik moest me een beetje zorgen maken en daarom besloot ik het niet te gebruiken SCADA-systeem, en een raamwerk met meer functionaliteit voor HTML5. Kwam naar CSWorks. Dit freework maakt gratis gebruik mogelijk met een limiet van 999 variabelen, 1 client. Wat mij helemaal beviel.
- JUNG, Serie A is gekozen als schakelaars en stopcontacten (lichtbediening). Aan de positieve kant kunnen ze maximaal 4 knoppen per knop dragen drukknoppaal(schakelaar zonder vergrendeling), ze bevatten tevens indicatie-LED's met een spanning van 24V (deze spanning is de standaard industriële voedingsspanning voor automatiseringssystemen). Ik heb deze functies van geen enkele fabrikant van elektrische installaties gezien (China niet meegerekend);

Begin van het werk

1. Verlichtingsbedradingsmethode. Elke groep komt rechtstreeks naar de voedingskast. De kast bevat schakelaars en relais voor besturing. De relais- en contactorspoelen worden bestuurd door PLC-signalen (DC24V). Om controle te reserveren gebruik ik contactors handmatige bediening. De voedingsdraad werd zo gemaakt dat hij door de schakelaarbeker ging, zodat het mogelijk was de bedrading om te zetten in een conventioneel circuit.

De handmatige contactor zelf:

De kast wordt gemonteerd en geïnstalleerd:

Zoals ik hierboven schreef, heb ik gekozen voor schakelaars zonder bevestigingen met LED-indicatoren. Maximaal 4 knoppen, deze knoppen zijn in 8 groepen te verdelen (zie documentatie voor de schakelaar