I am trying to add a slider to one of the demo applications. I added a slider to the home-fragment.xml by adding
<Slider value="{{ slider }}" horizontalAlignment="center" width="80%"/>
Now I want to be able to edit and read data from this slider from my viewmodel. According to the slider documentation I need to import the slider and then create it. My code now looks like this:
import { Slider } from "tns-core-modules/ui/slider";
const observableModule = require("data/observable");
const slider = new Slider();
function HomeViewModel() {
const viewModel = observableModule.fromObject({
});
slider.value = 0;
return viewModel;
}
module.exports = HomeViewModel;
Visual Studio Code does not show any errors but once I launch the app I get the following error:
An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.app/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
Calling js method onCreate failed
Error: Building UI from XML. #file:///app/tabs/tabs-page.xml:30:13
> Unexpected token import
File: "file:///data/data/org.nativescript.app/files/app/tns_modules/tns-core-modules/ui/builder/builder.js, line: 208, column: 20
I am new to Nativescript and probably made a mistake in the architecture or setup. Can somebody help me out by showing me what goes wrong and how to fix it?
it could be a couple of things, but one thing is certain: you don't need to import that Slider component to set its value. You can simply bind to a property (slider = 20;).
The easiest way to start with NativeScript, and to learn how those UI widgets work, is by using the Playground. I've created a little project with a Slider for you to show how it works in "plain" NativeScript with TypeScript: https://play.nativescript.org/?template=play-tsc&id=I7SGei
Related
I am using nextJS with typescript and got 1 error when using the keen-slider library v5.4.0.
The error occurs when the keen-slider is rendered for the first time, the items are not of the same type transform when I drag the slider. It causes items to be stacked on top of each other.
Has anyone come across such a case? Please let me know anything that can fix it.
Thank you all.
I fixed the above by upgrading to keen-slider version 6.6.14.
npm i keen-slider#v6.6.14
And add this code below
const [internalSliderRef, internalSlider] = useKeenSlider(sliderOptions);
React.useEffect(() => {
internalSlider.current?.update({
...sliderOptions
});
}, [internalSlider, sliderOptions]);
Thank for all
I'm using Swiper 6.4.10 for a project. It's the first time I use Swiper.
This website has multiple sliders on 1 page. So I decided to create some initializing script. I'm using data-attributes to create the slider settings. Every slider has different setups. One of those settings is to run the slider only on a mobile device and destroy it on desktop or tablet.
I've read a whole lot of posts here and in Google but I just can't get it to work.
It is about this part:
if(container){
var initID = '#' + container;
if(mobile){
if(mobile_breakpoint.matches){
var init = new Swiper(this, settings)
} else if (!mobile_breakpoint.matches){
var init = this.swiper.destroy();
}
}
//var init = new Swiper(initID, settings)
}
When I use this code here above then all carousels are destroyed OR I get an error saying this.swiper.destroy is undefined.
When I run my code like this:
if(container){
var initID = '#' + container;
var init = new Swiper(initID, settings)
}
Then all carousels just work. When I check for data attribute mobile and try to destroy the carousels then all stop working. I clearly miss something out.
Anybody have any idea what I do wrong? Any help greatly appreciated!
"Your mistake" under else if you forgot first to Initialize swiper instance .
This is why when you uncomment this block of code - the page is broken (error: this.swiper.destroy is undefined).
To destroy an instance you first should create this instance (destroy() is a Method of swiper instance).
const swiper = new Swiper('.swiper-container', {});
swiper.destroy();
Otherwise, your code is like writing:
bla_bla.destroy(); /* Uncaught ReferenceError: bla_bla is not defined */
Create an instance (Missing in your code)
Destroy
else if (!mobile_breakpoint.matches){
var init = new Swiper(this, settings) /* missing in your code */
init = this.swiper.destroy();
}
In general - your code is very long ==> next time create a Minimal, Reproducible Example (A lot of code not related to your issue/error).
I am Classifying images using Keras MobileNet and TensorFlow.js in Google Chrome.I followed a tutorial. when i run the code i got the tf.loadModel is not a function error.
I load the model like this.
model = await tf.loadModel('https://gogul09.github.io/models/mobilenet/model.json');
model.predict();
The function loadModel has been renamed to loadLayersModel.
You're observing the error because the tf.loadModel API has changed in the recent versions of tensorflow.js. I could get the prediction working by doing the following changes in the project https://github.com/Gogul09/digit-recognizer-live:
In index.html, change the version to 0.10.0 instead of latest.
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#0.10.0"></script>
After doing this change, I got one more error: "Argument 'b' passed to 'div' must be a Tensor, but got number."
To fix this, in app.js, function preprocessCanvas() change tensor.div(255.0) to
tensor.div(tf.scalar(255.0))
Depending on whether you're using MLP or CNN model make the change accordingly. Reload the page, once you change the js file.
For this project, https://github.com/Gogul09/mobile-net-projects, after hard-coding the tf js version, the prediction didn't work because the click event of the predict button was not getting triggered. Also, for Upload Image. After replacing these lines in mobile-net.js, prediction works.
Change
$("#predict-button").click(async function () {
to
$(document).on('click', '#predict-button', async function() {
Change
$("#select-file-image").change(function() {
to
$(document).on('change', '#select-file-image', function() {
I'm trying to add new library to Meteor project but without successes. For example, I've found a library for Excel export and added it with
meteor add rpgeeganage:excel-builder
and used it in js like here (action on button click)
Template.exportButton.events({
"click #exportButton": function () {
var workSheet = ExcelBuilder.createWorkbook('./', 'sample.xlsx');
}
});
but in brower console I'm getting
Cannot read property 'createWorkbook' of undefined
I have the same problem with other, similar libraries. How to make Meteor work with those libraries?
I want to port this plugin to the new videojs version 5. I updated most of the plugin to fit into the new videojs.extend() requirements and updated the public functions declarations.
The part I'm stuck on is when you try to load the new components into videojs:
//Range Slider Time Bar
videojs.SeekBar.prototype.options_.children.RSTimeBar = {};
//Panel with the time of the range slider
videojs.ControlBar.prototype.options_.children.ControlTimePanel = {};
If I understand it correctly (I am having some doubts), it is extending specific parts of videojs in order to contain the plugin components.
The problem is that videojs.SeekBar and videojs.ControlBar are undefined and I don't know the right way to access them in v5 (or to create these empty objects if it isn't how you do it anymore). There is also no indication in the videojs wiki article "5.0 changes details"
The full code is available here.. The faulty lines are 421 and 422
EDIT
I can get rid of the error if I replace these lines with those:
videojs.getComponent("SeekBar").prototype.options_.children.RSTimeBar = {}; //Range Slider Time Bar
videojs.getComponent("ControlBar").prototype.options_.children.ControlTimePanel = {}; //Panel with the time of the range slider
but in the plugin constructor function, I can't find back the components:
//components of the plugin
var controlBar = player.controlBar;
var seekBar = controlBar.progressControl.seekBar;
this.components.RSTimeBar = seekBar.RSTimeBar; //is undefined
When I explore the videoJs object, in my debugger, I can indeed find player.controlBar.progressControl.seekBar but it has no sub-object called RSTimebar except in options_.children. It makes sense since it is where I defined it. However, I don't know why in the version 4 I can find it but not in the version 5.
EDIT 2
I notices that the RSTimebar in options_.children array was inserted as an object instead of a pair of index/string. So I changed my lines to this:
videojs.getComponent("SeekBar").prototype.options_.children.push("RSTimeBar"); //Range Slider Time Bar
videojs.getComponent("ControlBar").prototype.options_.children.push("ControlTimePanel"); //Panel with the time of the range slider
Result: the plugin is correctly loaded with one warning per component:
VIDEOJS: WARN: The RSTimeBar component was added to the videojs object
when it should be registered using videojs.registerComponent(name,
component)
I just need to figure out the proper and simplest way to correctly load the components now.
I finally managed to update the plugin thanks to a commit where most of the work was done.