Related
I want to customize my TradingView chart widget which is in a InAppWebView widget. I can display the chart, However, I want to change background color, font and the price scrollbar's type of the chart widget. How can I do this? is there any documentation? I searched a lot in stackoverflow but any of the recommendations was not working. I want to make the chart something similar to binance's chart.
Thanks for all replies! :)
String _testCode() {
return """
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"autosize": true,
"symbol": "AAPL",
"interval": "D",
"timezone": "exchange",
"theme": "dark",
"style": "1",
"toolbar_bg": "#ff7518", <!-- Does Not Work-->
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"locale": "en",
"overrides": { <!-- Does Not Work-->
"paneProperties.background": "#ffffff",
},
}
);
</script>
</div>
<!-- TradingView Widget END -->
""";
}
#override
Widget build(BuildContext context) {
return InAppWebView(
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
transparentBackground: true,
javaScriptEnabled: true,
),
ios: IOSInAppWebViewOptions(
disallowOverScroll: true,
),
),
onWebViewCreated: (InAppWebViewController controller) async {
controller.loadUrl(
urlRequest: URLRequest(
url: Uri.dataFromString(
//_generateCode(binanceSymbol),
_testCode(),
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8'),
),
),
);
},
);
}
try
String _testCode() {
return """
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget({
"autosize": true,
"symbol": "AAPL",
"interval": "D",
"timezone": "exchange",
"theme": "dark",
"style": "1",
"toolbar_bg": "#ff7518",
"hide_side_toolbar": false,
"allow_symbol_change": true,
"save_image": false,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"locale": "en",
"overrides": {
"paneProperties.background": "#ffffff",
}
});
</script>
</div>
<!-- TradingView Widget END -->
""";
}
My site was running fine and then I updated nuxt.config.js. Then after that, the site starts to show Service Unavailable.
I am using pm2 to start / deploy the app. Its vps server with apache in it.
Its showing:
Service Unavailable
The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.
But, if I run npm run dev the site loads fine without any issue. Also, I checked the status with pm2 list, it showing the app is online.
My package.json
{
"name": "nuxtjs",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt --hostname domain.link --port 49000",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"deploy": "pm2 start npm --name nuxtjs -- start"
},
"dependencies": {
"#nuxtjs/axios": "^5.13.6",
"#yeger/vue-masonry-wall": "^3.0.16",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"pm2": "^5.1.2",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"webpack": "^4.46.0"
},
"devDependencies": {},
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "49000"
}
}
}
My nuxt.config:
import { join } from "path";
export default {
target: "static",
// Global page headers: https://go.nuxtjs.dev/config-head
head: {
title: "Project Title",
htmlAttrs: {
lang: "en",
},
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
{ hid: "description", name: "description", content: "" },
{ name: "format-detection", content: "telephone=no" },
{ property: "og:title", content: "Project Title" },
{
property: "og:image",
content: "https://lovealabradoodle.com/images/two.jpg",
},
{
property: "og:description",
content:
"Content here",
},
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css?family=Roboto:400,600,700%7CMontserrat:400,500,600,700",
},
{
rel: "stylesheet",
href: "https://use.fontawesome.com/releases/v5.15.4/css/all.css",
},
{
rel: "stylesheet",
href: join("/", `fonts/flaticon/flaticon.css`),
},
{
rel: "stylesheet",
href: join("/", `css/bootstrap.min.css`),
},
{
rel: "stylesheet",
href: join("/", `css/plugins.css`),
},
{
rel: "stylesheet",
href: join("/", `css/magnific-popup.css`),
},
{
rel: "stylesheet",
href: join("/", `css/aos.css`),
},
{
rel: "stylesheet",
href: join("/", `css/style.css`),
},
{
rel: "stylesheet",
href: join("/", `css/styles/maincolors.css`),
},
],
script: [
// {
// src: "js/jquery.min.js",
// body: true,
// },
{
src: join("/", `js/bootstrap.bundle.min.js`),
body: true,
},
{
src: join("/", `js/imagesloaded.pkgd.min.js`),
body: true,
},
{
src: join("/", `js/isotope.pkgd.min.js`),
body: true,
},
{
src: join("/", `js/jquery.magnific-popup.min.js`),
body: true,
},
{
src: join("/", `js/easing.min.js`),
body: true,
},
{
src: join("/", `js/aos.js`),
body: true,
},
{
src: join("/", `js/custom-nuxt.js`),
body: true,
},
],
bodyAttrs: {
id: "top",
},
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
// "~/static/css/bootstrap.min.css",
// "~/static/css/plugins.css",
// "~/static/css/magnific-popup.css",
// "~/static/css/aos.css",
// "~/static/css/style.css",
// "~/static/css/styles/maincolors.css",
],
//Global JS
// script: [
// "~assets/js/custom.js"
// ],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [],
// Auto import components: https://go.nuxtjs.dev/config-components
components: {
path: "~/components", // will get any components nested in let's say /components/test too
pathPrefix: false,
},
// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
buildModules: [],
// Modules: https://go.nuxtjs.dev/config-modules
modules: [
// https://go.nuxtjs.dev/axios
"#nuxtjs/axios",
],
// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
// Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
baseURL: "http://api.domain.link/api",
retry: { retries: 3 },
},
publicRuntimeConfig: {
axios: {
baseURL: "http://api.domain.link/api",
},
},
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
extractCSS: true,
},
};
I ran yarn/npm install and it worked for me
SO I am new to Mapbox but I am trying to make countries change color on hover. I have seen the hover tutorial on the Docs for states but I am having difficulty finding the right type, data, and source for countries. I have the Mapbox Countries v1 already added to the map from studio. When I try to run this code I get either that it can't find source:"country_boundaries" or "country-boundaries". I know it's something simple but appreciate the help. Thanks.
var hoveredStateId = null;
map.on('load', function () {
==>>map.addSource('states', {
==>>'type': 'geojson',
==>>'data': 'https://docs.mapbox.com/mapbox-gl-js/assets/us_states.geojson'
});
map.addLayer({
'id': 'state-fills',
==>>'type': 'fill',
==>>'source': 'states',
'layout': {},
'paint': {
'fill-color': '#627BC1',
'fill-opacity': [
'case',
['boolean', ['feature-state', 'hover'], false],
1,
0.5
]
}
});
map.addLayer({
'id': 'state-borders',
==>>'type': 'line',
==>>'source': 'states',
'layout': {},
'paint': {
'line-color': '#627BC1',
'line-width': 2
}
});
Below you will find a complete example I've put together from findings at https://docs.mapbox.com/ and other places on the internet.
Please note that this uses Mapbox example token and http://geojson.xyz/ directly, you should download the data and host it yourself if used in an production environment.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display a map on a webpage</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoid2l0dHJ1cCIsImEiOiJjbDc1NnFpaWIwYzZqM3VudGptdjUzNWZ1In0.R5FpTsM0CeaxLhq8i8Qmyg';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.5, 40], // starting position [lng, lat]
zoom: 0.31741259330687854
});
map.on('load', function () {
map.addSource('cbs', { // country-boundaries-simplified
'type': 'geojson',
'data': 'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_countries.geojson'
});
map.addLayer({
"id": "cf", // country-fills
"type": "fill",
"source": "cbs",
"layout": {},
"paint": {
"fill-color": "#627BC1",
"fill-opacity": 0.5
}
});
map.addLayer({
"id": "cb", // country borders
"type": "line",
"source": "cbs",
"layout": {},
"paint": {
"line-color": "#627BC1",
"line-width": 2
}
});
map.addLayer({
"id": "cfh", // country-fills-hover",
"type": "fill",
"source": "cbs",
"layout": {},
"paint": {
"fill-color": "#FFFFFF",
"fill-opacity": 1
},
"filter": ["==", "name", ""]
});
// When the user moves their mouse over the page, we look for features
// at the mouse position (e.point) and within the states layer (states-fill).
// If a feature is found, then we'll update the filter in the state-fills-hover
// layer to only show that state, thus making a hover effect.
map.on("mousemove", function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ["cf"] });
if (features.length) {
map.getCanvas().style.cursor = 'pointer';
map.setFilter("cfh", ["==", "name", features[0].properties.name]);
} else {
map.setFilter("cfh", ["==", "name", ""]);
map.getCanvas().style.cursor = '';
}
});
// Reset the state-fills-hover layer's filter when the mouse leaves the map
map.on("mouseout", function() {
map.getCanvas().style.cursor = 'auto';
map.setFilter("cfh", ["==", "name", ""]);
});
map.on("click", function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ["cf"] });
if (features.length) {
console.log(e, features[0].properties.name);
}
});
});
</script>
</body>
</html>
I'm trying to run a SAPUI5 application. I created a view with a view piecharts and add them in index.html to the body by referring to its ID content
<script>
var app = new sap.m.App();
var page = sap.ui.view({
viewName: "...",
type: sap.ui.core.mvc.ViewType.XML
});
app.addPage(page);
app.placeAt("content");
</script>
My problem now is that the Component.js isn't called. So I have no chance of using Routing since the Router isn't initialized.
I tried some different ways, like this:
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height: "100%",
name: "vizFrame.gettingStarted.demoVizFrame"
})
}).placeAt("content");
});
</script>
After this approach, the Component.js got triggered, but the page is empty. The content of my root view isn't displayed.
manifest.json
{
"_version": "1.12.0",
"sap.app": {
"id": "vizFrame.gettingStarted.demoVizFrame",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.40.12"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone#2": "",
"tablet": "",
"tablet#2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"flexEnabled": false,
"rootView": {
"viewName": "vizFrame.gettingStarted.demoVizFrame.view.VizChart",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.60.1",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "vizFrame.gettingStarted.demoVizFrame.i18n.i18n"
}
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "vizFrame.gettingStarted.demoVizFrame.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [
{
"name": "RouteVizChart",
"pattern": "RouteVizChart",
"target": ["TargetVizChart"]
},
{
"pattern": "detail",
"name": "detail",
"target": "detail"
}
],
"targets": {
"TargetVizChart": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewId": "VizChart",
"viewName": "VizChart"
},
"testView": {
"viewType": "XML",
"viewName": "testView",
"viewId": "testView",
"viewLevel": 2
},
"detail": {
"viewType": "XML",
"viewName": "detailView"
}
}
}
}
}
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"vizFrame/gettingStarted/demoVizFrame/model/models"
], function (UIComponent, Device, models) {
"use strict";
return UIComponent.extend("vizFrame.gettingStarted.demoVizFrame.Component", {
metadata: {
manifest: "json"
},
init: function () {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
this.setModel(models.createDeviceModel(), "device");
}
});
});
VizChart.view.xml
This is the root view where only the page title gets displayed:
<mvc:View controllerName="vizFrame.gettingStarted.demoVizFrame.controller.VizChart"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:viz="sap.viz.ui5.controls"
xmlns:chart="sap.suite.ui.commons"
xmlns:l="sap.ui.layout"
>
<Page title="Übersicht">
<l:VerticalLayout
width="100%"
class="gridWrapper">
<l:Grid containerQuery="true">
<viz:VizFrame xmlns="sap.viz" id="l100" width="100%" selectData="onDataClick" />
<viz:VizFrame xmlns="sap.viz" id="l300" width="100%" selectData="onDataClick" />
<viz:VizFrame xmlns="sap.viz" id="l400" width="100%" selectData="onDataClick" />
<viz:VizFrame xmlns="sap.viz" id="l430" width="100%" selectData="onDataClick" />
<viz:VizFrame xmlns="sap.viz" id="l499" width="100%" selectData="onDataClick" />
</l:Grid>
</l:VerticalLayout>
</Page>
</mvc:View>
The topic App Initialization: What Happens When an App Is Started? explains which files are loaded in which order generally. In most cases, a Component is loaded with its descriptor (manifest.json) once the ComponentContainer is instantiated.
About the issue with the page being empty, see my other answer in stackoverflow.com/a/50951902.
In your case, the root view is missing a root control (e.g. sap.m.App). So it should be:
<!-- Root view -->
<mvc:View xmlns:mvc="sap.ui.core.mvc">
<App id="app" xmlns="sap.m">
<!-- Leave this block empty if Router should be used. Otherwise, continue.. -->
<Page title="Übersicht">
<!-- content -->
</Page>
</App>
</mvc:View>
In your 1st snippet, you could see the page content because there was already sap.m.App.
ComponentContainer loads component.js file from index.html
component.js loads component descriptor(manifest.json - application descriptor file to declare dependencies) which is referenced in the file.
component.js create root view, default and resource(i18n) model.
index.html
sap.ui.getCore().attachInit(function () {
new sap.ui.core.ComponentContainer({
name: "ABC.AppName"
}).placeAt("content");
});
component.js
sap.ui.core.UIComponent.extend("ABC.AppName.Component", {
metadata : {
includes: [jQuery.device.is.phone ? "assets/css/mStyle.css" : "assets/css/dStyle.css"]
},
createContent: function () {
// create root view
var oView = sap.ui.view({
id: "app",
viewName: "ABC.AppName.ViewFolder.App",
type: "JS",
viewData: { component: this },
});
i18nGlobal = new sap.ui.model.resource.ResourceModel({
bundleUrl: "i18n/i18n.properties",
bundleLocale: "de"
});
oView.setModel(i18nGlobal, "i18n");
sap.ui.getCore().setModel(i18nGlobal, "i18n");
return oView;
}
});
I am new to SAPUI5. I am trying to load a JSON Model from Manifest file and send JSON object as a parameter through Routing and Navigation.
I have only one view and in that i am trying to bind data in a simple form. I am getting one error :
View1.controller.js?eval:8 Uncaught (in promise) TypeError: Cannot
read property ‘getModel’ of undefined
Kindly help me in resolving the error.
Manifest.json
{
"_version": "1.8.0",
"sap.app": {
"_version": "1.3.0",
"id": "com.newproject.firstsapui5project",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.40.12"
},
"dataSources": {
"data": {
"type" : "JSON",
"uri": "model/data.json"
}
}
},
"sap.ui": {
"_version": "1.3.0",
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone#2": "",
"tablet": "",
"tablet#2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_belize"
]
},
"sap.ui5": {
"_version": "1.2.0",
"rootView": {
"viewName": "com.newproject.firstsapui5project.view.View1",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.60.1",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "com.newproject.firstsapui5project.i18n.i18n"
}
},
"simpleForm": {
"type": "sap.ui.model.json.JSONModel",
"dataSource" : "data"
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "com.newproject.firstsapui5project.view",
"controlAggregation": "pages",
"controlId": "idAppControl",
"clearControlAggregation": false
},
"routes": [{
"name": "RouteView1",
"pattern": "RouteView1",
"target": ["TargetView1"]
}],
"targets": {
"TargetView1": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewName": "View1"
}
}
}
}
}
View1.controller.js
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
var oController= Controller.extend("com.newproject.firstsapui5project.controller.View1", {
onInit: function () {
var dataModel = this.getOwnerComponent().getModel("simpleForm");
this.getView().setModel(dataModel, "DataModel");
}
});
return oController;
});
Component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"com/newproject/firstsapui5project/model/models"
], function (UIComponent, Device, models) {
"use strict";
var Component = UIComponent.extend("com.newproject.firstsapui5project.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* #public
* #override
*/
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
this.setModel(models.createDeviceModel(), "device");
this.getRouter().initialize();
}
});
return Component;
});
data.json
{"Form" : [{
"first":"tom",
"lastname":"butler",
"height": "6foot",
"gender":"Male"
}]
}
View1.view.xml
<mvc:View controllerName="com.newproject.firstsapui5project.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:mvc="sap.ui.core.mvc" xmlns:f="sap.ui.layout.form" displayBlock="true" xmlns="sap.m">
<App id="idAppControl">
<pages>
<Page title="My First sapui5 Project">
<content>
<f:SimpleForm id="idSimpleForm" editable="true" layout="ResponsiveGridLayout" title='TEST Form'>
<f:content>
<Label text="First Name"/>
<Input value="simpleForm>/Form/0/first" />
<Label text="Last Name"/>
<Input value="{simpleForm>/Form/0/lastname}">
</Input>
</f:content>
</f:SimpleForm>
</content>
</Page>
</pages>
</App>
</mvc:View>
model.js
sap.ui.define([
"sap/ui/model/json/JSONModel",
"sap/ui/Device"
], function (JSONModel, Device) {
"use strict";
return {
createDeviceModel: function () {
var oModel = new JSONModel(Device);
oModel.setDefaultBindingMode("OneWay");
return oModel;
}
};
});
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>firstsapui5project</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-async="true"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-language="en"
data-sap-ui-xx-componentPreload="off"
data-sap-ui-resourceroots='{"com.newproject.firstsapui5project": ""}'>
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script>
sap.ui.getCore().attachInit(function() {
/* new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "com.newproject.firstsapui5project"
})
}).placeAt("content");*/
var app = new sap.m.App({initialPage:"idView1"});
var page1 = sap.ui.view({id:"idView1", viewName:"com.newproject.firstsapui5project.view.View1", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page1);
// app.addDetailPage(page2);
app.placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
View1 is not being initialized by a Component, thus an owner can't be determined. Instead of explicitly creating a view and putting it into DOM (index.html), create a sap.m.Shell as it's done in commented code. Shell would create a component which would create a root view that's specified in manifest.json.