拖放后将图元位置保存到本地文件

2024-06-26 14:03:15 发布

您现在位置：Python中文网/ 问答频道 /正文
3219 3

我正在升级我的一个项目，它是根据球员在球场上的位置预测篮板几率的。这里是链接：http://okc-thunder-rebounds.herokuapp.com/

我希望通过启用拖动和；滴水。我的意思是，用户可以将代表球员的物品放置在球场面板的任何位置。目前，当玩家被放置到我的模型中时，我很难导入他们的最终位置，因为之前，我使用Python和Streamlight开发，而现在，我使用HTML、CSS和JavaScript进行开发

我是后三者的新手，因此我找不到一种能够直接将数据传输/导入python代码的方法。我想可以先在本地保存数据，然后再使用python读取它们

简言之，我如何能够在物品放置后立即记录物品的位置（以像素为单位），如果可能的话，移动物品时可以更改物品的记录

以下是我所做的工作，以使它拖&；删除：

<html><head><style>
#red_button1 {
  position: absolute;
  top:10px;
  left:20px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
}

#def1 {
  cursor: move;
  z-index: 10;
  background-color: #FF0000;
  color: #000;
  border: 1px solid #d3d3d3;
}

#red_button2 {
  position: absolute;
  top:60px;
  left:20px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
}

#def2 {
  cursor: move;
  z-index: 10;
  background-color: #FF0000;
  color: #000;
  border: 1px solid #d3d3d3;
}

#red_button3 {
  position: absolute;
  top:110px;
  left:20px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
}

#def3 {
  cursor: move;
  z-index: 10;
  background-color: #FF0000;
  color: #000;
  border: 1px solid #d3d3d3;
}

#red_button4 {
  position: absolute;
  top:160px;
  left:20px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
}

#def4 {
  cursor: move;
  z-index: 10;
  background-color: #FF0000;
  color: #000;
  border: 1px solid #d3d3d3;
}

#red_button5 {
  position: absolute;
  top:210px;
  left:20px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
}

#def5 {
  cursor: move;
  z-index: 10;
  background-color: #FF0000;
  color: #000;
  border: 1px solid #d3d3d3;
}

#blue_button1 {
  position: absolute;
  top:10px;
  left:60px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
}

#off1 {
  cursor: move;
  z-index: 10;
  background-color: #0000FF;
  color: #000;
  border: 1px solid #d3d3d3; 
}

#blue_button2 {
  position: absolute;
  top:60px;
  left:60px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
}

#off2 {
  cursor: move;
  z-index: 10;
  background-color: #0000FF;
  color: #000;
  border: 1px solid #d3d3d3; 
}

#blue_button3 {
  position: absolute;
  top:110px;
  left:60px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
}

#off3 {
  cursor: move;
  z-index: 10;
  background-color: #0000FF;
  color: #000;
  border: 1px solid #d3d3d3; 
}

#blue_button4 {
  position: absolute;
  top:160px;
  left:60px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
}

#off4 {
  cursor: move;
  z-index: 10;
  background-color: #0000FF;
  color: #000;
  border: 1px solid #d3d3d3; 
}

#blue_button5 {
  position: absolute;
  top:210px;
  left:60px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
}

#off5 {
  cursor: move;
  z-index: 10;
  background-color: #0000FF;
  color: #000;
  border: 1px solid #d3d3d3; 
}

#panel {
    width: 350px;
    height: 350px;
    background-size: contain;
}

#display {
  position: absolute;
  top:500px;
  left:10px;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  display:block; 
  width: 100px;
}
</style>
</head><body>
<div id="panel" style="background-image: url('court.png');">
<div id="red_button1">
    <div id="def1">1</div>
</div>
<div id="red_button2">
    <div id="def2">2</div>
</div>
<div id="red_button3">
    <div id="def3">3</div>
</div>
<div id="red_button4">
    <div id="def4">4</div>
</div>
<div id="red_button5">
    <div id="def5">5</div>
</div>
<div id="blue_button1">
    <div id="off1" style="color:white">1</div>
</div>
<div id="blue_button2">
    <div id="off2" style="color:white">2</div>
</div>
<div id="blue_button3">
    <div id="off3" style="color:white">3</div>
</div>
<div id="blue_button4">
    <div id="off4" style="color:white">4</div>
</div>
&lt;<div id="blue_button5">
    <div id="off5" style="color:white">5</div>
