SurfaceR - Mobile gyroscope synced with an 3D HTML Object

 Idea

The main idea is to communicate in real time with SignalR with ASP.NET Core. In realtime mobile orientation data is exchanged with the connected clients. There is also a remote embedded into the website. For now this only runs on the Android Mozilla Firefox.

Action Page

The 3D model is made with HTML5 and CSS3. The X,Y and Z orientation is changed with the realtime data with orientation of the phone or the remote given.

Its an open source project so feel free to contribute.

Source Code at GitHub

How does it work?

Step-1 You open the website and click on "See In Action" It opens up an image which changes it's orientation. Step -2 There is two way to change the orientation of the image. You open up the same website in an another device and click on the "Controls". As you change th e orientation using the Axes controllers or the Gyroscope controllers the image will change its orientation. You download the SurfaceR Android or iOS app and then turn on the button & boom!. The images changes its orientation with the help of the current orientation of the smartphone.


Behind the Scenes

The orientation data of the smartphone is synced with the rotation property of the image. As the device orientation change is detected it senda the infor about it's X,Y and Z axes and the images rotates itself according to it as it is listing for the data from the SignalR hub in the server.


In the same way the slider X,Y,Z values and also sent to the SignalR hub to which the surfaceR client or the image is listening. As you move the slider it send the infor to the hub and the image orientation is changed.

Comments

Post a Comment

Popular posts from this blog

Use SCSS with ASP.NET Core 5.x or 3.X

Image
Here we will see how we can use SCSS or SASS with ASP.NET Core 3.X or 5.X Here is the step to step guide for using SCSS in ASP.NET Core. Step 1: Install sass as global using npm: npm install --global sass Bash Copy Step 2: Create a new ASP.NET Core project , choose MVC or Razor Pages Add a SCSS file to the Web app, here I have added test.scss to the wwwroot/css folder. Add the following lines to the .csproj file to enable SCSS to CSS compilation in the web app. For  node-sass  and  ruby-sass  write this: sass --no-source-map $( ProjectDir ) wwwroot/css/test2.scss $( ProjectDir ) wwwroot/css/test2.css Bash Copy If you're using  dart-sass If you're using dart-sass the usage is --no-source-map sass --no-source-map $( ProjectDir ) wwwroot/css/test2.scss $( ProjectDir ) wwwroot/css/test2.css Bash Copy   < Target Name = " ScsstoCss " BeforeTargets = " Build " > < Exec Command = " mkdir $(ProjectDir)wwwroot/css " Condition = " !Exist
Read more

Building a Login Flow with .NET MAUI

Image
​ Let's build a Login Flow with .NET MAUI with Shell. Authentication in any mobile app is very common. Lets get started with this. Its obvious that it should ask for login only if it isn't authenticated. We will check for authentication , if not there we will move to Login page if login is success we will move to the Home page. For this example we will override the backbutton pressed event to quit the application but you can customize accordingly as per your need. For this post I am using a simple authentication but you can use JWT or any method you want.  Here is the example of the login flow:       All the pages that has to be used needs  to be registered with the Shell. If you are a bit familier with the Shell navigation the first content page is the one which is displayed after startup. So we need to structure the shell accordingly in order. The pages we are using here for the example: LoadingPage LoginPage HomePage SettingsPage Here is the AppShell.xaml <
Read more

PySpark Schema Generator - A simple tool to generate PySpark schema from JSON data

Image
 Hi Folks, I built a small tool that solves a problem for a data engineer while dealing with JSON data. As we know JSON data is semi-structured and we always ingest them and denormalize them to smaller tables properly for further processing. In my case I had to generate PySpark Schema from JSON to ingest the data and the JSON structure often gets changed. The JSON I was dealing was very complex but let me give you an example about the tool, what problem it solves. For example we have a JSON coming from Kafka like below {   "name": "PREETish ranjan",   "dob": "2022-03-04T18:30:00.000Z",   "status": "active",   "isActive": true,   "id": 102,   "address": {     "city": "Bhubaneswar",     "PIN": 500016   },   "mobiles": ["8989898989", "5656565656"],   "id_cards": [1, 2, 3, 4, 5] } The output i need is like this, StructType([     Str
Read more