We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Rapid Prototyping Physical Interfaces with Web Serial and Cheap MCUs

00:00

Formale Metadaten

Titel
Rapid Prototyping Physical Interfaces with Web Serial and Cheap MCUs
Untertitel
Quickly and cheaply doing design discovery and prototype development with only a web browser
Serientitel
Anzahl der Teile
Autor
Mitwirkende
Lizenz
CC-Namensnennung 2.0 Belgien:
Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen.
Identifikatoren
Herausgeber
Erscheinungsjahr
Sprache

Inhaltliche Metadaten

Fachgebiet
Genre
Abstract
The magic of computers and smartphones is the fact that they provide a very malleable interface - the screen. Without having to manufacture extra parts for every new application, this is a massive time and cost saving for engineers. However, this comes at a cost of accessibility and usability, as well as diminishing the physical connection one might have to the device they are using. Physical interfaces are now much easier to develop, and can even be constructed by the end user, since MCUs are now very cheap and readily available, along with lots of modular parts to construct interfaces with. Web Serial provides the added benefit of being able to use the highly distributed and easy to code with JavaScript / Web platform with these MCUs. This means rapid prototyping can be performed, along with user testing, very easily, making it much cheaper and faster to reach an end product. This talk intends to demonstrate some basic examples along with some steps to getting a process together yourself. - Introduction to Web Serial API, - An overview of the MCU market today, - Demonstrations of some homemade physical interfaces for web applications, - How to set up a basic web app using web serial, - Overview of reading values from a physical input component through a circuit and converting it to serial data, - Using browser-based circuit design tools for safe pre-breadboard experimentation using Wokwi and CircuitJS, - Building a simple physical input, through to reading the data into the web application, - Ideas for potential tangible user interfaces, summary, questions.
Diskrete-Elemente-MethodeDiagramm
Drahtloses lokales NetzMetropolitan area networkKontrollstrukturTabelleRückkopplungStichprobeArkusfunktionMailing-ListeLastDemo <Programm>CodePrototypingDiskrete-Elemente-MethodeSpieltheorieBrowserLaufzeitfehlerVerzeichnisdienstGraphische BenutzeroberflächeSerielle SchnittstelleAnalog-Digital-UmsetzerEmulatorSerielle SchnittstelleSoftwareentwicklerPrototypingBenutzerbeteiligungVerschlingungCodeBenutzeroberflächeSchreiben <Datenverarbeitung>BitDokumentenserverWort <Informatik>BrowserComputeranimationXMLUMLProgramm/Quellcode
Meta-TagQuellcodeWort <Informatik>BrowserGoogolDatenmissbrauchBrowserPhysikalisches SystemSerielle SchnittstelleBenutzerbeteiligungEinfach zusammenhängender RaumWeb SiteDemo <Programm>Graphische BenutzeroberflächeComputeranimationBesprechung/Interview
BrowserGoogolGraphische BenutzeroberflächeGoogle ChromeMeta-TagDatenmissbrauchKontrollstrukturSchnelltasteSynchronisierungPasswortATMAdressraumBrowserBenutzerbeteiligungSerielle SchnittstelleGraphische BenutzeroberflächeWeb SiteEinfach zusammenhängender RaumStandardabweichungNeuroinformatikComputeranimationFlussdiagrammXML
StandardabweichungPhysikalisches SystemDifferenteSerielle SchnittstelleSerielle DatenübertragungBenutzerbeteiligungMAPVerschlingungSchnelltastePhasenumwandlungNetzbetriebssystemComputeranimation
LoginSenderSerielle SchnittstelleEreignishorizontKonstanteVerschlingungWeb-SeiteParallele SchnittstelleFreewareAbstandDatentransferTelekommunikationSynchronisierungProzess <Informatik>RechnernetzDatenübertragungQuellcodeMessage-PassingArithmetischer AusdruckMigration <Informatik>Prozessfähigkeit <Qualitätsmanagement>Dichte <Physik>TemplateSchiefe WahrscheinlichkeitsverteilungMagnetkarteTopologieProgrammierungBenutzeroberflächeSoftwareDatenverarbeitungssystemPhysikalisches SystemMereologieMathematikStandardabweichungSystemaufrufImplementierungInformationTermDienst <Informatik>Serielle SchnittstelleBenutzerbeteiligungNetzbetriebssystemMAPMessage-PassingPeripheres GerätProgrammierungCodeBrowserSoftwarePhysikalisches SystemTermComputeranimation
ProgrammierungDatenverarbeitungssystemVerschlingungWeb-SeiteInformationEreignishorizontKonstanteFreewareQuellcodeTemplateMessage-PassingAttributierte GrammatikFunktionalSerielle SchnittstelleKonstruktor <Informatik>CodeBrowserKlasse <Mathematik>BenutzerbeteiligungVariableProzess <Informatik>StandardabweichungSprachsyntheseNeuroinformatikDeskriptive StatistikComputeranimation
Attributierte GrammatikTabelleCross-site scriptingBrowserLokal kompakter RaumSystemaufrufEingebettetes SystemSoftwaretestDigitalfilterGraphische BenutzeroberflächeGenerator <Informatik>Maß <Mathematik>FlächeninhaltRückkopplungMeta-TagGammafunktionStandardabweichungBenutzerbeteiligungCodeGraphische BenutzeroberflächeSerielle SchnittstelleBrowserMinkowski-MetrikProjektive EbeneInformationImplementierungEin-AusgabeHumanoider RoboterJSON
Web-SeiteStichprobeVerschlingungMaßerweiterungWeb logGoogle ChromeExplosion <Stochastik>Prozess <Informatik>Graphische BenutzeroberflächeStandardabweichungWeg <Topologie>IntelSelbst organisierendes SystemGoogolSpeicherabzugBenutzerbeteiligungComputersicherheitProgrammfehlerBridge <Kommunikationstechnik>Mailing-ListeSoftwareentwicklerTemplateSoftwareKanalkapazitätSystemplattformService providerStreaming <Kommunikationstechnik>Protokoll <Datenverarbeitungssystem>CodePhysical ComputingSkriptspracheAppletInternetworkingDatenverarbeitungssystemInformationTouchscreenProjektive EbeneWeb-ApplikationEin-AusgabeSchnelltastePeripheres GerätVirtualisierungReelle ZahlMikrocontrollerHardwareSoftwarePhysikalismusComputeranimation
LoginMeta-TagSpieltheoriePhysikalismusWeb-ApplikationMikrocontrollerHardwareMAPNeuroinformatikDigitaltechnikBenutzerbeteiligungCodeSoftwareentwicklerComputeranimationProgramm/QuellcodeTabelle
NeuroinformatikWeb-ApplikationHardwareMikrocontrollerWeb logSystemplattformMomentenproblemSoftwareentwicklerMereologieMinimumBesprechung/Interview
Divergente ReiheSelbst organisierendes SystemWeb-SeiteStochastische AbhängigkeitFreewareHardwareCompilerCodeArchitektur <Informatik>StichprobeVideokonferenzElektronisches ForumService providerMaßerweiterungProgrammQuellcodeMereologieWeb logMikrocontrollerProgrammierumgebungSoftwareentwicklerCodeSoftwareSystemplattformHardwareComputeranimation
QuellcodeHardwareSoftwareElektronisches ForumWhiteboardProzess <Informatik>Flash-SpeicherKonfiguration <Informatik>HardwareProgrammierumgebungPunktSoftwareentwicklerGanze FunktionBruchrechnungMikrocontrollerSystemplattformProgrammierungMultiplikationsoperatorProzess <Informatik>ProgrammierspracheBesprechung/InterviewComputeranimation
CodeLoopRegulärer Ausdruck <Textverarbeitung>IdentitätsverwaltungProgrammbibliothekAppletSkriptspracheQuellcodeBrowserWeb-SeiteVideokonferenzEin-AusgabeObjekt <Kategorie>WebcamTexteditorStichprobeElektronisches ForumVersionsverwaltungFunktion <Mathematik>Elektronische PublikationVorzeichen <Mathematik>SpielkonsoleFormale SpracheSoftwareentwicklerProzess <Informatik>ProgrammierumgebungÄußere Algebra eines ModulsMikrocontrollerProgrammierspracheSystemplattformLaufzeitfehlerVersionsverwaltungComputeranimationXML
StandardabweichungWhiteboardImplementierungOperations ResearchKontrollstrukturGanze ZahlGenerator <Informatik>AusnahmebehandlungKompakter RaumCodeNormalvektorPhysikalisches SystemFunktion <Mathematik>HardwareMeta-TagInteraktives FernsehenSkriptspracheATMAdditionSpeicherabzugModul <Datentyp>Eigentliche AbbildungVollständigkeitLaufzeitfehlerCompilerBimodulSoftwareBefehlsprozessorSerielle SchnittstelleKanalkapazitätTotal <Mathematik>Analog-Digital-UmsetzerAnalogieschlussInstant MessagingSicherungskopieReelle ZahlMinimumTelekommunikationLokales MinimumPlastikkarteRegulator <Mathematik>FirmwareEin-AusgabeOpen SourceAppletDisk-ArrayPixelComputersimulationInternetworkingTexteditorProgrammierumgebungGammafunktionLeistung <Physik>SoftwareentwicklerTVD-VerfahrenWhiteboardNichtlinearer OperatorWort <Informatik>Höhere ProgrammierspracheLaufzeitfehlerIterationXMLProgramm/QuellcodeFlussdiagramm
WhiteboardEinfach zusammenhängender RaumPunktwolkeProgrammbibliothekProgrammierumgebungProgrammierumgebungBenutzerbeteiligungLaufzeitfehlerSerielle SchnittstelleBrowserEmulatorMultiplikationsoperatorProzess <Informatik>Workstation <Musikinstrument>Notebook-ComputerDatenverarbeitungssystemSystemplattformSpieltheorieNeuroinformatikGanze FunktionNintendo Co. Ltd.SoftwareHardwareXML
BefehlsprozessorKonfigurationsraumZeichenketteDezimalzahlFahne <Mathematik>Analog-Digital-UmsetzerBaumechanikGammafunktionSpieltheorieHardwareSoftwareEmulatorBrowserFreewareWeb-ApplikationAdditionMultiplikationsoperatorBenutzerbeteiligungeCosTelekommunikationLaufzeitfehlerTabelleFlussdiagramm
SpezialrechnerProgrammbibliothekPersönliche IdentifikationsnummerBinärdatenBitrateLineare AbbildungMatrizenrechnungSimulationComputersimulationSpielkonsoleBrowserHardwarePersönliche IdentifikationsnummerTrennschärfe <Statistik>Radikal <Mathematik>Projektive EbeneMereologieLoopRechter WinkelProgramm/QuellcodeFlussdiagrammComputeranimationXML
CodeComputersimulationAnalog-Digital-UmsetzerSpielkonsoleLogarithmusLesen <Datenverarbeitung>ResultanteLoopPersönliche IdentifikationsnummerEin-AusgabeBinärcodeStreaming <Kommunikationstechnik>App <Programm>Message-PassingMomentenproblemSerielle SchnittstelleLaufzeitfehlerCOM
Prozess <Informatik>Schreiben <Datenverarbeitung>Analog-Digital-UmsetzerProgrammbibliothekCodeComputersimulationPufferspeicherMessage-PassingGleitkommarechnungBitLaufzeitfehlerDämpfungDickeDoS-AttackeDatenflussMultiplikationsoperatorFunktionalArithmetisches MittelVerschlingungPuffer <Netzplantechnik>Typentheorie
Prozess <Informatik>Schreiben <Datenverarbeitung>ComputersimulationCodePufferspeicherAnalog-Digital-UmsetzerDigitalfilterLesen <Datenverarbeitung>SchnittmengeIndexberechnungOffice-PaketQuantenzustandDatenflussMessage-PassingDämpfungTypentheoriePuffer <Netzplantechnik>Funktion <Mathematik>SystemplattformCodeXMLFlussdiagramm
CodeComputersimulationAnalog-Digital-UmsetzerPufferspeicherSchnittmengeProzess <Informatik>Fermatsche VermutungLesen <Datenverarbeitung>ProgrammierumgebungAppletSkriptspracheWhiteboardFirmwareInklusion <Mathematik>SummandBenutzeroberflächeFunktion <Mathematik>CodeProgrammierumgebungSystemplattformUmsetzung <Informatik>BinärcodePersonal Area NetworkRohdatenMikrocontrollerMultiplikationsoperatorGamecontrollerLaufzeitfehlerComputeranimationJSONXMLFlussdiagramm
CodeComputersimulationGeradeFunktion <Mathematik>Lesen <Datenverarbeitung>SchnittmengeProzess <Informatik>Schreiben <Datenverarbeitung>PufferspeicherAnalog-Digital-UmsetzerWärmeübergangModemNeuroinformatikElektronische PublikationPersonal Area NetworkCodeMomentenproblemSerielle SchnittstelleProfil <Strömung>Zusammenhängender GraphSpielkonsoleDigitaltechnikBrowserEinfach zusammenhängender RaumComputeranimation
Web logGammafunktionBrowserCodeStichprobeTemplateWeb SiteVerschlingungWeb-SeiteVersionsverwaltungATMExplosion <Stochastik>GoogolDatensichtgerätCliquenweiteKreisbewegungBetrag <Mathematik>p-BlockInhalt <Mathematik>SkriptspracheSerielle SchnittstelleOffene MengeFunktion <Mathematik>Singuläres IntegralGamecontrollerMessage-PassingSpielkonsoleFehlermeldungSerielle SchnittstelleApp <Programm>Offene MengeCodeBrowserRahmenproblemMessage-PassingHyperbelverfahrenStreaming <Kommunikationstechnik>Lesen <Datenverarbeitung>FunktionalMultiplikationsoperatorEinfach zusammenhängender RaumWeb-ApplikationPuffer <Netzplantechnik>Ganze FunktionTransformation <Mathematik>CodierungQuantenzustandPunktExtreme programmingRechter WinkelZahlenbereichGruppenoperationBenutzerbeteiligungKreisbewegungBestimmtheitsmaßComputeranimation
p-BlockHybridrechnerAnalogieschlussEin-AusgabeFunktion <Mathematik>Minkowski-MetrikGeradeATMSoftwaretestDatensichtgerätKonfiguration <Informatik>Elektronische PublikationAnalog-Digital-UmsetzerWeb-ApplikationWinkelZahlenbereichPeripheres GerätDigitaltechnikGemeinsamer SpeicherMikrocontrollerComputersimulationStandardabweichungBildschirmmaskeTelekommunikationExplorative DatenanalyseApp <Programm>Rapid PrototypingMIDI <Musikelektronik>ComputeranimationDiagramm
MIDI <Musikelektronik>Serielle SchnittstelleRapid PrototypingKippschwingungExplorative DatenanalyseSchwingungApp <Programm>Prozess <Informatik>BenutzerbeteiligungNintendo Co. Ltd.GamecontrollerSystemaufrufComputeranimation
GamecontrollerAusgleichsrechnungNintendo DSWeb-ApplikationMIDI <Musikelektronik>ComputeranimationDiagramm
EindeutigkeitBrowserSpieltheorieFlächeninhaltProdukt <Mathematik>BildschirmmaskeGamecontrollerComputersimulationPhysikalismusWeb-ApplikationTelepräsenzSerielle SchnittstelleHypermediaBenutzerbeteiligungMaschinenschreibenBesprechung/InterviewComputeranimation
Mailing-ListeBenutzerbeteiligungSerielle SchnittstelleComputeranimation
Güte der AnpassungProgrammierspracheInklusion <Mathematik>Grundsätze ordnungsmäßiger DatenverarbeitungSchlussregelRechter WinkelNeuroinformatikVideokonferenzPhysikalisches SystemZeitzoneFormale GrammatikEvoluteVollständiger VerbandObjekt <Kategorie>SichtenkonzeptWeg <Topologie>Einfache GenauigkeitEinfügungsdämpfungt-TestSchaltnetzInformationsspeicherungBitWort <Informatik>BeweistheorieGebäude <Mathematik>Projektive EbeneQuick-SortART-NetzNabel <Mathematik>MultiplikationsoperatorChirurgie <Mathematik>Web logProgrammierumgebungProzess <Informatik>MomentenproblemAusdruck <Logik>PunktFunktion <Mathematik>Graphische ProgrammierungKontextbezogenes SystemSystemplattformBenutzerbeteiligungFlächeninhaltKlasse <Mathematik>SoftwareentwicklerVerschlingungElement <Gruppentheorie>BrowserTotal <Mathematik>RichtungQuaderDateiverwaltungLaufzeitfehlerDämpfungÄhnlichkeitsgeometrieDomain <Netzwerk>p-BlockBesprechung/Interview
Divergente ReiheZentrische StreckungMomentenproblemArithmetische FolgeGüte der AnpassungPhysikalisches SystemSuite <Programmpaket>DialektModemTelekommunikationProjektive EbeneSchreib-Lese-KopfBrowserLeistung <Physik>SchießverfahrenDifferenteVererbungshierarchieGebäude <Mathematik>Kartesische KoordinatenProzess <Informatik>EnergiedichteFokalpunktStatistikStandardabweichungIntegralHardwareProdukt <Mathematik>ImplementierungGraphische BenutzeroberflächeParametersystemBenutzerbeteiligungMereologieSoftwarewartungSoftwareInternetworkingBitSoftwareentwicklerBesprechung/Interview
Rechter WinkelBesprechung/InterviewComputeranimation
Transkript: English(automatisch erzeugt)