creating a configuration page and passing variables to a simply.js app - javascript

i developed a simply.js app that fetches bus arrival time from a webservice, problem is that as of now it work only for one stop.
i want to create a configuration page with a multiselect where i could choose multiple stops , sending them to the pebble as an array and at the press of up/down buttons i want to cycle the array to show different bus stops.
Im not good in C, i prefere javascript thats because i used simply.js.
id like to know and learn how to do it, because i think online there isnt much documentation and examples.

Found a similar question/ issue at simply.js github page https://github.com/Meiguro/simplyjs/issues/11. The code example below comes from Meiguros first answer. The code sends the user to your configuration website, which you should configure to send json back.
You can probably copy the code example for enabling the configuration window and paste it in the begining of your main pebble app.js file. Do not forget to add "capabilities": [ "configurable" ], in your appinfo.json file. If you are using cloudpebble you should go to the settings page of your app and make sure the configurable box is checked.
var initialized = false;
Pebble.addEventListener("ready", function() {
console.log("ready called!");
initialized = true;
});
Pebble.addEventListener("showConfiguration", function() {
console.log("showing configuration");
//change this url to yours
Pebble.openURL('http://assets.getpebble.com.s3-website-us-east-1.amazonaws.com/pebble-js/configurable.html');
});
Pebble.addEventListener("webviewclosed", function(e) {
console.log("configuration closed");
// webview closed
var options = JSON.parse(decodeURIComponent(e.response));
console.log("Options = " + JSON.stringify(options));
});
(https:// github.com/pebble-hacks/js-configure-demo/blob/master/src/js/pebble-js-app.js - remove space after https://)
To then push the settings back to the pebble i think you need to add
Pebble.sendAppMessage(options);
just before
console.log("configuration closed");
// webview closed
I found this out at the last post on this pebble forum thread http://forums.getpebble.com/discussion/12854/appmessage-inbox-handlers-not-getting-triggered-by-javascript-configuration-data
You can aslo find a configuration website example named configurable.html in the same git as the code example at https:// github.com/pebble-hacks/js-configure-demo remove space after https://
Hope this helps a bit on the way to achieving your goal

So the configuration page is a web page, and you can host it and provide your URL as mentioned by Ankan above.
Like this:
Pebble.openURL('http://assets.getpebble.com.s3-website-us-east-1.amazonaws.com/pebble-js/configurable.html');
Lets say you decide to take the name and age of the user in the configuration page, you would have two text fields for them to enter their information, then you would have a submit button. For the submit button write a javascript function which uses jQuery to take the values of the text fields onclick, then save those values to a variable, and use JSON to send them to the phone. Here is an example of a fully created configuration web page: https://github.com/pebble-hacks/js-configure-demo
Enjoy.

Related

Google Tag Manager Virtual Page View

I have a little problem setting up a virtualPageView which should override the URL which is sent to google when no result is present.
Heres what I have as JavaScript code:
function returnNoSearchResultsGoogleTagManagerCode($searchterm){
if ($searchterm == "") return "";
$requestUri = $_SERVER['REQUEST_URI'] . "&no_result=".$searchterm;
$js = "<script>
$(document).ready(function(){
dataLayer.push({
'event':'empty_result',
'virtualPageURL':'".$requestUri."'
});
});
</script>";
return $js;
}
As you can see, I want to use an event trigger (empty_result).
In google, I use a Trigger to determine if the Page is a no result Page. First i created a custom Variable with custom JS
function(){
if (document.getElementsByClassName('ga-no-result').length > 0){
return true;
}else{
return false
}
}
The class is set, if the SearchEngine can't find a result. So far so good.
I also created a dataLayer variable to hold the virtualPageURL
Now I need an event which is triggered if the variable is true.
Finally I created a Tag with type PageView which is fired when the event occurs:
Until now it seems okay, the Tag is properly configured (i guess) but if I do a search which has no result, the Page URL is not overridden
The Tag is properly fired and the variables are filled. The overview of the dataLayer shows a correct dataLayer event.
But the PageURL is not overridden... Even if I wait a whole day, the category isn't sent to google.
What am I doing wrong?
I would be very thankful if someone would have an idea or even a solution :)
Thanks in advance
exa.byte
UPDATE:
Hey, I forgot to mention, that I want to use the new page variable as the string which google should use to determine the searchterm and the searchcategory
In Google Analytics I configuered the search as the "q" parameter and the "no_result" as the category.
Is it even possible to change the string which google will parse in the end?
To send a virtual pageview to Google Analytics, the field you need to change is page not {{Page Url}} , also the title field is often used.
That's really the only two things you need to do to send a simple virtual pageview.
Extra: I always start my pagepath with /virtual/ to be able to recognize which ones are virtual pageviews easily in GA
For virtual page view you have to change Field "page" - in your GTM-OnSearchEmptyResult you are changing "{{Page URL}}" - I don't think that's correct way to send virutal pageview. Also if you need to change hostname use Fieldname "hostname".
In preview mode you will not see Page URL changed in Variables Tab, you have to go to the actual GA tag that is fired and check it's values. You can either do this in GTM's preview tool or you can use standard developer tools - Network Tab and see what values are being sent to GA:
You can see "dl" parameter is the current page, if you set up virtual page you should also see parameter called "dp" this is going to be the new value of page in your GA.
If you want to setup virtual pageview you have to use page instead of {{Page URL}} in your fieldname and for Document title use title in you fieldname.
for more field reference of google analytics follow below link
https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#hitType.
If you don't want to mess around with custom Tag Manager events it's still possible to use the good old ga method, even if you don't include the Analytics code on the page. You just need to fetch the right tracker dynamically, as explained by Simo Ahava in this thread.
if (typeof ga === "function") {
ga.getAll().forEach((tracker) => {
tracker.set('page', '/my/path'); // <- change here
tracker.send('pageview');
});
}
I also put it in a gist here.
thanks for your help. I think I got rid of the Problem and have solved it now. I will describe my solution below:
The solution is quite simple.
I had an error/ spelling error # google backend. I set the search_category parameter to "no_results", but used "no_result" for implementation...
Pretty dumb, but sometimes you just won't see the wood for the trees...
I created a new Trigger as helper "HelperDomReady" to trigger the only if DOM is ready and the variable "isEmptySearch" equals "(bool)true"
Now I can see the searchterms which have no result in google backend in the "sitesearch categories" summary. Since I won't set the parameter at all, if the search had at least one hit, the site-search category shows "not-set" for successful results. Therfore the category-section will only show searches without a hit. Problem solved :)
Disadvantage: The searchterm is also listed in the normal list. But I think this is negligible

