I am attempting to get a very simple HTML/JavaScript application working for SDK 5.0b, the instructions for which are here...
http://samsungtvdev.blogspot.com/2013/04/smamsung-smart-tv-how-to-write-hello.html
I can launch VirtualBox 4.2.16 and see my application in the menu for the emulator. However, when I launch it, the background is black, and I don't see my application. I also see a bunch of warnings in the emulator about 'RegisterType()' and other functions not being available.
I tried posting this on the Samsung SDK forum, but it's pretty dead over there. I also tried the suggestion here, but copying the application manually also doesn't seem to work. Anyone have any ideas on how I can get this working?
Edit: Here is the HTML code. This isn't more than a "hello world" example.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HelloWorld</title>
<!-- TODO : Common API -->
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>
<!-- TODO : Javascript code -->
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
<!-- TODO : Style sheets code -->
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">
<!-- TODO: Plugins -->
</head>
<body onload="Main.onLoad();" onunload="Main.onUnload();">
<!-- Dummy anchor as focus for key events -->
<!-- TODO: your code here -->
<div id="outputDiv"></div>
</body>
</html>
This is the JavaScript code.
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var Main =
{
};
Main.onLoad = function()
{
// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
alert("App loaded!");
};
Main.onUnload = function()
{
};
Main.enableKeys = function()
{
document.getElementById("anchor").focus();
};
Main.keyDown = function()
{
var keyCode = event.keyCode;
alert("Key pressed: " + keyCode);
switch(keyCode)
{
case tvKey.KEY_RETURN:
case tvKey.KEY_PANEL_RETURN:
alert("RETURN");
widgetAPI.sendReturnEvent();
break;
case tvKey.KEY_LEFT:
alert("LEFT");
break;
case tvKey.KEY_RIGHT:
alert("RIGHT");
break;
case tvKey.KEY_UP:
alert("UP");
break;
case tvKey.KEY_DOWN:
alert("DOWN");
break;
case tvKey.KEY_ENTER:
case tvKey.KEY_PANEL_ENTER:
alert("ENTER");
document.getElementById("outputDiv").innerHTML += "<h1>Hello, World!</h1><br/>";
break;
default:
alert("Unhandled key");
break;
}
};
Here are the logs:
http://pastebin.com/mZULDGc6
1.) Look for misspellings, typos and missing commas. Samsung Smart TV SDK seems to be very strict with that and since you have no proper console, you don't get any errors if you forget a comma or something
2.) check your HTML/CSS
Maybe you should post your code so I can have a closer look.
EDIT: You forgot to add the scripts in your HTML head. You have to add every script file that you use in your project, such as Main.js. That would be
<script language="javascript" type="text/javascript" src="app/javascript/Main.js"></script>
and also all Samsung SmartTV API script files that are required.
First what i see, you forgot "anchor" tag in html.
Not included external JS files in html page, and standard smart tv sdk files:
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/Widget.js"> </script>
<script type="text/javascript" language="javascript" src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"> </script>
Then add
<body onload="Main.onLoad();" onunload="Main.onUnload();">
Are you sure that images loaded? Print it in console.
Why div block position inside canvas, move it outside. I think that code started with js error, so you don't see anything. Be more careful.
I had same issue and fixed it by adding background: red; for body tag in css.
Related
I'm using the summernotes html form on a FileMaker solution to write emails. originally I had a save button to transfer the html uri into a field and then email that with the client scripts. However, users (and me...) don't like having to click "save" and then "send".
I'm wondering if anyone has any ideas on how to automate this. I tried to set the save function on a 1 second recurrence, however, that stops typing and removes the cursor. I'm thinking either someway to pull data via json or ideally some way I can interrogate it with my FileMaker 'send' script?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Editor</title>
<!-- include libraries(jQuery, bootstrap) -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.16/dist/summernote.min.js"></script>
<!-- <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet"> -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.16/dist/summernote.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script>
var intervalID;
function autoSave() {
intervalID = setInterval(saveText, 1000);
}
function saveText() {
//$('#summernote').summernote('code', 'code');
//window.alert('save changes');
/* Prep the URL to use for the hand-off to FM. */
var fullURL = '[[SAVEURL]]¶m=' + encodeURIComponent ($('#summernote').summernote('code'));
/* Send the data to FM. */
window.location = fullURL;
return false;
}
</script>
</head>
<body onload ="autoSave();">
<div id="summernote">[[CONTENT]]</div>
<script>
}
$(document).ready(function() {
$('#summernote').summernote({
height: 300,
tabsize: 2,
toolbar: [
// [groupName, [list of button]]
['style', ['style','bold', 'italic', 'underline', 'clear']],
//['font', ['strikethrough', 'superscript', 'subscript']],
//['fontsize', ['fontsize']],
['color', ['color']],
//['para', ['ul', 'ol', 'paragraph']],
//['height', ['height']],
['insert', ['link']],
//['insert', ['link','hr','table']],
//['misc',['codeview']],
['mybutton',['save']]
],
buttons: {save: SaveButton}
});
});
</script>
</body>
</html>
Instead of passing the encoded HTML as a parameter in the URL (¶m=...) - which causes the page to reload and thus causes the focus to be lost - try passing the parameter as an anchor (#...).
Like that the page won’t reload, and the focus should remain. Of course, you’ll have to adjust your parameter reading code accordingly.
Alternatively, if you have FileMaker 19 you can use the FileMaker.PerformScript or FileMaker.PerformScriptWithOption function to pass the value directly to a script.
I am fairly new to openui5. I want to include summernote editor into my application. I have included the cdn links from their homepage but I am getting the following error
ShellRenderer-dbg.js:143 Uncaught (in promise) TypeError: Cannot read property 'require' of undefined
at Object.S.getLogoImageHtml (ShellRenderer-dbg.js:143)
at Object.S.render (ShellRenderer-dbg.js:86)
at R.renderControl (RenderManager-dbg.js:1004)
at R.render (RenderManager-dbg.js:1259)
at constructor.U.rerender (UIArea-dbg.js:629)
at constructor.Core.renderPendingUIUpdates (Core-dbg.js:2774)
at constructor.Core.init (Core-dbg.js:1235)
at Core-dbg.js:485
at a (Core-dbg.js:179)
at SyncPoint.finishTask (Core-dbg.js:173)
Any ideas would be much appreciated. Thanks
I've managed to get this working in a simple scenario but not sure how it will work with other UI5 elements & re-rendering etc. I've created a simple control to show how it could interact with UI5 but it would need some work!
Notes: SAPUI5 contains jQuery in the default library, although there is a non-jQuery version available so you can use your own version of jQuery, I am not sure of the version needed to get both working optimally overlap. Additionally, Summernote seems to require bootstrap CSS + JS and not sure if that will work with UI5 too, especially if this is to be deployed in a Launchpad scenario. Could be OK as a standalone app though!
Have fun!
sap.ui.define([
"sap/ui/core/Control"
], function (Control) {
"use strict";
return Control.extend("MySummernoteControl", {
metadata: {
properties: {},
aggregations: {},
events: {}
},
renderer: {
apiVersion: 2,
render: function(rm, oButton) {
rm.openStart("div", oButton);
rm.openEnd();
rm.close("div");
}
},
onAfterRendering: function () {
if (!this._rendered) {
this.$().summernote();
this._rendered = true;
}
}
});
});
const ctrl = new MySummernoteControl();
ctrl.placeAt("content");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>
<!-- include bootstrap -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote.js"></script>
</head>
<body class="sapUiBody sapUiSizeCompact">
<div id='content'></div>
</body>
</html>
Help!
I'm working on a meaty emberjs/yeoman project that uses multiple hbs templates that can all be routed to from one application.hbs's sidebar.
The problem is when I load the page, sometimes the Jquery to make that sidebar collapse will not work while other jquery in that same file does. Sometimes nothing works at all.
I'm calling my javascript/jquery from one file called magic.js
<body>
<!-- build:js scripts/components.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/handlebars/handlebars.runtime.js"></script>
<script src="bower_components/ember/ember.js"></script>
<script src="bower_components/ember-data-shim/ember-data.js"></script>
<!-- endbuild -->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC-c0QvqnFcYbP4r6t7sBiKPu9GPqRLRug&sensor=true">
</script>
<!-- build:js(.tmp) scripts/templates.js -->
<script src="scripts/compiled-templates.js"></script>
<!-- endbuild -->
<!-- build:js(.tmp) scripts/main.js -->
<script src="scripts/combined-scripts.js"></script>
<!-- endbuild -->
<!-- build:js scripts/plugins.js -->
<script src="bower_components/bootstrap-sass/js/affix.js"></script>
<script src="bower_components/bootstrap-sass/js/alert.js"></script>
<script src="bower_components/bootstrap-sass/js/dropdown.js"></script>
<script src="bower_components/bootstrap-sass/js/tooltip.js"></script>
<script src="bower_components/bootstrap-sass/js/modal.js"></script>
<script src="bower_components/bootstrap-sass/js/transition.js"></script>
<script src="bower_components/bootstrap-sass/js/button.js"></script>
<script src="bower_components/bootstrap-sass/js/popover.js"></script>
<script src="bower_components/bootstrap-sass/js/carousel.js"></script>
<script src="bower_components/bootstrap-sass/js/scrollspy.js"></script>
<script src="bower_components/bootstrap-sass/js/collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/tab.js"></script>
<!-- endbuild -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script src="scripts/models/permit_model.js"></script>
<!-- // <script src="scripts/arcgislink_compiled.js" type="text/javascript"></script> -->
<script src="scripts/magic.js"></script> <!-- Controls UI based javascript. Buttons, pretty effects, animations, etc. -->
magic.js is the last thing called before the body closes.
This is the magic.js file
$( document ).ready(function() {
var close=true
$(".collapsibleHeader").click(function(){
$(this).siblings().slideToggle("fast");
});
// Sidebar START
$(".arrow").click(function() {
if($('.float-left-col').css('width')=='200px') {
$('.float-left-col').removeClass('open');
$('.float-left-col').addClass('closed');
$('.sidebar-button-text').addClass('vanish');
$('.arrow').removeClass('reverse-rotate');
$('.arrow').addClass('rotate');
$('.full-logo').addClass('vanish');
$('.logo-only-container').removeClass('vanish');
$('.content-container').css('margin-left','80px')
}
else {
$('.float-left-col').removeClass('closed');
$('.float-left-col').addClass('open');
$('.arrow').addClass('reverse-rotate');
$('.logo-only-container').addClass('vanish');
$('.full-logo').removeClass('vanish');
var delay = setTimeout(function(){
$('.sidebar-button-text').removeClass('vanish');},250)
$('.arrow').removeClass('rotate');
$('.content-container').css('margin-left','200px');
}
});
The sidebar that isn't working is in the application.hbs file so I'm not sure why it would stop loading.
<div class="super-col">
<div id="sidebar-wrapper" class="float-left-col open">
<ul class="nav nav-pills nav-stacked text-center">
//..stuff inside the sidebar..
Why is my javascript not loading properly? Should I be calling it in a different file/s?
You're probably trying to attach the jquery before the elements have been created. Document ready isn't necessarily the same time Ember's views are ready.
In your case you insert the sidebar in the application template, so in your application view you could add the jquery in the didInsertElement hook
App.ApplicationView = Em.View.extend({
doStuff: function(){
//do your jquery here, the element is in the page now
}.on('didInsertElement')
});
This pattern can be applied for other views as well throughout your app
App.FooView = Em.View.extend({
doStuff: function(){
// do some crazy stuff cause the foo template has been inserted!
}.on('didInsertElement')
});
I have a number of very small pages which basically loads a video for use on mobile browsers. In the latest iOS (5.1.1) the video player loads, but then just spins. The video can be played by clicking on the video, but since it looks like it's still loading, people may not do that. Works everywhere else.
I'm using the youtube api code
This is a test version of the page.
http://bit.ly/S2KuN1
Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<title>Celebrity's Caribbean Shore Excursions</title>
<link href="http://www.celebritycruises.com/css/min/global.min.css" rel="stylesheet">
<link href="http://media.celebritycruises.com/celebrity/content/en_US/css/m_video.css" rel="stylesheet">
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.youtube.com/player_api"></script>
<script type="text/javascript">
// create youtube player
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
videoId: 'PH-m591p4xg',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
</script>
<script type="text/javascript" src="m_video.js"></script>
</head>
<body id="video_page">
<div class="logo"><img src="http://media.celebritycruises.com/celebrity/content/en_US/images/cel_misc/logo.jpg" alt="Celebrity Mobile" width="259" height="55" border="0"></div>
<div id="player"></div>
<div class="visit">
<p>Now visit Celebrity Cruises' official mobile website.</p>
<p><a class="ccButton large" target="_self" href="http://m.celebritycruises.com/m/home.do"> <span class="text">Explore</span> <span class="pointer"> </span> </a></p>
</div>
</body>
</html>
And here's the js for the page
// JavaScript Document
// autoplay video
function onPlayerReady(event) {
event.target.pauseVideo();
}
// when video ends
function onPlayerStateChange(event) {
if(event.data === 0) {
window.location = "http://m.celebritycruises.com/m/home.do";
}
}
//style Blackberry
window.onload = function() {
var ua = navigator.userAgent;
if (ua.indexOf("BlackBerry") != -1 ) {
document.getElementById("video_page").className = "bb";
}
};
Okay, I figured out how to solve it.
I changed
event.target.pauseVideo();
to
event.target.stopVideo();
I don't know what the issue is, but iOS 5.1.1 never seems to finish autoloading. Using the stopVideo() command from the YouTube api stops the process and the play button appears. Once clicked, it loads normally.
I'm working on installing a PhoneGap plugin on an iPhone. The page for the plugin I am attempting to install can be seen here: https://github.com/phonegap/phonegap-plugins/tree/master/iPhone/MessageBox.
I believe I have narrowed down my problem to incorrectly working with the JavaScript file. I am including it on my HTML page like so:
<script language="javascript" type="text/javascript" src="MessageBox.js"></script>
The rest of my HTML page is this:
<script type="text/javascript">
alert("test1");
var messageBox = window.plugins.messageBox;
alert("test2");
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
</script>
I see an alert saying test1, but not the second alert. This makes me think that the error is on the line:
var messageBox = window.plugins.messageBox;
However, I'm not quite sure what I should be doing differently. From what I can tell, I've done all the necessary steps as described on the plugin's documentation page, seen here:
https://github.com/phonegap/phonegap-plugins/blob/master/iPhone/MessageBox/README.md
(As expected, I also do not see the output of the messageBox.alert... line when viewing this through the iOS simulator.)
I would appreciate any help with this issue, thanks!
NOTE: my initial thread regarding this topic can be seen here: Trouble Installing PhoneGap Plugin
EDIT: I should also add that I have the exact same problem when trying to install a different (but similar) plugin, known as "Prompt"
EDIT2: Here's my index.html:
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="MessageBox.js"></script>
<script type="text/javascript">
function onBodyLoad()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
navigator.notification.alert("PhoneGap is working");
window.location.href="otherpage.html";
}
</script>
The problem is that when you try to create your MessageBox, PhoneGap is not ready yet.
You just need to wait for PhoneGap to be ready before you execute your code :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
window.location="otherpage.html";
}
</script>
</head>
<body>
</body>
</html>
Then, on otherpage.html :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" charset="utf-8" src="MessageBox.js"></script>
</head>
<body onload="onLoad()">
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
console.log("onLoad");
var messageBox = window.plugins.messageBox;
messageBox.alert('Title', 'Message', function(button) { console.warn('alert', [this, arguments]); });
}
</script>
</body>
</html>
I tested it on PhoneGap 1.4.1