The official PhotoCube Client and Server implementations

Info:

This PhotoCube Client and Server implementations are made prototype applications developed for research purposes by Peter Øvergård Clausen as part of his MSc. thesis in Software Development at the IT University of Copenhagen.

This repository is forked from https://github.com/PeterOeClausen/Thesis. Future changes to the implementation will happen in this ITU-PITLab/PhotoCube repository.

The PhotoCube uses the M^3 data model, initially proposed by Björn Thór Jónsson, combining multidimensional analysis and faceted search to browse large multimedia collections in order to gain useful insight.

The PhotoCube Client is developed in React using Typescript. It also uses the ThreeJS library for 3D rendering.

The PhotoCube Server is developed in C# in the .NET CORE framework, using Entity Framework CORE to communicate with an SQL database. It also uses SixLabor's ImageSharp framework to handle images and Newtonsoft's Json.NET framework to serialize and parse JSON.

Prerequisites:

On a Windows PC:

Tip: Hold ctrl when clicking on the links to open them in a new tab:

• Download and install Visual Studio IDE (Community edition is free) (Required for running and developing server).
• Download and install Visual Studio Code IDE (Recommended for client development).
• Download and install Node (Required for React client).
• Download and install SQL Server (Express and Developer editions are free, scroll down a bit) (Required for running development server) REMEMBER TO CHECK LOCALDB DURING INSTALLATION.
• Download and install the Google Chrome Browser or Edge to use the client application with. (Mozilla and other browsers are not yet supported).

Please restart your computer after installing the frameworks, before trying out the code.

Download the code:

Either clone this repository or download it as a zip file with the green button on the top-right of this page.

Download the dataset:

Ask Björn Thór Jónsson for the Laugavegur dataset: bjth@itu.dk.

Installing and running the server:

Step 0: Open the ObjectCubeServer solution file in Visual Studio:

Open the ObjectCubeServer.sln solution file in Visual Studio. This can be found in the Server/ObjectCubeServer/ directory.

If Visual Studio says that you need to download and install extensions to make it work, please do so.

Step 1: Enter a connection-string:

Add a connection-string to your SQL database in the file: ObjectCubeServer/Models/Contexts/ObjectContext.cs around line 124. Eg:

  case "DESKTOP-EO6T94J": //Laptop
    optionsBuilder.UseSqlServer("Server = (localdb)\\mssqllocaldb; Database = ObjectData; Trusted_Connection = True; AttachDbFileName=C:\\Databases\\ObjectDB.mdf");
    break;

Note that you can find your computername Eg. "DESKTOP-EO6T94J" by running the command hostname in cmd.

Also note that the connection-string identifies the Server, this is usually "Server = (localdb)\mssqllocaldb;", the name of the database: "Database = ObjectData;", that it's a trusted connection: "Trusted_Connection = True;" and the path to the database file (.mdf) "AttachDbFileName=C:\Databases\ObjectDB.mdf". The ObjectDB.mdf file will be created later with the command "Update-Database".

Also note that the directory C:\Databases needs to exist.

Step 2: Enter the path to the Laugavegur Dataset on your computer:

Please specify the path to the Laugavegur dataset on your computer in ConsoleAppForInteractingWithDatabase/LaugavegurDatasetInserter.cs around line 34. Eg:

  case "DESKTOP-EO6T94J": //Laptop
    pathToDataset = @"C:\LaugavegurData";
    break;

Step 3: Rebuild the solution to download missing NuGet packages

Then we will compile the applications by right-clicking the Solution in the Solution Explorer and click Rebuild Solution. This will download and install all the NuGet packages needed:

Step 4: Create the database schema migrations and run the migrations against the server:

If the folder Migrations exists in the ObjectCubeServer project, please right-click and delete it. We will generate it again next:

Open the Package Manager Console (tip: You can search for it in the upper right corner):

Be sure that Default Project is set to ObjectCubeServer, and that ObjectCubeServer is selected as StartUp Project:

Run:

Add-Migration init

To create the Migrations folder.

Then run:

Update-Database

To apply the migration to the database. This will create the database on the server.

Step 5: Populate the server with data:

To populate the database with data, right-click the ConsoleAppForInteractingWithDatabase and select 'Set as StartUp Project'. Then run the application by pressing the Play button in the top of Visual Studio to start the ConsoleAppForInteractingWithDatabase program:

When the Console Application says "Press any key to shut down." the database is populated. This process usually takes around 20-30 minutes.

Step 6: Run the server:

You can now run the server by right-clicking the ObjectServer project, select 'Set as StartUp Project' and then run the application by pressing the play button in the top of Visual Studio.

Installing and running the client:

Note that when running these commands, it may give "WARN" and "notice" messages, however you can ignore these and keep going with the installation.

Step 1: Install React:

After installing Node and restarting, open cmd and install React:

npm install react

Step 2: Install the project:

Navigate to the Client/ directory and run:

npm install

This will download and install all required packages.

Tip: You can start the cmd in the current directory if you write "cmd" and press enter in FileExplorer, though this might not work in a simulated environment, then you may have to use "d:" to change to the d drive, and then "cd {yourPath}":

Step 3: Run the client:

Run the client with the command:

npm start

A browser tab should open automatically with the client application.

User manual:

When the client and server is running, you can choose dimensions on the right, picking either tagsets or hierarchies:

Press f11 to use the PhotoCube Browser full-screen and escape to exit full-screen.

After picking a hierarchy, you can drill down into the hierarchy on the right:

Rotate the camera by left-clicking and dragging. Pan the camera by right-clicking and dragging. Zoom in and out using the scroll wheel. Move the camera in y direction using space-key for up or ctrl-key for down.

You can also hover over a cube with the mouse, and see how many photos are in the cube and see what tags it is alligned with:

You can swich browsing mode on the right side to from Cube to Grid or Card mode. Press escape to return to the cube mode you were in:

Card browsing mode:

Grid browsing mode:

You can also right click a cube and press "Show cube in card mode" to open a cube in card-mode:

You can further filter out photos using the Hirarchical Faceted Searcher on the left:

Applying filters "Björn" and "Solveig" filters out all photos that are not tagged with both "Björn" and "Solveig".

Picking a parent node like "Family" filters out all photos that are not tagged with either "Family", "Asa", "Asthor", "Björn", or "Solveig" (The parent node, and all subnodes recursively).

Other (needed if you are going to make changes to the database or downloaded npm packages on a seperate computer):

If you need to delete the data in the database, run:

Drop-Database

in the package manager console. This will delete the database.

If you have made changes to the DB Schema, I recommend deleting the Migrations directory, running 'Drop-Database' followed by

Add-Migration init

in the Package Manager Console. This will recreate the Migrations directory and create the Migrations. Lastly, update the schema by running 'Update-Database'.

You can apply changes to the database schema with the command:

Update-Database

If you have worked on the client application on one computer, and installed packages using npm, install these packages by running 'npm install' before running 'npm start'.