Update glimpse tab plugin data using ajax

I'm trying to create a custom glimpse plugin that shows us some information from our server.
When I open the page I get all the data I need but I want to be able to update this data once every 20 seconds(or when i click on a button in the tab) without having to refresh the entire page.
I've managed to add my JavaScript to the page and subscribe to the render and shown events, but i don't know how to update the tab content when something happens.
This is my tab
public class EagleTab : AspNetTab
{
private readonly IGlimpseInterventionService _glimpseInterventionService;
public EagleTab()
:this(new GlimpseInterventionService()){}
public EagleTab(IGlimpseInterventionService glimpseInterventionService)
{
_glimpseInterventionService = glimpseInterventionService;
}
public override object GetData(ITabContext context)
{
var interventionSection = new TabSection("Last modification", "Last Message","Time since last modification","CSE","DPS", "Start Date","End date");
var now = DateTime.Now;
var twoHoursThresshold = new TimeSpan(1,0,0);
foreach(var inv in _glimpseInterventionService.GetActiveInterventions()){
var timeSinceLastMod = now - inv.LastModification;
interventionSection.AddRow()
.Column(inv.LastModification)
.Column(inv.LastMessage)
.Column(timeSinceLastMod.ToString("c"))
.Column(inv.CSEName)
.Column(inv.DPSName)
.Column(inv.StartDate)
.Column(inv.EndDate).WarnIf(timeSinceLastMod<twoHoursThresshold);
}
var plugin = Plugin.Create("Section", "Data");
plugin.AddRow().Column("Active interventions").Column(interventionSection);
return plugin;
}
public override string Name
{
get { return "Eagle Tab"; }
}
}
And this is the JavaScript
(function ($, pubsub, tab, render) {
'use strict';
function refreshTabContent(){
//what am I supposed to do here
}
pubsub.subscribe('action.panel.rendering.eagle_glimpse_plugins_eagletab', function (args) {
});
pubsub.subscribe('action.panel.showed.eagle_glimpse_plugins_eagletab', function (args) {
setTimeout(refreshTabContent,30000);
});
})(jQueryGlimpse, glimpse.pubsub, glimpse.tab, glimpse.render);
As you can see in the js there is a function called refreshTab i want there to update the content of the tab.
I know that i could make an Ajax call to a controller of mine get the data and then try updating the panel using jQuery but that just seams a bit wrong and i'm hoping there's a better way.
Any tutorial or documentation about glimpse client side extensibility would be welcomed as well.
You have gotten a fairly large amount of the way towards your goal. Unfortunately though there isn't really a way of getting data from a tab outside of a request. That said, there is a "Glimpse" way of getting data from the server. This is small semantic difference, but it has to do with server data, vs request data.
If I was you, I would probably write this as a client side only tab and not implement AspNetTab. Here are some examples of how this can be done. Next I would implement a Resource. Unfortunately its not very well documented but fortunately its not very hard to work with.
This repo has some examples of how to work with client tabs back to resources. Specifically the Inventory tab is a tab that lets people mouse over products in the site and have the tab show stock levels. Here is the resource and here is the client code that interacts with the resource (given what you have so far, this should be fairly easy to adapt. Lastly, as a bonus, if you haven't seen it already, here is how to include your script into your page. Note, the commits on that repo are the step by step guid to how things come together.
Let me know if that helps.

Change URL data on page load

Hello I have a small website where data is passed between pages over URL.
My question is can someone break into it and make it pass the same data always?
For example let say, when you click button one, page below is loaded.
example.com?clicked=5
Then at that page I take value 5 and get some more data from user through a form. Then pass all the data to a third page. In this page data is entered to a database. While I observe collected data I saw some unusual combinations of records. How can I verify this?
yes. as javascript is open on the website, everyone can hack it.
you will need to write some code on you backend to validade it.
always think that you user/costumer will try to hack you sytem.
so take precautions like, check if user is the user of the session, if he is logged, if he can do what he is trying to do. check if the record that he is trying get exists.
if u are using a stand alone site, that u made the entire code from the ashes, you will need to implement this things by yourself.
like using the standard php session, making the data validation etc.
or you can find some classes that other people have made, you can find a lot o this on google. as it is a common problem of web programing.
if u are using a backed framework that isnt from another world, probably already has one. sp, go check its documentation.
html:
<a id = 'button-one' name = '5'> Button One </a>
javascript:
window.onload = function() {
document.getElementById('button-one').onclick = function() {
changeURL(this.attributes.name.value);
};
};
function changeURL(data) {
location.hash = data;
}

Titanium: Saving info through app.properties

I have an assignment to do and I am a bit confused with saving information and retrieving it.
A few different things:
I have a few textfields(Name, location, age) and I want to be able to save the information written and retreview it once the app is run again.
I want the app to remember what was the last screen run.
How to set a "first time app launch" ex. first time app is launch a profile option is given where then the 2nd time it would skip right away to the main screen because the information has already been provided.
Appreciate your help so much, thanks.
EDIT: Forgot to add the code, although I don't think its important. Because I think my questions are relative to the window names (profileWin, settingsWin, and catWin) and txtfields like firstNameTXF, ageTXF.
I tried using Titanium.App.Properties.setString("firstName", firstNameTXF.value) , which should save the data, but where? And then recalling it using firstNameTXF.value = Titanium.App.Properties.getString("firstName", 1);
1.To save and retrieve values (if only 3 values) use Properties. To Know more about Properties here are the docs.
2.To know which is the last opened window visit this Answer.
3.To check if its first time app launch do something like this :
if(Ti.App.Properties.hasProperty('firsttime')){
//Code for second and subsequent launch
}else{
//first launch
//add your code for first launch
//finally
Ti.App.Properties.setString("firsttime", "true");
}

how to fetch the current user data in phpfox

Topic: Fetch current user(some particular fields) data from the DB and display it on the Welcome Screen.
Explaination of UI : On the Registration Page, A dropdown would appear. As the user selects an option, it would trigger an event to fetch user image to show on the welcome page.
I have put following code in (pages.process) module
function getUserId($iUserId)
{
$aRows = $this->database()->select('p.image_path')->from($this->_sTable, 'p')
->Join(Phpfox::getT('user') , 'u', ' p.page_id = u.college_name') ->
where('u.college_name = p.page_id AND u.user_id = ' .
(int)$iUserId)->execute('getRows');
return $aRows;
}
The data will selected from User & Pages Table, and will be used to show the user image. Please suggest.
There is a service to get user details by is
$user_id = Phpfox::getUserId();
$aRow = Phpfox::getService('user')->getUser($user_id);
This will give you user details
For performance, check if the page you are altering already has the information you need, maybe you dont need to query the database in ajax if the page, when being created, already has that info and you can store it in javascript.
Since you mentioned an ajax situation (trigger an event on drop down to query the database), then you need to include a JS file (my suggestion since you can do this from a plugin), there are other ways but this is the best in my opinion.
Please read my article about plugins if you need help with writing one. My suggestion is to write a plugin to include your JS file in the page.
In the JS file you can call a "controller function" like this:
$.ajaxCall('mymodule.myfunction', 'param1=value1&param2=value2');
this would run the function "myfunction" in the file /module/mymodule/include/component/ajax/ajax.class.php
From this ajax file you can call "service functions" and send code to the browser, for example:
$value = Phpfox::getService('mmodule')->someOtherFunction();
$this->call('alert("' . $value . '");');
Hope it helps

Categories

Resources