HowTo: Develop 360 Image Desktop Apps with JavaScript and RICOH THETA

javascript

#7

@Kev091190

Using client mode can take some fussing, but once you get it, it should work well.

Have you updated your firmware? That might help. You want 2.50.1

Here’s a fuller guide: THETA V Client Mode Configuration Guide


#8

yes im currently on 2.50.1
ive already connected it successfully to my “router” (my seagate wireless plus HDD that also has its own client mode so it is connected it the internet aswell)

Green light is solid


#9

Check out from Step #4 in the link I added. In the official mobile app you can set up the username and password.

Yea, you’ll want to connect directly to the THETA for the first setup.


#10

i did set up a password, but re entered a new password and now i can connect using the internet browser.

next what code would i have to add to allow the electron app to use the password and username that was set?.


#11

i got it now

Redirect 192.168.1.1 to new address

http://IPADDRESS/osc/info?username=THETAYLXXXXXXXXX&password=NEWPASSWORD

---- [edit] incorrect code below-------
example: (from index.js file)

getInfo = function() {
    console.log("button clicked")
    client.get("http://IPADDRESS/osc/info?username=THETAYLXXXXXXXXX&password=NEWPASSWORD", function (data, response) {
      console.log(data);
      // console.log(response);
    var thetaResponse = document.getElementById('thetaResponse');
    thetaResponse.innerHTML = JSON.stringify(data);
    });
  }

Thank you very much for the help


#12

Hey, fantastic. Good work!


#13

Thanks for posting the code snippet, too. Nice to get that out there for others.


#14

my mistake. it will allow you to access it through the web browser but not through the electron app

ill keep trying :confused:


#15

im guessing it would have to be something of this sorts? (in arrows below)
but it does not exist in the api v2.1

startSession = function() {
    var args = {
    data: { "name": "camera.startSession" , 
      ------> "client" : {
                              "username" : "THETAYLXXXXXXXXX" ,
                              "password" : "NEWPASSWORD"
                               }    <-----------------
 },
    headers: { "Content-Type": "application/json" }
};
...

#16

The client mode user name and password is with digest authentication.

I have not tried the library below:

I think the request library below does not implement digest auth correctly.

May Not Work


You Need a Library That Handles DigestAuth

var postData = {
// post data here
}

var postReq = new digestAuthRequest('POST', url, 'username', 'password');

postReq.request(function(data) { 
  // success callback
  // data probably a success message
},function(errorCode) { 
  // error callback
  // tell user request failed
}, postData);

#17

ill keep working on this after im done my current project.

To use the current code to make a simple interface that takes video or pictures and back them up to a harddrive when there done, possibly try to do long video recording then transfer and loop.
i have a car show i go to id like to record since i foundout you can inport 360 video into a 3d render program i have.

.
A little improvement code: (to update on to my previous CMD notepad edit)
Using the “application on GitHub”
Features:

  • Adds Close Program Button to web page
    .thetalist
  • Also minimizes the “RUNTHETA” program at start

    ’ note i did add “hidden” to the image and video demo(s)

Step A - Create:

  • "RUNTHETA.bat" (used to run program)
    open notepad & paste code below, then save as RUNTHETA.bat

if not DEFINED IS_MINIMIZED set IS_MINIMIZED=1 && start "" /min "%~dpnx0" %* && exit TITLE RUNTHETA electron app.js exit

  • "KILLRUN.bat" (used to Close RUNTHETA.bat also Close’s Electron)
    open notepad & paste code below, then save as KILLRUN.bat

taskkill /F /FI "WindowTitle eq RUNTHETA" /T


Step B - Add:

  • Add The Button to your App Page " X " & “Refresh Page” Button
    open “index.html” in notepad & paste code below where you’d like, then save.

<button onclick="KILLRUN();">X</button> <button value="Refresh Page" onClick="window.location.href=window.location.href">Refresh Page</button>

  • Add The Button code
    open “index.js” in notepad & paste code below at the bottom of the Document, then save.

KILLRUN = function() { require('child_process').exec('cmd /c KILLRUN.bat'); }


I will also make a powershell program when i have time that Adds this all for you…
so all you have todo it run the program.

enjoy.


#18

doing some testing…
made a easy way to input code for testing…


#19

Nice progress! Thanks for these updates. :slight_smile:


#20

More progress:
finaly after some time trying to figure this out
i found a way to find info from a result

example code (result code from a request):

{
	"fingerprint":"FIG_0019","state":
	{
		"_apiVersion":2,
		"batteryLevel":1,
		"_batteryState":"charged",
		"_cameraError":[],
		"_captureStatus":"idle",
		"_capturedPictures":0,
		"_latestFileUrl":"",
		"_pluginRunning":false,
		"_pluginWebServer":false,
		"_recordableTime":0,
		"_recordedTime":0,
		"storageUri":"http://192.168.1.1/files/150100525831424d42075931ce41c300/"
	}
}

and say i want the url from the “storageUri” everytime i use the same request and get the above result above.

well i can get that and extract only the url.
as of now ive made it so all you have todo is select the name of the element you want, and if the element result requres (Quotation marks, comma) before or after the info you want to require.


*the picture displays it getting the “fingerprint” element 1st result
also the code on the page isnt displayed the best, but i was more focused on getting the equation to work as i wanted then make it look good for myself lol


#21

Congratulations on your progress. This will be useful to people in the future as there is no easy way for people to set camera parameters from a desktop/laptop.

Also, the mobile app doesn’t allow configuration of the entire API.

Whenever you’re ready, feel free to put your code up on GitHub. Maybe other people will join into the development and submit pull requests.


#22

result2

a little more user friendly.

i will repost to github once i finish what ive been currenly working on,
this is just one step to get me closer to my main plan.

time is a factor.


#23

Kevin,

Really cool that you’re putting in the effort. I’m pretty interested in trying this out myself. I’ve wanted to be able to grab bigger chunks of API accessible info all at once. This seems like a cool answer to that.

No pressure. But if you do get it up in a GitHub repo, I’d love to be able to try it out myself.

Jesse

PS. Time is always a factor. :slight_smile:


#24

Very compelling Motivation, and Quote.

just had to do some work.
not sure if its useful the way im going, but I’ve never made a Github before.


also formatting text so when set at the correct width, the code has a smaller layout of the same data.

The next step i would like to figure out would be how to send a data responce update from the device, or if that is even possible, instead of a timed refresh update.

Ex. After the recording is converted to a file, theta sends a update of some sorts to post that the updates the users incoming request of active info.


#25

this API command may work to check to see if the camera is ready to take another video. The example is with still image, but it may work with video.

https://developers.theta360.com/en/docs/v2.1/api_reference/protocols/commands_status.html


#26

That is perfect for getting a approximate finish time and also convertion time and speed after the video has been converted then transferred*

Thank you