</div>
</div>
<input type="button" value="Show Positions" onclick="SHowDiv()">
<div id="display"></div>
<script>
//Make the DIV elements draggagle:
dragElement(document.getElementById("red_button1"));
dragElement(document.getElementById("red_button2"));
dragElement(document.getElementById("red_button3"));
dragElement(document.getElementById("red_button4"));
dragElement(document.getElementById("red_button5"));
dragElement(document.getElementById("blue_button1"));
dragElement(document.getElementById("blue_button2"));
dragElement(document.getElementById("blue_button3"));
dragElement(document.getElementById("blue_button4"));
dragElement(document.getElementById("blue_button5"));

//output their final locations
// getOffset(document.getElementById("red_button1"));
// getOffset(document.getElementById("red_button2"));
// getOffset(document.getElementById("red_button3"));
// getOffset(document.getElementById("red_button4"));
// getOffset(document.getElementById("red_button5"));
// getOffset(document.getElementById("blue_button1"));
// getOffset(document.getElementById("blue_button2"));
// getOffset(document.getElementById("blue_button3"));
// getOffset(document.getElementById("blue_button4"));
// getOffset(document.getElementById("blue_button5"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

function getOffset(elmnt) {
    return {top: elmnt.style.top, left: elmnt.style.left};
}

String.prototype.trimRight = function(charlist) {
  if (charlist === undefined)
    charlist = "\s";

  return this.replace(new RegExp("[" + charlist + "]+$"), "");
};

function SHowDiv()
{
  document.getElementById("display").innerHTML = 
  getOffset(document.getElementById("red_button1")).top.trimRight("px") + ", " + getOffset(document.getElementById("red_button1")).left.trimRight("px") + "<br>" + 
  getOffset(document.getElementById("red_button2")).top.trimRight("px") + ", " + getOffset(document.getElementById("red_button2")).left.trimRight("px") + "<br>" + 
  getOffset(document.getElementById("red_button3")).top.trimRight("px") + ", " + getOffset(document.getElementById("red_button3")).left.trimRight("px") + "<br>" + 
  getOffset(document.getElementById("red_button4")).top.trimRight("px") + ", " + getOffset(document.getElementById("red_button4")).left.trimRight("px") + "<br>" + 
  getOffset(document.getElementById("red_button5")).top.trimRight("px") + ", " + getOffset(document.getElementById("red_button5")).left.trimRight("px") + "<br>" + 
  getOffset(document.getElementById("blue_button1")).top.trimRight("px") + ", " + getOffset(document.getElementById("blue_button1")).left.trimRight("px") + "<br>" + 
  getOffset(document.getElementById("blue_button2")).top.trimRight("px") + ", " + getOffset(document.getElementById("blue_button2")).left.trimRight("px") + "<br>" + 
  getOffset(document.getElementById("blue_button3")).top.trimRight("px") + ", " + getOffset(document.getElementById("blue_button3")).left.trimRight("px") + "<br>" + 
  getOffset(document.getElementById("blue_button4")).top.trimRight("px") + ", " + getOffset(document.getElementById("blue_button4")).left.trimRight("px") + "<br>" + 
  getOffset(document.getElementById("blue_button5")).top.trimRight("px") + ", " + getOffset(document.getElementById("blue_button5")).left.trimRight("px");
}

</script>



</body></html>

enter image description here

以下是我原创作品的代码：

import streamlit as st
from joblib import load
import seaborn as sns
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.patches import Circle, Rectangle, Arc
import plotly
from plotly.subplots import make_subplots
import plotly.graph_objects as go


