Text input to a specific url


(ism) #1

Hi friends.
I am new at Hype… I saw some projects, shared on forum, I liked them so much.
I need a offline “go to a page” app.
I dont know anything of javascript… Could you help me? Maybe some people shared on forum but I couldnt find it…

WHAT I WANT:
I have a text input. want to write a number in it, then; when press “go” button, it will go to that scene.

is this possible with hype?
here a photo to show what I want…

_

_


Form with Virtual Keyboard and Indexeddb
(Mark Hunte) #2

This is not that hard to do.

But I would suggest you do try and get some understanding of the basics of JS.

Partly because anything we do post may be beyond what you can get to grips with… :smiley:

The code here is just a quick example to show you it can be done.

/* Set up the Rect as an editible input //-- This is first run on scene load so we return without going
  further on the first run.  */
 if(typeof window.input == "undefined") {
	
	window.input = hypeDocument.getElementById('urlInput')
	window.input.contentEditable= true
      
      return
	}
 
 
 /*  The above will be ignored by  further calls wil be from the button. 
 */
 
  /* -- We get the value  as an Int */
	 var inputResult = parseInt(window.input.innerText)
	 
	 /* -- Check the value is a Number */
	 if(  isNaN(inputResult )) {
	
	/* -- Log error  and return /exit*/
	console.log('error not a number');
	
	 
	 return
 
	} else {
	
	
	/* --  get the scenes.
	
	We mainly want to just get some sort of index of the scenes without worring about names
	
	We can the use the index position in the scenes array to match the input result*/
	var scenes = hypeDocument.sceneNames()
	
	 
	/* -- Assuming first scene is just the go to url  scene so we treat it as index 0
	
	Arrays index start from 0 not 1. So if we have 5 scenes the index numbers are
	
	0,1,2,3,4
	
	
	
	 */
	 
	 
	 /* check the number does not exceed scenes.length 
	  we minus 1 from  scenes.length so we are checking   upto 4 not 5.
	  
	  
	  Depending on you setup this can change.
	  */
		if (inputResult > scenes.length  -1) {
		
		
		/* -- Log error */
		
	console.log('No scene at that number');
	
	} else {
	
	
	hypeDocument.showSceneNamed(scenes[inputResult ], hypeDocument.kSceneTransitionCrossfade, 1.1)
	
	
	}
	
	
	
}

The way it works is we cheat with the input ( because I am lazy ) and use a Rect as the input.

On a scene load action we run a Hype JS Function ( the one above ).
This initially sets up the Rect as editable so we can type into it. See lazy…


We then set the button to call the same function. Again I am lazy and could not be bothered to write two functions.

The first part of the function that did the set up is ignored because it registers as being setup already.

The second part will run and check the number.

Remember this is just an example and real setup and interaction is up to your setup. This includes as mention which actual scenes you want to go to and index use.

Go To Scene Number.hype.zip (38.4 KB)


(ism) #3

you amazing :slight_smile:
thanks a lot…
really fantastic app…