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

Kev091190 · February 9, 2019, 12:21am

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

jcasman · February 9, 2019, 12:24am

Hey, fantastic. Good work!

jcasman · February 9, 2019, 12:25am

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

Kev091190 · February 9, 2019, 12:32am

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

ill keep trying

Kev091190 · February 9, 2019, 1:22am

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" }
};
...

codetricity · February 9, 2019, 1:32am

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);

Kev091190 · February 10, 2019, 11:49pm

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
.
Also minimizes the “RUNTHETA” program at start

thetalook790×838 55.7 KB

’ 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.

Kev091190 · February 11, 2019, 1:43am

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

codetricity · February 11, 2019, 1:52am

Nice progress! Thanks for these updates.

Kev091190 · February 13, 2019, 11:20pm

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

codetricity · February 13, 2019, 11:48pm

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.

Kev091190 · February 13, 2019, 11:54pm

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.

jcasman · February 14, 2019, 12:41am

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.

Kev091190 · February 14, 2019, 5:39am

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.

codetricity · February 14, 2019, 4:54pm

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

Kev091190 · February 14, 2019, 5:44pm

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

Kev091190 · February 22, 2019, 9:33pm

I found a much easyer way to get the info from the json info.

https://www.w3schools.com/js/tryit.asp?filename=tryjson_parse

Ive decoded json before but this seams to be the easyest way todo so for those following.

Kev091190 · February 23, 2019, 5:51am

just a little update, i think i found something that will work nicely.
it decodes “Response” and gets each field.

ADDED automatic loop to get current update,
also doesn’t require the"Response" field as show in the image example,
and now updates every second with added format:

uptime:1205
Device On Time: 0D 0H 20M 5S

possibly make a simple interface?..
endless possibility’s?

** As it appears making a windows based camera interface is a given requirement before I move further with what I am currently working towards.

*current… i havn’t had time to add to it but will try todo so today.

Jake_Kenin · March 5, 2019, 3:50pm

I am interested in this as well. My objective is to get the livestream preview from the camera in to electron and then view it in an Occulus headset using either Google VR or A-Frame. I think A-Frame and electron work together, but I am not sure.

Do you have a GitHub repo for this setup yet?

Kev091190 · March 5, 2019, 10:03pm

There is a gethub for this forum, but I have not posted one for what I am working on yet.
I’m currently just trying to setup a order of getting the info that possible to get from the theta to a easyer to use format.