SPFx Image Editor Sample – Playing with Canvas

by Contributed | Mar 31, 2021 | Technology

This article is contributed. See the original author and article here.

In the year 2020, Microsoft added a new capability to the Image Viewer Web part Resize and Crop. These are excellent features, but I want to try to give the End User more Manipulation Options. I was thinking about Flip and Rotate. First, I tried with CSS it worked, but for me, an Image-Editor should work in every combination of applied manipulations.

So, I started to play with canvas.

How HTML canvas  works

The next step is to draw an image to our HTML canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>
<script>
  const img= new Image()
  img.crossOrigin = "Anonymous";
  img.addEventListener("load", imageReceived, false);
  img.src='https://pnp.github.io/images/hero-parker-p-800.png';

  function imageReceived() {
  const c = document.getElementById("myCanvas");
  const ctx = c.getContext("2d");
  c.width = img.width;
  c.height = img.height;
  ctx.drawImage(img, 0, 0);
  ctx.font = "30px Arial";
  ctx.strokeText("Hello PnP-Community",10,50);
}
</script>

Parker draw on canvas

How to Flip such thing

FlipY

ctx.translate(c.width, 0);
ctx.scale(-1, 1);

Flip Parker Y

FlipX

ctx.translate(0, c.height);
ctx.scale(1, -1);

Flip Parker X

Rotate:

To explain rotation, I start with a straightforward Sample

I draw only a Rectangle on a canvas

Then I rotate this thing for 20 Degree

As you can see the rotation Point is not in the Center of the Canvas. The Rotation Point is at Position 0,0

For this sample I want to rotate the Rectange from the center of the Black box. So we have to move center to position 0,0 than the rotation and than move it back to original position. 

 Now it looks good, but the edges are out of the canvas. Due to the rotation, the height and width has to be changed. Welcome back to maths class.

To i Combine the previous knowledge with the basic Parker Sample here it is

const img= new Image()
  img.crossOrigin = "Anonymous";
  img.addEventListener("load", imageReceived, false);
  img.src='https://pnp.github.io/images/hero-parker-p-800.png';

  function imageReceived() {
  const c = document.getElementById("myCanvas");
  const ctx = c.getContext("2d");
  const oldwidth =c.width = img.width;
  const oldheight =c.height = img.height;
  const degree=20;
  const radian=degree*Math.PI/180 //Radian
  
  const a = oldwidth * Math.abs(Math.cos(radian));
  const b =  oldheight * Math.abs(Math.sin(radian));
  const p = oldwidth * Math.abs(Math.sin(radian));
  const q =  oldheight * Math.abs(Math.cos(radian));
  const newwidth = a + b;
  const newheight = p + q;

   const offsetwidth = (newwidth - oldwidth) / 2;
   const offsetheight = (newheight - oldheight) / 2;
    c.width = newwidth;
    c.height = newheight;
  
  ctx.translate(newwidth/2,newheight/2);
  ctx.rotate(radian);
  ctx.translate(-newwidth/2,-newheight/2);
  
  ctx.fillStyle = "#0078d4";
  ctx.fillRect(offsetwidth,offsetheight,oldwidth,oldheight);
  
  ctx.drawImage(img, offsetwidth, offsetheight);
   ctx.font = "30px Arial";
  ctx.strokeText("Hello PnP-Community",offsetwidth+10,offsetheight+50);
  
}

Thank’s, Parker to be my Top-Model

Try it sp-dev-fx-webparts/samples/react-image-editor at master · pnp/sp-dev-fx-webparts (github.com)

Microsoft Graph Fundamentals now on Microsoft Learn

by Contributed | Mar 31, 2021 | Technology

This article is contributed. See the original author and article here.

We are excited to share that we have released a new learning path on Microsoft Learn, Microsoft Graph Fundamentals, which is a multi-part series that teaches you basic concepts of Microsoft Graph. It will guide you with hands-on exercises on how to use Microsoft Graph Application Programming Interface (API) requests to start developing or enhancing your applications with Microsoft 365 data. 

What is Microsoft Graph? 

Microsoft Graph is the API for Microsoft 365. It is the culmination of most of the data you have in Microsoft 365, Windows 10, and Enterprise Mobility + Security all readily available to be accessed and used in your application by consuming its unified programmability model. 

Why use Microsoft Graph? 

Microsoft Graph helps you take advantage of a secured, unified API that can be used to connect applications to data located in various Microsoft 365 services. Developers can get started with Microsoft Graph quickly and access data across an organization without having to learn how individual Microsoft 365 services work. Security is a critical part of any organization, and Microsoft Graph helps provide built-in security to control access to various services. 

Ready to get started?

Go to aka.ms/learn-graph and complete the learning path to understand the fundamentals of Microsoft Graph with lots of exercises to involve you in the learning process. 

About the learning path  

There are three modules that will take you on a journey through Microsoft Graph and how to use it in an application:

1. In the first module, What is Microsoft Graph? you will be introduced to Microsoft Graph and basic concepts. 


2. In the second module, Configure a JavaScript application to retrieve Microsoft 365 data using Microsoft Graph, you will start configuring a sample JavaScript application to connect to Microsoft 365.


3. In the third module, Access user photo information with Microsoft Graph, you will be able to extend the sample JavaScript application to access a user’s photo information in Microsoft 365.

Tips to successfully complete the learning path

The following are some basic prerequisites that will help you complete the Microsoft Graph learning path:  

• Basic understanding of Microsoft 365. 