# draw the half court
def create_half_court(ax=None, three_line='mens', court_color='#dfbb85',
                      lw=3, lines_color='black', lines_alpha=0.5,
                      paint_fill='blue', paint_alpha=0.4,
                      inner_arc=False):
    """
    Version 2020.2.19

    Creates NBA Basketball Half Court
    Dimensions are in feet (Court is 97x50 ft)
    Created by: Rob Mulla / https://github.com/RobMulla

    * Note that this function uses "feet" as the unit of measure.
    * Our data is within this range: -47 <= x <= 47, -25 <= y <= 25.
    * So to plot X/Y positions first convert to feet like this:
    ```
    loc['loc_x_'] = 47 - loc['loc_x_']
    loc['loc_y_'] = 25 - loc['loc_y_']
    ```
    ax: matplotlib axes if None gets current axes using `plt.gca`
    
    three_line: 'mens', 'womens' or 'both' defines 3 point line plotted
    court_color : (hex) Color of the court
    lw : line width
    lines_color : Color of the lines
    lines_alpha : transparency of lines
    paint_fill : Color inside the paint
    paint_alpha : transparency of the "paint"
    inner_arc : paint the dotted inner arc
    """
    if ax is None:
        ax = plt.gca()

    # Create Pathes for Court Lines
    center_circle = Circle((50 / 2, 94 / 2), 6,
                           linewidth=lw, color=lines_color, lw=lw,
                           fill=False, alpha=lines_alpha)
    hoop = Circle((50 / 2, 5.25), 1.5 / 2,
                  linewidth=lw, color=lines_color, lw=lw,
                  fill=False, alpha=lines_alpha)

    # Paint - 18 Feet 10 inches which converts to 18.833333 feet - gross!
    paint = Rectangle(((50 / 2) - 6, 0), 12, 18.833333,
                      fill=paint_fill, alpha=paint_alpha,
                      lw=lw, edgecolor=None)

    paint_boarder = Rectangle(((50 / 2) - 6, 0), 12, 18.833333,
                              fill=False, alpha=lines_alpha,
                              lw=lw, edgecolor=lines_color)

    arc = Arc((50 / 2, 18.833333), 12, 12, theta1=-
    0, theta2=180, color=lines_color, lw=lw,
              alpha=lines_alpha)

    block1 = Rectangle(((50 / 2) - 6 - 0.666, 7), 0.666, 1,
                       fill=True, alpha=lines_alpha,
                       lw=0, edgecolor=lines_color,
                       facecolor=lines_color)
    block2 = Rectangle(((50 / 2) + 6, 7), 0.666, 1,
                       fill=True, alpha=lines_alpha,
                       lw=0, edgecolor=lines_color,
                       facecolor=lines_color)
    ax.add_patch(block1)
    ax.add_patch(block2)

    l1 = Rectangle(((50 / 2) - 6 - 0.666, 11), 0.666, 0.166,
                   fill=True, alpha=lines_alpha,
                   lw=0, edgecolor=lines_color,
                   facecolor=lines_color)
    l2 = Rectangle(((50 / 2) - 6 - 0.666, 14), 0.666, 0.166,
                   fill=True, alpha=lines_alpha,
                   lw=0, edgecolor=lines_color,
                   facecolor=lines_color)
    l3 = Rectangle(((50 / 2) - 6 - 0.666, 17), 0.666, 0.166,
                   fill=True, alpha=lines_alpha,
                   lw=0, edgecolor=lines_color,
                   facecolor=lines_color)
    ax.add_patch(l1)
    ax.add_patch(l2)
    ax.add_patch(l3)
    l4 = Rectangle(((50 / 2) + 6, 11), 0.666, 0.166,
                   fill=True, alpha=lines_alpha,
                   lw=0, edgecolor=lines_color,
                   facecolor=lines_color)
    l5 = Rectangle(((50 / 2) + 6, 14), 0.666, 0.166,
                   fill=True, alpha=lines_alpha,
                   lw=0, edgecolor=lines_color,
                   facecolor=lines_color)
    l6 = Rectangle(((50 / 2) + 6, 17), 0.666, 0.166,
                   fill=True, alpha=lines_alpha,
                   lw=0, edgecolor=lines_color,
                   facecolor=lines_color)
    ax.add_patch(l4)
    ax.add_patch(l5)
    ax.add_patch(l6)

    # 3 Point Line
    if (three_line == 'mens') | (three_line == 'both'):
        # 22' 1.75" distance to center of hoop
        three_pt = Arc((50 / 2, 6.25), 44.291, 44.291, theta1=12,
                       theta2=168, color=lines_color, lw=lw,
                       alpha=lines_alpha)

        # 4.25 feet max to sideline for mens
        ax.plot((3.34, 3.34), (0, 11.20),
                color=lines_color, lw=lw, alpha=lines_alpha)
        ax.plot((50 - 3.34, 50 - 3.34), (0, 11.20),
                color=lines_color, lw=lw, alpha=lines_alpha)
        ax.add_patch(three_pt)

    if (three_line == 'womens') | (three_line == 'both'):
        # womens 3
        three_pt_w = Arc((50 / 2, 6.25), 20.75 * 2, 20.75 * 2, theta1=5,
                         theta2=175, color=lines_color, lw=lw, alpha=lines_alpha)
        # 4.25 inches max to sideline for mens
        ax.plot((4.25, 4.25), (0, 8), color=lines_color,
                lw=lw, alpha=lines_alpha)
        ax.plot((50 - 4.25, 50 - 4.25), (0, 8.1),
                color=lines_color, lw=lw, alpha=lines_alpha)

        ax.add_patch(three_pt_w)

    # Add Patches
    ax.add_patch(paint)
    ax.add_patch(paint_boarder)
    ax.add_patch(center_circle)
    ax.add_patch(hoop)
    ax.add_patch(arc)

    if inner_arc:
        inner_arc = Arc((50 / 2, 18.833333), 12, 12, theta1=180,
                        theta2=0, color=lines_color, lw=lw,
                        alpha=lines_alpha, ls='--')
        ax.add_patch(inner_arc)

    # Restricted Area Marker
    restricted_area = Arc((50 / 2, 6.25), 8, 8, theta1=0,
                          theta2=180, color=lines_color, lw=lw,
                          alpha=lines_alpha)
    ax.add_patch(restricted_area)

    # Backboard
    ax.plot(((50 / 2) - 3, (50 / 2) + 3), (4, 4),
            color=lines_color, lw=lw * 1.5, alpha=lines_alpha)
    ax.plot((50 / 2, 50 / 2), (4.3, 4), color=lines_color,
            lw=lw, alpha=lines_alpha)

    # Half Court Line
    ax.axhline(94 / 2, color=lines_color, lw=lw, alpha=lines_alpha)

    # Plot Limit
    ax.set_xlim(0, 50)
    ax.set_ylim(0, 94 / 2 + 2)
    ax.set_facecolor(court_color)
    ax.set_xticks([])
    ax.set_yticks([])
    ax.set_xlabel('')
    return ax


