We are proud to announce the launching of our website with our new concept. This website is responsive and adapts to different screen sizes. Our website is created with the help of the third party solution; webflow. Please take a look to learn more about our work!
Mobile first! We make sure that our SharePoint site remains responsive, and that our own SPFx web part follows responsiveness.
SPFx on the way
We have started our SPFx project to enable more than modern has out-of-the-box. We build this by using React/NodeJS with TypeScript. Repository for the SPFx can be seen here: https://github.com/Infoworker-ACDC/InfoNinjasSPFx
Plan for the SPFx web part
It’s using underlaying data for crimes reported (cases), with crime fighting ninjas (employees) taking on the villains (problems). It’s plan to make good overview of each of these resources and map these to geolocation on maps (plan to integrate google maps to the SPFx view – that should be fun).
And this should all be wrapped into a nice design and be responsive. Then build some Power Apps and Power BI around this again.
This is a form that you can report an issue from anywhere. Its responsive, works on both desktop and mobile screens.
It could be hosted any way. It is a progressive web app build with react, node.js
Citizens can report the issue by specifing title, description, take a photo of what the see and tag a location to help the turtles resolving the issue faster.
We gonna contnuie build this to add administration functionalities and gather new batched. Update will come đ
Interessen rundt sjakk har eksplodert det siste Ă„ret, blant annet The New York Times melder om rekordsalg og en Ăžkning pĂ„ over 1000% pĂ„ salg av fysiske sjakkbrett. Ăkningen i salget er hovedsakelig pĂ„virket av den populĂŠre serien the Queenâs Gambit, og streaming programmet PogChamp. Men det er et problem, vi er midt i en pandemi og ingen kan spille fysisk sjakk mot hverandre.
Heldigvis sitter vi pÄ lÞsningen: Power Chess! Ved Ä bruke Power Chess kan du spille et fysisk sjakkparti mot hvem du vil uansett hvor i verden motstanderen befinner seg.
Slik fungerer det:
Hver spiller har hvert sitt sjakkbrett som er koblet pÄ internett og bruker AI som identifiserer hvilke trekk som er utfÞrt. NÄr et sjakktrekk er identifisert vil sjakkbrettet til motstanderen utfÞre det samme sjakktrekket.
Under ser dere den automatiske lego-armen i Action. Filmen viser fÞrst et sjakktrekk pÄ sjakkbrett 1, deretter ser vi lego-armen pÄ sjakkbrett 2 pÄ motstanderen sitt sjakkbrett.
Teknologien bak Power Chess
API og Azure Cognitive Services
Gjennom Ă„ integrere oss mot SharePoint, function app og ACS (Azure Cognitive Services)
I den tekniske lÞsningen vÄr benytter vi en integrasjon mot SharePoint, for Ä detektere at en ny fil har blitt lagt til, samt uthenting av denne filens innhold.
Videre har vi en integrasjon mot Function App som vi kjĂžrer et POST-kall mot tjenesten som gir oss 64 objekter tilbake.
Disse 64 objektene sendes til Azure Cognitive Services for analysering av innholdet.
Deretter blir dataen(Sjakkbrettet) prosessert og sendt til DataVerse ved en create.
Flow:
Ved Ă„ bruke Power Automate sin Cloud Flow har vi opprettet en Flow som trigges ved opprettelse av en ny fil i SharePoint i en mappe vi har kalt âMovesâ. Ved Ă„ bruke en standard funksjon i Flow som henter innholdet i filen, fĂ„r vi en string som vi kan sende til function app.
Function-app
Function appen mottar en string gjennom HTTP protokollen og deretter kutter opp bildet/Sjakkbrettet i 64 objekter, samt legger metadata pÄ hver enkelt objekt for Ä identifisere hvor plasseringen er. Deretter blir disse sendt tilbake til flowen gjennom HTTP.
CRM / Dataverse
All dataen vi prosesserer illustrerer vi i en Model Driven app. Her kan vi se oversikt over alle rundene i enhvert spill, og posisjonene pÄ alle brikkene. Ved hjelp av plattformen, og litt fancy HTML-kode, har vi fÄtt denne skalerbar i forhold til enheter og skjermstÞrrelser. Er man «on-the-run», kan man enkelt Äpne applikasjonen via telefonen, og fÄ en tilsvarende opplevelse.
Rasberry PI + Lego Boost
For Ă„ kontrollere Boost motoren til Lego har vi benyttet en Raspberry PI med Python script som kan sende signaler til boost motoren via BLE (Bluetooth Low Energy).
Badger vi clamer med denne posten:
#Glossy Pixels #High 5 #Go With the Flow #Chameleon #Plug N’ Play #Power User Love
What is HTML5 WEB-COMPONENTS aka custom components.
Custom components is a combination of several standards from the HTML standards.
Custom elements: A set of JavaScript APIs that allow you to define custom elements and their behavior, which can then be used as desired in your user interface.
Shadow DOM: A set of JavaScript APIs for attaching an encapsulated “shadow” DOM tree to an element â which is rendered separately from the main document DOM â and controlling associated functionality. In this way, you can keep an element’s features private, so they can be scripted and styled without the fear of collision with other parts of the document.
HTML templates: The <template> and <slot> elements enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element’s structure.
The thing with web-components is that they can be reused across, sites and installations by referencing the js script.
One way of using them is thinking of each component as a autonomous part/app that will not mess up anything else on the page.
You can can style things inside the a custom-element by using --css-variable
Communication between custom-elements can be done using events, setting attrubutes or calling functions on the element.
This component can be used together with anything else as long as it runs in a browser.
I have created a “super simple” demo component that counts up a number in random time and increment.
Creating a global-pushup-counter custom component using lit-element and lit-html.
Farmer Emmet Þnsker Ä kunne monitorere gÄrden sin fra bÄde mobil og sin PC, slik at vi har laget en web-app som bonden kan bruke via web utviklet i Blazor. Videre er det brukt semantiske tagger med HTML5.