• Basic knowledge of Representational State Transfer (REST) services and APIs.


• Ability to develop JavaScript applications. 


• Basic understanding of Azure Active Directory (AAD) and Microsoft Identity concepts (preferred, but not mandatory). 

For the exercises you will need: 

• Administrator access to a Microsoft 365 tenant via the Microsoft 365 Developer Program. (For exercise purposes, use a dev tenant.)


• Node.js installed.

If you are not familiar with Microsoft 365 tenants or dev tenants, we’ve got you covered! Take a look at Julie Turner’s blog, What is a Dev tenant and why would you want one?

Want to learn more about Graph? Join us for a two-hour livestream event created by developers, for developers. Let’s talk app development with Microsoft Graph!  

Go to aka.ms/learntogether-graph and RSVP to start learning how to build apps with Microsoft Graph and connect with our developer community! 

What’s new for admins in Microsoft 365 Apps for enterprise

by Contributed | Mar 31, 2021 | Technology

This article is contributed. See the original author and article here.

March was an exciting month for the Microsoft 365 Apps community. We know that IT admins like you are continuing to play a critical role in keeping your organizations focused and productive, which is why we’re always innovating new features and services for Microsoft 365 Apps. Read on to discover more about the latest capabilities, including Microsoft 365 Apps health, extended offline access, and device-based subscription. And if you missed any of our Microsoft Ignite sessions, watch the on-demand videos to learn more about what we’re developing to help make your role easier. 

General availability of Microsoft 365 Apps health 

Earlier this month we announced the general availability of Microsoft 365 Apps health, a dashboard in the Microsoft 365 admin center that provides visibility and actionable guidance about the ongoing health of Microsoft 365 Apps. You can quickly spot anomalies that might need investigation, identify the number of devices running unsupported Office builds, view a list of advisories for your organization, and keep track of the number of devices covered by Apps health. You can also see trends over the last 60 days and discover correlations between current advisories and those that have occurred in the past. Microsoft processes diagnostic data from your environment to produce these valuable insights and gives you confidence that the Microsoft 365 Apps in your organization are secure, up to date and behave properly. 

Microsoft 365 Apps Ignite sessions recap  

We were excited to share the latest developments for Microsoft 365 Apps at Microsoft Ignite 2021 earlier this month. If you weren’t able to join us live, check out our on-demand sessions to learn about all the ways we are making it easier for you to manage your Microsoft 365 Apps environment:  

Manage Office apps deployments with new tools and services  

In this session, Amesh Mansukhani, Principal Program Manager for Office Engineering, and Javier Carrillo, Senior Program Manager for Office Engineering, share how our latest cloud tools and services for Microsoft Office apps provide improved insights into your inventory and app health, along with tools for automated deployments and control to increase your workload efficiency and lower your total cost of ownership. 

Insights and controls for Microsoft 365 Apps in admin center (Click to watch the session) 

Rebecca Keys, Program Manager for Release and Delivery Experience, and Reshma Kapoor, Senior Program Manager for Release and Delivery Experience, explain how we’re empowering admins like you with actionable insights and effective controls in the Microsoft 365 admin center. This session focuses on how we’re helping you use feedback from end users to understand and improve your organization’s health, and how delivering Microsoft 365 Apps updates in a monthly cadence can improve end-user satisfaction and productivity. 

How to onboard devices to the Microsoft 365 Apps admin center (Click to watch the session)

To help you better manage the lifecycle of your Office applications, Microsoft 365 Apps Rangers Bob Clements and Martin Nothnagel walk you through installing Office on end-user devices, onboarding devices to the Microsoft 365 Apps admin center, registering devices with inventory, and how to use servicing profiles. 

Office hours: Q&A with Office experts on deploying and managing Microsoft 365 Apps 

We held four Office Hours Q&A sessions to discuss topics such as moving from legacy Office to Microsoft 365 Apps, migrating from 32-bit to 64-bit versions of Microsoft 365 Apps, benefits of moving to the Monthly Enterprise Channel, and the new cloud-based management features available in the Microsoft 365 Apps admin center. 

Microsoft 365 Apps for offline and shared devices 

At the end of February, we introduced two new features for Microsoft 365 Apps—extended offline access, and device-based subscription. These capabilities help to ensure that employees who are offline for months at a time or rely on shared devices benefit from the same user experience and stay productive and secure no matter where they’re working. With extended offline access, devices can stay activated without connecting to the internet for up to 180 days, so workers continue to have access to Microsoft 365 Apps. With device-based subscription, we’ve extended coverage to employee-shared devices, which are common in industries such as manufacturing, agriculture, healthcare, retail, and hospitality, ensuring they have access to the latest and most secure productivity tools that are available on desktop. Because the license is assigned to the device, workers aren’t required to have their own Azure Active Directory identity. 

Catching up: New Microsoft Docs articles for March 

You can catch up on some of the latest Microsoft 365 Apps news in these articles on Microsoft Documents: 

• Overview of inventory in the Microsoft 365 Apps admin center 


• Overview of extended offline access for Microsoft 365 Apps for enterprise  


• Overview of security update status report in the Microsoft 365 Apps admin center 


• Microsoft 365 Apps health 


• Device-based licensing for Microsoft 365 Apps for enterprise   

Continue the conversation by joining us in the Microsoft 365 Tech Community! Whether you have product questions or just want to stay informed with the latest updates on new releases, tools, and blogs, Microsoft 365 Tech Community is your go-to resource to stay connected!