def slider_setting(condition, position):
    x = st.sidebar.slider('Coordinate X for ' + condition + ' Player ' + str(position), min_value=-47., max_value=47.,
                          value=0., step=0.1)
    y = st.sidebar.slider('Coordinate Y for ' + condition + ' Player ' + str(position), min_value=-25., max_value=25.,
                          value=0., step=0.1)
    return x, y


def locate(locations, court):
    off_ = pd.DataFrame({
        'X': [47 - location[0] if location[0] >= 0 else 47 + location[0] for location in locations[:5]],
        'Y': [25 - location[1] for location in locations[:5]]
        })
    def_ = pd.DataFrame({
        'X': [47 - location[0] if location[0] >= 0 else 47 + location[0] for location in locations[5:]],
        'Y': [25 - location[1] for location in locations[5:]]
        })
    off_.plot(x='Y', y='X', style='X', ax=court, alpha=1, label='Offensive players')
    def_.plot(x='Y', y='X', style='X', ax=court, alpha=1, label='Defensive players')
    label_point(off_, court)
    label_point(def_, court)

def label_point(df, ax):
    for i, point in df.iterrows():
        ax.text(point[df.columns[1]]+ .2, point[df.columns[0]], str(int(i+1)), size=20)

def preprocess(locations):
    input = pd.DataFrame(
        {
            'AtShot_loc_x_off_player_1': [locations[0][0]],
            'AtShot_loc_y_off_player_1': [locations[0][1]],
            'AtShot_loc_x_off_player_2': [locations[1][0]],
            'AtShot_loc_y_off_player_2': [locations[1][1]],
            'AtShot_loc_x_off_player_3': [locations[2][0]],
            'AtShot_loc_y_off_player_3': [locations[2][1]],
            'AtShot_loc_x_off_player_4': [locations[3][0]],
            'AtShot_loc_y_off_player_4': [locations[3][1]],
            'AtShot_loc_x_off_player_5': [locations[4][0]],
            'AtShot_loc_y_off_player_5': [locations[4][1]],
            'AtShot_loc_x_def_player_1': [locations[5][0]],
            'AtShot_loc_y_def_player_1': [locations[5][1]],
            'AtShot_loc_x_def_player_2': [locations[6][0]],
            'AtShot_loc_y_def_player_2': [locations[6][1]],
            'AtShot_loc_x_def_player_3': [locations[7][0]],
            'AtShot_loc_y_def_player_3': [locations[7][1]],
            'AtShot_loc_x_def_player_4': [locations[8][0]],
            'AtShot_loc_y_def_player_4': [locations[8][1]],
            'AtShot_loc_x_def_player_5': [locations[9][0]],
            'AtShot_loc_y_def_player_5': [locations[9][1]]
        }
    )

    input[[col for col in input.columns if '_y_' in col]] = (25 - input[
        [col for col in input.columns if '_y_' in col]]) / (25 - (-25))
    input[[col for col in input.columns if '_x_' in col]] = (47 - input[
        [col for col in input.columns if '_x_' in col]]) / (47 - (-47))
    return input


