I have updating results data in four Sheets within a Google Sheets spreadsheet. I want to display the live contents of each sheet in turn on an external display (screen/projector), with an update rate of 10 to 15 seconds between each change of sheet. I've been unable to find any complete solution to this.
Things I've looked at:
Copy the data from each page into Google Slides, maintaining live data update. Then publish the four slides, specifying a refresh rate. This works, but it doesn't update the Slides publication when data in the source Sheets changes. You have to go into Slides and do a manual refresh. Then you also have to refresh the webpage displaying the published slides. It does work, but I really want the displays to update as soon as data in the Sheets are updated.
Display the Google Sheets themselves, with a mechanism to select each sheet in turn every 10 seconds. This felt do-able, with a bit of AppsScript Java I can select individual sheets. Issues with this are I've been unable to resolve are the the minimum timer for a trigger is 1 minute, and I've been unable to get a Triggered function to select the sheets. I think the context for a Trigger may prevent this working.
Use 'something else' to extract the data from the Google Sheet, and create the live updating displays. I've been unable to find anything that would do this. I suspect someone with much better web coding than mine could achieve it, but I'm trying not to get too complicated.
Any suggestions greatfully received.
You can create a local HTML file, show the spreadsheet inside an iframe and change the iframe-URL to the next
sheet every 15 seconds. This way, instead of using GAS triggers, the page gets updated using local JavaScript, so
you dont have to wait 1 minute.
Save the next code as an HTML file.
Update the spreadsheetUrl and sheetIds variables
Open the file in a browser (I recommend Firefox)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<iframe id="iframe1" src="" style="position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"> Your browser doesn't support iframes
</iframe>
</body>
<script>
var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/123/edit#gid=";
var sheetIds = ["12345", "23456", "34567", "45678"];
var currentSheet = 0; //0-3
var myIframe = document.getElementById("iframe1");
// Initializes iframe
myIframe.src = spreadsheetUrl + sheetIds[currentSheet];
// Updates iframe very 10,000 milliseconds
setInterval(function() {
// Increases sheet
currentSheet++;
// If 4th sheet has been shown, then go back to 1st sheet
if (currentSheet > 3)
currentSheet = 0;
// Updates iframe
myIframe.src = spreadsheetUrl + sheetIds[currentSheet];
}, 10000);
</script>
</html>
Related
I'm trying to use IE ActiveX control to update Autohotkey GUI dynamically, but encountering weird behavior. Please help.
; ie-refresh.ahk on Autohotkey 1.1.24
global WB
Gui, Font, s9 cBlack, Tahoma
Gui, Add, Text, , % "Click button to see html content."
Gui, Add, ActiveX, xm w120 h30 vWB, Shell.Explorer
Gui, Add, Button, xm gBtnClicked, % "Update html text"
Gui Show
return
BtnClicked()
{
html_tmpl =
( Ltrim Join
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
color: red;
}
</style>
</head>
<body>
Count: {}
</body>
</html>
)
static snum := 0
snum++
html_code := Format(html_tmpl, snum)
WB.Navigate("about:blank")
WB.document.write(html_code)
}
GuiEscape:
GuiClose:
ExitApp
When I click the button, the IE content updates, but it only updates twice.
On third button click, IE content area almost certainly shows as blank.
Keep clicking the button, the red text appears intermittently and randomly, rougly one out of ten clicks.
So what's wrong with my code?
The problem seems to be with calling navigate the second time.
I thought that WB.Stop() would fix the problem but after that you find out that WB.Navigate is not enough to clean the screen so...
The most sensible alternative looks like putting the WB.Navigate after the gui-add (or somewhere after) and then using WB.Refresh() .
Just for refrerence, some WebBrowser Control documentation here.
Although I cannot explain the weird behavior in my question, I have managed to find out a solution to my requirement.
Use code below:
; ie-refresh.ahk on Autohotkey 1.1.24
global WB
Gui, Font, s9 cBlack, Tahoma
Gui, Add, Text, , % "Click button to see html content."
Gui, Add, ActiveX, xm w120 h30 vWB, Shell.Explorer
Gui, Add, Button, xm gBtnClicked, % "Update html text"
WB.Navigate("about:blank")
Gui Show
return
BtnClicked()
{
html_tmpl =
( Ltrim Join
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
color: red;
}
</style>
</head>
<body>
Count: {}
</body>
</html>
)
static snum := 0
snum++
html_code := Format(html_tmpl, snum)
WB.document.open()
WB.document.write(html_code)
WB.document.close()
}
GuiEscape:
GuiClose:
ExitApp
First, call WB.navigate("about:blank") only once.
Second, when I need to update the whole html document, I need to open + write + close.
Now it works reliably.
can somebody help me to solve this prob :
I've a page width some div ID (Section of page #1 #2 ...) and a link (NEXT), how i can do to increase this link each time the user click on without refreshing the page ?
sample if link was 1 .. link become 2 etc ..
Any ideas ?
AJAX if you need to pull data from the server again on the click.
Standard JavaScript if you just want to do the number increment locally in the browser without anything fancy.
I would use an ajax for that just to send a request to php script what would generate a whole <a> tag and insert it in html. So onload of the page you set counter on 1 for example and everytime you click the 'next' you trigger onclick event (call a function on this event) increase your counter by 1 and send this value to server where script is generating for you tag or something similar... add it to the html, so you can update your link in html without refreshing the page. On parallel you can delete, hide or show other elements if you need.
I hope that will give you some idea. I would tell you more if i would be able to see your code, so far it is as i see your situation. Sorry if i didn't get it right; )
<html>
<head>
<style>
div {
display: block;
width: 100px;
height: 800px;
background-color: red;
}
a {
font-size: 3em;
position:fixed;
top: 0;
right:0;
}
</style>
</head>
<body>
<div id="section1">one</div>
<div id="section2">two</div>
<div id="section3">three</div>
next
<script>
var i = 1;
function increaseLink() {
i++;
var link = document.getElementById("linkId");
link.innerHTML = "click";
link.setAttribute('href', "#section"+ i);
return false;
}
</script>
</body>
</html>
Is that what you need? You do not need php or ajax to achieve this.
In the browser script: Listen onClick event on links and send AJAX-request to php-script when links is clicked.
In the server script: Update field on database or other storage.
Currently I have to press a on the top right-hand corner of the map to show my current location (it is the little person in the picture), is there a way for when the map load it automatically shows your location? I attached the code as well and a picture to explain. Thanks, I apologize in advance for my lack of knowledge.
<html>
<head>
<script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js?key=Kmjtd%7Cluua2qu7n9%2C7a%3Do5-lzbgq"></script>
<script type="text/javascript">
/*An example of using the MQA.EventUtil to hook into the window load event and execute defined function
passed in as the last parameter. You could alternatively create a plain function here and have it
executed whenever you like (e.g. <body onload="yourfunction">).*/
MQA.EventUtil.observe(window, 'load', function() {
/*Create an object for options*/
var options={
elt:document.getElementById('map'), /*ID of element on the page where you want the map added*/
zoom:13, /*initial zoom level of map*/
latLng:{lat:40.735383, lng:-73.984655}, /*center of map in latitude/longitude*/
mtype:'osm' /*map type (osm)*/
};
/*Construct an instance of MQA.TileMap with the options object*/
window.map = new MQA.TileMap(options);
MQA.withModule('geolocationcontrol', function() {
map.addControl(
new MQA.GeolocationControl()
);
});
});
</script>
</head>
<body>
<div id='map' style='width:750px; height:280px;'></div>
</body>
</html>
Based on the documentation, you could try calling activate on the geolocation control after you create it.
If that does not cause a re-center/zoom then you may need to register a handler for the onLocate callback (also in the control). When your callback is called you can manually re-center/zoom the map.
Bear in mind that geolocation can be very inaccurate, doing it automatically will probably annoy users for whom that is the case.
I want to add Google AdWords to my site but the script I'm supposed to add creates an iframe in the dom. This iframe is visible and moves down 13px (its height) all my page.
Is there any way to avoid this? If not, can I hide it without affecting Google AdWords functionality? (It is an empty iframe).
There's an easy fix that doesn't affect the functionality of the code snippet. I've done this with no adverse effects. Just place the script within a hidden div like below and it should do the trick:
<div style="display:none">
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js">
</script>
</div>
#Mario is correct that there is a setting that will allow you to turn this display off. However, this setting doesn't seem to exist on the Google UI for remarketing tags, even though they do display this iframe (I think this is a bug on Google's end, as I imagine the "google_remarketing_only = true" flag was supposed to turn this iframe off and isn't working correctly).
I found out that you can also set this in the tracking JS by manually adding the flag "google_conversion_format = 3", like so:
<script type="text/javascript">
/* <![CDATA[ */
var google_conversion_id = 0123456789,
google_conversion_label = "XXXXXXXX",
google_custom_params = window.google_tag_params,
google_remarketing_only = true,
google_conversion_format = 3;
/* ]]> */
</script>
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
This might be easier that regenerating the tags for some people, and solves the problem in the case that the UI doesn't support setting this option when generating the tags.
I normally add this CSS(3) rule to the stylesheet:
iframe[name=google_conversion_frame]
{
display: none !important;
}
Hope it helps.
you can also set max-height: 0; instead of display:none;
Not sure of implications of display none on the iframe.
This works back to ie6.
iframe[name="google_conversion_frame"] {
display: block;
max-height: 0;
}
The best and simplest solution that I have come across for this issue is simply to remove the frame from the document flow by adding the following code to the css stylesheet:
iframe[name="google_conversion_frame"]{
position:fixed;
}
Hope this helps
I have a subpage in a jquery mobile page where I'd like to insert att Google adwords conversion cookie. But using the traditional snippet from Adwords doesn't work. On Android it even makes the page go blank.
Anyone done this before?
You are probably loading the conversion script later on the page by doing something like this:
(function(){
var s=document.getElementsByTagName('script')[0];
var ga=document.createElement('script');
ga.type='text/javascript';
ga.async=true;
ga.src='http://www.googleadservices.com/pagead/conversion.js';
s.parentNode.insertBefore(ga,s);
})();
Or using a jQuery function to load scripts that is similar to the function above. Turns out that you can't include the conversion.js script in this manner because it uses document.write to write the img tag on the page. Because it uses document.write some browsers will remove everything from the page and replace the content with the output of document.write, which in this case is an empty gif.
You better use the default tag provided by google to mark a conversion. If you need to load it without a page refresh just open an iframe to a page that contains this tracking code.
<script type="text/javascript">
var google_conversion_id = 1234567890;
var google_conversion_language = "en_US";
var google_conversion_format = "1";
var google_conversion_color = "666666";
var google_conversion_label = "Purchase";
if (10.0) {
var google_conversion_value = 10.0
}
</script>
<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<img height=1 width=1 border=0
src="http://www.googleadservices.com/pagead/conversion/1234567890/?value=10.0&label=Purchase&script=0">
</noscript>
Of course this is just an example. You should use your own code that have your unique conversiod_id.
I researched this a bit, and came across the following links:
http://www.google.com/ads/mobile/publishers/web-publishers.html
https://support.google.com/adsense/bin/answer.py?hl=en&answer=185668
So it looks like depending on the type of ad you're running, you will have to get a customized unit for mobile.
However, I am still not sure why the page would go blank. I mean, I can totally see how some ad code does that when you try to lazy-load it, but I'm not sure why it happens in your situation.