My Dash App is currently of two pages besides the index page, and it consists of the following files.
App.py
index.py
app1.py
app2.py
I have a slider on page 1 of the app, namely in app1.py. The slider value is the input of a callback to make a plot on page 1 of the app.
If I would like to use the same slider value for another callback in page 2 of the app to plot something else. How do I pass the slider value into app2.py?
You can store its value in a dcc.Store (https://dash.plot.ly/dash-core-components/store
) component (in app1):
#app.callback(
Output('dcc_store_compoenent_id', 'data')
[Inputs('your_slider_id', 'value')]
def store_slider_value_in_dcc_store(slider_value):
return {'slider_app1_value': slider_value}
Then you can trig your callback (in app2) with whatever you want and access the data with a State on your dcc.State component:
#app.callback(
Output('the_output', 'you_want')
[Inputs('whatever', 'you_want')]
[State('dcc_store_compoenent_id', 'data'])
def func(input_value, data):
slider_value = data['slider_app1_value']
...
Related
In the onChange of React-Bootstrap-Typeahead, I need to manually set a custom display value. My first thought was to use a ref and do something similar to the .clear() in this example.
But although .clear() works, inputNode.value = 'abc' does not work, and I'm left with the old selected value from the menu.
onChange={option => {
typeaheadRef.current.blur(); // This works
typeaheadRef.current.inputNode.value = 'abc'; // This does not work (old value is retained)
}}
I also tried directly accessing the DOM input element, whose ID I know, and doing
var inputElement = document.querySelector('input[id=myTypeahead]');
inputElement.value = 'abc';
But that didn't work either. For a brief second, right after my changed value = , I do see the new display label, but then it's quickly lost. I think the component saves or retains the menu-selected value.
Note: I cannot use selected, I use defaultSelected. I have some Formik-related behavior that I've introduced, and it didn't work with selected, so I'm stuck with defaultSelected.
The only workaround I found is to re-render the Typeahead component (hide and re-show, from a blank state) with a new defaultSelected="abc" which is a one-time Mount-time value specification for the control.
I couldn't get selected=.. to work, I have a wrapper around the component which makes it fit into Formik with custom onChange and onInputChange and selected wasn't working with that.
So the simple workaround that works is, if the visibility of the Typeahead depends on some condition (otherwise it won't be rendered), use that to momentarily hide and re-show the component (a brand new repaint) with a new defaultSelected, e.g.
/* Conditions controlling the visibility of the Typeahead */
!isEmptyObject(values) &&
(values.approverId === null || (values.approverId !== null && detailedApproverUserInfo)
)
&&
<AsyncTypehead defaultSelected={{...whatever is needed to build the string, or the literal string itself...}}
..
// Given the above visibility condition, we'll hide/re-show the component
// The below will first hide the control in React's renders
setFieldValue("approver", someId);
setDetailedUserInfo(null);
// The below will re-show the control in React's renders, after a small delay (a fetch)
setDetailedUserInfo(fetchDetailedUserInfo());
I want to show a map of the calculated route (truck). How can I do that?
Currently the map showed is based on the lat&long, so not on the calculated route.
image of C# code
If you are trying to display a map with a polyline(route) on it you can use one of the below two solutions:
Maps API for Javascript: A polyline is created using the H.map.Polyline class, passing in an H.geo.LineString holding the points of the line. The look-and-feel of the polyline can be altered by adding the style parameter. Read more at developer.here.com/api-explorer/maps-js/v3.0/geoshapes/polyline-on-the-map
`
function addPolylineToMap(map) {
var lineString = new H.geo.LineString();
lineString.pushPoint({lat:53.3477, lng:-6.2597});
lineString.pushPoint({lat:51.5008, lng:-0.1224});
lineString.pushPoint({lat:48.8567, lng:2.3508});
lineString.pushPoint({lat:52.5166, lng:13.3833});
map.addObject(new H.map.Polyline(
lineString, { style: { lineWidth: 4 }}
));
}
`
2. Map Image API: Replace app id and app code values with actuals. Read more at developer.here.com/api-explorer/rest/map-image/map-image-with-routes
GET https://image.maps.api.here.com/mia/1.6/route?r0=52.5338%2C13.2966%2C52.538361%2C13.325329&r1=52.540867%2C13.262444%2C52.536691%2C13.264561%2C52.529172%2C13.268337%2C52.528337%2C13.273144%2C52.52583%2C13.27898%2C52.518728%2C13.279667&m0=52.5338%2C13.2966%2C52.538361%2C13.325329&m1=52.540867%2C13.262444%2C52.518728%2C13.279667&lc0=00ff00&sc0=000000&lw0=6&lc1=ff0000&sc1=0000ff&lw1=3&w=500&app_id=xxxx&app_code=xxxxx
I need to reset all the values of field elements of my page. The elements are: inputs, selects (combobox), checkbox and radio group.
Searching found the following code:
$("*").attr('value', '');
$("input[type='checkbox']").attr("checked",false);
$('select').each(function() {
if($(this).children().length > 0) {
$($(this).children()[0]).attr('selected', 'selected');
$(this).change();
}
});
Inputs and checkbox are ok with this code, but the other components present problems with the codes tested. The radio group needed or take any kind of selection or at least select the first. The combobox resets with this code but when trying to select a new value it is not storing your value.
Thanks!
The non textual inputs need to be refreshed. Here's an example of doing so:
//reset text input values, then refresh slider widgets
$(".ui-input-text").val('').filter('.ui-slider-input').slider('refresh');
//reset checkboxes and radio inputs, then refresh them
$(".ui-checkbox input[type='checkbox'], .ui-radio input[type='radio']").prop("checked", false).checkboxradio("refresh");
//reset all select menus and then refresh them
$('.ui-select select').val('').selectmenu('refresh');
return false;
Here is a demo: http://jsfiddle.net/MLewd/1/
I am new to dashcode and trying to build a simple web app for iphone using it. My primary aim is to have a Rectangular List (I have used the "Rounded rectangle list"). It is a static list and has three rows. What I want is a website to open when user clicks on any of the row, and each row would have a different URL. I was able to add a Rounded rectangle list with three static rows like
The object ID is "list"
Row 1-- Label- "Gift Cards" , Value - "http://www.abcxyz.com/giftcard"
Row 2-- Label- "Toys" , Value - "http://www.abcxyz.com/toys"
Row 3-- Label- "Bikes" , Value - "http://www.abcxyz.com/bikes"
i added onclick even to call a java script function like below
function myButtonPressHandler(event)
{
var websiteURL = "http://www.abcxyz.com/giftcard";
location = websiteURL;
}
the above code opens the same URL "http://www.abcxyz.com/giftcard" when the user clicks on any of the three buttons, but what I want is to fetch the value of each child node (which would be their respective URLs) at runtime and open it using location = WebsiteURL something like below (did'nt work for me :( -
function myButtonPressHandler(event)
{
var websiteURL = document.getElementById("list").children;
var WebURL = websiteURL[???].value;
location = WebURL;
}
Any help would be appreciated.
Thanks
OK ... so figured out my own answer. The Rounded Rectangular list is actually a multidimensional array. so to get the value of each of the rows i.e. the Http URLs and open them on the browser when the rows were touched/tapped/pressed is as below.
function buttonpresshandler(event)
{
// Insert Code Here
var list = document.getElementById("list").object;
var selectedObjects = list.selectedObjects();
//Open webpage with the value of each label
location = selectedObjects[0][1];
}
Hurray!
Coming from this question, I have a wxComboCtrl with a custom popup made of a panel with a bunch of radiobuttons.. My problem is that when I open the popup the combo doesn't get keystrokes, because the events get handled by the panel itself.. I'd like to redirect those KeyEvents to the textctrl of the combo, but I can't find a way to get it to work :/
Am I going the wrong way? Should I manually handle the textctrl value as the user presses keys? I think that would be a bit cumbersome though.. Since supposedly the textctrl already knows how to handle those events..
Here's my testcase (wxPython 2.8 on Linux), the "on_key" method should be the culprit:
import wx
import wx.combo
class CustomPopup(wx.combo.ComboPopup):
def Create(self, parent):
# Create the popup with a bunch of radiobuttons
self.panel = wx.Panel(parent)
sizer = wx.GridSizer(cols=2)
for x in range(10):
r = wx.RadioButton(self.panel, label="Element "+str(x))
r.Bind(wx.EVT_RADIOBUTTON, self.on_selection)
sizer.Add(r)
self.panel.SetSizer(sizer)
# Handle keyevents
self.panel.Bind(wx.EVT_KEY_UP, self.on_key)
def GetControl(self):
return self.panel
def GetAdjustedSize(self, minWidth, prefHeight, maxHeight):
return wx.Size(200, 150)
def on_key(self, evt):
if evt.GetEventObject() is self.panel:
# Trying to redirect the key event to the combo.. But this always returns false :(
print self.GetCombo().GetTextCtrl().GetEventHandler().ProcessEvent(evt)
evt.Skip()
def on_selection(self, evt):
self.Dismiss()
wx.MessageBox("Selection made")
class CustomFrame(wx.Frame):
def __init__(self):
# Toolbar-shaped frame with a ComboCtrl
wx.Frame.__init__(self, None, -1, "Test", size=(800,50))
combo = wx.combo.ComboCtrl(self)
popup = CustomPopup()
combo.SetPopupControl(popup)
sizer = wx.BoxSizer(wx.VERTICAL)
sizer.Add(combo, 0)
self.SetSizer(sizer)
self.Layout()
if __name__ == '__main__':
app = wx.PySimpleApp()
CustomFrame().Show()
app.MainLoop()
Edit:
I found these (unresolved) discussions on the same topic..
"ComboCtrl loses keyboard focus when ComboPopup is shown "
"issue using wx.ComboCtrl"
I had the same problem with a custom ComboPopup control using a panel as the basis of the control.
EmulateKeypress just entered a never-ending loop. I found binding the panel to the EVT_KEY_DOWN and EVT_CHAR to the overridden OnComboKeyEvent function and skipping the event down the event handling chain was all that was required to enable entering text into the textbox of the ComboCtrl with the popup open. I think this makes sense. As the Popup isn't strictly a control its events won't belong anywhere until bound into the the wx.app event loop through the Bind() method.
I've included the overridden OnComboKeyEvent function below so that anyone else can explore this problem.
def create(self, *args, **kwds):
...
self.panel.Bind(wx.EVT_CHAR, self.OnComboKeyEvent)
self.panel.Bind(wx.EVT_KEY_DOWN, self.OnComboKeyEvent)
...
def OnComboKeyEvent(self, evt):
evt_dict = {wx.EVT_TEXT.typeId: "TextEvent",
wx.EVT_CHAR.typeId:"CharEvent",
wx.EVT_CHAR_HOOK.typeId:"CharHookEvent",
wx.EVT_KEY_UP.typeId:"KeyUpEvent",
wx.EVT_KEY_DOWN.typeId:"KeyDownEvent"}
if evt.GetEventType() in evt_dict:
thelogger.debug("oncombokeyevet:%s" % evt_dict[evt.GetEventType()])
super().OnComboKeyEvent(evt)
evt.Skip()
I've got an answer from Robin Dunn himself on wxpython-users:
Sending low-level events to native
widgets like this does not work the
way that most people expect it to.
You are expecting this to result in
the character being added to the text
ctrl,but it can't do that because all
that ProcessEvent does is send the
wx.Event to any bound event handlers
and then it stops. It does not go to
the next step and convert that event
to the equivalent native message and
send it on to the native widget. See
the "Simulating keyboard events"
thread.
It doesn't work especially well on
non-Windows platforms, but you could
try calling EmulateKeypress instead.