def stack_bar(offensive_proba, defensive_proba):
    fig = make_subplots(rows=2, cols=1, shared_xaxes=True, vertical_spacing = 0.15)
    probas = ['Offending<br>Team<br>', 'Deffending<br>Team<br>']  # text to show

    # Move common code to a function to reuse multiple times:
    def plot_bar(probas, visible):
        x_list = [offensive_proba, defensive_proba]
        for x, proba in zip(x_list, probas):
            fig.add_trace(
                go.Bar(x=[x * 100],  # just one number value for a bar
                       y=['Probability'],
                       name='Probability',
                       visible=visible,
                       opacity=1,
                       orientation='h',
                       text=(x),
                       textposition='inside',
                       texttemplate=proba + '%{text:.1%}'),
                row=1, col=1)

    plot_bar(probas, True)
    fig.update_layout(barmode='stack')
    # Controlling text fontsize with uniformtext
    fig.update_layout(showlegend=False)  # hide ledend
    # Set axis font:
    fig.update_yaxes(tickfont=dict(size=14))
    st.plotly_chart(fig, use_container_width=True)


if __name__ == '__main__':
    # this is the trained model
    LDA = load('LDA.joblib')
    st.write('''
    # Welcome to Rebound Probability Prediction!
    ''')
    # placeholder
    imageLocation = st.empty()
    fig, court_ax = plt.subplots(1, 1, figsize=(11, 11.2))
    create_half_court(court_ax,
                           three_line='mens',
                           paint_alpha=0.4,
                           inner_arc=True)
    # plot the half court without scatter
    imageLocation.pyplot(fig)
    st.sidebar.header('Input players\' locations when the ball is shot:')

    locations = []
    for condition in ['Offensive', 'Defensive']:
        for i in range(5):
            x, y = slider_setting(condition, i + 1)
            locations.append((x, y))

    button = st.sidebar.button('Confirm')

    if button:
        # plot the locations of players on the court
        locate(locations, court_ax)
        imageLocation.pyplot(fig)

        # pre-processing
        input = preprocess(locations)

        ## predict
        # individual
        individual_prediction = LDA.predict_proba(input)[0]
        # team
        offensive_proba = sum(individual_prediction[:5])
        defensive_proba = sum(individual_prediction[5:])

        ## data vis
        # individual
        results = pd.DataFrame(
            {
                'Players': ['Offensive Player 1', 'Offensive Player 2', 'Offensive Player 3', 'Offensive Player 4',
                            'Offensive Player 5',
                            'Defensive Player 1', 'Defensive Player 2', 'Defensive Player 3', 'Defensive Player 4',
                            'Defensive Player 5'],
                'Probability': individual_prediction
            }

        )
        st.write('## Individual Probability')
        cm = sns.light_palette("orange", as_cmap=True)
        results = results.sort_values(by=['Probability'], ascending=False)
        st.dataframe(results.style.background_gradient(cmap=cm).set_precision(2))

        # team
        st.write('## Team Probability')
        stack_bar(offensive_proba, defensive_proba)

        # celebrate
        st.balloons()

Tags： alphadivtopblueredaxleftdocument
1条回答
网友
1楼 · 发布于 2024-06-26 14:03:15

我后来通过让Flask直接访问这些位置来更改我的解决方案。它只需要将值分配给一个不可见的textarea，这样我们就可以在使用Flask时访问它

代码如下所示： HTML:

<form method="post" action="{{ url_for('main') }}" id="form">
  <div class="form-group">
    <textarea name="hidden" class="form-control" style="display: none;" value="" id="hidden"></textarea> 
  </div>
  <input type="submit" value="Confirm" onclick="Assign()" align="center">
</form>
<script>
function Assign()
{
  document.getElementById("hidden").value = "some values";
}

Python:

@app.route('/', methods=['GET', 'POST'])
def main():
    if request.method == 'POST':
            value_you_want = request.form['hidden']

相关问题 更多 >

    编程相关推荐