Staying cosy – virtual fireplace edition

When you live in the sewer open flames is something you want to avoid, just in case the methane flows in ways you didn’t discover.

The TMNT IT department came up with a solution – and although it might not give physical warmth, it certainly is deeply heartfelt.

HTML5 Canvas tags with fun script never fails. This adds to the main/article tags used at SOME blogging from the interwebs | Arctic Cloud Developer Challenge Submissions (acdc.blog)

Some code illustrating the fire effect.. ping us for the demoFX main module.

var Fire = (function() {
    function Fire() {
        this.palette = new Uint8Array(256 * 4);
        this.screen = new Uint8Array(0);
    }
    Fire.prototype.init = function(width, height) {
        return __awaiter(this, void 0, void 0, function() {
            var vOfs, v;
            return __generator(this, function(_a) {
                this.width = width;
                this.height = height;
                this.screen = new Uint8Array(this.width * (this.height + 2));
                vOfs = 0;
                for (v = 0; v < 256; v++) {
                    this.palette[vOfs++] = v >> 1;
                    this.palette[vOfs++] = v >> 3;
                    this.palette[vOfs++] = v >> 4;
                    vOfs++;
                }
                return [2];
            });
        });
    };
    Fire.prototype.render = function(ctx, _) {
        var dest = ctx.getImageData(0, 0, this.width, this.height);
        var ofs = 0;
        for (; ofs < this.width * this.height; ofs++) {
            var y1 = (this.screen[ofs + this.width - 1] +
                this.screen[ofs + this.width]) >> 1;
            var y2 = (this.screen[ofs + this.width * 2] +
                this.screen[ofs + this.width * 2 + 1]) >> 1;
            this.screen[ofs] = Math.max(((y1 + y2) >> 1) - 2, 0);
        }
        for (; ofs < this.width * (this.height + 2); ofs++) {
            this.screen[ofs] = Math.random() > 0.5 ? 255 : 0;
        }
        ofs = 0;
        for (var destOfs = 0; destOfs < this.width * this.height * 4;) {
            var pix = this.screen[ofs++] * 4;
            dest.data[destOfs++] = this.palette[pix++];
            dest.data[destOfs++] = this.palette[pix++];
            dest.data[destOfs++] = this.palette[pix++];
            dest.data[destOfs++] = 0xff;
        }
        ctx.putImageData(dest, 0, 0);
    };
    return Fire;
}());
demoFX.register("fire", new Fire());
</script>
<canvas id="fire" width="80" height="50" style="width: 100%; height:100%">
</canvas>
<input style="display:none" id="startfire" type="button" onclick="toggle('fire', this)" value="Run">
<script>
	document.getElementById("startfire").click()
</script>

Pizza Time Friday Update

WOW what a day it has been. We have all been busy at work with our the ordering and delivering concepts.

Poja:

Working hard on the Canvas App to make sure that the backend matches the amazing visuals we have worked so hard on (frontend).

No images available from tables in Dataverse, but the data is there😂

We decided to extend the ordering app to include feedback forms. We felt it was important to understand our customers better. With a custom connector to Azure Cognitive services we were able to get sentiment analysis from the users feedback.

He is also working on a discount system for all of the “Masked Members”. For every person with a turtles mask, we want to offer a discounted pizza!

Mikael

Even though the turtles are BAD ASS and they totally KICK ASS, they also need to stay organized. We have been working on the Teams/SharePoint tools they use internally for organizing the entire operation. Without collaboration in their every day activities, it would be hard to stay on top of it all:) The idea is that regardless of the tool they are in, ordering pizza and being up to date is a few clicks away.

SharePoint Home Site in Teams – Global Navigation to Pizza Ordering etc.

They also have a crawling engine going for all of the dark blogs out there. This way they can try to pick up bad guys before issues arise. This way we can better work with preventative crime fighting.

Blog roll

Turtles are of course not the only ones in need of pizza. Head over to the Pizza Time place and get your pie today!

PowerApps Portals

Thomas

Working on the delivery elements of the pizza order. When a new order arrives in Dataverse, we trigger a Power Automate Cloud Flow. The cloud evaluates the delivery status, and then triggers a Power Automate Desktop Flow that triggers the Head Quarters status Beacon. The purpose of the beacon is showcasing the status updates for the customers. We build a flow that triggers a light and the google nest (youtube video on screen).

Light is dynamic, but hard to show in a picture.. come by our table for a demo!
Video of pizza is really cute, but hard to show in a picture.. come by our table for a demo!

