Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
tengo un dropdown que cuando selecciono uno me aparece por defecto solo el codigo de pais mas el nombre, pero al seleccionar solo me debe salir la bandera del pais que vaya a seleccionar y que en un input me salga el codigo del pais. Ayuda!
tengo un dropdown que cuando selecciono uno me aparece por defecto solo el codigo de pais mas el nombre, pero al seleccionar solo me debe salir la bandera del pais que vaya a seleccionar y que en un input me salga el codigo del pais. Ayuda!
jQuery is not working for single select (first option country is selecting from dropdown and 2nd State is fetching from database ) same data base i am using for multiselect which is working fine but single select is not working pls help !!!
mysql Database is
state_id country_id state_name
delhi india delhi
<label for="country">Country</label>
<?php include "fetch_country.php"; ?>
<select id="country" name="country" class="form-control" >
<option value="India" label="India">India</option>
<option value="USA" label="USA">USA</option>
<option value="UK" label="UK">UK</option>
<option value="Canada" label="Canada">Canada</option>
</select>
<label for="state">State</label>
<select id="state" name="state" class="form-control" >
<option disabled>Select Country First</option>
</select>
<script>
$(document).ready(function(){
$('#country').on('change', function(){
onChange:function(option, checked){
var selected = this.$select.val();
if(selected.length > 0)
{
$.ajax({
url:"fetch_country.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#state').html(data);
}
})
}
}
});
});
</script>
single select not working i try this
<script> ( Not working on single select !!)
$(document).ready(function(){
$('#country').on('change', function(){
onChange:function(option, checked){
var selected = this.$select.val();
if(selected.length > 0)
{
$.ajax({
url:"fetch_country.php",
method:"POST",
data:{selected:selected},
success:function(data)
{
$('#state').html(data);
}
})
}
}
});
});
</script>
I have to disable multiple ranges of date in AntDesign DatePicker
I have this array and i want to disable dates between each start and end:
const disabledDatesArr = [
{
start: "2022-12-28T11:19:35.000Z",
end: "2022-12-30T11:19:37.000Z"
},
{
start: "2022-12-14T16:14:09.000Z",
end: "2022-12-17T16:14:12.000Z"
}
]
I have tried to do this.
function disabledDate(current) {
console.log('Disabled Dates: ', disabledDates);
return disabledDates.some(date =>
current.isBetween(moment(date['start'], dateFormat), moment(date['end'], dateFormat), 'day')
);
}
<DatePicker.RangePicker
showTime={{format: 'HH:mm'}}
format="YYYY-MM-DD HH:mm"
locale={locale}
disabledDate={disabledDate}
></DatePicker.RangePicker>
But no date is disabled in DatePicker:
I’ll be very thankful for your help.
I have an html table and I want to save it to the database with jeson serialize. But it comes back like this [{"name":"LOGICALREF","value":"390408"},{"name":"ORDFICHEREF","value":"43669"},{"name":"LINETYPE","value":"0"},{"name":"AMOUNT","value":"9"},{"name":"PRICE","value":"100"},{"name":"DISCPER","value":"0"},{"name":"TOTAL","value":"0"},{"name":"VAT","value":"18"},{"name":"PARENTLNREF","value":"0"},{"name":"LINETYPE","value":"0"},{"name":"LOGICALREF","value":"390409"},{"name":"ORDFICHEREF","value":"43669"},{"name":"LINETYPE","value":"0"},{"name":"AMOUNT","value":"1"},{"name":"PRICE","value":"44,894"},{"name":"DISCPER","value":"0"},{"name":"TOTAL","value":"0"},{"name":"VAT","value":"18"},{"name":"PARENTLNREF","value":"0"},{"name":"LINETYPE","value":"0"},{"name":"LOGICALREF","value":"390410"},{"name":"ORDFICHEREF","value":"43669"},{"name":"LINETYPE","value":"0"},{"name":"AMOUNT","value":"1"},{"name":"PRICE","value":"68,442"},{"name":"DISCPER","value":"0"},{"name":"TOTAL","value":"0"},{"name":"VAT","value":"18"},{"name":"PARENTLNREF","value":"0"},{"name":"LINETYPE","value":"0"}]
[{“LOGICALREF”,”390408″}]
should return as
I creating personal discord bot for my discord sever. and I had a problem, after reusing the bot’s functionality, it turns off with an error “DiscordAPIError: Interaction has already been acknowledged.”. Help me pls. ……………………………………………………………………………………………………………………………………………………………………………….
const { MessageEmbed, MessageActionRow, MessageButton, MessageSelectMenu } = require('discord.js');
module.exports.run = async (bot,message,args) => {
try{
let support = message.guild.roles.cache.find(role => role.id === "1048126663956906034");
let newfag = message.mentions.members.first() || message.guild.members.cache.get(args[0]);
let verification = message.guild.roles.cache.find(role => role.id === "1048130899725799497");
message.delete();
if(!args[0]) {
return message.channel.send({ embeds: [Verification_1] })
};
if(!newfag) {
return message.channel.send({ embeds: [Verification_1] })
};
if(!newfag.roles.cache.has(verification.id)) {
return message.channel.send({ embeds: [Verification_1] })
};
const Verification_B_1 = new MessageActionRow()
);
const Verification_B_2 = new MessageActionRow()
);
if(!message.member.roles.cache.has(support.id)) {
await message.channel.send({ embeds: [Verification_1] })
} else {
await message.channel.send({ embeds: [Verification_2], components: [Verification_B_1, Verification_B_2] })
};
bot.on('interactionCreate', async (interaction) => {
const Verification_S_1 = new MessageActionRow()
.addComponents(
new MessageSelectMenu()
.setCustomId('s_1')
.setPlaceholder('gender')
.addOptions([
{
label: 'male',
description: 'm gender',
value: 'one',
},
{
label: 'female',
description: 'fm gender',
value: 'two',
},
]),
)
if(interaction.customId == 'b_1') {
await interaction.reply({ embeds: [Verification_3], components: [Verification_S_1] });
};
if(interaction.customId == "s_1") {
if(await interaction.values[0] == "one") {
let gender_1 = interaction.guild.roles.cache.find(role => role.id === "1048130667256479784");
let gender_3 = interaction.guild.roles.cache.find(role => role.id === "1048130850425933924");
let gender_2 = interaction.guild.roles.cache.find(role => role.id === "1048130899725799497");
newfag.roles.add(gender_1)
newfag.roles.add(gender_3)
newfag.roles.remove(gender_2)
await interaction.reply({ embeds: [Verification_5] })
};
if(await interaction.values[0] == "two") {
let gender_1 = interaction.guild.roles.cache.find(role => role.id === "1048130663259316275");
let gender_3 = interaction.guild.roles.cache.find(role => role.id === "1048130850425933924");
let gender_2 = interaction.guild.roles.cache.find(role => role.id === "1048130899725799497");
newfag.roles.add(gender_1)
newfag.roles.add(gender_3)
newfag.roles.remove(gender_2)
await interaction.reply({ embeds: [Verification_4] })
};
};
});
} catch(err) {
console.log(`1. ${err.name} - name errorn2. ${err.message} - description errorn3. ${err.stack} - function error`)
};
};
module.exports.help = {
name: "verif"
};
i am new, and am getting acquainted with i reactjs and nodejs, i am writing a website in which i want to write a function to get the current login information of the user through redux, and then after then assign the obtained user value to react-select, then from react-select, we select that user to perform the assignment of new data to the database from reactjs. However, I have not been able to get the logged in user information through redux. This is my code, anyone have any ideas? Thanks very much
here is my FE(Reactjs code):
here is DoctorManageSchedule.js:
import React, { Component } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import './ManageSchedule.scss';
import Select from 'react-select';
import * as actions from "../../../store/actions";
import { CRUD_ACTIONS, LANGUAGES, dateFormat } from '../../../utils';
import DatePicker from '../../../components/Input/DatePicker';
import moment from 'moment';
import { toast } from "react-toastify";
import _ from 'lodash';
import { saveBulkScheduleDoctor, getScheduleDoctorById } from '../../../services/userService';
import DetailDoctor from './DetailDoctor';
class DoctorManageSchedule extends Component {
constructor(props) {
super(props);
this.state = {
arrDoctor: [],
selectedDoctor: {},
currentDate: '',
rangeTime: [],
minDate: moment().calendar(),
}
}
async componentDidMount() {
this.props.fetchDoctor(this.props.match.params.id);
this.props.fetchAllScheduleTimes();
}
async componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.doctor !== this.props.doctor) {
let dataSelect = this.buildDataInputSelect(this.props.doctor)
this.setState({
arrDoctor: dataSelect
})
}
if (prevProps.allScheduleTime !== this.props.allScheduleTime) {
let data = this.props.allScheduleTime;
if (data && data.length > 0) {
data = data.map(item => ({ ...item, isSelected: false }))
}
this.setState({
rangeTime: data
})
}
}
buildDataInputSelect = (inputData) => {
let result = [];
let { language } = this.props;
if (inputData && inputData.length > 0) {
inputData.map((item, index) => {
let object = {};
let labelEn = `${item.lastName} ${item.firstName}`;
let labelVi = `${item.firstName} ${item.lastName}`;
object.label = language === LANGUAGES.VI ? labelVi : labelEn;
object.value = item.id;
result.push(object)
})
}
return result;
}
handleChangeSelect = async (selectedOption) => {
this.setState({ selectedDoctor: selectedOption });
}
handleOnChangeDatePicker = (date) => {
this.setState({
currentDate: date[0]
})
}
handleClickBtnTime = (time) => {
let { rangeTime } = this.state;
if (rangeTime && rangeTime.length > 0) {
rangeTime = rangeTime.map(item => {
if (item.id === time.id) item.isSelected = !item.isSelected;
return item;
})
this.setState({
rangeTime: rangeTime
})
}
}
handleSaveSchedule = async () => {
let { rangeTime, selectedDoctor, currentDate } = this.state;
let result = [];
if (!currentDate) {
toast.error("Invalid date!");
}
if (selectedDoctor && _.isEmpty(selectedDoctor)) {
toast.error("Invalid selected doctor! ");
console.log('check doctor: ', this.state)
return;
}
let formatedDate = new Date(currentDate).getTime();
if (rangeTime && rangeTime.length > 0) {
let selectedTime = rangeTime.filter(item => item.isSelected === true);
if (selectedTime && selectedTime.length > 0) {
selectedTime.map((schedule, index) => {
let object = {};
object.doctorId = selectedDoctor.value;
object.date = formatedDate;
object.timeType = schedule.keyMap;
result.push(object);
})
} else {
toast.error("Invalid selected time! ");
return;
}
}
let res = await saveBulkScheduleDoctor({
arrSchedule: result,
doctorId: selectedDoctor.value,
formatedDate: formatedDate
})
if (res && res.errCode === 0) {
toast.success("Save Infor succeed!");
} else {
toast.error("error saveBulkScheduleDoctor ");
console.log('error saveBulkScheduleDoctor >>> res: ', res)
}
console.log('bao phuc check result: ', result);
console.log('check res: saveBulkScheduleDoctor : ', res);
}
render() {
let { rangeTime, arrDoctor } = this.state;
console.log("check doctor:", arrDoctor)
let { language } = this.props;
let today = new Date(new Date().setDate(new Date().getDate()));
return (
<div className="manage-schedule-container">
<div className="m-s-title">
<FormattedMessage id="manage-schedule.title"></FormattedMessage>
</div>
<div className="container">
<div className="row">
<div className="col-6 form-group">
<label>
<FormattedMessage id="manage-schedule.choose-doctor" /> </label>
<Select
value={this.state.selectedDoctor}
onChange={this.handleChangeSelect}
options={this.state.listDoctors}
/>
</div>
<div className="col-6 form-group">
<label>
<FormattedMessage id="manage-schedule.choose-date" /> </label>
<DatePicker
value={this.state.currentDate}
className="form-control"
onChange={this.handleOnChangeDatePicker}
minDate={today}
/>
</div>
<div className="col-12 pick-hour-container">
{rangeTime && rangeTime.length > 0 &&
rangeTime.map((item, index) => {
return (
<button className={item.isSelected === true ?
"btn btn-schedule active" : "btn btn-schedule"}
key={index} onClick={() => this.handleClickBtnTime(item)}>
{language === LANGUAGES.VI ? item.valueVi : item.valueEn}
</button>
)
})}
</div>
<div className="col-12">
<button className="btn btn-primary btn-save-schedule"
onClick={() => this.handleSaveSchedule()}>
<FormattedMessage id="manage-schedule.save" />
</button>
</div>
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => {
return {
language: state.app.language,
isLoggedIn: state.user.isLoggedIn,
doctor: state.admin.doctor,
allScheduleTime: state.admin.allScheduleTime,
};
};
const mapDispatchToProps = dispatch => {
return {
fetchDoctor: () => dispatch(actions.fetchDoctorStart()),
fetchAllScheduleTimes: () => dispatch(actions.fetchAllScheduleTimes())
};
};
export default connect(mapStateToProps, mapDispatchToProps)(DoctorManageSchedule);
and here is my actionTypes.js:
const actionTypes = Object.freeze({
FETCH_DOCTOR_SUCCESS: 'FETCH_DOCTOR_SUCCESS',
FETCH_DOCTOR_FAILED: 'FETCH_DOCTOR_FAILED',
})
export default actionTypes;
and here is my adminActions.js:
export const fetchDoctorStart = id => () => {
return async (dispatch, getState) => {
try {
let res = await getScheduleDoctorById(id);
if (res && res.errCode === 0) {
dispatch({
type: actionTypes.FETCH_DOCTOR_SUCCESS,
dataDoctor: res.data
})
} else {
toast.error("Failed to fetch doctor");
dispatch(fetchDoctorFailed());
}
} catch (e) {
toast.error("Failed to fetch doctor");
dispatch(fetchDoctorFailed());
console.log("check fetch doctor failed: ", e);
}
}
};
export const fetchDoctorSuccess = (data) => ({
type: actionTypes.FETCH_DOCTOR_SUCCESS,
doctor: data
})
export const fetchDoctorFailed = () => ({
type: actionTypes.FETCH_DOCTOR_FAILED,
})
here is my adminReducer.js:
case actionTypes.FETCH_DOCTOR_SUCCESS:
state.doctor = action.dataDoctor;
return {
...state,
}
case actionTypes.FETCH_DOCTOR_FAILED:
state.doctor = [];
return {
...state,
}
here is my userService.js:
const getScheduleDoctorById = (inputId) => {
return axios.get(`/api/get-schedule-doctor-by-id?id=${inputId}`)
}
here is my BE(Nodejs code):
here is web.js:
const getScheduleDoctorById = (inputId) => {
return axios.get(`/api/get-schedule-doctor-by-id?id=${inputId}`)
}
here is doctorController.js:
let getScheduleById= async (req, res) => {
try {
let infor = await doctorService.getScheduleById(req.query.id);
return res.status(200).json(infor);
} catch (e) {
console.log(e);
return res.status(200).json({
errCode: -1,
errMessage: 'Error from the server'
})
}
}
here is doctorService.js:
let getScheduleById = (inputId) => {
return new Promise(async (resolve, reject) => {
try {
if (!inputId) {
resolve({
errCode: 1,
errMessage: 'Missing required parameter!'
})
} else {
let data = await db.User.findOne({
where: {
id: inputId
},
attributes: {
exclude: ['password']
},
include: [
{ model: db.Allcode, as: 'positionData', attributes: ['valueEn', 'valueVi'] },
{
model: db.Doctor_Infor,
attributes: {
exclude: ['id', 'doctorId']
}
},
],
raw: false,
nest: true
})
if (data && data.image) {
data.image = new Buffer(data.image, 'base64').toString('binary');
}
if (!data) data = {};
resolve({
errCode: 0,
data: data
})
}
} catch (e) {
reject(e);
}
})
}
when i run the app i only get the available time slots from the database, but no info about who is logged in, i checked the network tab, but it seems the api gets the user info via redux do not run. Or does anyone have a way to do it other than using redux, that the user (doctor) can set his own schedule and save it to the database? However, I don’t know why, please comment, thanks a lot
So i have a coin box that collects coins and it recognize their value.
I want to make the user be able to insert coin and pay a service that costs 2.0 €.
The user can pay with coins from 2.0 € , 1.0 € , 0,50 € , 0,20 € , 0,10 €.
In my react-native now i created a function where if the coin reaches 2 euros the coin box stops (listener).
But how can i sum every time the user insert different coins of different values?
here is my code:
import {useNavigation} from '@react-navigation/native';
import React, {useEffect, useState} from 'react';
import {
Alert,
DeviceEventEmitter,
NativeEventEmitter,
NativeModules,
Pressable,
StyleSheet,
Text,
View,
} from 'react-native';
const {CoinBoxCollector} = NativeModules;
export default function HomeScreen() {
const [off, setOff] = useState(true);
const navigation = useNavigation();
let coinInserted = 0;
const coinValueStartExperience = 2;
let totalCoin;
async function onCoinDetected(coin: any) {
if (coinInserted >= coinValueStartExperience) {
//navigation.navigate('VideoScreen');
console.log("hai pagato per l' esperienza");
return await CoinBoxCollector.stop();
}
if (coinInserted !== 0 || coinInserted < coinValueStartExperience) {
console.log('DEVI INSERIRE ALTRI SOLDI');
totalCoin = coinInserted + parseFloat(coin);
// console.log('ricevuti ' + totalCoin + ' €');
}
// Alert.alert('ricevuti soldi', coin);
}
const pressInit = async () => {
// setOff(false);
return await CoinBoxCollector.initialize();
};
const pressStop = async () => {
// setOff(false);
console.log('getttoniera stoppata');
return await CoinBoxCollector.stop();
};
useEffect(() => {
const eventEmitter = new NativeEventEmitter(NativeModules.CoinBoxCollector);
const eventListener = eventEmitter.addListener(
'onReceivedCoin',
onCoinDetected,
);
// return eventListener.remove();
}, []);
return (
<View style={styles.container}>
<Pressable style={styles.btn} onPress={pressInit}>
<Text style={styles.btnText}>Initialize</Text>
</Pressable>
<Pressable style={styles.btn} onPress={pressStop}>
<Text style={styles.btnText}>Stop it</Text>
</Pressable>
{/* <Pressable
style={styles.btn}
onPress={() => navigation.navigate('VideoScreen')}>
<Text style={styles.btnText}>navigate</Text>
</Pressable> */}
{/* {!off && (
<View>
<Text>Bravo hai Pagato !</Text>
</View>
)} */}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignContent: 'center',
},
btn: {
marginTop: 30,
backgroundColor: '#841584',
width: '5%',
height: 30,
marginLeft: '48%',
},
btnText: {
color: 'white',
textAlign: 'center',
},
});
thank you in advance for the answer
I wanna make the button to the tweet page and designate what text and what url and hashtags to tweet,
I want to tweet with the line break
`
const sendText = "aa n"
const sendURL = window.location.href;
window.open("https://twitter.com/intent/tweet?text=" + sendText + "&url=" + sendURL + "&hashtags=a,b");
`
I tried n and br tag and [br /] but twitter still ignores me
I have an object
let sharedDevices = {
ph: [{ ID: 'p1', deviceOrder: 1 },
{ ID: 'p2', deviceOrder: 2 },
{ ID: 'p3', deviceOrder: 3 }]
}
After the trigger of certain event deviceOrder will change so for eg
Now i am trying to update deviceOrder to 1 of p3 i am able to do that but i also want to change the value of p1 to 2 and p2 to 3.
Please Note: i have used just 3 objects in array in this question but there can be 20-30 or more. Also this is my first question so please let me know if more information or clarity is needed.
Expected Retust would be
{
ph: [{ ID: 'p1', deviceOrder: 2 },
{ ID: 'p2', deviceOrder: 3 },
{ ID: 'p3', deviceOrder: 1 }]
}
I am setting the value of summernote code to hidden field but in code behind hidden field returns empty string
Javascript code
$("#<%= txtQuestion.ClientID %>").on('summernote.blur', function () {
debugger;
let a = $('#<%= txtQuestion.ClientID %>').summernote('code');
document.getElementById("<%= HiddenField1.ClientID %>").innerText = a;
console.log(a);
});
Code Behind
string a = HiddenField1.Value;
I would like to export only the maI.src from the switch function (util.js file) to another file (main.js).
util.js file (product page)
function pattern(event) {
switch (event.target.value) {
case "1":
maI.src = "https://www.dropbox.com/s/vo2h2ux0twcvnba/hex.new.png?dl=1";
maI.style.height = "440px";
maI.style.width = "541px";
maI.style.marginLeft = "0%";
maI.style.marginTop = "9%";
patternPrice = bookPattern.hex.price;
break;
case "2":
maI.src = "https://www.dropbox.com/s/dlck7w2hz222l3l/dragon.new2.png?dl=1";
maI.style.height = "540px";
maI.style.width = "";
maI.style.marginLeft = "7%";
maI.style.marginTop = "0%";
patternPrice = bookPattern.dragon.price;
break;
case "3":
maI.src = "https://www.dropbox.com/s/08qukbvg9p8u9ts/tree.new2.png?dl=1";
maI.style.height = "540px";
maI.style.width = "";
maI.style.marginLeft = "7%";
maI.style.marginTop = "0%";
patternPrice = bookPattern.tree.price;
break;
case "4":
maI.src = "https://www.dropbox.com/s/qxp9lutdapkv29d/patterned.new2.png?dl=1";
maI.style.height = "540px";
maI.style.width = "";
maI.style.marginLeft = "7%";
maI.style.marginTop = "0%";
patternPrice = bookPattern.patterned.price;
break;
default:
return itemAmount.innerHTML = "";
break;
};
const itemTotal = (patternPrice) => {
return itemAmount.innerHTML = `${patternPrice}`
};
itemTotal(patternPrice);
if (sizePrice && patternPrice) {
return total_amount.innerHTML = `${patternPrice}${sizePrice}H`;
};
};
//attempted way to export the chosen image from the product page
export function result() {
return maI.src;
};
main.js file (delivery page)
import {result} from '../util.js';
//code to transfer image url, from the function that has been imported, within the html.index of the delivery page
const chosenBook = document.getElementById("chosen_book"); chosenBook.src= maI.src;
The point of what I am trying to do is to transfer the chosen image of the book from the product page to the delivery page. Hence, when the customer chooses case 1 and clicks next, the book image they have chosen from the previous page will show up on the next one.
I assumed an export/import was needed for this scenario. I have tested whether export/import between files work and they do. So it is only a matter of how well I write the code to transfer the chosen image from the switch function to the next page.
Hi I have a javascript code as below. But its not like how i want it to be. I mean how the time and date is presented.
function getDateTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth()+1;
var day = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
if(month.toString().length == 1) {
month = '0'+month;
}
if(day.toString().length == 1) {
day = '0'+day;
}
if(hour.toString().length == 1) {
hour = '0'+hour;
}
if(minute.toString().length == 1) {
minute = '0'+minute;
}
if(second.toString().length == 1) {
second = '0'+second;
}
var dateTime = year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
return dateTime;
}
// example usage: realtime clock
setInterval(function(){
currentTime = getDateTime();
document.getElementById("digital-clock").innerHTML = currentTime;
}, 1000);
<div id="digital-clock"></div>
The output is like this
Instead, I want it to be like this:
Also, is it possible if I want to display in language other than English?
I want to add a javascript library in my page each time when we click on a AjaxLink in apache wicket without refreshing the page. Is it possible to add Javascript library without refreshing the page and trigger that library each time on a function call ?
//Here , MetaModelPagePanel trigger and add a javascript file and create a graph using this
RepeatingView graphTesting1= new RepeatingView("graphTesting");
MetaModelPagePanel graphTesting = new MetaModelPagePanel(graphTesting1.newChildId(), getRepositoryKey());
graphTesting1.add(graphTesting.setVisible(false));
OverViewpanel.add(graphTesting1);
AjaxLink onClickGraph_Container = new AjaxLink<>("onClickGraph_Test") {
@Override
public void onClick(AjaxRequestTarget target) {
MetaModelPagePanel graphTesting = new MetaModelPagePanel(graphTesting1.newChildId(), getRepositoryKey());
graphTesting1.add(graphTesting);
OverViewpanel.add(graphTesting1.setVisible(true));
}
};
I have a site that I want to create a script that drags all the text on the page to make it easier for me to write
I have no better ideas to suggest to anyone
Hello guys I am new here and definitely rusty on javascript, and that why I am asking for help adding a function to the script that change the tooltip (pastille) colors. I have already a sample of the code but I can't find the way to add the function into my main code.
Here is the function to add:
const version = '1.12.1';
const urlid = '526be2fd9c56426aacc0674548c7f543';
const iframe = document.getElementById('api-frame');
const client = new Sketchfab(version, iframe);
let api;
let currentAnnotation;
const render = () => {
if (currentAnnotation) {
const current = 'annotation-' + currentAnnotation;
document.querySelector('.slide.active').classList.remove('active');
document.getElementById(current).classList.add('active');
}
};
var buttonFront = document.getElementById('a2');
var buttonBack = document.getElementById('a3');
var apiSkfb;
var selectedAnnotation = -1;
var lastSelectedAnnotation = -1;
var pastillesURL;
(function() {
// create images pastilles from svg
// create transparent image for pastille from svg
function computePastilles(wCanvas, hCanvas, bgColor, bgBorderColor, fgColor, fgBorderColor, text, numHotspot, wPastille, hPastille) {
var wSize = wPastille / 10.0;
var col = wCanvas / wSize;
var row = hCanvas / wSize;
var padding = 3;
var w = wSize - padding;
var cx;
var cy = w * 0.5;
var ty = cy + 0;
var pastille = '';
var num = 0;
for (var i = 0; i < row; i++) {
cx = wSize * 0.5;
for (var k = 0; k < col; k++) {
num++;
var letters = text === 0 ? num : text[num];
var circle = "<circle cx="".concat(cx, ""ntttttttcy="").concat(cy, ""ntttttttr="20"ntttttttfill="").concat(bgColor, ""ntttttttstroke="").concat(bgBorderColor, ""ntttttttstroke-width="2"/>");
var textVG = "<text font-size="26"nttttttstroke="".concat(fgBorderColor, ""nttttttfill="").concat(fgColor, ""nttttttfont-family="sans-serif"ntttttttext-anchor="middle"nttttttalignment-baseline="baseline"nttttttx="").concat(cx, ""ntttttty="").concat(ty, "">").concat(letters, "</text>");
pastille += circle + textVG;
cx += wSize;
}
cy += wSize;
ty += wSize;
}
var s = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
s.setAttribute('version', '1.1');
s.setAttribute('baseProfile', 'full');
s.setAttribute('width', wPastille);
s.setAttribute('height', hPastille);
s.setAttribute('viewBox', "0 0 ".concat(wPastille, " ").concat(hPastille));
s.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
s.innerHTML = pastille; // make it base64
var svg64 = btoa(s.outerHTML);
var b64Start = 'data:image/svg+xml;base64,';
var image64 = b64Start + svg64;
var textureOptions = {
url: image64,
colNumber: col,
padding: padding,
iconSize: w
};
return textureOptions;
}
function getNewPastilleURL(bgColor, bgBorderColor, fgColor, fgBorderColor, text, numHotspot, w, h) {
var imageData;
imageData = computePastilles(w, h, bgColor, bgBorderColor, fgColor, fgBorderColor, text, numHotspot, w, h);
return imageData;
}
pastillesURL = getNewPastilleURL('#FF671D', '#FF671D', 'white', 'none', 0, 50, 512, 256);
})();
/////////////////////////////////////
// end pastilles
/////////////////////////////////////
function actionSkfb() {
var error = function error(err) {
console.error('Sketchfab API error', err);
};
var success = function success(api) {
apiSkfb = api;
apiSkfb.start(function() {
api.addEventListener('viewerready', function() {
apiSkfb.setAnnotationsTexture(pastillesURL, function() {});
});
});
};
client.init(urlid, {
success: success,
error: error,
annotation: 0, // Usage: Setting to [1 – 100] will automatically load that annotation when the viewer starts.
animation_autoplay: 1,
annotation_tooltip_visible: 0,
annotations_visible: 1, // Usage: Setting to 0 will hide annotations by default.
autospin: 0, // Usage: Setting to any other number will cause the model to automatically spin around the z-axis after loading.
autostart: 1, // Usage: Setting to 1 will make the model load immediately once the page is ready, rather than waiting for a user to click the Play button.
cardboard: 0, // Usage: Start the viewer in stereoscopic VR Mode built for Google Cardboard and similar devices.
camera: 1, // Usage: Setting to 0 will skip the initial animation that occurs when a model is loaded, and immediately show the model in its default position.
preload: 1, // Usage: Setting to 1 will force all resources (textures) to download before the scene is displayed.
ui_stop: 0, // Usage: Setting to 0 will hide the "Disable Viewer" button in the top right so that users cannot stop the 3D render once it is started.
transparent: 0, // Usage: Setting to 1 will make the model's background transparent
ui_animations: 0, // Usage: Setting to 0 will hide the animation menu and timeline.
ui_annotations: 1, // Usage: Setting to 0 will hide the Annotation menu.
ui_controls: 0, // Usage: Setting to 0 will hide all the viewer controls at the bottom of the viewer (Help, Settings, Inspector, VR, Fullscreen, Annotations, and Animations).
ui_fullscreen: 1, // Usage: Setting to 0 will hide the Fullscreen button.
ui_general_controls: 0, // Usage: Setting to 0 will hide main control buttons in the bottom right of the viewer (Help, Settings, Inspector, VR, Fullscreen).
ui_help: 1, // Usage: Setting to 0 will hide the Help button.
ui_hint: 0, // Usage: Setting to 0 will always hide the viewer hint animation ("click & hold to rotate"). Setting to 1 will show the hint the first time per browser session (using a cookie). Setting to 2 will always show the hint.
ui_color:'FF671D',
prevent_user_light_rotation: 1,
orbit_constraint_zoom_in: 50,
dof_circle: 1,
ui_infos: 0, // Usage: Setting to 0 will hide the model info bar at the top of the viewer.
ui_inspector: 0, // Usage: Setting to 0 will hide the inspector button.
ui_settings: 0, // Usage: Setting to 0 will hide the Settings button.
ui_vr: 0, // Usage: Setting to 0 will hide the View in VR button.
ui_ar: 0, // Usage: Setting to 0 will hide the View in AR button.
ui_watermark_link: 0, // Usage: Setting to 0 remove the link from the Sketchfab logo watermark.
ui_watermark: 0, // Usage: Setting to 0 remove the Sketchfab logo watermark.
});
};
actionSkfb();
This is the code we have starting and where I need to add fur function to change "Pastille color"
const version = '1.12.1';
const urlid = '526be2fd9c56426aacc0674548c7f543';
const iframe = document.getElementById('api-frame');
const client = new Sketchfab(version, iframe);
let api;
let currentAnnotation;
const render = () => {
if (currentAnnotation) {
const current = 'annotation-' + currentAnnotation;
document.querySelector('.slide.active').classList.remove('active');
document.getElementById(current).classList.add('active');
}
};
client.init(urlid, {
annotation: 0, // Usage: Setting to [1 – 100] will automatically load that annotation when the viewer starts.
animation_autoplay: 1,
annotation_tooltip_visible: 0,
annotations_visible: 1, // Usage: Setting to 0 will hide annotations by default.
autospin: 0, // Usage: Setting to any other number will cause the model to automatically spin around the z-axis after loading.
autostart: 1, // Usage: Setting to 1 will make the model load immediately once the page is ready, rather than waiting for a user to click the Play button.
cardboard: 0, // Usage: Start the viewer in stereoscopic VR Mode built for Google Cardboard and similar devices.
camera: 1, // Usage: Setting to 0 will skip the initial animation that occurs when a model is loaded, and immediately show the model in its default position.
preload: 1, // Usage: Setting to 1 will force all resources (textures) to download before the scene is displayed.
ui_stop: 0, // Usage: Setting to 0 will hide the "Disable Viewer" button in the top right so that users cannot stop the 3D render once it is started.
transparent: 0, // Usage: Setting to 1 will make the model's background transparent
ui_animations: 0, // Usage: Setting to 0 will hide the animation menu and timeline.
ui_annotations: 1, // Usage: Setting to 0 will hide the Annotation menu.
ui_controls: 1, // Usage: Setting to 0 will hide all the viewer controls at the bottom of the viewer (Help, Settings, Inspector, VR, Fullscreen, Annotations, and Animations).
ui_fullscreen: 1, // Usage: Setting to 0 will hide the Fullscreen button.
ui_general_controls: 0, // Usage: Setting to 0 will hide main control buttons in the bottom right of the viewer (Help, Settings, Inspector, VR, Fullscreen).
ui_help: 1, // Usage: Setting to 0 will hide the Help button.
ui_hint: 0, // Usage: Setting to 0 will always hide the viewer hint animation ("click & hold to rotate"). Setting to 1 will show the hint the first time per browser session (using a cookie). Setting to 2 will always show the hint.
ui_color:'FF671D',
prevent_user_light_rotation: 1,
orbit_constraint_zoom_in: 50,
dof_circle: 1,
ui_infos: 0, // Usage: Setting to 0 will hide the model info bar at the top of the viewer.
ui_inspector: 0, // Usage: Setting to 0 will hide the inspector button.
ui_settings: 0, // Usage: Setting to 0 will hide the Settings button.
ui_vr: 0, // Usage: Setting to 0 will hide the View in VR button.
ui_ar: 0, // Usage: Setting to 0 will hide the View in AR button.
ui_watermark_link: 0, // Usage: Setting to 0 remove the link from the Sketchfab logo watermark.
ui_watermark: 0, // Usage: Setting to 0 remove the Sketchfab logo watermark.
success: (apiClient) => {
api = apiClient;
api.addEventListener('viewerready', () => {
// Update the current annotation when the annotation changes
api.addEventListener('annotationSelect', (index) => {
currentAnnotation = 1 + index;
render();
});
});
},
error: () => window.console.log('Error while initializing the viewer')
});