Make it responsive and glossy bby 🍕🍕🍕🍕

Ved hjelp av litt css magi får vi et reponsivt bilde og en responsiv tabell.
Vi har blinget opp appen vår og fått en overskrift i ekte gull! (24 carats baby!)
Den lyser opp hverdagen til en hvilken som helst appbruker.

Glossy effect på H1

Gold glossy effect
Iphone xr view
Dekstop view
CSS magic
Responsive image
Responsive table

EN VISUELL ORGASME

Vi har v√¶rt p√• bloggkurs og har l√¶rt at det er viktig med clickbait-titler for √• f√• clicks. Men jokes aside, vi har fors√łkt √• dra den visuelle identiteten til PowerAppen langt ut over normalen.

Vi har latt oss inspirere av Munch-museets visuelle identitet. Blant annet bruk av store kontraster, fete fonter og h√ły grad av asymetri.

En viktig del av arbeidet var √• finne frem til former og symboler som kunne skape en futuristiskf√łlelse samtidig som vi tok vare p√• noe av det tradisjonelle som du finner i Munchs kunstnerskap. Det startet med en wireframing og idemyldring i Figma den f√łrste dagen, hvor vi la grunnlaget for designelementene som vi har bruk i appen. Se bildet under:

Vi inns√• raskt at PowerApps ikke har avrundede hj√łrner, men vi ville bevare samme felling, s√• vi lekte litt med vektorer for √• skape samme uttrykket, bare motsatt vei:

Vi √łnsket en high-end feeling i appen og for √• oppn√• det ville vi gjerne ha litt flere alternativer √• vlege blant enn de standard fontene i PowerApps. Vi stjal derfor komponenten PowerFont fra pcf.gallery som lot oss laste inn alle fontene fra Google Fonts direkte i PowerApps: https://pcf.gallery/powerfont/

Etter å ha diskutert en del frem og tilbake landet vi på Fira Sans Condensed, da denne har et uttrykk som var likt nok, men samtidig hadde ok kontrast til Munch sin custom-brand font.

Etter å ha brukt mye tid på å lage svg.-filen til topp-logoen i appen bestemte vi oss for å stjele resten av ikonene. Disse lånte vi fra: https://www.svgrepo.com/

Sammen med ulike figurer og former tilsynelatende plassert ¬ętilfeldig¬Ľ p√• lerretet, oppn√•dde vi det abstrakte og figurative uttrykket i appen som vi var ute etter (merk: knappene f√•r den sterke Munch-r√łdfargen n√•r man f√łrer pilen over). Vi har ogs√• gjenbrukt mange av de samme elementene i v√•rt Power BI-dashbord.

Vi ville også ha chatboten vår som en del av appen. For å embedde den stjal vi på nytt fra pcf-gallery. Denne gangen stjal vi komponenten PCF ChatBot for å få åpnet chatten direkte i appen: https://pcf.gallery/pcf-chatbot/.

Cant fight crime without darkmode and custom elements

Ever used light mode? If so, we do not envy you! We did a complete overhaul of the Power App implementing a new color base and custom components. The color scheme is based on dark mode, as to protect our crime fighting turtles and rat’s fragile eyes. As custom components go, we have a beautiful logo on our page and a majestic landing page cover photo!

color scheme, with turtle green as accent
color scheme
custom cover photo
logo

Designing minimalist apps

Sometimes you want to go all out with fancy effects and complex UI, other times you have to pull back and remove everything non-essential. We had to do the latter.

Our app is supposed to be used in emergencies and mostly older people. So designed our app to have large fonts and huge buttons so that the user always know what they have to press and what information is important.

It may seem simple, but creating custom layouts with .NET MAUI is hard. It’s still in preview and since it is cross platform it has to work on multiple devices. Pixels should be glossy, but also functional.

Here are some screens from our app running natively on Windows. It also runs on iOS, Android and macOS.

Power User Love – Love User Power

With great tools comes great responsibility to be productive. With the myriad of application surfaces today each individual has the option to use any app on any device to get the job done.

By providing functionality via native and PowerApps it’s super simple to provide entry points to needed functionality from most productivity tools in M365.

If you’re in a MetaOS Hub like SharePoint or Teams (more to come), Viva Connections with its Home Site functionality is fully integrated with a global entry point to the most useful apps. Develop ones, configure once, use all the time! Viva baby!

Throw in some Viva Learning, easily extendible with custom learning sources and you have learning at your fingertips as well.

Viva Learning – with custom content

For those who fancy typing and chatting – which might be harder for turtle flippers, we provide pizza ordering via a virtual agent chat bot (ok, this is mostly used my TMNT IT to order overtime pizza).

Chat up a pizza pie!

Ordering at your finger tips

Pizza Time app in Teams
Pizza Time app in Teams via Viva Connections
Pizza Time app via search navigation in office.com
Pizza Time app via public web search – linked from work
Pizza Time public web site ordering – inclusive for the old peeps

In the native pizza ordering app we have developed a custom component to calculate estimated delivery time of the pizza.

MaMNT dashing it out for operators

SOS Operator life is hard, and even harder when you have to handle everything on a SOS-by-SOS basis. In order to aid operators in dispatching the correct resources and communicating preventative measures, MaMNT have now set up a Power BI dashboard that gives operators an overview of the current and past situation in the Oslo area.

Being new to Power BI, we explored a number of different metrics that could be useful to operators in report form. Not all of them were feasible, but the heatmap we set up is the crown jewel of the report. It will act as a basis for preventative measures and staffing (turtle) needs around the city.

The first page of the report contains a heatmap of SOS calls throughout the Oslo area, which is updated every 15 minutes with new, incoming SOS calls. It also shows the spread of SOS types, and the map can be filtered to specific types by clicking the columns.

The second page shows a pie chart of the SOS types, combined with a list that shows detailed data on each SOS call.

The third page shows the 30 “neediest” citizens by number of SOS calls. The list on the right shows the types of calls made by each of the needy citizens.

Kj√łleskapet… Fridgitoid 9000.. Kj√łkkenapparat eller din venn i hverdagen?

Ideen om verdens beste kj√łleskap ble unnfanget f√• dager f√łr ACDC gikk av stabelen, men vi hadde et kjempeproblem‚Ķ Vi manglet jo et faktisk kj√łleskap √• ¬ęsmartifisere¬Ľ. Heldigvis sitter teammedlemmene p√• enorme kunnskaper innen papp- og gaffateipkonstruksjon. Med en 3D-printer, semi-god kjennskap til 3D modellering en livlig fantasi klarte vi √• lappe sammen en pappeske som absolutt minner om ekte vare.

Her er en video som viser v√•r fantastiske kj√łleskapslogo som spinner rundt og indikerer at det er liv. N√•r d√łren √•pnes trigges v√•r knappesensor som gj√łr at kamera tar bilde.
Dette oppsettet hadde ikke v√¶rt mulig uten den trofaste Arduinoen, som bygger p√• det eldgamle programmeringsspr√•ket C som f√łrst brukt i 1972. Some things never change, og hvorfor bytte ut noe som fungerer?

Bildet sendes til Azure Cognitive services. Responsen kan du se p√• skjermen i videoen. Helt klart og tydelig en appelsin der alts√•. Deretter sendes dette til Power Automate for √• oppdatere innholdet i ingredients-tabellen som beskriver hva som finnes i kj√łleskapet. Orange = True!

Her har vi et flott B2C-produkt som forenkler hverdagen til alle mennesker og skillpadder med middagskvaler! Det beste av alt, latterlig lave produksjonskostnader! Hvis ikke det er Business Value s√• vet ikke jeg 😉