Next phase is including the delivery status with notification of completed delivery with a light displaying the correct color for delivery status. Pizza warm = Green, Pizza cold = red. Might seem counter intuitive, but the green / read is successful yes or no 🙂

Pointing at the small sensor for delivery. Temperature is inside the box

HQ security has been upgraded with a functioning trip wire. Not only will the emergency lighting device blink, the beacon will change color and the speakers will start playing ALARMA – 666 full power to notify everyone at the headquarters.

Bad Guy close to the trip wire!!
WARNING!!
Speaker playing warning song!!

We also managed to get a Power Virtual Agent chat bot in Teams where the turtles can quickly order pizza while chatting to the bot. The order goes into Dataverse, and the lights start blinking like crazy as usual! 🙂

Eivind

Eivind wanted to help customers get inspired by new pizzas. He has been created a Native App with react native to create a Pizza Inspo page. Browsing this customers will get hungry.

For the ordering process he has been working on weather API inclusion. This way we can show the users what the weather is like now. For the next release we are aiming at altering the estimated delivery time based on the weather data. Bad weather will increase delivery time etc.

NB! The orders from the Portal also works writing to Dataverse.. Again no images, but out beacon light will flash for every order!! 😊

GET INSPIRED -> GET HUNGRY

Inspired customers are hungry customers, hungry customers are paying customers. TMNT are of course aware of this and have released the Pizza Time Topping Inspiration App. The app lets users search or scroll through all available pizza toppings you can imagine, perhaps discover some new ones, and most important… get them to order pizzas through the plethora of Pizza Time ordering options:
– Pizza Time ordering website (Power Apps Portals)
– Pizza Time on-site ordering app (Canvas app)
– Pizza Time ordering chatbot (Virtual Agents)

Team Pizza Time believes in giving the customers options, so they can order in the way they prefer.

The Pizza Time Topping Inspiration App is created using React Native. Write once and run both on iOS and Android 🙂

SOME blogging from the interwebs

The turtle’s IT department, named Pizza Time, is hard at work showcasing their awesome setup. To make it easy to follow what happens we’ve brought the blog posts back into the intranet.

Setup consists of crawling the ACDC blog, for Pizza Time posts only via Graph Connectors.

Graph Connector Crawl Setup

To show these back on the home site we use the PnP Modern Search web parts (https://microsoft-search.github.io/pnp-modern-search/) with Graph connector support. The display is using a custom handle bars template matching the ACDC blog schema.

The custom template uses HTML5 content tags for proper screen reading and navigation.

How it looks in Teams

Viva Connections and a nasty hack – because UX frigging matters!

When our turtles aren’t swinging around New York City or munching on their favorite past time food of pizza’s – they are checking in on the TMNT HQ Intranet to see what’s happening, or chatting with other crime fighting colleagues in Teams.

Using a Home site via Viva Connections is the best way to do this, but unfortunately there’s a bug where the home site shines thru the navigation menu and breaks the user experience.

Quickest way to solve this? Contact Pizza Times trusted member Mikael and have him install the swizz army knife off all time – https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-script-editor. With a simple accessibility script in place, things are back to normal.

Script to fix the order of business

(Thieving bastard badge is attributing to other 3rd party usage in the solution – API’s etc)

Community Champion

Burning the midnight oil is nothing new for IT consultants, and its all good vibes when you get to help old friends out.. Everyone know that Thomas loves Dataverse, and when someone has a question regarding Dataverse, he will do his outmost to lend a helping hand.

Michael Svenson also offered up his knowledge on stage for anyone wanting to learn more about search and PNP.

PCF + React + Pizza = Great user experience

When ordering pizza, you want to know how long it’ll take before a turtle is at your door with that delicious pizza pie! This PCF plugin lets the customer input their delivery address, and uses Google Map APIs to show a map with a marker showing the turtle pizza HQ (sewers below Empire State Building) and another marker showing the delivery address. It also calculates the distance and delivery time based on the address and shows it to the user. The PCF is written using TypeScript and uses React to achieve instant updates of the map and calculated time/distance as the customer is interacting with the app.

The Dataminer is here!

We have retrieved weather data from:
https://weather.visualcrossing.com/VisualCrossingWebServices/rest/services/timeline/manhattan?unitGroup=metric&key=G5NGC7CZTCJBVHKDTRGVD668G&contentType=json
inorder to determine if we should stay in the sewers or hit the streets of New York!

Power BI