Power Chess Final Delivery

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.

HTML/CSS og Javascript kan være et kraftig verktøy. Om man trives i «den ville vesten», får man virkelig testet seg. Det har vært en god utfordring for oss CRM-konsulenter, men er fornøyd med resultatet.

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

Glossy pixels.

Felleskjøpets standard designbibliotek.

Vi har brukt FKA sitt design på alle brukergrensesnitt i løsningen. 

Gjenbruk av design gir fordel med at det er praktisk med et sentralt sted hvor man kan innhente gjenbrukbare detaljer når man trenger det. FKA sin er laget så pass lett gjenbrukbare og lett tilgjengelig slik at det har vært enkelt å innhente de elementene vi har hatt behov for. 

FKA designbiblioteket gir oss:

  • Farger
  • Typografi
  • Størrelser og mellomrom
  • Ikoner

Disse elementene er implementert i vår løsning:

  • Vår web-side som er bygd med Blazer.

  • Samme design elementene er brukt i React-native.
Glossy pixels

PT Brixters – Conductor Portal (Badge claims follows)

PT Brixters have made a conductor portal in react.js that is fully responsive and user friendly !

The Portal is made in React therefore we are claiming the “Client Side Salsa” badge for this.

The Portal also uses 2 module apps to show the train live video feed and a train controller where the train controller uses socket.io to communicate from the frontend to the backend, therefore we are claiming the “Right Now Badge” for this.

We are also claiming the “Glossy Pixels Badge

for the conductor portal because the portal looks shiny, is easy to read (big text, big buttons). And its responsive, works on mobile devices also, therefore we are also claiming the “Chameleon Badge”

And we wanted to show of our old Dashboard that is now upgraded to the new one 😀

Some pictures of socket.io with flask in action for the “Right now badge”:

Picture of VS Code as proof that we are using React to build our app.

SharePoint Online Site Design powered by PowerShell

It’s important to keep branding consistent across SharePoint Sites. Family members can create travel sites and it will be provisioned with the correct colors, icons and travel lists.

We have crated a Site Script and a site design and deployed it to the SharePoint site for D365 Family Engagement Hub. When a family is planing a new vaication or travel they can create a new site that already have lists they need to plan their stay.

Site Script

First we set the script by identifying the lists with name, description and fields.

Then the final line to add the script

Add-SPOSiteScript -Title “Family Travel Site” -Content $site_script -Description “Create a list for to keep up with traveling family memebers”

The response was a site script with ID

The ID we used in the adding a site design with the site script

Add-SPOSiteDesign -Title “D365 Family Engagement Hub – Travel Site” -WebTemplate “64” -SiteScripts “1131785c-864c-4262-a3ae-b2c9664bfcb6” -Description “The travel site is for planning a trip or travel for the family”

Response

The result was a site design that we can use from the user interface or use another live of powershell to set on a site:

Add-SPOSiteDesignTask -SiteDesignId c56a394b-a99b-4b75-8e93-01a927b7ccf6  -WebUrl “https://crm017179.sharepoint.com/sites/family

The result was a report of what design, web and site was combined:

When we visit the site we can see that it has two new lists:

The packing list contain the fields that we set:

IF family members want to create new sites they can now choose this travel site design:

That is good user experience!

Used this guide for PowerShell scripts: Get started creating SharePoint site designs and site scripts | Microsoft Docs

Grant access to user group

This script will exclude access to all users but those who are members of this specific user group (email enabled) “family Members”

Doing the Get to validate that the permissions were set.

When the users NOT in this group try to use the site design they will not see it – making it possible to family users only to access the site script and site design.

We claim these badges

and for the category

SharePoint Branding #GlossyPixels #QueenWatevraWa-nabi

Going for the Glossy Pixels Badge because it looks good

The Retro Badge is also applicable because someone think it belong in the past:

And I use PowerShell, so

and points in the category for the awesome work that went into creating a graphical profile.

Graphical Profile

We created an Icon for our App called “D365 Family Engagement Hub”

Color Theme

In addition we created a color theme that will be used across all our apps and services:

Microsoft 365 Admin Branding

The first thing is Organisation theming in the Microsoft 365 Admin Center

The result is a Tob Bar that look like this:

SharePoint Site Theme

https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/7.0/theming-designer/index.html

The generated Theme

@{
“themePrimary” = “#17244f”;
“themeLighterAlt” = “#d6dbea”;
“themeLighter” = “#b3bcd7”;
“themeLight” = “#949fc3”;
“themeTertiary” = “#7885b0”;
“themeSecondary” = “#5e6d9c”;
“themeDarkAlt” = “#485789”;
“themeDark” = “#354476”;
“themeDarker” = “#243362”;
“neutralLighterAlt” = “#faf9f8”;
“neutralLighter” = “#f3f2f1”;
“neutralLight” = “#edebe9”;
“neutralQuaternaryAlt” = “#e1dfdd”;
“neutralQuaternary” = “#d0d0d0”;
“neutralTertiaryAlt” = “#c8c6c4”;
“neutralTertiary” = “#a19f9d”;
“neutralSecondary” = “#605e5c”;
“neutralPrimaryAlt” = “#3b3a39”;
“neutralPrimary” = “#323130”;
“neutralDark” = “#201f1e”;
“black” = “#000000”;
“white” = “#ffffff”;
}

SharePoint Online Management Shell

Apply theme with PowerShell based on the theme we generated.

Apply theme

Moving into SharePoint Online and choose the new theme in the site setting “Change the look”.

The colors are applied across the site.

Setting the header

Uploading pictures as logo and thumbnail and setting the header according to the style guide.

Fotter

Setting the footer is also important on a SharePoint site.

This is simple branding in SharePoint Online Modern sites. To take it one step further you can also create Site Designs that will allow users to add sites to SharePoint fully branded with a set of default features and content available from the get go.

That will be another blog post..

The importance of profile picture in the Home Office Era #GlossyPixels #QueenWatevraWa-Nabi

With this blog post we are reaching for points in

Queen Watevra Wa-Nabi category

Badge Glossy Pixels

Profile Images

Showing people who you are and what you look like is important. Especially when onboarding new people into the company – or including a new family member into the mix. The newcomer will be easier to get to know when they have a good profile picture, and it will be easier to remember lots of new names when they come with faces.

Azure Active Directory Users

That’s why it was important for us to do some work on the users in our solution and update all the users with proper names and profile pictures. Keeping with the theme they all have names and pictures from the Lego Movie.

For each user we updated their name from their default Contoso default name and gave them a name from a character on the Lego Movie

Office 365 User

This translates into the view of the users in Microsoft 365 Admin Center

Display User Image in Canvas App

It’s much easier for the family to recognize each other in the app by profile images then with names alone. That’s why it’s important that these pictures also is displayed in the Canvas App.

Setting it up we need the “Office 365 Users” Connection

Once the connection is in place we can access the images stored in the Office user by the expression “Office365Users.UserPhotoV2(ThisItem.’Primary Email’)”

Found the correct expression here: https://powerusers.microsoft.com/t5/News-Announcements/Display-User-Photo-in-Gallery-on-All-device-type/ba-p/208810#